@compass-labs/widgets 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { createContext, useMemo, useContext, useState, useEffect, useCallback } from 'react';
+import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery } from '@tanstack/react-query';
 import { CompassApiSDK } from '@compass-labs/api-sdk';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { arbitrum, base, mainnet } from 'viem/chains';
-import { Wallet, LogOut, X, ChevronDown, AlertCircle, Loader2, ArrowDownLeft, ArrowUpRight, ExternalLink, Search, TrendingUp, Calendar, ArrowDownUp } from 'lucide-react';
+import { Wallet, LogOut, X, ChevronDown, AlertCircle, ArrowRight, Loader2, ArrowDownLeft, ArrowUpRight, ExternalLink, Search, TrendingUp, Calendar, ArrowDownUp } from 'lucide-react';
 
 // src/provider/CompassProvider.tsx
 var ApiContext = createContext(null);
@@ -1121,7 +1121,7 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
     const prefix = value >= 0 ? "+" : "";
     return `${prefix}${value.toFixed(4)}`;
   };
-  const formatUSD = (value) => {
+  const formatUSD2 = (value) => {
     const usdValue = value * tokenPrice;
     const prefix = usdValue >= 0 ? "+$" : "-$";
     return `${prefix}${Math.abs(usdValue).toFixed(2)}`;
@@ -1198,7 +1198,7 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
                   children: formatPnL(unrealizedPnl)
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(unrealizedPnl) }, children: formatUSD(unrealizedPnl) })
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(unrealizedPnl) }, children: formatUSD2(unrealizedPnl) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
               /* @__PURE__ */ jsx(
@@ -1217,7 +1217,7 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
                   children: formatPnL(realizedPnl)
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(realizedPnl) }, children: formatUSD(realizedPnl) })
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(realizedPnl) }, children: formatUSD2(realizedPnl) })
             ] })
           ] }),
           /* @__PURE__ */ jsxs(
@@ -1242,7 +1242,7 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
                   ] }),
                   /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono", style: { color: pnlColor(totalPnl) }, children: [
                     "(",
-                    formatUSD(totalPnl),
+                    formatUSD2(totalPnl),
                     ")"
                   ] })
                 ] })
@@ -1254,161 +1254,308 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
     )
   ] });
 }
