Skip to content

Commit 8ea2a35

Browse files
authored
WalletConnect v2 fix (#69)
* Fix WC v2 integration * Bump version to 2.1.1 * Add WC ID to github CI * Add example local env file * Hide Celo Wallet and Celo Terminal for now
1 parent d3af600 commit 8ea2a35

File tree

8 files changed

+300
-199
lines changed

8 files changed

+300
-199
lines changed

.env.example

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
NEXT_PUBLIC_WALLET_CONNECT_ID=12345678901234567890123456789012

.github/workflows/ci.yml

+2
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ jobs:
5252

5353
- name: build
5454
run: yarn run build
55+
env:
56+
NEXT_PUBLIC_WALLET_CONNECT_ID: ${{ secrets.NEXT_PUBLIC_WALLET_CONNECT_ID }}
5557

5658
prettier:
5759
runs-on: ubuntu-latest

next.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const securityHeaders = [
2424
key: 'Content-Security-Policy',
2525
value: `default-src 'self'; script-src 'self'${
2626
isDev ? " 'unsafe-eval'" : ''
27-
}; connect-src 'self' https://*.celo.org https://*.celo-testnet.org https://*.walletconnect.com wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org https://raw.githubusercontent.com; img-src 'self' data: https://raw.githubusercontent.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'`,
27+
}; connect-src 'self' https://*.celo.org https://*.celo-testnet.org https://*.walletconnect.com wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org https://raw.githubusercontent.com; img-src 'self' data: https://raw.githubusercontent.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'; frame-src 'self' https://*.walletconnect.com`,
2828
},
2929
]
3030

