Contract Interaction (React.js)

Useful code snippets for contract interaction on React.js

Please check out Mint.club Javascript SDK first. This page shows the implementation of how the SDK works, in case you might want to tweak it to fit your own taste.

To interact with contracts, we first need to create a signer instance using our provider and account.

On Mint.club, we handle this by creating a useContract.js that contains multiple hooks that can be accessed from React.js components.

Hooks

useContracts.js

import { useMemo } from 'react';
import { useWeb3React } from '@web3-react/core';
import {
  getMintClubBondContract,
  getERC20Contract,
  getMintContract,
  getRouterContract,
  getWBNBContract,
  getMintTokenContract,
  getMintClubZapContract,
} from 'utils/contractHelpers';
import useWeb3Provider from 'hooks/useWeb3Provider';

export const useERC20Contract = (tokenAddress) => {
  const provider = useWeb3Provider();
  const { account } = useWeb3React();
  return useMemo(() => getERC20Contract(tokenAddress, provider.getSigner(account)), [provider, tokenAddress, account]);
};

export const useMintTokenContract = (tokenAddress) => {
  const provider = useWeb3Provider();
  const { account } = useWeb3React();
  return useMemo(
    () => getMintTokenContract(tokenAddress, provider.getSigner(account)),
    [provider, tokenAddress, account],
  );
};

export const useMintContract = () => {
  const provider = useWeb3Provider();
  const { account } = useWeb3React();
  return useMemo(() => getMintContract(provider.getSigner(account)), [provider, account]);
};

export const useMintClubBondContract = () => {
  const provider = useWeb3Provider();
  const { account } = useWeb3React();
  return useMemo(() => getMintClubBondContract(provider.getSigner(account)), [provider, account]);
};

export const useMintClubZapContract = () => {
  const provider = useWeb3Provider();
  const { account } = useWeb3React();
  return useMemo(() => getMintClubZapContract(provider.getSigner(account)), [provider, account]);
};

export const useRouterContract = () => {
  const provider = useWeb3Provider();
  const { account } = useWeb3React();
  return useMemo(() => getRouterContract(provider.getSigner(account)), [provider, account]);
};

export const useWBNBContract = () => {
  const provider = useWeb3Provider();
  const { account } = useWeb3React();
  return useMemo(() => getWBNBContract(provider.getSigner(account)), [provider, account]);
};

useWeb3Provider.js returns a provider, which allows us to call provider.getSigner(account) in the example above.

import { useEffect, useState, useRef } from 'react';
import { useWeb3React } from '@web3-react/core';
import { simpleRpcProvider } from 'utils/providers';

const useWeb3Provider = () => {
  const { library } = useWeb3React();
  const refEth = useRef(library);
  const [provider, setProvider] = useState(library || simpleRpcProvider);

  useEffect(() => {
    if (library !== refEth.current) {
      setProvider(library || simpleRpcProvider);
      refEth.current = library;
    }
  }, [library]);

  return provider;
};

export default useWeb3Provider;

Helpers

addressHelpers.js

import addresses from 'config/constants/contracts';
import { ethers } from 'ethers';

export function isValidAddress(value) {
  try {
    return ethers.utils.isAddress(value);
  } catch {
    return false;
  }
}

export const getMintClubBondAddress = (chainId) => {
  return addresses.mintClubBond[chainId];
};

export const getMintClubZapAddress = (chainId) => {
  return addresses.mintClubZap[chainId];
};

export const getWbnbAddress = (chainId) => {
  return addresses.wbnb[chainId];
};

export const getMintAddress = (chainId) => {
  return addresses.mint[chainId];
};

export const getRouterAddress = (chainId) => {
  return addresses.pancakeswapRouter[chainId];
};

contractHelpers.js :

You can find the ABI files on BSCScan, under the contracts tab. For example, you can find the ABI for the zap contract here: https://bscscan.com/address/0x5d1f0031eC952761294D6326A41f123AE7785546#code

import { ethers } from 'ethers';

// Addresses
import {
  getMintClubBondAddress,
  getMintClubZapAddress,
  getMintAddress,
  getRouterAddress,
  getWbnbAddress,
} from 'utils/addressHelpers';