-var CHAINS = {
-  ethereum: {
-    id: "ethereum",
-    name: "Ethereum",
-    viemChain: mainnet,
-    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png"
-  },
-  base: {
-    id: "base",
-    name: "Base",
-    viemChain: base,
-    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/base/info/logo.png"
-  },
-  arbitrum: {
-    id: "arbitrum",
-    name: "Arbitrum",
-    viemChain: arbitrum,
-    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/arbitrum/info/logo.png"
-  }
-};
-var TOKEN_DECIMALS = {
-  USDC: 6,
-  USDT: 6,
-  DAI: 18,
-  ETH: 18,
-  WETH: 18,
-  WBTC: 8,
-  cbBTC: 8
-};
+
+// src/utils/format.ts
+function formatAmount(value) {
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num)) return "0";
+  return parseFloat(num.toFixed(6)).toString();
+}
+function TokenSelector({
+  tokens,
+  selectedToken,
+  onSelect,
+  balances,
+  showBalances = true,
+  disabled = false
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSelect = (token) => {
+    onSelect(token);
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        disabled,
+        className: "flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors min-w-[120px]",
+        style: {
+          backgroundColor: "var(--compass-color-background)",
+          borderColor: isOpen ? "var(--compass-color-primary)" : "var(--compass-color-border)",
+          color: "var(--compass-color-text)",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium flex-1 text-left", children: selectedToken }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: 16,
+              style: {
+                color: "var(--compass-color-text-secondary)",
+                transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 0.2s"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute z-50 mt-1 w-full min-w-[160px] rounded-lg border overflow-y-auto",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderColor: "var(--compass-color-border)",
+          boxShadow: "var(--compass-shadow-lg)",
+          maxHeight: "200px"
+        },
+        children: tokens.map((token) => {
+          const balance = balances?.[token];
+          const isSelected = token === selectedToken;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSelect(token),
+              className: "w-full px-3 py-2 flex items-center justify-between transition-colors",
+              style: {
+                backgroundColor: isSelected ? "var(--compass-color-primary-muted)" : "transparent",
+                color: "var(--compass-color-text)"
+              },
+              onMouseEnter: (e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.backgroundColor = "var(--compass-color-surface-hover)";
+                }
+              },
+              onMouseLeave: (e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: token }),
+                showBalances && balance && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-sm font-mono",
+                    style: { color: "var(--compass-color-text-secondary)" },
+                    children: formatAmount(balance)
+                  }
+                )
+              ]
+            },
+            token
+          );
+        })
+      }
+    )
+  ] });
+}
 function DepositWithdrawForm({
   venueType,
   venueAddress,
-  tokenSymbol,
-  tokenDecimals,
+  venueToken,
+  depositTokens = ["SBC", "AUSD", "USDC", "USDT", "WETH", "DAI"],
   positionBalance = "0",
   onSuccess,
   onError
 }) {
   const [activeTab, setActiveTab] = useState("deposit");
+  const [selectedToken, setSelectedToken] = useState(venueToken);
   const [amount, setAmount] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [statusMessage, setStatusMessage] = useState("");
   const [error, setError] = useState(null);
-  const { address, isConnected, signTypedData, switchChain } = useCompassWallet();
-  const { client } = useEmbeddableApi();
+  const { address, isConnected, signTypedData } = useCompassWallet();
   const { chainId } = useChain();
   const { earnAccountAddress } = useEarnAccount();
   const queryClient = useQueryClient();
-  const chainConfig = CHAINS[chainId];
-  const targetChainId = chainConfig?.viemChain?.id;
+  const needsSwap = activeTab === "deposit" && selectedToken !== venueToken;
   const { data: tokenBalance } = useQuery({
-    queryKey: ["earnAccountTokenBalance", chainId, earnAccountAddress, tokenSymbol],
+    queryKey: ["earnAccountTokenBalance", chainId, earnAccountAddress, selectedToken],
     queryFn: async () => {
       if (!earnAccountAddress) return "0";
       try {
-        const response = await client.token.tokenBalance({
-          chain: chainId,
-          user: earnAccountAddress,
-          token: tokenSymbol
-        });
-        return response.amount || "0";
-      } catch (error2) {
-        console.error("Error fetching earn account token balance:", error2);
+        const response = await fetch(
+          `/api/compass/earn-account/balances?owner=${address}&chain=${chainId}&tokens=${selectedToken}`
+        );
+        if (!response.ok) return "0";
+        const data = await response.json();
+        return data.balances?.[selectedToken] || "0";
+      } catch {
         return "0";
       }
     },
-    enabled: !!earnAccountAddress,
+    enabled: !!earnAccountAddress && !!address,
     staleTime: 10 * 1e3
   });
   const availableBalance = tokenBalance || "0";
   const maxBalance = activeTab === "deposit" ? availableBalance : positionBalance;
-  const handleQuickAmount = useCallback((percentage) => {
-    const max = parseFloat(maxBalance);
-    if (isNaN(max)) return;
-    setAmount((max * percentage).toFixed(tokenDecimals > 6 ? 6 : tokenDecimals));
-  }, [maxBalance, tokenDecimals]);
+  const handleQuickAmount = useCallback(
+    (percentage) => {
+      const max = parseFloat(maxBalance);
+      if (isNaN(max)) return;
+      setAmount(formatAmount(max * percentage));
+    },
+    [maxBalance]
+  );
   const handleSubmit = useCallback(async () => {
     if (!address || !amount) return;
     setIsSubmitting(true);
     setStatusMessage("Preparing transaction...");
     setError(null);
     try {
-      if (switchChain && targetChainId) {
-        setStatusMessage("Checking network...");
-        try {
-          await switchChain(targetChainId);
-        } catch {
-        }
-      }
       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 prepareBody = {
-        amount,
-        token: tokenSymbol,
-        owner: address,
-        chain: chainId,
-        venueType
-      };
-      if (venueType === "VAULT") {
-        prepareBody.vaultAddress = venueAddress;
-      } else if (venueType === "PENDLE_PT") {
-        prepareBody.marketAddress = venueAddress;
-        prepareBody.maxSlippagePercent = 1;
-      }
-      setStatusMessage("Getting transaction data...");
-      const prepareResponse = await fetch(prepareEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(prepareBody)
-      });
-      if (!prepareResponse.ok) {
-        const errorData = await prepareResponse.json();
-        throw new Error(errorData.error || "Failed to prepare transaction");
-      }
-      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 transaction...");
-      const executeResponse = await fetch(executeEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
+      if (isDeposit && needsSwap) {
+        setStatusMessage("Getting swap quote...");
+        const quoteResponse = await fetch(
+          `/api/compass/swap/quote?owner=${address}&chain=${chainId}&tokenIn=${selectedToken}&tokenOut=${venueToken}&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: venueToken,
+              amountIn: amount,
+              maxSlippagePercent: 1
+            }
+          },
+          {
+            body: {
+              actionType: "V2_MANAGE",
+              action: "DEPOSIT",
+              venue: venueType === "VAULT" ? { type: "VAULT", vaultAddress: venueAddress } : venueType === "AAVE" ? { type: "AAVE", token: venueToken } : { type: "PENDLE_PT", marketAddress: venueAddress },
+              amount: depositAmount
+            }
+          }
+        ];
+        const prepareResponse = await fetch("/api/compass/bundle/prepare", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            chain: chainId,
+            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: chainId
+          })
+        });
+        if (!executeResponse.ok) {
+          const errorData = await executeResponse.json();
+          throw new Error(errorData.error || "Failed to execute bundle");
+        }
+        const { txHash } = await executeResponse.json();
+        setStatusMessage("Transaction successful!");
+        onSuccess?.(activeTab, amount, txHash);
+        setAmount("");
+      } else {
+        const prepareEndpoint = isDeposit ? "/api/compass/deposit/prepare" : "/api/compass/withdraw/prepare";
+        const executeEndpoint = isDeposit ? "/api/compass/deposit/execute" : "/api/compass/withdraw/execute";
+        const prepareBody = {
+          amount,
+          token: venueToken,
           owner: address,
-          eip712,
-          signature,
-          chain: chainId
-        })
-      });
-      if (!executeResponse.ok) {
-        const errorData = await executeResponse.json();
-        throw new Error(errorData.error || "Failed to execute transaction");
+          chain: chainId,
+          venueType
+        };
+        if (venueType === "VAULT") {
+          prepareBody.vaultAddress = venueAddress;
+        } else if (venueType === "PENDLE_PT") {
+          prepareBody.marketAddress = venueAddress;
+          prepareBody.maxSlippagePercent = 1;
+        }
+        setStatusMessage("Getting transaction data...");
+        const prepareResponse = await fetch(prepareEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(prepareBody)
+        });
+        if (!prepareResponse.ok) {
+          const errorData = await prepareResponse.json();
+          throw new Error(errorData.error || "Failed to prepare transaction");
+        }
+        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 transaction...");
+        const executeResponse = await fetch(executeEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            eip712,
+            signature,
+            chain: chainId
+          })
+        });
+        if (!executeResponse.ok) {
+          const errorData = await executeResponse.json();
+          throw new Error(errorData.error || "Failed to execute transaction");
+        }
+        const { txHash } = await executeResponse.json();
+        setStatusMessage("Transaction successful!");
+        onSuccess?.(activeTab, amount, txHash);
+        setAmount("");
       }
-      const { txHash } = await executeResponse.json();
-      setStatusMessage("Transaction successful!");
-      onSuccess?.(activeTab, amount, txHash);
-      setAmount("");
       queryClient.invalidateQueries({ queryKey: ["earnAccountTokenBalance"] });
       queryClient.invalidateQueries({ queryKey: ["vaults"] });
-      queryClient.invalidateQueries({ queryKey: ["vaultPositions"] });
       queryClient.invalidateQueries({ queryKey: ["aaveMarkets"] });
-      queryClient.invalidateQueries({ queryKey: ["aavePositions"] });
       queryClient.invalidateQueries({ queryKey: ["pendleMarkets"] });
-      queryClient.invalidateQueries({ queryKey: ["pendlePositions"] });
       setTimeout(() => setStatusMessage(""), 3e3);
-      setTimeout(() => {
-        queryClient.invalidateQueries({ queryKey: ["earnAccountTokenBalance"] });
-        queryClient.invalidateQueries({ queryKey: ["vaults"] });
-        queryClient.invalidateQueries({ queryKey: ["vaultPositions"] });
-      }, 5e3);
     } catch (err) {
       console.error("Transaction failed:", err);
       const errorMessage = err instanceof Error ? err.message : "Transaction failed";
@@ -1421,13 +1568,13 @@ function DepositWithdrawForm({
     address,
     amount,
     chainId,
-    targetChainId,
     activeTab,
+    needsSwap,
+    selectedToken,
+    venueToken,
     venueType,
     venueAddress,
-    tokenSymbol,
     signTypedData,
-    switchChain,
     queryClient,
     onSuccess,
     onError
@@ -1466,6 +1613,7 @@ function DepositWithdrawForm({
           {
             onClick: () => {
               setActiveTab(tab);
+              setSelectedToken(venueToken);
               setError(null);
               setStatusMessage("");
             },
@@ -1480,6 +1628,45 @@ function DepositWithdrawForm({
         ))
       }
     ),
+    activeTab === "deposit" && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "text-sm font-medium mb-1 block",
+          style: { color: "var(--compass-color-text-secondary)" },
+          children: "From Token"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TokenSelector,
+        {
+          tokens: depositTokens,
+          selectedToken,
+          onSelect: setSelectedToken,
+          disabled: isSubmitting
+        }
+      )
+    ] }),
+    needsSwap && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-2 p-2 rounded-lg text-sm",
+        style: {
+          backgroundColor: "var(--compass-color-primary-muted)",
+          color: "var(--compass-color-primary)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(ArrowRight, { size: 14 }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Swaps ",
+            selectedToken,
+            " to ",
+            venueToken,
+            ", then deposits"
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
         /* @__PURE__ */ jsx(
@@ -1492,9 +1679,9 @@ function DepositWithdrawForm({
         ),
         /* @__PURE__ */ jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: [
           "Available: ",
-          parseFloat(maxBalance).toFixed(4),
+          formatAmount(maxBalance),
           " ",
-          tokenSymbol
+          activeTab === "deposit" ? selectedToken : venueToken
         ] })
       ] }),
       /* @__PURE__ */ jsxs(
@@ -1525,7 +1712,7 @@ function DepositWithdrawForm({
               {
                 className: "text-sm font-medium",
                 style: { color: "var(--compass-color-text-secondary)" },
-                children: tokenSymbol
+                children: activeTab === "deposit" ? selectedToken : venueToken
               }
             )
           ]
@@ -1550,8 +1737,8 @@ function DepositWithdrawForm({
       {
         className: "p-3 rounded-lg text-sm",
         style: {
-          backgroundColor: "var(--compass-color-error-muted, rgba(239, 68, 68, 0.1))",
-          color: "var(--compass-color-error, #ef4444)"
+          backgroundColor: "var(--compass-color-error-muted)",
+          color: "var(--compass-color-error)"
         },
         children: error
       }
@@ -1561,8 +1748,8 @@ function DepositWithdrawForm({
       {
         className: "p-3 rounded-lg text-sm text-center",
         style: {
-          backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
-          color: "var(--compass-color-success, #22c55e)"
+          backgroundColor: "var(--compass-color-success-muted)",
+          color: "var(--compass-color-success)"
         },
         children: statusMessage
       }
@@ -1579,7 +1766,7 @@ function DepositWithdrawForm({
         },
         children: [
           isSubmitting && /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
-          isSubmitting ? "Processing..." : activeTab === "deposit" ? "Deposit" : "Withdraw"
+          isSubmitting ? "Processing..." : needsSwap ? `Swap & ${activeTab === "deposit" ? "Deposit" : "Withdraw"}` : activeTab === "deposit" ? "Deposit" : "Withdraw"
         ]
       }
     )
@@ -1887,6 +2074,434 @@ function EarnAccountGuard({
     }
   );
 }
+var DEFAULT_TOKENS = ["SBC", "AUSD", "USDC", "USDT", "WETH", "DAI"];
+var APPROVAL_CACHE_KEY = "compass_approved_tokens";
+function getApprovalCacheKey(chain, owner) {
+  return `${APPROVAL_CACHE_KEY}_${chain}_${owner}`;
+}
+function getCachedApprovals(chain, owner) {
+  try {
+    const key = getApprovalCacheKey(chain, owner);
+    const cached = localStorage.getItem(key);
+    return cached ? new Set(JSON.parse(cached)) : /* @__PURE__ */ new Set();
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function cacheApproval(chain, owner, token) {
+  try {
+    const key = getApprovalCacheKey(chain, owner);
+    const approvals = getCachedApprovals(chain, owner);
+    approvals.add(token);
+    localStorage.setItem(key, JSON.stringify([...approvals]));
+  } catch {
+  }
+}
+function EarnAccountBalance({
+  tokens = DEFAULT_TOKENS,
+  compact = false,
+  onTransferComplete
+}) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [activeAction, setActiveAction] = useState("deposit");
+  const [selectedToken, setSelectedToken] = useState(tokens[0]);
+  const [amount, setAmount] = useState("");
+  const [transferState, setTransferState] = useState("idle");
+  const [statusMessage, setStatusMessage] = useState("");
+  const [error, setError] = useState(null);
+  const { address, isConnected, signTypedData } = useEmbeddableWallet();
+  const { chainId } = useChain();
+  const { earnAccountAddress, isDeployed } = useEarnAccount();
+  const queryClient = useQueryClient();
+  const { data: balanceData, isLoading: balancesLoading } = useQuery({
+    queryKey: ["earnAccountBalances", chainId, address, tokens.join(",")],
+    queryFn: async () => {
+      if (!address) return null;
+      const response = await fetch(
+        `/api/compass/earn-account/balances?owner=${address}&chain=${chainId}&tokens=${tokens.join(",")}`
+      );
+      if (!response.ok) {
+        throw new Error("Failed to fetch balances");
+      }
+      return response.json();
+    },
+    enabled: !!address && isDeployed,
+    staleTime: 30 * 1e3
+  });
+  const { data: eoaBalances } = useQuery({
+    queryKey: ["eoaBalances", chainId, address, tokens.join(",")],
+    queryFn: async () => {
+      if (!address) return {};
+      const balances = {};
+      return balances;
+    },
+    enabled: !!address && activeAction === "deposit",
+    staleTime: 30 * 1e3
+  });
+  const earnBalances = balanceData?.balances || {};
+  Object.values(earnBalances).reduce((sum, bal) => {
+    return sum + parseFloat(bal || "0");
+  }, 0);
+  const resetForm = useCallback(() => {
+    setAmount("");
+    setTransferState("idle");
+    setStatusMessage("");
+    setError(null);
+  }, []);
+  const handleOpenModal = () => {
+    resetForm();
+    setIsModalOpen(true);
+  };
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    resetForm();
+  };
+  const handleActionChange = (action) => {
+    setActiveAction(action);
+    setAmount("");
+    setError(null);
+  };
+  const getMaxBalance = () => {
+    if (activeAction === "deposit") {
+      return eoaBalances?.[selectedToken] || "0";
+    }
+    return earnBalances[selectedToken] || "0";
+  };
+  const handleQuickAmount = (percentage) => {
+    const max = parseFloat(getMaxBalance());
+    if (isNaN(max)) return;
+    setAmount(formatAmount(max * percentage));
+  };
+  const handleTransfer = useCallback(async () => {
+    if (!address || !amount || !signTypedData) return;
+    setError(null);
+    try {
+      if (activeAction === "deposit") {
+        const cachedApprovals = getCachedApprovals(chainId, address);
+        if (!cachedApprovals.has(selectedToken)) {
+          setTransferState("checking_approval");
+          setStatusMessage("Checking token approval...");
+          const approveResponse = await fetch("/api/compass/transfer/approve", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              owner: address,
+              chain: chainId,
+              token: selectedToken
+            })
+          });
+          if (!approveResponse.ok) {
+            const errData = await approveResponse.json();
+            throw new Error(errData.error || "Failed to check approval");
+          }
+          const approvalData = await approveResponse.json();
+          if (!approvalData.approved) {
+            if (approvalData.requiresTransaction) {
+              throw new Error("This token requires a transaction-based approval. Please approve manually.");
+            }
+            setTransferState("awaiting_approval_signature");
+            setStatusMessage("Please sign the approval...");
+            const approvalSignature = await signTypedData({
+              domain: approvalData.domain,
+              types: approvalData.normalizedTypes,
+              primaryType: "Permit",
+              message: approvalData.message
+            });
+            setTransferState("approving");
+            setStatusMessage("Executing approval...");
+            const executeApprovalResponse = await fetch("/api/compass/transfer/execute", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                owner: address,
+                chain: chainId,
+                eip712: approvalData.eip712,
+                signature: approvalSignature
+              })
+            });
+            if (!executeApprovalResponse.ok) {
+              const errData = await executeApprovalResponse.json();
+              throw new Error(errData.error || "Approval failed");
+            }
+          }
+          cacheApproval(chainId, address, selectedToken);
+        }
+      }
+      setTransferState("awaiting_transfer_signature");
+      setStatusMessage("Preparing transfer...");
+      const prepareResponse = await fetch("/api/compass/transfer/prepare", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          token: selectedToken,
+          amount,
+          action: activeAction.toUpperCase()
+        })
+      });
+      if (!prepareResponse.ok) {
+        const errData = await prepareResponse.json();
+        throw new Error(errData.error || "Failed to prepare transfer");
+      }
+      const prepareData = await prepareResponse.json();
+      setStatusMessage("Please sign the transfer...");
+      const transferSignature = await signTypedData({
+        domain: prepareData.domain,
+        types: prepareData.normalizedTypes,
+        primaryType: prepareData.primaryType,
+        message: prepareData.message
+      });
+      setTransferState("transferring");
+      setStatusMessage("Executing transfer...");
+      const executeResponse = await fetch("/api/compass/transfer/execute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          eip712: prepareData.eip712,
+          signature: transferSignature
+        })
+      });
+      if (!executeResponse.ok) {
+        const errData = await executeResponse.json();
+        throw new Error(errData.error || "Transfer failed");
+      }
+      const { txHash } = await executeResponse.json();
+      setTransferState("success");
+      setStatusMessage("Transfer successful!");
+      onTransferComplete?.(activeAction, selectedToken, amount, txHash);
+      queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+      queryClient.invalidateQueries({ queryKey: ["eoaBalances"] });
+      setTimeout(() => {
+        resetForm();
+      }, 2e3);
+    } catch (err) {
+      console.error("Transfer failed:", err);
+      setTransferState("error");
+      setError(err instanceof Error ? err.message : "Transfer failed");
+    }
+  }, [
+    address,
+    amount,
+    activeAction,
+    selectedToken,
+    chainId,
+    signTypedData,
+    queryClient,
+    onTransferComplete,
+    resetForm
+  ]);
+  if (!isConnected) {
+    return null;
+  }
+  const isProcessing = transferState !== "idle" && transferState !== "success" && transferState !== "error";
+  if (!isDeployed) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-center gap-2 rounded-lg border ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderColor: "var(--compass-color-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Wallet, { size: compact ? 14 : 16, style: { color: "var(--compass-color-text-secondary)" } }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${compact ? "text-xs" : "text-sm"}`,
+              style: { color: "var(--compass-color-text-secondary)" },
+              children: "No Earn Account"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleOpenModal,
+        className: `rounded-md font-medium transition-colors ${compact ? "px-2 py-1 text-xs" : "px-3 py-1.5 text-sm"}`,
+        style: {
+          backgroundColor: "var(--compass-color-primary)",
+          color: "var(--compass-color-primary-text)"
+        },
+        children: "Transfer"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActionModal,
+      {
+        isOpen: isModalOpen,
+        onClose: handleCloseModal,
+        title: "Transfer Funds",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex gap-1 p-1 rounded-lg",
+              style: { backgroundColor: "var(--compass-color-background)" },
+              children: ["deposit", "withdraw"].map((action) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleActionChange(action),
+                  disabled: isProcessing,
+                  className: "flex-1 py-2 rounded-md text-sm font-medium capitalize transition-all flex items-center justify-center gap-2",
+                  style: {
+                    backgroundColor: activeAction === action ? "var(--compass-color-surface)" : "transparent",
+                    color: activeAction === action ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
+                  },
+                  children: [
+                    action === "deposit" ? /* @__PURE__ */ jsx(ArrowDownLeft, { size: 14 }) : /* @__PURE__ */ jsx(ArrowUpRight, { size: 14 }),
+                    action
+                  ]
+                },
+                action
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                className: "text-sm font-medium mb-1 block",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: "Token"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TokenSelector,
+              {
+                tokens,
+                selectedToken,
+                onSelect: setSelectedToken,
+                balances: activeAction === "deposit" ? eoaBalances : earnBalances,
+                disabled: isProcessing
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  className: "text-sm font-medium",
+                  style: { color: "var(--compass-color-text-secondary)" },
+                  children: "Amount"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: [
+                "Available: ",
+                formatAmount(getMaxBalance()),
+                " ",
+                selectedToken
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center gap-2 p-3 rounded-lg border",
+                style: {
+                  backgroundColor: "var(--compass-color-background)",
+                  borderColor: "var(--compass-color-border)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "number",
+                      value: amount,
+                      onChange: (e) => {
+                        setAmount(e.target.value);
+                        setError(null);
+                      },
+                      placeholder: "0.00",
+                      disabled: isProcessing,
+                      className: "flex-1 bg-transparent outline-none text-lg font-mono",
+                      style: { color: "var(--compass-color-text)" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-sm font-medium",
+                      style: { color: "var(--compass-color-text-secondary)" },
+                      children: selectedToken
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [0.25, 0.5, 1].map((pct) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => handleQuickAmount(pct),
+              disabled: isProcessing,
+              className: "flex-1 py-1.5 rounded-md text-xs font-medium transition-colors",
+              style: {
+                backgroundColor: "var(--compass-color-secondary)",
+                color: "var(--compass-color-text-secondary)"
+              },
+              children: pct === 1 ? "Max" : `${pct * 100}%`
+            },
+            pct
+          )) }),
+          error && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "p-3 rounded-lg text-sm",
+              style: {
+                backgroundColor: "var(--compass-color-error-muted)",
+                color: "var(--compass-color-error)"
+              },
+              children: error
+            }
+          ),
+          statusMessage && !error && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "p-3 rounded-lg text-sm text-center",
+              style: {
+                backgroundColor: transferState === "success" ? "var(--compass-color-success-muted)" : "var(--compass-color-primary-muted)",
+                color: transferState === "success" ? "var(--compass-color-success)" : "var(--compass-color-primary)"
+              },
+              children: statusMessage
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleTransfer,
+              disabled: isProcessing || !amount || parseFloat(amount) <= 0,
+              className: "w-full py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+              style: {
+                backgroundColor: "var(--compass-color-primary)",
+                color: "var(--compass-color-primary-text)"
+              },
+              children: [
+                isProcessing && /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
+                isProcessing ? "Processing..." : activeAction === "deposit" ? "Deposit to Earn Account" : "Withdraw to Wallet"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-xs text-center",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: "Gas fees are sponsored by Compass"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
 function formatTVL(tvl) {
   if (!tvl) return "$0";
   const num = parseFloat(tvl);
@@ -2101,15 +2716,6 @@ function useVaultsData(options = {}) {
     }
   };
 }
-var TOKEN_DECIMALS2 = {
-  USDC: 6,
-  USDT: 6,
-  DAI: 18,
-  ETH: 18,
-  WETH: 18,
-  WBTC: 8,
-  cbBTC: 8
-};
 function VaultsList({
   showApy = true,
   apyPeriods = ["7d", "30d", "90d"],
@@ -2119,7 +2725,6 @@ function VaultsList({
   showHistory = true,
   showSearch = true,
   showSort = true,
-  actionMode = "modal",
   defaultSort = "apy_7d",
   assetFilter,
   minApy,
@@ -2157,7 +2762,10 @@ function VaultsList({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
       /* @__PURE__ */ jsx(ChainSwitcher, {}),
-      /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(EarnAccountBalance, { compact: true }),
+        /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+      ] })
     ] }),
     (showSearch || showSort) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
       showSearch && /* @__PURE__ */ jsxs(
@@ -2233,7 +2841,7 @@ function VaultsList({
       },
       vault.vaultAddress
     )) }),
-    actionMode === "modal" && selectedVault && /* @__PURE__ */ jsx(
+    selectedVault && /* @__PURE__ */ jsx(
       ActionModal,
       {
         isOpen: !!selectedVault,
@@ -2261,8 +2869,7 @@ function VaultsList({
             {
               venueType: "VAULT",
               venueAddress: selectedVault.vaultAddress,
-              tokenSymbol: selectedVault.assetSymbol,
-              tokenDecimals: TOKEN_DECIMALS2[selectedVault.assetSymbol] || 18,
+              venueToken: selectedVault.assetSymbol,
               positionBalance: selectedVault.userPosition?.balance,
               onSuccess: handleActionSuccess
             }
@@ -2362,15 +2969,6 @@ function useAaveData(options = {}) {
     }
   };
 }
-var TOKEN_DECIMALS3 = {
-  USDC: 6,
-  USDT: 6,
-  DAI: 18,
-  ETH: 18,
-  WETH: 18,
-  WBTC: 8,
-  cbBTC: 8
-};
 function formatAPY2(apy) {
   if (!apy) return "0.00%";
   const num = parseFloat(apy);
@@ -2394,7 +2992,6 @@ function AaveMarketsList({
   showSearch = true,
   showSort = false,
   // Only one sort option (APY), so hide by default
-  actionMode = "modal",
   defaultSort = "supply_apy",
   assetFilter,
   onMarketSelect,
@@ -2427,7 +3024,10 @@ function AaveMarketsList({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
       /* @__PURE__ */ jsx(ChainSwitcher, {}),
-      /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(EarnAccountBalance, { compact: true }),
+        /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+      ] })
     ] }),
     (showSearch || showSort) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
       showSearch && /* @__PURE__ */ jsxs(
@@ -2579,7 +3179,7 @@ function AaveMarketsList({
         market.marketAddress
       );
     }) }),
-    actionMode === "modal" && selectedMarket && /* @__PURE__ */ jsx(
+    selectedMarket && /* @__PURE__ */ jsx(
       ActionModal,
       {
         isOpen: !!selectedMarket,
@@ -2607,8 +3207,7 @@ function AaveMarketsList({
             {
               venueType: "AAVE",
               venueAddress: selectedMarket.marketAddress,
-              tokenSymbol: selectedMarket.underlyingSymbol,
-              tokenDecimals: TOKEN_DECIMALS3[selectedMarket.underlyingSymbol] || 18,
+              venueToken: selectedMarket.underlyingSymbol,
               positionBalance: selectedMarket.userPosition?.balance,
               onSuccess: handleActionSuccess
             }
@@ -2711,15 +3310,6 @@ function usePendleData(options = {}) {
     }
   };
 }
-var TOKEN_DECIMALS4 = {
-  USDC: 6,
-  USDT: 6,
-  DAI: 18,
-  ETH: 18,
-  WETH: 18,
-  WBTC: 8,
-  cbBTC: 8
-};
 function formatAPY3(apy) {
   if (!apy) return "0.00%";
   return `${parseFloat(apy).toFixed(2)}%`;
@@ -2745,7 +3335,6 @@ function PendleMarketsList({
   showHistory = true,
   showSearch = true,
   showSort = true,
-  actionMode = "modal",
   defaultSort = "fixed_apy",
   assetFilter,
   onMarketSelect,
@@ -2778,7 +3367,10 @@ function PendleMarketsList({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
       /* @__PURE__ */ jsx(ChainSwitcher, {}),
-      /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(EarnAccountBalance, { compact: true }),
+        /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+      ] })
     ] }),
     (showSearch || showSort) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
       showSearch && /* @__PURE__ */ jsxs(
@@ -2956,7 +3548,7 @@ function PendleMarketsList({
         market.marketAddress
       );
     }) }),
-    actionMode === "modal" && selectedMarket && /* @__PURE__ */ jsx(
+    selectedMarket && /* @__PURE__ */ jsx(
       ActionModal,
       {
         isOpen: !!selectedMarket,
@@ -2984,8 +3576,7 @@ function PendleMarketsList({
             {
               venueType: "PENDLE_PT",
               venueAddress: selectedMarket.marketAddress,
-              tokenSymbol: selectedMarket.underlyingSymbol,
-              tokenDecimals: TOKEN_DECIMALS4[selectedMarket.underlyingSymbol] || 18,
+              venueToken: selectedMarket.underlyingSymbol,
               positionBalance: selectedMarket.userPosition?.balance,
               onSuccess: handleActionSuccess
             }
@@ -3032,12 +3623,12 @@ function useSwapQuote({ fromToken, toToken, amount, enabled = true }) {
     refetch: query.refetch
   };
 }
-var DEFAULT_TOKENS = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT"];
+var DEFAULT_TOKENS2 = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT"];
 function SwapWidget({
   layout = "full",
   defaultFromToken = "ETH",
   defaultToToken = "USDC",
-  allowedTokens = DEFAULT_TOKENS,
+  allowedTokens = DEFAULT_TOKENS2,
   showReverseButton = true,
   showSettings = false,
   showPriceImpact = true,
@@ -3293,7 +3884,27 @@ function CompassEarnWidget({
     ] })
   ] });
 }
+var CHAINS = {
+  ethereum: {
+    id: "ethereum",
+    name: "Ethereum",
+    viemChain: mainnet,
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png"
+  },
+  base: {
+    id: "base",
+    name: "Base",
+    viemChain: base,
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/base/info/logo.png"
+  },
+  arbitrum: {
+    id: "arbitrum",
+    name: "Arbitrum",
+    viemChain: arbitrum,
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/arbitrum/info/logo.png"
+  }
+};
 
-export { AaveMarketsList, ActionModal, ApiProvider, CHAINS, ChainSwitcher, CompassEarnWidget, CompassProvider, DepositWithdrawForm, EarnAccountGuard, PendleMarketsList, PnLSummary, SwapWidget, TOKEN_DECIMALS, ThemeProvider, TransactionHistory, VaultsList, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
+export { AaveMarketsList, ActionModal, ApiProvider, CHAINS, ChainSwitcher, CompassEarnWidget, CompassProvider, DepositWithdrawForm, EarnAccountBalance, EarnAccountGuard, PendleMarketsList, PnLSummary, SwapWidget, ThemeProvider, TransactionHistory, VaultsList, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map