Replace time with age in all tables

l2beat · Jul 27, 2023 · de06d82 · de06d82
1 parent c74112b
commit de06d82
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 36 deletions.
diff --git a/packages/frontend/src/view/components/TimeAgeCell.tsx b/packages/frontend/src/view/components/TimeAgeCell.tsx
@@ -0,0 +1,43 @@
+import { Timestamp } from '@explorer/types'
+import React from 'react'
+
+interface TimeCellProps {
+  timestamp: Timestamp
+}
+
+export function TimeAgeCell({ timestamp }: TimeCellProps) {
+  const age = getAge(timestamp)
+
+  return <div className="text-xs sm:text-sm">{age}</div>
+}
+
+function getAge(timestamp: Timestamp) {
+  const now = BigInt(new Date().getTime())
+  const age = now - timestamp.valueOf()
+  const seconds = age / 1000n
+  const minutes = seconds / 60n
+  const hours = minutes / 60n
+  const days = hours / 24n
+
+  if (seconds < 10n) {
+    return 'Just now'
+  }
+
+  if (seconds < 60n && minutes === 0n && hours === 0n && days === 0n) {
+    return `${seconds} ${addPlural('sec', seconds)} ago`
+  }
+
+  if (minutes < 60 && hours === 0n && days === 0n) {
+    return `${minutes} ${addPlural('min', minutes)} ago`
+  }
+
+  if (hours < 24 && days === 0n) {
+    return `${hours} ${addPlural('hour', hours)} ago`
+  }
+
+  return `${days} ${addPlural('day', days)} ago`
+}
+
+function addPlural(val: string, n: bigint): string {
+  return n === 1n ? val : `${val}s`
+}
diff --git a/packages/frontend/src/view/components/TimeCell.tsx b/packages/frontend/src/view/components/TimeCell.tsx
diff --git a/packages/frontend/src/view/components/tables/OffersTable.tsx b/packages/frontend/src/view/components/tables/OffersTable.tsx
@@ -14,7 +14,7 @@ import { Link } from '../Link'
 import { StatusBadge, StatusType } from '../StatusBadge'
 import { Table } from '../table/Table'
 import { Column } from '../table/types'
