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.
1
const example = async () => {
2
    // connect to wallet and get accounts
3
    const accounts = await window.clover.request({ method: 'eth_requestAccounts' })
4
    
5
    // the first account is the selected account
6
    const currAccount = accounts[0]
7
        
8
    // get chain id
9
    const chainId = await window.clover.request({ method: 'eth_chainId' });
10
    
11
    const transactionParameters = {
12
        nonce: '0x05',
13
        gasPrice: '0x3e95ba80', // could set by user
14
        gas: '0x2710', // could set by user
15
        to: '0x66cb476bdbd6b55804644072255a1156e6977b23',
16
        from: currAccount,
17
        value: '0x2386f26fc10000',
18
        chainId: chainId,
19
    };
20
    
21
    const txHash = await window.clover.request({
22
      method: 'eth_sendTransaction',
23
      params: [transactionParameters],
24
    });
25
}
26
​
27
const handleAccountsChanged = async (accounts) => {
28
    // here could set current account with accounts[0]
29
}
30
window.clover.on('accountsChanged', handleAccountsChanged);
31
​
32
const handleChainChanged = async (chainId) => {
33
  // do something when chain changed
34
}
35
window.clover.on('chainChanged', handleChainChanged)
36
​
Copied!
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.
1
// Add custom EVM chain, if the chain exists in wallet, it will switch to the chain.
2
if (window.clover) {
3
  try {
4
    await window.clover.request({
5
    method: 'wallet_addEthereumChain',
6
    params: [
7
      {
8
        chainId: '0x400',
9
        chainName: 'CLV ParaChain',
10
        nativeCurrency: {
11
            name: 'CLV',
12
            symbol: 'CLV',
13
            decimals: 18,
14
        },
15
        rpcUrls: ['https://api-para.clover.finance'],
16
        blockExplorerUrls: ['https://clvscan.com/'],
17
      },
18
    ]})
19
    return true
20
  } catch (error) {
21
  }
22
}
23
​
24
// Switch to specific EVM chain, if the chain does not exist in wallet yet, it 
25
// will throw error 4902
26
if (window.clover) {
27
  try {
28
    await window.clover.request({
29
      method: 'wallet_switchEthereumChain',
30
      params: [{ chainId: '0x400' }], // chainId must be in hexadecimal numbers
31
    });
32
  } catch (error) {
33
    if (error.code === 4902) {
34
      // could add chain here
35
    }
36
  }
37
}
Copied!
Integrated with web3-react
First, install clover connector as dependency to your project:
1
npm i @clover-network/clover-connector
2
or 
3
yarn add @clover-network/clover-connector
Copied!
Second, Web3ReactProvider and getLibrary should be used as provider as below:
1
<Web3ReactProvider getLibrary={getLibrary}>
2
    {/* <...> */}
3
</Web3ReactProvider>
4
​
Copied!
Then, initialize cloverConnector, which could be used as connector to connect to Clover Extension Wallet.
1
const cloverConnector = new CloverConnector({ supportedChainIds: [1, 3] })
Copied!
At last, we could use cloverConnector to connect to and communicate with the wallet
1
const { activate, deactivate, library, account, error } = useWeb3React()
2
​
3
useEffect(() => {
4
    activate(cloverConnector, async (error) => {
5
        if (error instanceof UnsupportedChainIdError) {
6
            setToast('error', 'Unsupported chain id')
7
        } else {
8
            if (error instanceof NoEthereumProviderError) {
9
                setToast('error', 'No provider was found')
10
            } else if (
11
                error instanceof UserRejectedRequestErrorInjected
12
            ) {
13
                setToast('error', 'Please authorize to access your account')
14
            } else {
15
                setToast('error', error.message)
16
            }
17
        }
18
    })
19
}, [activate])
20
​
21
useEffect(() => {
22
    const send = async () => {
23
        if (account !== undefined) {
24
            const chainId = '0x3';
25
    
26
            const transaction = {
27
                nonce: '0x05',
28
                to: account,
29
                from: account,
30
                value: '0x2386f26fc10000',
31
                chainId: chainId,
32
            };
33
            
34
            const txHash = await library.request({
35
              method: 'eth_sendTransaction',
36
              params: [transaction],
37
            });
38
        }
39
    }
40
    send()
41
}, [account, library])
42
​
Copied!
​

web3_sha3

Next - CLV Wallet Developer Guide

Substrate dApp Integration

Last modified 5d ago

Copy link

Contents

Integrated with JS

Integrated with web3-react