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

npm i @blocto/web3-react-connector

yarn

yarn add @blocto/web3-react-connector

pnpm

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

const connector = new BloctoConnector({
    chainId: 1,
    rpc: 'https://mainnet.infura.io/v3/YOUR_INFURA_ID',
});

Ethereum Testnet (Goerli)

const connector = new BloctoConnector({
    chainId: 5,
    rpc: 'https://rpc.ankr.com/eth_goerli',
});

BSC Mainnet

const connector = new BloctoConnector({
    chainId: 56,
});

BSC Testnet (Chapel)

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

• Web3-React

• Web3-React Documentation