Optimize tables with blocks in them

WRadoslaw · Oct 13, 2023 · 7e3446e · 7e3446e
1 parent 4a7badb
commit 7e3446e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/packages/atlas/src/components/DateTimeBlock/DateTimeBlock.tsx b/packages/atlas/src/components/DateTimeBlock/DateTimeBlock.tsx
@@ -5,16 +5,22 @@ import { useBlockTimeEstimation } from '@/hooks/useBlockTimeEstimation'
 import { formatNumber } from '@/utils/number'
 import { formatDateTime } from '@/utils/time'
 
-export type DateTimeBlockProps = { date: Date }
-export const DateTimeBlock: FC<DateTimeBlockProps> = ({ date }) => {
-  const { convertMsTimestampToBlock } = useBlockTimeEstimation()
+export type DateProps = { type: 'date'; date: Date }
+export type BlocksProps = { type: 'block'; block: number }
+
+export type DateTimeBlockProps = DateProps | BlocksProps
+
+export const DateTimeBlock: FC<DateTimeBlockProps> = (props) => {
+  const { convertMsTimestampToBlock, convertBlockToMsTimestamp } = useBlockTimeEstimation()
   return (
     <>
       <Text as="p" variant="t200-strong">
-        {formatDateTime(date)}
+        {props.type === 'date'
+          ? formatDateTime(props.date)
+          : formatDateTime(new Date(convertBlockToMsTimestamp(props.block) ?? 0))}
       </Text>
       <Text as="p" variant="t100" margin={{ top: 1 }} color="colorText">
-        {formatNumber(convertMsTimestampToBlock(date.getTime()) || 0)} block
+        {props.type === 'date' ? formatNumber(convertMsTimestampToBlock(props.date.getTime()) || 0) : props.block} block
       </Text>
     </>
   )

diff --git a/packages/atlas/src/components/_crt/RevenueShareHistoryTable/RevenueShareHistoryTable.tsx b/packages/atlas/src/components/_crt/RevenueShareHistoryTable/RevenueShareHistoryTable.tsx
@@ -5,7 +5,6 @@ import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.
 import { Table, TableProps } from '@/components/Table'
 import { DateBlockCell, TokenAmount } from '@/components/Table/Table.cells'
 import { Text } from '@/components/Text'
-import { useBlockTimeEstimation } from '@/hooks/useBlockTimeEstimation'
 import { useUser } from '@/providers/user/user.hooks'
 
 const COLUMNS: TableProps['columns'] = [
@@ -27,14 +26,13 @@ export type RevenueShareHistoryTableProps = {
 }
 
 export const RevenueShareHistoryTable = ({ data }: RevenueShareHistoryTableProps) => {
-  const { convertBlockToMsTimestamp } = useBlockTimeEstimation()
   const { memberId } = useUser()
 
   const mappedData = useMemo(() => {
     return data.map((row) => {
       const memberStake = +(row.stakers.find((staker) => staker.account.member.id === memberId)?.stakedAmount ?? 0)
       return {
-        endDate: <DateBlockCell date={new Date(convertBlockToMsTimestamp(row.endsAtBlock) ?? 0)} />,
+        endDate: <DateBlockCell type="block" block={row.endsAtBlock} />,
         participants: (
           <Text variant="t100" as="span">
             {row.stakers.length}/x
@@ -49,7 +47,7 @@ export const RevenueShareHistoryTable = ({ data }: RevenueShareHistoryTableProps
         unclaimed: 'N/A',
       }
     })
-  }, [convertBlockToMsTimestamp, data, memberId])
+  }, [data, memberId])
 
   return <StyledTable columns={COLUMNS} data={mappedData} />
 }

diff --git a/packages/atlas/src/components/_crt/RevenueShareStakersTable/RevenueShareStakersTable.tsx b/packages/atlas/src/components/_crt/RevenueShareStakersTable/RevenueShareStakersTable.tsx
@@ -4,7 +4,6 @@ import { useMemo } from 'react'
 import { NumberFormat } from '@/components/NumberFormat'
 import { Table, TableProps } from '@/components/Table'
 import { DateBlockCell, LoadingMemberRow, TokenAmount } from '@/components/Table/Table.cells'
-import { useBlockTimeEstimation } from '@/hooks/useBlockTimeEstimation'
 
 const COLUMNS: TableProps['columns'] = [
   { Header: 'Date', accessor: 'stakedAt' },
@@ -24,17 +23,16 @@ export type RevenueShareStakersTableProps = {
 }
 
 export const RevenueShareStakersTable = ({ data, tokenSymbol = 'N/A' }: RevenueShareStakersTableProps) => {
-  const { convertBlockToMsTimestamp } = useBlockTimeEstimation()
   const mappedData = useMemo(() => {
     return data.map((row) => {
       return {
-        stakedAt: <DateBlockCell date={new Date(convertBlockToMsTimestamp(row.stakedAtBlock) ?? 0)} />,
+        stakedAt: <DateBlockCell type="block" block={row.stakedAtBlock} />,
         member: <LoadingMemberRow memberId={row.memberId} />,
         staked: <NumberFormat value={row.staked} as="p" variant="t100" withToken customTicker={`$${tokenSymbol}`} />,
         earnings: <TokenAmount variant="t100-strong" tokenAmount={row.earnings} />,
       }
     })
-  }, [convertBlockToMsTimestamp, data, tokenSymbol])
+  }, [data, tokenSymbol])
 
   return <StyledTable columns={COLUMNS} data={mappedData} />
 }