Manual installation

For sure installation requires some knowledge about React. We will be using the most popular web3 packages made for React library.

Add packages

npm install @web3-react/[email protected] @web3-react/[email protected]

We decided after some research to use beta versions of a web3-react package but stable 8 will be out soon.

Connector setup

import { initializeConnector } from '@web3-react/core'
import { WalletConnect } from '@web3-react/walletconnect'

export const [metapro, metaproHooks] = initializeConnector<WalletConnect>(
  (actions) =>
    new WalletConnect({
      actions,
      treatModalCloseAsError: true,
      options: {
        bridge: 'https://tst-bridge.metaprotocol.one',
        rpc: { [56]: "https://bsc-dataseed1.ninicoin.io" }
      }
    })
)

Provider setup

import { Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
import {WalletConnect} from '@web3-react/walletconnect'
import {metapro, metaproHooks} from 'yourPathToMetapro/connector'

const connectors: [WalletConnect, Web3ReactHooks][] = [[metapro, metaproHooks]]

function App() {
  return (
    <>
      <Web3ReactProvider connectors={connectors}>
         <HomePage />
      </Web3ReactProvider>
    </>
  );
}

export default App;
Buffer error
npm install buffer
import { Buffer } from 'buffer'

window.Buffer = window.Buffer || Buffer

function App() {...

Connecting with built-in WalletConnect QRcode

import { metapro } from 'yourPathToMetapro/connector'

const loginFunction = async () => {
    try {
        await metapro.activate(56)
    } catch (e) {
        customErrorHandler()
    }
}

Connecting with custom QRcode

import React, { useState, useEffect } from 'react'
import { metapro } from 'yourPathToMetapro/connector'

function HomePage() {

  const [qrCodeUri, setQrCodeUri] = useState<string>()
  const [qrCodeOpen, setQrCodeOpen] = useState<boolean>(false)
  
  //We can get wallet address from the web3react hook
  const {account} = useWeb3React()

  useEffect(() => {
    if (metapro.provider?.connector.uri) {
      setQrCodeUri(metapro.provider?.connector.uri)
      setQrCodeOpen(true)
    }     
  }, [metapro.provider?.connector.uri])

  const loginFunction = async () => {
    try {
      await metapro.activate(56)
      setQrCodeOpen(true)
    } catch (e) {
      metapro.deactivate()
      customErrorHandler()
    }
  }
  
  const logoutFunction = async () => {
    try {
      await metapro.deactivate()
    } catch (e) {
      customErrorHandler()
    }
  }
  return (
    <>
      <button onClick={loginFunction}>
         Login
      </button>
      <button onClick={loginFunction}>
         Logout
      </button>
      <p>Your wallet {account}</p>
      <QRCodeComponent uri={qrCodeUri} open={qrCodeOpen} />
    </>
  );
}

Hook to connect eagerly on application start

import { metapro } from 'yourPathToMetapro/connector'

const useEagerConnect = () => {
  useEffect(() => {
    metapro.connectEagerly()
  }, [])
}

Last updated