@compass-labs/widgets 0.1.12 → 0.1.13

package/dist/index.js

@@ -3789,6 +3789,7 @@ function AaveMarketsList({
   ] });
 }
 var CHAIN_ID = "ethereum";
+var SUPPORTED_TOKENS = ["USDC", "USDT", "DAI", "WETH", "SBC", "AUSD"];
 function formatCurrency(amount) {
   if (!amount) return "$0.00";
   const num = typeof amount === "string" ? parseFloat(amount) : amount;
@@ -3825,16 +3826,19 @@ function EarnAccount({
   const { isDeployed } = useEarnAccount();
   const queryClient = reactQuery.useQueryClient();
   const [activeTab, setActiveTab] = react.useState("deposit");
+  const [selectedToken, setSelectedToken] = react.useState("USDC");
   const [amount, setAmount] = react.useState("");
   const [isProcessing, setIsProcessing] = react.useState(false);
   const [error, setError] = react.useState(null);
   const [statusMessage, setStatusMessage] = react.useState("");
+  const [isTokenDropdownOpen, setIsTokenDropdownOpen] = react.useState(false);
   const [isFundModalOpen, setIsFundModalOpen] = react.useState(false);
   const [fundAmount, setFundAmount] = react.useState("");
   const [fundToken, setFundToken] = react.useState("USDC");
   const [isFunding, setIsFunding] = react.useState(false);
   const [fundError, setFundError] = react.useState(null);
   const [fundStatus, setFundStatus] = react.useState("");
+  const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
   const FUND_TOKENS = ["USDC", "DAI"];
   const walletBalanceQuery = reactQuery.useQuery({
     queryKey: ["walletBalance", CHAIN_ID, address, fundToken],
@@ -3870,7 +3874,8 @@ function EarnAccount({
     enabled: !!address && isDeployed,
     staleTime: 30 * 1e3
   });
-  const availableBalance = balancesQuery.data?.balances?.["USDC"]?.balance || "0";
+  const selectedTokenBalance = balancesQuery.data?.balances?.[selectedToken]?.balance || "0";
+  const earnAccountTotalUsd = balancesQuery.data?.totalUsdValue || "0";
   const marketQuery = reactQuery.useQuery({
     queryKey: ["earnAccountUSDC", CHAIN_ID],
     queryFn: async () => {
@@ -3927,10 +3932,10 @@ function EarnAccount({
   const market = marketQuery.data;
   const userPosition = positionQuery.data;
   const depositedBalance = parseFloat(userPosition?.balance || "0");
-  const available = parseFloat(availableBalance);
-  const totalBalance = available + depositedBalance;
-  const earnings = parseFloat(userPosition?.pnl?.totalPnl || "0");
-  const needsSwap = fundToken !== "USDC";
+  const earnAccountTotal = parseFloat(earnAccountTotalUsd);
+  const totalBalance = earnAccountTotal + depositedBalance;
+  const needsActionSwap = selectedToken !== "USDC";
+  const needsFundSwap = fundToken !== "USDC";
   const ensureTokenApproval = async (token) => {
     setFundStatus(`Checking ${token} approval...`);
     const approveResponse = await fetch("/api/compass/transfer/approve", {
@@ -4000,7 +4005,7 @@ function EarnAccount({
     setFundError(null);
     try {
       await ensureTokenApproval(fundToken);
-      if (needsSwap) {
+      if (needsFundSwap) {
         setFundStatus(`Preparing ${fundToken} transfer...`);
         const transferPrepareResponse = await fetch("/api/compass/transfer/prepare", {
           method: "POST",
@@ -4145,55 +4150,193 @@ function EarnAccount({
     } finally {
       setIsFunding(false);
     }
-  }, [address, fundAmount, fundToken, needsSwap, signTypedData, queryClient, balancesQuery]);
+  }, [address, fundAmount, fundToken, needsFundSwap, signTypedData, queryClient, balancesQuery]);
   const handleAction = async () => {
     if (!market || !amount || parseFloat(amount) <= 0 || !address || !signTypedData) return;
     setIsProcessing(true);
     setError(null);
-    setStatusMessage(activeTab === "deposit" ? "Preparing deposit..." : "Preparing withdrawal...");
+    const isDeposit = activeTab === "deposit";
     try {
-      const isDeposit = activeTab === "deposit";
-      const prepareEndpoint = isDeposit ? "/api/compass/deposit/prepare" : "/api/compass/withdraw/prepare";
-      const executeEndpoint = isDeposit ? "/api/compass/deposit/execute" : "/api/compass/withdraw/execute";
-      const prepareResponse = await fetch(prepareEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          owner: address,
-          chain: CHAIN_ID,
-          venueType: "AAVE",
-          token: "USDC",
-          amount
-        })
-      });
-      if (!prepareResponse.ok) {
-        const errData = await prepareResponse.json();
-        throw new Error(errData.error || "Failed to prepare transaction");
-      }
-      const prepareData = await prepareResponse.json();
-      setStatusMessage("Please sign the transaction...");
-      const signature = await signTypedData({
-        domain: prepareData.domain,
-        types: prepareData.normalizedTypes,
-        primaryType: "SafeTx",
-        message: prepareData.message
-      });
-      setStatusMessage("Executing transaction...");
-      const executeResponse = await fetch(executeEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          owner: address,
-          chain: CHAIN_ID,
-          eip712: prepareData.eip712,
-          signature
-        })
-      });
-      if (!executeResponse.ok) {
-        const errData = await executeResponse.json();
-        throw new Error(errData.error || "Transaction failed");
+      let txHash;
+      if (needsActionSwap) {
+        if (isDeposit) {
+          setStatusMessage(`Getting swap quote...`);
+          const quoteResponse = await fetch(
+            `/api/compass/swap/quote?owner=${address}&chain=${CHAIN_ID}&tokenIn=${selectedToken}&tokenOut=USDC&amountIn=${amount}`
+          );
+          if (!quoteResponse.ok) {
+            const errorData = await quoteResponse.json();
+            throw new Error(errorData.error || "Failed to get swap quote");
+          }
+          const quoteData = await quoteResponse.json();
+          const estimatedOutput = quoteData.estimatedAmountOut;
+          if (!estimatedOutput || parseFloat(estimatedOutput) <= 0) {
+            throw new Error("Invalid swap quote - no output amount");
+          }
+          const depositAmount = (parseFloat(estimatedOutput) * 0.99).toString();
+          setStatusMessage(`Preparing swap and deposit...`);
+          const bundleActions = [
+            {
+              body: {
+                actionType: "V2_SWAP",
+                tokenIn: selectedToken,
+                tokenOut: "USDC",
+                amountIn: amount,
+                maxSlippagePercent: 1
+              }
+            },
+            {
+              body: {
+                actionType: "V2_MANAGE",
+                action: "DEPOSIT",
+                venue: { type: "AAVE", token: "USDC" },
+                amount: depositAmount
+              }
+            }
+          ];
+          const prepareResponse = await fetch("/api/compass/bundle/prepare", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              owner: address,
+              chain: CHAIN_ID,
+              actions: bundleActions
+            })
+          });
+          if (!prepareResponse.ok) {
+            const errorData = await prepareResponse.json();
+            throw new Error(errorData.error || "Failed to prepare bundle");
+          }
+          const { eip712, normalizedTypes, domain, message } = await prepareResponse.json();
+          setStatusMessage("Please sign the transaction...");
+          const signature = await signTypedData({
+            domain,
+            types: normalizedTypes,
+            primaryType: "SafeTx",
+            message
+          });
+          setStatusMessage("Executing swap and deposit...");
+          const executeResponse = await fetch("/api/compass/bundle/execute", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              owner: address,
+              eip712,
+              signature,
+              chain: CHAIN_ID
+            })
+          });
+          if (!executeResponse.ok) {
+            const errorData = await executeResponse.json();
+            throw new Error(errorData.error || "Failed to execute bundle");
+          }
+          const result = await executeResponse.json();
+          txHash = result.txHash;
+        } else {
+          setStatusMessage(`Preparing withdraw and swap...`);
+          const bundleActions = [
+            {
+              body: {
+                actionType: "V2_MANAGE",
+                action: "WITHDRAW",
+                venue: { type: "AAVE", token: "USDC" },
+                amount
+              }
+            },
+            {
+              body: {
+                actionType: "V2_SWAP",
+                tokenIn: "USDC",
+                tokenOut: selectedToken,
+                amountIn: amount,
+                maxSlippagePercent: 1
+              }
+            }
+          ];
+          const prepareResponse = await fetch("/api/compass/bundle/prepare", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              owner: address,
+              chain: CHAIN_ID,
+              actions: bundleActions
+            })
+          });
+          if (!prepareResponse.ok) {
+            const errorData = await prepareResponse.json();
+            throw new Error(errorData.error || "Failed to prepare bundle");
+          }
+          const { eip712, normalizedTypes, domain, message } = await prepareResponse.json();
+          setStatusMessage("Please sign the transaction...");
+          const signature = await signTypedData({
+            domain,
+            types: normalizedTypes,
+            primaryType: "SafeTx",
+            message
+          });
+          setStatusMessage("Executing withdraw and swap...");
+          const executeResponse = await fetch("/api/compass/bundle/execute", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              owner: address,
+              eip712,
+              signature,
+              chain: CHAIN_ID
+            })
+          });
+          if (!executeResponse.ok) {
+            const errorData = await executeResponse.json();
+            throw new Error(errorData.error || "Failed to execute bundle");
+          }
+          const result = await executeResponse.json();
+          txHash = result.txHash;
+        }
+      } else {
+        setStatusMessage(isDeposit ? "Preparing deposit..." : "Preparing withdrawal...");
+        const prepareEndpoint = isDeposit ? "/api/compass/deposit/prepare" : "/api/compass/withdraw/prepare";
+        const executeEndpoint = isDeposit ? "/api/compass/deposit/execute" : "/api/compass/withdraw/execute";
+        const prepareResponse = await fetch(prepareEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            chain: CHAIN_ID,
+            venueType: "AAVE",
+            token: "USDC",
+            amount
+          })
+        });
+        if (!prepareResponse.ok) {
+          const errData = await prepareResponse.json();
+          throw new Error(errData.error || "Failed to prepare transaction");
+        }
+        const prepareData = await prepareResponse.json();
+        setStatusMessage("Please sign the transaction...");
+        const signature = await signTypedData({
+          domain: prepareData.domain,
+          types: prepareData.normalizedTypes,
+          primaryType: "SafeTx",
+          message: prepareData.message
+        });
+        setStatusMessage("Executing transaction...");
+        const executeResponse = await fetch(executeEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            chain: CHAIN_ID,
+            eip712: prepareData.eip712,
+            signature
+          })
+        });
+        if (!executeResponse.ok) {
+          const errData = await executeResponse.json();
+          throw new Error(errData.error || "Transaction failed");
+        }
+        const result = await executeResponse.json();
+        txHash = result.txHash;
       }
