From 47dc05ce30a9525192912c000be5a3f4199fafbb Mon Sep 17 00:00:00 2001 From: Karan Pargal Date: Wed, 15 May 2024 02:58:53 +0530 Subject: [PATCH 1/5] feat: Add timestamp component --- .../Atoms/Timestamp/Timestamp.stories.tsx | 18 +++++++++++ src/components/Atoms/Timestamp/Timestamp.tsx | 25 +++++++++++++++ .../AddressActivityList.tsx | 10 ++++-- .../Address/AddressDetails/AddressDetails.tsx | 12 ++----- .../Block/BlockDetails/BlockDetails.tsx | 7 ++-- .../Block/LatestBlocks/LatestBlocks.tsx | 9 ++++-- .../TokenTransfersList/TokenTransfersList.tsx | 10 ++++-- .../TransactionDetails/TransactionDetails.tsx | 11 ++----- .../TransactionReceipt/TransactionReceipt.tsx | 32 ++++++++----------- .../XYKPoolTransactionsList.tsx | 10 ++++-- .../XYKTokenTransactionsList.tsx | 10 ++++-- .../XYKWalletTransactionsList.tsx | 7 ++-- .../XYKTransactionsList.tsx | 7 ++-- src/components/Shared/Transactions.tsx | 14 ++++---- src/utils/types/atoms.types.ts | 5 +++ src/utils/types/molecules.types.ts | 2 +- 16 files changed, 120 insertions(+), 69 deletions(-) create mode 100644 src/components/Atoms/Timestamp/Timestamp.stories.tsx create mode 100644 src/components/Atoms/Timestamp/Timestamp.tsx 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..92a13b50 --- /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/Molecules/Address/AddressActivityList/AddressActivityList.tsx b/src/components/Molecules/Address/AddressActivityList/AddressActivityList.tsx index 65598bc9..b8391fdc 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/Timestamp/Timestamp"; 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..56e7e8b0 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/Timestamp/Timestamp"; export const AddressDetails: React.FC = ({ address, @@ -244,10 +244,7 @@ export const AddressDetails: React.FC = ({ address={latest_transaction.tx_hash} /> ), - subtext: timestampParser( - latest_transaction.block_signed_at, - "relative" - ), + subtext: , }, { heading: "EARLIEST TRANSACTION", @@ -258,10 +255,7 @@ export const AddressDetails: React.FC = ({ } /> ), - subtext: timestampParser( - earliest_transaction.block_signed_at, - "relative" - ), + subtext: , }, { heading: "TOTAL COUNT", diff --git a/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx b/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx index 4efafff3..ec25dc0c 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/Timestamp/Timestamp"; 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,10 +73,7 @@ export const BlockDetails: React.FC = ({ }, { heading: "SIGNED AT", - content: timestampParser( - block.signed_at, - "descriptive" - ), + content: , }, { heading: "BLOCK HASH", diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx index fc51c5ed..50db9404 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/Timestamp/Timestamp"; 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..dbb78ec0 100644 --- a/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx +++ b/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx @@ -14,7 +14,6 @@ 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"; @@ -24,6 +23,7 @@ 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/Timestamp/Timestamp"; export const TokenTransfersList: React.FC = ({ chain_name, @@ -92,8 +92,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..4e0e242e 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/Timestamp/Timestamp"; 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,7 @@ export const TransactionDetails: React.FC = ({ }, { heading: "SIGNED AT", - content: timestampParser( - result.block_signed_at, - "descriptive" - ), - subtext: `(${timestampParser( - result.block_signed_at, - "relative" - )})`, + content: , }, { heading: "BLOCK HASH", diff --git a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx index 567bc436..8999823a 100644 --- a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx +++ b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx @@ -5,7 +5,6 @@ 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"; @@ -16,6 +15,7 @@ import { defaultErrorMessage, } from "@/utils/constants/shared.constants"; import { type CovalentAPIError } from "@/utils/types/shared.types"; +import { Timestamp } from "@/components/Atoms/Timestamp/Timestamp"; export const TransactionReceipt: React.FC = ({ chain_name, @@ -156,23 +156,12 @@ export const TransactionReceipt: React.FC = ({ Transaction Time:{" "} - - {timestampParser( - result.tx_metadata.block_signed_at.toString(), - relativeTime - ? "relative" - : "descriptive" - )} - - + @@ -442,6 +431,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..777df5eb 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/Timestamp/Timestamp"; 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..ebf7d2f2 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/Timestamp/Timestamp"; 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..7bfe07ab 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/Timestamp/Timestamp"; export const XYKWalletTransactionsList: React.FC< XYKWalletTransactionsListProps @@ -58,7 +58,10 @@ export const XYKWalletTransactionsList: React.FC< /> ), cell: ({ row }) => - timestampParser(row.getValue("block_signed_at"), "relative"), + , }, { id: "act", diff --git a/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx b/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx index d6d754a7..b7612b93 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/Timestamp/Timestamp"; export const XYKTransactionsList: React.FC = ({ chain_name, @@ -58,7 +58,10 @@ export const XYKTransactionsList: React.FC = ({ /> ), cell: ({ row }) => - timestampParser(row.getValue("block_signed_at"), "relative"), + , }, { accessorKey: "act", diff --git a/src/components/Shared/Transactions.tsx b/src/components/Shared/Transactions.tsx index 6ee8cdad..0bd20fbd 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 "../Atoms/Timestamp/Timestamp"; 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..2c55581d 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 = { From 1e4b39b13567e349532dc70b5048e4c9dda73ec2 Mon Sep 17 00:00:00 2001 From: Karan Pargal Date: Wed, 15 May 2024 03:02:12 +0530 Subject: [PATCH 2/5] fix: update imports --- src/components/Atoms/index.ts | 1 + .../Address/AddressActivityList/AddressActivityList.tsx | 2 +- .../Molecules/Address/AddressDetails/AddressDetails.tsx | 2 +- src/components/Molecules/Block/BlockDetails/BlockDetails.tsx | 2 +- src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx | 2 +- .../Molecules/Token/TokenTransfersList/TokenTransfersList.tsx | 2 +- .../Transaction/TransactionDetails/TransactionDetails.tsx | 2 +- .../Transaction/TransactionReceipt/TransactionReceipt.tsx | 3 +-- .../Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx | 2 +- .../XYKTokenTransactionsList/XYKTokenTransactionsList.tsx | 2 +- .../XYKWalletTransactionsList/XYKWalletTransactionsList.tsx | 2 +- .../Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) 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 b8391fdc..55dd9f1b 100644 --- a/src/components/Molecules/Address/AddressActivityList/AddressActivityList.tsx +++ b/src/components/Molecules/Address/AddressActivityList/AddressActivityList.tsx @@ -12,7 +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/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; export const AddressActivityList: React.FC = ({ address, diff --git a/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx b/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx index 56e7e8b0..09353f46 100644 --- a/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx +++ b/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx @@ -28,7 +28,7 @@ import { type CovalentAPIError, type CardDetailProps, } from "@/utils/types/shared.types"; -import { Timestamp } from "@/components/Atoms/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; export const AddressDetails: React.FC = ({ address, diff --git a/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx b/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx index ec25dc0c..9a8b43ac 100644 --- a/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx +++ b/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx @@ -1,5 +1,5 @@ import { Address } from "@/components/Atoms"; -import { Timestamp } from "@/components/Atoms/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; import { CardDetail } from "@/components/Shared"; import { Card } from "@/components/ui/card"; import { Skeleton } from "@/components/ui/skeleton"; diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx index 50db9404..904ef790 100644 --- a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx +++ b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx @@ -1,5 +1,5 @@ import { Address } from "@/components/Atoms"; -import { Timestamp } from "@/components/Atoms/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; import { CardDetail } from "@/components/Shared"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; diff --git a/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx b/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx index dbb78ec0..d1d1632c 100644 --- a/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx +++ b/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx @@ -23,7 +23,7 @@ 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/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; export const TokenTransfersList: React.FC = ({ chain_name, diff --git a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx index 4e0e242e..552b57ee 100644 --- a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx +++ b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx @@ -1,5 +1,5 @@ import { Address } from "@/components/Atoms"; -import { Timestamp } from "@/components/Atoms/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; import { CardDetail } from "@/components/Shared"; import { Card } from "@/components/ui/card"; import { Skeleton } from "@/components/ui/skeleton"; diff --git a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx index 8999823a..ad200cf1 100644 --- a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx +++ b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx @@ -8,14 +8,13 @@ import { type DecodedTransactionType } from "@/utils/types/molecules.types"; 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/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; export const TransactionReceipt: React.FC = ({ chain_name, diff --git a/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx b/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx index 777df5eb..5db1931c 100644 --- a/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx +++ b/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx @@ -13,7 +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/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; export const XYKPoolTransactionsList: React.FC< XYKPoolTransactionsListProps diff --git a/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.tsx b/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.tsx index ebf7d2f2..05fd28a8 100644 --- a/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.tsx +++ b/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.tsx @@ -14,7 +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/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; export const XYKTokenTransactionsList: React.FC< XYKTokenTransactionsListProps diff --git a/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx b/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx index 7bfe07ab..123cd3b2 100644 --- a/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx +++ b/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx @@ -13,7 +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/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; export const XYKWalletTransactionsList: React.FC< XYKWalletTransactionsListProps diff --git a/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx b/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx index b7612b93..60fdc943 100644 --- a/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx +++ b/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx @@ -13,7 +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/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; export const XYKTransactionsList: React.FC = ({ chain_name, From df1097dd4916f3d7558361f964a5170eb05ebd1b Mon Sep 17 00:00:00 2001 From: Karan Pargal Date: Wed, 15 May 2024 03:03:19 +0530 Subject: [PATCH 3/5] fix: lint --- .../Address/AddressDetails/AddressDetails.tsx | 16 ++++++++++++++-- .../Block/BlockDetails/BlockDetails.tsx | 6 +++++- .../TokenTransfersList/TokenTransfersList.tsx | 5 +---- .../TransactionDetails/TransactionDetails.tsx | 6 +++++- .../XYKWalletTransactionsList.tsx | 5 +++-- .../XYKTransactionsList/XYKTransactionsList.tsx | 5 +++-- src/components/Shared/Transactions.tsx | 2 +- src/utils/types/atoms.types.ts | 2 +- 8 files changed, 33 insertions(+), 14 deletions(-) diff --git a/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx b/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx index 09353f46..c979ce20 100644 --- a/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx +++ b/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx @@ -244,7 +244,13 @@ export const AddressDetails: React.FC = ({ address={latest_transaction.tx_hash} /> ), - subtext: , + subtext: ( + + ), }, { heading: "EARLIEST TRANSACTION", @@ -255,7 +261,13 @@ export const AddressDetails: React.FC = ({ } /> ), - subtext: , + subtext: ( + + ), }, { heading: "TOTAL COUNT", diff --git a/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx b/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx index 9a8b43ac..4cab0b0c 100644 --- a/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx +++ b/src/components/Molecules/Block/BlockDetails/BlockDetails.tsx @@ -73,7 +73,11 @@ export const BlockDetails: React.FC = ({ }, { heading: "SIGNED AT", - content: , + content: ( + + ), }, { heading: "BLOCK HASH", diff --git a/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx b/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx index d1d1632c..c5267318 100644 --- a/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx +++ b/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx @@ -13,10 +13,7 @@ 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 { - 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"; diff --git a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx index 552b57ee..4d9642cc 100644 --- a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx +++ b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx @@ -92,7 +92,11 @@ export const TransactionDetails: React.FC = ({ }, { heading: "SIGNED AT", - content: , + content: ( + + ), }, { heading: "BLOCK HASH", diff --git a/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx b/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx index 123cd3b2..f8278db9 100644 --- a/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx +++ b/src/components/Molecules/XYK/Wallet/XYKWalletTransactionsList/XYKWalletTransactionsList.tsx @@ -57,11 +57,12 @@ export const XYKWalletTransactionsList: React.FC< column={column} /> ), - cell: ({ row }) => + cell: ({ row }) => ( , + /> + ), }, { id: "act", diff --git a/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx b/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx index 60fdc943..f473f92d 100644 --- a/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx +++ b/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.tsx @@ -57,11 +57,12 @@ export const XYKTransactionsList: React.FC = ({ column={column} /> ), - cell: ({ row }) => + cell: ({ row }) => ( , + /> + ), }, { accessorKey: "act", diff --git a/src/components/Shared/Transactions.tsx b/src/components/Shared/Transactions.tsx index 0bd20fbd..d794e983 100644 --- a/src/components/Shared/Transactions.tsx +++ b/src/components/Shared/Transactions.tsx @@ -14,7 +14,7 @@ import { DropdownMenuItem, } from "@/components/ui/dropdown-menu"; import { Button } from "@/components/ui/button"; -import { Timestamp } from "../Atoms/Timestamp/Timestamp"; +import { Timestamp } from "@/components/Atoms"; export const Transactions: React.FC = ({ on_goldrush_receipt_click, diff --git a/src/utils/types/atoms.types.ts b/src/utils/types/atoms.types.ts index 2c55581d..d8e208c4 100644 --- a/src/utils/types/atoms.types.ts +++ b/src/utils/types/atoms.types.ts @@ -25,7 +25,7 @@ export interface NFTProps { } export interface TimestampProps { - timestamp: string | Date ; + timestamp: string | Date; defaultType?: "relative" | "descriptive"; } From 369463206881b1898344dd25fed8cadc212f45cc Mon Sep 17 00:00:00 2001 From: Karan Pargal Date: Wed, 15 May 2024 03:09:13 +0530 Subject: [PATCH 4/5] fix: UI color --- src/components/Atoms/Timestamp/Timestamp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Atoms/Timestamp/Timestamp.tsx b/src/components/Atoms/Timestamp/Timestamp.tsx index 92a13b50..c54ccee9 100644 --- a/src/components/Atoms/Timestamp/Timestamp.tsx +++ b/src/components/Atoms/Timestamp/Timestamp.tsx @@ -12,7 +12,7 @@ export const Timestamp: React.FC = ({ ); return ( - + {timestampParser( timestamp, relativeTime ? "relative" : "descriptive" From 6242dbcd261df6ec27ff52fd16b1936ece98cd5d Mon Sep 17 00:00:00 2001 From: Karan Pargal Date: Wed, 15 May 2024 03:09:29 +0530 Subject: [PATCH 5/5] nit --- src/components/Atoms/Timestamp/Timestamp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Atoms/Timestamp/Timestamp.tsx b/src/components/Atoms/Timestamp/Timestamp.tsx index c54ccee9..8822a706 100644 --- a/src/components/Atoms/Timestamp/Timestamp.tsx +++ b/src/components/Atoms/Timestamp/Timestamp.tsx @@ -12,7 +12,7 @@ export const Timestamp: React.FC = ({ ); return ( - + {timestampParser( timestamp, relativeTime ? "relative" : "descriptive"