feat(chain selector): accept chain ids (#174)

.storybook/main.ts

@@ -14,7 +14,6 @@ const config: StorybookConfig = {
     typescript: {
         reactDocgen: "react-docgen-typescript",
     },
-    docs: {},
     staticDirs: ["../src/static"],
 };
 export default config;

src/components/Atoms/Timestamp/Timestamp.stories.tsx

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof TimestampComponent>;
 
 export const Timestamp: Story = {
     args: {
-        timestamp: "November 15 2023 15:31:59",
+        timestamp: new Date(),
         defaultType: "descriptive",
     },
 };

src/components/Atoms/Timestamp/Timestamp.tsx

@@ -12,12 +12,15 @@ export const Timestamp: React.FC<TimestampProps> = ({
     );
 
     return (
-        <span className="inline-flex items-center gap-x-1 text-foreground-light dark:text-foreground-dark">
+        <span className="inline-flex items-center gap-x-1">
             {timestampParser(
                 timestamp,
                 relativeTime ? "relative" : "descriptive"
             )}
-            <button onClick={() => setRelativeTime(!relativeTime)}>
+            <button
+                onClick={() => setRelativeTime(!relativeTime)}
+                className="text-foreground-light opacity-75 dark:text-foreground-dark"
+            >
                 <ClockIcon />
             </button>
         </span>

src/components/Molecules/Address/AddressTransactions/AddressTransactions.tsx

@@ -10,7 +10,6 @@ import { defaultErrorMessage } from "@/utils/constants/shared.constants";
 export const AddressTransactions: React.FC<AddressTransactionsProps> = ({
     chain_name,
     address,
-    ...props
 }) => {
     const { covalentClient } = useGoldRush();
 
@@ -46,10 +45,6 @@ export const AddressTransactions: React.FC<AddressTransactionsProps> = ({
     }, [chain_name, address]);
 
     return (
-        <Transactions
-            {...props}
-            errorMessage={errorMessage}
-            maybeResult={maybeResult}
-        />
+        <Transactions errorMessage={errorMessage} maybeResult={maybeResult} />
     );
 };

src/components/Molecules/Block/BlockTransactions/BlockTransactions.tsx

@@ -10,7 +10,6 @@ import { type CovalentAPIError } from "@/utils/types/shared.types";
 export const BlockTransactions: React.FC<BlockTransactionsProps> = ({
     chain_name,
     block_height,
-    ...props
 }) => {
     const { covalentClient } = useGoldRush();
 
@@ -46,10 +45,6 @@ export const BlockTransactions: React.FC<BlockTransactionsProps> = ({
     }, [chain_name, block_height]);
 
     return (
-        <Transactions
-            {...props}
-            errorMessage={errorMessage}
-            maybeResult={maybeResult}
-        />
+        <Transactions errorMessage={errorMessage} maybeResult={maybeResult} />
     );
 };

src/components/Molecules/Block/BlocksList/BlocksList.stories.tsx

@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { BlocksList as BlocksListComponent } from "./BlocksList";
+
+type Story = StoryObj<typeof BlocksListComponent>;
+
+const meta: Meta<typeof BlocksListComponent> = {
+    title: "Molecules/Block/Blocks List",
+    component: BlocksListComponent,
+};
+
+export default meta;
+
+export const BlocksList: Story = {
+    args: {
+        chain_name: "eth-mainnet",
+    },
+};

src/components/Molecules/Block/BlocksList/BlocksList.tsx

@@ -0,0 +1,140 @@
+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 { None, Some, type Option } from "@/utils/option";
+import { useGoldRush } from "@/utils/store";
+import { type BlocksListProps } from "@/utils/types/molecules.types";
+import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { type Pagination, type Block } from "@covalenthq/client-sdk";
+import { type ColumnDef } from "@tanstack/react-table";
+import { useCallback, useEffect, useState } from "react";
+
+export const BlocksList: React.FC<BlocksListProps> = ({
+    chain_name,
+    page_size = 10,
+}) => {
+    const { covalentClient } = useGoldRush();
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [maybeResult, setMaybeResult] =
+        useState<Option<Block[] | null>>(None);
+    const [pagination, setPagination] = useState<Pagination | null>(null);
+
+    useEffect(() => {
+        updateResult(null);
+    }, [chain_name, page_size]);
+
+    const updateResult = useCallback(
+        async (_pagination: Pagination | null) => {
+            try {
+                setMaybeResult(None);
+                setErrorMessage(null);
+                const { data, ...error } =
+                    await covalentClient.BaseService.getBlockHeightsByPage(
+                        chain_name,
+                        timestampParser(new Date(), "YYYY MM DD"),
+                        "2100-01-01",
+                        {
+                            pageNumber: _pagination?.page_number ?? 0,
+                            pageSize: _pagination?.page_size ?? page_size,
+                        }
+                    );
+                if (error.error) {
+                    throw error;
+                }
+                setPagination(data.pagination);
+                setMaybeResult(new Some(data.items));
+            } catch (error: CovalentAPIError | any) {
+                setErrorMessage(error?.error_message ?? defaultErrorMessage);
+                setMaybeResult(new Some(null));
+                console.error(error);
+            }
+        },
+        [chain_name]
+    );
+
+    const handleOnChangePagination = (updatedPagination: Pagination) => {
+        setPagination(updatedPagination);
+        updateResult(updatedPagination);
+    };
+
+    const columns: ColumnDef<Block>[] = [
+        {
+            accessorKey: "height",
+            id: "height",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Height"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => row.original.height.toLocaleString(),
+        },
+        {
+            accessorKey: "signed_at",
+            id: "signed_at",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Signed At"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => (
+                <Timestamp
+                    timestamp={row.original.signed_at}
+                    defaultType="relative"
+                />
+            ),
+        },
+        {
+            accessorKey: "block_hash",
+            id: "block_hash",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Block Hash"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => <Address address={row.original.block_hash} />,
+        },
+        {
+            accessorKey: "gas_used",
+            id: "gas_used",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Gas Used"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) =>
+                `${((row.original.gas_used / row.original.gas_limit) * 100).toFixed(2)}%`,
+        },
+        {
+            accessorKey: "gas_limit",
+            id: "gas_limit",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Gas Limit"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => row.original.gas_limit.toLocaleString(),
+        },
+    ];
+
+    return (
+        <TableList<Block>
+            columns={columns}
+            errorMessage={errorMessage}
+            maybeData={maybeResult}
+            pagination={pagination}
+            onChangePaginationHandler={handleOnChangePagination}
+        />
+    );
+};