feat: bring back walletconnect v1

example/components/Card.tsx

@@ -1,9 +1,10 @@
-import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
-import { Web3ReactHooks } from '@web3-react/core'
-import { GnosisSafe } from '@web3-react/gnosis-safe'
-import { MetaMask } from '@web3-react/metamask'
-import { Network } from '@web3-react/network'
-import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
+import type { CoinbaseWallet } from '@web3-react/coinbase-wallet'
+import type { Web3ReactHooks } from '@web3-react/core'
+import type { GnosisSafe } from '@web3-react/gnosis-safe'
+import type { MetaMask } from '@web3-react/metamask'
+import type { Network } from '@web3-react/network'
+import type { WalletConnect } from '@web3-react/walletconnect'
+import type { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 
 import { getName } from '../utils'
 import { Accounts } from './Accounts'
@@ -12,7 +13,7 @@ import { ConnectWithSelect } from './ConnectWithSelect'
 import { Status } from './Status'
 
 interface Props {
-  connector: MetaMask | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
+  connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
   activeChainId: ReturnType<Web3ReactHooks['useChainId']>
   chainIds?: ReturnType<Web3ReactHooks['useChainId']>[]
   isActivating: ReturnType<Web3ReactHooks['useIsActivating']>

example/components/ConnectWithSelect.tsx

@@ -3,6 +3,7 @@ import type { Web3ReactHooks } from '@web3-react/core'
 import { GnosisSafe } from '@web3-react/gnosis-safe'
 import type { MetaMask } from '@web3-react/metamask'
 import { Network } from '@web3-react/network'
+import { WalletConnect } from '@web3-react/walletconnect'
 import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 import { useCallback, useEffect, useState } from 'react'
 
@@ -49,7 +50,7 @@ export function ConnectWithSelect({
   error,
   setError,
 }: {
-  connector: MetaMask | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
+  connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
   activeChainId: ReturnType<Web3ReactHooks['useChainId']>
   chainIds?: ReturnType<Web3ReactHooks['useChainId']>[]
   isActivating: ReturnType<Web3ReactHooks['useIsActivating']>
@@ -86,7 +87,11 @@ export function ConnectWithSelect({
 
         if (desiredChainId === -1 || connector instanceof GnosisSafe) {
           await connector.activate()
-        } else if (connector instanceof WalletConnectV2 || connector instanceof Network) {
+        } else if (
+          connector instanceof WalletConnectV2 ||
+          connector instanceof WalletConnect ||
+          connector instanceof Network
+        ) {
           await connector.activate(desiredChainId)
         } else {
           await connector.activate(getAddChainParameters(desiredChainId))

example/components/ProviderExample.tsx

@@ -1,17 +1,20 @@
-import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
+import type { CoinbaseWallet } from '@web3-react/coinbase-wallet'
 import { useWeb3React, Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
-import { MetaMask } from '@web3-react/metamask'
-import { Network } from '@web3-react/network'
-import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
+import type { MetaMask } from '@web3-react/metamask'
+import type { Network } from '@web3-react/network'
+import type { WalletConnect } from '@web3-react/walletconnect'
+import type { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 
 import { coinbaseWallet, hooks as coinbaseWalletHooks } from '../connectors/coinbaseWallet'
 import { hooks as metaMaskHooks, metaMask } from '../connectors/metaMask'
 import { hooks as networkHooks, network } from '../connectors/network'
-import { hooks as walletConnectV2Hooks, walletConnectV2 } from '../connectors/walletConnect'
+import { hooks as walletConnectHooks, walletConnect } from '../connectors/walletConnect'
+import { hooks as walletConnectV2Hooks, walletConnectV2 } from '../connectors/walletConnectV2'
 import { getName } from '../utils'
 
-const connectors: [MetaMask | WalletConnectV2 | CoinbaseWallet | Network, Web3ReactHooks][] = [
+const connectors: [MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network, Web3ReactHooks][] = [
   [metaMask, metaMaskHooks],
+  [walletConnect, walletConnectHooks],
   [walletConnectV2, walletConnectV2Hooks],
   [coinbaseWallet, coinbaseWalletHooks],
   [network, networkHooks],

example/components/connectorCards/WalletConnectCard.tsx

@@ -1,12 +1,9 @@
-import { URI_AVAILABLE } from '@web3-react/walletconnect-v2'
+import { URI_AVAILABLE } from '@web3-react/walletconnect'
 import { useEffect, useState } from 'react'
 
-import { MAINNET_CHAINS } from '../../chains'
-import { hooks, walletConnectV2 } from '../../connectors/walletConnect'
+import { hooks, walletConnect } from '../../connectors/walletConnect'
 import { Card } from '../Card'
 
-const CHAIN_IDS = Object.keys(MAINNET_CHAINS).map(Number)
-
 const { useChainId, useAccounts, useIsActivating, useIsActive, useProvider, useENSNames } = hooks
 
 export default function WalletConnectCard() {
@@ -23,23 +20,22 @@ export default function WalletConnectCard() {
 
   // log URI when available
   useEffect(() => {
-    walletConnectV2.events.on(URI_AVAILABLE, (uri: string) => {
+    walletConnect.events.on(URI_AVAILABLE, (uri: string) => {
       console.log(`uri: ${uri}`)
     })
   }, [])
 
   // attempt to connect eagerly on mount
   useEffect(() => {
-    walletConnectV2.connectEagerly().catch((error) => {
-      console.debug('Failed to connect eagerly to walletconnect', error)
+    walletConnect.connectEagerly().catch(() => {
+      console.debug('Failed to connect eagerly to walletconnect')
     })
   }, [])
 
   return (
     <Card
-      connector={walletConnectV2}
+      connector={walletConnect}
       activeChainId={chainId}
-      chainIds={CHAIN_IDS}
       isActivating={isActivating}
       isActive={isActive}
       error={error}

example/components/connectorCards/WalletConnectV2Card.tsx

@@ -0,0 +1,52 @@
+import { URI_AVAILABLE } from '@web3-react/walletconnect-v2'
+import { useEffect, useState } from 'react'
+
+import { MAINNET_CHAINS } from '../../chains'
+import { hooks, walletConnectV2 } from '../../connectors/walletConnectV2'
+import { Card } from '../Card'
+
+const CHAIN_IDS = Object.keys(MAINNET_CHAINS).map(Number)
+
+const { useChainId, useAccounts, useIsActivating, useIsActive, useProvider, useENSNames } = hooks
+
+export default function WalletConnectCard() {
+  const chainId = useChainId()
+  const accounts = useAccounts()
+  const isActivating = useIsActivating()
+
+  const isActive = useIsActive()
+
+  const provider = useProvider()
+  const ENSNames = useENSNames(provider)
+
+  const [error, setError] = useState(undefined)
+
+  // log URI when available
+  useEffect(() => {
+    walletConnectV2.events.on(URI_AVAILABLE, (uri: string) => {
+      console.log(`uri: ${uri}`)
+    })
+  }, [])
+
+  // attempt to connect eagerly on mount
+  useEffect(() => {
+    walletConnectV2.connectEagerly().catch((error) => {
+      console.debug('Failed to connect eagerly to walletconnect', error)
+    })
+  }, [])
+
+  return (
+    <Card
+      connector={walletConnectV2}
+      activeChainId={chainId}
+      chainIds={CHAIN_IDS}
+      isActivating={isActivating}
+      isActive={isActive}
+      error={error}
+      setError={setError}
+      accounts={accounts}
+      provider={provider}
+      ENSNames={ENSNames}
+    />
+  )
+}

example/connectors/walletConnect.ts

@@ -1,15 +1,14 @@
 import { initializeConnector } from '@web3-react/core'
-import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
+import { WalletConnect } from '@web3-react/walletconnect'
 
-import { MAINNET_CHAINS } from '../chains'
+import { URLS } from '../chains'
 
-export const [walletConnectV2, hooks] = initializeConnector<WalletConnectV2>(
+export const [walletConnect, hooks] = initializeConnector<WalletConnect>(
   (actions) =>
-    new WalletConnectV2({
+    new WalletConnect({
       actions,
       options: {
-        projectId: process.env.walletConnectProjectId,
-        chains: Object.keys(MAINNET_CHAINS).map(Number),
+        rpc: URLS,
       },
     })
 )

example/connectors/walletConnectV2.ts

@@ -0,0 +1,15 @@
+import { initializeConnector } from '@web3-react/core'
+import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
+
+import { MAINNET_CHAINS } from '../chains'
+
+export const [walletConnectV2, hooks] = initializeConnector<WalletConnectV2>(
+  (actions) =>
+    new WalletConnectV2({
+      actions,
+      options: {
+        projectId: process.env.walletConnectProjectId,
+        chains: Object.keys(MAINNET_CHAINS).map(Number),
+      },
+    })
+)

example/next.config.js

@@ -7,6 +7,12 @@ const nextConfig = {
     alchemyKey: process.env.ALCHEMY_KEY,
     walletConnectProjectId: process.env.WALLET_CONNECT_PROJECT_ID,
   },
+  /**
+   * @todo debug why this is needed before merging
+   */
+  experimental: {
+    esmExternals: 'loose'
+  }
 }
 
 module.exports = nextConfig

example/package.json

@@ -20,6 +20,7 @@
     "@web3-react/types": "^8.1.0-beta.0",
     "@web3-react/url": "^8.1.0-beta.0",
     "@web3-react/walletconnect-v2": "^8.1.0-beta.0",
+    "@web3-react/walletconnect": "^8.1.0-beta.0",
     "next": "^12.1.5",
     "react-dom": "^18.0.0"
   }

example/pages/index.tsx

@@ -3,6 +3,7 @@ import GnosisSafeCard from '../components/connectorCards/GnosisSafeCard'
 import MetaMaskCard from '../components/connectorCards/MetaMaskCard'
 import NetworkCard from '../components/connectorCards/NetworkCard'
 import WalletConnectCard from '../components/connectorCards/WalletConnectCard'
+import WalletConnectV2Card from '../components/connectorCards/WalletConnectV2Card'
 import ProviderExample from '../components/ProviderExample'
 
 export default function Home() {
@@ -11,6 +12,7 @@ export default function Home() {
       <ProviderExample />
       <div style={{ display: 'flex', flexFlow: 'wrap', fontFamily: 'sans-serif' }}>
         <MetaMaskCard />
+        <WalletConnectV2Card />
         <WalletConnectCard />
         <CoinbaseWalletCard />
         <NetworkCard />

example/utils.ts

@@ -3,11 +3,13 @@ import { GnosisSafe } from '@web3-react/gnosis-safe'
 import { MetaMask } from '@web3-react/metamask'
 import { Network } from '@web3-react/network'
 import type { Connector } from '@web3-react/types'
+import { WalletConnect as WalletConnect } from '@web3-react/walletconnect'
 import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 
 export function getName(connector: Connector) {
   if (connector instanceof MetaMask) return 'MetaMask'
   if (connector instanceof WalletConnectV2) return 'WalletConnect V2'
+  if (connector instanceof WalletConnect) return 'WalletConnect'
   if (connector instanceof CoinbaseWallet) return 'Coinbase Wallet'
   if (connector instanceof Network) return 'Network'
   if (connector instanceof GnosisSafe) return 'Gnosis Safe'

packages/walletconnect/README.md

@@ -0,0 +1 @@
+# @web3-react/walletconnect

packages/walletconnect/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@web3-react/walletconnect",
+  "keywords": [
+    "web3-react",
+    "walletconnect"
+  ],
+  "author": "Noah Zinsmeister <noahwz@gmail.com>",
+  "license": "GPL-3.0-or-later",
+  "repository": "github:Uniswap/web3-react",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "8.1.0-beta.0",
+  "files": [
+    "dist/*"
+  ],
+  "type": "commonjs",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "exports": "./dist/index.js",
+  "scripts": {
+    "prebuild": "rm -rf dist",
+    "build": "tsc",
+    "start": "tsc --watch"
+  },
+  "dependencies": {
+    "@web3-react/types": "^8.1.0-beta.0",
+    "eventemitter3": "^4.0.7",
+    "@walletconnect/ethereum-provider": "^1.7.8"
+  },
+  "devDependencies": {
+    "@web3-react/store": "^8.1.0-beta.0",
+    "@walletconnect/types": "^1.7.8"
+  }
+}

packages/walletconnect/src/index.spec.ts

@@ -0,0 +1,64 @@
+import { createWeb3ReactStoreAndActions } from '@web3-react/store'
+import type { Actions, RequestArguments, Web3ReactStore } from '@web3-react/types'
+import EventEmitter from 'node:events'
+import { WalletConnect } from '.'
+import { MockEIP1193Provider } from '../../eip1193/src/mock'
+
+// necessary because walletconnect returns chainId as a number
+class MockMockWalletConnectProvider extends MockEIP1193Provider {
+  public connector = new EventEmitter()
+
+  public eth_chainId_number = jest.fn((chainId?: string) =>
+    chainId === undefined ? chainId : Number.parseInt(chainId, 16)
+  )
+
+  public request(x: RequestArguments): Promise<unknown> {
+    if (x.method === 'eth_chainId') {
+      return Promise.resolve(this.eth_chainId_number(this.chainId))
+    } else {
+      return super.request(x)
+    }
+  }
+}
+
+jest.mock('@walletconnect/ethereum-provider', () => MockMockWalletConnectProvider)
+
+const chainId = '0x1'
+const accounts: string[] = []
+
+describe('WalletConnect', () => {
+  let store: Web3ReactStore
+  let connector: WalletConnect
+  let mockProvider: MockMockWalletConnectProvider
+
+  describe('works', () => {
+    beforeEach(async () => {
+      let actions: Actions
+      ;[store, actions] = createWeb3ReactStoreAndActions()
+      connector = new WalletConnect({ actions, options: { rpc: {} } })
+    })
+
+    test('#activate', async () => {
+      await connector.connectEagerly().catch(() => {})
+
+      mockProvider = connector.provider as unknown as MockMockWalletConnectProvider
+      mockProvider.chainId = chainId
+      mockProvider.accounts = accounts
+
+      await connector.activate()
+
+      expect(mockProvider.eth_requestAccounts).toHaveBeenCalled()
+      expect(mockProvider.eth_accounts).not.toHaveBeenCalled()
+      expect(mockProvider.eth_chainId_number).toHaveBeenCalled()
+      expect(mockProvider.eth_chainId_number.mock.invocationCallOrder[0])
+        .toBeGreaterThan(mockProvider.eth_requestAccounts.mock.invocationCallOrder[0])
+
+      expect(store.getState()).toEqual({
+        chainId: Number.parseInt(chainId, 16),
+        accounts,
+        activating: false,
+        error: undefined,
+      })
+    })
+  })
+})