fix: limit max volume change value to 9999% (#5227)

* fix web-2246

* chore: change to >

* chore: use single component

src/nft/components/explore/Cells/Cells.tsx

@@ -3,6 +3,7 @@ import { SquareArrowDownIcon, SquareArrowUpIcon, VerifiedIcon } from 'nft/compon
 import { useIsMobile } from 'nft/hooks'
 import { Denomination } from 'nft/types'
 import { volumeFormatter } from 'nft/utils'
+import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
@@ -155,14 +156,16 @@ export const VolumeCell = ({
   )
 }
 
-export const ChangeCell = ({ change }: { change?: number }) => (
+export const ChangeCell = ({ change, children }: { children?: ReactNode; change?: number }) => (
   <ChangeCellContainer change={change ?? 0}>
     {!change || change > 0 ? (
       <SquareArrowUpIcon width="20px" height="20px" />
     ) : (
       <SquareArrowDownIcon width="20px" height="20px" />
     )}
-    <ThemedText.BodyPrimary color="currentColor">{change ? Math.abs(Math.round(change)) : 0}%</ThemedText.BodyPrimary>
+    <ThemedText.BodyPrimary color="currentColor">
+      {children || `${change ? Math.abs(Math.round(change)) : 0}%`}
+    </ThemedText.BodyPrimary>
   </ChangeCellContainer>
 )
 

src/nft/components/explore/CollectionTable.tsx

@@ -16,6 +16,8 @@ export enum ColumnHeaders {
   Owners = 'Owners',
 }
 
+const VOLUME_CHANGE_MAX_VALUE = 9999
+
 const compareFloats = (a: number, b: number): 1 | -1 => {
   return Math.round(a * 100000) >= Math.round(b * 100000) ? 1 : -1
 }
@@ -110,10 +112,13 @@ const CollectionTable = ({ data, timePeriod }: { data: CollectionTableColumn[];
         disableSortBy: timePeriod === TimePeriod.AllTime,
         sortType: volumeChangeSort,
         Cell: function changeCell(cell: CellProps<CollectionTableColumn>) {
+          const { change } = cell.row.original.volume
           return timePeriod === TimePeriod.AllTime ? (
             <TextCell value="-" />
+          ) : change >= VOLUME_CHANGE_MAX_VALUE ? (
+            <ChangeCell change={change}>{`>${VOLUME_CHANGE_MAX_VALUE}`}%</ChangeCell>
           ) : (
-            <ChangeCell change={cell.row.original.volume.change} />
+            <ChangeCell change={change} />
           )
         },
       },