Links
Comment on page

Integrate with Web3-React

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 EVM-compatible chains is still in Beta. APIs are subject to breaking changes.

Installation

Install from npm/yarn/pnpm
npm
yarn
pnpm
npm i @blocto/web3-react-connector
yarn add @blocto/web3-react-connector
pnpm add @blocto/web3-react-connector
@blocto/web3-react-connector ^v1.0.0 is now support with @web3-react v8. For those using web3-react v6, please check Using web3-react v6

Usage

Import and initiate web3-react-connector

import { BloctoConnector } from '@blocto/web3-react-connector'
import { initializeConnector } from '@web3-react/core'
import { URLS } from '../chains'
export const [bloctoSDK, hooks] = initializeConnector<BloctoConnector>(
(actions) =>
new BloctoConnector({
actions,
options: {
chainId: 1,
rpc: <YOUR_RPC_URL>,
},
})
)

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

Options Example

Ethereum Mainnet
Ethereum Testnet (Goerli)
BSC Mainnet
BSC Testnet (Chapel)
{
chainId: 1,
rpc: 'https://mainnet.infura.io/v3/YOUR_INFURA_ID',
}
{
chainId: 5,
rpc: 'https://rpc.ankr.com/eth_goerli',
}
{
chainId: 56,
}
{
chainId: 97,
}
Network
Chain ID
Ethereum Mainnet
1
Ethereum Goerli Testnet
5
Arbitrum Mainnet
42161
Arbitrum Goerli Testnet
421613
Optimism Mainnet
10
Optimism Goerli Testnet
420
Polygon Mainnet
137
Polygon Mumbai Testnet
80001
BSC Mainnet
56
BSC Chapel Testnet
97
Avalanche Mainnet
43114
Avalanche Fuji Testnet
43113

Use useWeb3React

After connector is ready, now you can activate it using useWeb3React hook provided by web3-react . Now your code might look like:
import { useState } from 'react'
import { BloctoConnector } from '@blocto/web3-react-connector'
import { initializeConnector } from '@web3-react/core'
export const [bloctoSDK, hooks] = initializeConnector<BloctoConnector>(
(actions) =>
new BloctoConnector({
actions,
options: {
chainId: 1,
rpc: <YOUR_RPC_URL>,
},
})
)
export const Wallet = () => {
const chainId = useChainId()
const accounts = useAccounts()
const isActivating = useIsActivating()
const isActive = useIsActive()
const [error, setError] = useState(undefined)
const onClick = () => {
bloctoSDK
.activate()
.then(() => setError(undefined))
.catch(setError)
}
return (
<div>
<div>ChainId: {chainId}</div>
<div>Account: {accounts[0]}</div>
{isActive ? (
<div></div>
) : (
<button type="button" onClick={onClick}>
Connect
</button>
)}
</div>
)
}
export const App = () => {
return (<Wallet />)
}
For more information using web3-react, please check out:

Sample Code

Using web3-react v6

For those still using web3-react v6, please use @blocto/[email protected]instead.
Some new feature might not support old connector in the future.
npm
yarn
pnpm
npm i @blocto/[email protected]
yarn add @blocto/[email protected]
pnpm add @blocto/[email protected]
import { BloctoConnector } from '@blocto/web3-react-connector'
const connector = new BloctoConnector({
chainId: NETWORK_CHAIN_ID,
rpc: NETWORK_URL
})