# How to Integrate Sequence Wallet with your decentralized application

Integrating your decentralized application with Sequence Wallet can provide your users with a secure and convenient way to sign transactions and interact with smart contracts within your application. In this article, we will guide you through the process of integrating Sequence Wallet with your dApp using `Rainbowkit`

# Github Code

For a more comprehensive understanding and implementation of this tutorial, check out the codebase [here](https://github.com/amoweolubusayo/sequencenft)

# Set up
Before you begin, make sure you have a package manager installed on your machine such as npm or yarn.

**To install npm**, you need Node.js on your machine. The installer can be found [here](https://nodejs.org/en/download). Select the one appropriate for you based on the spec of your computer. Sometimes, npm gets installed already this way. You can confirm that by running

npm -v

This should give an output like this


If you don't see an output similar to this, run the following command to install the latest version of npm globally on your computer.

npm install npm@latest -g

Run `npm -v` again and you would see the version of npm installed

**To install yarn**, follow the instructions about installing Node.js as above if you haven't done so before.

Then run this code after

npm install -g yarn

Proceed to confirm that yarn has been installed by running the following command

yarn -v

Your output should look similar to this


> It is advisable to have the latest version of npm or yarn installed

You also need some background knowlegde about `Rainbowkit`. Let's get started.

## RainbowKit
RainbowKit is a React-based library that simplifies the process of adding wallet connection functionality to your decentralized application. This library offers an intuitive and customizable interface. To read more about RainbowKit, you can check their docs out [here](https://www.rainbowkit.com/docs/introduction).

# Build a simple dApp with Next JS
Let's build a decentralized application that implements the sequence indexer. This dApp will display all the NFTs that are tied to any address connected to it.

Create a Next Js app by running the following command

npx create-next-app@latest sequencenft

> sequencenft is the name of your app, so you can change this to be anything really

You will be asked if you want to install some packages such as TypeScript, ESLint and Tailwind CSS. In this tutorial, we are using the ESLint and Tailwind packages. Next JS currently updated their project(file/folder) structure so you will be asked if you want to use the `src/` directory or experimental `app/` directory and the import alais you would like to configure. A screenshot to illustrate this is shown below


You can navigate to the project with this command

cd sequencenft && code .

This will open the project up in your IDE.

In your IDE e.g Visual Studio Code, open the integrated terminal and run this command

npm run dev

The default port it should run is 3000 so you should see an output like this


Go to your browser and type in the url http://localhost:3000

This will give this interface


Next, install the indexer package by running this command

npm i 0xsequence ethers

Navigate to src >> pages >> index.js.

Here we are changing the entire index.js and replacing it with this starter point code.

import Image from "next/image";
import { Inter } from "next/font/google";
import { useEffect, useState } from "react";
import { SequenceIndexerClient } from "@0xsequence/indexer";

const indexer = new SequenceIndexerClient(
  "https://polygon-indexer.sequence.app"
);

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  const [nftBalances, setNftBalances] = useState([]);

  useEffect(() => {
    // try any contract and account address you'd like :)
    const contractAddress = CONTRACT_ADDRESS_OF_NFT;
    const accountAddress = YOUR_ADDRESS;

    // query Sequence Indexer for all nft balances of the account on Polygon
    async function getNftBalances() {
      const balances = await indexer.getTokenBalances({
        contractAddress: contractAddress,
        accountAddress: accountAddress,
        includeMetadata: true,
      });
      console.log("balance is ", balances);
      setNftBalances(balances.balances);
    }
    getNftBalances();
  }, []);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-3xl font-bold text-gray-800 mb-4">My NFTs</h1>
      <ul className="bg-white rounded-md shadow-md w-96 p-4">
        {nftBalances.map((balance, index) => (
          <li key={index} className="flex justify-between items-center mb-2">
            <div className="flex items-center space-x-2">
              <Image
                src={balance.tokenMetadata.image}
                className="w-8 h-8"
                alt="NFT logo"
                width={32}
                height={32}
              />
              <div className="flex flex-col">
                <span className="font-medium text-sm text-black">
                  {balance.tokenMetadata.name}
                </span>
                <span className="text-sm text-gray-500">
                  {balance.tokenMetadata.symbol}
                </span>
              </div>
            </div>
            <span className="text-gray-700">{balance.tokenBalance}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

const indexer = new SequenceIndexerClient(
"https://polygon-indexer.sequence.app"
);

This address is sequence's polygon indexer. So it is specifically for addresses on the polygon chain (i.e NFTs deployed on Polygon). Sequence supports other networks so you can check out for other indexers [here](https://docs.sequence.xyz)

Go back to your terminal and run the following command again

npm run dev

You will see a list of all the NFTs available for the CONTRACT and ACCOUNT ADDRESS you provide in the code. For example, for the addresses this tutorial is using, this is what will be displayed


> In cases of any error related to images not rendering because the hostname isn't configured, in your next.config.js, add the hostname to the image domains. here is an example of all image domain that have been configured so you can add yours after

> images: {
domains: [
"images.unsplash.com",
"ipfs.io",
"imgur.com",
"plus.unsplash.com",
"i.imgur.com",
"ipfs.sequence.info"
],
},

This is a great step :confetti_ball: :confetti_ball: . Now let's go on with the rest of the tutorial.

# Sequence and RainbowKit

To use the RainbowKit selector so as to integrate sequence wallet, install the rainbowkit package using this command

npm install @0xsequence/rainbowkit-plugin

Now that you have installed the plugin, in the `src/pages` which is the same folder as the `index.js`, create a RainbowKit.js file and configure the provider and chains. Your code can look similar to this

import React from "react";
import { sequenceWallet } from "@0xsequence/rainbowkit-plugin";
import {
  RainbowKitProvider,
  getDefaultWallets,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import {
  argentWallet,
  trustWallet,
  ledgerWallet,
} from "@rainbow-me/rainbowkit/wallets";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  goerli,
  bsc,
} from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";

const { chains, provider, webSocketProvider } = configureChains(
  [mainnet, polygon, optimism, arbitrum, bsc],
  [publicProvider()]
);

const { wallets } = getDefaultWallets({
  appName: "RainbowKit demo",
  chains,
});

const demoAppInfo = {
  appName: "Rainbowkit Demo",
};

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "Other",
    wallets: [
      argentWallet({ chains }),
      trustWallet({ chains }),
      ledgerWallet({ chains }),
      sequenceWallet({ chains }),
    ],
  },
]);

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
  webSocketProvider,
});

function RainbowKitWrapper({ children }) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider appInfo={demoAppInfo} chains={chains}>
        {children}
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

export default RainbowKitWrapper;

This will serve as your wrapper. So in your `_app.js`, you will need to import dynamic from next and also need to set `ssr` to false.

Here is how your code should look like

import dynamic from 'next/dynamic'

const RainbowKitWrapper = dynamic(() => import('./RainbowKitProvider'), {
  ssr: false
})

Your full _app.js code is shown below

import "@/styles/globals.css";
import '@rainbow-me/rainbowkit/styles.css';
import dynamic from 'next/dynamic'

const RainbowKitWrapper = dynamic(() => import('./RainbowKitProvider'), {
  ssr: false
})

export default function App({ Component, pageProps }) {
  return (
      <RainbowKitWrapper>
        <Component {...pageProps} />
      </RainbowKitWrapper>
  );
}

Now let's go back to our `index.js `to make it more customizable. Remember your `accountAddress` was hard-coded initially but since we are adding sequence wallet, we can easily get the connected `accountAddress`. You can use [wagmi](https://wagmi.sh) to get the address that will be connected to sequence. Change YOUR_ADDRESS to {address}. Basically add the following

import { useAccount } from "wagmi";
const { address, isConnected } = useAccount();
  useEffect(() => {
    // try any contract and account address you'd like :)
    const contractAddress = "0x60f028C82f9f3bF71e0C13fE9e8E7f916b345C00";
    const accountAddress = { address };
....
 }, []);

Also, add the `<ConnectButton/>` from Rainbowkit.

import { ConnectButton } from "@rainbow-me/rainbowkit";

That means this is how your full code will look like

import Image from "next/image";
import { Inter } from "next/font/google";
import { useEffect, useState } from "react";
import { SequenceIndexerClient } from "@0xsequence/indexer";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { useAccount } from "wagmi";

const indexer = new SequenceIndexerClient(
  "https://polygon-indexer.sequence.app"
);

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  const [nftBalances, setNftBalances] = useState([]);
  const { address, isConnected } = useAccount();

  useEffect(() => {
    // try any nft contract address you'd like :)
    const contractAddress = "0x60f028C82f9f3bF71e0C13fE9e8E7f916b345C00";
    const accountAddress = { address };

    // query Sequence Indexer for all nft balances of the account on Polygon
    async function getNftBalances() {
      const balances = await indexer.getTokenBalances({
        contractAddress: contractAddress,
        accountAddress: accountAddress,
        includeMetadata: true,
      });
      console.log("balance is ", balances);
      setNftBalances(balances.balances);
    }
    getNftBalances();
  }, []);


    return (
      <>
        <div className="flex items-center justify-end mr-4">
          <ConnectButton label="Connect Wallet" className="bg-olive-500" />
        </div>
        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
          <h1 className="text-3xl font-bold text-gray-800 mb-4">My NFTs</h1>
          <ul className="bg-white rounded-md shadow-md w-96 p-4">
            {nftBalances.map((balance, index) => (
              <li
                key={index}
                className="flex justify-between items-center mb-2"
              >
                <div className="flex items-center space-x-2">
                  <Image
                    src={balance.tokenMetadata.image}
                    className="w-8 h-8"
                    alt="NFT logo"
                    width={32}
                    height={32}
                  />
                  <div className="flex flex-col">
                    <span className="font-medium text-sm text-black">
                      {balance.tokenMetadata.name}
                    </span>
                    <span className="text-sm text-gray-500">
                      {balance.tokenMetadata.symbol}
                    </span>
                  </div>
                </div>
                <span className="text-gray-700">{balance.tokenBalance}</span>
              </li>
            ))}
          </ul>
        </div>
      </>
    );
}

Proceed to run the final application using this command

npm run dev

Initially your dApp will appear empty like this


Click on Connect Wallet in the top right corner. Here is what will be displayed after.


You will notice that Sequence is part of the wallet options in RainbowKit. Click on Sequence. A new tab will open and it will ask for some form of authentication.


Other times, if you have used sequence before, it will ask for your permission to continue with the connection.


Click on continue.

What you will see next are all your NFTs. In this tutorial, only one NFT is available as shown below. Easy-peasy!!


Congratulations!! :confetti_ball: :confetti_ball: . You have successfully integrated Sequence wallet using the Rainbowkit plugin.

In the next tutorial we will learn how to integrate Sequence wallet using Web3Modal.