@compass-labs/widgets 0.1.35 → 0.1.36

package/dist/index.mjs

@@ -6744,7 +6744,7 @@ function PositionsView({ allowedCollateralTokens, allowedDebtTokens, onBorrow, o
                 "span",
                 {
                   className: "text-lg font-semibold tabular-nums",
-                  style: { color: debtPositions.length > 0 ? "var(--compass-color-error)" : "var(--compass-color-text)" },
+                  style: { color: "var(--compass-color-text)" },
                   children: totalDebtUsd
                 }
               ),
@@ -7119,11 +7119,11 @@ function DebtPositionCard({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
             /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "Borrow APY" }),
-            /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-error)" }, children: formatApy(position.borrowApy) })
+            /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-warning, #f59e0b)" }, children: formatApy(position.borrowApy) })
           ] }),
           position.interestPaid !== null && position.interestPaid !== void 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
             /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "Interest paid" }),
-            /* @__PURE__ */ jsxs("span", { style: { color: "var(--compass-color-error)" }, children: [
+            /* @__PURE__ */ jsxs("span", { style: { color: "var(--compass-color-text)" }, children: [
               formatNumber(position.interestPaid),
               " ",
               position.symbol
@@ -7285,7 +7285,7 @@ function BorrowModal({ isOpen, onClose, initialToken, allowedTokens }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Sign SafeTx..." : "Broadcasting..."
+          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Signing Borrow..." : "Broadcasting..."
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4" }),
           "Borrow"
@@ -7441,7 +7441,7 @@ function RepayModal({ isOpen, onClose, initialToken, allowedTokens }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Sign SafeTx..." : "Broadcasting..."
+          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Signing Repay..." : "Broadcasting..."
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(ArrowDownLeft, { className: "h-4 w-4" }),
           "Repay"
@@ -7597,7 +7597,7 @@ function SupplyModal({ isOpen, onClose, initialToken, allowedTokens }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Sign SafeTx..." : "Broadcasting..."
+          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Signing Supply..." : "Broadcasting..."
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(ArrowUpCircle, { className: "h-4 w-4" }),
           "Supply"
@@ -7611,12 +7611,20 @@ function WithdrawModal({ isOpen, onClose, initialToken, allowedTokens }) {
   const { address } = useEmbeddableWallet();
   const { isDeployed } = useCreditAccount();
   const { txState, executeBundle, resetState } = useCreditBundle();
+  const { data: positionsData } = useCreditPositions();
   const prices = useTokenPrices();
   const [token, setToken] = useState(initialToken || "USDC");
   const [amount, setAmount] = useState("");
   useEffect(() => {
     if (initialToken) setToken(initialToken);
   }, [initialToken]);
+  const suppliedAmount = (() => {
+    if (!positionsData) return null;
+    const pos = positionsData.collateralPositions.find((p) => p.symbol === token);
+    if (!pos || !pos.amountSupplied) return null;
+    const amt = parseFloat(pos.amountSupplied);
+    return amt > 0 ? amt : null;
+  })();
   const isValid = Number(amount) > 0 && !!address && isDeployed;
   const isBusy = txState.status === "preparing" || txState.status === "signing" || txState.status === "broadcasting";
   useEffect(() => {
@@ -7671,7 +7679,19 @@ function WithdrawModal({ isOpen, onClose, initialToken, allowedTokens }) {
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { className: "block text-sm mb-1.5", style: labelStyle, children: "Amount" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm", style: labelStyle, children: "Amount" }),
+          suppliedAmount !== null && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setAmount(suppliedAmount.toFixed(6).replace(/\.?0+$/, "")),
+              className: "text-xs font-medium transition-opacity hover:opacity-80",
+              style: { color: "var(--compass-color-primary)" },
+              children: "MAX"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -7693,18 +7713,33 @@ function WithdrawModal({ isOpen, onClose, initialToken, allowedTokens }) {
             }
           )
         ] }),
-        formatUsdEstimate(amount, token, prices) && /* @__PURE__ */ jsxs(
-          "p",
-          {
-            className: "text-xs mt-1",
-            style: { color: "var(--compass-color-text-tertiary)" },
-            children: [
-              "\u2248",
-              " ",
-              formatUsdEstimate(amount, token, prices)
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-1", children: [
+          formatUsdEstimate(amount, token, prices) ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "text-xs",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: [
+                "\u2248",
+                " ",
+                formatUsdEstimate(amount, token, prices)
+              ]
+            }
+          ) : /* @__PURE__ */ jsx("span", {}),
+          suppliedAmount !== null && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "text-xs",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: [
+                "Supplied: ",
+                suppliedAmount.toLocaleString(void 0, { maximumFractionDigits: 4 }),
+                " ",
+                token
+              ]
+            }
+          )
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -7722,7 +7757,7 @@ function WithdrawModal({ isOpen, onClose, initialToken, allowedTokens }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Sign SafeTx..." : "Broadcasting..."
+          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Signing Withdraw..." : "Broadcasting..."
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(ArrowDownCircle, { className: "h-4 w-4" }),
           "Withdraw"
@@ -8394,7 +8429,7 @@ function CreditSwapModal({ isOpen, onClose }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
-          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Sign SafeTx..." : "Broadcasting..."
+          txState.status === "preparing" ? "Preparing..." : txState.status === "signing" ? "Signing Swap..." : "Broadcasting..."
         ] }) : "Swap"
       }
     ),
@@ -8448,8 +8483,28 @@ function CreditAccount({
     const price = tokenPrices[b.tokenSymbol];
     const usdValue = amount > 0 && price != null ? amount * price : 0;
     return { ...b, usdValue };
-  }).filter((b) => b.usdValue >= 0.01);
+  }).filter((b) => b.usdValue >= 0.01).sort((a, b) => a.tokenSymbol.localeCompare(b.tokenSymbol));
   const totalIdleUsd = balancesWithUsd.reduce((sum, b) => sum + b.usdValue, 0);
+  const totalInterestEarnedUsd = (() => {
+    if (!positions) return 0;
+    let total = 0;
+    for (const pos of positions.collateralPositions) {
+      const interest = parseFloat(pos.interestEarned ?? "0");
+      const price = tokenPrices[pos.symbol] ?? 0;
+      if (interest > 0 && price > 0) total += interest * price;
+    }
+    return total;
+  })();
+  const totalInterestPaidUsd = (() => {
+    if (!positions) return 0;
+    let total = 0;
+    for (const pos of positions.debtPositions) {
+      const interest = parseFloat(pos.interestPaid ?? "0");
+      const price = tokenPrices[pos.symbol] ?? 0;
+      if (interest > 0 && price > 0) total += interest * price;
+    }
+    return total;
+  })();
   const netPositionUsd = totalCollateral - totalDebt;
   const totalBalance = netPositionUsd + totalIdleUsd;
   const netInterestUsdPerYear = (() => {
@@ -8686,15 +8741,28 @@ function CreditAccount({
                       /* @__PURE__ */ jsx(CopyableAddress, { address: creditAccountAddress, label: "Credit Account" })
                     ] }),
                     positions && positions.collateralPositions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "text-xs font-medium uppercase tracking-wide",
-                          style: { color: "var(--compass-color-text-tertiary)" },
-                          children: "Collateral"
-                        }
-                      ),
-                      positions.collateralPositions.filter((p) => parseFloat(p.usdValue ?? "0") >= 0.01).map((p) => /* @__PURE__ */ jsxs(
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "text-xs font-medium uppercase tracking-wide",
+                            style: { color: "var(--compass-color-text-tertiary)" },
+                            children: "Collateral"
+                          }
+                        ),
+                        totalInterestEarnedUsd > 0 && /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: "text-xs font-medium",
+                            style: { color: "var(--compass-color-success)" },
+                            children: [
+                              "Interest: +",
+                              formatUsd2(totalInterestEarnedUsd)
+                            ]
+                          }
+                        )
+                      ] }),
+                      [...positions.collateralPositions].filter((p) => parseFloat(p.usdValue ?? "0") >= 0.01).sort((a, b) => a.symbol.localeCompare(b.symbol)).map((p) => /* @__PURE__ */ jsxs(
                         "div",
                         {
                           className: "flex items-center justify-between p-3 rounded-lg",
@@ -8717,15 +8785,28 @@ function CreditAccount({
                       ))
                     ] }),
                     positions && positions.debtPositions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "text-xs font-medium uppercase tracking-wide",
