feat: change chain-pin and chain-reveal logic. (#2200)

* feat: matterify chain if its usd_value greater than $1000. * feat: change chain-reveal logic. --------- Co-authored-by: vvvvvv1vvvvvv <[email protected]>
RabbyHub · Apr 12, 2024 · 3d96154 · 3d96154
1 parent 311fbe4
commit 3d96154
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 15 deletions.
diff --git a/src/ui/models/account.ts b/src/ui/models/account.ts
@@ -44,6 +44,18 @@ export interface AccountState {
   mnemonicAccounts: DisplayedKeryring[];
 }
 
+/**
+ * filter chains with balance:
+ * 1. greater than $1 and has percentage 1%
+ * 2. or >= $1000
+ */
+export function isChainMattered(chainUsdValue: number, totalUsdValue: number) {
+  return (
+    chainUsdValue >= 1000 ||
+    (chainUsdValue > 1 && chainUsdValue / totalUsdValue > 0.01)
+  );
+}
+
 export const account = createModel<RootModel>()({
   name: 'account',
 
@@ -429,8 +441,7 @@ export const account = createModel<RootModel>()({
       const matteredChainBalances = (result.mainnet?.chain_list || []).reduce(
         (accu, cur) => {
           const curUsdValue = coerceFloat(cur.usd_value);
-          // TODO: only leave chain with blance greater than $1 and has percentage 1%
-          if (curUsdValue > 1 && curUsdValue / mainnetTotalUsdValue > 0.01) {
+          if (isChainMattered(curUsdValue, mainnetTotalUsdValue)) {
             accu[cur.id] = formatChainToDisplay(cur);
           }
           return accu;
@@ -447,7 +458,7 @@ export const account = createModel<RootModel>()({
       ).reduce((accu, cur) => {
         const curUsdValue = coerceFloat(cur.usd_value);
 
-        if (curUsdValue > 1 && curUsdValue / testnetTotalUsdValue > 0.01) {
+        if (isChainMattered(curUsdValue, testnetTotalUsdValue)) {
           accu[cur.id] = formatChainToDisplay(cur);
         }
         return accu;

diff --git a/src/ui/views/CommonPopup/AssetList/ChainList.tsx b/src/ui/views/CommonPopup/AssetList/ChainList.tsx
@@ -6,6 +6,10 @@ import { DisplayChainWithWhiteLogo } from '@/ui/hooks/useCurrentBalance';
 import { Skeleton } from 'antd';
 import { useTranslation } from 'react-i18next';
 
+function shouldChainRevealed(chainItem: ChainItemType) {
+  return chainItem.percent >= 1 || chainItem.usd_value >= 1000;
+}
+
 export const ChainList = ({
   onChange,
   isTestnet = false,
@@ -21,10 +25,6 @@ export const ChainList = ({
     ? (data?.testnetBalance as number) ?? 0
     : (data?.balance as number) ?? 0;
   const balanceLoading = (data?.balanceLoading as boolean) ?? false;
-  const [currentChainList, setCurrentChainList] = React.useState<
-    ChainItemType[]
-  >([]);
-  const [moreChainList, setMoreChainList] = React.useState<ChainItemType[]>([]);
   const [showMore, setShowMore] = React.useState(false);
   const [activeChainId, setActiveChainId] = React.useState<string | null>(null);
   const { t } = useTranslation();
@@ -39,15 +39,34 @@ export const ChainList = ({
     }
   };
 
-  React.useEffect(() => {
-    const list = chainList.map((item) => {
-      return {
+  const { chainsToReveal, chainsToHide } = React.useMemo(() => {
+    const res = {
+      allItems: [] as ChainItemType[],
+      chainsToReveal: [] as ChainItemType[],
+      chainsToHide: [] as ChainItemType[],
+    };
+
+    const chainCount = chainList.length;
+    chainList.forEach((item) => {
+      const chainItem: ChainItemType = {
         ...item,
         percent: (item.usd_value / balance) * 100,
       };
+      res.allItems.push(chainItem);
+
+      if (chainCount <= 6 || shouldChainRevealed(chainItem)) {
+        res.chainsToReveal.push(chainItem);
+      } else {
+        res.chainsToHide.push(chainItem);
+      }
     });
-    setCurrentChainList(list.filter((item) => item.percent >= 1));
-    setMoreChainList(list.filter((item) => item.percent < 1));
+
+    if (res.chainsToHide.length <= 2) {
+      res.chainsToReveal = [...res.allItems];
+      res.chainsToHide = [];
+    }
+
+    return res;
   }, [chainList, balance]);
 
   React.useEffect(() => {
@@ -57,7 +76,7 @@ export const ChainList = ({
     }
   }, [visible]);
 
-  const moreLen = moreChainList.length;
+  const moreLen = chainsToHide.length;
 
   if (balanceLoading) {
     return (
@@ -79,7 +98,7 @@ export const ChainList = ({
         'flex gap-12 flex-wrap'
       )}
     >
-      {currentChainList.map((item) => (
+      {chainsToReveal.map((item) => (
         <ChainItem
           inactive={activeChainId !== null && activeChainId !== item.id}
           key={item.id}
@@ -90,7 +109,7 @@ export const ChainList = ({
         />
       ))}
       {showMore ? (
-        moreChainList.map((item) => (
+        chainsToHide.map((item) => (
           <ChainItem
             onClick={() => {
               handleSelectChain(item.id);