feat: block txs

src/components/Organisms/AddressTransactions/AddressTransactions.stories.tsx

@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AddressTransactions as AddressTransactionsComponent } from "./AddressTransactions";
+
+type Story = StoryObj<typeof AddressTransactionsComponent>;
+
+const meta: Meta<typeof AddressTransactionsComponent> = {
+    title: "Organisms/Address Transactions",
+    component: AddressTransactionsComponent,
+};
+
+export default meta;
+
+export const AddressTransactions: Story = {
+    args: {
+        chain_name: "eth-mainnet",
+        address: "0x972B8FAD70de6e430D8b368198AbFF1E42eFf022",
+    },
+};

src/components/Organisms/AddressTransactions/AddressTransactions.tsx

@@ -0,0 +1,51 @@
+import { type Option, None, Some } from "@/utils/option";
+import { type Transaction } from "@covalenthq/client-sdk";
+import { useEffect, useState } from "react";
+import { type AddressTransactionsProps } from "@/utils/types/molecules.types";
+import { Transactions } from "@/components/Shared";
+import { useGoldRush } from "@/utils/store";
+
+export const AddressTransactions: React.FC<AddressTransactionsProps> = ({
+    chain_name,
+    address,
+    ...props
+}) => {
+    const { covalentClient } = useGoldRush();
+
+    const [maybeResult, setResult] = useState<Option<Transaction[]>>(None);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    useEffect(() => {
+        (async () => {
+            setResult(None);
+            setErrorMessage(null);
+            try {
+                const { data, ...error } =
+                    await covalentClient.TransactionService.getAllTransactionsForAddressByPage(
+                        chain_name,
+                        address.trim(),
+                        {
+                            noLogs: true,
+                            withSafe: false,
+                            quoteCurrency: "USD",
+                        }
+                    );
+                if (error.error) {
+                    setErrorMessage(error.error_message);
+                    throw error;
+                }
+                setResult(new Some(data.items));
+            } catch (exception) {
+                console.error(exception);
+            }
+        })();
+    }, [chain_name, address]);
+
+    return (
+        <Transactions
+            {...props}
+            errorMessage={errorMessage}
+            maybeResult={maybeResult}
+        />
+    );
+};

src/components/Organisms/BlockTransactions/BlockTransactions.stories.tsx

@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { BlockTransactions as BlockTransactionsComponent } from "./BlockTransactions";
+
+type Story = StoryObj<typeof BlockTransactionsComponent>;
+
+const meta: Meta<typeof BlockTransactionsComponent> = {
+    title: "Organisms/Block Transactions",
+    component: BlockTransactionsComponent,
+};
+
+export default meta;
+
+export const BlockTransactions: Story = {
+    args: {
+        chain_name: "eth-mainnet",
+        block_height: 19575410,
+    },
+};

src/components/Organisms/BlockTransactions/BlockTransactions.tsx

@@ -0,0 +1,51 @@
+import { type Option, None, Some } from "@/utils/option";
+import { type Transaction } from "@covalenthq/client-sdk";
+import { useEffect, useState } from "react";
+import { type BlockTransactionsProps } from "@/utils/types/molecules.types";
+import { Transactions } from "@/components/Shared";
+import { useGoldRush } from "@/utils/store";
+
+export const BlockTransactions: React.FC<BlockTransactionsProps> = ({
+    chain_name,
+    block_height,
+    ...props
+}) => {
+    const { covalentClient } = useGoldRush();
+
+    const [maybeResult, setResult] = useState<Option<Transaction[]>>(None);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    useEffect(() => {
+        (async () => {
+            setResult(None);
+            setErrorMessage(null);
+            try {
+                const { data, ...error } =
+                    await covalentClient.TransactionService.getTransactionsForBlock(
+                        chain_name,
+                        block_height,
+                        {
+                            noLogs: true,
+                            withSafe: false,
+                            quoteCurrency: "USD",
+                        }
+                    );
+                if (error.error) {
+                    setErrorMessage(error.error_message);
+                    throw error;
+                }
+                setResult(new Some(data.items));
+            } catch (exception) {
+                console.error(exception);
+            }
+        })();
+    }, [chain_name, block_height]);
+
+    return (
+        <Transactions
+            {...props}
+            errorMessage={errorMessage}
+            maybeResult={maybeResult}
+        />
+    );
+};

src/components/Organisms/index.ts

@@ -7,7 +7,12 @@ export { AddressActivityListView } from "./AddressActivityListView/AddressActivi
 export { TokenBalancesListView } from "./TokenBalancesListView/TokenBalancesListView";
 export { TokenTransfersListView } from "./TokenTransfersListView/TokenTransfersListView";
 export { TransactionReceiptView } from "./TransactionReceiptView/TransactionReceiptView";
