@compass-labs/widgets 0.1.27 → 0.1.29

package/dist/index.js

@@ -6477,7 +6477,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
         });
       }
@@ -6759,9 +6759,9 @@ function PortfolioBalanceCard({
   totalIdleUsd,
   idleBalances,
   earnAccountAddress,
-  isPositionsExpanded,
-  onTogglePositions,
+  onViewPositions,
   positionCount,
+  totalEarned = 0,
   showTopUp = true,
   onTopUp
 }) {
@@ -6859,27 +6859,43 @@ function PortfolioBalanceCard({
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              onClick: onTogglePositions,
-              className: "flex items-center justify-between w-full text-left transition-opacity hover:opacity-80",
+              onClick: onViewPositions,
+              disabled: positionCount === 0,
+              className: "flex items-center justify-between w-full text-left transition-opacity hover:opacity-80 disabled:hover:opacity-100 disabled:cursor-default",
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: [
                     "Earning interest",
-                    positionCount > 0 ? ` \xB7 ${positionCount} ${positionCount === 1 ? "position" : "positions"}` : ""
+                    positionCount > 1 ? ` \xB7 ${positionCount} positions` : ""
                   ] }),
-                  positionCount > 0 && (isPositionsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }))
+                  positionCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: "font-semibold",
-                    style: {
-                      color: "var(--compass-color-text)",
-                      fontSize: "1rem"
-                    },
-                    children: formatUSD(earningInterestUsd)
-                  }
-                )
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "font-semibold",
+                      style: {
+                        color: "var(--compass-color-text)",
+                        fontSize: "1rem"
+                      },
+                      children: formatUSD(earningInterestUsd)
+                    }
+                  ),
+                  positionCount > 0 && totalEarned !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      className: "text-sm font-medium",
+                      style: {
+                        color: totalEarned >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)"
+                      },
+                      children: [
+                        totalEarned >= 0 ? "+" : "",
+                        formatUSD(totalEarned)
+                      ]
+                    }
+                  )
+                ] })
               ] })
             }
           )
@@ -6910,6 +6926,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] = react.useState(value.toString());
+  const [isFocused, setIsFocused] = react.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__ */ jsxRuntime.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,
@@ -7046,20 +7111,10 @@ function AllocationEditor({
                     ),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
                       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)", width: "12px" }, children: "%" })
@@ -7071,10 +7126,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)
                       ]
                     }
                   ) })
@@ -7116,8 +7170,8 @@ function AllocationEditor({
           color: "var(--compass-color-text-secondary)"
         },
         children: [
-          targetSum.toFixed(3),
-          "% allocated"
+          formatPercent(targetSum),
+          " allocated"
         ]
       }
     ) })