-                          style: { color: "var(--compass-color-text-tertiary)" },
-                          children: "Debt"
-                        }
-                      ),
-                      positions.debtPositions.filter((p) => parseFloat(p.usdValue ?? "0") >= 0.01).map((p) => /* @__PURE__ */ jsxs(
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "text-xs font-medium uppercase tracking-wide",
+                            style: { color: "var(--compass-color-text-tertiary)" },
+                            children: "Debt"
+                          }
+                        ),
+                        totalInterestPaidUsd > 0 && /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: "text-xs font-medium",
+                            style: { color: "var(--compass-color-error, #ef4444)" },
+                            children: [
+                              "Interest: -",
+                              formatUsd2(totalInterestPaidUsd)
+                            ]
+                          }
+                        )
+                      ] }),
+                      [...positions.debtPositions].filter((p) => parseFloat(p.usdValue ?? "0") >= 0.01).sort((a, b) => a.symbol.localeCompare(b.symbol)).map((p) => /* @__PURE__ */ jsxs(
                         "div",
                         {
                           className: "flex items-center justify-between p-3 rounded-lg",
@@ -8734,19 +8815,13 @@ function CreditAccount({
                             border: "1px solid var(--compass-color-border)"
                           },
                           children: [
-                            /* @__PURE__ */ jsx("span", { className: "font-medium", style: { color: "var(--compass-color-error, #ef4444)" }, children: p.symbol }),
+                            /* @__PURE__ */ jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: p.symbol }),
                             /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
-                              /* @__PURE__ */ jsxs("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-error, #ef4444)" }, children: [
-                                "-",
-                                parseFloat(p.amountBorrowed ?? "0").toLocaleString(void 0, {
-                                  minimumFractionDigits: 2,
-                                  maximumFractionDigits: 4
-                                })
-                              ] }),
-                              /* @__PURE__ */ jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: [
-                                "-$",
-                                parseFloat(p.usdValue ?? "0").toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                              ] })
+                              /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: parseFloat(p.amountBorrowed ?? "0").toLocaleString(void 0, {
+                                minimumFractionDigits: 2,
+                                maximumFractionDigits: 4
+                              }) }),
+                              /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatUsd2(p.usdValue) })
                             ] })
                           ]
                         },
@@ -8754,14 +8829,24 @@ function CreditAccount({
                       ))
                     ] }),
                     balancesWithUsd.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "text-xs font-medium uppercase tracking-wide",
-                          style: { color: "var(--compass-color-text-tertiary)" },
-                          children: "Available in Account"
-                        }
-                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "text-xs font-medium uppercase tracking-wide",
+                            style: { color: "var(--compass-color-text-tertiary)" },
+                            children: "Available in Account"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "text-sm font-semibold",
+                            style: { color: "var(--compass-color-text)" },
+                            children: formatUsd2(totalIdleUsd)
+                          }
+                        )
+                      ] }),
                       balancesWithUsd.map((b) => /* @__PURE__ */ jsxs(
                         "div",
                         {