Skip to content

Commit b97f6be

Browse files
grabbouzzmp
grabbou
and
zzmp
authored
feat: bring back walletconnect v1 (#773)
* feat: bring back wc1 * chore: set version to latest npm, we will bump on next release * feat: add wc side by side example * chore: add wc1 type * fix * fix * Update example/components/connectorCards/WalletConnectV2Card.tsx Co-authored-by: Zach Pomerantz <[email protected]> * fix: wc * fix types --------- Co-authored-by: Zach Pomerantz <[email protected]>
1 parent 026c944 commit b97f6be

20 files changed

+982
-91
lines changed

‎example/components/Card.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
2-
import { Web3ReactHooks } from '@web3-react/core'
3-
import { GnosisSafe } from '@web3-react/gnosis-safe'
4-
import { MetaMask } from '@web3-react/metamask'
5-
import { Network } from '@web3-react/network'
6-
import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
1+
import type { CoinbaseWallet } from '@web3-react/coinbase-wallet'
2+
import type { Web3ReactHooks } from '@web3-react/core'
3+
import type { GnosisSafe } from '@web3-react/gnosis-safe'
4+
import type { MetaMask } from '@web3-react/metamask'
5+
import type { Network } from '@web3-react/network'
6+
import type { WalletConnect } from '@web3-react/walletconnect'
7+
import type { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
78

89
import { getName } from '../utils'
910
import { Accounts } from './Accounts'
@@ -12,7 +13,7 @@ import { ConnectWithSelect } from './ConnectWithSelect'
1213
import { Status } from './Status'
1314

1415
interface Props {
15-
connector: MetaMask | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
16+
connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
1617
activeChainId: ReturnType<Web3ReactHooks['useChainId']>
1718
chainIds?: ReturnType<Web3ReactHooks['useChainId']>[]
1819
isActivating: ReturnType<Web3ReactHooks['useIsActivating']>

‎example/components/ConnectWithSelect.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Web3ReactHooks } from '@web3-react/core'
33
import { GnosisSafe } from '@web3-react/gnosis-safe'
44
import type { MetaMask } from '@web3-react/metamask'
55
import { Network } from '@web3-react/network'
6+
import { WalletConnect } from '@web3-react/walletconnect'
67
import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
78
import { useCallback, useEffect, useState } from 'react'
89

@@ -49,7 +50,7 @@ export function ConnectWithSelect({
4950
error,
5051
setError,
5152
}: {
52-
connector: MetaMask | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
53+
connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
5354
activeChainId: ReturnType<Web3ReactHooks['useChainId']>
5455
chainIds?: ReturnType<Web3ReactHooks['useChainId']>[]
5556
isActivating: ReturnType<Web3ReactHooks['useIsActivating']>
@@ -86,7 +87,11 @@ export function ConnectWithSelect({
8687

8788
if (desiredChainId === -1 || connector instanceof GnosisSafe) {
8889
await connector.activate()
89-
} else if (connector instanceof WalletConnectV2 || connector instanceof Network) {
90+
} else if (
91+
connector instanceof WalletConnectV2 ||
92+
connector instanceof WalletConnect ||
93+
connector instanceof Network
94+
) {
9095
await connector.activate(desiredChainId)
9196
} else {
9297
await connector.activate(getAddChainParameters(desiredChainId))

‎example/components/ProviderExample.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
1+
import type { CoinbaseWallet } from '@web3-react/coinbase-wallet'
22
import { useWeb3React, Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
3-
import { MetaMask } from '@web3-react/metamask'
4-
import { Network } from '@web3-react/network'
5-
import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
3+
import type { MetaMask } from '@web3-react/metamask'
4+
import type { Network } from '@web3-react/network'
5+
import type { WalletConnect } from '@web3-react/walletconnect'
6+
import type { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
67

78
import { coinbaseWallet, hooks as coinbaseWalletHooks } from '../connectors/coinbaseWallet'
89
import { hooks as metaMaskHooks, metaMask } from '../connectors/metaMask'
910
import { hooks as networkHooks, network } from '../connectors/network'
10-
import { hooks as walletConnectV2Hooks, walletConnectV2 } from '../connectors/walletConnect'
11+
import { hooks as walletConnectHooks, walletConnect } from '../connectors/walletConnect'
12+
import { hooks as walletConnectV2Hooks, walletConnectV2 } from '../connectors/walletConnectV2'
1113
import { getName } from '../utils'
1214

13-
const connectors: [MetaMask | WalletConnectV2 | CoinbaseWallet | Network, Web3ReactHooks][] = [
15+
const connectors: [MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network, Web3ReactHooks][] = [
1416
[metaMask, metaMaskHooks],
17+
[walletConnect, walletConnectHooks],
1518
[walletConnectV2, walletConnectV2Hooks],
1619
[coinbaseWallet, coinbaseWalletHooks],
1720
[network, networkHooks],

‎example/components/connectorCards/WalletConnectCard.tsx

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import { URI_AVAILABLE } from '@web3-react/walletconnect-v2'
1+
import { URI_AVAILABLE } from '@web3-react/walletconnect'
22
import { useEffect, useState } from 'react'
33

4-
import { MAINNET_CHAINS } from '../../chains'
5-
import { hooks, walletConnectV2 } from '../../connectors/walletConnect'
4+
import { hooks, walletConnect } from '../../connectors/walletConnect'
65
import { Card } from '../Card'
76

8-
const CHAIN_IDS = Object.keys(MAINNET_CHAINS).map(Number)
9-
107
const { useChainId, useAccounts, useIsActivating, useIsActive, useProvider, useENSNames } = hooks
118

129
export default function WalletConnectCard() {
@@ -23,23 +20,22 @@ export default function WalletConnectCard() {
2320

2421
// log URI when available
2522
useEffect(() => {
26-
walletConnectV2.events.on(URI_AVAILABLE, (uri: string) => {
23+
walletConnect.events.on(URI_AVAILABLE, (uri: string) => {
2724
console.log(`uri: ${uri}`)
2825
})
2926
}, [])
3027

3128
// attempt to connect eagerly on mount
3229
useEffect(() => {
33-
walletConnectV2.connectEagerly().catch((error) => {
34-
console.debug('Failed to connect eagerly to walletconnect', error)
30+
walletConnect.connectEagerly().catch(() => {
31+
console.debug('Failed to connect eagerly to walletconnect')
3532
})
3633
}, [])
3734

3835
return (
3936
<Card
40-
connector={walletConnectV2}
37+
connector={walletConnect}
4138
activeChainId={chainId}
42-
chainIds={CHAIN_IDS}
4339
isActivating={isActivating}
4440
isActive={isActive}
4541
error={error}

‎example/components/connectorCards/WalletConnectV2Card.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { URI_AVAILABLE } from '@web3-react/walletconnect-v2'
2+
import { useEffect, useState } from 'react'
3+
4+
import { MAINNET_CHAINS } from '../../chains'
5+
import { hooks, walletConnectV2 } from '../../connectors/walletConnectV2'
6+
import { Card } from '../Card'
7+
8+
const CHAIN_IDS = Object.keys(MAINNET_CHAINS).map(Number)
9+
10+
const { useChainId, useAccounts, useIsActivating, useIsActive, useProvider, useENSNames } = hooks
11+
12+
export default function WalletConnectV2Card() {
13+
const chainId = useChainId()
14+
const accounts = useAccounts()
15+
const isActivating = useIsActivating()
16+
17+
const isActive = useIsActive()
18+
19+
const provider = useProvider()
20+
const ENSNames = useENSNames(provider)
21+
22+
const [error, setError] = useState(undefined)
23+
24+
// log URI when available
25+
useEffect(() => {
26+
walletConnectV2.events.on(URI_AVAILABLE, (uri: string) => {
27+
console.log(`uri: ${uri}`)
28+
})
29+
}, [])
30+
31+
// attempt to connect eagerly on mount
32+
useEffect(() => {
33+
walletConnectV2.connectEagerly().catch((error) => {
34+
console.debug('Failed to connect eagerly to walletconnect', error)
35+
})
36+
}, [])
37+
38+
return (
39+
<Card
40+
connector={walletConnectV2}
41+
activeChainId={chainId}
42+
chainIds={CHAIN_IDS}
43+
isActivating={isActivating}
44+
isActive={isActive}
45+
error={error}
46+
setError={setError}
47+
accounts={accounts}
48+
provider={provider}
49+
ENSNames={ENSNames}
50+
/>
51+
)
52+
}

‎example/connectors/walletConnect.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { initializeConnector } from '@web3-react/core'
2-
import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
2+
import { WalletConnect } from '@web3-react/walletconnect'
33

4-
import { MAINNET_CHAINS } from '../chains'
4+
import { URLS } from '../chains'
55

6-
export const [walletConnectV2, hooks] = initializeConnector<WalletConnectV2>(
6+
export const [walletConnect, hooks] = initializeConnector<WalletConnect>(
77
(actions) =>
8-
new WalletConnectV2({
8+
new WalletConnect({
99
actions,
1010
options: {
11-
projectId: process.env.walletConnectProjectId,
12-
chains: Object.keys(MAINNET_CHAINS).map(Number),
11+
rpc: URLS,
1312
},
1413
})
1514
)

‎example/connectors/walletConnectV2.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { initializeConnector } from '@web3-react/core'
2+
import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
3+
4+
import { MAINNET_CHAINS } from '../chains'
5+
6+
export const [walletConnectV2, hooks] = initializeConnector<WalletConnectV2>(
7+
(actions) =>
8+
new WalletConnectV2({
9+
actions,
10+
options: {
11+
projectId: process.env.walletConnectProjectId,
12+
chains: Object.keys(MAINNET_CHAINS).map(Number),
13+
},
14+
})
15+
)

‎example/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@web3-react/types": "^8.1.0-beta.0",
2121
"@web3-react/url": "^8.1.0-beta.0",
2222
"@web3-react/walletconnect-v2": "^8.1.0-beta.0",
23+
"@web3-react/walletconnect": "^8.1.0-beta.0",
2324
"next": "^12.1.5",
2425
"react-dom": "^18.0.0"
2526
}

‎example/pages/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import GnosisSafeCard from '../components/connectorCards/GnosisSafeCard'
33
import MetaMaskCard from '../components/connectorCards/MetaMaskCard'
44
import NetworkCard from '../components/connectorCards/NetworkCard'
55
import WalletConnectCard from '../components/connectorCards/WalletConnectCard'
6+
import WalletConnectV2Card from '../components/connectorCards/WalletConnectV2Card'
67
import ProviderExample from '../components/ProviderExample'
78

89
export default function Home() {
@@ -11,6 +12,7 @@ export default function Home() {
1112
<ProviderExample />
1213
<div style={{ display: 'flex', flexFlow: 'wrap', fontFamily: 'sans-serif' }}>
1314
<MetaMaskCard />
15+
<WalletConnectV2Card />
1416
<WalletConnectCard />
1517
<CoinbaseWalletCard />
1618
<NetworkCard />

‎example/utils.ts

+2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { GnosisSafe } from '@web3-react/gnosis-safe'
33
import { MetaMask } from '@web3-react/metamask'
44
import { Network } from '@web3-react/network'
55
import type { Connector } from '@web3-react/types'
6+
import { WalletConnect as WalletConnect } from '@web3-react/walletconnect'
67
import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
78

89
export function getName(connector: Connector) {
910
if (connector instanceof MetaMask) return 'MetaMask'
1011
if (connector instanceof WalletConnectV2) return 'WalletConnect V2'
12+
if (connector instanceof WalletConnect) return 'WalletConnect'
1113
if (connector instanceof CoinbaseWallet) return 'Coinbase Wallet'
1214
if (connector instanceof Network) return 'Network'
1315
if (connector instanceof GnosisSafe) return 'Gnosis Safe'

‎packages/types/src/index.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import type EventEmitter from 'node:events'
2-
31
import type { StoreApi } from 'zustand'
42

53
export interface Web3ReactState {
@@ -37,8 +35,10 @@ export interface RequestArguments {
3735
}
3836

3937
/** per {@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md#events EIP-1193} */
40-
export type Provider = Pick<EventEmitter, 'on' | 'removeListener'> & {
38+
export interface Provider {
4139
request(args: RequestArguments): Promise<unknown>
40+
on(eventName: string | symbol, listener: (...args: any[]) => void): this
41+
removeListener(eventName: string | symbol, listener: (...args: any[]) => void): this
4242
}
4343

4444
/** per {@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md#connect-1 EIP-1193} */

‎packages/walletconnect-v2/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"dependencies": {
2727
"@web3-react/types": "^8.1.0-beta.0",
2828
"eventemitter3": "^4.0.7",
29-
"@walletconnect/ethereum-provider": "^2.4.6"
29+
"@walletconnect/ethereum-provider": "^2.4.7"
3030
},
3131
"devDependencies": {
3232
"@web3-react/store": "^8.1.0-beta.0"

‎packages/walletconnect/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# @web3-react/walletconnect

‎packages/walletconnect/package.json

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "@web3-react/walletconnect",
3+
"keywords": [
4+
"web3-react",
5+
"walletconnect"
6+
],
7+
"author": "Noah Zinsmeister <[email protected]>",
8+
"license": "GPL-3.0-or-later",
9+
"repository": "github:Uniswap/web3-react",
10+
"publishConfig": {
11+
"access": "public"
12+
},
13+
"version": "8.1.0-beta.0",
14+
"files": [
15+
"dist/*"
16+
],
17+
"type": "commonjs",
18+
"types": "./dist/index.d.ts",
19+
"main": "./dist/index.js",
20+
"exports": "./dist/index.js",
21+
"scripts": {
22+
"prebuild": "rm -rf dist",
23+
"build": "tsc",
24+
"start": "tsc --watch"
25+
},
26+
"dependencies": {
27+
"@web3-react/types": "^8.1.0-beta.0",
28+
"eventemitter3": "^4.0.7",
29+
"@walletconnect/ethereum-provider": "^1.7.8"
30+
},
31+
"devDependencies": {
32+
"@web3-react/store": "^8.1.0-beta.0",
33+
"@walletconnect/types": "^1.7.8"
34+
}
35+
}

‎packages/walletconnect/src/index.spec.ts

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { createWeb3ReactStoreAndActions } from '@web3-react/store'
2+
import type { Actions, RequestArguments, Web3ReactStore } from '@web3-react/types'
3+
import EventEmitter from 'node:events'
4+
import { WalletConnect } from '.'
5+
import { MockEIP1193Provider } from '../../eip1193/src/mock'
6+
7+
// necessary because walletconnect returns chainId as a number
8+
class MockMockWalletConnectProvider extends MockEIP1193Provider {
9+
public connector = new EventEmitter()
10+
11+
public eth_chainId_number = jest.fn((chainId?: string) =>
12+
chainId === undefined ? chainId : Number.parseInt(chainId, 16)
13+
)
14+
15+
public request(x: RequestArguments): Promise<unknown> {
16+
if (x.method === 'eth_chainId') {
17+
return Promise.resolve(this.eth_chainId_number(this.chainId))
18+
} else {
19+
return super.request(x)
20+
}
21+
}
22+
}
23+
24+
jest.mock('@walletconnect/ethereum-provider', () => MockMockWalletConnectProvider)
25+
26+
const chainId = '0x1'
27+
const accounts: string[] = []
28+
29+
describe('WalletConnect', () => {
30+
let store: Web3ReactStore
31+
let connector: WalletConnect
32+
let mockProvider: MockMockWalletConnectProvider
33+
34+
describe('works', () => {
35+
beforeEach(async () => {
36+
let actions: Actions
37+
;[store, actions] = createWeb3ReactStoreAndActions()
38+
connector = new WalletConnect({ actions, options: { rpc: {} } })
39+
})
40+
41+
test('#activate', async () => {
42+
await connector.connectEagerly().catch(() => {})
43+
44+
mockProvider = connector.provider as unknown as MockMockWalletConnectProvider
45+
mockProvider.chainId = chainId
46+
mockProvider.accounts = accounts
47+
48+
await connector.activate()
49+
50+
expect(mockProvider.eth_requestAccounts).toHaveBeenCalled()
51+
expect(mockProvider.eth_accounts).not.toHaveBeenCalled()
52+
expect(mockProvider.eth_chainId_number).toHaveBeenCalled()
53+
expect(mockProvider.eth_chainId_number.mock.invocationCallOrder[0])
54+
.toBeGreaterThan(mockProvider.eth_requestAccounts.mock.invocationCallOrder[0])
55+
56+
expect(store.getState()).toEqual({
57+
chainId: Number.parseInt(chainId, 16),
58+
accounts,
59+
activating: false,
60+
error: undefined,
61+
})
62+
})
63+
})
64+
})

0 commit comments

Comments
 (0)