Enhance wallet management page with balance fetching and improved UI components

QSchlegel · QSchlegel · commit ee828485cbf0 · 2025-12-11T11:38:59.000+01:00
- Introduced balance fetching for wallets, displaying loading states and balances in the wallet cards.
- Added new components: WalletBalance, EmptyWalletsState, and SectionExplanation for better user experience.
- Refactored CardWallet to include balance and loading state props, ensuring accurate display of wallet information.
- Improved error handling and display logic for multisig wallet addresses.

Files changed:
- src/components/pages/homepage/wallets/index.tsx: Major updates to wallet management functionality and UI components.
diff --git a/src/components/pages/homepage/wallets/EmptyWalletsState.tsx b/src/components/pages/homepage/wallets/EmptyWalletsState.tsx
@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import CardUI from "@/components/common/card-content";
+
+export default function EmptyWalletsState() {
+  return (
+    <div className="col-span-3">
+      <CardUI
+        title="Get Started with Multi-Signature Wallets"
+        description=""
+        cardClassName=""
+      >
+        <div className="flex flex-col gap-4">
+          <div className="space-y-3">
+            <p className="text-sm text-muted-foreground">
+              Multi-signature wallets provide enhanced security for teams, DAOs,
+              and organizations by requiring multiple approvals before any
+              transaction can be executed.
+            </p>
+
+            <div className="space-y-2">
+              <h3 className="text-sm font-semibold">Key Features:</h3>
+              <ul className="list-inside list-disc space-y-1 text-sm text-muted-foreground">
+                <li>
+                  <strong>Flexible Signing Thresholds:</strong> Choose between
+                  "all", "any", or "at least N" signers required
+                </li>
+                <li>
+                  <strong>Team Collaboration:</strong> Perfect for treasury
+                  management and shared funds
+                </li>
+                <li>
+                  <strong>Governance Participation:</strong> Vote on Cardano
+                  governance proposals as a team
+                </li>
+                <li>
+                  <strong>Enhanced Security:</strong> Multiple signatures prevent
+                  unauthorized transactions
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="pt-2">
+            <Button asChild size="lg">
+              <Link href="/wallets/new-wallet-flow/save">
+                Create Your First Wallet
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </CardUI>
+    </div>
+  );
+}
+
diff --git a/src/components/pages/homepage/wallets/SectionExplanation.tsx b/src/components/pages/homepage/wallets/SectionExplanation.tsx
@@ -0,0 +1,21 @@
+import { Info } from "lucide-react";
+
+interface SectionExplanationProps {
+  description: string;
+  className?: string;
+}
+
+export default function SectionExplanation({
+  description,
+  className = "",
+}: SectionExplanationProps) {
+  return (
+    <div
+      className={`flex items-start gap-2 rounded-md bg-muted/50 p-3 text-sm text-muted-foreground ${className}`}
+    >
+      <Info className="mt-0.5 h-4 w-4 shrink-0" />
+      <p>{description}</p>
+    </div>
+  );
+}
+
diff --git a/src/components/pages/homepage/wallets/WalletBalance.tsx b/src/components/pages/homepage/wallets/WalletBalance.tsx
@@ -0,0 +1,34 @@
+import RowLabelInfo from "@/components/common/row-label-info";
+import { numberWithCommas } from "@/utils/strings";
+import WalletBalanceSkeleton from "./WalletBalanceSkeleton";
+
+interface WalletBalanceProps {
+  balance: number | null;
+  loadingState: "idle" | "loading" | "loaded" | "error";
+}
+
+export default function WalletBalance({
+  balance,
+  loadingState,
+}: WalletBalanceProps) {
+  if (loadingState === "loading" || loadingState === "idle") {
+    return <WalletBalanceSkeleton />;
+  }
+
+  if (loadingState === "error") {
+    return <RowLabelInfo label="Balance" value="—" />;
+  }
+
+  // Show balance even if it's 0 (balance === 0 is valid)
+  if (balance === null || balance === undefined) {
+    return <RowLabelInfo label="Balance" value="—" />;
+  }
+
+  return (
+    <RowLabelInfo
+      label="Balance"
+      value={`₳ ${numberWithCommas(balance)}`}
+    />
+  );
+}
+
diff --git a/src/components/pages/homepage/wallets/WalletBalanceSkeleton.tsx b/src/components/pages/homepage/wallets/WalletBalanceSkeleton.tsx
@@ -0,0 +1,15 @@
+import RowLabelInfo from "@/components/common/row-label-info";
+
+export default function WalletBalanceSkeleton() {
+  return (
+    <RowLabelInfo
+      label="Balance"
+      value={
+        <div className="flex items-center gap-2">
+          <div className="h-4 w-20 animate-pulse rounded bg-muted" />
+        </div>
+      }
+    />
+  );
+}
+
diff --git a/src/components/pages/homepage/wallets/index.tsx b/src/components/pages/homepage/wallets/index.tsx
@@ -1,18 +1,25 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 
 import Link from "next/link";
 import usePendingTransactions from "@/hooks/usePendingTransactions";
 import useUserWallets from "@/hooks/useUserWallets";
+import useWalletBalances from "@/hooks/useWalletBalances";
 import { Wallet } from "@/types/wallet";
 import { getFirstAndLast } from "@/utils/strings";
 import { api } from "@/utils/api";
 import { useUserStore } from "@/lib/zustand/user";
