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.
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 v6import { 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>,
},
})
)
Parameter | Type | Description | Required |
|---|---|---|---|
chainId | Number | EVM chain ID to connect to | Yes |
rpc | String | JSON RPC endpoint | Yes |
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 |
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: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
import { BloctoConnector } from '@blocto/web3-react-connector'
const connector = new BloctoConnector({
chainId: NETWORK_CHAIN_ID,
rpc: NETWORK_URL
})
Last modified 4d ago