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:
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} />
<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:
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
.