fix(dcellar-web-ui): fix refresh page will logout issue (#166)

* fix(dcellar-web-ui): auto logout if wallet is locked

* test(dcellar-web-ui): add wallet log

* feat(dcellar-web-ui): add wallet log

* test(dcellar-web-ui): add log

* test(dcellar-web-ui): add log

* test(dcellar-web-ui): add log

* test: add log

* test: add log

* fix(dcellar-web-ui): fix refresh page will logout if using trust wallet

* test: add log

* test: test wallet

* test: add log

* test: add log

* test: remove MetaMaskConnector

* fix: customize MetaMaskConnector & TrustWalletConnector

* test: add TrustWalletConnector connect method

* refactor: fix wallet issue

* fix(dcellar-web-ui): fix wallet issue

* fix: remove wallet log

* test: test

* test: add log

* fix: fix wallet issues

* fix: remove logs

* fix(dcellar-web-ui): remove unused dependencies

apps/dcellar-web-ui/package.json

@@ -48,7 +48,8 @@
     "@reduxjs/toolkit": "^1.9.5",
     "react-redux": "^8.1.1",
     "next-redux-wrapper": "^8.1.0",
-    "redux-persist":  "^6.0.0"
+    "redux-persist":  "^6.0.0",
+    "@wagmi/core": "^0.10.13"
   },
   "devDependencies": {
     "@babel/plugin-syntax-flow": "^7.14.5",

apps/dcellar-web-ui/src/context/LoginContext/provider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useCallback, useMemo } from 'react';
+import { PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
 
 import { LoginContext } from '@/context/LoginContext/index';
 
@@ -19,11 +19,12 @@ export function LoginContextProvider(props: PropsWithChildren<LoginContextProvid
   const dispatch = useAppDispatch();
   const { children, inline = false } = props;
   const { loginAccount } = useAppSelector((root) => root.persist);
+
 
   const { disconnect } = useDisconnect();
 
   const logout = useCallback(
-    (removeSpAuth = false) => {
+    (removeSpAuth = true) => {
       dispatch(resetUploadQueue({loginAccount}))
       dispatch(setLogout(removeSpAuth));
       disconnect();
@@ -42,21 +43,36 @@ export function LoginContextProvider(props: PropsWithChildren<LoginContextProvid
   });
 
   const { pathname } = useRouter();
-  const { address: walletAddress } = useAccount();
+  const { address: walletAddress, connector } = useAccount();
 
-  useAsyncEffect(async () => {
+  useEffect(() => {
     if (pathname === '/' || inline) return;
 
     if (!walletAddress || loginAccount !== walletAddress) {
       logout();
     }
 
+    // Once the wallet is connected, we can get the address
+    // but if wallet is locked, we can't get the connector from wagmi
+    // to avoid errors when using the connector, we treat this situation as logout.
+    const timer = setTimeout(() => {
+      if (!connector) {
+        logout()
+      }
+    }, 1000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [connector, inline, loginAccount, logout, pathname, walletAddress])
+
+  useAsyncEffect(async () => {
     if (loginAccount === walletAddress) {
       // expire date less than 24h，remove sp auth & logout
       const spMayExpired = await dispatch(checkSpOffChainMayExpired(walletAddress));
       if (spMayExpired) logout(true);
     }
-  }, [walletAddress, pathname]);
+  }, [walletAddress]);
 
   const { pass } = useLoginGuard(inline);
 

apps/dcellar-web-ui/src/context/WalletConnectContext/components/WalletConnectProvider.tsx

@@ -1,6 +1,6 @@
 import { WagmiConfig, createClient } from 'wagmi';
-import { provider, webSocketProvider } from '@/context/WalletConnectContext/config/chains';
-import { connectors } from '@/context/WalletConnectContext/config/connectors';
+import { provider, webSocketProvider } from '@/context/WalletConnectContext/chains';
+import { connectors } from '@/context/WalletConnectContext/connectors';
 
 const client = createClient({
   autoConnect: true,

apps/dcellar-web-ui/src/context/WalletConnectContext/connectors/MetaMaskConnector.ts

@@ -0,0 +1,3 @@
+import { MetaMaskConnector as WagmiMetaMaskConnector  } from 'wagmi/connectors/metaMask';
+
+export class MetaMaskConnector extends WagmiMetaMaskConnector {}

apps/dcellar-web-ui/src/context/WalletConnectContext/connectors/TrustWalletConnector.ts

@@ -0,0 +1,72 @@
+import { Chain } from 'wagmi'
+import { MetaMaskConnector as WagmiMetaMaskConnector  } from 'wagmi/connectors/metaMask';
+import {
+  getClient,
+} from '@wagmi/core'
+
+export type TrustWalletConnectorOptions = {
+  shimDisconnect?: boolean
+}
+
+export class TrustWalletConnector extends WagmiMetaMaskConnector {
+  readonly id: any = 'trustWallet';
+
+  constructor({
+    chains,
+    options: _options,
+  }: {
+    chains?: Chain[]
+    options?: TrustWalletConnectorOptions
+  } = {}) {
+
+    const options = {
+      name: 'Trust Wallet',
+      shimDisconnect: true,
+      UNSTABLE_shimOnConnectSelectAccount: true,
+      getProvider: getTrustWalletProvider,
+      ..._options,
+    }
+
+    super({
+      chains,
+      options,
+    })
+  }
+
+  async disconnect() {
+    super.disconnect()
+
+    const provider: any = await this.getProvider()
+    if (!provider?.off) return
+
+    provider.off('accountsChanged', this.onAccountsChanged)
+    provider.off('chainChanged', this.onChainChanged)
+    provider.off('disconnect', this.onDisconnect)
+
+    if (this.options.shimDisconnect) {
+      getClient().storage?.removeItem(this.shimDisconnectKey)
+    }
+  }
+}
+
+export function getTrustWalletProvider() {
+  const isTrustWallet = (ethereum: any) => {
+    return !!ethereum.isTrust
+  }
+
+  const injectedProviderExist = typeof window !== 'undefined' && typeof window.ethereum !== 'undefined'
+
+  if (!injectedProviderExist) {
+    return
+  }
+
+  if (isTrustWallet(window.ethereum)) {
+    return window.ethereum
+  }
+
+  if (window.ethereum?.providers) {
+    return window.ethereum.providers.find(isTrustWallet)
+  }
+
+  return window.trustWallet
+}

apps/dcellar-web-ui/src/context/WalletConnectContext/connectors/index.tsx

@@ -0,0 +1,8 @@
+import { chains } from '@/context/WalletConnectContext/chains';
+import { MetaMaskConnector } from '@/context/WalletConnectContext/connectors/MetaMaskConnector';
+import { TrustWalletConnector } from '@/context/WalletConnectContext/connectors/TrustWalletConnector';
+
+const trustWalletConnector = new TrustWalletConnector({ chains })
+const metaMaskConnector = new MetaMaskConnector({ chains })
+
+export const connectors = [trustWalletConnector, metaMaskConnector];

apps/dcellar-web-ui/src/context/WalletConnectContext/hooks/useWalletSwitchAccount.ts

@@ -5,20 +5,20 @@ import { ConnectorData, useAccount } from 'wagmi';
 export type WalletSwitchAccountHandler = (data: ConnectorData) => void;
 
 export function useWalletSwitchAccount(handler: WalletSwitchAccountHandler) {
-  const { connector } = useAccount();
+  const {address, connector } = useAccount();
 
   const handlerRef = useSaveFuncRef(handler);
 
   useEffect(() => {
-    const handler = (data: ConnectorData) => {
-      if (data.account) {
+    const onChange = (data: ConnectorData) => {
+      if (data.account && data.account !== address) {
         handlerRef.current?.(data);
       }
     };
 
-    connector?.on('change', handler);
+    connector?.on('change', onChange);
     return () => {
-      connector?.off('change', handler);
+      connector?.off('change', onChange);
     };
-  }, [connector, handlerRef]);
+  }, [address, connector, handlerRef]);
 }

apps/dcellar-web-ui/typings.d.ts

@@ -28,7 +28,7 @@ declare global {
     ethereum: any;
     ga: any;
     clipboardData: any;
-    trustwallet: any;
+    trustWallet: any;
     // zk.wasm export
     eddsaSign: any;
   }