feat: Support new WalletConnect wallet (#532)

frontend/lib/wallets/WalletConnect.ts

@@ -1,32 +1,91 @@
+import WalletConnectProvider from '@walletconnect/web3-provider';
+import { ethers } from 'ethers';
+import { getNetworks, getChainIdByNetworkType, getNetworkTypeByChainId } from 'auctions-core/src/network';
+import { formatToHexWithoutPad } from 'auctions-core/helpers/format';
+import { setSigner } from 'auctions-core/src/signer';
 import WalletConnectLogo from '~/assets/icons/wallets/walletconnect.svg';
 import AbstractWallet from '~/lib/wallets/AbstractWallet';
 
 export default class WalletConnect extends AbstractWallet {
     public static title = 'WalletConnect';
     public static icon = WalletConnectLogo;
-    public static downloadUrl = 'https://metamask.io/';
 
-    get isInterfaceReady() {
-        return true;
+    private static provider?: WalletConnectProvider;
+
+    private addresses?: string[];
+
+    public get address() {
+        if (Array.isArray(this.addresses) && this.addresses[0]) {
+            return this.addresses[0].toLowerCase();
+        }
+    }
+
+    async getProvider(): Promise<ethers.providers.JsonRpcProvider> {
+        if (!WalletConnect.provider) {
+            const networks = getNetworks();
+            const rpcMap = networks.reduce(
+                (accumulatorObj, network) => ({ ...accumulatorObj, [parseInt(network.chainId, 16)]: network.url }),
+                {}
+            );
+            WalletConnect.provider = new WalletConnectProvider({ rpc: rpcMap });
+            await WalletConnect.provider.enable();
+        }
+        return new ethers.providers.Web3Provider(WalletConnect.provider);
     }
 
-    get isConnected() {
-        return true;
+    async getSigner(): Promise<ethers.providers.JsonRpcSigner> {
+        const provider = await this.getProvider();
+        await provider.send('eth_accounts', []);
+        return provider.getSigner();
     }
 
-    get address() {
-        return '';
+    public async connect(): Promise<void> {
+        const signer = await this.getSigner();
+        this.addresses = [await signer.getAddress()];
+        await this.networkChangedHandler();
+        this.setup();
     }
 
-    connect(): Promise<void> {
-        throw new Error(`${WalletConnect.title} provider is not yet implemented`);
+    public async switchNetwork(network: string): Promise<void> {
+        const provider = await this.getProvider();
+        const chainId = getChainIdByNetworkType(network);
+        await provider.send('wallet_switchEthereumChain', [{ chainId }]);
     }
 
-    switchNetwork(): Promise<void> {
-        throw new Error(`${WalletConnect.title} network switching is not yet implemented`);
+    public async networkChangedHandler() {
+        if (!WalletConnect.provider) {
+            return;
+        }
+        const signer = await this.getSigner();
+        const chainId = formatToHexWithoutPad(await signer.getChainId());
+        const networkType = getNetworkTypeByChainId(chainId);
+        if (networkType) {
+            setSigner(networkType, signer as any);
+        }
+        window.$nuxt.$store.dispatch('network/setWalletChainId', chainId);
     }
 
-    setup() {}
+    public accountsChangedHandler(addresses: string[]) {
+        this.addresses = addresses;
+        window.$nuxt.$store.dispatch('wallet/setAddress', this.address);
+    }
+
+    public setup() {
+        if (!WalletConnect.provider) {
+            return;
+        }
+        WalletConnect.provider.on('accountsChanged', this.accountsChangedHandler.bind(this));
+        WalletConnect.provider.on('chainChanged', this.networkChangedHandler.bind(this));
+    }
 
-    teardown() {}
+    public async teardown() {
+        if (!WalletConnect.provider) {
+            return;
+        }
+        window.$nuxt.$store.dispatch('network/setWalletChainId', undefined);
+        await WalletConnect.provider.disconnect();
+        WalletConnect.provider.removeListener('accountsChanged', this.accountsChangedHandler.bind(this));
+        WalletConnect.provider.removeListener('chainChanged', this.networkChangedHandler.bind(this));
+        WalletConnect.provider = undefined;
+    }
 }