update to walletconnectv2

package.json

@@ -98,11 +98,12 @@
  "@visx/scale": "^2.1.0",
  "@visx/shape": "^2.10.0",
  "@visx/visx": "^2.10.0",
+ "@walletconnect/ethereum-provider": "^2.9.0",
+ "@walletconnect/modal": "^2.5.9",
  "@web3-react/abstract-connector": "^6.0.7",
  "@web3-react/core": "^6.1.9",
  "@web3-react/injected-connector": "^6.0.7",
  "@web3-react/network-connector": "^6.2.9",
- "@web3-react/walletconnect-connector": "^6.2.13",
  "@web3-react/walletlink-connector": "^6.2.13",
  "animate.css": "^4.1.1",
  "autoprefixer": "^10.4.8",

src/bao/lib/connectors.ts

@@ -1,6 +1,6 @@
+import { WalletConnectV2Connector } from '@/utils/walletconntectV2Connector'
 import { InjectedConnector } from '@web3-react/injected-connector'
 import { NetworkConnector } from '@web3-react/network-connector'
-import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { WalletLinkConnector } from '@web3-react/walletlink-connector'
 
 const supportedChainIds = [1]
@@ -31,8 +31,34 @@ export const injected = new InjectedConnector({
  supportedChainIds,
 })
 
-export const walletConnect = new WalletConnectConnector({
- rpc: RPC_URLS,
+export const walletConnect = new WalletConnectV2Connector({
+ projectId: '1ecf17999639b9fe3f94eed0ef97286b',
+ rpcMap: RPC_URLS,
+ chains: [1],
+ showQrModal: true,
+ // Decentraland's RPCs don't support the `test` method used for the ping.
+ disableProviderPing: true,
+ qrModalOptions: {
+ themeVariables: {
+ // Display the WC modal over other Decentraland UI's modals.
+ // Won't be visible without this.
+ '--wcm-z-index': '9999',
+ },
+ },
+ // Methods and events based on what is used on the decentraland dapps and the ethereum-provider lib found at:
+ // https://github.com/WalletConnect/walletconnect-monorepo/blob/v2.0/providers/ethereum-provider/src/constants/rpc.ts
+ // If the wallet doesn't support non optional methods, it will not allow the connection.
+ methods: ['eth_sendTransaction', 'personal_sign'],
+ optionalMethods: [
+ 'eth_accounts',
+ 'eth_requestAccounts',
+ 'eth_sign',
+ 'eth_signTypedData_v4',
+ 'wallet_switchEthereumChain',
+ 'wallet_addEthereumChain',
+ ],
+ events: ['chainChanged', 'accountsChanged'],
+ optionalEvents: ['disconnect'],
 })
 
 export const coinbaseWallet = new WalletLinkConnector({

src/utils/walletconntectV2Connector.ts

@@ -0,0 +1,125 @@
+import { ConnectorUpdate } from '@web3-react/types'
+import { AbstractConnector } from '@web3-react/abstract-connector'
+import type WalletConnectProvider from '@walletconnect/ethereum-provider'
+import { EthereumProviderOptions } from '@walletconnect/ethereum-provider/dist/types/EthereumProvider'
+
+const RPC_URLS: { [chainId: number]: string } = {
+ 1: process.env.NEXT_PUBLIC_ALCHEMY_API_URL,
+}
+
+export class WalletConnectV2Connector extends AbstractConnector {
+ provider?: typeof WalletConnectProvider.prototype
+
+ private readonly options: EthereumProviderOptions
+
+ constructor(options: EthereumProviderOptions) {
+ super({ supportedChainIds: Object.keys(options.rpcMap || {}).map(k => Number(k)) })
+
+ this.options = options
+ }
+
+ static clearStorage = (storage: Storage) => {
+ storage.removeRegExp(new RegExp('^wc@2:'))
+ }
+
+ activate = async (): Promise<ConnectorUpdate<string | number>> => {
+ const provider = await import('@walletconnect/ethereum-provider').then(module => {
+ return module.default.init({
+ projectId: '1ecf17999639b9fe3f94eed0ef97286b',
+ rpcMap: RPC_URLS,
+ chains: [1],
+ showQrModal: true,
+ // Decentraland's RPCs don't support the `test` method used for the ping.
+ disableProviderPing: true,
+ qrModalOptions: {
+ themeVariables: {
+ // Display the WC modal over other Decentraland UI's modals.
+ // Won't be visible without this.
+ '--wcm-z-index': '3000',
+ },
+ },
+ // Methods and events based on what is used on the decentraland dapps and the ethereum-provider lib found at:
+ // https://github.com/WalletConnect/walletconnect-monorepo/blob/v2.0/providers/ethereum-provider/src/constants/rpc.ts
+ // If the wallet doesn't support non optional methods, it will not allow the connection.
+ methods: ['eth_sendTransaction', 'personal_sign'],
+ optionalMethods: [
+ 'eth_accounts',
+ 'eth_requestAccounts',
+ 'eth_sign',
+ 'eth_signTypedData_v4',
+ 'wallet_switchEthereumChain',
+ 'wallet_addEthereumChain',
+ ],
+ events: ['chainChanged', 'accountsChanged'],
+ optionalEvents: ['disconnect'],
+ })
+ })
+
+ const accounts = await provider.enable()
+
+ provider.on('accountsChanged', this.handleAccountsChanged)
+ provider.on('chainChanged', this.handleChainChanged)
+ provider.on('disconnect', this.handleDisconnect)
+
+ this.provider = provider
+
+ return {
+ chainId: provider.chainId,
+ account: accounts[0],
+ provider,
+ }
+ }
+
+ getProvider = async (): Promise<any> => {
+ if (!this.provider) {
+ throw new Error('Provider is undefined')
+ }
+ return this.provider
+ }
+
+ getChainId = async (): Promise<string | number> => {
+ if (!this.provider) {
+ throw new Error('Provider is undefined')
+ }
+ return this.provider.chainId
+ }
+
+ getAccount = async (): Promise<string | null> => {
+ if (!this.provider) {
+ throw new Error('Provider is undefined')
+ }
+ return this.provider.accounts[0]
+ }
+
+ getWalletName = (): string | undefined => {
+ return this.provider?.session?.peer.metadata.name
+ }
+
+ deactivate = (): void => {
+ if (!this.provider) {
+ return
+ }
+ this.emitDeactivate()
+
+ this.provider
+ .removeListener('accountsChanged', this.handleAccountsChanged)
+ .removeListener('chainChanged', this.handleChainChanged)
+ .removeListener('disconnect', this.handleDisconnect)
+ .disconnect()
+ }
+
+ handleAccountsChanged = (accounts: string[]): void => {
+ this.emitUpdate({ account: accounts[0] })
+ }
+
+ handleChainChanged = (chainId: string | number): void => {
+ this.emitUpdate({ chainId })
+ }
+
+ handleDisconnect = (): void => {
+ if (!this.provider) {
+ throw new Error('Provider is undefined')
+ }
+ this.deactivate()
+ }
+}