node-real · aiden-cao · Aug 11, 2023 · Jul 26, 2023 · Jul 26, 2023 · Jul 25, 2023
@@ -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",

@@ -158,15 +158,16 @@ export function Select(props: DCSelectProps) {
             return (
               <GAClick key={item.value} name={gaClickName}>
                 <MenuItem
+                  as="div"
                   px={24}
                   py={8}
                   transitionDuration="normal"
                   transitionProperty="colors"
                   bg={isSelected ? rgba('#00BA34', 0.1) : undefined}
                   _hover={{
-                    bg: isSelected ? undefined : 'bg.bottom',
+                    bg: isSelected || !item.access ? undefined : 'bg.bottom',
                   }}
-                  onClick={() => onSelectItem(item)}
+                  onClick={() => item.access && onSelectItem(item)}
                   _last={{
                     mb: 8,
                   }}

@@ -20,6 +20,7 @@ export type FixedType = 'left' | 'right' | boolean;
 
 const theme: ThemeConfig = {
   token: {
+    colorPrimary: '#00BA34',
     colorBorderSecondary: '#e6e8ea',
     colorLink: '#00BA34',
     colorLinkActive: '#00BA34',
@@ -69,17 +70,32 @@ export const SealLoading = () => {
   }
 `;
   return (
-    <Flex
-      w={`30%`}
-      bg={'#1184EE'}
-      borderRadius={'28px'}
-      animation={`${loading} 1.5s linear infinite`}
-    />
+    <Flex alignItems="center">
+      <Flex w={'84px'} h={'8px'} bg={'#E7F3FD'} borderRadius={'28px'} overflow={'hidden'}>
+        <Flex
+          w={`30%`}
+          bg={'#1184EE'}
+          borderRadius={'28px'}
+          animation={`${loading} 1.5s linear infinite`}
+        />
+      </Flex>
+      <Box
+        color={'readable.normal'}
+        ml={'4px'}
+        fontSize={'12px'}
+        lineHeight={'15px'}
+        fontWeight={400}
+        borderRadius={4}
+        padding={4}
+      >
+        Sealing...
+      </Box>
+    </Flex>
   );
 };
 
 export const UploadProgress = (props: { progress: number }) => {
-  let { progress = 0} = props;
+  let { progress = 0 } = props;
   if (progress < 0) {
     progress = 0;
   }
@@ -184,6 +200,7 @@ const Container = styled.div`
     padding-top: 13px;
     padding-bottom: 13px;
   }
+  .ant-table-tbody > tr.ant-table-row-selected > td,
   .ant-table-tbody > tr.ant-table-row:hover > td {
     background: rgba(0, 186, 52, 0.1);
   }
@@ -204,4 +221,24 @@ const Container = styled.div`
   .ant-table-ping-right:not(.ant-table-has-fix-right) .ant-table-container::after {
     display: none;
   }
+
+  .ant-checkbox-checked:after {
+    display: none;
+  }
+  .ant-checkbox-checked:not(.ant-checkbox-disabled):hover .ant-checkbox-inner {
+    background-color: #2ec659;
+    border-color: transparent;
+  }
+  .ant-checkbox-indeterminate .ant-checkbox-inner {
+    background-color: #00ba34;
+    border-color: #00ba34;
+    &:after {
+      background-color: #fff;
+      height: 2px;
+    }
+  }
+  .ant-checkbox-indeterminate:hover .ant-checkbox-inner {
+    background-color: #2ec659;
+    border-color: #2ec659;
+  }
 `;
@@ -24,6 +24,7 @@ import { genCreateObjectTx } from '@/modules/file/utils/genCreateObjectTx';
 import { resolve } from '@/facade/common';
 import { broadcastFault, commonFault, createTxFault, simulateFault } from '@/facade/error';
 import { isEmpty } from 'lodash-es';
+import { parseErrorXml } from '@/utils/common';
 
 interface GlobalTasksProps {}
 
@@ -159,12 +160,12 @@ export const GlobalTasks = memo<GlobalTasksProps>(function GlobalTasks() {
         'X-Gnfd-User-Address': headers.get('X-Gnfd-User-Address'),
         'X-Gnfd-App-Domain': headers.get('X-Gnfd-App-Domain'),
       },
-    }).catch(e => {
-      console.log('upload error', e);
+    }).catch(async (e: Response) => {
+      const {code, message} = await parseErrorXml(e)
       dispatch(updateUploadTaskMsg({
         account: loginAccount,
         id: task.id,
-        msg: e?.message || 'Upload error',
+        msg: message || 'Upload error',
       }));
     })
   };

@@ -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);
 

@@ -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,

@@ -0,0 +1,3 @@
+import { MetaMaskConnector as WagmiMetaMaskConnector  } from 'wagmi/connectors/metaMask';
+
+export class MetaMaskConnector extends WagmiMetaMaskConnector {}
@@ -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
+}
@@ -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];
@@ -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]);
 }