metaport#214 Fix token balances update

src/components/ChainApps.tsx

@@ -11,7 +11,7 @@ export default function ChainApps(props: {
   skaleNetwork: SkaleNetwork
   chainName: string
   handle?: (schainName: string, app?: string) => void
-  size?: 'sm' | 'md',
+  size?: 'sm' | 'md'
   prim?: boolean
 }) {
   const apps = getChainAppsMeta(props.chainName, props.skaleNetwork)

src/components/TokenList.tsx

@@ -37,18 +37,15 @@ export default function TokenList() {
   const { address } = useAccount()
 
   useEffect(() => {
-    updateTokenBalances(address)
-    const intervalId = setInterval(() => {
+    const fetchBalances = () => {
       updateTokenBalances(address)
-    }, BALANCE_UPDATE_INTERVAL_MS)
+    }
+    fetchBalances()
+    const intervalId = setInterval(fetchBalances, BALANCE_UPDATE_INTERVAL_MS)
     return () => {
-      clearInterval(intervalId) // Clear interval on component unmount
+      clearInterval(intervalId)
     }
-  }, [updateTokenBalances])
-
-  useEffect(() => {
-    updateTokenBalances(address)
-  }, [updateTokenBalances, tokenContracts, address])
+  }, [address, updateTokenBalances, tokenContracts])
 
   useEffect(() => {
     const defaultToken = getDefaultToken(tokens)

src/components/TokenListSection.tsx

@@ -31,47 +31,49 @@ export default function TokenListSection(props: {
       >
         {props.type}
       </p>
-      {Object.keys(props.tokens).sort().map((key, _) => (
-        <Button
-          key={key}
-          color="secondary"
-          size="small"
-          className={cmn.fullWidth}
-          onClick={() => handle(props.tokens[key])}
-        >
-          <div className={cls(cmn.flex, cmn.flexcv, cmn.fullWidth, cmn.mtop10, cmn.mbott10)}>
-            <div className={cls(cmn.flex, cmn.flexc, cmn.mleft10)}>
-              <TokenIcon
-                tokenSymbol={props.tokens[key]?.meta.symbol}
-                iconUrl={props.tokens[key]?.meta.iconUrl}
-              />
+      {Object.keys(props.tokens)
+        .sort()
+        .map((key, _) => (
+          <Button
+            key={key}
+            color="secondary"
+            size="small"
+            className={cmn.fullWidth}
+            onClick={() => handle(props.tokens[key])}
+          >
+            <div className={cls(cmn.flex, cmn.flexcv, cmn.fullWidth, cmn.mtop10, cmn.mbott10)}>
+              <div className={cls(cmn.flex, cmn.flexc, cmn.mleft10)}>
+                <TokenIcon
+                  tokenSymbol={props.tokens[key]?.meta.symbol}
+                  iconUrl={props.tokens[key]?.meta.iconUrl}
+                />
+              </div>
+              <p
+                className={cls(
+                  cmn.p,
+                  cmn.p3,
+                  cmn.p600,
+                  cmn.pPrim,
+                  cmn.flex,
+                  cmn.flexg,
+                  cmn.mri10,
+                  cmn.mleft10
+                )}
+              >
+                {getTokenName(props.tokens[key])}
+              </p>
+              <div className={cmn.mri10}>
+                <TokenBalance
+                  balance={
+                    props.tokenBalances ? props.tokenBalances[props.tokens[key]?.keyname] : null
+                  }
+                  symbol={props.tokens[key]?.meta.symbol}
+                  decimals={props.tokens[key]?.meta.decimals}
+                />
+              </div>
             </div>
-            <p
-              className={cls(
-                cmn.p,
-                cmn.p3,
-                cmn.p600,
-                cmn.pPrim,
-                cmn.flex,
-                cmn.flexg,
-                cmn.mri10,
-                cmn.mleft10
-              )}
-            >
-              {getTokenName(props.tokens[key])}
-            </p>
-            <div className={cmn.mri10}>
-              <TokenBalance
-                balance={
-                  props.tokenBalances ? props.tokenBalances[props.tokens[key]?.keyname] : null
-                }
-                symbol={props.tokens[key]?.meta.symbol}
-                decimals={props.tokens[key]?.meta.decimals}
-              />
-            </div>
-          </div>
-        </Button>
-      ))}
+          </Button>
+        ))}
     </div>
   )
 }

src/core/interfaces/Tokens.ts

@@ -21,8 +21,7 @@
  * @copyright SKALE Labs 2022-Present
  */
 
-import { AddressType } from "."
-
+import { AddressType } from '.'
 
 export interface EthToken {
   chains: ConnectedChainMap