fix(CapacitiesTable): fix duration in tooltip (#88)

* fix(CapacitiesTable): fix duration in tooltip * fix(duration): fix duration * feat(formatDuration): add formatDuration * feat(formatDuration): refactor
fluencelabs · Sep 16, 2024 · f317b47 · f317b47
1 parent a51dee8
commit f317b47
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/src/pages/capacities/CapacitiesTable.tsx b/src/pages/capacities/CapacitiesTable.tsx
@@ -7,7 +7,6 @@ import {
   OrderType,
 } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/filters'
 import { CapacityCommitmentShort } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes'
-import { formatDistanceToNowStrict } from 'date-fns'
 import { useLocation } from 'wouter'
 
 import { InfoOutlineIcon } from '../../assets/icons'
@@ -34,6 +33,7 @@ import {
 import { Text } from '../../components/Text'
 import { Tooltip } from '../../components/Tooltip'
 import { useApiQuery, usePagination } from '../../hooks'
+import { formatDuration } from '../../utils/formatDuration'
 import { formatUnixTimestamp } from '../../utils/formatUnixTimestamp'
 import { formatHexData } from '../../utils/helpers'
 
@@ -61,6 +61,7 @@ interface CapacitiesTableProps {
 export const CapacitiesTable: React.FC<CapacitiesTableProps> = ({
   filters,
 }) => {
+  const client = useContext(ClientContext)
   const [order, setOrder] = useState<CapacitySort>('createdAt:desc')
   const [orderBy, orderType] = order.split(':') as [
     CapacityCommitmentsOrderBy,
@@ -104,6 +105,8 @@ export const CapacitiesTable: React.FC<CapacitiesTableProps> = ({
     setOrder(`${key}:${order}`)
   }
 
+  const epochDuration = (client?.getEpochDuration() || 0) * 1000
+
   return (
     <>
       <ScrollableTable>
@@ -129,7 +132,7 @@ export const CapacitiesTable: React.FC<CapacitiesTableProps> = ({
             <Tooltip trigger={<InfoOutlineIcon />}>
               <Text color="grey600" weight={600} size={12}>
                 Duration capacity commitment in epochs. Currently, one epoch is
-                set as 24 hours.
+                set as {formatDuration(epochDuration)}
               </Text>
             </Tooltip>
           </HeaderCellWithTooltip>
@@ -226,12 +229,7 @@ const CapacityRow: React.FC<CapacityRowProps> = ({ capacity }) => {
             </Cell>
             {/* Duration */}
             <Cell>
-              <Text size={12}>
-                {formatDistanceToNowStrict(
-                  capacity.createdAt * 1000 + capacityDuration,
-                  { unit: 'day' },
-                )}
-              </Text>
+              <Text size={12}>{formatDuration(capacityDuration)}</Text>
             </Cell>
             {/* Expiration */}
             <Cell>

diff --git a/src/pages/provider/ProviderCapacityTable.tsx b/src/pages/provider/ProviderCapacityTable.tsx
@@ -7,7 +7,6 @@ import {
   OrderType,
 } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/filters'
 import { CapacityCommitmentShort } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes'
-import { formatDistanceToNowStrict } from 'date-fns'
 import { useLocation } from 'wouter'
 
 import { InfoOutlineIcon } from '../../assets/icons'
@@ -35,6 +34,7 @@ import { ShrinkText, Text } from '../../components/Text'
 import { Tooltip } from '../../components/Tooltip'
 import { useApiQuery, usePagination } from '../../hooks'
 import { useFilters } from '../../hooks/useFilters'
+import { formatDuration } from '../../utils/formatDuration'
 import { formatUnixTimestamp } from '../../utils/formatUnixTimestamp'
 import { formatHexData } from '../../utils/helpers'
 
@@ -222,12 +222,7 @@ const CapacityRow: React.FC<CapacityRowProps> = ({ capacity }) => {
             {/* Duration */}
             <Cell>
               <Column>
-                <Text size={12}>
-                  {formatDistanceToNowStrict(
-                    capacity.createdAt * 1000 + capacityDuration,
-                    { unit: 'day' },
-                  )}
-                </Text>
+                <Text size={12}>{formatDuration(capacityDuration)}</Text>
               </Column>
             </Cell>
             {/* Expiration */}

diff --git a/src/utils/formatDuration.ts b/src/utils/formatDuration.ts
@@ -0,0 +1,7 @@
+import { formatDistanceStrict } from 'date-fns'
+
+export function formatDuration(duration: number) {
+  return formatDistanceStrict(duration, 0, {
+    unit: duration > 60 * 60 * 24 * 1000 ? 'day' : undefined,
+  })
+}