// ABI
import mintAbi from 'config/abi/mint.json';
import wbnbAbi from 'config/abi/WETH.json';
import erc20Abi from 'config/abi/erc20.json';
import mintClubBondAbi from 'config/abi/mintClubBond.json';
import mintClubTokenAbi from 'config/abi/mintClubToken.json';
import mintClubZapAbi from 'config/abi/mintClubZap.json';
import { abi as IUniswapV2Router02ABI } from '@uniswap/v2-periphery/build/IUniswapV2Router02.json';
import { BSC_MAINNET, ETH_MAINNET } from 'config/constants/contracts';
import { simpleRpcProvider } from 'utils/providers';

const getContract = (abi, address, signer) => {
  const signerOrProvider = signer ?? simpleRpcProvider;
  return new ethers.Contract(address, abi, signerOrProvider);
};

export const getERC20Contract = (address, signer) => {
  return getContract(erc20Abi, address, signer);
};

export const getMintTokenContract = (address, signer) => {
  return getContract(mintClubTokenAbi, address, signer);
};

export const getMintContract = (signer, chainId = BSC_MAINNET) => {
  return getContract(mintAbi, getMintAddress(chainId), signer);
};

export const getMintClubBondContract = (signer, chainId = BSC_MAINNET) => {
  return getContract(mintClubBondAbi, getMintClubBondAddress(chainId), signer);
};

export const getMintClubZapContract = (signer, chainId = BSC_MAINNET) => {
  return getContract(mintClubZapAbi, getMintClubZapAddress(chainId), signer);
};

export const getRouterContract = (signer, chainId = BSC_MAINNET) => {
  return getContract(IUniswapV2Router02ABI, getRouterAddress(chainId), signer);
};

export const getWBNBContract = (signer, chainId = BSC_MAINNET) => {
  return getContract(wbnbAbi, getWbnbAddress(chainId), signer);
};

Utilities

providers.js returns a simple rpc provider in case there is no provider given (before the user connects their wallet) in the dapp.

import { ethers } from 'ethers';
import getRpcUrl from 'utils/getRpcUrl';

const RPC_URL = getRpcUrl();

export const simpleRpcProvider = new ethers.providers.JsonRpcProvider(RPC_URL);

getRpcUrl.js returns a random RPC node for the simpleRpcProvider to use.

import sample from 'lodash/sample';

/* 

.env file

# 10+ nodes balanced, US/EU
REACT_APP_NODE_1 = "https://bsc-dataseed1.ninicoin.io"

# 10+ nodes balanced, US/EU
REACT_APP_NODE_2 = "https://bsc-dataseed1.defibit.io"

# 10+ nodes balanced in each region, global
REACT_APP_NODE_3 = "https://bsc-dataseed.binance.org"

*/


// Array of available nodes to connect to
export const nodes = [process.env.REACT_APP_NODE_1, process.env.REACT_APP_NODE_2, process.env.REACT_APP_NODE_3];

const getNodeUrl = () => {
  return sample(nodes);
};

export default getNodeUrl;

Constants

export const ETH_MAINNET = 1;
export const ETH_GOERLI = 5;
export const BSC_TESTNET = 97;
export const BSC_MAINNET = 56;

const data = {
  mintClubBond: {
    [BSC_TESTNET]: '0xB9B492B5D470ae0eB2BB07a87062EC97615d8b09',
    [BSC_MAINNET]: '0x8BBac0C7583Cc146244a18863E708bFFbbF19975',
  },
  mintClubZap: {
    [BSC_MAINNET]: '0x1be3594f756C6725Fe99741077DEEB87f531B31F',
  },
  mint: {
    [BSC_TESTNET]: '0x4d24BF63E5d6E03708e2DFd5cc8253B3f22FE913',
    [BSC_MAINNET]: '0x1f3Af095CDa17d63cad238358837321e95FC5915',
  },
  pancakeswapRouter: {
    [BSC_TESTNET]: '0xD99D1c33F9fC3444f8101754aBC46c52416550D1',
    [BSC_MAINNET]: '0x10ED43C718714eb63d5aA57B78B54704E256024E',
  },
  wbnb: {
    [BSC_MAINNET]: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c',
  },
  busd: {
    [BSC_MAINNET]: '0xe9e7cea3dedca5984780bafc599bd69add087d56',
  },
  mintdao: {
    [BSC_MAINNET]: '0x558810B46101DE82b579DD1950E9C717dCc28338',
  }
};

export const ADDRESS_TO_SYMBOL = {
  '0x1f3Af095CDa17d63cad238358837321e95FC5915': 'mint',
  '0xe9e7cea3dedca5984780bafc599bd69add087d56': 'busd',
  '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c': 'wbnb',
};

export default data;

For a more complete example, we recommend you to refer PancakeSwap source code.