@powerhousedao/contributor-billing 0.1.30 → 0.1.32

package/dist/editors/expense-report/components/WalletsTable.js

@@ -1,38 +1,468 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Button, TextInput } from "@powerhousedao/document-engineering";
-import { Plus, Trash2, Pencil, Check, X, Copy, CheckCheck, RefreshCw, } from "lucide-react";
+import { Plus, Trash2, Pencil, Check, X, Copy, CheckCheck, RefreshCw, ChevronDown, ChevronUp, } from "lucide-react";
+// Ethereum address regex - matches 0x followed by 40 hex characters
+const ETH_ADDRESS_REGEX = /^0x[a-fA-F0-9]{40}$/;
 import { actions } from "../../../document-models/expense-report/index.js";
+import { generateId } from "document-model/core";
 import { useWalletSync } from "../hooks/useWalletSync.js";
 import { useSyncWallet } from "../hooks/useSyncWallet.js";
-export function WalletsTable({ wallets, groups, onAddBillingStatement, dispatch, }) {
-    const [newWalletAddress, setNewWalletAddress] = useState("");
-    const [newWalletName, setNewWalletName] = useState("");
+import { addDocument, dispatchActions, useDocumentsInSelectedDrive, useSelectedDrive, setSelectedNode, useDocumentById, } from "@powerhousedao/reactor-browser";
+import { actions as accountsActions } from "../../../document-models/accounts/index.js";
+import { actions as accountTransactionsActions, addTransaction, } from "../../../document-models/account-transactions/index.js";
+import { alchemyIntegration } from "../../account-transactions-editor/alchemyIntegration.js";
+export function WalletsTable({ wallets, groups, onAddBillingStatement, periodStart, periodEnd, dispatch, }) {
+    const [selectedAccountId, setSelectedAccountId] = useState("");
     const [walletError, setWalletError] = useState("");
-    const [hoveredWallet, setHoveredWallet] = useState(null);
     const [editingWallet, setEditingWallet] = useState(null);
     const [editingName, setEditingName] = useState("");
     const [copiedWallet, setCopiedWallet] = useState(null);
     const [syncingWallet, setSyncingWallet] = useState(null);
+    const [addingWallet, setAddingWallet] = useState(false);
+    // Manual wallet entry state
+    const [showManualEntry, setShowManualEntry] = useState(false);
+    const [manualWalletAddress, setManualWalletAddress] = useState("");
+    const [manualWalletName, setManualWalletName] = useState("");
+    const [manualWalletError, setManualWalletError] = useState("");
+    const [addingManualWallet, setAddingManualWallet] = useState(false);
+    // State for handling newly created transaction documents
+    const [pendingTxDoc, setPendingTxDoc] = useState(null);
+    // Track if we're currently processing to prevent duplicate runs
+    const [isProcessing, setIsProcessing] = useState(false);
+    // Progress state for Add Txns operation
+    const [txProgress, setTxProgress] = useState({
+        show: false,
+        step: "",
+        current: 0,
+        total: 5,
+        details: "",
+    });
+    // Get drive and documents for account/transactions document management
+    const [selectedDrive] = useSelectedDrive();
+    const allDocuments = useDocumentsInSelectedDrive();
+    // Load the pending transaction document if one exists
+    const [pendingDocument, pendingDocDispatch] = useDocumentById(pendingTxDoc?.documentId || null);
+    // Get available Account documents from the drive
+    const availableAccounts = allDocuments?.filter((doc) => doc.header.documentType === "powerhouse/accounts") || [];
+    // Extract all account entries from all Accounts documents
+    const accountEntries = availableAccounts.flatMap((doc) => {
+        const accounts = doc.state?.global?.accounts || [];
+        return accounts.map((acc) => ({
+            ...acc,
+            accountsDocumentId: doc.header.id, // Store which Accounts document this came from
+        }));
+    });
     // Check sync status
     const { needsSync, outdatedWallets, tagChangedWallets } = useWalletSync(wallets);
     const { syncWallet } = useSyncWallet();
-    const handleAddWallet = () => {
-        const trimmedAddress = newWalletAddress.trim();
-        if (trimmedAddress) {
-            // Check if wallet already exists
-            const walletExists = wallets.some((w) => w.wallet === trimmedAddress);
-            if (walletExists) {
-                setWalletError("This wallet already exists");
-                return;
+    // Handle fetching and adding transactions when a new document is created
+    useEffect(() => {
+        // Check if we have pending work and all required resources
+        if (!pendingTxDoc ||
+            !pendingDocument ||
+            !pendingDocDispatch ||
+            isProcessing) {
+            return;
+        }
+        // Mark as processing and save current pending doc
+        setIsProcessing(true);
+        const currentPendingDoc = pendingTxDoc;
+        const fetchAndAddTransactions = async () => {
+            console.log("[WalletsTable] Processing pending transaction document:", currentPendingDoc.documentId);
+            try {
+                // Step 1: Set account info in the transaction document
+                setTxProgress({
+                    show: true,
+                    step: "Initializing",
+                    current: 1,
+                    total: 5,
+                    details: "Setting up transaction document...",
+                });
+                // Add small delay to ensure document is fully initialized
+                await new Promise((resolve) => setTimeout(resolve, 300));
+                console.log("[WalletsTable] Document state before setAccount:", {
+                    documentId: pendingDocument?.header?.id,
+                    hasState: !!pendingDocument?.state,
+                    hasGlobal: !!pendingDocument?.state?.global,
+                });
+                const setAccountAction = accountTransactionsActions.setAccount({
+                    id: currentPendingDoc.accountEntry.id,
+                    account: currentPendingDoc.accountEntry.account,
+                    name: currentPendingDoc.accountEntry.name,
+                });
+                console.log("[WalletsTable] Dispatching setAccount action:", setAccountAction);
+                pendingDocDispatch(setAccountAction);
+                // Wait a bit for the action to be processed
+                await new Promise((resolve) => setTimeout(resolve, 200));
+                console.log("[WalletsTable] Account info set - checking document state:", {
+                    account: pendingDocument?.state?.global?.account,
+                });
+                // Step 2: Fetch transactions from Alchemy
+                setTxProgress({
+                    show: true,
+                    step: "Fetching Transactions",
+                    current: 2,
+                    total: 5,
+                    details: "Retrieving blockchain transactions from Alchemy...",
+                });
+                console.log("[WalletsTable] Fetching transactions from Alchemy for:", currentPendingDoc.accountEntry.account);
+                const result = await alchemyIntegration.getTransactionsFromAlchemy(currentPendingDoc.accountEntry.account);
+                console.log("[WalletsTable] Alchemy result:", result.success, "transactions count:", result.transactions?.length || 0);
+                if (result.success && result.transactions.length > 0) {
+                    // Step 3: Add each transaction using the document's dispatch function
+                    setTxProgress({
+                        show: true,
+                        step: "Adding Transactions",
+                        current: 3,
+                        total: 5,
+                        details: `Processing ${result.transactions.length} transactions...`,
+                    });
+                    let addedCount = 0;
+                    for (const txData of result.transactions) {
+                        // Validate required fields
+                        if (!txData.direction || !txData.from || !txData.to) {
+                            console.error("[WalletsTable] Skipping invalid transaction:", txData);
+                            continue;
+                        }
+                        // Handle amount formatting
+                        let amount;
+                        if (typeof txData.amount === "string") {
+                            const amountParts = txData.amount.split(" ");
+                            amount = {
+                                value: amountParts[0] || "0",
+                                unit: amountParts[1] || txData.token,
+                            };
+                        }
+                        else if (typeof txData.amount === "object" &&
+                            txData.amount &&
+                            "value" in txData.amount &&
+                            "unit" in txData.amount) {
+                            amount = txData.amount;
+                        }
+                        else {
+                            amount = {
+                                value: "0",
+                                unit: txData.token,
+                            };
+                        }
+                        // Dispatch transaction directly to the document
+                        const txAction = addTransaction({
+                            id: generateId(),
+                            counterParty: txData.counterParty,
+                            amount: amount,
+                            datetime: txData.datetime,
+                            txHash: txData.txHash,
+                            token: txData.token,
+                            blockNumber: txData.blockNumber,
+                            accountingPeriod: txData.accountingPeriod,
+                            direction: txData.direction || "OUTFLOW",
+                            budget: null,
+                        });
+                        if (addedCount === 0) {
+                            console.log("[WalletsTable] First transaction action:", txAction);
+                        }
+                        pendingDocDispatch(txAction);
+                        addedCount++;
+                        // Update progress every 10 transactions
+                        if (addedCount % 10 === 0) {
+                            setTxProgress({
+                                show: true,
+                                step: "Adding Transactions",
+                                current: 3,
+                                total: 5,
+                                details: `Added ${addedCount} of ${result.transactions.length} transactions...`,
+                            });
+                            console.log(`[WalletsTable] Added ${addedCount}/${result.transactions.length} transactions`);
+                        }
+                    }
+                    console.log(`[WalletsTable] Successfully added all ${addedCount} transactions`);
+                    // Verify operations were added
+                    console.log("[WalletsTable] Final transaction count in document:", {
+                        transactionsCount: pendingDocument?.state?.global?.transactions?.length ||
+                            0,
+                        operationsCount: pendingDocument?.operations?.global?.length || 0,
+                    });
+                }
+                else {
+                    console.log("[WalletsTable] No transactions to add");
+                }
+                // Step 4: Update the Accounts document with the transaction document ID
+                setTxProgress({
+                    show: true,
+                    step: "Linking Documents",
+                    current: 4,
+                    total: 5,
+                    details: "Updating account references...",
+                });
+                console.log("[WalletsTable] Updating account in Accounts document:", {
+                    accountId: currentPendingDoc.accountEntry.id,
+                    accountsDocId: currentPendingDoc.accountsDocId,
+                    transactionsDocId: currentPendingDoc.documentId,
+                });
+                await dispatchActions([
+                    accountsActions.updateAccount({
+                        id: currentPendingDoc.accountEntry.id,
+                        accountTransactionsId: currentPendingDoc.documentId,
+                    }),
+                ], currentPendingDoc.accountsDocId);
+                console.log("[WalletsTable] Successfully updated account with transactions ID");
+                // Step 5: Link the transaction document to the wallet in ExpenseReport
+                setTxProgress({
+                    show: true,
+                    step: "Finalizing",
+                    current: 5,
+                    total: 5,
+                    details: "Linking to expense report...",
+                });
+                dispatch(actions.updateWallet({
+                    address: currentPendingDoc.walletAddress,
+                    accountTransactionsDocumentId: currentPendingDoc.documentId,
+                }));
+                console.log("[WalletsTable] Successfully linked to wallet");
+                // Success! Close modal after a brief delay
+                setTimeout(() => {
+                    setTxProgress({
+                        show: false,
+                        step: "",
+                        current: 0,
+                        total: 5,
+                        details: "",
+                    });
+                }, 1500);
+            }
+            catch (error) {
+                console.error("[WalletsTable] Error processing pending transaction document:", error);
+                setTxProgress({
+                    show: false,
+                    step: "",
+                    current: 0,
+                    total: 5,
+                    details: "",
+                });
+                alert(`Failed to fetch transactions: ${error instanceof Error ? error.message : "Unknown error"}`);
             }
+            finally {
+                // Always clear processing state and pending doc
+                setPendingTxDoc(null);
+                setIsProcessing(false);
+            }
+        };
+        fetchAndAddTransactions();
+    }, [pendingTxDoc, pendingDocument, pendingDocDispatch, isProcessing]);
+    const handleAddWallet = () => {
+        if (!selectedAccountId) {
+            setWalletError("Please select an account");
+            return;
+        }
+        // Find the selected account from accountEntries
+        const selectedAccount = accountEntries.find((acc) => acc.id === selectedAccountId);
+        if (!selectedAccount) {
+            setWalletError("Selected account not found");
+            return;
+        }
+        // Check if wallet already exists
+        const walletExists = wallets.some((w) => w.wallet === selectedAccount.account);
+        if (walletExists) {
+            setWalletError("This account is already added to the report");
+            return;
+        }
+        setAddingWallet(true);
+        setWalletError("");
+        try {
+            // Add the wallet to the expense report
+            dispatch(actions.addWallet({
+                wallet: selectedAccount.account,
+                name: selectedAccount.name || undefined,
+            }));
+            // Immediately update with the linked document IDs
+            dispatch(actions.updateWallet({
+                address: selectedAccount.account,
+                accountDocumentId: selectedAccount.accountsDocumentId || undefined,
+                accountTransactionsDocumentId: selectedAccount.accountTransactionsId || undefined,
+            }));
+            // Clear selection
+            setSelectedAccountId("");
+        }
+        catch (error) {
+            console.error("Error adding wallet:", error);
+            setWalletError("Failed to add wallet. Please try again.");
+        }
+        finally {
+            setAddingWallet(false);
+        }
+    };
+    // Validate Ethereum address
+    const validateEthAddress = useCallback((address) => {
+        return ETH_ADDRESS_REGEX.test(address);
+    }, []);
+    // Handle manual wallet addition
+    const handleAddManualWallet = () => {
+        const trimmedAddress = manualWalletAddress.trim();
+        const trimmedName = manualWalletName.trim();
+        // Validate address
+        if (!trimmedAddress) {
+            setManualWalletError("Please enter a wallet address");
+            return;
+        }
+        if (!validateEthAddress(trimmedAddress)) {
+            setManualWalletError("Invalid Ethereum address. Must be 0x followed by 40 hex characters.");
+            return;
+        }
+        // Check if wallet already exists
+        const walletExists = wallets.some((w) => w.wallet?.toLowerCase() === trimmedAddress.toLowerCase());
+        if (walletExists) {
+            setManualWalletError("This wallet is already added to the report");
+            return;
+        }
+        setAddingManualWallet(true);
+        setManualWalletError("");
+        try {
+            // Add the wallet to the expense report
             dispatch(actions.addWallet({
                 wallet: trimmedAddress,
-                name: newWalletName.trim() || undefined,
+                name: trimmedName || undefined,
             }));
-            setNewWalletAddress("");
-            setNewWalletName("");
-            setWalletError("");
+            // Clear inputs and collapse manual entry
+            setManualWalletAddress("");
+            setManualWalletName("");
+            setShowManualEntry(false);
+        }
+        catch (error) {
+            console.error("Error adding manual wallet:", error);
+            setManualWalletError("Failed to add wallet. Please try again.");
+        }
+        finally {
+            setAddingManualWallet(false);
+        }
+    };
+    const handleAddTransactions = async (wallet) => {
+        if (!wallet.wallet) {
+            return;
+        }
+        // Check if transactions document already exists
+        if (wallet.accountTransactionsDocumentId) {
+            return;
+        }
+        if (!selectedDrive?.header?.id) {
+            alert("No drive selected");
+            return;
+        }
+        try {
+            // Show initial progress
+            setTxProgress({
+                show: true,
+                step: "Preparing",
+                current: 0,
+                total: 5,
+                details: "Checking for existing documents...",
+            });
+            // Find or create AccountTransactions document for this wallet
+            const existingTxDoc = allDocuments?.find((doc) => doc.header.documentType === "powerhouse/account-transactions" &&
+                doc.state?.global?.account?.account === wallet.wallet);
+            if (existingTxDoc) {
+                // Link existing document
+                dispatch(actions.updateWallet({
+                    address: wallet.wallet,
+                    accountTransactionsDocumentId: existingTxDoc.header.id,
+                }));
+                setTxProgress({
+                    show: false,
+                    step: "",
+                    current: 0,
+                    total: 5,
+                    details: "",
+                });
+                return;
+            }
+            // Step 1: Find or create an Accounts document
+            setTxProgress({
+                show: true,
+                step: "Preparing",
+                current: 0,
+                total: 5,
+                details: "Setting up accounts...",
+            });
+            const accountsDoc = allDocuments?.find((doc) => doc.header.documentType === "powerhouse/accounts");
+            let accountsDocId;
+            let existingAccounts = [];
+            if (!accountsDoc) {
+                console.log("[WalletsTable] Creating new Accounts document");
+                const accountsNode = await addDocument(selectedDrive.header.id, "Accounts", "powerhouse/accounts", undefined, undefined, undefined, "powerhouse-accounts-editor");
+                if (!accountsNode?.id) {
+                    throw new Error("Failed to create Accounts document");
+                }
+                accountsDocId = accountsNode.id;
+            }
+            else {
+                accountsDocId = accountsDoc.header.id;
+                existingAccounts = accountsDoc.state?.global?.accounts || [];
+            }
+            // Step 2: Find or create an AccountEntry for this wallet
+            let accountEntry = existingAccounts.find((acc) => acc.account === wallet.wallet);
+            if (!accountEntry) {
+                console.log("[WalletsTable] Creating new account entry for wallet:", wallet.wallet);
+                const newAccountId = generateId();
+                const newAccountName = wallet.name || wallet.wallet.substring(0, 10);
+                // Add the account to the Accounts document
+                console.log("[WalletsTable] Adding new account to Accounts document:", newAccountId);
+                await dispatchActions([
+                    accountsActions.addAccount({
+                        id: newAccountId,
+                        account: wallet.wallet,
+                        name: newAccountName,
+                        type: "External",
+                    }),
+                ], accountsDocId);
+                console.log("[WalletsTable] Account added successfully");
+                // Create accountEntry reference
+                accountEntry = {
+                    id: newAccountId,
+                    account: wallet.wallet,
+                    name: newAccountName,
+                    type: "External",
+                    accountTransactionsId: null,
+                    KycAmlStatus: null,
+                    budgetPath: null,
+                    chain: null,
+                    owners: null,
+                };
+                // Give a small delay to ensure the account is persisted
+                await new Promise((resolve) => setTimeout(resolve, 100));
+            }
+            // Step 3: Create the AccountTransactions document
+            setTxProgress({
+                show: true,
+                step: "Preparing",
+                current: 0,
+                total: 5,
+                details: "Creating transaction document...",
+            });
+            console.log("[WalletsTable] Creating AccountTransactions document");
+            const documentName = `${accountEntry.name} Transactions`;
+            const createdNode = await addDocument(selectedDrive.header.id, documentName, "powerhouse/account-transactions", undefined, undefined, undefined, "powerhouse-account-transactions-editor");
+            if (!createdNode?.id) {
+                throw new Error("Failed to create AccountTransactions document");
+            }
+            console.log("[WalletsTable] AccountTransactions document created:", createdNode.id);
+            // Step 4: Set up pending state to let useEffect handle the rest
+            setPendingTxDoc({
+                documentId: createdNode.id,
+                accountEntry,
+                accountsDocId,
+                walletAddress: wallet.wallet,
+            });
+        }
+        catch (error) {
+            console.error("[WalletsTable] Error adding transactions:", error);
+            setTxProgress({
+                show: false,
+                step: "",
+                current: 0,
+                total: 5,
+                details: "",
+            });
+            alert(`Failed to add transactions document: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     };
     const handleStartEditName = (wallet) => {
@@ -67,26 +497,22 @@ export function WalletsTable({ wallets, groups, onAddBillingStatement, dispatch,
         return `${address.substring(0, 6)}...${address.substring(address.length - 5)}`;
     };
     const handleSyncWallet = async (wallet) => {
-        if (!wallet.wallet ||
-            !wallet.billingStatements ||
-            wallet.billingStatements.length === 0) {
+        if (!wallet.wallet) {
+            return;
+        }
+        // Validate period dates before syncing
+        if (!periodStart || !periodEnd) {
+            alert("Please set the period start and end dates before syncing wallet transactions.");
             return;
         }
         setSyncingWallet(wallet.wallet);
         try {
-            // Remove all existing line items first
-            const lineItemsToRemove = [...(wallet.lineItems || [])];
-            lineItemsToRemove.forEach((item) => {
-                if (item?.id) {
-                    dispatch(actions.removeLineItem({
-                        wallet: wallet.wallet,
-                        lineItemId: item.id,
-                    }));
-                }
-            });
-            // Re-extract line items from billing statements
-            const billingStatementIds = wallet.billingStatements.filter((id) => id !== null && id !== undefined);
-            syncWallet(wallet.wallet, billingStatementIds, groups, dispatch);
+            // Get existing line items (don't remove them, we'll update instead)
+            const existingLineItems = (wallet.lineItems || []).filter((item) => item !== null && item !== undefined);
+            // Get billing statement IDs
+            const billingStatementIds = (wallet.billingStatements || []).filter((id) => id !== null && id !== undefined);
+            // Sync wallet with all new parameters
+            syncWallet(wallet.wallet, existingLineItems, billingStatementIds, groups, wallets, wallet.accountTransactionsDocumentId, periodStart, periodEnd, dispatch);
             // Small delay to show sync animation
             setTimeout(() => {
                 setSyncingWallet(null);
@@ -94,6 +520,7 @@ export function WalletsTable({ wallets, groups, onAddBillingStatement, dispatch,
         }
         catch (error) {
             console.error("Error syncing wallet:", error);
+            alert(error instanceof Error ? error.message : "Error syncing wallet");
             setSyncingWallet(null);
         }
     };
@@ -124,60 +551,108 @@ export function WalletsTable({ wallets, groups, onAddBillingStatement, dispatch,
             minimumFractionDigits: 2,
         }).format(value);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [wallets.length > 0 ? (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-700", children: [_jsx("thead", { className: "bg-gray-50 dark:bg-gray-800", children: _jsxs("tr", { children: [_jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Wallet" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Monthly Budget" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Forecast" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [needsSync && (_jsx("button", { onClick: () => {
-                                                        // Sync all outdated wallets
-                                                        [...tagChangedWallets, ...outdatedWallets].forEach((walletAddress) => {
-                                                            const wallet = wallets.find((w) => w.wallet === walletAddress);
-                                                            if (wallet) {
-                                                                handleSyncWallet(wallet);
-                                                            }
-                                                        });
-                                                    }, disabled: syncingWallet !== null, className: `inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${tagChangedWallets.length > 0
-                                                        ? "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 animate-pulse"
-                                                        : "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 animate-pulse"} disabled:opacity-50 disabled:cursor-not-allowed`, title: tagChangedWallets.length > 0
-                                                        ? "ALERT: Tags have changed in billing statements - sync all wallets!"
-                                                        : "Sync all wallets with latest billing statements", children: _jsx(RefreshCw, { size: 16, className: syncingWallet !== null ? "animate-spin" : "" }) })), _jsx("span", { children: "Actuals" })] }) }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Difference" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Payments" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Actions" })] }) }), _jsx("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: wallets.map((wallet) => {
-                                const totals = calculateWalletTotals(wallet);
-                                const isHovered = hoveredWallet === wallet.wallet;
-                                return (_jsxs("tr", { onMouseEnter: () => setHoveredWallet(wallet.wallet || null), onMouseLeave: () => setHoveredWallet(null), className: "hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors", children: [_jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: editingWallet === wallet.wallet ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TextInput, { value: editingName, onChange: (e) => setEditingName(e.target.value), placeholder: "Enter wallet name", className: "flex-1", onKeyDown: (e) => {
-                                                            if (e.key === "Enter") {
-                                                                handleSaveEditName(wallet.wallet || "");
-                                                            }
-                                                            else if (e.key === "Escape") {
-                                                                handleCancelEditName();
-                                                            }
-                                                        }, autoFocus: true }), _jsx("button", { onClick: () => handleSaveEditName(wallet.wallet || ""), className: "inline-flex items-center justify-center w-7 h-7 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-md transition-colors", title: "Save", children: _jsx(Check, { size: 14 }) }), _jsx("button", { onClick: handleCancelEditName, className: "inline-flex items-center justify-center w-7 h-7 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900/20 rounded-md transition-colors", title: "Cancel", children: _jsx(X, { size: 14 }) })] })) : (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: wallet.name || "Unnamed Wallet" }), _jsx("button", { onClick: () => handleStartEditName(wallet), className: "inline-flex items-center justify-center w-6 h-6 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors", title: "Edit name", children: _jsx(Pencil, { size: 12 }) }), _jsxs("button", { onClick: () => handleCopyAddress(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 font-mono hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors", title: `Copy address: ${wallet.wallet}`, children: [formatAddress(wallet.wallet || ""), copiedWallet === wallet.wallet ? (_jsx(CheckCheck, { size: 12, className: "text-green-500" })) : (_jsx(Copy, { size: 12 }))] })] })) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.budget) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.forecast) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm", children: totals.actuals === 0 &&
-                                                (!wallet.billingStatements ||
-                                                    wallet.billingStatements.length === 0) ? (
-                                            // When actuals is 0 and no billing statements, only show the Add Bills button
-                                            _jsx("div", { className: "flex items-center justify-end", children: _jsxs("button", { onClick: () => onAddBillingStatement(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors", title: "Add billing statement for this wallet", children: [_jsx(Plus, { size: 16 }), _jsx("span", { children: "Add Bills" })] }) })) : (
-                                            // When actuals is not 0 or has billing statements, show compact buttons + value horizontally
-                                            _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => onAddBillingStatement(wallet.wallet || ""), className: "inline-flex items-center justify-center w-8 h-8 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors", title: "Add billing statement for this wallet", children: _jsx(Plus, { size: 16 }) }), wallet.billingStatements &&
-                                                        wallet.billingStatements.length > 0 && (_jsx("button", { onClick: () => handleSyncWallet(wallet), disabled: syncingWallet === wallet.wallet, className: `inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${tagChangedWallets.includes(wallet.wallet || "")
+    return (_jsxs("div", { className: "space-y-4", children: [wallets.length > 0 ? (_jsx("div", { className: "w-full overflow-x-auto", children: _jsx("div", { className: "min-w-max", children: _jsxs("table", { className: "w-full divide-y divide-gray-200 dark:divide-gray-700", children: [_jsx("thead", { className: "bg-gray-50 dark:bg-gray-800", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Wallet" }), _jsx("th", { className: "px-3 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [needsSync && (_jsx("button", { onClick: () => {
+                                                            // Sync all outdated wallets
+                                                            [...tagChangedWallets, ...outdatedWallets].forEach((walletAddress) => {
+                                                                const wallet = wallets.find((w) => w.wallet === walletAddress);
+                                                                if (wallet) {
+                                                                    handleSyncWallet(wallet);
+                                                                }
+                                                            });
+                                                        }, disabled: syncingWallet !== null, className: `inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${tagChangedWallets.length > 0
                                                             ? "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 animate-pulse"
-                                                            : outdatedWallets.includes(wallet.wallet || "")
-                                                                ? "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 animate-pulse"
-                                                                : "text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700"} disabled:opacity-50 disabled:cursor-not-allowed`, title: tagChangedWallets.includes(wallet.wallet || "")
-                                                            ? "ALERT: Tags have changed - sync required!"
-                                                            : outdatedWallets.includes(wallet.wallet || "")
-                                                                ? "Sync needed - billing statements updated"
-                                                                : "Sync with latest billing statements", children: _jsx(RefreshCw, { size: 16, className: syncingWallet === wallet.wallet
-                                                                ? "animate-spin"
-                                                                : "" }) })), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: formatCurrency(totals.actuals) })] })) }), _jsx("td", { className: `px-6 py-4 whitespace-nowrap text-right text-sm font-medium ${totals.difference > 0
-                                                ? "text-red-600 dark:text-red-400"
-                                                : totals.difference < 0
-                                                    ? "text-green-600 dark:text-green-400"
-                                                    : "text-gray-900 dark:text-white"}`, children: formatCurrency(totals.difference) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.payments) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm", children: _jsx("div", { className: "flex items-center justify-end gap-2", children: _jsx("button", { onClick: () => handleRemoveWallet(wallet.wallet || ""), className: "inline-flex items-center justify-center w-8 h-8 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors", title: "Remove wallet", children: _jsx(Trash2, { size: 16 }) }) }) })] }, wallet.wallet));
-                            }) })] }) })) : (_jsx("div", { className: "text-center py-12 text-gray-500 dark:text-gray-400", children: _jsx("p", { className: "text-sm", children: "No wallets added yet. Add a wallet to get started." }) })), _jsxs("div", { className: "flex items-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [_jsxs("div", { className: "flex-1", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Wallet Name" }), _jsx(TextInput, { value: newWalletName, onChange: (e) => setNewWalletName(e.target.value), placeholder: "Enter wallet name (optional)", onKeyDown: (e) => {
-                                    if (e.key === "Enter") {
-                                        handleAddWallet();
-                                    }
-                                } })] }), _jsxs("div", { className: "flex-1 relative", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Wallet Address" }), _jsx(TextInput, { value: newWalletAddress, onChange: (e) => {
-                                    setNewWalletAddress(e.target.value);
-                                    setWalletError(""); // Clear error when typing
-                                }, placeholder: "Enter wallet address (e.g., 0x1234...)", onKeyDown: (e) => {
-                                    if (e.key === "Enter") {
-                                        handleAddWallet();
-                                    }
-                                } }), walletError && (_jsx("div", { className: "absolute left-0 right-0 top-full mt-1 px-3 py-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md shadow-lg z-10", children: _jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: walletError }) }))] }), _jsx(Button, { onClick: handleAddWallet, disabled: !newWalletAddress.trim(), children: "Add Wallet" })] })] }));
+                                                            : "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 animate-pulse"} disabled:opacity-50 disabled:cursor-not-allowed`, title: tagChangedWallets.length > 0
+                                                            ? "ALERT: Tags have changed in billing statements - sync all wallets!"
+                                                            : "Sync all wallets with latest billing statements", children: _jsx(RefreshCw, { size: 16, className: syncingWallet !== null ? "animate-spin" : "" }) })), _jsx("span", { children: "Actuals" })] }) }), _jsx("th", { className: "px-3 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Payments" }), _jsx("th", { className: "px-3 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Actions" })] }) }), _jsx("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: wallets.map((wallet) => {
+                                    const totals = calculateWalletTotals(wallet);
+                                    return (_jsxs("tr", { className: "hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors", children: [_jsx("td", { className: "px-3 py-3 whitespace-nowrap", children: editingWallet === wallet.wallet ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TextInput, { value: editingName, onChange: (e) => setEditingName(e.target.value), placeholder: "Enter wallet name", className: "flex-1", onKeyDown: (e) => {
+                                                                if (e.key === "Enter") {
+                                                                    handleSaveEditName(wallet.wallet || "");
+                                                                }
+                                                                else if (e.key === "Escape") {
+                                                                    handleCancelEditName();
+                                                                }
+                                                            }, autoFocus: true }), _jsx("button", { onClick: () => handleSaveEditName(wallet.wallet || ""), className: "inline-flex items-center justify-center w-7 h-7 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-md transition-colors", title: "Save", children: _jsx(Check, { size: 14 }) }), _jsx("button", { onClick: handleCancelEditName, className: "inline-flex items-center justify-center w-7 h-7 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900/20 rounded-md transition-colors", title: "Cancel", children: _jsx(X, { size: 14 }) })] })) : (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: wallet.name || "Unnamed Wallet" }), _jsx("button", { onClick: () => handleStartEditName(wallet), className: "inline-flex items-center justify-center w-6 h-6 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors", title: "Edit name", children: _jsx(Pencil, { size: 12 }) }), _jsxs("button", { onClick: () => handleCopyAddress(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 font-mono hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors", title: `Copy address: ${wallet.wallet}`, children: [formatAddress(wallet.wallet || ""), copiedWallet === wallet.wallet ? (_jsx(CheckCheck, { size: 12, className: "text-green-500" })) : (_jsx(Copy, { size: 12 }))] })] })) }), _jsx("td", { className: "px-3 py-3 whitespace-nowrap text-right text-sm", children: totals.actuals === 0 &&
+                                                    (!wallet.billingStatements ||
+                                                        wallet.billingStatements.length === 0) ? (
+                                                // When actuals is 0 and no billing statements, only show the Add Bills button
+                                                _jsx("div", { className: "flex items-center justify-end", children: _jsxs("button", { onClick: () => onAddBillingStatement(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors", title: "Add billing statement for this wallet", children: [_jsx(Plus, { size: 16 }), _jsx("span", { children: "Add Bills" })] }) })) : (
+                                                // When actuals is not 0 or has billing statements, show compact buttons + value horizontally
+                                                _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => onAddBillingStatement(wallet.wallet || ""), className: "inline-flex items-center justify-center w-8 h-8 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors", title: "Add billing statement for this wallet", children: _jsx(Plus, { size: 16 }) }), ((wallet.billingStatements &&
+                                                            wallet.billingStatements.length > 0) ||
+                                                            wallet.accountTransactionsDocumentId) && (_jsx("button", { onClick: () => handleSyncWallet(wallet), disabled: syncingWallet === wallet.wallet, className: `inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${tagChangedWallets.includes(wallet.wallet || "")
+                                                                ? "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 animate-pulse"
+                                                                : outdatedWallets.includes(wallet.wallet || "")
+                                                                    ? "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 animate-pulse"
+                                                                    : "text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700"} disabled:opacity-50 disabled:cursor-not-allowed`, title: tagChangedWallets.includes(wallet.wallet || "")
+                                                                ? "ALERT: Tags have changed - sync required!"
+                                                                : outdatedWallets.includes(wallet.wallet || "")
+                                                                    ? "Sync needed - billing statements updated"
+                                                                    : wallet.accountTransactionsDocumentId
+                                                                        ? "Sync wallet with billing statements and transactions"
+                                                                        : "Sync with latest billing statements", children: _jsx(RefreshCw, { size: 16, className: syncingWallet === wallet.wallet
+                                                                    ? "animate-spin"
+                                                                    : "" }) })), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: formatCurrency(totals.actuals) })] })) }), _jsx("td", { className: "px-3 py-3 whitespace-nowrap text-right text-sm", children: wallet.accountTransactionsDocumentId ? (
+                                                // Show clickable document snippet card when transactions document is linked
+                                                _jsx("button", { onClick: () => setSelectedNode(wallet.accountTransactionsDocumentId), className: "bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 border border-green-200 dark:border-green-800 rounded px-2 py-1 transition-colors text-left", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("svg", { className: "w-3 h-3 text-green-600 dark:text-green-400 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "text-[10px] font-medium text-green-900 dark:text-green-100 block leading-tight", children: "Transactions" }), _jsx("span", { className: "text-xs text-green-600 dark:text-green-400", children: formatCurrency(totals.payments) })] })] }) })) : (
+                                                // Show Add Txns button when no transactions document is linked
+                                                _jsx("div", { className: "flex items-center justify-end", children: _jsxs("button", { onClick: () => handleAddTransactions(wallet), className: "inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-md transition-colors", title: "Add transactions document for this wallet", children: [_jsx(Plus, { size: 16 }), _jsx("span", { children: "Add Txns" })] }) })) }), _jsx("td", { className: "px-3 py-3 whitespace-nowrap text-right text-sm", children: _jsx("div", { className: "flex items-center justify-end gap-2", children: _jsx("button", { onClick: () => handleRemoveWallet(wallet.wallet || ""), className: "inline-flex items-center justify-center w-8 h-8 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors", title: "Remove wallet", children: _jsx(Trash2, { size: 16 }) }) }) })] }, wallet.wallet));
+                                }) })] }) }) })) : (_jsx("div", { className: "text-center py-8 sm:py-12 text-gray-500 dark:text-gray-400", children: _jsx("p", { className: "text-sm", children: "No wallets added yet. Add a wallet to get started." }) })), _jsx("div", { className: "pt-4 border-t border-gray-200 dark:border-gray-700", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "w-full", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Select Account" }), _jsxs("select", { value: selectedAccountId, onChange: (e) => {
+                                        const accountId = e.target.value;
+                                        setSelectedAccountId(accountId);
+                                        setWalletError("");
+                                        // Auto-add wallet when an account is selected
+                                        if (accountId) {
+                                            const selectedAccount = accountEntries.find((acc) => acc.id === accountId);
+                                            if (selectedAccount) {
+                                                // Check if wallet already exists
+                                                const walletExists = wallets.some((w) => w.wallet === selectedAccount.account);
+                                                if (walletExists) {
+                                                    setWalletError("This account is already added to the report");
+                                                    setSelectedAccountId("");
+                                                    return;
+                                                }
+                                                // Add the wallet
+                                                try {
+                                                    dispatch(actions.addWallet({
+                                                        wallet: selectedAccount.account,
+                                                        name: selectedAccount.name || undefined,
+                                                    }));
+                                                    dispatch(actions.updateWallet({
+                                                        address: selectedAccount.account,
+                                                        accountDocumentId: selectedAccount.accountsDocumentId || undefined,
+                                                        accountTransactionsDocumentId: selectedAccount.accountTransactionsId || undefined,
+                                                    }));
+                                                    // Reset selection after adding
+                                                    setSelectedAccountId("");
+                                                }
+                                                catch (error) {
+                                                    console.error("Error adding wallet:", error);
+                                                    setWalletError("Failed to add wallet. Please try again.");
+                                                    setSelectedAccountId("");
+                                                }
+                                            }
+                                        }
+                                    }, className: `w-full px-3 py-2 border rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 ${walletError
+                                        ? "border-red-300 dark:border-red-600"
+                                        : "border-gray-300 dark:border-gray-600"}`, children: [_jsx("option", { value: "", children: "-- Select an account to add --" }), accountEntries.map((acc) => (_jsxs("option", { value: acc.id, children: [acc.name, " (", acc.account?.substring(0, 10), "...", acc.account?.substring(acc.account.length - 4), ")"] }, acc.id)))] }), walletError && (_jsx("div", { className: "mt-2 px-3 py-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md", children: _jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: walletError }) }))] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => {
+                                        setShowManualEntry(!showManualEntry);
+                                        setManualWalletError("");
+                                    }, className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors", children: [showManualEntry ? (_jsx(ChevronUp, { size: 16 })) : (_jsx(ChevronDown, { size: 16 })), _jsx("span", { children: "Add wallet manually" })] }), showManualEntry && (_jsxs("div", { className: "mt-3 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 space-y-3 animate-in slide-in-from-top-2 duration-200", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: ["Wallet Address", _jsx("span", { className: "text-red-500 ml-0.5", children: "*" })] }), _jsx("input", { type: "text", value: manualWalletAddress, onChange: (e) => {
+                                                                setManualWalletAddress(e.target.value);
+                                                                setManualWalletError("");
+                                                            }, placeholder: "0x...", className: `w-full px-3 py-2 border rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors ${manualWalletError
+                                                                ? "border-red-300 dark:border-red-600"
+                                                                : "border-gray-300 dark:border-gray-600"}` }), _jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "Enter a valid Ethereum address (0x + 40 hex characters)" })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: ["Wallet Name", _jsx("span", { className: "text-gray-400 dark:text-gray-500 ml-1 font-normal", children: "(optional)" })] }), _jsx("input", { type: "text", value: manualWalletName, onChange: (e) => setManualWalletName(e.target.value), placeholder: "e.g., Operations Wallet", className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500", onKeyDown: (e) => {
+                                                                if (e.key === "Enter") {
+                                                                    handleAddManualWallet();
+                                                                }
+                                                            } })] })] }), manualWalletError && (_jsx("div", { className: "px-3 py-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md", children: _jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: manualWalletError }) })), _jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx(Button, { onClick: handleAddManualWallet, disabled: !manualWalletAddress.trim() || addingManualWallet, children: addingManualWallet ? "Adding..." : "Add Wallet" }), _jsx("button", { type: "button", onClick: () => {
+                                                        setShowManualEntry(false);
+                                                        setManualWalletAddress("");
+                                                        setManualWalletName("");
+                                                        setManualWalletError("");
+                                                    }, className: "px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors", children: "Cancel" })] })] }))] })] }) }), txProgress.show && (_jsx("div", { className: "fixed bottom-4 right-4 z-50 transition-all duration-300 ease-out", children: _jsx("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 p-4 w-80", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(RefreshCw, { size: 20, className: "animate-spin text-blue-600 dark:text-blue-500 flex-shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: txProgress.step }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Step ", txProgress.current, " of ", txProgress.total] })] })] }), _jsx("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: _jsx("div", { className: "bg-blue-600 dark:bg-blue-500 h-1.5 rounded-full transition-all duration-300 ease-in-out", style: {
+                                        width: `${(txProgress.current / txProgress.total) * 100}%`,
+                                    } }) }), _jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: txProgress.details })] }) }) }))] }));
 }