@@ -7183,7 +7237,8 @@ function RebalancingWidget({
   const [errorMessage, setErrorMessage] = react.useState(null);
   const [txHash, setTxHash] = react.useState(null);
   const [hasInitializedTargets, setHasInitializedTargets] = react.useState(false);
-  const [isPositionsExpanded, setIsPositionsExpanded] = react.useState(false);
+  const [isEarningsModalOpen, setIsEarningsModalOpen] = react.useState(false);
+  const [isAddMarketExpanded, setIsAddMarketExpanded] = react.useState(false);
   const [marketTab, setMarketTab] = react.useState("variable");
   const [selectedMarket, setSelectedMarket] = react.useState(null);
   const [selectedToken, setSelectedToken] = react.useState("USDC");
@@ -7201,7 +7256,7 @@ function RebalancingWidget({
     setErrorMessage(null);
     setTxHash(null);
     setHasInitializedTargets(false);
-    setIsPositionsExpanded(false);
+    setIsAddMarketExpanded(false);
     setSelectedMarket(null);
     setDepositAmount("");
     setDepositError(null);
@@ -7273,11 +7328,22 @@ function RebalancingWidget({
   const handleUpdatePercent = react.useCallback((index, value) => {
     setTargets((prev) => prev.map((t, i) => i === index ? { ...t, targetPercent: Math.max(0, Math.min(100, value)) } : t));
   }, []);
+  const ensureCorrectChain = react.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 = react.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" },
@@ -7306,7 +7372,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 = react.useCallback(async () => {
     if (!serverPreview?.eip712 || !address) return;
     setWidgetState("signing");
@@ -7353,16 +7419,59 @@ function RebalancingWidget({
     return idleBalance?.balance ?? 0;
   }, [portfolio, selectedToken]);
   const needsSwap = selectedMarket ? selectedToken !== selectedMarket.underlyingToken : false;
-  const ensureCorrectChain = react.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 = reactQuery.useQuery({
+    queryKey: ["rebalancingRawPositions", CHAIN_ID, address],
+    queryFn: async () => {
+      if (!address) return [];
+      const response = await fetch(`/api/compass/positions?chain=${CHAIN_ID}&owner=${address}`);
+      if (!response.ok) return [];
+      const data = await response.json();
+      return data.positions || [];
+    },
+    enabled: !!address,
+    staleTime: 3e4
+  });
+  const earningsPositions = react.useMemo(() => {
+    return (rawPositionsQuery.data || []).map((pos, index) => ({
+      id: `pos-${index}`,
+      marketType: pos.protocol,
+      marketName: pos.name,
+      marketId: `${pos.protocol}-${index}`,
+      amount: parseFloat(pos.balance || "0"),
+      token: pos.symbol,
+      apy: pos.apy || 0,
+      performance: parseFloat(pos.pnl?.totalPnl || "0"),
+      pnl: pos.pnl ? {
+        unrealizedPnl: parseFloat(pos.pnl.unrealizedPnl || "0"),
+        realizedPnl: parseFloat(pos.pnl.realizedPnl || "0"),
+        totalPnl: parseFloat(pos.pnl.totalPnl || "0")
+      } : void 0,
+      transactions: [
+        ...(pos.deposits || []).map((d, i) => ({
+          id: `dep-${index}-${i}`,
+          type: "deposit",
+          amount: parseFloat(d.amount || "0"),
+          token: pos.symbol,
+          txHash: d.txHash || "",
+          timestamp: d.timestamp || void 0
+        })),
+        ...(pos.withdrawals || []).map((w, i) => ({
+          id: `wit-${index}-${i}`,
+          type: "withdraw",
+          amount: parseFloat(w.amount || "0"),
+          token: pos.symbol,
+          txHash: w.txHash || "",
+          timestamp: w.timestamp || void 0
+        }))
+      ].sort((a, b) => {
+        if (a.timestamp && b.timestamp) return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
+        if (a.timestamp) return -1;
+        if (b.timestamp) return 1;
+        return 0;
+      })
+    }));
+  }, [rawPositionsQuery.data]);
+  const totalEarned = react.useMemo(() => earningsPositions.reduce((sum, p) => sum + p.performance, 0), [earningsPositions]);
   const buildVenueParamsFromMarket = (market) => {
     switch (market.type) {
       case "aave":
@@ -7617,14 +7726,14 @@ function RebalancingWidget({
                     totalUsd: portfolio.totalUsd,
                     totalIdleUsd: portfolio.totalIdleUsd,
                     idleBalances: portfolio.idleBalances,
-                    isPositionsExpanded,
-                    onTogglePositions: () => setIsPositionsExpanded((prev) => !prev),
+                    onViewPositions: () => setIsEarningsModalOpen(true),
                     positionCount: portfolio.positions.length,
+                    totalEarned,
                     showTopUp,
                     onTopUp: () => earnBalanceRef.current?.openTransferModal()
                   }
                 ),
-                isPositionsExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   AllocationEditor,
                   {
                     portfolio,
@@ -7637,8 +7746,30 @@ function RebalancingWidget({
                     onResetToCurrent: handleResetToCurrent,
                     onEqualSplit: handleEqualSplit
                   }
-                ) }),
-                !isPositionsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => setIsAddMarketExpanded((prev) => !prev),
+                    className: "flex items-center font-medium transition-all hover:opacity-80",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface)",
+                      border: "1px solid var(--compass-color-border)",
+                      color: "var(--compass-color-text-secondary)",
+                      borderRadius: "var(--compass-border-radius-lg)",
+                      padding: "calc(var(--compass-spacing-unit) * 0.75) calc(var(--compass-spacing-unit) * 1)",
+                      gap: "calc(var(--compass-spacing-unit) * 0.5)",
+                      fontSize: "0.8125rem",
+                      width: "100%",
+                      justifyContent: "center"
+                    },
+                    children: [
+                      isAddMarketExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14 }),
+                      isAddMarketExpanded ? "Hide" : "Add new market"
+                    ]
+                  }
+                ),
+                isAddMarketExpanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     MarketSelector,
                     {
@@ -8058,7 +8189,17 @@ function RebalancingWidget({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(EarnAccountBalance, { ref: earnBalanceRef, compact: true, hideVisual: true, onTransferComplete: () => refetch() })
+        /* @__PURE__ */ jsxRuntime.jsx(EarnAccountBalance, { ref: earnBalanceRef, compact: true, hideVisual: true, onTransferComplete: () => refetch() }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EarningsModal,
+          {
+            isOpen: isEarningsModalOpen,
+            onClose: () => setIsEarningsModalOpen(false),
+            positions: earningsPositions,
+            totalEarned,
+            isLoading: rawPositionsQuery.isLoading
+          }
+        )
       ]
     }
   );