package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@mento-protocol/mento-web",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"description": "A simple DApp for Celo Mento exchanges",
55
"keywords": [
66
"Celo",
@@ -32,7 +32,7 @@
3232
"@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28",
3333
"@metamask/post-message-stream": "6.1.2",
3434
"@metamask/providers": "10.2.1",
35-
"@rainbow-me/rainbowkit": "0.12.14",
35+
"@rainbow-me/rainbowkit": "0.12.16",
3636
"@reduxjs/toolkit": "^1.9.5",
3737
"@tanstack/react-query": "^4.29.14",
3838
"@vercel/analytics": "^1.0.1",
@@ -45,7 +45,7 @@
4545
"react-dom": "^18.2.0",
4646
"react-redux": "^8.1.0",
4747
"react-toastify": "^9.1.3",
48-
"wagmi": "0.12.13"
48+
"wagmi": "0.12.18"
4949
},
5050
"devDependencies": {
5151
"@trivago/prettier-plugin-sort-imports": "^4.1.1",

src/config/celoWallets.tsx

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
// Copied from https://github.com/celo-org/rainbowkit-celo/blob/a1b547840cedb48839fd8d0d72c81d9763c1f84c/packages/rainbowkit-celo/wallets/*
2+
// and modified to fix support for WalletConnect v2
3+
import { Alfajores, Baklava, Celo } from '@celo/rainbowkit-celo/chains'
4+
import type { Chain, Wallet } from '@rainbow-me/rainbowkit'
5+
import { getWalletConnectConnector } from '@rainbow-me/rainbowkit'
6+
import { toast } from 'react-toastify'
7+
import { tryClipboardSet } from 'src/utils/clipboard'
8+
import { WalletConnectConnector } from 'wagmi/dist/connectors/walletConnect'
9+
10+
async function getWalletConnectUri(connector: WalletConnectConnector): Promise<string> {
11+
const provider = await connector.getProvider()
12+
return new Promise((resolve) => provider.once('display_uri', resolve))
13+
}
14+
15+
// rainbowkit utils has it but doesn't export it :/
16+
function isAndroid(): boolean {
17+
return typeof navigator !== 'undefined' && /android/i.test(navigator.userAgent)
18+
}
19+
20+
interface WalletOptions {
21+
chains: Chain[]
22+
projectId: string
23+
}
24+
25+
export const Valora = ({
26+
chains = [Alfajores, Baklava, Celo],
27+
projectId,
28+
}: WalletOptions): Wallet => ({
29+
id: 'valora',
30+
name: 'Valora',
31+
iconUrl: './wallets/valora.svg',
32+
iconBackground: '#FFF',
33+
downloadUrls: {
34+
android: 'https://play.google.com/store/apps/details?id=co.clabs.valora',
35+
ios: 'https://apps.apple.com/app/id1520414263?mt=8',
36+
qrCode: 'https://valoraapp.com/',
37+
},
38+
createConnector: () => {
39+
const connector = getWalletConnectConnector({
40+
chains,
41+
projectId,
42+
})
43+
return {
44+
connector,
45+
mobile: {
46+
getUri: async () => {
47+
const uri = await getWalletConnectUri(connector)
48+
return isAndroid()
49+
? uri
50+
: // ideally this would use the WalletConnect registry, but this will do for now
51+
`https://valoraapp.com/wc?uri=${encodeURIComponent(uri)}`
52+
},
53+
},
54+
qrCode: {
55+
getUri: () => getWalletConnectUri(connector),
56+
instructions: {
57+
learnMoreUrl: 'https://valoraapp.com/learn',
58+
steps: [
59+
{
60+
description:
61+
'The crypto wallet to buy, send, spend, earn, and collect NFTs on the Celo blockchain.',
62+
step: 'install',
63+
title: 'Open the Valora app',
64+
},
65+
{
66+
description:
67+
'After you scan, a connection prompt will appear for you to connect your wallet.',
68+
step: 'scan',
69+
title: 'Tap the scan button',
70+
},
71+
],
72+
},
73+
},
74+
}
75+
},
76+
})
77+
78+
export const CeloTerminal = ({
79+
chains = [Alfajores, Baklava, Celo],
80+
projectId,
81+
}: WalletOptions): Wallet => ({
82+
id: 'celo-terminal',
83+
name: 'Celo Terminal',
84+
iconUrl: './wallets/celo-terminal.svg',
85+
iconBackground: '#FFF',
86+
createConnector: () => {
87+
const connector = getWalletConnectConnector({
88+
chains,
89+
projectId,
90+
})
91+
92+
return {
93+
connector,
94+
qrCode: {
95+
getUri: async () => {
96+
const uri = await getWalletConnectUri(connector)
97+
await tryClipboardSet(uri)
98+
toast.success('WalletConnect URL copied to clipboard')
99+
return uri
100+
},
101+
},
102+
}
103+
},
104+
})
105+
106+
export const CeloWallet = ({
107+
chains = [Alfajores, Baklava, Celo],
108+
projectId,
109+
}: WalletOptions): Wallet => ({
110+
id: 'celo-wallet',
111+
name: 'Celo Wallet',
112+
iconUrl: './wallets/celo-wallet.svg',
113+
iconBackground: '#FFF',
114+
createConnector: () => {
115+
const connector = getWalletConnectConnector({
116+
chains,
117+
projectId,
118+
})
119+
120+
return {
121+
connector,
122+
mobile: {
123+
getUri: () => getWalletConnectUri(connector),
124+
},
125+
desktop: {
126+
getUri: async () => {
127+
const uri = await getWalletConnectUri(connector)
128+
await tryClipboardSet(uri)
129+
toast.success('WalletConnect URL copied to clipboard')
130+
return `celowallet://wc?uri=${encodeURIComponent(uri)}`
131+
},
132+
},
133+
}
134+
},
135+
})

src/config/config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ interface Config {
22
debug: boolean
33
version: string | null
44
showPriceChart: boolean
5-
walletConnectProjectId?: string
5+
walletConnectProjectId: string
66
}
77

88
const isDevMode = process?.env?.NODE_ENV === 'development'
99
const version = process?.env?.NEXT_PUBLIC_VERSION ?? null
10-
const walletConnectProjectId = process?.env?.WALLET_CONNECT_ID
10+
const walletConnectProjectId = process?.env?.NEXT_PUBLIC_WALLET_CONNECT_ID || ''
1111

1212
export const config: Config = Object.freeze({
1313
debug: isDevMode,

src/config/wallets.ts

+8-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
1-
import { CeloTerminal, CeloWallet, Valora } from '@celo/rainbowkit-celo/wallets'
2-
import type { Chain, Wallet } from '@rainbow-me/rainbowkit'
1+
import type { Chain } from '@rainbow-me/rainbowkit'
32
import {
43
metaMaskWallet,
54
omniWallet,
65
trustWallet,
76
walletConnectWallet,
87
} from '@rainbow-me/rainbowkit/wallets'
98

9+
import {
10+
/*CeloTerminal, CeloWallet,*/
11+
Valora,
12+
} from './celoWallets'
1013
import { config } from './config'
1114

12-
type WalletConnector = (p: { chains: Chain[] }) => Wallet
13-
14-
function withLocalIconUrl(connector: WalletConnector, iconUrl: string, connectorConfig: any) {
15-
return { ...connector(connectorConfig), iconUrl }
16-
}
17-
1815
export function getWalletConnectors(chains: Chain[]) {
1916
const connectorConfig = {
2017
chains,
@@ -24,9 +21,9 @@ export function getWalletConnectors(chains: Chain[]) {
2421
return [
2522
metaMaskWallet(connectorConfig),
2623
walletConnectWallet(connectorConfig),
27-
withLocalIconUrl(Valora, './wallets/valora.svg', connectorConfig),
28-
withLocalIconUrl(CeloWallet, './wallets/celo-wallet.svg', connectorConfig),
29-
withLocalIconUrl(CeloTerminal, './wallets/celo-terminal.svg', connectorConfig),
24+
Valora(connectorConfig),
25+
// CeloTerminal(connectorConfig),
26+
// CeloWallet(connectorConfig),
3027
omniWallet(connectorConfig),
3128
trustWallet(connectorConfig),
3229
]

0 commit comments

Comments
 (0)