diff --git a/src/components/Atoms/Timestamp/Timestamp.stories.tsx b/src/components/Atoms/Timestamp/Timestamp.stories.tsx new file mode 100644 index 00000000..259d9370 --- /dev/null +++ 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 = { + title: "Atoms/Timestamp", + component: TimestampComponent, +}; + +export default meta; + +type Story = StoryObj; + +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 new file mode 100644 index 00000000..8822a706 --- /dev/null +++ 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 = ({ + timestamp, + defaultType = "descriptive", +}) => { + const [relativeTime, setRelativeTime] = useState( + defaultType === "relative" + ); + + return ( + + {timestampParser( + timestamp, + relativeTime ? "relative" : "descriptive" + )} + + + ); +}; diff --git a/src/components/Atoms/index.ts b/src/components/Atoms/index.ts index 538bf5d0..ab819be0 100644 --- 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 index 65598bc9..55dd9f1b 100644 --- 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 = ({ address, @@ -98,8 +98,12 @@ export const AddressActivityList: React.FC = ({ column={column} /> ), - cell: ({ row }) => - timestampParser(row.getValue("last_seen_at"), "relative"), + cell: ({ row }) => ( + + ), }, { accessorKey: "is_testnet", diff --git a/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx b/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx index e02fe346..c979ce20 100644 --- 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 = ({ address, @@ -244,9 +244,12 @@ export const AddressDetails: React.FC = ({ address={latest_transaction.tx_hash} /> ), - subtext: timestampParser( - latest_transaction.block_signed_at, - "relative" + subtext: ( + ), }, { @@ -258,9 +261,12 @@ export const AddressDetails: React.FC = ({ } /> ), - subtext: timestampParser( - earliest_transaction.block_signed_at, - "relative" + subtext: ( + ), }, { diff --git a/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx b/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx index 4efafff3..4cab0b0c 100644 --- a/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx +++ b/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx @@ -1,4 +1,5 @@ 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"; @@ -6,7 +7,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 BlockDetailsProps } from "@/utils/types/molecules.types"; @@ -73,9 +73,10 @@ export const BlockDetails: React.FC = ({ }, { heading: "SIGNED AT", - content: timestampParser( - block.signed_at, - "descriptive" + content: ( + ), }, { diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx index fc51c5ed..904ef790 100644 --- 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 = ({ }, { heading: "SIGNED AT", - content: timestampParser( - block.signed_at, - "relative" + content: ( + ), }, { diff --git a/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx b/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx index 494a4e8c..c5267318 100644 --- 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 = ({ chain_name, @@ -92,8 +89,12 @@ export const TokenTransfersList: React.FC = ({ column={column} /> ), - cell: ({ row }) => - timestampParser(row.getValue("block_signed_at"), "relative"), + cell: ({ row }) => ( + + ), }, { accessorKey: "from_address", diff --git a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx index fd3d1176..4d9642cc 100644 --- a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx +++ b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx @@ -1,4 +1,5 @@ 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"; @@ -6,7 +7,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 TransactionDetailsProps } from "@/utils/types/molecules.types"; @@ -92,14 +92,11 @@ export const TransactionDetails: React.FC = ({ }, { heading: "SIGNED AT", - content: timestampParser( - result.block_signed_at, - "descriptive" + content: ( + ), - 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 index 567bc436..ad200cf1 100644 --- 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 = ({ chain_name, @@ -156,23 +155,12 @@ export const TransactionReceipt: React.FC = ({ Transaction Time:{" "} - - {timestampParser( - result.tx_metadata.block_signed_at.toString(), - relativeTime - ? "relative" - : "descriptive" - )} - - + @@ -442,6 +430,13 @@ export const TransactionReceipt: React.FC = ({ value } /> + ) : type === + "timestamp" ? ( + ) : ( value )} diff --git a/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx b/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx index 328e0e14..5db1931c 100644 --- a/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx +++ b/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.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 XYKPoolTransactionsListProps } from "@/utils/types/molecules.types"; import { useGoldRush } from "@/utils/store"; @@ -14,6 +13,7 @@ import { handleTokenTransactions } from "@/utils/functions/pretty-exchange-amoun 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 }) => ( + + ), }, { accessorKey: "act", diff --git a/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.tsx b/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.tsx index be207ba8..05fd28a8 100644 --- 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 }) => ( + + ), }, { accessorKey: "act", diff --git a/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx b/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx index 0b7895eb..f8278db9 100644 --- a/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx +++ b/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.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 XYKWalletTransactionsListProps } from "@/utils/types/molecules.types"; import { useGoldRush } from "@/utils/store"; @@ -14,6 +13,7 @@ import { handleTokenTransactions } from "@/utils/functions/pretty-exchange-amoun 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 XYKWalletTransactionsList: React.FC< XYKWalletTransactionsListProps @@ -57,8 +57,12 @@ export const XYKWalletTransactionsList: React.FC< column={column} /> ), - cell: ({ row }) => - timestampParser(row.getValue("block_signed_at"), "relative"), + cell: ({ row }) => ( + + ), }, { id: "act", diff --git a/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx b/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx index d6d754a7..f473f92d 100644 --- a/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx +++ b/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.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 XYKTransactionsListProps } from "@/utils/types/molecules.types"; import { useGoldRush } from "@/utils/store"; @@ -14,6 +13,7 @@ import { handleTokenTransactions } from "@/utils/functions/pretty-exchange-amoun 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 XYKTransactionsList: React.FC = ({ chain_name, @@ -57,8 +57,12 @@ export const XYKTransactionsList: React.FC = ({ column={column} /> ), - cell: ({ row }) => - timestampParser(row.getValue("block_signed_at"), "relative"), + cell: ({ row }) => ( + + ), }, { accessorKey: "act", diff --git a/src/components/Shared/Transactions.tsx b/src/components/Shared/Transactions.tsx index 6ee8cdad..d794e983 100644 --- a/src/components/Shared/Transactions.tsx +++ b/src/components/Shared/Transactions.tsx @@ -3,7 +3,6 @@ import { type Transaction, } from "@covalenthq/client-sdk"; import { type ColumnDef } from "@tanstack/react-table"; -import { timestampParser } from "@/utils/functions"; import { IconWrapper, TableHeaderSorting, TableList } from "."; import { type TransactionsProps } from "@/utils/types/shared.types"; import { Address } from "@/components/Atoms"; @@ -15,6 +14,7 @@ import { DropdownMenuItem, } from "@/components/ui/dropdown-menu"; import { Button } from "@/components/ui/button"; +import { Timestamp } from "@/components/Atoms"; export const Transactions: React.FC = ({ on_goldrush_receipt_click, @@ -81,18 +81,16 @@ export const Transactions: React.FC = ({ header: ({ column }) => ( align="left" - header={"Age"} + header={"Signed At"} column={column} /> ), cell: ({ row }) => { return ( -

- {timestampParser( - row.original.block_signed_at.toString(), - "relative" - )} -

+ ); }, }, diff --git a/src/utils/types/atoms.types.ts b/src/utils/types/atoms.types.ts index bf057dd7..d8e208c4 100644 --- a/src/utils/types/atoms.types.ts +++ b/src/utils/types/atoms.types.ts @@ -24,6 +24,11 @@ export interface NFTProps { chain_name?: Chain; } +export interface TimestampProps { + timestamp: string | Date; + defaultType?: "relative" | "descriptive"; +} + export interface AddressAvatarProps { address: string; type: "fingerprint" | "effigy" | "wallet" | "nft"; diff --git a/src/utils/types/molecules.types.ts b/src/utils/types/molecules.types.ts index c13446a0..7e2c8730 100644 --- a/src/utils/types/molecules.types.ts +++ b/src/utils/types/molecules.types.ts @@ -249,7 +249,7 @@ export interface TransactionDetailsProps { export type EventDetails = { heading: string; value: string; - type: "address" | "text"; + type: "address" | "text" | "timestamp"; }[]; export type EventNFTs = {