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

Options Example

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

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