-import { TimeCell } from '../TimeCell'
+import { TimeAgeCell } from '../TimeAgeCell'
 
 interface OffersTableProps {
   context: PageContext<'perpetual'>
@@ -45,7 +45,7 @@ export interface OfferEntry {
 
 export function OffersTable(props: OffersTableProps) {
   const columns: Column[] = [
-    { header: 'Time (UTC)' },
+    { header: 'Age' },
     { header: 'Id' },
     { header: 'Trade', align: 'center' },
     ...(props.showStatus ? [{ header: 'Status' }] : []),
@@ -58,7 +58,7 @@ export function OffersTable(props: OffersTableProps) {
       columns={columns}
       rows={props.offers.map((offer) => {
         const cells: ReactNode[] = [
-          <TimeCell timestamp={offer.timestamp} />,
+          <TimeAgeCell timestamp={offer.timestamp} />,
           <Link>#{offer.id}</Link>,
           <TradeColumn
             offer={offer}

diff --git a/packages/frontend/src/view/components/tables/TransactionsTable.tsx b/packages/frontend/src/view/components/tables/TransactionsTable.tsx
@@ -9,7 +9,7 @@ import { Link } from '../Link'
 import { StatusBadge, StatusType } from '../StatusBadge'
 import { Table } from '../table/Table'
 import { Column } from '../table/types'
-import { TimeCell } from '../TimeCell'
+import { TimeAgeCell } from '../TimeAgeCell'
 
 interface TransactionsTableProps {
   transactions: TransactionEntry[]
@@ -33,7 +33,7 @@ export interface TransactionEntry {
 export function TransactionsTable(props: TransactionsTableProps) {
   const columns: Column[] = []
   if (!props.hideTime) {
-    columns.push({ header: 'Time (UTC)' })
+    columns.push({ header: 'Age' })
   }
   columns.push(
     { header: 'Tx Hash' },
@@ -51,7 +51,7 @@ export function TransactionsTable(props: TransactionsTableProps) {
 
         const cells: ReactNode[] = []
         if (!props.hideTime) {
-          cells.push(<TimeCell timestamp={transaction.timestamp} />)
+          cells.push(<TimeAgeCell timestamp={transaction.timestamp} />)
         }
         cells.push(
           <Link>

diff --git a/packages/frontend/src/view/pages/home/components/HomeStateUpdatesTable.tsx b/packages/frontend/src/view/pages/home/components/HomeStateUpdatesTable.tsx
@@ -5,7 +5,7 @@ import { formatInt } from '../../../../utils/formatting/formatAmount'
 import { InlineEllipsis } from '../../../components/InlineEllipsis'
 import { Link } from '../../../components/Link'
 import { Table } from '../../../components/table/Table'
-import { TimeCell } from '../../../components/TimeCell'
+import { TimeAgeCell } from '../../../components/TimeAgeCell'
 
 export interface HomeStateUpdateEntry {
   timestamp: Timestamp
@@ -23,7 +23,7 @@ export function HomeStateUpdatesTable(props: HomeStateUpdatesTableProps) {
   return (
     <Table
       columns={[
-        { header: 'Time (UTC)' },
+        { header: 'Age' },
         { header: 'Id' },
         { header: 'Tx Hash' },
         { header: 'Updates', numeric: true },
@@ -41,7 +41,7 @@ export function HomeStateUpdatesTable(props: HomeStateUpdatesTableProps) {
         return {
           link: `/state-updates/${stateUpdate.id}`,
           cells: [
-            <TimeCell timestamp={stateUpdate.timestamp} />,
+            <TimeAgeCell timestamp={stateUpdate.timestamp} />,
             <Link>#{stateUpdate.id}</Link>,
             <InlineEllipsis className="max-w-[80px] sm:max-w-[160px]">
               {stateUpdate.hash.toString()}

diff --git a/packages/frontend/src/view/pages/transaction/components/HistoryTable.tsx b/packages/frontend/src/view/pages/transaction/components/HistoryTable.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { SectionHeading } from '../../../components/SectionHeading'
 import { StatusBadge, StatusType } from '../../../components/StatusBadge'
 import { Table } from '../../../components/table/Table'
-import { TimeCell } from '../../../components/TimeCell'
+import { TimeAgeCell } from '../../../components/TimeAgeCell'
 
 interface TransactionHistoryTableProps {
   entries: TransactionHistoryEntry[]
@@ -23,15 +23,15 @@ export function TransactionHistoryTable(props: TransactionHistoryTableProps) {
       <SectionHeading title="History" />
       <Table
         columns={[
-          { header: 'Time (UTC)' },
+          { header: 'Age' },
           { header: 'Status' },
           { header: 'Description' },
         ]}
         rows={props.entries.map((entry) => {
           return {
             cells: [
               entry.timestamp ? (
-                <TimeCell timestamp={entry.timestamp} />
+                <TimeAgeCell timestamp={entry.timestamp} />
               ) : (
                 // This may be unknown if i.e. forced trade offer was not initiated using our explorer.
                 // We know that the offer was created, but we don't know when.

diff --git a/packages/frontend/src/view/pages/user/components/UserBalanceChangesTable.tsx b/packages/frontend/src/view/pages/user/components/UserBalanceChangesTable.tsx
@@ -8,7 +8,7 @@ import { AssetWithLogo } from '../../../components/AssetWithLogo'
 import { ChangeText } from '../../../components/ChangeText'
 import { Link } from '../../../components/Link'
 import { Table } from '../../../components/table/Table'
-import { TimeCell } from '../../../components/TimeCell'
+import { TimeAgeCell } from '../../../components/TimeAgeCell'
 
 interface UserBalanceChangesTableProps {
   balanceChanges: UserBalanceChangeEntry[]
@@ -28,7 +28,7 @@ export function UserBalanceChangesTable(props: UserBalanceChangesTableProps) {
   return (
     <Table
       columns={[
-        { header: 'Time (UTC)' },
+        { header: 'Age' },
         { header: 'Update' },
         { header: 'Asset' },
         { header: 'Change', numeric: true },
@@ -39,7 +39,7 @@ export function UserBalanceChangesTable(props: UserBalanceChangesTableProps) {
         return {
           link: `/state-updates/${entry.stateUpdateId}`,
           cells: [
-            <TimeCell timestamp={entry.timestamp} />,
+            <TimeAgeCell timestamp={entry.timestamp} />,
             <Link>#{entry.stateUpdateId}</Link>,
             <AssetWithLogo type="small" assetInfo={assetToInfo(entry.asset)} />,
             <ChangeText className="text-sm font-medium">