Skip to main content

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

​
Interacting With Contracts

Now, let’s take a look at how we interact with our deployed contracts. It is beyond the scope of this guide to go into this in detail. For a detailed explanation with examples, we recommend reading the Rainbowkit and wagmi documentation. Our dApp uses functions provided by wagmi to interact with the Dukong testnet, our connected wallet, and our contracts. The sample app provides several hooks, found in the /frontend/hooks directory. These hooks are used to both read and write transactions on our deployed contracts. For example, here is the hook for the Whitelist: 
import { useMemo } from 'react';
import { useAccount, useReadContract, useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
import { whitelistAbi } from '../lib/abis/whitelist';
import { WHITELIST_ADDRESS } from '../lib/addresses';

export function useWhitelist() {
  const { address: connected } = useAccount();

  const { data: owner } = useReadContract({
    address: WHITELIST_ADDRESS,
    abi: whitelistAbi,
    functionName: 'owner',
  });

  const isOwner = useMemo(
    () => !!connected && !!owner && connected.toLowerCase() === (owner as string).toLowerCase(),
    [connected, owner]
  );

  const { writeContract, data: hash, isPending } = useWriteContract();
  const receipt = useWaitForTransactionReceipt({ hash });

  const approve = (project: `0x${string}`, investor: `0x${string}`) =>
    writeContract({ address: WHITELIST_ADDRESS, abi: whitelistAbi, functionName: 'approve', args: [project, investor] });

  const revoke = (project: `0x${string}`, investor: `0x${string}`) =>
    writeContract({ address: WHITELIST_ADDRESS, abi: whitelistAbi, functionName: 'revoke', args: [project, investor] });

  return { owner, isOwner, hash, isPending, receipt, approve, revoke };
}
You will notice the useAccount, useReadContract, useWriteContract, and useWaitForTransactionReceipt functions that allow us to get the connected account, send read and write transactions, and wait for our transaction receipts. We can then use this hook (and the others) in our dApps components to provide a meaningful user interface for our users to interact with out contracts. As an example, below is the ContractInfo component that we use in our dApp to display information about the Whitelist contract: 
import { useAccount } from 'wagmi';
import { WHITELIST_ADDRESS } from '../../lib/addresses';
import { useWhitelist } from '../../hooks/useWhitelist';

export default function ContractInfo() {
  const { address } = useAccount();
  const { owner, isOwner } = useWhitelist();

  return (
    <div>
      <p><strong>Whitelist:</strong> <code>{WHITELIST_ADDRESS}</code></p>
      <p><strong>Owner:</strong> <code>{owner ?? '—'}</code></p>
      <p><strong>You:</strong> <code>{address ?? 'Not connected'}</code></p>
      <p style={{ color: isOwner ? '#008000' : '#b00020' }}>{isOwner ? 'You are the owner' : 'You are not the owner'}</p>
    </div>
  );
}
You can see that we have imported the useWhitelist hook which we use to get the owner address, and a check isOwner to indicate if the connected account is the owner of the Whitelist contract. We will leave you to read through the other hooks and components to see how we read from our contracts and send transactions. But, as quick example, here is the useDeployProject hook which is used to send a transaction executing the deployProject() function of our RealEstateFactory contract: 
import { useCallback } from 'react';
import {
  useWriteContract,
  useWaitForTransactionReceipt,
} from 'wagmi';
import { decodeEventLog } from 'viem';
import { FACTORY_ADDRESS } from '../lib/addresses';
import { factoryAbi } from '../lib/abis/factory';

export function useDeployProject() {
  const { writeContract, data: hash, isPending, error: writeError } = useWriteContract();
  const { data: receipt, isLoading: confirming, isSuccess } =
    useWaitForTransactionReceipt({ hash });

  const deploy = useCallback((args: {
    name: string; symbol: string;
    propertyId: string; jurisdiction: string; metadataUri: string;
  }) => {
    writeContract({
      address: FACTORY_ADDRESS,
      abi: factoryAbi,
      functionName: 'deployProject',
      args: [
        args.name,
        args.symbol,
        args.propertyId,
        args.jurisdiction,
        args.metadataUri,
      ],
    });
  }, [writeContract]);

  // extract new project address if available
  let newProject: `0x${string}` | undefined;
  if (isSuccess && receipt?.logs?.length) {
    for (const log of receipt.logs) {
      try {
        const parsed = decodeEventLog({
          abi: factoryAbi,
          data: log.data,
          topics: log.topics,
        });
        if (parsed.eventName === 'ProjectCreated') {
          newProject = parsed.args.projectAddress as `0x${string}`;
          break;
        }
      } catch {}
    }
  }

  return {
    deploy,
    txHash: hash,
    newProject,
    isPending,
    confirming,
    isSuccess,
    writeError,
  };
}
This hook is used in the NewProjectForm component to provide the user interface for deploying RealEstateToken contracts.

​
The Completed dApp

With the configuration in place, and our dApp’s components, and hooks etc in place, we can run the dApp locally with the development server. In a terminal you can start the development server with: 
npm run dev
The dApp might take some time to compile but, when it is finished the dApp should be available to use on https://localhost:3000. You should see something like this:

​
Whitelist administration

The dApp provides a whitelist administration interface where you can approve and revoke investor addresses.

​
Create RealEstateToken projects

You can create new RealEstateToken projects through the dApp interface.

​
Manage RealEstateToken projects

The dApp allows you to manage your RealEstateToken projects, view project details, and mint tokens for approved investors. Of course, yours won’t be immediately populated with data. You will have no whitelisted investor addresses, and no projects. The account that you used to deploy the contracts with Foundry will be the owner of the Whitelist and RealEstateFactory contracts. If you have that account selected in your MetaMask wallet (its address should be shown on the connection button badge in the top right), then you will be able to approve and revoke account addresses as investors. Any of your accounts should be able to create a new RealEstateToken project. Just provide the required details and hit Create Project. From there, you can head over to the Manage Projects page and mint tokens for your approved investors. The Manage Projects page will display details of the project and the investors and their holdings.