@compass-labs/widgets 0.1.52 → 0.1.53

package/dist/index.d.mts

@@ -964,7 +964,7 @@ interface SwapFormProps {
 declare function SwapForm({ availableFromTokens, availableToTokens, balances, defaultFromToken, defaultToToken, onSwapSuccess, onSwapError, }: SwapFormProps): react_jsx_runtime.JSX.Element;
 
 interface CreditEvent {
-    eventType: 'supply' | 'withdraw' | 'borrow' | 'repay' | 'liquidation';
+    eventType: 'supply' | 'withdraw' | 'borrow' | 'repay' | 'liquidation' | 'transfer_in' | 'transfer_out';
     blockNumber: number;
     blockTimestamp: string;
     transactionHash: string;

package/dist/index.d.ts

@@ -964,7 +964,7 @@ interface SwapFormProps {
 declare function SwapForm({ availableFromTokens, availableToTokens, balances, defaultFromToken, defaultToToken, onSwapSuccess, onSwapError, }: SwapFormProps): react_jsx_runtime.JSX.Element;
 
 interface CreditEvent {
-    eventType: 'supply' | 'withdraw' | 'borrow' | 'repay' | 'liquidation';
+    eventType: 'supply' | 'withdraw' | 'borrow' | 'repay' | 'liquidation' | 'transfer_in' | 'transfer_out';
     blockNumber: number;
     blockTimestamp: string;
     transactionHash: string;

package/dist/index.js

@@ -4634,6 +4634,14 @@ function formatCurrency(amount) {
     maximumFractionDigits: 2
   }).format(amount);
 }
+function formatTokenAmount(num) {
+  if (num === 0) return "0";
+  const abs = Math.abs(num);
+  const decimals = abs >= 1 ? 2 : Math.max(2, -Math.floor(Math.log10(abs)) + 1);
+  const factor = Math.pow(10, decimals);
+  const floored = Math.floor(abs * factor) / factor;
+  return floored.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: decimals });
+}
 function PositionCard({ position, chainId }) {
   const [isHistoryExpanded, setIsHistoryExpanded] = react.useState(false);
   const formatShortDate = (dateStr) => {
@@ -4658,7 +4666,7 @@ function PositionCard({ position, chainId }) {
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, color: "var(--compass-color-text)", fontSize: "0.9375rem" }, children: position.marketName }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.75rem" }, children: [
-              position.amount.toLocaleString(),
+              formatTokenAmount(position.amount),
               " ",
               position.token
             ] })
@@ -4776,7 +4784,7 @@ function PositionCard({ position, chainId }) {
                   color: tx.type === "deposit" ? "var(--compass-color-success)" : "var(--compass-color-error)"
                 }, children: [
                   tx.type === "deposit" ? "+" : "-",
-                  tx.amount,
+                  formatTokenAmount(tx.amount),
                   " ",
                   tx.token
                 ] }),
@@ -4974,6 +4982,13 @@ function formatCurrency2(amount) {
     maximumFractionDigits: 2
   }).format(floored);
 }
+function formatAmount2(value) {
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num) || num === 0) return "0.00";
+  const abs = Math.abs(num);
+  const decimals = abs >= 1 ? 2 : Math.max(2, -Math.floor(Math.log10(abs)) + 1);
+  return truncate2(num, decimals);
+}
 function EarnAccount({
   showHeader = true,
   showInterestRate = true,
@@ -6531,7 +6546,7 @@ function EarnAccount({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, marginRight: "12px" }, children: symbol }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", style: { flexShrink: 0 }, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem", whiteSpace: "nowrap" }, children: truncate2(parseFloat(data.balance), 2) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem", whiteSpace: "nowrap" }, children: formatAmount2(data.balance) }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.75rem", whiteSpace: "nowrap" }, children: formatCurrency2(data.usdValue) })
                   ] })
                 ]
