Skip to main content

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.