Portal
Search…
dApp Integration

Integrated with JS

Clover 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
31
window.clover.on('accountsChanged', handleAccountsChanged);
32
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!
Last modified 3mo ago