@compass-labs/widgets 0.1.28 → 0.1.29

package/dist/index.mjs

@@ -6475,7 +6475,7 @@ function useRebalancingData(chainOverride) {
         if (usdValue <= 0) continue;
         balances.push({
           token: symbol,
-          balance: parseFloat(td.balance || "0"),
+          balance: parseFloat(td.balanceFormatted || td.balance_formatted || "0"),
           usdValue
         });
       }
@@ -6924,6 +6924,55 @@ var VENUE_LABELS = {
   aave: "Aave",
   pendle_pt: "Pendle PT"
 };
+function formatPercent(value) {
+  if (value === 0) return "0%";
+  if (Number.isInteger(value)) return `${value}%`;
+  const str = value.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
+  return `${str}%`;
+}
+function PercentInput({ value, onChange }) {
+  const [localValue, setLocalValue] = useState(value.toString());
+  const [isFocused, setIsFocused] = useState(false);
+  if (!isFocused && localValue !== value.toString()) {
+    const parsed = parseFloat(localValue);
+    if (isNaN(parsed) || Math.abs(parsed - value) > 1e-3) {
+      setLocalValue(value.toString());
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      inputMode: "decimal",
+      value: isFocused ? localValue : formatPercent(value).replace("%", ""),
+      onFocus: () => {
+        setIsFocused(true);
+        setLocalValue(value.toString());
+      },
+      onChange: (e) => {
+        const raw = e.target.value;
+        setLocalValue(raw);
+        const parsed = parseFloat(raw);
+        if (!isNaN(parsed)) {
+          onChange(Math.max(0, Math.min(100, parsed)));
+        }
+      },
+      onBlur: () => {
+        setIsFocused(false);
+        const parsed = parseFloat(localValue);
+        if (!isNaN(parsed)) {
+          onChange(Math.max(0, Math.min(100, parsed)));
+        }
+      },
+      className: "w-16 text-center text-xs font-mono rounded bg-transparent outline-none",
+      style: {
+        color: "var(--compass-color-text)",
+        border: "1px solid var(--compass-color-border)",
+        padding: "2px 0"
+      }
+    }
+  );
+}
 function AllocationEditor({
   portfolio,
   targets,
@@ -7060,20 +7109,10 @@ function AllocationEditor({
                     ),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
                       /* @__PURE__ */ jsx(
-                        "input",
+                        PercentInput,
                         {
-                          type: "number",
-                          value: target.targetPercent.toFixed(3),
-                          onChange: (e) => onUpdatePercent(index, parseFloat(e.target.value) || 0),
-                          className: "w-16 text-center text-xs font-mono rounded bg-transparent outline-none",
-                          style: {
-                            color: "var(--compass-color-text)",
-                            border: "1px solid var(--compass-color-border)",
-                            padding: "2px 0"
-                          },
-                          min: 0,
-                          max: 100,
-                          step: 1e-3
+                          value: target.targetPercent,
+                          onChange: (val) => onUpdatePercent(index, val)
                         }
                       ),
                       /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)", width: "12px" }, children: "%" })
@@ -7085,10 +7124,9 @@ function AllocationEditor({
                       className: "text-xs font-mono",
                       style: { color: diff > 0 ? "var(--compass-color-success)" : "var(--compass-color-error)", fontSize: "10px" },
                       children: [
-                        currentPercent.toFixed(3),
-                        "% \u2192 ",
-                        target.targetPercent.toFixed(3),
-                        "%"
+                        formatPercent(currentPercent),
+                        " \u2192 ",
+                        formatPercent(target.targetPercent)
                       ]
                     }
                   ) })
@@ -7130,8 +7168,8 @@ function AllocationEditor({
           color: "var(--compass-color-text-secondary)"
         },
         children: [
-          targetSum.toFixed(3),
-          "% allocated"
+          formatPercent(targetSum),
+          " allocated"
         ]
       }
     ) })
@@ -7288,11 +7326,22 @@ function RebalancingWidget({
   const handleUpdatePercent = useCallback((index, value) => {
     setTargets((prev) => prev.map((t, i) => i === index ? { ...t, targetPercent: Math.max(0, Math.min(100, value)) } : t));
   }, []);
+  const ensureCorrectChain = useCallback(async () => {
+    const targetChainId = EVM_CHAIN_IDS2[CHAIN_ID];
+    if (!targetChainId) return;
+    if (walletChainId !== void 0 && walletChainId !== targetChainId) {
+      if (!switchChain) {
+        throw new Error(`Please switch your wallet to ${CHAIN_ID} (chain ${targetChainId})`);
+      }
+      await switchChain(targetChainId);
+    }
+  }, [walletChainId, switchChain, CHAIN_ID]);
   const handlePreview = useCallback(async () => {
     if (!portfolio || !hasChanges || !address) return;
     setWidgetState("previewing");
     setErrorMessage(null);
     try {
+      await ensureCorrectChain();
       const response = await fetch("/api/compass/rebalance/preview", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -7321,7 +7370,7 @@ function RebalancingWidget({
       setWidgetState("error");
       onError?.(err instanceof Error ? err : new Error("Preview failed"));
     }
-  }, [portfolio, hasChanges, address, CHAIN_ID, targets, defaultSlippage, clientPreview, onError]);
+  }, [portfolio, hasChanges, address, CHAIN_ID, targets, defaultSlippage, clientPreview, onError, ensureCorrectChain]);
   const handleExecute = useCallback(async () => {
     if (!serverPreview?.eip712 || !address) return;
     setWidgetState("signing");
@@ -7368,16 +7417,6 @@ function RebalancingWidget({
     return idleBalance?.balance ?? 0;
   }, [portfolio, selectedToken]);
   const needsSwap = selectedMarket ? selectedToken !== selectedMarket.underlyingToken : false;
-  const ensureCorrectChain = useCallback(async () => {
-    const targetChainId = EVM_CHAIN_IDS2[CHAIN_ID];
-    if (!targetChainId) return;
-    if (walletChainId !== void 0 && walletChainId !== targetChainId) {
-      if (!switchChain) {
-        throw new Error(`Please switch your wallet to ${CHAIN_ID} (chain ${targetChainId})`);
-      }
-      await switchChain(targetChainId);
-    }
-  }, [walletChainId, switchChain, CHAIN_ID]);
   const rawPositionsQuery = useQuery({
     queryKey: ["rebalancingRawPositions", CHAIN_ID, address],
     queryFn: async () => {