feat: fetch outgoing transactions

Author: catalyst17

apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/actions/fetchActivity.ts renamed to apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/actions/fetchTxActivity.ts

@@ -33,33 +33,36 @@ export interface Transaction {
 }
 
 interface InsightsResponse {
-    meta: {
-        address: string;
-        signature: string;
-        page: number;
-        total_items: number;
-        total_pages: number;
-        limit_per_chain: number;
-        chain_ids: number[];
-    };
-    data: Transaction[];
+  meta: {
+    address: string;
+    signature: string;
+    page: number;
+    total_items: number;
+    total_pages: number;
+    limit_per_chain: number;
+    chain_ids: number[];
+  };
+  data: Transaction[];
 }
 
-export async function fetchActivity(args: {
+export async function fetchTxActivity(args: {
   chainId: number;
   address: string;
-  page?: string;
+  limit?: number,
+  page?: number;
 }): Promise<InsightsResponse> {
-  const { chainId, address, page } = args;
+  let { chainId, address, limit, page } = args;
+  if (!limit) limit = 100;
+  if (!page) page = 0;
 
   const response = await fetch(
-    `https://insight.thirdweb.com/v1/transactions?chain=${chainId}&filter_from_address=${address}&page=${page}&limit=10&sort_by=block_number&sort_order=desc`,
-      {
-          headers: {
-            "x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID,
-          },
-        },
-);
+    `https://insight.thirdweb-dev.com/v1/transactions?chain=${chainId}&filter_from_address=${address}&page=${page}&limit=${limit}&sort_by=block_number&sort_order=desc`,
+    {
+      headers: {
+        "x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID,
+      },
+    },
+  );
 
   if (!response.ok) {
     throw new Error('Failed to fetch transaction history');

apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/components/ActivityOverview.tsx

@@ -14,7 +14,7 @@ import { useState } from "react";
 
 interface Transaction {
   id: string;
-  type: string;
+  // type: string;
   amount: string;
   to?: string;
   from?: string;
@@ -74,7 +74,7 @@ export function ActivityOverview({
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Type</TableHead>
+                {/* <TableHead>Type</TableHead> */}
                 <TableHead>Amount</TableHead>
                 <TableHead>Details</TableHead>
                 <TableHead>Date</TableHead>
@@ -83,7 +83,7 @@ export function ActivityOverview({
             <TableBody>
               {transactions.map((tx) => (
                 <TableRow key={tx.id}>
-                  <TableCell>{tx.type}</TableCell>
+                  {/* <TableCell>{tx.type}</TableCell> */}
                   <TableCell>{tx.amount}</TableCell>
                   <TableCell>
                     {tx.to && `To: ${tx.to} `}

apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/components/WalletDashboard.tsx

@@ -1,7 +1,7 @@
 "use client";
 import type { ChainMetadata } from "thirdweb/chains";
 import { useBalance } from "../hooks/getBalance";
-import { useGetActivity } from "../hooks/useGetActivity";
+import { useGetTxActivity } from "../hooks/useGetTxActivity";
 import { useGetERC20Tokens } from "../hooks/useGetERC20Tokens";
 import { useGetNFTs } from "../hooks/useGetNFTs";
 import { mockWalletData } from "../utils/mockData";
@@ -38,7 +38,7 @@ export function WalletDashboard(props: {
   //   console.error("Error fetching NFTs:", errorNFTs);
   // }
 
-  const { activity, isLoading: isLoadingActivity } = useGetActivity(props.chain.chainId, props.address)
+  const { txActivity, isLoading: isLoadingActivity } = useGetTxActivity(props.chain.chainId, props.address)
 
   return (
     <div className="grid gap-6">
@@ -48,7 +48,7 @@ export function WalletDashboard(props: {
         isLoading={isLoadingBalance}
       />
       <ActivityOverview
-        transactions={activity}
+        transactions={txActivity}
         isLoading={isLoadingActivity}
         contracts={mockWalletData.contracts}
       />

apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/hooks/useGetActivity.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { fetchTxActivity } from "../actions/fetchTxActivity";
+
+interface TxActivityItem {
+    id: string;
+    // all txs we retrieve for now are outgoing
+    // TODO: add incoming
+    // type: string;
+    amount: string;
+    to?: string;
+    from?: string;
+    method?: string;
+    date: string;
+  }
+
+export function useGetTxActivity(chainId: number, address: string) {
+  const [txActivity, setTxActivity] = useState<TxActivityItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      const response = await fetchTxActivity({ chainId, address });
+      const activity = response.data.map((tx): TxActivityItem => {
+        // let type = tx.to_address?.toLowerCase() === address.toLowerCase() ? "Receive" : "Send";
+        return {
+          id: tx.hash,
+          // type,
+          amount: `${tx.value / Math.pow(10, 18)} ETH`,
+          to: tx.to_address || undefined,
+          from: tx.from_address,
+          method: tx.function_selector || undefined,
+          date: new Date(tx.block_timestamp * 1000).toLocaleString(),
+        };
+      })
+      setTxActivity(activity);
+      setIsLoading(false);
+    })();
+  }, [address, chainId]);
+
+  return { txActivity, isLoading };
+}