Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add Timestamp Component #171

Merged
merged 5 commits into from
May 14, 2024
Merged

feat: Add Timestamp Component #171

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
47dc05c
feat: Add timestamp component
karanpargal May 14, 2024
1e4b39b
fix: update imports
karanpargal May 14, 2024
df1097d
fix: lint
karanpargal May 14, 2024
3694632
fix: UI color
karanpargal May 14, 2024
6242dbc
nit
karanpargal May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/components/Atoms/Timestamp/Timestamp.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
},
};
25 changes: 25 additions & 0 deletions src/components/Atoms/Timestamp/Timestamp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-light">
{timestampParser(
timestamp,
relativeTime ? "relative" : "descriptive"
)}
<button onClick={() => setRelativeTime(!relativeTime)}>
<ClockIcon />
</button>
</span>
);
};
1 change: 1 addition & 0 deletions src/components/Atoms/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
10 changes: 7 additions & 3 deletions src/components/Molecules/Address/AddressActivityList/AddressActivityList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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,
Expand Down Expand Up @@ -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",
Expand Down
20 changes: 13 additions & 7 deletions src/components/Molecules/Address/AddressDetails/AddressDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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,
Expand Down Expand Up @@ -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
}
/>
),
},
{
Expand All @@ -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
}
/>
),
},
{
Expand Down
9 changes: 5 additions & 4 deletions src/components/Molecules/Block/BlockDetails/BlockDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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}
/>
),
},
{
Expand Down
9 changes: 6 additions & 3 deletions src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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"
/>
),
},
{
Expand Down
15 changes: 8 additions & 7 deletions src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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",
Expand Down
13 changes: 5 additions & 8 deletions src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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",
Expand Down
33 changes: 14 additions & 19 deletions src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -442,6 +430,13 @@ export const TransactionReceipt: React.FC<TransactionReceiptProps> = ({
value
}
/>
) : type ===
"timestamp" ? (
<Timestamp
timestamp={
value
}
/>
) : (
value
)}
Expand Down
10 changes: 7 additions & 3 deletions src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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",
Expand Down
10 changes: 7 additions & 3 deletions src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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
Expand Down Expand Up @@ -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",
Expand Down
Loading
Loading