Quickstart WebKit

The goal of this page is to get you from Zero to INTU Account created via Social Login in the fastest possible time.

Setup

Import WebKit in index.js

npm install @intuweb3/steven-web-kit

...
import { IntuProvider } from '@intuweb3/steven-web-kit';
...
const config = {
  authProviders: ["google", "twitter"], // List of authentication providers
  isCustomAuth: false, // Flag for using custom authentication
  customAuth: {
    uniqueId: "sub", // Unique ID for custom authentication, if applicable
  },
  styles: {
    applicationName: "My App Name", // Name displayed in the authentication UI
    applicationLogo: "https://cryptologos.cc/logos/ethereum-eth-logo.png?v=035", // URL for your application logo
    theme: "dark", // Theme for the authentication UI (e.g., dark or light)
  },
  claimUrl: process.env.REACT_APP_CLAIM_URL, // URL for airdrop tokens(from environment variable)
};

//Finally, wrap your App component in IntuProvider

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <IntuProvider initialConfig={config}>
      <App />
    </IntuProvider>
  </React.StrictMode>
);

Integration into our app.js

Here we will define 3 functions which will create the login popup for the user, create an account for them, and then submit/send a transaction for them. You can then use those functions as needed.

import {
  useConnect,
  useAccount,
  useTransaction,
  IntuTransactionModal,
} from "@intuweb3kit";

//grab functions from the hooks
  const { connectIntu, isIntuConnected, disconnectIntu, userIntuInfo } = useConnect();
  const {isCreatingIntuAccount,currentIntuAccount,intuAirdrop, intuAirdropMasterAccount, getIntuAccount,
  } = useAccount();
  const { createIntuTransaction } = useTransaction();

//login button
export const LoginButton = () => {
  const { connect, isConnected, disconnect } = useConnect();

  const connectHandler = async () => {
    await connect(); // Call the connect method to initiate the login process
  };

  return (
    <div>
      {isConnected ? (
        <button onClick={disconnect}>Disconnect</button>
      ) : (
        <button onClick={connectHandler}>INTU Connect</button>
      )}
    </div>
  );
};

//Create account for user // takes 10-15 seconds right now, so you might want to have the user fill out a form or show them something cool!
const handleCreateVaultClick = async () => {
    try {
      // proceed only if the user has no accounts
      if (account !== null) {
        return;
      }
      await airdrop();
      await createAccount();
      const vaultsData = await getAccount();
      console.log(vaultsData)
    } catch (error) {
      console.error("Failed to create an account:", error);
    }
 };

 //Now that we have an account, try sending some funds from the INTU MPC.
 const handleCreateTransaction = async () => {
  try {
    await airDropMasterAccount();
      const proposedTransaction = await createTransaction({
        toAddress: "0x0D44DE3938XXXXXXXXXXXXXXXXXX",
        amount: 0.0001,
      });
    } catch (err) {
      console.log(err);
    }
};

What now?

Great! Just use the functions to:

1. Have the client login with their social
2. Perform the create account action (while occupying the user with something else)
3. Use their MPC! They can start signing messages or sending transactions.