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

Install webkit and import it in index.js

npm install @intuweb3/web-kit

index.jsx

const config = {
  authProviders: ["google", "twitter"], // List of authentication providers
  isCustomAuth: false, // Flag for using custom authentication
  styles: {
    applicationName: "Crypto Zombies", // Name displayed in the authentication UI
    applicationDescription: "My awesome dapp",
    applicationLogo: "https://api.dicebear.com/9.x/shapes/svg", // URL for your application logo
    theme: "dark", // Theme for the authentication UI (e.g., dark or light)
  },
  appId: "1:499664624959:web:bf72f54040d3a9c955878a", // If you setup your own firebase, you can plug your own appId in here.
  claimUrl: "https://your_faucet_url", // URL for airdrop tokens we assume a GET endpoint that will return tokens to address provided.
  //the node signer values aren't necessary for you to change, but if you do run your own co-signer, you will need to update these values.
  primaryNodeSigner: "0xb441Fdc1CDB173A353b97eAc4b821f75BC77B4E2" //these are INTU's node signers, if you run your own co-signer, you can sub in your own
  secondaryNodeSigner:"0x7d8a43adf7293cFe98cF3680adec6e2Bf0351587" //these are INTU's node signers, if you run your own co-signer, you can sub in your own
};

//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 "@intuweb3/web-kit";

//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 { connectIntu, isIntuConnected, disconnectIntu } = useConnect();

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

  return (
    <div>
      {isIntuConnected ? (
        <button onClick={disconnectIntu}>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 (currentIntuAccount !== null) {
        return;
      }
      await intuAirdrop(); // fund the user's microwallet
      await currentIntuAccount(); //Create an MPC account
      const accountData = await getIntuAccount();
      console.log(accountData) //check it out!
    } 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 intuAirdropMasterAccount(); //fund the master account
      const proposedTransaction = await createIntuTransaction({
        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