@compass-labs/widgets 0.1.35 → 0.1.37

package/dist/index.js

@@ -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"
@@ -7736,13 +7771,18 @@ function WithdrawModal({ isOpen, onClose, initialToken, allowedTokens }) {
 }
 function getPhase2(step) {
   if (step === "idle" || step === "failed") return 0;
-  if (step === "preparing-permit" || step === "signing-permit") return 1;
+  if (step === "approving" || step === "signing-approval") return 1;
   return 2;
 }
+var EVM_CHAIN_IDS3 = {
+  ethereum: 1,
+  base: 8453,
+  arbitrum: 42161
+};
 function TopUpModal({ isOpen, onClose }) {
   const { address, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
-  const { chainId, chain } = useChain();
-  const { creditAccountAddress, isDeployed } = useCreditAccount();
+  const { chainId } = useChain();
+  const { isDeployed } = useCreditAccount();
   const queryClient = reactQuery.useQueryClient();
   const prices = useTokenPrices();
   const token = "USDC";
@@ -7760,13 +7800,14 @@ function TopUpModal({ isOpen, onClose }) {
   react.useEffect(() => {
     return () => clearPolling();
   }, [clearPolling]);
+  const CHAIN_ID = chainId;
   const { data: walletBalance } = reactQuery.useQuery({
-    queryKey: ["walletTokenBalance", chainId, address, token],
+    queryKey: ["walletTokenBalance", CHAIN_ID, address, token],
     queryFn: async () => {
       if (!address) return "0";
       try {
         const res = await fetch(
-          `/api/compass/token/balance?address=${address}&chain=${chainId}&token=${token}`
+          `/api/compass/token/balance?address=${address}&chain=${CHAIN_ID}&token=${token}`
         );
         if (!res.ok) return "0";
         const data = await res.json();
@@ -7792,142 +7833,175 @@ function TopUpModal({ isOpen, onClose }) {
     setTxState({ status: "idle" });
   };
   const isValid = Number(amount) > 0 && !!address && isDeployed;
-  const isBusy = step === "preparing-permit" || step === "signing-permit" || step === "preparing-bundle" || step === "signing-bundle" || step === "broadcasting";
+  const isBusy = step === "approving" || step === "signing-approval" || step === "preparing-transfer" || step === "signing-transfer" || step === "executing";
+  const ensureCorrectChain = react.useCallback(async () => {
+    const targetChainId = EVM_CHAIN_IDS3[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 handleTransfer = async () => {
-    if (!isValid) return;
+    if (!isValid || !signTypedData) return;
+    setTxState({ status: "idle" });
     try {
-      if (switchChain && walletChainId !== chain.viemChain.id) {
-        await switchChain(chain.viemChain.id);
-      }
+      await ensureCorrectChain();
       if (action === "deposit") {
-        setStep("preparing-permit");
+        setStep("approving");
         setTxState({ status: "preparing" });
-        const transferResponse = await fetch("/api/compass/credit/transfer", {
+        const approveResponse = await fetch("/api/compass/transfer/approve", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            chain: chainId,
-            token,
-            amount: Number(amount)
+            chain: CHAIN_ID,
+            token
           })
         });
-        if (!transferResponse.ok) {
-          const errorData = await transferResponse.json();
-          throw new Error(errorData.error || "Failed to prepare permit");
+        if (!approveResponse.ok) {
+          const errData = await approveResponse.json();
+          throw new Error(errData.error || "Failed to check approval");
         }
-        const transferData = await transferResponse.json();
-        const permit2Eip712 = transferData.eip712;
-        setStep("signing-permit");
-        setTxState({ status: "signing" });
-        const permit2Signature = await signTypedData({
-          domain: permit2Eip712.domain,
-          types: {
-            PermitTransferFrom: transferData.normalizedTypes.PermitTransferFrom,
-            TokenPermissions: transferData.normalizedTypes.TokenPermissions
-          },
-          primaryType: "PermitTransferFrom",
-          message: permit2Eip712.message
-        });
-        setStep("preparing-bundle");
+        const approvalData = await approveResponse.json();
+        if (!approvalData.approved) {
+          if (approvalData.requiresTransaction && approvalData.transaction) {
+            setTxState({ status: "broadcasting" });
+            const executeApprovalResponse = await fetch("/api/compass/approval/execute", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                owner: address,
+                chain: CHAIN_ID,
+                transaction: approvalData.transaction
+              })
+            });
+            if (!executeApprovalResponse.ok) {
+              const errData = await executeApprovalResponse.json();
+              throw new Error(errData.error || "Approval transaction failed");
+            }
+          } else if (approvalData.eip712) {
+            setStep("signing-approval");
+            setTxState({ status: "signing" });
+            const approvalSignature = await signTypedData({
+              domain: approvalData.domain,
+              types: approvalData.normalizedTypes,
+              primaryType: "Permit",
+              message: approvalData.message
+            });
+            setTxState({ status: "broadcasting" });
+            const executeApprovalResponse = await fetch("/api/compass/transfer/execute", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                owner: address,
+                chain: CHAIN_ID,
+                eip712: approvalData.eip712,
+                signature: approvalSignature
+              })
+            });
+            if (!executeApprovalResponse.ok) {
+              const errData = await executeApprovalResponse.json();
+              throw new Error(errData.error || "Approval failed");
+            }
+          } else {
+            throw new Error("Unable to approve token for transfers");
+          }
+        }
+        setStep("preparing-transfer");
         setTxState({ status: "preparing" });
-        const bundlePrepareResponse = await fetch("/api/compass/credit/bundle/prepare", {
+        const prepareResponse = await fetch("/api/compass/transfer/prepare", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            chain: chainId,
-            actions: [
-              {
-                actionType: "V2_TRANSFER_FROM_EOA",
-                token,
-                amount: Number(amount),
-                permit2Signature,
-                permit2Nonce: permit2Eip712.message.nonce,
-                permit2Deadline: permit2Eip712.message.deadline
-              }
-            ]
+            chain: CHAIN_ID,
+            token,
+            amount,
+            action: "DEPOSIT",
+            product: "credit"
           })
         });
-        if (!bundlePrepareResponse.ok) {
-          const errorData = await bundlePrepareResponse.json();
-          throw new Error(errorData.error || "Failed to prepare bundle");
+        if (!prepareResponse.ok) {
+          const errData = await prepareResponse.json();
+          throw new Error(errData.error || "Failed to prepare transfer");
         }
-        const { eip712, normalizedTypes, domain, message } = await bundlePrepareResponse.json();
-        setStep("signing-bundle");
+        const prepareData = await prepareResponse.json();
+        setStep("signing-transfer");
         setTxState({ status: "signing" });
-        const safeTxSignature = await signTypedData({
-          domain,
-          types: normalizedTypes,
-          primaryType: "SafeTx",
-          message
+        await ensureCorrectChain();
+        const signature = await signTypedData({
+          domain: prepareData.domain,
+          types: prepareData.normalizedTypes,
+          primaryType: prepareData.primaryType,
+          message: prepareData.message
         });
-        setStep("broadcasting");
+        setStep("executing");
         setTxState({ status: "broadcasting" });
-        const executeResponse = await fetch("/api/compass/credit/bundle/execute", {
+        const executeResponse = await fetch("/api/compass/transfer/execute", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            eip712,
-            signature: safeTxSignature,
-            chain: chainId,
-            creditAccountAddress
+            chain: CHAIN_ID,
+            eip712: prepareData.eip712,
+            signature,
+            product: "credit"
           })
         });
         if (!executeResponse.ok) {
-          const errorData = await executeResponse.json();
-          throw new Error(errorData.error || "Failed to execute");
+          const errData = await executeResponse.json();
+          throw new Error(errData.error || "Transfer failed");
         }
         const { txHash } = await executeResponse.json();
         handleSuccess(txHash);
       } else {
-        setStep("preparing-bundle");
+        setStep("preparing-transfer");
         setTxState({ status: "preparing" });
-        const bundlePrepareResponse = await fetch("/api/compass/credit/bundle/prepare", {
+        const prepareResponse = await fetch("/api/compass/transfer/prepare", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            chain: chainId,
-            actions: [
-              {
-                actionType: "V2_TRANSFER_TO_EOA",
-                token,
-                amount: Number(amount)
-              }
-            ]
+            chain: CHAIN_ID,
+            token,
+            amount,
+            action: "WITHDRAW",
+            product: "credit"
           })
         });
-        if (!bundlePrepareResponse.ok) {
-          const errorData = await bundlePrepareResponse.json();
-          throw new Error(errorData.error || "Failed to prepare withdrawal");
+        if (!prepareResponse.ok) {
+          const errData = await prepareResponse.json();
+          throw new Error(errData.error || "Failed to prepare withdrawal");
         }
-        const { eip712, normalizedTypes, domain, message } = await bundlePrepareResponse.json();
-        setStep("signing-bundle");
+        const prepareData = await prepareResponse.json();
+        setStep("signing-transfer");
         setTxState({ status: "signing" });
-        const safeTxSignature = await signTypedData({
-          domain,
-          types: normalizedTypes,
-          primaryType: "SafeTx",
-          message
+        await ensureCorrectChain();
+        const signature = await signTypedData({
+          domain: prepareData.domain,
+          types: prepareData.normalizedTypes,
+          primaryType: prepareData.primaryType,
+          message: prepareData.message
         });
-        setStep("broadcasting");
+        setStep("executing");
         setTxState({ status: "broadcasting" });
-        const executeResponse = await fetch("/api/compass/credit/bundle/execute", {
+        const executeResponse = await fetch("/api/compass/transfer/execute", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            eip712,
-            signature: safeTxSignature,
-            chain: chainId,
-            creditAccountAddress
+            chain: CHAIN_ID,
+            eip712: prepareData.eip712,
+            signature,
+            product: "credit"
           })
         });
         if (!executeResponse.ok) {
-          const errorData = await executeResponse.json();
-          throw new Error(errorData.error || "Failed to execute withdrawal");
+          const errData = await executeResponse.json();
+          throw new Error(errData.error || "Withdrawal failed");
         }
         const { txHash } = await executeResponse.json();
         handleSuccess(txHash);
@@ -7950,8 +8024,9 @@ function TopUpModal({ isOpen, onClose }) {
       polls++;
       queryClient.invalidateQueries({ queryKey: ["creditBalances"] });
       queryClient.invalidateQueries({ queryKey: ["creditPositions"] });
+      queryClient.invalidateQueries({ queryKey: ["walletTokenBalance"] });
       try {
-        const res = await fetch(`/api/compass/tx/receipt?hash=${txHash}&chain=${chainId}`);
+        const res = await fetch(`/api/compass/tx/receipt?hash=${txHash}&chain=${CHAIN_ID}`);
         const data = await res.json();
         if (data.status === "success") {
           clearPolling();
@@ -7966,23 +8041,23 @@ function TopUpModal({ isOpen, onClose }) {
       }
       if (polls >= 24) {
         clearPolling();
-        setTxState({ status: "confirmed", txHash });
+        setTxState({ status: "failed", error: "Unable to confirm transaction. Please check your wallet for status." });
       }
     }, 5e3);
   };
   const phase = getPhase2(step);
   const buttonLabel = () => {
     switch (step) {
-      case "preparing-permit":
-        return "Preparing approval...";
-      case "signing-permit":
+      case "approving":
+        return "Checking approval...";
+      case "signing-approval":
         return "Sign Approval (1/2)...";
-      case "preparing-bundle":
+      case "preparing-transfer":
         return action === "deposit" ? "Preparing transfer..." : "Preparing withdrawal...";
-      case "signing-bundle":
+      case "signing-transfer":
         return action === "deposit" ? "Sign Transfer (2/2)..." : "Sign Withdrawal...";
-      case "broadcasting":
-        return "Broadcasting...";
+      case "executing":
+        return "Executing...";
       default:
         return null;
     }
@@ -8065,7 +8140,10 @@ function TopUpModal({ isOpen, onClose }) {
           {
             type: "number",
             value: amount,
-            onChange: (e) => setAmount(e.target.value),
+            onChange: (e) => {
+              setAmount(e.target.value);
+              setTxState({ status: "idle" });
+            },
             disabled: isBusy,
             placeholder: "0.00",
             className: "w-full border px-3 py-2.5 pr-14 text-sm focus:outline-none disabled:opacity-50",
@@ -8107,7 +8185,7 @@ function TopUpModal({ isOpen, onClose }) {
         }
       )
     ] }),
-    !isBusy && step !== "confirmed" && step !== "failed" && /* @__PURE__ */ jsxRuntime.jsx(
+    !isBusy && step !== "confirmed" && step !== "failed" && txState.status === "idle" && /* @__PURE__ */ jsxRuntime.jsx(
       "p",
       {
         className: "text-xs",
@@ -8396,7 +8474,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 +8528,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 +8786,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 +8830,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 +8860,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 +8874,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",
                         {
@@ -10686,7 +10814,7 @@ function AllocationEditor({
     ) })
   ] });
 }
-var EVM_CHAIN_IDS3 = {
+var EVM_CHAIN_IDS4 = {
   ethereum: 1,
   base: 8453,
   arbitrum: 42161
@@ -10865,7 +10993,7 @@ function RebalancingWidget({
     setTargets((prev) => prev.map((t, i) => i === index ? { ...t, targetPercent: rounded } : t));
   }, []);
   const ensureCorrectChain = react.useCallback(async () => {
-    const targetChainId = EVM_CHAIN_IDS3[CHAIN_ID];
+    const targetChainId = EVM_CHAIN_IDS4[CHAIN_ID];
     if (!targetChainId) return;
     if (walletChainId !== void 0 && walletChainId !== targetChainId) {
       if (!switchChain) {