-export { TransactionsList } from "./TransactionsList/TransactionsList";
+export { AddressTransactions } from "./AddressTransactions/AddressTransactions";
+export { BlockTransactions } from "./BlockTransactions/BlockTransactions";
+/**
+ * @deprecated This component is deprecated. Please use AddressTransactions instead.
+ */
+export { AddressTransactions as TransactionsList } from "./AddressTransactions/AddressTransactions";
 export { XYKOverviewTransactionsListView } from "./XYK/XYKOverviewTransactionsListView/XYKOverviewTransactionsListView";
 export { XYKPoolDetailView } from "./XYK/XYKPoolDetailView/XYKPoolDetailView";
 export { XYKPoolListView } from "./XYK/XYKPoolListView/XYKPoolListView";

src/components/Organisms/TransactionsList/TransactionsList.tsx → src/components/Shared/Transactions.tsx

@@ -23,9 +23,8 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { timestampParser } from "@/utils/functions";
 import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting";
-import { useGoldRush } from "@/utils/store";
 import { SkeletonTable } from "@/components/ui/skeletonTable";
-import { type TransactionListProps } from "@/utils/types/molecules.types";
+import { type TransactionsProps } from "@/utils/types/shared.types";
 import { Address } from "@/components/Atoms";
 import {
     DropdownMenu,
@@ -37,53 +36,23 @@ import {
 import { Button } from "@/components/ui/button";
 import IconWrapper from "@/components/Shared/IconWrapper";
 
-export const TransactionsList: React.FC<TransactionListProps> = ({
-    chain_name,
-    address,
-    on_native_explorer_click,
+const Transactions: React.FC<TransactionsProps> = ({
     on_goldrush_receipt_click,
+    on_native_explorer_click,
     on_transaction_click,
+    errorMessage,
+    maybeResult,
 }) => {
-    const { covalentClient } = useGoldRush();
-
     const [sorting, setSorting] = useState<SortingState>([
         {
             id: "block_signed_at",
             desc: true,
         },
     ]);
     const [rowSelection, setRowSelection] = useState({});
-    const [maybeResult, setResult] = useState<Option<Transaction[]>>(None);
-    const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const [filterResult, setFilterResult] =
         useState<Option<Transaction[]>>(None);
 
-    useEffect(() => {
-        (async () => {
-            setResult(None);
-            setErrorMessage(null);
-            try {
-                const { data, ...error } =
-                    await covalentClient.TransactionService.getAllTransactionsForAddressByPage(
-                        chain_name,
-                        address.trim(),
-                        {
-                            noLogs: true,
-                            withSafe: false,
-                            quoteCurrency: "USD",
-                        }
-                    );
-                if (error.error) {
-                    setErrorMessage(error.error_message);
-                    throw error;
-                }
-                setResult(new Some(data.items));
-            } catch (exception) {
-                console.error(exception);
-            }
-        })();
-    }, [chain_name, address]);
-
     useEffect(() => {
         maybeResult.match({
             None: () => [],
@@ -411,3 +380,5 @@ export const TransactionsList: React.FC<TransactionListProps> = ({
         </Table>
     );
 };
+
+export default Transactions;

src/components/Shared/index.tsx

@@ -1,3 +1,4 @@
 export { default as BalancePriceDelta } from "./BalancePriceDelta";
 export { default as CopyImage } from "./CopyImage";
 export { default as IconWrapper } from "./IconWrapper";
+export { default as Transactions } from "./Transactions";

src/index.ts

@@ -3,5 +3,7 @@ export * from "./components/Molecules";
 export * from "./components/Organisms";
 
 export { GoldRushProvider, useGoldRush } from "./utils/store";
-// * INFO: added for backwards compatibility
+/**
+ * @deprecated This hook is deprecated. Please use useGoldRush instead.
+ */
 export { useGoldRush as useCovalent } from "./utils/store";

src/utils/types/molecules.types.ts

@@ -56,14 +56,22 @@ export interface NFTSalesCountProps {
     token_id?: string;
 }
 
-export interface TransactionListProps {
+export interface AddressTransactionsProps {
     chain_name: Chain;
     address: string;
     on_native_explorer_click?: Function;
     on_goldrush_receipt_click?: Function;
     on_transaction_click?: Function;
 }
 
+export interface BlockTransactionsProps {
+    chain_name: Chain;
+    block_height: number;
+    on_native_explorer_click?: Function;
+    on_goldrush_receipt_click?: Function;
+    on_transaction_click?: Function;
+}
+
 export interface XYKPoolTimeSeriesProps {
     chain_name: Chain;
     dex_name: string;

src/utils/types/shared.types.ts

@@ -1,3 +1,6 @@
+import { type Transaction } from "@covalenthq/client-sdk";
+import { type Option } from "@/utils/option";
+
 export interface BalancePriceDeltaProps {
     numerator: number;
     denominator: number;
@@ -14,3 +17,11 @@ export interface IconWrapperProps {
     icon_size?: string;
     icon_type?: string;
 }
+
+export interface TransactionsProps {
+    on_native_explorer_click?: Function;
+    on_goldrush_receipt_click?: Function;
+    on_transaction_click?: Function;
+    maybeResult: Option<Transaction[]>;
+    errorMessage: string | null;
+}