Skip to main content

Start

First, We assume your machine is up to date with the tools outlined here: Setup Dev Environment.

INTU currently only supports Ethers version 5.7.2.

Then:

  1. 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/exp-web-kit
  1. Installing via Yarn: If you prefer using Yarn, run the following command instead:
yarn add @intuweb3/exp-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/exp-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
  customAuth: {
    uniqueId: "sub", // Unique ID for custom authentication, if applicable
  },
  styles: {
    applicationName: "Crypto Zombies", // Name displayed in the authentication UI
    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)
  },
  claimUrl: process.env.REACT_APP_CLAIM_URL, // URL for airdrop tokens(from environment variable)
};

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