Merge remote-tracking branch 'origin/hackweek-wallet-explainer' into hackweek-wallet-explainer

Author: arcoraven

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

@@ -75,7 +75,7 @@ export async function fetchERC20Tokens(args: {
       lastTransferredDate:
         token.queried_wallet_balances[0]?.last_transferred_date,
     }));
-    const fungibleTokens = data.fungibles.map((token) => ({
+    let fungibleTokens = data.fungibles.map((token) => ({
       name: token.name,
       symbol: token.symbol,
       contractAddress: token.fungible_id.split(".")[1] ?? "--",
@@ -90,6 +90,7 @@ export async function fetchERC20Tokens(args: {
       lastTransferredDate:
         token.queried_wallet_balances[0]?.last_transferred_date,
     }));
+    fungibleTokens = fungibleTokens.filter(d => d.name != null || d.symbol != null);
     return [...nativeTokens, ...fungibleTokens];
   } catch (error) {
     console.error("Error fetching tokens:", error);

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

@@ -86,4 +86,8 @@ export async function fetchRecentTransactions(args: {
   return [...outgoingTxsData.data, ...incomingTxsData.data].sort(
     (a, b) => b.block_number - a.block_number,
   );
+} catch (err) {
+    console.log("Failed to fetch tx activity", err);
+    return [];
+  }
 }

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

@@ -11,7 +11,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { TabButtons } from "@/components/ui/tabs";
-import { formatDistanceToNow } from "date-fns";
 import { ArrowLeft, ArrowRight, WalletIcon } from "lucide-react";
 import { useState } from "react";
 import type { ChainMetadata } from "thirdweb/chains";
@@ -68,12 +67,12 @@ export function ActivityOverview({
               isEnabled: true,
               onClick: () => setActiveTab("transactions"),
             },
-            {
-              name: "Contracts",
-              isActive: activeTab === "contracts",
-              isEnabled: true,
-              onClick: () => setActiveTab("contracts"),
-            },
+            // {
+            //   name: "Contracts",
+            //   isActive: activeTab === "contracts",
+            //   isEnabled: true,
+            //   onClick: () => setActiveTab("contracts"),
+            // },
           ]}
           tabClassName="font-medium !text-sm"
         />

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

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { fetchTxActivity as getRecentTransactions } from "../actions/fetchTxActivity";
+import { toEther } from "thirdweb/utils";
+
+export interface TransactionDetails {
+  id: string;
+  type: "in" | "out";
+  value: string;
+  to?: string;
+  from?: string;
+  method?: string;
+  date: string;
+}
+
+export function useGetRecentTransactions(chainId: number, address: string) {
+  const [txActivity, setTxActivity] = useState<TransactionDetails[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      const response = await getRecentTransactions({ chainId, address });
+      const activity = response.map((tx): TransactionDetails => {
+        const type =
+          tx.to_address?.toLowerCase() === address.toLowerCase() ? "in" : "out";
+        return {
+          id: tx.hash,
+          type,
+          value: toEther(BigInt(tx.value)).toString(),
+          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 };
+}