Merge pull request #172 from bnb-chain/wenty/search1206

feat: Fix token list sort issue
bnb-chain · Dec 6, 2024 · 54cf211 · 54cf211
2 parents d5eac0c + 34d21ec
commit 54cf211
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 16 deletions.
diff --git a/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx b/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx
@@ -22,7 +22,7 @@ export function IconImage(props: IconImageProps) {
           className="default-icon"
           size={boxSize}
           {...restProps}
-          bg={fallbackBgColor ?? theme.colors[colorMode].support.primary[1]}
+          bg={fallbackBgColor ?? theme.colors[colorMode].support.primary[4]}
         />
       ) : (
         <Image

diff --git a/...anonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx b/...anonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
@@ -43,18 +43,18 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
     toChainId: toChain?.id,
   });
 
-  const { isNoResult, result, onSearch } = useSearch({
+  const { isNoResult, result, keyword, onSearch } = useSearch({
     data: tokens,
     filter: (item, keyword) => {
       return (
-        item.displaySymbol?.toLowerCase().includes(keyword) ||
-        item.name?.toLowerCase().includes(keyword) ||
+        item.displaySymbol?.toLowerCase().includes(keyword?.toLowerCase()) ||
+        item.name?.toLowerCase().includes(keyword?.toLowerCase()) ||
         isSameAddress(item.address, keyword)
       );
     },
   });
 
-  const { isLoading, data } = useTokenList(result);
+  const { isLoading, data } = useTokenList(result, keyword);
 
   const evmAccount = useAccount();
   const tronAccount = useTronAccount();
@@ -109,7 +109,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                 iconUrl={item.icon}
                 isActive={isActive}
                 isDisabled={isDisabled}
-                data-address={item.address?.toLowerCase()}
+                data-address={item.address}
                 incompatibleTooltip={formatMessage({
                   id: 'select-modal.token.incompatible.tooltip',
                 })}

diff --git a/.../canonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useSearch.ts b/.../canonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useSearch.ts
@@ -15,7 +15,7 @@ export function useSearch<T>(props: UseSearchProps<T>) {
   };
 
   const result = useMemo(() => {
-    return data.filter((item) => filter(item, keyword.toLowerCase())).sort(sorter);
+    return data.filter((item) => filter(item, keyword)).sort(sorter);
   }, [data, filter, keyword, sorter]);
 
   const isNoResult = keyword.length > 0 && !result.length;
@@ -24,5 +24,6 @@ export function useSearch<T>(props: UseSearchProps<T>) {
     onSearch,
     isNoResult,
     result,
+    keyword,
   };
 }
diff --git a/...nonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useTokenList.ts b/...nonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useTokenList.ts
@@ -9,7 +9,7 @@ import { sortTokens } from '@/modules/aggregator/shared/sortTokens';
 import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider';
 import { isChainOrTokenCompatible } from '@/modules/aggregator/shared/isChainOrTokenCompatible';
 
-export function useTokenList(tokens: IBridgeToken[] = []) {
+export function useTokenList(tokens: IBridgeToken[] = [], keyword?: string) {
   const selectedToken = useAppSelector((state) => state.transfer.selectedToken);
   const isLoadingTokenBalances = useAppSelector((state) => state.aggregator.isLoadingTokenBalances);
   const isLoadingTokenPrices = useAppSelector((state) => state.aggregator.isLoadingTokenPrices);
@@ -38,19 +38,37 @@ export function useTokenList(tokens: IBridgeToken[] = []) {
     const sortedTokens = sortTokens({
       tokens: tmpTokens,
       orders: transferConfig.order?.tokens,
-    }).sort((a) => {
-      return isSameAddress(a.address, selectedToken?.address) && isChainOrTokenCompatible(a)
-        ? -1
-        : 0;
-    });
+    })
+      .sort((a, b) => {
+        if (keyword) {
+          const isA = isChainOrTokenCompatible(a);
+          const isB = isChainOrTokenCompatible(b);
+          const findA = a.displaySymbol?.toLowerCase()?.includes(keyword?.toLowerCase());
+          const findB = b.displaySymbol?.toLowerCase()?.includes(keyword?.toLowerCase());
+
+          if (findA && isA) {
+            return -1;
+          }
+          if (findB && isB) {
+            return 1;
+          }
+        }
+        return 0;
+      })
+      .sort((a) => {
+        return isSameAddress(a.address, selectedToken?.address) && isChainOrTokenCompatible(a)
+          ? -1
+          : 0;
+      });
 
     return sortedTokens;
   }, [
+    tokens,
     transferConfig.order?.tokens,
     getTokenBalance,
     getTokenPrice,
     selectedToken?.address,
-    tokens,
+    keyword,
   ]);
 
   return { data: sortedTokens, isLoading: isLoadingTokenBalances || isLoadingTokenPrices };

diff --git a/...dge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx b/...dge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx
@@ -44,7 +44,7 @@ export const RouteName = React.memo(
             w={['16px', '16px', '16px', '20px']}
             h={['16px', '16px', '16px', '20px']}
             borderRadius={'100%'}
-            mb={['4px', '4px', '4px', '0']}
+            mb={['0', '0', '4px', '0']}
           />
         ) : bridgeType === 'stargate' ? (
           <StarGateLogo w={['16px', '16px', '16px', '20px']} h={['16px', '16px', '16px', '20px']} />
@@ -63,7 +63,7 @@ export const RouteName = React.memo(
             w={['16px', '16px', '16px', '20px']}
             h={['16px', '16px', '16px', '20px']}
             borderRadius={'100%'}
-            mb={['4px', '4px', '4px', '0']}
+            mb={['0', '0', '4px', '0']}
           />
         ) : null}