-      const { txHash } = await executeResponse.json();
       setStatusMessage("Transaction successful!");
       setAmount("");
       queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
@@ -4208,7 +4351,7 @@ function EarnAccount({
         borrowApy: null,
         tvlUsd: null
       };
-      if (activeTab === "deposit") {
+      if (isDeposit) {
         onSupply?.(marketData, amount, txHash || "");
       } else {
         onWithdraw?.(marketData, amount, txHash || "");
@@ -4221,7 +4364,7 @@ function EarnAccount({
       setIsProcessing(false);
     }
   };
-  const maxAmount = activeTab === "deposit" ? available : depositedBalance;
+  const maxAmount = activeTab === "deposit" ? parseFloat(selectedTokenBalance) : depositedBalance;
   if (marketQuery.isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 32, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) });
   }
@@ -4276,28 +4419,39 @@ function EarnAccount({
             padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.25)"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "text-xs font-medium uppercase tracking-wide",
-                  style: { color: "var(--compass-color-text-tertiary)" },
-                  children: "Total Balance"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "font-bold",
-                  style: {
-                    color: "var(--compass-color-text)",
-                    fontSize: compact ? "2rem" : "2.5rem",
-                    lineHeight: "1"
-                  },
-                  children: formatCurrency(totalBalance)
-                }
-              )
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setIsBalancesModalOpen(true),
+                className: "flex flex-col text-left w-full transition-opacity hover:opacity-80",
+                style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "text-xs font-medium uppercase tracking-wide",
+                        style: { color: "var(--compass-color-text-tertiary)" },
+                        children: "Total Balance"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12, style: { color: "var(--compass-color-text-tertiary)" } })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "font-bold",
+                      style: {
+                        color: "var(--compass-color-text)",
+                        fontSize: compact ? "2rem" : "2.5rem",
+                        lineHeight: "1"
+                      },
+                      children: formatCurrency(totalBalance)
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -4354,32 +4508,6 @@ function EarnAccount({
           ]
         }
       ),
