From 34d21ec0a4b106519c7fc8ae4661595501920eb8 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Fri, 6 Dec 2024 16:13:19 +0800 Subject: [PATCH] feat: Fix token list sort issue --- .../src/core/components/IconImage/index.tsx | 2 +- .../SelectModal/ChooseTokenModal.tsx | 10 +++--- .../components/SelectModal/hooks/useSearch.ts | 3 +- .../SelectModal/hooks/useTokenList.ts | 32 +++++++++++++++---- .../RouteInfo/RouteName/index.tsx | 4 +-- 5 files changed, 35 insertions(+), 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 index 88398828..ddab849b 100644 --- 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]} /> ) : ( { 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/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useSearch.ts b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useSearch.ts index 9c17987e..550f4924 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useSearch.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useSearch.ts @@ -15,7 +15,7 @@ export function useSearch(props: UseSearchProps) { }; 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(props: UseSearchProps) { onSearch, isNoResult, result, + keyword, }; } diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useTokenList.ts b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useTokenList.ts index 8e27d4b7..d8276d7d 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/hooks/useTokenList.ts +++ b/packages/canonical-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/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx index b6d9abdf..50a285e3 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx +++ b/packages/canonical-bridge-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' ? ( @@ -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}