feat: new wallet management (#69)

* refactor: remove web3-react

* refactor: external change propagation

* fix: external disconnect behavior

* refactor: cleanup unnecessary files

* chore: cleanup unused code

* feat: add autoConnect

* fix: auto connect

* fix: walletconnect

* feat: re-enable tally

* fix: type export

* fix: type import

* chore: remove unused files

* chore: remove unused files

* refactor: playground wallet provider

* fix: import

* feat: add frontier

* feat: frontier logo

* feat: add apex wallet, optimize connectors

* refactor: cleanup

* refactor: unshift wallets into back of connected wallets array

* chore: clean widget walletprovider

* feat: add default wallet

* fix: walletautomation

* fix: playground wallet connect

* chore: remove logs

* fix: external disconnet sync

* refactor: widget-embedded walletprovider

* feat: improve default wallet handling

* chore: simplify wallet select page

* feat: autoconnect based on specific wallets

* chore: cleanup

* chore: bump packages

---------

Co-authored-by: Addminus <adrianweniger@gmail.com>

packages/wallet-management/package.json

@@ -48,21 +48,13 @@
     "lifi"
   ],
   "dependencies": {
-    "@coinbase/wallet-sdk": "^3.6.5",
+    "@coinbase/wallet-sdk": "^3.7.0",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^2.0.0-beta.8",
     "@walletconnect/ethereum-provider": "^1.8.0",
     "@walletconnect/web3-provider": "^1.8.0",
-    "@web3-react/coinbase-wallet": "^8.0.35-beta.0",
-    "@web3-react/core": "^8.0.35-beta.0",
-    "@web3-react/eip1193": "^8.0.27-beta.0",
-    "@web3-react/empty": "^8.0.20-beta.0",
-    "@web3-react/metamask": "^8.0.30-beta.0",
-    "@web3-react/network": "^8.0.27-beta.0",
-    "@web3-react/types": "^8.0.20-beta.0",
-    "@web3-react/url": "^8.0.25-beta.0",
     "react": "^18.2.0"
   },
   "devDependencies": {

packages/wallet-management/src/LiFiWalletManagement.ts

@@ -1,130 +1,61 @@
-import type { Signer } from '@ethersproject/abstract-signer';
-import type { ExternalProvider } from '@ethersproject/providers';
-import { Web3Provider } from '@ethersproject/providers';
-import type { Connector } from '@web3-react/types';
-import { useCallback, useEffect, useState } from 'react';
-import { usePriorityConnector } from './priorityConnector';
-// import { usePriorityConnector, usePriorityProvider } from './connectorHooks';
-import { getInjectedAddress } from './injectedData';
+import events from 'events';
+import type { Wallet } from './types';
 import {
   addToActiveWallets,
   addToDeactivatedWallets,
-  isWalletDeactivated,
   removeFromActiveWallets,
   removeFromDeactivatedWallets,
 } from './walletPersistance';
-import type { Wallet } from './walletProviders';
 
-export const useLiFiWalletManagement = () => {
-  const priorityConnector = usePriorityConnector();
-  // "any" because of https://github.com/ethers-io/ethers.js/issues/866
-  // const priorityProvider = usePriorityProvider('any');
-  // const [currentProvider, setCurrentProvider] = useState<Web3Provider>();
-  const [currentConnector, setCurrentConnector] = useState<Connector>();
-  const [signer, setSigner] = useState<Signer>();
-
-  const flushCurrentWalletData = () => {
-    setCurrentConnector(undefined);
-    // setCurrentProvider(undefined);
-    setSigner(undefined);
-  };
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const calcWalletData = (connector?: Connector) => {
-    if (connector) {
-      const provider = new Web3Provider(
-        (connector.provider as ExternalProvider) || (window as any).ethereum,
-        'any', // fallback
-      );
-      // setCurrentProvider(() => provider);
-      setCurrentConnector(() => connector);
-      setSigner(() => provider?.getSigner?.());
+export class LiFiWalletManagement extends events.EventEmitter {
+  connectedWallets: Wallet[] = [];
+
+  public connect = async (wallet: Wallet) => {
+    try {
+      await wallet.connect();
+      wallet.addListener('walletAccountChanged', this.handleAccountDataChange);
+      this.connectedWallets.unshift(wallet);
+      removeFromDeactivatedWallets({
+        address: wallet.account?.address || '',
+        name: wallet.name,
+      });
+      addToActiveWallets({
+        address: wallet.account?.address || '',
+        name: wallet.name,
+      });
+    } catch (e) {
+      throw e;
     }
   };
 
-  const connect = useCallback(
-    async (wallet?: Wallet) => {
-      try {
-        if (wallet) {
-          const { connector } = wallet.web3react;
-          await connector.activate();
-          calcWalletData(connector);
-        } else {
-          await priorityConnector.activate();
-        }
-      } catch (e) {
-        console.log(e);
+  public async autoConnect(wallets: Wallet[]) {
+    for (const wallet of wallets) {
+      if (wallet.autoConnect) {
+        await wallet.autoConnect();
+        wallet.addListener(
+          'walletAccountChanged',
+          this.handleAccountDataChange,
+        );
+        this.connectedWallets.unshift(wallet);
       }
-      const selectedAddress = getInjectedAddress(wallet);
-      removeFromDeactivatedWallets(selectedAddress);
-      addToActiveWallets(selectedAddress);
-    },
-    [calcWalletData, priorityConnector],
-  );
-
-  const disconnect = useCallback(
-    async (wallet?: Wallet) => {
-      const selectedAddress = getInjectedAddress(wallet);
-      removeFromActiveWallets(selectedAddress);
-      addToDeactivatedWallets(selectedAddress);
-      if (wallet) {
-        await currentConnector?.deactivate?.();
-        flushCurrentWalletData();
-      } else if (priorityConnector.deactivate) {
-        await priorityConnector.deactivate?.();
-        flushCurrentWalletData();
-      } else {
-        await priorityConnector.resetState();
-        flushCurrentWalletData();
-      }
-    },
-    [priorityConnector, currentConnector],
-  );
-
-  // eager connect
-  useEffect(() => {
-    const selectedAddress = getInjectedAddress();
-    if (!isWalletDeactivated(selectedAddress) && priorityConnector) {
-      priorityConnector.connectEagerly?.();
-      calcWalletData(priorityConnector);
     }
-  }, [
-    priorityConnector,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    (window as any).ethereum?.selectedAddress,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    (window as any).tally?.selectedAddress,
-  ]);
-
-  // injected wallet listeners
-  useEffect(() => {
-    const { ethereum } = window as any;
-    const handleChainChanged = async (chainId: string | number) => {
-      await currentConnector?.activate();
-      calcWalletData(currentConnector);
-    };
-    const handleAccountsChanged = async (accounts: string[]) => {
-      if (!accounts.length) {
-        await currentConnector?.deactivate?.();
-        flushCurrentWalletData();
-      }
-    };
-
-    ethereum?.on('chainChanged', handleChainChanged);
-    ethereum?.on('accountsChanged', handleAccountsChanged);
-
-    return () => {
-      if (ethereum?.removeListener) {
-        ethereum.removeListener('chainChanged', handleChainChanged);
-        ethereum.removeListener('accountsChanged', handleAccountsChanged);
-      }
-    };
-  }, [currentConnector]);
-
-  return {
-    connect,
-    disconnect,
-    signer,
-    provider: signer?.provider,
+  }
+
+  public disconnect = async (wallet: Wallet) => {
+    wallet.removeAllListeners();
+    removeFromActiveWallets({
+      address: wallet.account?.address || '',
+      name: wallet.name,
+    });
+    addToDeactivatedWallets({
+      address: wallet.account?.address || '',
+      name: wallet.name,
+    });
+
+    wallet.disconnect();
   };
-};
+
+  private handleAccountDataChange() {
+    this.emit('walletChanged', this.connectedWallets);
+  }
+}