feat: Add Timestamp Component (#171)

covalenthq · May 14, 2024 · df6746e · df6746e
1 parent 16d29d2
commit df6746e
Show file tree

Hide file tree

Showing 17 changed files with 142 additions and 72 deletions.
diff --git a/src/components/Atoms/Timestamp/Timestamp.stories.tsx b/src/components/Atoms/Timestamp/Timestamp.stories.tsx
@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Timestamp as TimestampComponent } from "./Timestamp";
+
+const meta: Meta<typeof TimestampComponent> = {
+    title: "Atoms/Timestamp",
+    component: TimestampComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimestampComponent>;
+
+export const Timestamp: Story = {
+    args: {
+        timestamp: "November 15 2023 15:31:59",
+        defaultType: "descriptive",
+    },
+};
diff --git a/src/components/Atoms/Timestamp/Timestamp.tsx b/src/components/Atoms/Timestamp/Timestamp.tsx
@@ -0,0 +1,25 @@
+import { timestampParser } from "@/utils/functions";
+import { type TimestampProps } from "@/utils/types/atoms.types";
+import { useState } from "react";
+import { ClockIcon } from "@radix-ui/react-icons";
+
+export const Timestamp: React.FC<TimestampProps> = ({
+    timestamp,
+    defaultType = "descriptive",
+}) => {
+    const [relativeTime, setRelativeTime] = useState<boolean>(
+        defaultType === "relative"
+    );
+
+    return (
+        <span className="inline-flex items-center gap-x-1 text-foreground-light dark:text-foreground-dark">
+            {timestampParser(
+                timestamp,
+                relativeTime ? "relative" : "descriptive"
+            )}
+            <button onClick={() => setRelativeTime(!relativeTime)}>
+                <ClockIcon />
+            </button>
+        </span>
+    );
+};
diff --git a/src/components/Atoms/index.ts b/src/components/Atoms/index.ts
@@ -3,3 +3,4 @@ export { AddressAvatar } from "./AddressAvatar/AddressAvatar";
 export { AddressCard } from "./AddressCard/AddressCard";
 export { NFT } from "./NFT/NFT";
 export { TokenAvatar } from "./TokenAvatar/TokenAvatar";
+export { Timestamp } from "./Timestamp/Timestamp";
diff --git a/src/components/Molecules/Address/AddressActivityList/AddressActivityList.tsx b/src/components/Molecules/Address/AddressActivityList/AddressActivityList.tsx
@@ -2,7 +2,6 @@ import { type Option, None, Some } from "@/utils/option";
 import { type ChainActivityEvent } from "@covalenthq/client-sdk";
 import { type ColumnDef } from "@tanstack/react-table";
 import { useEffect, useState } from "react";
-import { timestampParser } from "@/utils/functions";
 import { TokenAvatar } from "@/components/Atoms";
 import { TableHeaderSorting, TableList } from "@/components/Shared";
 import { IconWrapper } from "@/components/Shared";
@@ -13,6 +12,7 @@ import {
 import { useGoldRush } from "@/utils/store";
 import { type AddressActivityListProps } from "@/utils/types/molecules.types";
 import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { Timestamp } from "@/components/Atoms";
 
 export const AddressActivityList: React.FC<AddressActivityListProps> = ({
     address,
@@ -98,8 +98,12 @@ export const AddressActivityList: React.FC<AddressActivityListProps> = ({
                     column={column}
                 />
             ),
-            cell: ({ row }) =>
-                timestampParser(row.getValue("last_seen_at"), "relative"),
+            cell: ({ row }) => (
+                <Timestamp
+                    timestamp={row.getValue("last_seen_at")}
+                    defaultType="relative"
+                />
+            ),
         },
         {
             accessorKey: "is_testnet",

diff --git a/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx b/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx
@@ -5,7 +5,6 @@ import {
     GRK_SIZES,
     defaultErrorMessage,
 } from "@/utils/constants/shared.constants";
-import { timestampParser } from "@/utils/functions";
 import { None, Some, type Option } from "@/utils/option";
 import { useGoldRush } from "@/utils/store";
 import { type AddressDetailsProps } from "@/utils/types/molecules.types";
@@ -29,6 +28,7 @@ import {
     type CovalentAPIError,
     type CardDetailProps,
 } from "@/utils/types/shared.types";
+import { Timestamp } from "@/components/Atoms";
 
 export const AddressDetails: React.FC<AddressDetailsProps> = ({
     address,
@@ -244,9 +244,12 @@ export const AddressDetails: React.FC<AddressDetailsProps> = ({
                                             address={latest_transaction.tx_hash}
                                         />
                                     ),
-                                    subtext: timestampParser(
-                                        latest_transaction.block_signed_at,
-                                        "relative"
+                                    subtext: (
+                                        <Timestamp
+                                            timestamp={
+                                                latest_transaction.block_signed_at
+                                            }
+                                        />
                                     ),
                                 },
                                 {
@@ -258,9 +261,12 @@ export const AddressDetails: React.FC<AddressDetailsProps> = ({
                                             }
                                         />
                                     ),
-                                    subtext: timestampParser(
-                                        earliest_transaction.block_signed_at,
-                                        "relative"
+                                    subtext: (
+                                        <Timestamp
+                                            timestamp={
+                                                earliest_transaction.block_signed_at
+                                            }
+                                        />
                                     ),
                                 },
                                 {

diff --git a/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx b/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx
@@ -1,12 +1,12 @@
 import { Address } from "@/components/Atoms";
+import { Timestamp } from "@/components/Atoms";
 import { CardDetail } from "@/components/Shared";
 import { Card } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
     GRK_SIZES,
     defaultErrorMessage,
 } from "@/utils/constants/shared.constants";
-import { timestampParser } from "@/utils/functions";
 import { None, Some, type Option } from "@/utils/option";
 import { useGoldRush } from "@/utils/store";
 import { type BlockDetailsProps } from "@/utils/types/molecules.types";
@@ -73,9 +73,10 @@ export const BlockDetails: React.FC<BlockDetailsProps> = ({
                                 },
                                 {
                                     heading: "SIGNED AT",
-                                    content: timestampParser(
-                                        block.signed_at,
-                                        "descriptive"
+                                    content: (
+                                        <Timestamp
+                                            timestamp={block.signed_at}
+                                        />
                                     ),
                                 },
                                 {

diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx
@@ -1,4 +1,5 @@
 import { Address } from "@/components/Atoms";
+import { Timestamp } from "@/components/Atoms";
 import { CardDetail } from "@/components/Shared";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -80,9 +81,11 @@ export const LatestBlocks: React.FC<LatestBlocksProps> = ({
                                 },
                                 {
                                     heading: "SIGNED AT",
-                                    content: timestampParser(
-                                        block.signed_at,
-                                        "relative"
+                                    content: (
+                                        <Timestamp
+                                            timestamp={block.signed_at}
+                                            defaultType="relative"
+                                        />
                                     ),
                                 },
                                 {

diff --git a/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx b/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx
@@ -13,17 +13,14 @@ import { Fragment, useCallback, useEffect, useState } from "react";
 import { type ColumnDef } from "@tanstack/react-table";
 import { TableCell, TableRow } from "@/components/ui/table";
 import { Address, AddressAvatar } from "@/components/Atoms";
-import {
-    timestampParser,
-    truncate,
-    calculateTimeSeriesGroup,
-} from "@/utils/functions";
+import { truncate, calculateTimeSeriesGroup } from "@/utils/functions";
 import { Badge } from "@/components/ui/badge";
 import { TableHeaderSorting, TableList } from "@/components/Shared";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 import { type TokenTransfersListProps } from "@/utils/types/molecules.types";
 import { useGoldRush } from "@/utils/store";
 import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { Timestamp } from "@/components/Atoms";
 
 export const TokenTransfersList: React.FC<TokenTransfersListProps> = ({
     chain_name,
@@ -92,8 +89,12 @@ export const TokenTransfersList: React.FC<TokenTransfersListProps> = ({
                     column={column}
                 />
             ),
-            cell: ({ row }) =>
-                timestampParser(row.getValue("block_signed_at"), "relative"),
+            cell: ({ row }) => (
+                <Timestamp
+                    timestamp={row.getValue("block_signed_at")}
+                    defaultType="relative"
+                />
+            ),
         },
         {
             accessorKey: "from_address",

diff --git a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx
@@ -1,12 +1,12 @@
 import { Address } from "@/components/Atoms";
+import { Timestamp } from "@/components/Atoms";
 import { CardDetail } from "@/components/Shared";
 import { Card } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
     GRK_SIZES,
     defaultErrorMessage,
 } from "@/utils/constants/shared.constants";
-import { timestampParser } from "@/utils/functions";
 import { None, Some, type Option } from "@/utils/option";
 import { useGoldRush } from "@/utils/store";
 import { type TransactionDetailsProps } from "@/utils/types/molecules.types";
@@ -92,14 +92,11 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                                 },
                                 {
                                     heading: "SIGNED AT",
-                                    content: timestampParser(
-                                        result.block_signed_at,
-                                        "descriptive"
+                                    content: (
+                                        <Timestamp
+                                            timestamp={result.block_signed_at}
+                                        />
                                     ),
-                                    subtext: `(${timestampParser(
-                                        result.block_signed_at,
-                                        "relative"
-                                    )})`,
                                 },
                                 {
                                     heading: "BLOCK HASH",

diff --git a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx
@@ -5,17 +5,16 @@ import { AddressCard } from "@/components/Atoms";
 import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { type Option, None, Some } from "@/utils/option";
 import { type DecodedTransactionType } from "@/utils/types/molecules.types";
-import { timestampParser } from "@/utils/functions";
 import { Card, CardContent, CardDescription } from "@/components/ui/card";
 import { calculatePrettyBalance, type ChainItem } from "@covalenthq/client-sdk";
 import { useGoldRush } from "@/utils/store";
-import { ClockIcon } from "@radix-ui/react-icons";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
     GRK_SIZES,
     defaultErrorMessage,
 } from "@/utils/constants/shared.constants";
 import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { Timestamp } from "@/components/Atoms";
 
 export const TransactionReceipt: React.FC<TransactionReceiptProps> = ({
     chain_name,
@@ -156,23 +155,12 @@ export const TransactionReceipt: React.FC<TransactionReceiptProps> = ({
 
                                     <CardDescription>
                                         Transaction Time:{" "}
-                                        <span className="inline-flex items-center gap-x-1 text-black dark:text-slate-50">
-                                            {timestampParser(
-                                                result.tx_metadata.block_signed_at.toString(),
-                                                relativeTime
-                                                    ? "relative"
-                                                    : "descriptive"
-                                            )}
-                                            <button
-                                                onClick={() =>
-                                                    setRelativeTime(
-                                                        !relativeTime
-                                                    )
-                                                }
-                                            >
-                                                <ClockIcon />
-                                            </button>
-                                        </span>
+                                        <Timestamp
+                                            timestamp={
+                                                result.tx_metadata
+                                                    .block_signed_at
+                                            }
+                                        />
                                     </CardDescription>
                                 </div>
 
@@ -442,6 +430,13 @@ export const TransactionReceipt: React.FC<TransactionReceiptProps> = ({
                                                                                     value
                                                                                 }
                                                                             />
+                                                                        ) : type ===
+                                                                          "timestamp" ? (
+                                                                            <Timestamp
+                                                                                timestamp={
+                                                                                    value
+                                                                                }
+                                                                            />
                                                                         ) : (
                                                                             value
                                                                         )}

diff --git a/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx b/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx
@@ -6,14 +6,14 @@ import {
 } from "@/utils/constants/shared.constants";
 import { useEffect, useState } from "react";
 import { type ColumnDef } from "@tanstack/react-table";
-import { timestampParser } from "@/utils/functions";
 import { Badge } from "@/components/ui/badge";
 import { type XYKPoolTransactionsListProps } from "@/utils/types/molecules.types";
 import { useGoldRush } from "@/utils/store";
 import { handleTokenTransactions } from "@/utils/functions/pretty-exchange-amount";
 import { handleExchangeType } from "@/utils/functions/exchange-type";
 import { TableHeaderSorting, TableList } from "@/components/Shared";
 import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { Timestamp } from "@/components/Atoms";
 
 export const XYKPoolTransactionsList: React.FC<
     XYKPoolTransactionsListProps
@@ -57,8 +57,12 @@ export const XYKPoolTransactionsList: React.FC<
                     column={column}
                 />
             ),
-            cell: ({ row }) =>
-                timestampParser(row.getValue("block_signed_at"), "relative"),
+            cell: ({ row }) => (
+                <Timestamp
+                    timestamp={row.getValue("block_signed_at")}
+                    defaultType="relative"
+                />
+            ),
         },
         {
             accessorKey: "act",

diff --git a/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.tsx b/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.tsx
@@ -6,7 +6,6 @@ import {
 } from "@/utils/constants/shared.constants";
 import { useEffect, useState } from "react";
 import { type ColumnDef } from "@tanstack/react-table";
-import { timestampParser } from "@/utils/functions";
 import { Badge } from "@/components/ui/badge";
 import { type XYKTokenTransactionsListProps } from "@/utils/types/molecules.types";
 import { useGoldRush } from "@/utils/store";
@@ -15,6 +14,7 @@ import { handleExchangeType } from "@/utils/functions/exchange-type";
 import { TableHeaderSorting, TableList } from "@/components/Shared";
 
 import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { Timestamp } from "@/components/Atoms";
 
 export const XYKTokenTransactionsList: React.FC<
     XYKTokenTransactionsListProps
@@ -58,8 +58,12 @@ export const XYKTokenTransactionsList: React.FC<
                     column={column}
                 />
             ),
-            cell: ({ row }) =>
-                timestampParser(row.getValue("block_signed_at"), "relative"),
+            cell: ({ row }) => (
+                <Timestamp
+                    timestamp={row.getValue("block_signed_at")}
+                    defaultType="relative"
+                />
+            ),
         },
         {
             accessorKey: "act",