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

Yes

rpc

String

JSON RPC endpoint

Yes

Parameters Example

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

Ethereum Goerli Testnet

Arbitrum Mainnet

42161

Arbitrum Goerli Testnet

421613

Optimism Mainnet

Optimism Goerli Testnet

420

Polygon Mainnet

137

Polygon Mumbai Testnet

80001

BSC Mainnet

BSC Chapel Testnet

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>
  )
}

PreviousIntegrate with Web3.js NextIntegrate with RainbowKit

Last updated 2 years ago

Was this helpful?

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> ) }