@compass-labs/widgets 0.1.33 → 0.1.34

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tan
 import { CompassApiSDK } from '@compass-labs/api-sdk';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { arbitrum, base, mainnet } from 'viem/chains';
-import { Wallet, Loader2, ArrowDownLeft, ArrowUpRight, X, ChevronDown, LogOut, AlertCircle, ArrowRight, ExternalLink, ArrowDownUp, ArrowLeftRight, Plus, ChevronRight, Minus, Shield, CheckCircle, AlertTriangle, Check, RotateCcw, Equal, ChevronUp, Inbox, Percent, Clock, Calendar, TrendingUp, TrendingDown } from 'lucide-react';
+import { Wallet, Loader2, ArrowDownLeft, ArrowUpRight, X, ChevronDown, Check, Copy, LogOut, AlertCircle, ArrowRight, ExternalLink, ArrowDownUp, ArrowLeftRight, Plus, ChevronRight, Minus, Shield, CheckCircle, AlertTriangle, RotateCcw, Equal, ChevronUp, Inbox, Percent, Clock, Calendar, TrendingUp, TrendingDown } from 'lucide-react';
 
 // src/provider/CompassProvider.tsx
 var ApiContext = createContext(null);
@@ -990,9 +990,52 @@ function ChainSwitcher() {
     }
   );
 }
