@compass-labs/widgets 0.1.38 → 0.1.39

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { createContext, forwardRef, useState, useCallback, useImperativeHandle, useContext, useEffect, useRef, useMemo } from 'react';
+import { createContext, forwardRef, useState, useCallback, useImperativeHandle, useContext, useEffect, useMemo, useRef } from 'react';
 import { useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { CompassApiSDK } from '@compass-labs/api-sdk';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { arbitrum, base, mainnet } from 'viem/chains';
-import { Wallet, Loader2, ArrowDownLeft, ArrowUpRight, X, ChevronDown, Check, Copy, LogOut, AlertCircle, ArrowRight, ExternalLink, ArrowDownUp, ArrowLeftRight, CheckCircle, TrendingUp, Plus, Minus, Circle, AlertTriangle, XCircle, TrendingDown, ChevronRight, ArrowUpCircle, ArrowDownCircle, RotateCcw, Equal, ChevronUp, Inbox, Percent, Clock, Calendar } from 'lucide-react';
+import { Wallet, Loader2, ArrowDownLeft, ArrowUpRight, X, Check, Copy, LogOut, ChevronDown, AlertCircle, ArrowRight, ExternalLink, ArrowDownUp, ArrowLeftRight, CheckCircle, TrendingUp, Plus, Minus, Circle, AlertTriangle, XCircle, TrendingDown, ChevronRight, ArrowUpCircle, ArrowDownCircle, RotateCcw, Equal, ChevronUp, Inbox, Percent, Clock, Calendar } from 'lucide-react';
 
 // src/provider/CompassProvider.tsx
 var ApiContext = createContext(null);
@@ -1158,9 +1158,9 @@ function CopyableAddress({
       title: copied ? "Copied!" : `Copy: ${address}`,
       children: [
         label && /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: label }),
-        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-mono", style: { color: "var(--compass-color-text)" }, children: displayAddr }),
-          copied ? /* @__PURE__ */ jsx(Check, { size: 12, className: "flex-shrink-0", style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsx(Copy, { size: 12, className: "flex-shrink-0", style: { color: "var(--compass-color-text-tertiary)" } })
+          copied ? /* @__PURE__ */ jsx(Check, { size: 14, className: "flex-shrink-0", style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsx(Copy, { size: 14, className: "flex-shrink-0", style: { color: "var(--compass-color-text-secondary)" } })
         ] })
       ]
     }
@@ -2661,7 +2661,7 @@ function AccountBalancesModal({
     ] })
   ] }) });
 }
-var TRANSFER_TOKENS = ["USDC", "SBC"];
+var TRANSFER_TOKEN = "USDC";
 var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
   compact = false,
   hideVisual = false,
@@ -2669,7 +2669,7 @@ var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
 }, ref) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [activeAction, setActiveAction] = useState("deposit");
-  const [selectedToken, setSelectedToken] = useState(TRANSFER_TOKENS[0]);
+  const selectedToken = TRANSFER_TOKEN;
   const [amount, setAmount] = useState("");
   const [transferState, setTransferState] = useState("idle");
   const [statusMessage, setStatusMessage] = useState("");
@@ -2695,23 +2695,20 @@ var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
     staleTime: 30 * 1e3
   });
   const { data: eoaBalances } = useQuery({
-    queryKey: ["eoaBalances", chainId, address, TRANSFER_TOKENS.join(",")],
+    queryKey: ["eoaBalances", chainId, address, TRANSFER_TOKEN],
     queryFn: async () => {
       if (!address) return {};
-      const balances = {};
-      for (const token of TRANSFER_TOKENS) {
-        try {
-          const response = await fetch(
-            `/api/compass/token/balance?chain=${chainId}&token=${token}&address=${address}`
-          );
-          if (response.ok) {
-            const data = await response.json();
-            balances[token] = data.balance || "0";
-          }
-        } catch {
+      try {
+        const response = await fetch(
+          `/api/compass/token/balance?chain=${chainId}&token=${TRANSFER_TOKEN}&address=${address}`
+        );
+        if (response.ok) {
+          const data = await response.json();
+          return { [TRANSFER_TOKEN]: data.balance || "0" };
         }
+      } catch {
       }
-      return balances;
+      return {};
     },
     enabled: !!address && activeAction === "deposit",
     staleTime: 30 * 1e3
@@ -2758,11 +2755,6 @@ var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
     }
     return earnBalanceAmounts[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);
@@ -3025,37 +3017,9 @@ var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
               {
                 className: "text-sm font-medium mb-1 block",
                 style: { color: "var(--compass-color-text-secondary)" },
-                children: "Token"
+                children: "Amount"
               }
             ),
-            /* @__PURE__ */ jsx(
-              TokenSelector,
-              {
-                tokens: TRANSFER_TOKENS,
-                selectedToken,
-                onSelect: setSelectedToken,
-                balances: activeAction === "deposit" ? eoaBalances : earnBalanceAmounts,
-                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",
               {
@@ -3086,28 +3050,27 @@ var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
                     {
                       className: "text-sm font-medium",
                       style: { color: "var(--compass-color-text-secondary)" },
-                      children: selectedToken
+                      children: "USDC"
                     }
                   )
                 ]
               }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setAmount(formatAmount(getMaxBalance())),
+                className: "text-xs mt-1",
+                style: { color: "var(--compass-color-primary)", cursor: "pointer", background: "none", border: "none", padding: 0 },
+                children: [
+                  "Available: ",
+                  formatAmount(getMaxBalance()),
+                  " USDC"
+                ]
+              }
             )
           ] }),
-          /* @__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 text-xs font-medium transition-colors",
-              style: {
-                backgroundColor: "var(--compass-color-secondary)",
-                color: "var(--compass-color-text-secondary)",
-                borderRadius: "var(--compass-border-radius-md)"
-              },
-              children: pct === 1 ? "Max" : `${pct * 100}%`
-            },
-            pct
-          )) }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: activeAction === "deposit" ? "Approves the token transfer, then transfers USDC from your wallet into your savings account. Requires 2 signatures." : "Withdraws USDC from your savings account back to your wallet. Requires 1 signature." }),
           error && /* @__PURE__ */ jsx(
             "div",
             {
@@ -3132,7 +3095,7 @@ var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
               children: statusMessage
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "button",
             {
               onClick: handleTransfer,
@@ -3144,10 +3107,14 @@ var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
                 borderRadius: "var(--compass-border-radius-lg)",
                 fontFamily: "var(--compass-font-family)"
               },
-              children: [
-                isProcessing && /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
-                isProcessing ? "Processing..." : activeAction === "deposit" ? "Deposit to Earn Account" : "Withdraw to Wallet"
-              ]
+              children: isProcessing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
+                " Processing..."
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ArrowUpRight, { size: 16 }),
+                " ",
+                activeAction === "deposit" ? "Transfer to Savings Account" : "Withdraw to Wallet"
+              ] })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -5670,31 +5637,7 @@ function EarnAccount({
                         ]
                       }
                     )
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: "flex", style: { gap: "6px", marginTop: activeTab === "deposit" && maxAmount >= 10 ? "8px" : "0" }, children: activeTab === "deposit" && maxAmount > 0 && [10, 20, 30].filter((v) => v <= maxAmount).map((val) => /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => {
-                        setAmount(val.toString());
-                        setError(null);
-                      },
-                      disabled: isProcessing,
-                      className: "text-xs font-medium",
-                      style: {
-                        padding: "4px 12px",
-                        backgroundColor: parseFloat(amount) === val ? "transparent" : "var(--compass-color-surface)",
-                        border: parseFloat(amount) === val ? "1.5px solid var(--compass-color-primary)" : "1.5px solid var(--compass-color-border)",
-                        color: parseFloat(amount) === val ? "var(--compass-color-primary)" : "var(--compass-color-text-secondary)",
-                        borderRadius: "var(--compass-border-radius-xl)",
-                        transition: "all 150ms ease"
-                      },
-                      children: [
-                        "$",
-                        val
-                      ]
-                    },
-                    val
-                  )) })
+                  ] })
                 ]
               }
             ),
