About porttoBlog

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

@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

ParameterTypeDescriptionRequired

chainId

Number

EVM chain ID to connect to

Reference: EVM Networks

Yes

rpc

String

JSON RPC endpoint

Yes

Options Example

{
   chainId: 1,
   rpc: 'https://mainnet.infura.io/v3/YOUR_INFURA_ID',
}
NetworkChain 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:

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 i @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
})
PreviousIntegrate with Web3.jsNextIntegrate with RainbowKit

Last updated