fix: activity and balance component cleanup

Author: Vernon Johnson

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

@@ -92,7 +92,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] ?? "--",
@@ -104,6 +104,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/fetchTxActivity.ts

@@ -51,6 +51,7 @@ export async function fetchTxActivity(args: {
   limit_per_type?: number;
   page?: number;
 }): Promise<Transaction[]> {
+  try {
   let { chainId, address, limit_per_type, page } = args;
   if (!limit_per_type) limit_per_type = 100;
   if (!page) page = 0;
@@ -83,4 +84,8 @@ export async function fetchTxActivity(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

@@ -10,14 +10,14 @@ import {
 } from "@/components/ui/table";
 import { TabButtons } from "@/components/ui/tabs";
 import { useState } from "react";
+import { formatDistanceToNow } from "date-fns";
 
 interface Transaction {
   id: string;
   type: "out" | "in";
-  amount: string;
+  value: string;
   to?: string;
   from?: string;
-  contract?: string;
   method?: string;
   date: string;
 }
@@ -85,24 +85,23 @@ export function ActivityOverview({
             <Table>
               <TableHeader>
                 <TableRow>
+                  <TableHead>Tx Hash</TableHead>
                   <TableHead>Type</TableHead>
                   <TableHead>Amount</TableHead>
-                  <TableHead>Details</TableHead>
+                  <TableHead>From</TableHead>
+                  <TableHead>To</TableHead>
                   <TableHead>Date</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {currentTransactions.map((tx) => (
                   <TableRow key={tx.id}>
+                    <TableCell>{tx.id.slice(0, 12)}...</TableCell>
                     <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.method && ` Method: ${tx.method}`}
-                    </TableCell>
-                    <TableCell>{tx.date}</TableCell>
+                    <TableCell>{tx.value}</TableCell>
+                    <TableCell>{tx.from}</TableCell>
+                    <TableCell>{tx.to}</TableCell>
+                    <TableCell>{formatDistanceToNow(tx.date)}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>

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

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
 import { fetchTxActivity as getRecentTransactions } from "../actions/fetchTxActivity";
+import { toEther } from "thirdweb/utils";
 
 export interface TransactionDetails {
   id: string;
-  type: "out" | "in";
-  value: bigint;
+  type: "in" | "out";
+  value: string;
   to?: string;
   from?: string;
   method?: string;
@@ -24,7 +25,7 @@ export function useGetRecentTransactions(chainId: number, address: string) {
         return {
           id: tx.hash,
           type,
-          value: BigInt(tx.value),
+          value: toEther(BigInt(tx.value)).toString(),
           to: tx.to_address || undefined,
           from: tx.from_address,
           method: tx.function_selector || undefined,