@@ -10708,6 +10651,7 @@ function RebalancingWidget({
   const [txHash, setTxHash] = useState(null);
   const [txConfirmed, setTxConfirmed] = useState(false);
   const [hasInitializedTargets, setHasInitializedTargets] = useState(false);
+  const [originalAllocations, setOriginalAllocations] = useState({});
   const [isSwapModalOpen, setIsSwapModalOpen] = useState(false);
   const [isBalancesModalOpen, setIsBalancesModalOpen] = useState(false);
   const [isAddMarketExpanded, setIsAddMarketExpanded] = useState(false);
@@ -10726,6 +10670,7 @@ function RebalancingWidget({
   const earnBalanceRef = useRef(null);
   useEffect(() => {
     setTargets([]);
+    setOriginalAllocations({});
     setPreviewPlan(null);
     setServerPreview(null);
     setWidgetState("editing");
@@ -10742,15 +10687,21 @@ function RebalancingWidget({
   }, [CHAIN_ID]);
   useEffect(() => {
     if (portfolio && portfolio.positions.length > 0 && !hasInitializedTargets && !isLoading) {
+      const origAllocs = {};
       setTargets(
-        portfolio.positions.map((p) => ({
-          venueType: p.venueType,
-          venueAddress: p.venueAddress,
-          venueName: p.venueName,
-          token: p.token,
-          targetPercent: parseFloat(p.allocationPercent.toFixed(2))
-        }))
+        portfolio.positions.map((p) => {
+          const pct = parseFloat(p.allocationPercent.toFixed(2));
+          origAllocs[`${p.venueType}-${p.venueAddress.toLowerCase()}`] = pct;
+          return {
+            venueType: p.venueType,
+            venueAddress: p.venueAddress,
+            venueName: p.venueName,
+            token: p.token,
+            targetPercent: pct
+          };
+        })
       );
+      setOriginalAllocations(origAllocs);
       setHasInitializedTargets(true);
     }
   }, [portfolio, hasInitializedTargets, isLoading]);
@@ -10782,15 +10733,21 @@ function RebalancingWidget({
   }, [portfolio, targets, hasChanges, defaultSlippage, minRebalanceThresholdUsd]);
   const handleResetToCurrent = useCallback(() => {
     if (!portfolio) return;
+    const origAllocs = {};
     setTargets(
-      portfolio.positions.map((p) => ({
-        venueType: p.venueType,
-        venueAddress: p.venueAddress,
-        venueName: p.venueName,
-        token: p.token,
-        targetPercent: parseFloat(p.allocationPercent.toFixed(2))
-      }))
+      portfolio.positions.map((p) => {
+        const pct = parseFloat(p.allocationPercent.toFixed(2));
+        origAllocs[`${p.venueType}-${p.venueAddress.toLowerCase()}`] = pct;
+        return {
+          venueType: p.venueType,
+          venueAddress: p.venueAddress,
+          venueName: p.venueName,
+          token: p.token,
+          targetPercent: pct
+        };
+      })
     );
+    setOriginalAllocations(origAllocs);
     setPreviewPlan(null);
     setServerPreview(null);
     setWidgetState("editing");
@@ -10833,7 +10790,8 @@ function RebalancingWidget({
             venueType: t.venueType === "vault" ? "VAULT" : t.venueType === "aave" ? "AAVE" : "PENDLE_PT",
             venueAddress: t.venueAddress,
             targetPercent: t.targetPercent,
-            token: t.token
+            token: t.token,
+            originalPercent: originalAllocations[`${t.venueType}-${t.venueAddress.toLowerCase()}`] ?? 0
           })),
           slippage: defaultSlippage
         })
@@ -10851,7 +10809,7 @@ function RebalancingWidget({
       setWidgetState("error");
       onError?.(err instanceof Error ? err : new Error("Preview failed"));
     }
-  }, [portfolio, hasChanges, address, CHAIN_ID, targets, defaultSlippage, clientPreview, onError, ensureCorrectChain]);
+  }, [portfolio, hasChanges, address, CHAIN_ID, targets, defaultSlippage, clientPreview, onError, ensureCorrectChain, originalAllocations]);
   const handleExecute = useCallback(async () => {
     if (!serverPreview?.eip712 || !address) return;
     setWidgetState("signing");
@@ -11487,11 +11445,7 @@ function RebalancingWidget({
                       clientPreview.warnings.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-col gap-1", children: clientPreview.warnings.map((w, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", style: { color: "var(--compass-color-warning, #eab308)" }, children: [
                         /* @__PURE__ */ jsx(AlertTriangle, { size: 12, className: "flex-shrink-0 mt-0.5" }),
                         /* @__PURE__ */ jsx("span", { children: w })
-                      ] }, i)) }),
-                      /* @__PURE__ */ jsxs("p", { className: "text-xs mt-2", style: { color: "var(--compass-color-text-tertiary)" }, children: [
-                        "Estimated gas savings: ",
-                        clientPreview.estimatedGasSavings
-                      ] })
+                      ] }, i)) })
                     ]
                   }
                 ),
@@ -11734,46 +11688,8 @@ function RebalancingWidget({
           onClose: () => setIsBalancesModalOpen(false),
           title: "Balance Breakdown",
           children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "12px" }, children: [
-            address && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between",
-                style: {
-                  backgroundColor: "var(--compass-color-surface)",
-                  borderRadius: "var(--compass-border-radius-lg)",
-                  padding: "10px 16px",
-                  border: "1.5px solid var(--compass-color-border)"
-                },
-                children: [
-                  /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.8125rem" }, children: "Wallet" }),
-                  /* @__PURE__ */ jsxs("span", { style: { color: "var(--compass-color-text)", fontSize: "0.8125rem", fontFamily: "monospace" }, children: [
-                    address.slice(0, 6),
-                    "...",
-                    address.slice(-4)
-                  ] })
-                ]
-              }
-            ),
-            earnAccountAddress && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between",
-                style: {
-                  backgroundColor: "var(--compass-color-surface)",
-                  borderRadius: "var(--compass-border-radius-lg)",
-                  padding: "10px 16px",
-                  border: "1.5px solid var(--compass-color-border)"
-                },
-                children: [
-                  /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.8125rem" }, children: "Product Account" }),
-                  /* @__PURE__ */ jsxs("span", { style: { color: "var(--compass-color-text)", fontSize: "0.8125rem", fontFamily: "monospace" }, children: [
-                    earnAccountAddress.slice(0, 6),
-                    "...",
-                    earnAccountAddress.slice(-4)
-                  ] })
-                ]
-              }
-            ),
+            address && /* @__PURE__ */ jsx(CopyableAddress, { address, label: "Wallet" }),
+            earnAccountAddress && /* @__PURE__ */ jsx(CopyableAddress, { address: earnAccountAddress, label: "Product Account" }),
             portfolio && portfolio.idleBalances.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "span",