-      showPnL && earnings > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "flex items-center justify-between",
-          style: {
-            backgroundColor: "var(--compass-color-surface)",
-            border: "1px solid var(--compass-color-border)",
-            borderRadius: "var(--compass-border-radius-lg)",
-            padding: spacing
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-secondary)" }, children: "Total Earnings" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: "font-semibold",
-                style: { color: "var(--compass-color-success)" },
-                children: [
-                  "+",
-                  formatCurrency(earnings)
-                ]
-              }
-            )
-          ]
-        }
-      ),
       userPosition?.pnl && /* @__PURE__ */ jsxRuntime.jsx(
         PnLSummary,
         {
@@ -4412,6 +4540,7 @@ function EarnAccount({
               {
                 onClick: () => {
                   setActiveTab("deposit");
+                  setSelectedToken("USDC");
                   setError(null);
                 },
                 className: "flex-1 flex items-center justify-center font-medium transition-all",
@@ -4435,6 +4564,7 @@ function EarnAccount({
               {
                 onClick: () => {
                   setActiveTab("withdraw");
+                  setSelectedToken("USDC");
                   setError(null);
                 },
                 className: "flex-1 flex items-center justify-center font-medium transition-all",
@@ -4460,22 +4590,15 @@ function EarnAccount({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex items-center",
+            className: "flex items-center flex-wrap",
             style: {
               backgroundColor: "var(--compass-color-surface)",
               border: "1px solid var(--compass-color-border)",
               borderRadius: "var(--compass-border-radius-lg)",
-              padding: spacing
+              padding: spacing,
+              gap: "calc(var(--compass-spacing-unit) * 0.5)"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "font-medium",
-                  style: { color: "var(--compass-color-text-secondary)", fontSize: compact ? "1.25rem" : "1.5rem", marginRight: "calc(var(--compass-spacing-unit) * 0.25)" },
-                  children: "$"
-                }
-              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -4488,9 +4611,64 @@ function EarnAccount({
                   placeholder: "0.00",
                   disabled: isProcessing,
                   className: "flex-1 font-medium bg-transparent outline-none",
-                  style: { color: "var(--compass-color-text)", fontSize: compact ? "1.25rem" : "1.5rem" }
+                  style: { color: "var(--compass-color-text)", fontSize: compact ? "1.25rem" : "1.5rem", minWidth: 0 }
                 }
               ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", style: { flexShrink: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => setIsTokenDropdownOpen(!isTokenDropdownOpen),
+                    disabled: isProcessing,
+                    className: "flex items-center font-medium",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface-elevated, var(--compass-color-background))",
+                      border: "1px solid var(--compass-color-border)",
+                      color: "var(--compass-color-text)",
+                      borderRadius: "var(--compass-border-radius-md)",
+                      padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
+                      gap: "calc(var(--compass-spacing-unit) * 0.25)",
+                      fontSize: compact ? "0.875rem" : "1rem"
+                    },
+                    children: [
+                      selectedToken,
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: compact ? 14 : 16, style: { color: "var(--compass-color-text-tertiary)" } })
+                    ]
+                  }
+                ),
+                isTokenDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute right-0 mt-1 z-10",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface)",
+                      border: "1px solid var(--compass-color-border)",
+                      borderRadius: "var(--compass-border-radius-lg)",
+                      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                      minWidth: "100px"
+                    },
+                    children: SUPPORTED_TOKENS.map((token) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => {
+                          setSelectedToken(token);
+                          setIsTokenDropdownOpen(false);
+                          setError(null);
+                        },
+                        className: "w-full text-left font-medium transition-colors",
+                        style: {
+                          padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
+                          color: token === selectedToken ? "var(--compass-color-primary)" : "var(--compass-color-text)",
+                          backgroundColor: token === selectedToken ? "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))" : "transparent",
+                          fontSize: compact ? "0.875rem" : "1rem"
+                        },
+                        children: token
+                      },
+                      token
+                    ))
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -4502,7 +4680,8 @@ function EarnAccount({
                     border: "1px solid var(--compass-color-border)",
                     color: "var(--compass-color-text-secondary)",
                     borderRadius: "var(--compass-border-radius-md)",
-                    padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)"
+                    padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
+                    flexShrink: 0
                   },
                   children: "MAX"
                 }
@@ -4510,9 +4689,30 @@ function EarnAccount({
             ]
           }
         ),
