wip: use insights to fetch wallet activity

Author: Vernon Johnson

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

@@ -0,0 +1,70 @@
+import { DASHBOARD_THIRDWEB_CLIENT_ID } from "@/constants/env";
+
+export interface Transaction {
+    chain_id: number;
+    hash: string;
+    nonce: number;
+    block_hash: string;
+    block_number: number;
+    block_timestamp: number;
+    transaction_index: number;
+    from_address: string;
+    to_address: string | null;
+    value: number;
+    gas: number;
+    gas_price: number | null;
+    data: string | null;
+    function_selector: string | null;
+    max_fee_per_gas: number | null;
+    max_priority_fee_per_gas: number | null;
+    transaction_type: number | null;
+    r: string | null;
+    s: string | null;
+    v: number | null;
+    access_list_json: string | null;
+    contract_address: string | null;
+    gas_used: number | null;
+    cumulative_gas_used: number | null;
+    effective_gas_price: number | null;
+    blob_gas_used: number | null;
+    blob_gas_price: number | null;
+    logs_bloom: string | null;
+    status: boolean | null; // true for success, false for failure
+}
+
+interface InsightsResponse {
+    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: {
+  chainId: number;
+  address: string;
+  page?: string;
+}): Promise<InsightsResponse> {
+  const { chainId, address, page } = args;
+
+  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,
+          },
+        },
+);
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch transaction history');
+  }
+
+  const data: InsightsResponse = await response.json();
+  return data;
+} 

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

@@ -13,7 +13,7 @@ import {} from "@radix-ui/react-tabs";
 import { useState } from "react";
 
 interface Transaction {
-  id: number;
+  id: string;
   type: string;
   amount: string;
   to?: string;
@@ -86,9 +86,9 @@ export function ActivityOverview({
                   <TableCell>{tx.type}</TableCell>
                   <TableCell>{tx.amount}</TableCell>
                   <TableCell>
-                    {tx.to && `To: ${tx.to}`}
-                    {tx.from && `From: ${tx.from}`}
-                    {tx.contract && `Contract: ${tx.contract}`}
+                    {tx.to && `To: ${tx.to} `}
+                    {tx.from && `From: ${tx.from} `}
+                    {tx.contract && `Contract: ${tx.contract} `}
                     {tx.method && ` Method: ${tx.method}`}
                   </TableCell>
                   <TableCell>{tx.date}</TableCell>

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

@@ -1,6 +1,7 @@
 "use client";
 import type { ChainMetadata } from "thirdweb/chains";
 import { useBalance } from "../hooks/getBalance";
+import { useGetActivity } from "../hooks/useGetActivity";
 import { useGetERC20Tokens } from "../hooks/useGetERC20Tokens";
 import { useGetNFTs } from "../hooks/useGetNFTs";
 import { mockWalletData } from "../utils/mockData";
@@ -23,19 +24,21 @@ export function WalletDashboard(props: {
   const {
     tokens,
     isLoading: isLoadingERC20,
-    error: errorERC20,
+    // error: errorERC20,
   } = useGetERC20Tokens(props.chain.chainId, props.address);
-  if (errorERC20) {
-    console.error("Error fetching ERC20 tokens:", errorERC20);
-  }
+  // if (errorERC20) {
+  //   console.error("Error fetching ERC20 tokens:", errorERC20);
+  // }
   const {
     nfts,
     isLoading: isLoadingNFTs,
-    error: errorNFTs,
+    // error: errorNFTs,
   } = useGetNFTs(props.chain.chainId, props.address);
-  if (errorNFTs) {
-    console.error("Error fetching NFTs:", errorNFTs);
-  }
+  // if (errorNFTs) {
+  //   console.error("Error fetching NFTs:", errorNFTs);
+  // }
+
+  const { activity, isLoading: isLoadingActivity } = useGetActivity(props.chain.chainId, props.address)
 
   return (
     <div className="grid gap-6">
@@ -45,7 +48,8 @@ export function WalletDashboard(props: {
         isLoading={isLoadingBalance}
       />
       <ActivityOverview
-        transactions={mockWalletData.transactions}
+        transactions={activity}
+        isLoading={isLoadingActivity}
         contracts={mockWalletData.contracts}
       />
       <TokenHoldings

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

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { fetchActivity } from "../actions/fetchActivity";
+
+interface ActivityItem {
+    id: string;
+    type: string;
+    amount: string;
+    to?: string;
+    from?: string;
+    contract?: string;
+    method?: string;
+    date: string;
+  }
+
+export function useGetActivity(chainId: number, address: string) {
+  const [activity, setActivity] = useState<ActivityItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      const response = await fetchActivity({ chainId, address, page: "0" });
+      const activity = response.data.map((tx): ActivityItem => {
+        let type = tx.to_address?.toLowerCase() === address.toLowerCase() ? "Receive" : "Send";
+        if (tx.contract_address) {
+            type = "Interact";
+        }
+        return {
+          id: tx.hash,
+          type,
+          amount: `${tx.value / Math.pow(10, 18)} ETH`,
+          to: tx.to_address || undefined,
+          from: tx.from_address,
+          contract: tx.contract_address || undefined,
+          date: new Date(tx.block_timestamp * 1000).toLocaleString(),
+        };
+      })
+      setActivity(activity);
+      setIsLoading(false);
+    })();
+  }, [address, chainId]);
+
+  return { activity, isLoading };
+}