Blocto
Search…
Web3-React Connector
Use blocto-connector to connect Blocto wallet SDK with web3-react easily
If you are using web3-react for your project, we provide a connector module for you to connect Blocto wallet SDK easily.
Note that Blocto SDK for Ethereum-like chains is still in Beta. APIs are subject to breaking changes.
Install from npm/yarn
1
$ yarn add @blocto/blocto-connector
Copied!
Import and initiate Blocto-Connector
1
import { BloctoConnector } from '@blocto/blocto-connector'
2
​
3
const connector = new BloctoConnector({
4
chainId: NETWORK_CHAIN_ID,
5
rpc: NETWORK_URL
6
})
Copied!

Blocto Connector parameters

Parameter
Type
Description
Required
chainId
Number
EVM chain ID to connect to
Reference: EVM Networks​
Yes
rpc
String
JSON RPC endpoint
Yes

Parameters Example

Ethereum Mainnet
Ethereum Testnet (Rinkeby)
BSC Mainnet
BSC Testnet (Chapel)
1
const connector = new BloctoConnector({
2
chainId: 1,
3
rpc: 'https://mainnet.infura.io/v3/YOUR_INFURA_ID',
4
});
Copied!
1
const connector = new BloctoConnector({
2
chainId: 4,
3
rpc: 'https://rinkeby.infura.io/v3/YOUR_INFURA_ID',
4
});
Copied!
1
const connector = new BloctoConnector({
2
chainId: 56,
3
});
Copied!
1
const connector = new BloctoConnector({
2
chainId: 97,
3
});
Copied!
Network
Chain ID
Ethereum Mainnet
1
Ethereum Rinkeby Testnet
4
BSC Mainnet
56
BSC Chapel Testnet
97
Polygon Mainnet
137
Polygon Mumbai Testnet
80001
Avalanche Mainnet
43114
Avalanche Fuji Testnet
43113

Usage

After connector is ready, now you can activate it using useWeb3React hook provided by web3-react . Now your code might look like:
1
import React from 'react'
2
import { Web3ReactProvider } from '@web3-react/core'
3
import { Web3Provider } from '@ethersproject/providers'
4
import { useWeb3React } from '@web3-react/core'
5
import { BloctoConnector } from '@blocto/blocto-connector'
6
​
7
export const connector = new BloctoConnector({
8
chainId: NETWORK_CHAIN_ID,
9
rpc: NETWORK_URL
10
})
11
​
12
function getLibrary(provider: any): Web3Provider {
13
// this will vary according to whether you use e.g. ethers or web3.js
14
const library = new Web3Provider(provider)
15
library.pollingInterval = 12000
16
return library
17
}
18
​
19
export const Wallet = () => {
20
const { chainId, account, activate, active } = useWeb3React<Web3Provider>()
21
​
22
const onClick = () => {
23
activate(connector)
24
}
25
​
26
return (
27
<div>
28
<div>ChainId: {chainId}</div>
29
<div>Account: {account}</div>
30
{active ? (
31
<div>βœ…</div>
32
) : (
33
<button type="button" onClick={onClick}>
34
Connect
35
</button>
36
)}
37
</div>
38
)
39
}
40
​
41
export const App = () => {
42
return (
43
<Web3ReactProvider getLibrary={getLibrary}>
44
<Wallet />
45
</Web3ReactProvider>
46
)
47
}
Copied!
web3-react uses Context to efficiently store this data, and inject it wherever you need it in your application. For more information using web3-react, please check out
Last modified 2mo ago
Copy link