+        needsActionSwap && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center text-sm",
+            style: {
+              backgroundColor: "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))",
+              color: "var(--compass-color-primary)",
+              borderRadius: "var(--compass-border-radius-lg)",
+              padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
+              gap: "calc(var(--compass-spacing-unit) * 0.5)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 14 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeTab === "deposit" ? `Swaps ${selectedToken} to USDC, then deposits` : `Withdraws USDC, then swaps to ${selectedToken}` })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", style: { padding: "0 calc(var(--compass-spacing-unit) * 0.25)" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Available balance" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: { color: "var(--compass-color-text-secondary)" }, children: formatCurrency(maxAmount) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: activeTab === "deposit" ? `Available ${selectedToken}` : "Available to withdraw" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", style: { color: "var(--compass-color-text-secondary)" }, children: [
+            formatAmount2(maxAmount),
+            " ",
+            activeTab === "deposit" ? selectedToken : "USDC"
+          ] })
         ] })
       ] }),
       error && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4545,7 +4745,7 @@ function EarnAccount({
           children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: compact ? 16 : 20, className: "animate-spin" }),
             "Processing..."
-          ] }) : activeTab === "deposit" ? "Deposit funds" : "Withdraw funds"
+          ] }) : needsActionSwap ? activeTab === "deposit" ? `Swap & Deposit` : `Withdraw & Swap` : activeTab === "deposit" ? "Deposit funds" : "Withdraw funds"
         }
       ),
       statusMessage && !error && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4666,7 +4866,7 @@ function EarnAccount({
               }
             )
           ] }),
