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

npm install @web3-react/core@8.0.32-beta.0 @web3-react/walletconnect@8.0.33-beta.0

yarn

yarn add @web3-react/core@8.0.32-beta.0 @web3-react/walletconnect@8.0.33-beta.0

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;

A common issue with CRA apps in the newest versions is missing buffer. We need to install it manually and declare it in the main file.

Missing buffer can cause errors on WalletConnect integration.

https://github.com/WalletConnect/walletconnect-monorepo/issues/748

Buffer error

npm

npm install buffer

yarn

yarn add 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()
  }, [])
}