-function truncateAddress(address) {
+function truncateAddr(address) {
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
+function CopyableAddress({
+  address,
+  label,
+  truncate = true,
+  textSize = "text-xs"
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(address);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [address]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "2px" }, children: [
+    label && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "text-xs",
+        style: { color: "var(--compass-color-text-tertiary)", fontSize: "10px" },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleCopy,
+        className: `inline-flex items-center font-mono ${textSize}`,
+        style: {
+          color: "var(--compass-color-text-secondary)",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: 0,
+          gap: "4px"
+        },
+        title: copied ? "Copied!" : `Copy: ${address}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: truncate ? truncateAddr(address) : address }),
+          copied ? /* @__PURE__ */ jsx(Check, { size: 10, className: "flex-shrink-0", style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsx(Copy, { size: 10, className: "flex-shrink-0", style: { color: "var(--compass-color-text-tertiary)" } })
+        ]
+      }
+    )
+  ] });
+}
 function WalletStatus({
   showFullAddress = false,
   showLogout = true,
@@ -1069,11 +1112,11 @@ function WalletStatus({
           }
         ),
         /* @__PURE__ */ jsx(
-          "span",
+          CopyableAddress,
           {
-            className: `font-mono whitespace-nowrap ${compact ? "text-xs" : "text-sm"}`,
-            style: { color: "var(--compass-color-text)" },
-            children: showFullAddress ? address : truncateAddress(address)
+            address,
+            truncate: !showFullAddress,
+            textSize: compact ? "text-xs" : "text-sm"
           }
         ),
         showLogout && disconnectFn !== null && /* @__PURE__ */ jsx(
@@ -2237,82 +2280,97 @@ function AccountBalancesModal({
   onClose,
   balances,
   totalUsdValue,
-  isLoading = false
+  isLoading = false,
+  earnAccountAddress,
+  walletAddress
 }) {
-  return /* @__PURE__ */ jsx(ActionModal, { isOpen, onClose, title: "Balance Breakdown", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(
-    Loader2,
-    {
-      size: 24,
-      className: "animate-spin",
-      style: { color: "var(--compass-color-primary)" }
-    }
-  ) }) : balances.length === 0 ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "text-center py-4",
-      style: { color: "var(--compass-color-text-tertiary)" },
-      children: "No tokens in account"
-    }
-  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__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__ */ jsx(
-        "div",
-        {
-          className: "flex flex-col gap-2",
-          style: {
-            maxHeight: "50vh",
-            overflowY: "auto",
-            scrollbarWidth: "none"
-          },
-          children: balances.map((token) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "flex items-center justify-between p-3 rounded-lg",
-              style: {
-                backgroundColor: "var(--compass-color-surface)",
-                border: "1px solid var(--compass-color-border)",
-                flexShrink: 0
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: token.symbol }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount(token.balance) }),
-                  /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatUSD(token.usdValue) })
-                ] })
-              ]
-            },
-            token.symbol
-          ))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(ActionModal, { isOpen, onClose, title: "Balance Breakdown", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    (walletAddress || earnAccountAddress) && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "flex items-center justify-between pt-3 mt-2",
-        style: { borderTop: "2px solid var(--compass-color-border)" },
+        className: "flex flex-col gap-2 pb-3",
+        style: { borderBottom: "1px solid var(--compass-color-border)" },
         children: [
-          /* @__PURE__ */ jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: "Total" }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "font-bold text-xl",
-              style: { color: "var(--compass-color-text)" },
-              children: formatUSD(totalUsdValue)
-            }
-          )
+          walletAddress && /* @__PURE__ */ jsx(CopyableAddress, { address: walletAddress, label: "Wallet" }),
+          earnAccountAddress && /* @__PURE__ */ jsx(CopyableAddress, { address: earnAccountAddress, label: "Product Account" })
         ]
       }
-    )
-  ] }) }) });
+    ),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(
+      Loader2,
+      {
+        size: 24,
+        className: "animate-spin",
+        style: { color: "var(--compass-color-primary)" }
+      }
+    ) }) : balances.length === 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-center py-4",
+        style: { color: "var(--compass-color-text-tertiary)" },
+        children: "No tokens in account"
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__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__ */ jsx(
+          "div",
+          {
+            className: "flex flex-col gap-2",
+            style: {
+              maxHeight: "50vh",
+              overflowY: "auto",
+              scrollbarWidth: "none"
+            },
+            children: balances.map((token) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between p-3 rounded-lg",
+                style: {
+                  backgroundColor: "var(--compass-color-surface)",
+                  border: "1px solid var(--compass-color-border)",
+                  flexShrink: 0
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: token.symbol }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount(token.balance) }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatUSD(token.usdValue) })
+                  ] })
+                ]
+              },
+              token.symbol
+            ))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between pt-3 mt-2",
+          style: { borderTop: "2px solid var(--compass-color-border)" },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: "Total" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "font-bold text-xl",
+                style: { color: "var(--compass-color-text)" },
+                children: formatUSD(totalUsdValue)
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] }) });
 }
 var TRANSFER_TOKENS = ["USDC", "SBC"];
 var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
@@ -2632,7 +2690,8 @@ var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
         balances: tokenBalances,
         totalUsdValue: totalUsdValue.toString(),
         isLoading: balancesLoading,
-        earnAccountAddress: earnAccountAddress ?? void 0
+        earnAccountAddress: earnAccountAddress ?? void 0,
+        walletAddress: address ?? void 0
       }
     ),
     /* @__PURE__ */ jsx(
@@ -6827,6 +6886,7 @@ function PortfolioBalanceCard({
   totalIdleUsd,
   idleBalances,
   earnAccountAddress,
+  walletAddress,
   onViewPositions,
   positionCount,
   totalEarned = 0,
@@ -6998,7 +7058,8 @@ function PortfolioBalanceCard({
         onClose: () => setShowBalancesModal(false),
         balances: tokenBalances,
         totalUsdValue: totalIdleUsd.toString(),
-        earnAccountAddress
+        earnAccountAddress,
+        walletAddress
       }
     )
   ] });
@@ -7024,10 +7085,11 @@ function formatPercent(value) {
 function PercentInput({ value, onChange }) {
   const [localValue, setLocalValue] = useState(value.toString());
   const [isFocused, setIsFocused] = useState(false);
-  if (!isFocused && localValue !== value.toString()) {
+  const roundedStr = parseFloat(value.toFixed(2)).toString();
+  if (!isFocused && localValue !== roundedStr) {
     const parsed = parseFloat(localValue);
     if (isNaN(parsed) || Math.abs(parsed - value) > 1e-3) {
-      setLocalValue(value.toString());
+      setLocalValue(roundedStr);
     }
   }
   return /* @__PURE__ */ jsx(
@@ -7038,7 +7100,7 @@ function PercentInput({ value, onChange }) {
       value: isFocused ? localValue : formatPercent(value).replace("%", ""),
       onFocus: () => {
         setIsFocused(true);
-        setLocalValue(value.toString());
+        setLocalValue(parseFloat(value.toFixed(2)).toString());
       },
       onChange: (e) => {
         const raw = e.target.value;
@@ -7162,7 +7224,7 @@ function AllocationEditor({
                         currentPos && /* @__PURE__ */ jsxs(Fragment, { children: [
                           /* @__PURE__ */ jsx("span", { className: "text-xs font-mono", style: { color: "var(--compass-color-text-secondary)", fontSize: "10px" }, children: formatUSD(currentPos.usdValue) }),
                           /* @__PURE__ */ jsxs("span", { style: { color: "var(--compass-color-success)", fontSize: "10px" }, children: [
-                            currentPos.apy.toFixed(1),
+                            currentPos.apy.toFixed(2),
                             "%"
                           ] })
                         ] }),
@@ -7292,6 +7354,7 @@ function RebalancingWidget({
   const { chainId: contextChainId, setChainId } = useChain();
   const CHAIN_ID = chain || contextChainId;
   const { address, signTypedData, isConnected, login, switchChain, walletChainId } = useEmbeddableWallet();
+  const { earnAccountAddress } = useEarnAccount();
   const queryClient = useQueryClient();
   const { portfolio, earnAccountMarkets, isMarketsLoading, isLoading, isError, error, refetch } = useRebalancingData(chain);
   const allowedVariableMarketIds = useMemo(() => {
@@ -7364,7 +7427,7 @@ function RebalancingWidget({
           venueAddress: p.venueAddress,
           venueName: p.venueName,
           token: p.token,
-          targetPercent: p.allocationPercent
+          targetPercent: parseFloat(p.allocationPercent.toFixed(2))
         }))
       );
       setHasInitializedTargets(true);
@@ -7404,7 +7467,7 @@ function RebalancingWidget({
         venueAddress: p.venueAddress,
         venueName: p.venueName,
         token: p.token,
-        targetPercent: p.allocationPercent
+        targetPercent: parseFloat(p.allocationPercent.toFixed(2))
       }))
     );
     setPreviewPlan(null);
@@ -7420,7 +7483,8 @@ function RebalancingWidget({
     setTargets((prev) => prev.filter((_, i) => i !== index));
   }, []);
   const handleUpdatePercent = useCallback((index, value) => {
-    setTargets((prev) => prev.map((t, i) => i === index ? { ...t, targetPercent: Math.max(0, Math.min(100, value)) } : t));
+    const rounded = parseFloat(Math.max(0, Math.min(100, value)).toFixed(2));
+    setTargets((prev) => prev.map((t, i) => i === index ? { ...t, targetPercent: rounded } : t));
   }, []);
   const ensureCorrectChain = useCallback(async () => {
     const targetChainId = EVM_CHAIN_IDS2[CHAIN_ID];
@@ -7845,6 +7909,8 @@ function RebalancingWidget({
                     totalUsd: portfolio.totalUsd,
                     totalIdleUsd: portfolio.totalIdleUsd,
                     idleBalances: portfolio.idleBalances,
+                    earnAccountAddress: earnAccountAddress ?? void 0,
+                    walletAddress: address ?? void 0,
                     onViewPositions: () => setIsEarningsModalOpen(true),
                     positionCount: portfolio.positions.length,
                     totalEarned,
@@ -8151,7 +8217,25 @@ function RebalancingWidget({
                     children: [
                       /* @__PURE__ */ jsx(Check, { size: 24, className: "mx-auto mb-2", style: { color: "var(--compass-color-success)" } }),
                       /* @__PURE__ */ jsx("p", { className: "font-semibold mb-1", style: { color: "var(--compass-color-success)" }, children: "Rebalance Complete" }),
-                      /* @__PURE__ */ jsx("p", { className: "text-xs font-mono break-all", style: { color: "var(--compass-color-text-secondary)" }, children: txHash })
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: () => navigator.clipboard.writeText(txHash),
+                          className: "inline-flex items-center justify-center gap-1.5 text-xs font-mono break-all mx-auto",
+                          style: {
+                            color: "var(--compass-color-text-secondary)",
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: 0
+                          },
+                          title: "Copy transaction hash",
+                          children: [
+                            txHash,
+                            /* @__PURE__ */ jsx(Copy, { size: 12, className: "flex-shrink-0", style: { color: "var(--compass-color-text-tertiary)" } })
+                          ]
+                        }
+                      )
                     ]
                   }
                 ),
@@ -8496,6 +8580,6 @@ var CHAINS = {
   }
 };
 
-export { AccountBalancesModal, ActionModal, ApiProvider, CHAINS, ChainSwitcher, CompassEarnWidget, CompassProvider, DepositWithdrawForm, EarnAccount, EarnAccountBalance, EarnAccountGuard, PnLSummary, RebalancingWidget, SwapForm, ThemeProvider, TransactionHistory, WalletStatus, themePresets, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, useRebalancingData, useSwapQuote, useTheme };
+export { AccountBalancesModal, ActionModal, ApiProvider, CHAINS, ChainSwitcher, CompassEarnWidget, CompassProvider, CopyableAddress, DepositWithdrawForm, EarnAccount, EarnAccountBalance, EarnAccountGuard, PnLSummary, RebalancingWidget, SwapForm, ThemeProvider, TransactionHistory, WalletStatus, themePresets, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, useRebalancingData, useSwapQuote, useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map