-          needsSwap && /* @__PURE__ */ jsxRuntime.jsxs(
+          needsFundSwap && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: "flex items-center gap-2 p-3 rounded-xl text-sm",
@@ -4778,7 +4978,7 @@ function EarnAccount({
                 "Processing..."
               ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 20 }),
-                needsSwap ? `Swap ${fundToken} & Transfer` : "Transfer to Savings"
+                needsFundSwap ? `Swap ${fundToken} & Transfer` : "Transfer to Savings"
               ] })
             }
           ),
@@ -4792,6 +4992,115 @@ function EarnAccount({
           )
         ] })
       }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ActionModal,
+      {
+        isOpen: isBalancesModalOpen,
+        onClose: () => setIsBalancesModalOpen(false),
+        title: "Balance Breakdown",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+          balancesQuery.data?.balances && Object.keys(balancesQuery.data.balances).length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-xs font-medium uppercase tracking-wide",
+                  style: { color: "var(--compass-color-text-tertiary)" },
+                  children: "Available in Account"
+                }
+              ),
+              Object.entries(balancesQuery.data.balances).map(([symbol, data]) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between p-3 rounded-lg",
+                  style: {
+                    backgroundColor: "var(--compass-color-surface)",
+                    border: "1px solid var(--compass-color-border)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: symbol }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount2(data.balance) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatCurrency(data.usdValue) })
+                    ] })
+                  ]
+                },
+                symbol
+              ))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between pt-2",
+                style: { borderTop: "1px solid var(--compass-color-border)" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: "Subtotal" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: formatCurrency(earnAccountTotalUsd) })
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "text-center py-4",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: "No tokens in account"
+            }
+          ),
+          depositedBalance > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 pt-2", style: { borderTop: "1px solid var(--compass-color-border)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "text-xs font-medium uppercase tracking-wide",
+                style: { color: "var(--compass-color-text-tertiary)" },
+                children: "Earning Interest (Aave)"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between p-3 rounded-lg",
+                style: {
+                  backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
+                  border: "1px solid var(--compass-color-success)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 16, style: { color: "var(--compass-color-success)" } }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: "USDC" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount2(depositedBalance) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-success)" }, children: [
+                      formatAPY3(market?.supplyApy || null),
+                      "% APY"
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between pt-3 mt-2",
+              style: { borderTop: "2px solid var(--compass-color-border)" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: "Total Balance" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "font-bold text-xl",
+                    style: { color: "var(--compass-color-text)" },
+                    children: formatCurrency(totalBalance)
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
     )
   ] });
 }