Get Started

The INTU webkit doesn't require any additional packages in your dapp. Just install it, import it, configure it, and get going!

Installing via npm: Open your terminal or command prompt. Navigate to your project directory. Run the following command to install the INTU Web Kit:

npm install @intuweb3/web-kit

or Installing via Yarn: If you prefer using Yarn, run the following command instead:

yarn add @intuweb3/web-kit

Either of the commands will download and install the INTU Web Kit and its dependencies into your project.

---

Now let's get into the basic configuration steps. Import the INTU Web Kit into your project by adding the following import statement to your index.js file.

import { IntuProvider } from '@intuweb3/web-kit';

Now we can configure INTU Web Kit to your React application through the IntuProvider component. This is done by wrapping the App component with IntuProvider passing an initial config object that contains various configuration settings for the SDK. This setup ensures that the SDK is properly initialized and available throughout your application.

Below is an example of how we can define the configuration object with settings for the INTU Web Kit:

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

Now to initialize your application, wrap the App component with the IntuProvider:

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