+import { useSiteStore } from "@/lib/zustand/site";
+import { buildMultisigWallet } from "@/utils/common";
+import { addressToNetwork } from "@/utils/multisigSDK";
 
 import { Button } from "@/components/ui/button";
 import PageHeader from "@/components/common/page-header";
 import CardUI from "@/components/common/card-content";
 import RowLabelInfo from "@/components/common/row-label-info";
 import SectionTitle from "@/components/common/section-title";
+import WalletBalance from "./WalletBalance";
+import EmptyWalletsState from "./EmptyWalletsState";
+import SectionExplanation from "./SectionExplanation";
 
 
 export default function PageWallets() {
@@ -35,6 +42,14 @@ export default function PageWallets() {
       },
     );
 
+  // Filter wallets for balance fetching (only non-archived or all if showing archived)
+  const walletsForBalance = wallets?.filter(
+    (wallet) => showArchived || !wallet.isArchived,
+  ) as Wallet[] | undefined;
+
+  // Fetch balances with rate limiting
+  const { balances, loadingStates } = useWalletBalances(walletsForBalance);
+
   return (
     <div className="flex flex-col gap-4">
       <>
@@ -53,15 +68,7 @@ export default function PageWallets() {
         </PageHeader>
 
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-          {wallets && wallets.length === 0 && (
-            <div className="col-span-3 text-center text-muted-foreground">
-              No wallets,{" "}
-              <Link href="/wallets/new-wallet-flow/save">
-                <b className="cursor-pointer text-white">create one</b>
-              </Link>
-              ?
-            </div>
-          )}
+          {wallets && wallets.length === 0 && <EmptyWalletsState />}
           {wallets &&
             wallets
               .filter((wallet) => showArchived || !wallet.isArchived)
@@ -72,14 +79,30 @@ export default function PageWallets() {
                     ? 1
                     : -1,
               )
-              .map((wallet) => (
-                <CardWallet key={wallet.id} wallet={wallet as Wallet} />
-              ))}
+              .map((wallet) => {
+                const walletBalance = balances[wallet.id] ?? null;
+                const walletLoadingState = loadingStates[wallet.id] ?? "idle";
+                // Debug log
+                if (process.env.NODE_ENV === "development") {
+                  console.log(`Wallet ${wallet.id}: balance=${walletBalance}, loadingState=${walletLoadingState}`);
+                }
+                return (
+                  <CardWallet
+                    key={wallet.id}
+                    wallet={wallet as Wallet}
+                    balance={walletBalance}
+                    loadingState={walletLoadingState}
+                  />
+                );
+              })}
         </div>
 
         {newPendingWallets && newPendingWallets.length > 0 && (
           <>
             <SectionTitle>New Wallets to be created</SectionTitle>
+            <SectionExplanation
+              description="These are wallets you have initiated but not yet created on-chain. Complete the wallet creation process to deploy them."
+            />
             <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
               {newPendingWallets
                 .sort((a, b) => a.name.localeCompare(b.name))
@@ -99,6 +122,9 @@ export default function PageWallets() {
             <SectionTitle>
               New Wallets awaiting creation
             </SectionTitle>
+            <SectionExplanation
+              description="These are wallets you have been invited to join as a signer. You can view details and accept or decline the invitation."
+            />
             <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
               {getUserNewWalletsNotOwner
                 .sort((a, b) => a.name.localeCompare(b.name))
@@ -113,22 +139,50 @@ export default function PageWallets() {
   );
 }
 
-function CardWallet({ wallet }: { wallet: Wallet }) {
+function CardWallet({
+  wallet,
+  balance,
+  loadingState,
+}: {
+  wallet: Wallet;
+  balance: number | null;
+  loadingState: "idle" | "loading" | "loaded" | "error";
+}) {
+  const network = useSiteStore((state) => state.network);
   const { transactions: pendingTransactions } = usePendingTransactions({
     walletId: wallet.id,
   });
 
+  // Rebuild the multisig wallet to get the correct canonical address for display
+  // This ensures we show the correct address even if wallet.address was built incorrectly
+  const displayAddress = useMemo(() => {
+    try {
+      const walletNetwork = wallet.signersAddresses.length > 0 
+        ? addressToNetwork(wallet.signersAddresses[0]!)
+        : network;
+      const mWallet = buildMultisigWallet(wallet, walletNetwork);
+      if (mWallet) {
+        return mWallet.getScript().address;
+      }
+    } catch (error) {
+      console.error(`Error building wallet for display: ${wallet.id}`, error);
+    }
+    // Fallback to wallet.address if rebuild fails (legacy support)
+    return wallet.address;
+  }, [wallet, network]);
+
   return (
     <Link href={`/wallets/${wallet.id}`}>
       <CardUI
         title={`${wallet.name}${wallet.isArchived ? " (Archived)" : ""}`}
         description={wallet.description}
         cardClassName=""
       >
+        <WalletBalance balance={balance} loadingState={loadingState} />
         <RowLabelInfo
           label="Address"
-          value={getFirstAndLast(wallet.address)}
-          copyString={wallet.address}
+          value={getFirstAndLast(displayAddress)}
+          copyString={displayAddress}
         />
         <RowLabelInfo
           label="DRep ID"
diff --git a/src/hooks/useWalletBalances.ts b/src/hooks/useWalletBalances.ts
