diff --git a/src/components/Atoms/Timestamp/Timestamp.stories.tsx b/src/components/Atoms/Timestamp/Timestamp.stories.tsx index 302ce1f6..7570d675 100644 --- a/src/components/Atoms/Timestamp/Timestamp.stories.tsx +++ b/src/components/Atoms/Timestamp/Timestamp.stories.tsx @@ -13,6 +13,6 @@ type Story = StoryObj; export const Timestamp: Story = { args: { timestamp: new Date(), - defaultType: "descriptive", + defaultType: "relative", }, }; diff --git a/src/components/Atoms/Timestamp/Timestamp.tsx b/src/components/Atoms/Timestamp/Timestamp.tsx index d47afaec..3eb3142b 100644 --- a/src/components/Atoms/Timestamp/Timestamp.tsx +++ b/src/components/Atoms/Timestamp/Timestamp.tsx @@ -1,22 +1,44 @@ import { timestampParser } from "@/utils/functions"; import { type TimestampProps } from "@/utils/types/atoms.types"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { ClockIcon } from "@radix-ui/react-icons"; export const Timestamp: React.FC = ({ timestamp, defaultType = "descriptive", + dynamic = true, }) => { const [relativeTime, setRelativeTime] = useState( defaultType === "relative" ); + const [parsedTime, setParsedTime] = useState( + timestampParser(timestamp, relativeTime ? "relative" : "descriptive") + ); + + useEffect(() => { + let interval: NodeJS.Timeout | null = null; + + if (dynamic) { + interval = setInterval(() => { + setParsedTime( + timestampParser( + timestamp, + relativeTime ? "relative" : "descriptive" + ) + ); + }, 1000); + } + + return () => { + if (interval) { + clearInterval(interval); + } + }; + }, [timestamp, relativeTime, dynamic]); return ( - {timestampParser( - timestamp, - relativeTime ? "relative" : "descriptive" - )} + {parsedTime} + + + ) : ( <> ), })} -
+
{maybeResult.match({ None: () => Array(3) .fill(null) .map(() => ( -
+
)), @@ -98,7 +145,7 @@ export const GasCard: React.FC = ({ chain_name, event_type }) => { errorMessage ? (

{errorMessage}

) : result ? ( - result.items + result[isErc20 ? "erc" : "native"].items .sort( (a, b) => parseInt(a.gas_price) - diff --git a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx index 4ff517ad..e3aad606 100644 --- a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx +++ b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx @@ -11,7 +11,10 @@ import { None, Some, type Option } from "@/utils/option"; import { useGoldRush } from "@/utils/store"; import { type LatestTransactionsProps } from "@/utils/types/molecules.types"; import { type CovalentAPIError } from "@/utils/types/shared.types"; -import { type Transaction } from "@covalenthq/client-sdk"; +import { + calculatePrettyBalance, + type Transaction, +} from "@covalenthq/client-sdk"; import { useEffect, useState } from "react"; export const LatestTransactions: React.FC = ({ @@ -156,13 +159,10 @@ export const LatestTransactions: React.FC = ({
diff --git a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx index 71eeaf1f..3b0b6334 100644 --- a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx +++ b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx @@ -138,14 +138,10 @@ export const TransactionDetails: React.FC = ({ }, { heading: "VALUE", - content: `${ - Number(result.value) / - Math.pow( - 10, - result.gas_metadata - .contract_decimals - ) - } ${result.gas_metadata.contract_ticker_symbol}`, + content: `${calculatePrettyBalance( + Number(result.value), + result.gas_metadata.contract_decimals + )} ${result.gas_metadata.contract_ticker_symbol}`, subtext: result.pretty_value_quote, }, { diff --git a/src/utils/types/atoms.types.ts b/src/utils/types/atoms.types.ts index 849b7659..38be64a7 100644 --- a/src/utils/types/atoms.types.ts +++ b/src/utils/types/atoms.types.ts @@ -33,6 +33,7 @@ export interface NFTProps { export interface TimestampProps { timestamp: string | Date; defaultType?: "relative" | "descriptive"; + dynamic?: boolean; } export interface AddressAvatarProps { diff --git a/src/utils/types/molecules.types.ts b/src/utils/types/molecules.types.ts index 1637a65f..36e7f194 100644 --- a/src/utils/types/molecules.types.ts +++ b/src/utils/types/molecules.types.ts @@ -1,6 +1,5 @@ import { type Option } from "@/utils/option"; import type { - Block, NftApprovalsItem, TokensApprovalItem, } from "@covalenthq/client-sdk"; @@ -59,18 +58,19 @@ export interface BlockDetailsProps { export interface BlocksListProps { chain_name: Chain; page_size?: number; + actionable_block?: (block: number) => ActionableType; } export interface LatestBlocksProps { chain_name: Chain; page_size?: number; - actionable_block?: (block: Block) => ActionableType; + actionable_block?: (block: number) => ActionableType; } export interface TransactionsListProps { chain_name: Chain; actionable_block?: (block: number) => ActionableType; - actionable_transaction?: (address: string) => ActionableType; + actionable_transaction?: (tx: string) => ActionableType; actionable_from?: (address: string) => ActionableType; actionable_to?: (address: string) => ActionableType; } @@ -88,7 +88,6 @@ export interface LatestPriceProps { export interface GasCardProps { chain_name: Chain; - event_type: "erc20" | "nativetokens"; } export interface AddressDetailsProps { @@ -145,12 +144,12 @@ export interface NFTWalletCollectionListProps { actionable_contract?: (address: string) => ActionableType; } -export interface AddressTransactionsProps extends TransactionsProps { +export interface AddressTransactionsProps extends Partial { chain_name: Chain; address: string; } -export interface BlockTransactionsProps extends TransactionsProps { +export interface BlockTransactionsProps extends Partial { chain_name: Chain; block_height: number; }