Wallet Connect

In this tutorial, we will go through the steps of integrating WalletConnect into your dapp (you can read more about this wallet on: https://walletconnect.com/).

Example

Below is a simple example:

App.tsx

import React from 'react'
import ReactDOM from 'react-dom'

import { Mainnet, DAppProvider, useEthers, Config, useEtherBalance, Goerli } from '@usedapp/core'

// Regular import crashes the app with "Buffer is not defined" error.
import WalletConnectProvider from '@walletconnect/web3-provider/dist/umd/index.min.js'
import { formatEther } from '@ethersproject/units'
import { getDefaultProvider } from 'ethers'
import { AccountIcon } from './components/AccountIcon'

const config: Config = {
  readOnlyChainId: Mainnet.chainId,
  readOnlyUrls: {
    [Mainnet.chainId]: getDefaultProvider('mainnet'),
    [Goerli.chainId]: getDefaultProvider('goerli'),
  },
}

ReactDOM.render(
  <DAppProvider config={config}>
    <App />
  </DAppProvider>,
  document.getElementById('root')
)

function App() {
  const { account, activate, deactivate, chainId } = useEthers()
  const etherBalance = useEtherBalance(account)
  if (!config.readOnlyUrls[chainId]) {
    return <p>Please use either Mainnet or Goerli testnet.</p>
  }

  async function onConnect() {
    try {
      const provider = new WalletConnectProvider({
        infuraId: 'd8df2cb7844e4a54ab0a782f608749dd',
      })
      await provider.enable()
      await activate(provider)
    } catch (error) {
      console.error(error)
    }
  }

  const ConnectButton = () => (
    <div>
      <button onClick={onConnect}>Connect</button>
    </div>
  )

  const WalletConnectConnect = () => (
    <div>
      {account && (
        <div>
          <div className="inline">
            <AccountIcon account={account} />
            &nbsp;
            <div className="account">{account}</div>
          </div>
          <br />
        </div>
      )}
      {!account && <ConnectButton />}
      {account && <button onClick={deactivate}>Disconnect</button>}
      <br />
    </div>
  )

  return (
    <div>
      <WalletConnectConnect />
      {etherBalance && (
        <div className="balance">
          <br />
          Balance:
          <p className="bold">{formatEther(etherBalance)} ETH</p>
        </div>
      )}
    </div>
  )
}

Prerequisites

The tutorial assumes the user has already started with the basics of useDApp.

See the Getting Started guide if you are a new user.

Config Your DAppProvider before integrating WalletConnect.

Motivation

By default, programatic API like Infura/Alchemy and MetaMask wallets are supported. This tutorial shows the way to use other wallet.

Import necessary things:

import WalletConnectProvider from '@walletconnect/web3-provider'
import { useEthers } from '@usedapp/core'

Take 'activate' function

It allows us to activate custom provider (default is MetaMask).

const { activate } = useEthers()

Write custom connect function

It overrides current provider by WalletConnect one.

async function onConnect() {
  const provider = new WalletConnectProvider({
    infuraId: 'd8df2cb7844e4a54ab0a782f608749dd',
  })
  await provider.enable()
  activate(provider)
}// change infuraId to yours

Add connect function trigger

It allows us to connect after clicking button.

<button onClick={onConnect}>Connect</button>

Create component which use your connect function

Here is an example of complex usage:

example/pages/WalletConnect.tsx

import React from 'react'
import { useEthers } from '@usedapp/core'
import { Container, ContentBlock, ContentRow, MainContent, Section, SectionRow } from '../components/base/base'
import { Label } from '../typography/Label'
import { TextInline } from '../typography/Text'
import { Title } from '../typography/Title'
import { Button } from '../components/base/Button'
import WalletConnectProvider from '@walletconnect/web3-provider'

const STAKING_CONTRACT = '0x00000000219ab540356cBB839Cbe05303d7705Fa'

export function WalletConnect() {
  const { activate } = useEthers()

  async function onConnect() {
    const provider = new WalletConnectProvider({
      infuraId: 'd8df2cb7844e4a54ab0a782f608749dd',
    })
    await provider.enable()
    activate(provider)
  }

  return (
    <MainContent>
      <Container>
        <Section>
          <SectionRow>
            <Title>WalletConnect Usage Example</Title>
            <Button onClick={onConnect}>Connect</Button>
        </Section>
      </Container>
    </MainContent>
  )
}

Summary

In this tutorial we created a simple DApp that allows us to connect with custom wallet. This demonstrates how to connect to WalletConnect in useDApp.