@compass-labs/widgets 0.1.38 → 0.1.39

package/dist/index.js

@@ -1160,9 +1160,9 @@ function CopyableAddress({
       title: copied ? "Copied!" : `Copy: ${address}`,
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono", style: { color: "var(--compass-color-text)" }, children: displayAddr }),
-          copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, className: "flex-shrink-0", style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 12, className: "flex-shrink-0", style: { color: "var(--compass-color-text-tertiary)" } })
+          copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, className: "flex-shrink-0", style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 14, className: "flex-shrink-0", style: { color: "var(--compass-color-text-secondary)" } })
         ] })
       ]
     }
@@ -2663,7 +2663,7 @@ function AccountBalancesModal({
     ] })
   ] }) });
 }
-var TRANSFER_TOKENS = ["USDC", "SBC"];
+var TRANSFER_TOKEN = "USDC";
 var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
   compact = false,
   hideVisual = false,
@@ -2671,7 +2671,7 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
 }, ref) {
   const [isModalOpen, setIsModalOpen] = react.useState(false);
   const [activeAction, setActiveAction] = react.useState("deposit");
-  const [selectedToken, setSelectedToken] = react.useState(TRANSFER_TOKENS[0]);
+  const selectedToken = TRANSFER_TOKEN;
   const [amount, setAmount] = react.useState("");
   const [transferState, setTransferState] = react.useState("idle");
   const [statusMessage, setStatusMessage] = react.useState("");
@@ -2697,23 +2697,20 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
     staleTime: 30 * 1e3
   });
   const { data: eoaBalances } = reactQuery.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
@@ -2760,11 +2757,6 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
     }
     return earnBalanceAmounts[selectedToken] || "0";
   };
-  const handleQuickAmount = (percentage) => {
-    const max = parseFloat(getMaxBalance());
-    if (isNaN(max)) return;
-    setAmount(formatAmount(max * percentage));
-  };
   const handleTransfer = react.useCallback(async () => {
     if (!address || !amount || !signTypedData) return;
     setError(null);
@@ -3027,37 +3019,9 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
               {
                 className: "text-sm font-medium mb-1 block",
                 style: { color: "var(--compass-color-text-secondary)" },
-                children: "Token"
+                children: "Amount"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TokenSelector,
-              {
-                tokens: TRANSFER_TOKENS,
-                selectedToken,
-                onSelect: setSelectedToken,
-                balances: activeAction === "deposit" ? eoaBalances : earnBalanceAmounts,
-                disabled: isProcessing
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "label",
-                {
-                  className: "text-sm font-medium",
-                  style: { color: "var(--compass-color-text-secondary)" },
-                  children: "Amount"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: [
-                "Available: ",
-                formatAmount(getMaxBalance()),
-                " ",
-                selectedToken
-              ] })
-            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -3088,28 +3052,27 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
                     {
                       className: "text-sm font-medium",
                       style: { color: "var(--compass-color-text-secondary)" },
-                      children: selectedToken
+                      children: "USDC"
                     }
                   )
                 ]
               }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: [0.25, 0.5, 1].map((pct) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "div",
             {
@@ -3134,7 +3097,7 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
               children: statusMessage
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: handleTransfer,
@@ -3146,10 +3109,14 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
                 borderRadius: "var(--compass-border-radius-lg)",
                 fontFamily: "var(--compass-font-family)"
               },
-              children: [
-                isProcessing && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
-                isProcessing ? "Processing..." : activeAction === "deposit" ? "Deposit to Earn Account" : "Withdraw to Wallet"
-              ]
+              children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
+                " Processing..."
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 16 }),
+                " ",
+                activeAction === "deposit" ? "Transfer to Savings Account" : "Withdraw to Wallet"
+              ] })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5672,31 +5639,7 @@ function EarnAccount({
                         ]
                       }
                     )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
-                  )) })
+                  ] })
                 ]
               }
             ),
@@ -10710,6 +10653,7 @@ function RebalancingWidget({
   const [txHash, setTxHash] = react.useState(null);
   const [txConfirmed, setTxConfirmed] = react.useState(false);
   const [hasInitializedTargets, setHasInitializedTargets] = react.useState(false);
+  const [originalAllocations, setOriginalAllocations] = react.useState({});
   const [isSwapModalOpen, setIsSwapModalOpen] = react.useState(false);
   const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
   const [isAddMarketExpanded, setIsAddMarketExpanded] = react.useState(false);
@@ -10728,6 +10672,7 @@ function RebalancingWidget({
   const earnBalanceRef = react.useRef(null);
   react.useEffect(() => {
     setTargets([]);
+    setOriginalAllocations({});
     setPreviewPlan(null);
     setServerPreview(null);
     setWidgetState("editing");
@@ -10744,15 +10689,21 @@ function RebalancingWidget({
   }, [CHAIN_ID]);
   react.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]);
@@ -10784,15 +10735,21 @@ function RebalancingWidget({
   }, [portfolio, targets, hasChanges, defaultSlippage, minRebalanceThresholdUsd]);
   const handleResetToCurrent = react.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");
@@ -10835,7 +10792,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
         })
@@ -10853,7 +10811,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 = react.useCallback(async () => {
     if (!serverPreview?.eip712 || !address) return;
     setWidgetState("signing");
@@ -11489,11 +11447,7 @@ function RebalancingWidget({
                       clientPreview.warnings.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-col gap-1", children: clientPreview.warnings.map((w, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs", style: { color: "var(--compass-color-warning, #eab308)" }, children: [
                         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { size: 12, className: "flex-shrink-0 mt-0.5" }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { children: w })
-                      ] }, i)) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs mt-2", style: { color: "var(--compass-color-text-tertiary)" }, children: [
-                        "Estimated gas savings: ",
-                        clientPreview.estimatedGasSavings
-                      ] })
+                      ] }, i)) })
                     ]
                   }
                 ),
@@ -11736,46 +11690,8 @@ function RebalancingWidget({
           onClose: () => setIsBalancesModalOpen(false),
           title: "Balance Breakdown",
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "12px" }, children: [
-            address && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.8125rem" }, children: "Wallet" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--compass-color-text)", fontSize: "0.8125rem", fontFamily: "monospace" }, children: [
-                    address.slice(0, 6),
-                    "...",
-                    address.slice(-4)
-                  ] })
-                ]
-              }
-            ),
-            earnAccountAddress && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.8125rem" }, children: "Product Account" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--compass-color-text)", fontSize: "0.8125rem", fontFamily: "monospace" }, children: [
-                    earnAccountAddress.slice(0, 6),
-                    "...",
-                    earnAccountAddress.slice(-4)
-                  ] })
-                ]
-              }
-            ),
+            address && /* @__PURE__ */ jsxRuntime.jsx(CopyableAddress, { address, label: "Wallet" }),
+            earnAccountAddress && /* @__PURE__ */ jsxRuntime.jsx(CopyableAddress, { address: earnAccountAddress, label: "Product Account" }),
             portfolio && portfolio.idleBalances.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",