Setting Up Rainbowkit

For the sample project we've used Rainbowkit to simplify wallet connections. Rainbowkit gives our frontend project out-of-the-box wallet management for our dapp. It also handles the connection and disconnection of wallets, and supports numerous wallets, swaps connection chains, displays balances and more! If you're a serious builder, we suggest you read more about creating dApps with Rainbowkit.

Unfortunately, the MANTRA Dukong Testnet is not yet supported by Rainbowkit. But, don't lose heart; we can easily provide the configuration that it needs to work with the Dukong testnet. The sample project is already configured and ready to go.

Chains

All we need to do to get Rainbowkit to work with our dApp, is provide the chain configuration. For our sample dApp, you'll find that configuration in the /frontend/src/chains/mantra.ts file. We configure Dukong like this:

import { Chain } from 'wagmi'

export const dukong: Chain = {
  id: 5887,
  name: 'MANTRACHAIN Testnet',
  network: 'dukong',
  nativeCurrency: {
    name: 'OM',
    symbol: 'OM',
    decimals: 18,
  },
  rpcUrls: {
    default: { http: ['https://evm.dukong.mantrachain.io'] },
    public:  { http: ['https://evm.dukong.mantrachain.io'] },
    webSocket: ['wss://evm.dukong.mantrachain.io/ws']
  },
  blockExplorers: {
    default: { name: 'MantraScan Dukong', url: 'https://mantrascan.io/dukong' }
  },
  testnet: true,
}

Next, all we need to do is import the dukong chain into the wagmi.ts configuration file, and add it to the chains array:

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import {
  arbitrum,
  base,
  mainnet,
  optimism,
  polygon,
  sepolia,
} from 'wagmi/chains';

import { dukong } from './chains/mantra';

export const config = getDefaultConfig({
  appName: 'RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [
    mainnet,
    polygon,
    optimism,
    arbitrum,
    base,
    dukong,
    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
  ],
  ssr: true,
});

Contract Addresses

Our frontend project should now be ready to interact with our deployed contracts. There's just one more step to complete the configuration, adding our contract addresses. We can do that with local environment variables.

First, create a file in the frontend root directory named .env.local. There are two entries that we need:

NEXT_PUBLIC_WHITELIST_ADDRESS=0x0
NEXT_PUBLIC_FACTORY_ADDRESS=0x0

Where 0x0 is the address of your deployed Whitelist and RealEstateFactory contracts. With environment variables named in this way, they will be made available to our dApp when running locally. There are various methods of providing these values in production environments. It is beyond the scope of this guide to delve into that as it may vary between hosting services.

To get access to these environment variables in our dApp, we get their values and export some constants that we can use when we need to interact with our contracts. We've added a file named addresses.ts with the following content to our project's lib directory:

export const WHITELIST_ADDRESS = process.env.NEXT_PUBLIC_WHITELIST_ADDRESS as `0x${string}`;
export const FACTORY_ADDRESS = process.env.NEXT_PUBLIC_FACTORY_ADDRESS as `0x${string}`;