Links

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

Usage

Import and initiate web3-react-connector

import { BloctoConnector } from '@blocto/web3-react-connector'
const connector = new BloctoConnector({
chainId: NETWORK_CHAIN_ID,
rpc: NETWORK_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

Parameters Example

Ethereum Mainnet
Ethereum Testnet (Goerli)
BSC Mainnet
BSC Testnet (Chapel)
const connector = new BloctoConnector({
chainId: 1,
rpc: 'https://mainnet.infura.io/v3/YOUR_INFURA_ID',
});
const connector = new BloctoConnector({
chainId: 5,
rpc: 'https://rpc.ankr.com/eth_goerli',
});
const connector = new BloctoConnector({
chainId: 56,
});
const connector = new BloctoConnector({
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 React from 'react'
import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { useWeb3React } from '@web3-react/core'
import { BloctoConnector } from '@blocto/web3-react-connector'
export const connector = new BloctoConnector({
chainId: NETWORK_CHAIN_ID,
rpc: NETWORK_URL
})
function getLibrary(provider: any): Web3Provider {
// this will vary according to whether you use e.g. ethers or web3.js
const library = new Web3Provider(provider)
library.pollingInterval = 12000
return library
}
export const Wallet = () => {
const { chainId, account, activate, active } = useWeb3React<Web3Provider>()
const onClick = () => {
activate(connector)
}
return (
<div>
<div>ChainId: {chainId}</div>
<div>Account: {account}</div>
{active ? (
<div></div>
) : (
<button type="button" onClick={onClick}>
Connect
</button>
)}
</div>
)
}
export const App = () => {
return (
<Web3ReactProvider getLibrary={getLibrary}>
<Wallet />
</Web3ReactProvider>
)
}
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