chore: update sort logic for detail modal (#2532)

* chore: update sort logic for detail modal * chore: allow clear in search
KyberNetwork · Sep 12, 2024 · 88c0520 · 88c0520
1 parent c9041f3
commit 88c0520
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/pages/MarketOverview/DetailModal.tsx b/src/pages/MarketOverview/DetailModal.tsx
@@ -18,6 +18,7 @@ import { shortenAddress } from 'utils'
 import { formatDisplayNumber } from 'utils/numbers'
 
 import { ContentChangable, TabItem } from './styles'
+import useFilter from './useFilter'
 
 // () => setShowTokenId(null)
 export default function DetailModal({
@@ -37,6 +38,8 @@ export default function DetailModal({
   const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
   const { data: quoteData } = useGetQuoteByChainQuery()
   const [selectedPrice, setSelectedPrice] = useState<'buy' | 'sell'>('buy')
+  const { filters } = useFilter()
+  const selectedChainId = filters.chainId
 
   return (
     <Modal isOpen={!!tokenToShow} onDismiss={onDismiss} width="100%" maxWidth="600px">
@@ -180,7 +183,13 @@ export default function DetailModal({
 
           {tokenToShow.tokens
             .filter(token => MAINNET_NETWORKS.includes(+token.chainId))
-            .sort((a, b) => b.priceBuy - a.priceBuy)
+            .sort((a, b) => {
+              if (selectedChainId) {
+                if (+a.chainId === +selectedChainId) return -1
+                if (+b.chainId === +selectedChainId) return 1
+              }
+              return b.priceBuy - a.priceBuy
+            })
             .map(token => {
               const quoteSymbol = quoteData?.data?.onchainPrice?.usdQuoteTokenByChainId?.[token.chainId]?.symbol
               const address =
@@ -323,7 +332,7 @@ export const PriceChange = ({ priceChange }: { priceChange: number | undefined }
       animate={!!lastPriceChange && animate}
       up={!!lastPriceChange && !!priceChange && priceChange - lastPriceChange >= 0}
     >
-      {!priceChange ? '--' : priceChange.toFixed(2) + '%'}
+      {!priceChange ? '--' : formatDisplayNumber(priceChange, { style: 'decimal', fractionDigits: 2 }) + '%'}
     </ContentChangable>
   )
 }
diff --git a/src/pages/MarketOverview/index.tsx b/src/pages/MarketOverview/index.tsx
@@ -10,7 +10,7 @@ import { ButtonEmpty } from 'components/Button'
 import Divider from 'components/Divider'
 import InfoHelper from 'components/InfoHelper'
 import Pagination from 'components/Pagination'
-import SearchInput from 'components/SearchInput'
+import Search from 'components/Search'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { MAINNET_NETWORKS } from 'constants/networks'
 import { NETWORKS_INFO } from 'hooks/useChainsConfig'
@@ -152,10 +152,11 @@ export default function MarketOverview() {
             </Tag>
           ))}
         </Flex>
-        <SearchInput
+        <Search
           placeholder="Search by token name, symbol or address"
-          value={input}
-          onChange={val => setInput(val)}
+          searchValue={input}
+          allowClear
+          onSearch={val => setInput(val)}
           style={{ height: '36px' }}
         />
       </Flex>