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
yarn
npm install @web3-react/[email protected] @web3-react/[email protected]
yarn add @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.
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" }
}
})
)
1
import { Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
2
import {WalletConnect} from '@web3-react/walletconnect'
3
import {metapro, metaproHooks} from 'yourPathToMetapro/connector'
4
5
const connectors: [WalletConnect, Web3ReactHooks][] = [[metapro, metaproHooks]]
6
7
function App() {
8
return (
9
<>
10
<Web3ReactProvider connectors={connectors}>
11
<HomePage />
12
</Web3ReactProvider>
13
</>
14
);
15
}
16
17
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.
Buffer error
npm
yarn
npm install buffer
yarn add buffer
import { Buffer } from 'buffer'
window.Buffer = window.Buffer || Buffer
function App() {...
import { metapro } from 'yourPathToMetapro/connector'
const loginFunction = async () => {
try {
await metapro.activate(56)
} catch (e) {
customErrorHandler()
}
}
1
import React, { useState, useEffect } from 'react'
2
import { metapro } from 'yourPathToMetapro/connector'
3
4
function HomePage() {
5
6
const [qrCodeUri, setQrCodeUri] = useState<string>()
7
const [qrCodeOpen, setQrCodeOpen] = useState<boolean>(false)
8
9
//We can get wallet address from the web3react hook
10
const {account} = useWeb3React()
11
12
useEffect(() => {
13
if (metapro.provider?.connector.uri) {
14
setQrCodeUri(metapro.provider?.connector.uri)
15
setQrCodeOpen(true)
16
}
17
}, [metapro.provider?.connector.uri])
18
19
const loginFunction = async () => {
20
try {
21
await metapro.activate(56)
22
setQrCodeOpen(true)
23
} catch (e) {
24
metapro.deactivate()
25
customErrorHandler()
26
}
27
}
28
29
const logoutFunction = async () => {
30
try {
31
await metapro.deactivate()
32
} catch (e) {
33
customErrorHandler()
34
}
35
}
36
return (
37
<>
38
<button onClick={loginFunction}>
39
Login
40
</button>
41
<button onClick={loginFunction}>
42
Logout
43
</button>
44
<p>Your wallet {account}</p>
45
<QRCodeComponent uri={qrCodeUri} open={qrCodeOpen} />
46
</>
47
);
48
}
import { metapro } from 'yourPathToMetapro/connector'
const useEagerConnect = () => {
useEffect(() => {
metapro.connectEagerly()
}, [])
}