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

Author: arcoraven

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

@@ -1,5 +1,5 @@
+"use server";
 import assert from "node:assert";
-import { DASHBOARD_THIRDWEB_CLIENT_ID } from "@/constants/env";
 
 interface Transaction {
   chain_id: number;
@@ -54,26 +54,33 @@ export async function fetchRecentTransactions(args: {
 }): Promise<Transaction[]> {
   // const { NEXT_PUBLIC_INSIGHT_URL } = process.env;
   const NEXT_PUBLIC_INSIGHT_URL = "https://insight.thirdweb-dev.com";
-  console.log("[DEBUG] NEXT_PUBLIC_INSIGHT_URL:", NEXT_PUBLIC_INSIGHT_URL);
   assert(NEXT_PUBLIC_INSIGHT_URL, "NEXT_PUBLIC_INSIGHT_URL is not set");
 
+  const { DASHBOARD_SECRET_KEY } = process.env;
+  assert(DASHBOARD_SECRET_KEY, "DASHBOARD_SECRET_KEY is not set");
+
   const { chainId, address, limit_per_type = 100, page = 0 } = args;
 
   const [outgoingTransactionsResponse, incomingTransactionsResponse] =
     await Promise.all([
       fetch(
         `${NEXT_PUBLIC_INSIGHT_URL}/v1/transactions?chain=${chainId}&filter_from_address=${address}&page=${page}&limit=${limit_per_type}&sort_by=block_number&sort_order=desc`,
         {
-          headers: { "x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID },
+          headers: {
+            "x-secret-key": DASHBOARD_SECRET_KEY,
+          },
         },
       ),
       fetch(
         `${NEXT_PUBLIC_INSIGHT_URL}/v1/transactions?chain=${chainId}&filter_to_address=${address}&page=${page}&limit=${limit_per_type}&sort_by=block_number&sort_order=desc`,
         {
-          headers: { "x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID },
+          headers: {
+            "x-secret-key": DASHBOARD_SECRET_KEY,
+          },
         },
       ),
     ]);
+
   if (!outgoingTransactionsResponse.ok || !incomingTransactionsResponse.ok) {
     throw new Error("Failed to fetch transaction history");
   }

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

@@ -17,6 +17,7 @@ import { useState } from "react";
 import type { ChainMetadata } from "thirdweb/chains";
 import { shortenHex } from "thirdweb/utils";
 import type { TransactionDetails } from "../hooks/useGetRecentTransactions";
+import { formatDistanceToNow } from "date-fns";
 
 interface Contract {
   address: string;

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

@@ -30,6 +30,17 @@ export function TokenHoldings({
   isLoading,
 }: TokenHoldingsProps) {
   const [activeTab, setActiveTab] = useState<"erc20" | "nft">("erc20");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5; // Set items per page
+
+  // Calculate the index of the last token on the current page
+  const lastIndex = currentPage * itemsPerPage;
+  // Calculate the index of the first token on the current page
+  const firstIndex = lastIndex - itemsPerPage;
+  // Get the current tokens to display
+  const currentTokens = tokens.slice(firstIndex, lastIndex);
+  // Calculate total pages
+  const totalPages = Math.ceil(tokens.length / itemsPerPage);
 
   return (
     <Card>
@@ -58,7 +69,35 @@ export function TokenHoldings({
         {isLoading ? (
           <Spinner />
         ) : activeTab === "erc20" ? (
-          <ERC20Table chain={chain} tokens={tokens} isLoading={isLoading} />
+          <>
+            <ERC20Table chain={chain} tokens={currentTokens} isLoading={isLoading} />
+            {/* Pagination Controls */}
+            <div className="pagination">
+              <TabButtons
+                tabs={[
+                  {
+                    name: "Previous",
+                    isActive: currentPage === 1,
+                    isEnabled: currentPage > 1,
+                    onClick: () => setCurrentPage((prev) => Math.max(prev - 1, 1)),
+                  },
+                  {
+                    name: `Page ${currentPage} of ${totalPages}`,
+                    isActive: true,
+                    isEnabled: false,
+                    onClick: () => {}, // No action needed
+                  },
+                  {
+                    name: "Next",
+                    isActive: currentPage === totalPages,
+                    isEnabled: currentPage < totalPages,
+                    onClick: () => setCurrentPage((prev) => Math.min(prev + 1, totalPages)),
+                  },
+                ]}
+                tabClassName="font-medium !text-sm"
+              />
+            </div>
+          </>
         ) : activeTab === "nft" ? (
           <div className="mt-4 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
             {nfts.map((nft, idx) => (

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

@@ -28,6 +28,7 @@ export function useGetRecentTransactions(chainId: number, address: string) {
           value: toEther(BigInt(tx.value)).toString(),
           to: tx.to_address || undefined,
           from: tx.from_address,
+          // TODO: fix method retrieval
           method: tx.function_selector || undefined,
           date: new Date(tx.block_timestamp * 1000).toLocaleString(),
         };