fix: do not show floor/volume change on all (#5214)

* fix: do not show floor/volume change on all

* chore: nit

* chore: add new type of cell and fix lint

* chore: one more place

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

@@ -129,6 +129,8 @@ export const EthCell = ({
   )
 }
 
+export const TextCell = ({ value }: { value: string }) => <ThemedText.BodyPrimary>{value}</ThemedText.BodyPrimary>
+
 export const VolumeCell = ({
   value,
   denomination,

src/nft/components/explore/CollectionTable.tsx

@@ -1,9 +1,9 @@
 import { BigNumber } from '@ethersproject/bignumber'
+import { CollectionTableColumn, TimePeriod } from 'nft/types'
 import { useMemo } from 'react'
 import { CellProps, Column, Row } from 'react-table'
 
-import { CollectionTableColumn } from '../../types'
-import { ChangeCell, CollectionTitleCell, DiscreteNumberCell, EthCell, VolumeCell } from './Cells/Cells'
+import { ChangeCell, CollectionTitleCell, DiscreteNumberCell, EthCell, TextCell, VolumeCell } from './Cells/Cells'
 import { Table } from './Table'
 
 export enum ColumnHeaders {
@@ -20,7 +20,7 @@ const compareFloats = (a: number, b: number): 1 | -1 => {
   return Math.round(a * 100000) >= Math.round(b * 100000) ? 1 : -1
 }
 
-const CollectionTable = ({ data }: { data: CollectionTableColumn[] }) => {
+const CollectionTable = ({ data, timePeriod }: { data: CollectionTableColumn[]; timePeriod: TimePeriod }) => {
   const floorSort = useMemo(() => {
     return (rowA: Row<CollectionTableColumn>, rowB: Row<CollectionTableColumn>) => {
       const aFloor = BigNumber.from(rowA.original.floor.value ?? 0)
@@ -76,9 +76,14 @@ const CollectionTable = ({ data }: { data: CollectionTableColumn[] }) => {
         Header: ColumnHeaders.FloorChange,
         accessor: ({ floor }) => floor.value,
         sortDescFirst: true,
+        disableSortBy: timePeriod === TimePeriod.AllTime,
         sortType: floorChangeSort,
         Cell: function changeCell(cell: CellProps<CollectionTableColumn>) {
-          return <ChangeCell change={cell.row.original.floor.change} />
+          return timePeriod === TimePeriod.AllTime ? (
+            <TextCell value="-" />
+          ) : (
+            <ChangeCell change={cell.row.original.floor.change} />
+          )
         },
       },
       {
@@ -102,9 +107,14 @@ const CollectionTable = ({ data }: { data: CollectionTableColumn[] }) => {
         Header: ColumnHeaders.VolumeChange,
         accessor: ({ volume }) => volume.value,
         sortDescFirst: true,
+        disableSortBy: timePeriod === TimePeriod.AllTime,
         sortType: volumeChangeSort,
         Cell: function changeCell(cell: CellProps<CollectionTableColumn>) {
-          return <ChangeCell change={cell.row.original.volume.change} />
+          return timePeriod === TimePeriod.AllTime ? (
+            <TextCell value="-" />
+          ) : (
+            <ChangeCell change={cell.row.original.volume.change} />
+          )
         },
       },
       {
@@ -125,7 +135,7 @@ const CollectionTable = ({ data }: { data: CollectionTableColumn[] }) => {
         },
       },
     ],
-    [floorChangeSort, floorSort, volumeChangeSort, volumeSort]
+    [floorChangeSort, floorSort, volumeChangeSort, volumeSort, timePeriod]
   )
   return (
     <>

src/nft/components/explore/Table.tsx

@@ -43,15 +43,15 @@ const StyledLoadingRow = styled.tr`
   height: 80px;
 `
 
-const StyledHeader = styled.th<{ isFirstHeader: boolean }>`
-  ${({ isFirstHeader }) => !isFirstHeader && `cursor: pointer;`}
+const StyledHeader = styled.th<{ disabled?: boolean }>`
+  ${({ disabled }) => !disabled && `cursor: pointer;`}
 
   :hover {
-    ${({ theme, isFirstHeader }) => !isFirstHeader && `opacity: ${theme.opacity.hover};`}
+    ${({ theme, disabled }) => !disabled && `opacity: ${theme.opacity.hover};`}
   }
 
   :active {
-    ${({ theme, isFirstHeader }) => !isFirstHeader && `opacity: ${theme.opacity.click};`}
+    ${({ theme, disabled }) => !disabled && `opacity: ${theme.opacity.click};`}
   }
 `
 
@@ -154,7 +154,7 @@ export function Table<D extends Record<string, unknown>>({
                     textAlign: index === 0 ? 'left' : 'right',
                     paddingLeft: index === 0 ? (isMobile ? '16px' : '52px') : 0,
                   }}
-                  isFirstHeader={index === 0}
+                  disabled={column.disableSortBy}
                   key={index}
                 >
                   <Box as="span" color="accentAction" position="relative">
@@ -240,7 +240,7 @@ function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTablePr
                     textAlign: index === 0 ? 'left' : 'right',
                     paddingLeft: index === 0 ? '52px' : 0,
                   }}
-                  isFirstHeader={index === 0}
+                  disabled={index === 0}
                   key={index}
                 >
                   <Box as="span" color="accentAction" position="relative">

src/nft/components/explore/TrendingCollections.tsx

@@ -155,7 +155,7 @@ const TrendingCollections = () => {
           </Selector>
         </Filter>
       </FiltersRow>
-      <CollectionTable data={trendingCollections} />
+      <CollectionTable data={trendingCollections} timePeriod={timePeriod} />
     </ExploreContainer>
   )
 }