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

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

Usage

Import and initiate web3-react-connector

import { 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>,
      },
    })
)

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

Options Example

Ethereum Mainnet

{
   chainId: 1,
   rpc: 'https://mainnet.infura.io/v3/YOUR_INFURA_ID',
}

Ethereum Testnet (Goerli)

{
    chainId: 5,
    rpc: 'https://rpc.ankr.com/eth_goerli',
}

BSC Mainnet

{
    chainId: 56,
}

BSC Testnet (Chapel)

{
    chainId: 97,
}

Network	Chain ID
Ethereum Mainnet	1
Ethereum Sepolia Testnet	11155111
Arbitrum Mainnet	42161
Optimism Mainnet	10
Polygon Mainnet	137
Polygon Amoy Testnet	80002
BSC Mainnet	56
BSC Chapel Testnet	97
Avalanche Mainnet	43114
Avalanche Fuji Testnet	43113
Base Mainnet	8453
Zora Mainnet	7777777
Scroll Mainnet	534352
Scroll Sepolia Testnet	534351

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

• Web3-React

• Web3-React Documentation

Sample Code

Using web3-react v6

For those still using web3-react v6, please use @blocto/web3-react-connector@0.5.3instead.

Some new feature might not support old connector in the future.

npm

npm i @blocto/web3-react-connector@0.5.3

yarn

yarn add @blocto/web3-react-connector@0.5.3

pnpm

pnpm add @blocto/web3-react-connector@0.5.3

import { BloctoConnector } from '@blocto/web3-react-connector'

const connector = new BloctoConnector({
  chainId: NETWORK_CHAIN_ID,
  rpc: NETWORK_URL
})