feat: add latest redirect actionables (#210)

covalenthq · Oct 16, 2024 · 831c839 · 831c839
1 parent 58a6b99
commit 831c839
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 3 deletions.
diff --git a/src/components/Atoms/Timestamp/Timestamp.tsx b/src/components/Atoms/Timestamp/Timestamp.tsx
@@ -57,7 +57,7 @@ export const Timestamp: React.FC<TimestampProps> = ({
         >
             {parsedTime}
 
-            <span className="text-foreground-light opacity-75 dark:text-foreground-dark">
+            <span className="text-foreground-light opacity-75 dark:text-foreground-dark mt-0.5">
                 <ClockIcon />
             </span>
         </button>

diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.stories.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.stories.tsx
@@ -1,6 +1,5 @@
 import { LatestBlocks as LatestBlocksComponent } from "./LatestBlocks";
 import { storyAction } from "@/utils/functions";
-import { type Block } from "@covalenthq/client-sdk";
 import { type Meta, type StoryObj } from "@storybook/react";
 
 type Story = StoryObj<typeof LatestBlocksComponent>;
@@ -16,5 +15,12 @@ export const LatestBlocks: Story = {
     args: {
         chain_name: "eth-mainnet",
         actionable_block: (block_height) => storyAction(block_height),
+        actionable_redirect: () => ({
+            parent: "a",
+            parentProps: {
+                href: "/?path=/story/molecules-block-blocks-list--blocks-list",
+                className: "hover:underline w-fit mx-auto",
+            },
+        }),
     },
 };
diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx
@@ -17,6 +17,7 @@ import { useEffect, useState } from "react";
 export const LatestBlocks: React.FC<LatestBlocksProps> = ({
     chain_name,
     actionable_block = () => null,
+    actionable_redirect,
 }) => {
     const { goldrushClient } = useGoldRush();
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -111,6 +112,14 @@ export const LatestBlocks: React.FC<LatestBlocksProps> = ({
                         <></>
                     ),
             })}
+
+            {actionable_redirect &&
+                actionableWrapper(
+                    actionable_redirect(),
+                    <span className="text-center py-4 flex">
+                        View all blocks
+                    </span>,
+                )}
         </Card>
     );
 };
diff --git a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.stories.tsx b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.stories.tsx
@@ -16,5 +16,12 @@ export const LatestTransactions: Story = {
         chain_name: "eth-mainnet",
         actionable_transaction: (address) => storyAction(address),
         actionable_address: (address) => storyAction(address),
+        actionable_redirect: () => ({
+            parent: "a",
+            parentProps: {
+                href: "/?path=/story/molecules-transaction-transactions-list--transactions-list",
+                className: "hover:underline w-fit mx-auto",
+            },
+        }),
     },
 };
diff --git a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx
@@ -7,7 +7,7 @@ import {
     DEFAULT_ERROR_MESSAGE,
     FALLBACK_ERROR,
 } 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 LatestTransactionsProps } from "@/utils/types/molecules.types";
@@ -22,6 +22,7 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
     chain_name,
     actionable_address,
     actionable_transaction,
+    actionable_redirect,
 }) => {
     const { goldrushClient } = useGoldRush();
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -179,6 +180,14 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
                         <></>
                     ),
             })}
+
+            {actionable_redirect &&
+                actionableWrapper(
+                    actionable_redirect(),
+                    <span className="text-center py-4 flex">
+                        View all blocks
+                    </span>,
+                )}
         </Card>
     );
 };
diff --git a/src/utils/types/molecules.types.ts b/src/utils/types/molecules.types.ts
@@ -69,6 +69,7 @@ export interface LatestBlocksProps {
     chain_name: Chain;
     page_size?: number;
     actionable_block?: (block_height: number | null) => ActionableType;
+    actionable_redirect?: () => ActionableType;
 }
 
 export interface TransactionsListProps {
@@ -82,6 +83,7 @@ export interface LatestTransactionsProps {
     chain_name: Chain;
     actionable_transaction?: (address: string | null) => ActionableType;
     actionable_address?: (address: string | null) => ActionableType;
+    actionable_redirect?: () => ActionableType;
 }
 
 export interface LatestPriceProps {