covalenthq · jaypozo · May 29, 2024 · May 29, 2024
diff --git a/src/components/Atoms/Timestamp/Timestamp.stories.tsx b/src/components/Atoms/Timestamp/Timestamp.stories.tsx
@@ -13,6 +13,6 @@ type Story = StoryObj<typeof TimestampComponent>;
 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
@@ -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<TimestampProps> = ({
     timestamp,
     defaultType = "descriptive",
+    dynamic = true,
 }) => {
     const [relativeTime, setRelativeTime] = useState<boolean>(
         defaultType === "relative"
     );
+    const [parsedTime, setParsedTime] = useState<string>(
+        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 (
         <span className="inline-flex items-center gap-x-1">
-            {timestampParser(
-                timestamp,
-                relativeTime ? "relative" : "descriptive"
-            )}
+            {parsedTime}
             <button
                 onClick={() => setRelativeTime(!relativeTime)}
                 className="text-foreground-light opacity-75 dark:text-foreground-dark"

diff --git a/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx b/src/components/Molecules/Address/AddressDetails/AddressDetails.tsx
@@ -149,12 +149,11 @@ export const AddressDetails: React.FC<AddressDetailsProps> = ({
                                 {
                                     heading: `${native.contract_ticker_symbol} VALUE`,
                                     content: prettifyCurrency(
-                                        (Number(native.balance) /
-                                            Math.pow(
-                                                10,
-                                                native.contract_decimals
-                                            )) *
-                                            native.quote_rate
+                                        calculatePrettyBalance(
+                                            Number(native.balance) *
+                                                native.quote_rate,
+                                            native.contract_decimals
+                                        )
                                     ),
                                     subtext: `@${prettifyCurrency(
                                         native.quote_rate

diff --git a/src/components/Molecules/Block/BlocksList/BlocksList.tsx b/src/components/Molecules/Block/BlocksList/BlocksList.tsx
@@ -2,7 +2,7 @@ import { Address } from "@/components/Atoms";
 import { Timestamp } from "@/components/Atoms";
 import { TableHeaderSorting, TableList } from "@/components/Shared";
 import { defaultErrorMessage } from "@/utils/constants/shared.constants";
-import { timestampParser } from "@/utils/functions";
+import { actionableWrapper, timestampParser } from "@/utils/functions";
 import { None, Some, type Option } from "@/utils/option";
 import { useGoldRush } from "@/utils/store";
 import { type BlocksListProps } from "@/utils/types/molecules.types";
@@ -14,6 +14,7 @@ import { useCallback, useEffect, useState } from "react";
 export const BlocksList: React.FC<BlocksListProps> = ({
     chain_name,
     page_size = 10,
+    actionable_block = () => null,
 }) => {
     const { covalentClient } = useGoldRush();
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -70,7 +71,11 @@ export const BlocksList: React.FC<BlocksListProps> = ({
                     column={column}
                 />
             ),
-            cell: ({ row }) => row.original.height.toLocaleString(),
+            cell: ({ row }) =>
+                actionableWrapper(
+                    actionable_block(row.original.height),
+                    row.original.height.toLocaleString()
+                ),
         },
         {
             accessorKey: "signed_at",

diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.stories.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.stories.tsx
@@ -15,6 +15,6 @@ export default meta;
 export const LatestBlocks: Story = {
     args: {
         chain_name: "eth-mainnet",
-        actionable_block: (block: Block) => storyAction(block),
+        actionable_block: (block: number) => storyAction(block),
     },
 };
diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx
@@ -85,7 +85,7 @@ export const LatestBlocks: React.FC<LatestBlocksProps> = ({
                                         />
                                     }
                                     content={actionableWrapper(
-                                        actionable_block(block),
+                                        actionable_block(block.height),
                                         <p className="text-base">
                                             {block.height.toLocaleString()}
                                         </p>

diff --git a/src/components/Molecules/GasCard/GasCard.stories.tsx b/src/components/Molecules/GasCard/GasCard.stories.tsx
@@ -13,6 +13,5 @@ export default meta;
 export const GasCard: Story = {
     args: {
         chain_name: "eth-mainnet",
-        event_type: "erc20",
     },
 };
diff --git a/src/components/Molecules/GasCard/GasCard.tsx b/src/components/Molecules/GasCard/GasCard.tsx
@@ -10,10 +10,16 @@ import {
     defaultErrorMessage,
 } from "@/utils/constants/shared.constants";
 import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { Button } from "@/components/ui/button";
 
-export const GasCard: React.FC<GasCardProps> = ({ chain_name, event_type }) => {
-    const [maybeResult, setMaybeResult] =
-        useState<Option<GasPricesResponse | null>>(None);
+export const GasCard: React.FC<GasCardProps> = ({ chain_name }) => {
+    const [isErc20, setIsErc20] = useState<boolean>(false);
+    const [maybeResult, setMaybeResult] = useState<
+        Option<{
+            erc: GasPricesResponse;
+            native: GasPricesResponse;
+        } | null>
+    >(None);
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const { covalentClient } = useGoldRush();
 
@@ -22,22 +28,38 @@ export const GasCard: React.FC<GasCardProps> = ({ chain_name, event_type }) => {
             setMaybeResult(None);
             setErrorMessage(null);
             try {
-                const { data, ...error } =
+                const [
+                    { data: ercData, ...ercError },
+                    { data: nativeData, ...nativeError },
+                ] = await Promise.all([
+                    covalentClient.BaseService.getGasPrices(
+                        chain_name,
+                        "erc20"
+                    ),
                     await covalentClient.BaseService.getGasPrices(
                         chain_name,
-                        event_type
-                    );
-                if (error.error) {
-                    throw error;
+                        "nativetokens"
+                    ),
+                ]);
+                if (ercError.error) {
+                    throw ercError;
                 }
-                setMaybeResult(new Some(data));
+                if (nativeError.error) {
+                    throw nativeError;
+                }
+                setMaybeResult(
+                    new Some({
+                        erc: ercData,
+                        native: nativeData,
+                    })
+                );
             } catch (error: CovalentAPIError | any) {
                 setErrorMessage(error?.error_message ?? defaultErrorMessage);
                 setMaybeResult(new Some(null));
                 console.error(error);
             }
         })();
-    }, [chain_name, event_type]);
+    }, [chain_name]);
 
     const copy = useMemo<
         {
@@ -66,39 +88,64 @@ export const GasCard: React.FC<GasCardProps> = ({ chain_name, event_type }) => {
         <div className="flex w-full flex-col gap-4 rounded border border-secondary-light p-2 dark:border-secondary-dark">
             {maybeResult.match({
                 None: () => (
-                    <div className="mx-auto">
+                    <div className="flex items-center justify-between">
+                        <Skeleton size={GRK_SIZES.LARGE} />
                         <Skeleton size={GRK_SIZES.LARGE} />
                     </div>
                 ),
                 Some: (result) =>
                     result ? (
-                        <p className="text-center text-xl">
-                            ⛽ Base Fee:{" "}
-                            {Math.round(
-                                (Number(result.base_fee) ?? 0) / Math.pow(10, 9)
-                            )}{" "}
-                            Gwei
-                        </p>
+                        <div className="flex items-center justify-between">
+                            <p className="text-lg">
+                                Base Fee:{" "}
+                                {Math.round(
+                                    (Number(
+                                        result?.[isErc20 ? "erc" : "native"]
+                                            .base_fee
+                                    ) ?? 0) / Math.pow(10, 9)
+                                )}{" "}
+                                Gwei ⛽
+                            </p>
+
+                            <div className="flex gap-2">
+                                <Button
+                                    disabled={!maybeResult.isDefined}
+                                    variant={isErc20 ? "primary" : "outline"}
+                                    onClick={() => setIsErc20(true)}
+                                    size={"sm"}
+                                >
+                                    ERC20
+                                </Button>
+                                <Button
+                                    disabled={!maybeResult.isDefined}
+                                    variant={!isErc20 ? "primary" : "outline"}
+                                    onClick={() => setIsErc20(false)}
+                                    size={"sm"}
+                                >
+                                    Native Tokens
+                                </Button>
+                            </div>
+                        </div>
                     ) : (
                         <></>
                     ),
             })}
 
-            <div className="grid grid-cols-1 items-center gap-4 md:grid-cols-3">
+            <div className="mt-4 flex flex-col items-center justify-between gap-4 md:flex-row">
                 {maybeResult.match({
                     None: () =>
                         Array(3)
                             .fill(null)
                             .map(() => (
-                                <div key={Math.random()} className="mx-auto">
+                                <div key={Math.random()}>
                                     <Skeleton size={GRK_SIZES.LARGE} />
                                 </div>
                             )),
                     Some: (result) =>
                         errorMessage ? (
                             <p className="mt-4">{errorMessage}</p>
                         ) : 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
@@ -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<LatestTransactionsProps> = ({
@@ -156,13 +159,10 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
                                     </div>
 
                                     <CardDetail
-                                        content={`${
-                                            Number(value) /
-                                            Math.pow(
-                                                10,
-                                                gas_metadata.contract_decimals
-                                            )
-                                        } ${gas_metadata.contract_ticker_symbol}`}
+                                        content={`${calculatePrettyBalance(
+                                            Number(value),
+                                            gas_metadata.contract_decimals
+                                        )} ${gas_metadata.contract_ticker_symbol}`}
                                         heading={pretty_value_quote}
                                         wrapperClassName="flex flex-col-reverse"
                                     />

diff --git 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<TransactionDetailsProps> = ({
                                 },
                                 {
                                     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
@@ -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
@@ -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<TransactionsProps> {
     chain_name: Chain;
     address: string;
 }
 
-export interface BlockTransactionsProps extends TransactionsProps {
+export interface BlockTransactionsProps extends Partial<TransactionsProps> {
     chain_name: Chain;
     block_height: number;
 }