EVM dApp Integration

Integrated with JS

CLV Extension Wallet injected into web pages a varible, which named 'clover'. DApp developer could integrate with the wallet with window.clover. Below snippet shows how to use it to interact between dapp and the wallet.

const example = async () => {
    // connect to wallet and get accounts
    const accounts = await window.clover.request({ method: 'eth_requestAccounts' })
    
    // the first account is the selected account
    const currAccount = accounts[0]
        
    // get chain id
    const chainId = await window.clover.request({ method: 'eth_chainId' });
    
    const transactionParameters = {
        nonce: '0x05',
        gasPrice: '0x3e95ba80', // could set by user
        gas: '0x2710', // could set by user
        to: '0x66cb476bdbd6b55804644072255a1156e6977b23',
        from: currAccount,
        value: '0x2386f26fc10000',
        chainId: chainId,
    };
    
    const txHash = await window.clover.request({
      method: 'eth_sendTransaction',
      params: [transactionParameters],
    });
}

const handleAccountsChanged = async (accounts) => {
    // here could set current account with accounts[0]
}
window.clover.on('accountsChanged', handleAccountsChanged);

const handleChainChanged = async (chainId) => {
  // do something when chain changed
}
window.clover.on('chainChanged', handleChainChanged)

CLV Extension Wallet supports dApp to add custom EVM chain and will support to switch to specified EVM Chain(from version 5.6.0 which will release soon). Below sample code shows how dApp to do these two operations.

// Add custom EVM chain, if the chain exists in wallet, it will switch to the chain.
if (window.clover) {
  try {
    await window.clover.request({
    method: 'wallet_addEthereumChain',
    params: [
      {
        chainId: '0x400',
        chainName: 'CLV ParaChain',
        nativeCurrency: {
            name: 'CLV',
            symbol: 'CLV',
            decimals: 18,
        },
        rpcUrls: ['https://api-para.clover.finance'],
        blockExplorerUrls: ['https://clvscan.com/'],
      },
    ]})
    return true
  } catch (error) {
  }
}

// Switch to specific EVM chain, if the chain does not exist in wallet yet, it 
// will throw error 4902
if (window.clover) {
  try {
    await window.clover.request({
      method: 'wallet_switchEthereumChain',
      params: [{ chainId: '0x400' }], // chainId must be in hexadecimal numbers
    });
  } catch (error) {
    if (error.code === 4902) {
      // could add chain here
    }
  }
}

Integrated with web3-react

First, install clover connector as dependency to your project:

npm i @clover-network/clover-connector
or 
yarn add @clover-network/clover-connector

Second, Web3ReactProvider and getLibrary should be used as provider as below:

<Web3ReactProvider getLibrary={getLibrary}>
    {/* <...> */}
</Web3ReactProvider>

Then, initialize cloverConnector, which could be used as connector to connect to Clover Extension Wallet.

const cloverConnector = new CloverConnector({ supportedChainIds: [1, 3] })

At last, we could use cloverConnector to connect to and communicate with the wallet

const { activate, deactivate, library, account, error } = useWeb3React()

useEffect(() => {
    activate(cloverConnector, async (error) => {
        if (error instanceof UnsupportedChainIdError) {
            setToast('error', 'Unsupported chain id')
        } else {
            if (error instanceof NoEthereumProviderError) {
                setToast('error', 'No provider was found')
            } else if (
                error instanceof UserRejectedRequestErrorInjected
            ) {
                setToast('error', 'Please authorize to access your account')
            } else {
                setToast('error', error.message)
            }
        }
    })
}, [activate])

useEffect(() => {
    const send = async () => {
        if (account !== undefined) {
            const chainId = '0x3';
    
            const transaction = {
                nonce: '0x05',
                to: account,
                from: account,
                value: '0x2386f26fc10000',
                chainId: chainId,
            };
            
            const txHash = await library.request({
              method: 'eth_sendTransaction',
              params: [transaction],
            });
        }
    }
    send()
}, [account, library])