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

$ yarn add @blocto/blocto-connector

Import and initiate Blocto-Connector

import { BloctoConnector } from '@blocto/blocto-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 (Rinkeby)
BSC Mainnet
BSC Testnet (Chapel)
Ethereum Mainnet
const connector = new BloctoConnector({
chainId: 1,
rpc: 'https://mainnet.infura.io/v3/YOUR_INFURA_ID',
});
Ethereum Testnet (Rinkeby)
const connector = new BloctoConnector({
chainId: 4,
rpc: 'https://rinkeby.infura.io/v3/YOUR_INFURA_ID',
});
BSC Mainnet
const connector = new BloctoConnector({
chainId: 56,
});
BSC Testnet (Chapel)
const connector = new BloctoConnector({
chainId: 97,
});

Usage

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/blocto-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