Complete Example

This page is intended to show you how to fully integrate the intu web kit into a project.

First, the change to your index.js

index.js

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
};

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

Then, the functionality we add to our app.js

app.js

import { useState, useEffect } from "react";
import {
  useConnect,
  useAccount,
  useTransaction,
  IntuTransactionModal,
} from "@intuweb3/web-kit";

//whatever else you import

function App() {
  const { isIntuConnected, userIntuInfo, disconnectIntu, connectIntu } =
    useConnect();
  const {
    isCreatingIntuAccount,
    currentIntuAccount,
    intuAirdrop,
    intuAirdropMasterAccount,
    createIntuAccount,
    getIntuAccount,
  } = useAccount();
  const { createIntuTransaction } = useTransaction();

  const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
  const [intuVaults, setIntuVaults] = useState([]);
  const [gatheringVaults, setGatheringVaults] = useState(false);
  const [creatingAccount, setCreatingAccount] = useState(false);

  useEffect(() => {
    const initializeAccount = async () => {
      if (intuVaults.length === 0 && userIntuInfo) {
        setGatheringVaults(true);
        let vaultsData = await getIntuAccount();
        console.log("User's information:");
        console.log(userIntuInfo); //information from login
        console.log(vaultsData); //does user have existing vaults
        if (vaultsData) {
          setIntuVaults(vaultsData);
        } else {
          setCreatingAccount(true);
          intuAirdrop();
          await sleep(1000);
          await createIntuAccount();
          console.log("done creating account");
          setCreatingAccount(false);
          vaultsData = await getIntuAccount();
          if (vaultsData) {
            setIntuVaults(vaultsData);
          }
        }
      }
      setGatheringVaults(false);
    };
    if (isIntuConnected) {
      initializeAccount();
    }
    console.log(userIntuInfo);
  }, [isIntuConnected, userIntuInfo, currentIntuAccount]);

  let submitTx = async (address, amount) => {
    await intuAirdropMasterAccount();

    try {
      await createIntuTransaction({
        toAddress: address,
        amount: amount,
      });
      console.log("Transaction created successfully!");
    } catch (err) {
      console.log(err);
    }
  };

  const LoginButton = () => {
    return (
      <div>
        {isIntuConnected ? (
          <div style={{ float: "right" }}>
            {!isCreatingIntuAccount ? (
              <button onClick={disconnectIntu}>Disconnect</button>
            ) : (
              <div>Creating Account...</div>
            )}
          </div>
        ) : (
          <button onClick={connectIntu}>INTU Connect</button>
        )}
      </div>
    );
  };

  return (
    <div>
      <IntuTransactionModal />
      <LoginButton />
      ... your UI ...
      <button onClick={() => submitTx("0x1234567890abcdef", 100)}>
        Submit tx
      </button>
    </div>
  );
}