@dodoex/wallet-web3-react 0.0.1-beta.3 → 0.0.1-beta.4

package/dist/types/hooks/useHasBalanceTokenList.d.ts

@@ -1,7 +1,6 @@
 import BigNumber from 'bignumber.js';
-export declare function useHasBalanceTokenList({ account, chainId, visible, }: {
+export declare function useHasBalanceTokenList({ account, visible, }: {
     account: string | undefined;
-    chainId: number;
     visible: boolean;
 }): {
     tokenLoading: boolean;

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@dodoex/wallet-web3-react",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.4",
   "source": "src/index.tsx",
   "types": "dist/types/index.d.ts",
   "main": "dist/index.js",
-  "module": "dist/index.js",
   "scripts": {
     "start": "yarn workspace doc start",
     "build": "yarn extract && yarn compile && rollup -c",
@@ -39,7 +38,6 @@
   "devDependencies": {
     "@lingui/cli": "^4.11.4",
     "@lingui/loader": "^4.11.4",
-    "@lingui/swc-plugin": "4.0.6",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.1",
@@ -47,6 +45,7 @@
     "@svgr/rollup": "^8.1.0",
     "@types/identicon.js": "^2.3.5",
     "@types/react-infinite-scroller": "^1.2.5",
+    "babel-plugin-macros": "^3.1.0",
     "rollup": "^4.28.0",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-import-css": "^3.5.7",

package/src/LangProvider.tsx

@@ -14,9 +14,11 @@ interface LangProviderProps {
 
 export async function loadI18(locale: SupportedLang = defaultLang) {
   try {
-    const catalog = await import(`../locales/${locale}.js`);
+    const catalog = await import(`./locales/${locale}.js`);
     i18n.load(locale, catalog.messages || catalog.default.messages);
-  } catch {}
+  } catch (error) {
+    console.error(error);
+  }
   i18n.activate(locale);
 }
 export function LangProvider({ locale, children }: LangProviderProps) {

package/src/WalletConnect/AccountPage.tsx

@@ -33,28 +33,6 @@ import { useWalletConnectContext } from '../WalletConnectProvider';
 import ActivityList from './ActivityList';
 import HasBalanceTokenList from './HasBalanceTokenList';
 
-function CardIcon({ sx, ...other }: BoxProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: 52,
-        height: 52,
-        borderRadius: '50%',
-        backgroundColor: alpha('#1a1a1b', 0.1),
-        cursor: 'pointer',
-        '&:hover': {
-          backgroundColor: '#FFE804',
-        },
-        ...sx,
-      }}
-      {...other}
-    />
-  );
-}
-
 function AccountCardInfoBg({
   children,
   chainLogo,
@@ -289,7 +267,6 @@ function AccountPage({
 
   const balanceListData = useHasBalanceTokenList({
     account,
-    chainId,
     visible: listTab === ListTab.tokens,
   });
 

package/src/WalletConnect/ActivityList.tsx

@@ -173,7 +173,7 @@ export function TransactionList({
                   position: 'relative',
                   display: 'flex',
                   alignItems: 'center',
-                  justifyContent: 'space-between',
+                  justifyContent: 'center',
                   width: 40,
                   height: 40,
                   borderRadius: '50%',

package/src/WalletConnect/HasBalanceTokenList.tsx

@@ -28,7 +28,6 @@ export default function HasBalanceTokenList({
         increaseArray(3).map((_, i) => (
           <Skeleton
             key={i}
-            width="100%"
             height={40}
             sx={{
               mx: 20,

package/src/WalletConnect/WalletDialog.tsx

@@ -15,8 +15,8 @@ export default function WalletDialog({
   onClose: () => void;
   walletWeb3: WalletWeb3;
 }) {
-  const { SendTokenPage } = useWalletConnectContext();
-  const { account, chainId } = useWalletStore();
+  const { SendTokenPage, chainId: selectedChainId } = useWalletConnectContext();
+  const { account, chainId: connectChainId } = useWalletStore();
   const [showSendTokenPage, setShowSendTokenPage] = React.useState(false);
   const [showReceiveTokenPage, setShowReceiveTokenPage] = React.useState(false);
   return (
@@ -48,7 +48,7 @@ export default function WalletDialog({
           ) : (
             <>
               <AccountPage
-                chainId={chainId}
+                chainId={selectedChainId ?? connectChainId}
                 account={account}
                 walletWeb3={walletWeb3}
                 onClose={onClose}
@@ -60,7 +60,7 @@ export default function WalletDialog({
         </>
       ) : (
         <ConnectPage
-          chainId={chainId}
+          chainId={connectChainId}
           account={account}
           walletWeb3={walletWeb3}
           showOtherInjectWallet

package/src/components/Dialog.tsx

@@ -140,6 +140,7 @@ export default function Dialog({
           borderTopWidth: 1,
           maxHeight: '80vh',
           borderRadius: theme.spacing(6, 6, 0, 0),
+          width: '100%',
           [theme.breakpoints.up('tablet')]: {
             minWidth: width ?? 420,
             width,

package/src/hooks/useFetchTokensBalance.ts

@@ -47,6 +47,5 @@ export default function useFetchTokensBalance({
       };
     },
   });
-
   return tokensQueries;
 }

package/src/hooks/useHasBalanceTokenList.ts

@@ -1,11 +1,8 @@
 import BigNumber from 'bignumber.js';
 import React from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { isEqualWith } from 'lodash';
 import { useWalletConnectContext } from '../WalletConnectProvider';
 import useFetchTokensBalance from './useFetchTokensBalance';
 import { useFetchFiatPrice } from './useFetchFiatPrice';
-import { getFetchERC20HelperIsERC20QueryOptions } from '@dodoex/dodo-contract-request';
 import { getTokenFiatPriceList } from '../constants/localstorage';
 import { TokenInfo } from '../components/TokenLogo';
 
@@ -14,99 +11,38 @@ interface TokenResult extends TokenInfo {
 }
 export function useHasBalanceTokenList({
   account,
-  chainId,
   visible,
 }: {
   account: string | undefined;
-  chainId: number;
   visible: boolean;
 }) {
-  const queryClient = useQueryClient();
-  const [hasBalanceTokenList, setHasBalanceTokenList] = React.useState<
-    Array<TokenResult>
-  >([]);
-  const fiatPriceQuery = useFetchFiatPrice(hasBalanceTokenList);
-
   const { tokenList } = useWalletConnectContext();
   const fetchTokenQuery = useFetchTokensBalance({
     account,
     tokenList,
     skip: !visible,
   });
-  React.useEffect(() => {
-    let time: NodeJS.Timeout;
-    const commonKey = getFetchERC20HelperIsERC20QueryOptions(
-      chainId,
-      undefined,
-      account,
-      undefined,
-    ).queryKey.filter((item) => !!item);
-    const unSubscribe = queryClient.getQueryCache().subscribe((event) => {
-      try {
-        const isNotMatch = commonKey.some(
-          (key) => !event.query.queryKey.includes(key),
+  const hasBalanceTokenList = React.useMemo(() => {
+    let newHasBalanceTokenList = [] as TokenResult[];
+    fetchTokenQuery.tokenInfoMap.forEach((value, key) => {
+      if (value > 0) {
+        const token = tokenList.find(
+          (token) => `${token.chainId}-${token.address}` === key,
         );
-        if (!isNotMatch) {
-          clearTimeout(time);
-          time = setTimeout(() => {
-            const tokenQueriesData = queryClient.getQueriesData<bigint>({
-              queryKey: commonKey,
-            });
-            let newHasBalanceTokenList = [] as TokenResult[];
-            const hasBalanceAddressSet = new Set<string>();
-            tokenQueriesData.forEach((value) => {
-              const balance = value[1];
-              const queryKey = value[0];
-              const token = tokenList.find(
-                (token) =>
-                  `${token.chainId}-${token.address}` ===
-                  `${queryKey[1]}-${queryKey[2]}`,
-              );
-              if (
-                token &&
-                balance &&
-                balance > 0 &&
-                !hasBalanceAddressSet.has(token.address) &&
-                token.decimals !== undefined
-              ) {
-                hasBalanceAddressSet.add(token.address);
-                newHasBalanceTokenList.push({
-                  ...token,
-                  balance: new BigNumber(balance.toString()).div(
-                    10 ** token.decimals,
-                  ),
-                });
-              }
-            });
-            newHasBalanceTokenList = newHasBalanceTokenList.sort((a, b) =>
-              a.balance.gt(b.balance) ? -1 : 1,
-            );
-            if (
-              !isEqualWith(
-                newHasBalanceTokenList,
-                hasBalanceTokenList,
-                (newValue, oldValue, key) => {
-                  if (key === 'balance' && BigNumber.isBigNumber(newValue)) {
-                    return newValue.isEqualTo(oldValue);
-                  }
-                  return undefined;
-                },
-              )
-            ) {
-              setHasBalanceTokenList(newHasBalanceTokenList);
-            }
-          }, 100);
+        if (token?.decimals !== undefined) {
+          newHasBalanceTokenList.push({
+            ...token,
+            balance: new BigNumber(value.toString()).div(10 ** token.decimals),
+          });
         }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      } catch (error) {}
+      }
     });
-
-    return () => {
-      unSubscribe();
-      clearTimeout(time);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [queryClient, account, chainId]);
+    newHasBalanceTokenList = newHasBalanceTokenList.sort((a, b) =>
+      a.balance.gt(b.balance) ? -1 : 1,
+    );
+    return newHasBalanceTokenList;
+  }, [fetchTokenQuery.tokenInfoMap]);
+  const fiatPriceQuery = useFetchFiatPrice(hasBalanceTokenList);
 
   const tokenLoading = fetchTokenQuery.isLoading || fetchTokenQuery.isPending;
 

package/src/locales/en.po

@@ -21,7 +21,7 @@ msgstr "1、Ledger Live APP is closed{BR}2、The device plugged in via USB，NOT
 msgid "Account"
 msgstr "Account"
 
-#: src/WalletConnect/AccountPage.tsx:313
+#: src/WalletConnect/AccountPage.tsx:290
 msgid "Activity"
 msgstr "Activity"
 
@@ -42,7 +42,7 @@ msgstr "Approve"
 msgid "Available Ledger Account"
 msgstr "Available Ledger Account"
 
-#: src/WalletConnect/AccountPage.tsx:172
+#: src/WalletConnect/AccountPage.tsx:150
 #: src/WalletConnect/ConnectLedger/SelectAddressDialog.tsx:206
 msgid "Balance"
 msgstr "Balance"
@@ -86,8 +86,8 @@ msgstr "Connecting"
 msgid "Continue"
 msgstr "Continue"
 
-#: src/WalletConnect/AccountPage.tsx:399
-#: src/WalletConnect/HasBalanceTokenList.tsx:118
+#: src/WalletConnect/AccountPage.tsx:376
+#: src/WalletConnect/HasBalanceTokenList.tsx:117
 #: src/WalletConnect/ReceiveTokenPage.tsx:99
 msgid "Copied"
 msgstr "Copied"
@@ -160,7 +160,7 @@ msgstr "Log in with your email or a passkey"
 msgid "More Wallets"
 msgstr "More Wallets"
 
-#: src/WalletConnect/HasBalanceTokenList.tsx:51
+#: src/WalletConnect/HasBalanceTokenList.tsx:50
 msgid "No tokens"
 msgstr "No tokens"
 
@@ -169,7 +169,7 @@ msgstr "No tokens"
 msgid "OK"
 msgstr "OK"
 
-#: src/WalletConnect/AccountPage.tsx:305
+#: src/WalletConnect/AccountPage.tsx:282
 msgid "On-chain transaction records"
 msgstr "On-chain transaction records"
 
@@ -185,7 +185,7 @@ msgstr "Pending"
 msgid "Pool Creation"
 msgstr "Pool Creation"
 
-#: src/WalletConnect/AccountPage.tsx:253
+#: src/WalletConnect/AccountPage.tsx:231
 #: src/WalletConnect/ReceiveTokenPage.tsx:50
 msgid "Receive"
 msgstr "Receive"
@@ -203,7 +203,7 @@ msgstr "Remove Liquidity"
 msgid "Reset"
 msgstr "Reset"
 
-#: src/WalletConnect/AccountPage.tsx:224
+#: src/WalletConnect/AccountPage.tsx:202
 #: src/WalletConnect/ActivityList.tsx:401
 #: src/WalletConnect/SendTokenPage.tsx:116
 #: src/WalletConnect/SendTokenPage.tsx:244
@@ -238,7 +238,7 @@ msgstr ""
 msgid "This is empty"
 msgstr "This is empty"
 
-#: src/WalletConnect/AccountPage.tsx:301
+#: src/WalletConnect/AccountPage.tsx:278
 msgid "Token"
 msgstr "Token"
 

package/src/locales/zh.po

@@ -21,7 +21,7 @@ msgstr ""
 msgid "Account"
 msgstr ""
 
-#: src/WalletConnect/AccountPage.tsx:313
+#: src/WalletConnect/AccountPage.tsx:290
 msgid "Activity"
 msgstr ""
 
@@ -42,7 +42,7 @@ msgstr ""
 msgid "Available Ledger Account"
 msgstr ""
 
-#: src/WalletConnect/AccountPage.tsx:172
+#: src/WalletConnect/AccountPage.tsx:150
 #: src/WalletConnect/ConnectLedger/SelectAddressDialog.tsx:206
 msgid "Balance"
 msgstr ""
@@ -86,8 +86,8 @@ msgstr ""
 msgid "Continue"
 msgstr ""
 
-#: src/WalletConnect/AccountPage.tsx:399
-#: src/WalletConnect/HasBalanceTokenList.tsx:118
+#: src/WalletConnect/AccountPage.tsx:376
+#: src/WalletConnect/HasBalanceTokenList.tsx:117
 #: src/WalletConnect/ReceiveTokenPage.tsx:99
 msgid "Copied"
 msgstr ""
@@ -160,7 +160,7 @@ msgstr ""
 msgid "More Wallets"
 msgstr ""
 
-#: src/WalletConnect/HasBalanceTokenList.tsx:51
+#: src/WalletConnect/HasBalanceTokenList.tsx:50
 msgid "No tokens"
 msgstr ""
 
@@ -169,7 +169,7 @@ msgstr ""
 msgid "OK"
 msgstr ""
 
-#: src/WalletConnect/AccountPage.tsx:305
+#: src/WalletConnect/AccountPage.tsx:282
 msgid "On-chain transaction records"
 msgstr ""
 
@@ -185,7 +185,7 @@ msgstr ""
 msgid "Pool Creation"
 msgstr ""
 
-#: src/WalletConnect/AccountPage.tsx:253
+#: src/WalletConnect/AccountPage.tsx:231
 #: src/WalletConnect/ReceiveTokenPage.tsx:50
 msgid "Receive"
 msgstr ""
@@ -203,7 +203,7 @@ msgstr ""
 msgid "Reset"
 msgstr ""
 
-#: src/WalletConnect/AccountPage.tsx:224
+#: src/WalletConnect/AccountPage.tsx:202
 #: src/WalletConnect/ActivityList.tsx:401
 #: src/WalletConnect/SendTokenPage.tsx:116
 #: src/WalletConnect/SendTokenPage.tsx:244
@@ -236,7 +236,7 @@ msgstr ""
 msgid "This is empty"
 msgstr ""
 
-#: src/WalletConnect/AccountPage.tsx:301
+#: src/WalletConnect/AccountPage.tsx:278
 msgid "Token"
 msgstr ""
 

package/tsconfig.json

@@ -15,7 +15,7 @@
     "newLine": "CRLF",
     "declaration": true,
     "declarationDir": "./dist/types",
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "target": "es2016"
   },
   "exclude": ["node_modules", "types", "src/locales"],