npm - @compass-labs/widgets - Versions diffs - 0.1.35 → 0.1.36 - Mend

@compass-labs/widgets 0.1.35 → 0.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.js CHANGED Viewed

@@ -6746,7 +6746,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
                 }
               ),
@@ -7121,11 +7121,11 @@ function DebtPositionCard({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "Borrow APY" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-error)" }, children: formatApy(position.borrowApy) })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-warning, #f59e0b)" }, children: formatApy(position.borrowApy) })
           ] }),
           position.interestPaid !== null && position.interestPaid !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "Interest paid" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--compass-color-error)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--compass-color-text)" }, children: [
               formatNumber(position.interestPaid),
               " ",
               position.symbol
@@ -7287,7 +7287,7 @@ function BorrowModal({ isOpen, onClose, initialToken, allowedTokens }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-4 w-4" }),
           "Borrow"
@@ -7443,7 +7443,7 @@ function RepayModal({ isOpen, onClose, initialToken, allowedTokens }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { className: "h-4 w-4" }),
           "Repay"
@@ -7599,7 +7599,7 @@ function SupplyModal({ isOpen, onClose, initialToken, allowedTokens }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpCircle, { className: "h-4 w-4" }),
           "Supply"
@@ -7613,12 +7613,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] = react.useState(initialToken || "USDC");
   const [amount, setAmount] = react.useState("");
   react.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";
   react.useEffect(() => {
@@ -7673,7 +7681,19 @@ function WithdrawModal({ isOpen, onClose, initialToken, allowedTokens }) {
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm mb-1.5", style: labelStyle, children: "Amount" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm", style: labelStyle, children: "Amount" }),
+          suppliedAmount !== null && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -7695,18 +7715,33 @@ function WithdrawModal({ isOpen, onClose, initialToken, allowedTokens }) {
             }
           )
         ] }),
-        formatUsdEstimate(amount, token, prices) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "p",
-          {
-            className: "text-xs mt-1",
-            style: { color: "var(--compass-color-text-tertiary)" },
-            children: [
-              "\u2248",
-              " ",
-              formatUsdEstimate(amount, token, prices)
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-1", children: [
+          formatUsdEstimate(amount, token, prices) ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "text-xs",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: [
+                "\u2248",
+                " ",
+                formatUsdEstimate(amount, token, prices)
+              ]
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+          suppliedAmount !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "text-xs",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: [
+                "Supplied: ",
+                suppliedAmount.toLocaleString(void 0, { maximumFractionDigits: 4 }),
+                " ",
+                token
+              ]
+            }
+          )
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7724,7 +7759,7 @@ function WithdrawModal({ isOpen, onClose, initialToken, allowedTokens }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownCircle, { className: "h-4 w-4" }),
           "Withdraw"
@@ -8396,7 +8431,7 @@ function CreditSwapModal({ isOpen, onClose }) {
         },
         children: isBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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"
       }
     ),
@@ -8450,8 +8485,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 = (() => {
@@ -8688,15 +8743,28 @@ function CreditAccount({
                       /* @__PURE__ */ jsxRuntime.jsx(CopyableAddress, { address: creditAccountAddress, label: "Credit Account" })
                     ] }),
                     positions && positions.collateralPositions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "text-xs font-medium uppercase tracking-wide",
+                            style: { color: "var(--compass-color-text-tertiary)" },
+                            children: "Collateral"
+                          }
+                        ),
+                        totalInterestEarnedUsd > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                         "div",
                         {
                           className: "flex items-center justify-between p-3 rounded-lg",
@@ -8719,15 +8787,28 @@ function CreditAccount({
                       ))
                     ] }),
                     positions && positions.debtPositions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "text-xs font-medium uppercase tracking-wide",
+                            style: { color: "var(--compass-color-text-tertiary)" },
+                            children: "Debt"
+                          }
+                        ),
+                        totalInterestPaidUsd > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                         "div",
                         {
                           className: "flex items-center justify-between p-3 rounded-lg",
@@ -8736,19 +8817,13 @@ function CreditAccount({
                             border: "1px solid var(--compass-color-border)"
                           },
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-error, #ef4444)" }, children: p.symbol }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: p.symbol }),
                             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-                              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatUsd2(p.usdValue) })
                             ] })
                           ]
                         },
@@ -8756,14 +8831,24 @@ function CreditAccount({
                       ))
                     ] }),
                     balancesWithUsd.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: "text-xs font-medium uppercase tracking-wide",
-                          style: { color: "var(--compass-color-text-tertiary)" },
-                          children: "Available in Account"
-                        }
-                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "text-xs font-medium uppercase tracking-wide",
+                            style: { color: "var(--compass-color-text-tertiary)" },
+                            children: "Available in Account"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "text-sm font-semibold",
+                            style: { color: "var(--compass-color-text)" },
+                            children: formatUsd2(totalIdleUsd)
+                          }
+                        )
+                      ] }),
                       balancesWithUsd.map((b) => /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {