@compass-labs/widgets 0.1.27 → 0.1.28

package/dist/index.mjs

@@ -6757,9 +6757,9 @@ function PortfolioBalanceCard({
   totalIdleUsd,
   idleBalances,
   earnAccountAddress,
-  isPositionsExpanded,
-  onTogglePositions,
+  onViewPositions,
   positionCount,
+  totalEarned = 0,
   showTopUp = true,
   onTopUp
 }) {
@@ -6857,27 +6857,43 @@ function PortfolioBalanceCard({
           /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
                   /* @__PURE__ */ 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__ */ jsx(ChevronDown, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }))
+                  positionCount > 0 && /* @__PURE__ */ jsx(ChevronRight, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
                 ] }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "font-semibold",
-                    style: {
-                      color: "var(--compass-color-text)",
-                      fontSize: "1rem"
-                    },
-                    children: formatUSD(earningInterestUsd)
-                  }
-                )
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "font-semibold",
+                      style: {
+                        color: "var(--compass-color-text)",
+                        fontSize: "1rem"
+                      },
+                      children: formatUSD(earningInterestUsd)
+                    }
+                  ),
+                  positionCount > 0 && totalEarned !== 0 && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "text-sm font-medium",
+                      style: {
+                        color: totalEarned >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)"
+                      },
+                      children: [
+                        totalEarned >= 0 ? "+" : "",
+                        formatUSD(totalEarned)
+                      ]
+                    }
+                  )
+                ] })
               ] })
             }
           )
@@ -7181,7 +7197,8 @@ function RebalancingWidget({
   const [errorMessage, setErrorMessage] = useState(null);
   const [txHash, setTxHash] = useState(null);
   const [hasInitializedTargets, setHasInitializedTargets] = useState(false);
-  const [isPositionsExpanded, setIsPositionsExpanded] = useState(false);
+  const [isEarningsModalOpen, setIsEarningsModalOpen] = useState(false);
+  const [isAddMarketExpanded, setIsAddMarketExpanded] = useState(false);
   const [marketTab, setMarketTab] = useState("variable");
   const [selectedMarket, setSelectedMarket] = useState(null);
   const [selectedToken, setSelectedToken] = useState("USDC");
@@ -7199,7 +7216,7 @@ function RebalancingWidget({
     setErrorMessage(null);
     setTxHash(null);
     setHasInitializedTargets(false);
-    setIsPositionsExpanded(false);
+    setIsAddMarketExpanded(false);
     setSelectedMarket(null);
     setDepositAmount("");
     setDepositError(null);
@@ -7361,6 +7378,59 @@ function RebalancingWidget({
       await switchChain(targetChainId);
     }
   }, [walletChainId, switchChain, CHAIN_ID]);
+  const rawPositionsQuery = 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 = 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 = useMemo(() => earningsPositions.reduce((sum, p) => sum + p.performance, 0), [earningsPositions]);
   const buildVenueParamsFromMarket = (market) => {
     switch (market.type) {
       case "aave":
@@ -7615,14 +7685,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__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(
                   AllocationEditor,
                   {
                     portfolio,
@@ -7635,8 +7705,30 @@ function RebalancingWidget({
                     onResetToCurrent: handleResetToCurrent,
                     onEqualSplit: handleEqualSplit
                   }
-                ) }),
-                !isPositionsExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+                ),
+                /* @__PURE__ */ 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__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(Plus, { size: 14 }),
+                      isAddMarketExpanded ? "Hide" : "Add new market"
+                    ]
+                  }
+                ),
+                isAddMarketExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     MarketSelector,
                     {
@@ -8056,7 +8148,17 @@ function RebalancingWidget({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(EarnAccountBalance, { ref: earnBalanceRef, compact: true, hideVisual: true, onTransferComplete: () => refetch() })
+        /* @__PURE__ */ jsx(EarnAccountBalance, { ref: earnBalanceRef, compact: true, hideVisual: true, onTransferComplete: () => refetch() }),
+        /* @__PURE__ */ jsx(
+          EarningsModal,
+          {
+            isOpen: isEarningsModalOpen,
+            onClose: () => setIsEarningsModalOpen(false),
+            positions: earningsPositions,
+            totalEarned,
+            isLoading: rawPositionsQuery.isLoading
+          }
+        )
       ]
     }
   );