feat: adds walletconnectv2 support

package.json

@@ -20,14 +20,15 @@
   "dependencies": {
     "@aragon/provided-connector": "^6.0.8",
     "@typescript-eslint/parser": "^4.1.0",
-    "@web3-react/core": "6.1.9",
+    "@web3-react/core": "^6.0.0",
     "@web3-react/fortmatic-connector": "6.1.6",
     "@web3-react/frame-connector": "6.0.9",
     "@web3-react/injected-connector": "6.0.7",
     "@web3-react/ledger-connector": "6.1.9",
     "@web3-react/portis-connector": "6.1.6",
     "@web3-react/torus-connector": "6.1.7",
     "@web3-react/walletconnect-connector": "6.2.4",
+    "@web3-react/walletconnect-v2": "^8.3.7",
     "@web3-react/walletlink-connector": "6.2.5",
     "jsbi": "^3.1.4",
     "prop-types": "^15.7.2",

src/connectors.ts

@@ -6,6 +6,7 @@ import initPortis from './connectors/ConnectorPortis'
 import initProvided from './connectors/ConnectorProvided'
 import initTorus from './connectors/ConnectorTorus'
 import initWalletConnect from './connectors/ConnectorWalletConnect'
+import initWalletConnectV2 from './connectors/ConnectorWalletConnectV2'
 import initWalletLink from './connectors/ConnectorWalletLink'
 import initLedger from './connectors/ConnectorLedger'
 
@@ -22,6 +23,7 @@ export function getConnectors(
     provided: [initProvided, null],
     torus: [initTorus, null],
     walletconnect: [initWalletConnect, null],
+    walletconnectV2: [initWalletConnectV2, null],
     walletlink: [initWalletLink, null],
     ledger: [initLedger, null],
   }

src/connectors/ConnectorWalletConnectV2.ts

@@ -0,0 +1,90 @@
+import { Connector, RpcData } from '../types'
+import { ConnectorConfigError } from '../errors'
+import {
+  WalletConnect,
+  WalletConnectConstructorArgs,
+} from '@web3-react/walletconnect-v2'
+
+export default async function init(): Promise<Connector> {
+  const { WalletConnect } = await import('@web3-react/walletconnect-v2')
+
+  class WalletConnectExtended {
+    private walletConnect: WalletConnect
+
+    constructor(args: WalletConnectConstructorArgs) {
+      this.walletConnect = new WalletConnect(args)
+    }
+
+    public async getProvider(): Promise<any> {
+      return this.walletConnect.provider
+    }
+
+    public async getAccount(): Promise<null | string> {
+      return this.walletConnect.provider?.accounts[0] || null
+    }
+
+    public async activate(desiredChainId?: number): Promise<any> {
+      await this.walletConnect.activate(desiredChainId)
+      return this.getProvider()
+    }
+
+    public async deactivate(): Promise<void> {
+      return this.walletConnect.deactivate()
+    }
+
+    // Fake beeing an event emitter
+    public on(
+      event: string,
+      callback: (args: any) => void
+    ): WalletConnectExtended {
+      this.walletConnect.provider?.on(event as any, callback)
+      return this
+    }
+    public off(
+      event: string,
+      callback: (args: any) => void
+    ): WalletConnectExtended {
+      this.walletConnect.provider?.off(event as any, callback)
+      return this
+    }
+  }
+
+  return {
+    web3ReactConnector({
+      rpc,
+      projectId,
+    }: {
+      rpc: RpcData
+      projectId: string
+    }) {
+      if (!rpc || !projectId) {
+        throw new ConnectorConfigError(
+          'The WalletConnect connector requires rpcUrl to be set.'
+        )
+      }
+      Object.values(rpc).forEach((url: string) => {
+        if (!/^https?:\/\//.test(url)) {
+          throw new ConnectorConfigError(
+            'The WalletConnect connector requires rpcUrl to be an HTTP URL.'
+          )
+        }
+        return
+      })
+      return new WalletConnectExtended({
+        options: {
+          projectId,
+          showQrModal: true,
+          rpcMap: rpc,
+          chains: Object.keys(rpc).map((chainId) => parseInt(chainId)),
+        },
+        actions: {
+          startActivation: () => () => {},
+          update: () => {
+            return 'asdf'
+          },
+          resetState: () => {},
+        },
+      })
+    },
+  }
+}

src/images/index.ts

@@ -6,3 +6,4 @@ export { default as Portis } from './Portis.svg'
 export { default as Status } from './Status.png'
 export { default as wallet } from './wallet.svg'
 export { default as walletconnect } from './walletconnect.png'
+export { default as walletconnectv2 } from './walletconnectv2.svg'

src/index.tsx

@@ -233,7 +233,11 @@ function UseWalletProvider({
         // TODO: there is no way to prevent an activation to complete, but we
         // could reconnect to the last provider the user tried to connect to.
         setConnector(connectorId)
-        await web3ReactContext.activate(web3ReactConnector, undefined, true)
+        await web3ReactContext.activate(
+          web3ReactConnector as any,
+          undefined,
+          true
+        )
         setLastConnector(connectorId)
         if (connectorId === 'injected') {
           const account = await web3ReactConnector.getAccount()

src/providers/index.tsx

@@ -82,6 +82,15 @@ const PROVIDERS = new Map<string, Provider>(
         'your Ethereum wallet': 'WalletConnect',
       },
     },
+    {
+      id: 'walletconnectV2',
+      name: 'WalletConnect',
+      type: 'Any',
+      image: Images.walletconnectv2,
+      strings: {
+        'your Ethereum wallet': 'WalletConnect',
+      },
+    },
     {
       id: 'unknown',
       name: 'Unknown',

src/types.ts

@@ -1,4 +1,5 @@
-import { AbstractConnector } from '@web3-react/abstract-connector'
+import { ConnectorUpdate } from '@web3-react/types'
+import { Web3Provider } from '@ethersproject/providers'
 
 export type Currency = {
   name: string
@@ -80,9 +81,9 @@ type EthereumProviderSendAsync = {
   selectedAddress: string
 }
 
-export type EthereumProvider = EthereumProviderEip1193 &
-  EthereumProviderSend &
-  EthereumProviderSendAsync
+export type EthereumProvider =
+  | (EthereumProviderEip1193 & EthereumProviderSend & EthereumProviderSendAsync)
+  | Web3Provider
 
 export type ConnectorInit = () => Promise<Connector>
 
@@ -95,4 +96,10 @@ export type Connector = {
   handleActivationError?: (error: Error) => Error | null
 }
 
+export abstract class AbstractConnector {
+  abstract activate(): Promise<ConnectorUpdate> | Promise<void>
+  abstract getProvider(): Promise<any>
+  abstract getAccount(): Promise<null | string>
+}
+
 export type ConnectorConfig = {}