@@ -6590,7 +6605,7 @@ function EarnAccount({
       {
         isOpen: isEarningsModalOpen,
         onClose: () => setIsEarningsModalOpen(false),
-        positions,
+        positions: [...positions].sort((a, b) => b.performance - a.performance || b.amount - a.amount),
         totalEarned,
         isLoading: positionQuery.isLoading,
         chainId: CHAIN_ID
@@ -6861,12 +6876,14 @@ function formatUsd(value) {
   const floored = floorTo(num, 2);
   return `$${floored.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
 }
-function formatNumber(value, decimals = 2) {
+function formatNumber(value, minSignificant = 2) {
   if (value === null) return "-";
   const num = parseFloat(value);
-  if (isNaN(num)) return "-";
-  if (Math.abs(num) < 0.01 && num !== 0) return "<0.01";
+  if (isNaN(num) || num === 0) return "0";
+  const abs = Math.abs(num);
+  const decimals = abs >= 1 ? 2 : Math.max(2, -Math.floor(Math.log10(abs)) + (minSignificant - 1));
   const floored = floorTo(num, decimals);
+  if (floored === 0 && num !== 0) return num > 0 ? "<0.01" : ">-0.01";
   return floored.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: decimals });
 }
 function formatApy(value) {
@@ -6901,7 +6918,9 @@ var EVENT_CONFIG = {
   withdraw: { label: "Withdraw", color: "var(--compass-color-warning)", mutedColor: "var(--compass-color-warning-muted)", icon: "out", sign: "-" },
   borrow: { label: "Borrow", color: "var(--compass-color-success)", mutedColor: "var(--compass-color-success-muted)", icon: "in", sign: "+" },
   repay: { label: "Repay", color: "var(--compass-color-warning)", mutedColor: "var(--compass-color-warning-muted)", icon: "out", sign: "-" },
-  liquidation: { label: "Liquidation", color: "var(--compass-color-error)", mutedColor: "var(--compass-color-error-muted, rgba(239,68,68,0.1))", icon: "out", sign: "-" }
+  liquidation: { label: "Liquidation", color: "var(--compass-color-error)", mutedColor: "var(--compass-color-error-muted, rgba(239,68,68,0.1))", icon: "out", sign: "-" },
+  transfer_in: { label: "Transfer In", color: "var(--compass-color-success)", mutedColor: "var(--compass-color-success-muted)", icon: "in", sign: "+" },
+  transfer_out: { label: "Transfer Out", color: "var(--compass-color-warning)", mutedColor: "var(--compass-color-warning-muted)", icon: "out", sign: "-" }
 };
 function CreditEventHistory({ events, tokenSymbol }) {
   const [isExpanded, setIsExpanded] = react.useState(false);
@@ -7076,10 +7095,9 @@ function PositionsView({ allowedCollateralTokens, allowedDebtTokens, onBorrow, o
   }
   if (!data) return null;
   const { collateralPositions, debtPositions, accountSummary } = data;
-  const visibleCollateral = collateralPositions.filter(
-    (p) => p.usdValue !== null && parseFloat(p.usdValue) >= 0.01
-  );
-  const hasPositions = visibleCollateral.length > 0 || debtPositions.length > 0;
+  const visibleCollateral = collateralPositions.filter((p) => p.usdValue !== null && parseFloat(p.usdValue) >= 0.01).sort((a, b) => parseFloat(b.usdValue ?? "0") - parseFloat(a.usdValue ?? "0"));
+  const sortedDebt = [...debtPositions].sort((a, b) => parseFloat(b.usdValue ?? "0") - parseFloat(a.usdValue ?? "0"));
+  const hasPositions = visibleCollateral.length > 0 || sortedDebt.length > 0;
   const totalCollateralUsd = formatUsd(accountSummary.totalCollateralUsd);
   const totalDebtUsd = formatUsd(accountSummary.totalDebtUsd);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
@@ -7225,12 +7243,12 @@ function PositionsView({ allowedCollateralTokens, allowedDebtTokens, onBorrow, o
                   children: totalDebtUsd
                 }
               ),
-              debtPositions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              sortedDebt.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   className: "text-xs",
                   style: { color: "var(--compass-color-text-tertiary)" },
-                  children: debtPositions.map((p) => p.symbol).join(", ")
+                  children: sortedDebt.map((p) => p.symbol).join(", ")
                 }
               )
             ] }),
@@ -7328,7 +7346,7 @@ function PositionsView({ allowedCollateralTokens, allowedDebtTokens, onBorrow, o
               ]
             }
           ),
-          debtPositions.length > 0 ? debtPositions.map((position) => /* @__PURE__ */ jsxRuntime.jsx(
+          sortedDebt.length > 0 ? sortedDebt.map((position) => /* @__PURE__ */ jsxRuntime.jsx(
             DebtPositionCard,
             {
               position,
@@ -9114,6 +9132,13 @@ function floorTo2(value, decimals) {
   const factor = Math.pow(10, decimals);
   return Math.floor(value * factor) / factor;
 }
+function formatAmount3(num) {
+  if (num === 0) return "0.00";
+  const abs = Math.abs(num);
+  const decimals = abs >= 1 ? 2 : Math.max(2, -Math.floor(Math.log10(abs)) + 1);
+  const floored = floorTo2(num, decimals);
+  return floored.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: decimals });
+}
 function formatUsd2(value) {
   if (value === null) return "$0.00";
   const num = typeof value === "string" ? parseFloat(value) : value;
@@ -9161,7 +9186,7 @@ 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).sort((a, b) => a.tokenSymbol.localeCompare(b.tokenSymbol));
+  }).filter((b) => b.usdValue >= 0.01).sort((a, b) => b.usdValue - a.usdValue);
   const totalIdleUsd = balancesWithUsd.reduce((sum, b) => sum + b.usdValue, 0);
   const { data: walletBalance } = reactQuery.useQuery({
     queryKey: ["embeddedWalletBalance", chainId, address, "USDC"],
@@ -9553,7 +9578,7 @@ function CreditAccount({
                 }
               )
             ] }),
-            [...positions.collateralPositions].filter((p) => parseFloat(p.usdValue ?? "0") >= 0.01).sort((a, b) => a.symbol.localeCompare(b.symbol)).map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+            [...positions.collateralPositions].filter((p) => parseFloat(p.usdValue ?? "0") >= 0.01).sort((a, b) => parseFloat(b.usdValue ?? "0") - parseFloat(a.usdValue ?? "0")).map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: "flex items-center justify-between",
@@ -9566,10 +9591,7 @@ function CreditAccount({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem" }, children: p.symbol }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem", fontFamily: "monospace" }, children: floorTo2(parseFloat(p.amountSupplied ?? "0"), 2).toLocaleString(void 0, {
-                      minimumFractionDigits: 2,
-                      maximumFractionDigits: 2
-                    }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem", fontFamily: "monospace" }, children: formatAmount3(parseFloat(p.amountSupplied ?? "0")) }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.75rem" }, children: formatUsd2(p.usdValue) })
                   ] })
                 ]
@@ -9599,7 +9621,7 @@ function CreditAccount({
                 }
               )
             ] }),
-            [...positions.debtPositions].filter((p) => parseFloat(p.usdValue ?? "0") >= 0.01).sort((a, b) => a.symbol.localeCompare(b.symbol)).map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+            [...positions.debtPositions].filter((p) => parseFloat(p.usdValue ?? "0") >= 0.01).sort((a, b) => parseFloat(b.usdValue ?? "0") - parseFloat(a.usdValue ?? "0")).map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: "flex items-center justify-between",
@@ -9612,10 +9634,7 @@ function CreditAccount({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem" }, children: p.symbol }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem", fontFamily: "monospace" }, children: floorTo2(parseFloat(p.amountBorrowed ?? "0"), 2).toLocaleString(void 0, {
-                      minimumFractionDigits: 2,
-                      maximumFractionDigits: 2
-                    }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem", fontFamily: "monospace" }, children: formatAmount3(parseFloat(p.amountBorrowed ?? "0")) }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.75rem" }, children: formatUsd2(p.usdValue) })
                   ] })
                 ]
@@ -9655,10 +9674,7 @@ function CreditAccount({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem" }, children: b.tokenSymbol }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem", fontFamily: "monospace" }, children: floorTo2(parseFloat(b.amount), 2).toLocaleString(void 0, {
-                      minimumFractionDigits: 2,
-                      maximumFractionDigits: 2
-                    }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem", fontFamily: "monospace" }, children: formatAmount3(parseFloat(b.amount)) }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.75rem" }, children: formatUsd2(b.usdValue.toString()) })
                   ] })
                 ]
@@ -11352,10 +11368,12 @@ function floorTo3(value, decimals) {
   const factor = Math.pow(10, decimals);
   return Math.floor(value * factor) / factor;
 }
-function formatAmount2(value) {
+function formatAmount4(value) {
   const num = typeof value === "string" ? parseFloat(value) : value;
-  if (isNaN(num)) return "0";
-  return floorTo3(num, 2).toFixed(2);
+  if (isNaN(num) || num === 0) return "0.00";
+  const abs = Math.abs(num);
+  const decimals = abs >= 1 ? 2 : Math.max(2, -Math.floor(Math.log10(abs)) + 1);
+  return floorTo3(num, decimals).toFixed(decimals);
 }
 function RebalancingWidget({
   showChainSwitcher = true,
@@ -11447,7 +11465,7 @@ function RebalancingWidget({
     if (portfolio && portfolio.positions.length > 0 && !hasInitializedTargets && !isLoading) {
       const origAllocs = {};
       setTargets(
-        portfolio.positions.map((p) => {
+        [...portfolio.positions].sort((a, b) => b.usdValue - a.usdValue).map((p) => {
           const pct = parseFloat(p.allocationPercent.toFixed(2));
           origAllocs[`${p.venueType}-${p.venueAddress.toLowerCase()}`] = pct;
           return {
@@ -11493,7 +11511,7 @@ function RebalancingWidget({
     if (!portfolio) return;
     const origAllocs = {};
     setTargets(
-      portfolio.positions.map((p) => {
+      [...portfolio.positions].sort((a, b) => b.usdValue - a.usdValue).map((p) => {
         const pct = parseFloat(p.allocationPercent.toFixed(2));
         origAllocs[`${p.venueType}-${p.venueAddress.toLowerCase()}`] = pct;
         return {
@@ -12108,7 +12126,7 @@ function RebalancingWidget({
                               className: "font-semibold",
                               style: { color: "var(--compass-color-primary)", fontSize: "0.8125rem", background: "none", border: "none", padding: 0 },
                               children: [
-                                formatAmount2(earnBalancesQuery),
+                                formatAmount4(earnBalancesQuery),
                                 " ",
                                 selectedToken
                               ]
@@ -12434,7 +12452,7 @@ function RebalancingWidget({
                   children: "Available in Account"
                 }
               ),
-              portfolio.idleBalances.filter((b) => b.balance >= 5e-3).map((b) => /* @__PURE__ */ jsxRuntime.jsxs(
+              [...portfolio.idleBalances].filter((b) => b.balance >= 5e-3).sort((a, b) => b.usdValue - a.usdValue).map((b) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
                   className: "flex items-center justify-between",
@@ -12447,7 +12465,7 @@ function RebalancingWidget({
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem" }, children: b.token }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem" }, children: floorTo3(b.balance, 2).toFixed(2) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: "var(--compass-color-text)", fontSize: "0.9375rem" }, children: formatAmount4(b.balance) }),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.75rem" }, children: formatUSD(b.usdValue) })
                     ] })
                   ]