@compass-labs/widgets 0.1.19 → 0.1.21

package/dist/index.js

@@ -3781,30 +3781,45 @@ function AaveMarketsList({
     )
   ] });
 }
-var MARKET_TYPES = [
-  { value: "aave", label: "SAFE" },
-  { value: "vaults", label: "MODERATE" },
-  { value: "pendle", label: "FIXED" }
+var MARKET_TABS = [
+  { value: "variable", label: "VARIABLE" },
+  { value: "fixed", label: "FIXED" }
 ];
+var TAB_TO_MARKET_TYPES = {
+  variable: ["aave", "vaults"],
+  fixed: ["pendle"]
+};
 function MarketSelector({
   markets,
   selectedMarket,
   onMarketSelect,
-  marketType,
-  onMarketTypeChange,
-  minTvl,
-  onMinTvlChange,
-  isLoading
+  marketTab,
+  onMarketTabChange,
+  isLoading,
+  allowedMarketIds
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = react.useState(false);
-  const showTvl = marketType !== "aave";
+  const dropdownRef = react.useRef(null);
+  react.useEffect(() => {
+    function handleClickOutside(e) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const allowedTypes = TAB_TO_MARKET_TYPES[marketTab];
+  const showTvl = marketTab === "variable";
   const filteredMarkets = react.useMemo(() => {
-    return markets.filter((m) => m.type === marketType && (showTvl ? m.tvl >= minTvl : true));
-  }, [markets, marketType, minTvl, showTvl]);
-  const maxTvl = react.useMemo(() => {
-    const typeMarkets = markets.filter((m) => m.type === marketType);
-    return Math.max(...typeMarkets.map((m) => m.tvl), 1e8);
-  }, [markets, marketType]);
+    return markets.filter((m) => {
+      if (!allowedTypes.includes(m.type)) return false;
+      if (allowedMarketIds !== void 0) {
+        return allowedMarketIds.includes(m.id);
+      }
+      return true;
+    }).sort((a, b) => b.apy - a.apy);
+  }, [markets, allowedTypes, allowedMarketIds]);
   const hasMarkets = filteredMarkets.length > 0;
   const formatTvl = (value) => {
     if (value >= 1e9) return `$${(value / 1e9).toFixed(1)}B`;
@@ -3818,7 +3833,7 @@ function MarketSelector({
       style: {
         display: "flex",
         flexDirection: "column",
-        gap: "calc(var(--compass-spacing-unit) * 3)"
+        gap: "calc(var(--compass-spacing-unit) * 1.5)"
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -3839,29 +3854,29 @@ function MarketSelector({
             {
               style: {
                 display: "flex",
-                borderRadius: "var(--compass-border-radius-lg, 12px)",
+                borderRadius: "var(--compass-border-radius-md, 8px)",
                 border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
                 overflow: "hidden"
               },
-              children: MARKET_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+              children: MARKET_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
-                  onClick: () => onMarketTypeChange(type.value),
+                  onClick: () => onMarketTabChange(tab.value),
                   style: {
                     flex: 1,
-                    padding: "calc(var(--compass-spacing-unit, 8px) * 2)",
-                    backgroundColor: marketType === type.value ? "var(--compass-color-primary, #6366f1)" : "var(--compass-color-surface, #12121a)",
-                    color: marketType === type.value ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text, #e4e4e7)",
+                    padding: "6px 8px",
+                    backgroundColor: marketTab === tab.value ? "var(--compass-color-primary, #6366f1)" : "var(--compass-color-surface, #12121a)",
+                    color: marketTab === tab.value ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text, #e4e4e7)",
                     border: "none",
                     cursor: "pointer",
-                    fontSize: "var(--compass-font-size-sm, 14px)",
+                    fontSize: "12px",
                     fontWeight: 500,
                     fontFamily: "var(--compass-font-family)",
                     transition: "var(--compass-transition-normal, all 0.2s ease)"
                   },
-                  children: type.label
+                  children: tab.label
                 },
-                type.value
+                tab.value
               ))
             }
           )
@@ -3879,7 +3894,7 @@ function MarketSelector({
               children: "Select Market"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, style: { position: "relative" }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
@@ -3887,10 +3902,11 @@ function MarketSelector({
                 disabled: !hasMarkets || isLoading,
                 style: {
                   width: "100%",
-                  padding: "calc(var(--compass-spacing-unit, 8px) * 2.5)",
+                  padding: "8px 12px",
                   backgroundColor: "var(--compass-color-surface, #12121a)",
                   border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
-                  borderRadius: "var(--compass-border-radius-lg, 12px)",
+                  borderRadius: "var(--compass-border-radius-md, 8px)",
+                  fontSize: "13px",
                   display: "flex",
                   justifyContent: "space-between",
                   alignItems: "center",
@@ -3905,7 +3921,7 @@ function MarketSelector({
                       style: {
                         color: selectedMarket ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
                       },
-                      children: isLoading ? "Loading markets..." : !hasMarkets ? `No markets above ${formatTvl(minTvl)}` : selectedMarket ? selectedMarket.name : "Select a market"
+                      children: isLoading ? "Loading markets..." : !hasMarkets ? "No markets available" : selectedMarket ? selectedMarket.name : "Select a market"
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--compass-spacing-unit)" }, children: [
@@ -3998,7 +4014,7 @@ function MarketSelector({
                           ]
                         }
                       ),
-                      (showTvl || market.expiry) && /* @__PURE__ */ jsxRuntime.jsxs(
+                      (showTvl && market.tvl > 0 || market.expiry) && /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
                           style: {
@@ -4007,8 +4023,8 @@ function MarketSelector({
                             marginTop: "calc(var(--compass-spacing-unit) * 0.5)"
                           },
                           children: [
-                            showTvl && `TVL: ${formatTvl(market.tvl)}`,
-                            showTvl && market.expiry && " \xB7 ",
+                            showTvl && market.tvl > 0 && `TVL: ${formatTvl(market.tvl)}`,
+                            showTvl && market.tvl > 0 && market.expiry && " \xB7 ",
                             market.expiry && `Expires: ${market.expiry}`
                           ]
                         }
@@ -4020,56 +4036,6 @@ function MarketSelector({
               }
             )
           ] })
-        ] }),
-        showTvl && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: "var(--compass-spacing-unit)"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "label",
-                  {
-                    style: {
-                      fontSize: "var(--compass-font-size-sm)",
-                      color: "var(--compass-color-text-secondary)"
-                    },
-                    children: "Min TVL"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "var(--compass-font-size-sm)",
-                      color: "var(--compass-color-text)"
-                    },
-                    children: formatTvl(minTvl)
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "range",
-              min: 0,
-              max: maxTvl,
-              step: 1e5,
-              value: minTvl,
-              onChange: (e) => onMinTvlChange(Number(e.target.value)),
-              style: {
-                width: "100%",
-                accentColor: "var(--compass-color-primary)"
-              }
-            }
-          )
         ] })
       ]
     }
@@ -4667,12 +4633,15 @@ function EarnAccount({
   title = "Savings Account",
   onDeposit,
   onWithdraw,
-  defaultMarketType = "aave",
-  defaultMinTvl = 0
+  defaultMarketTab = "variable",
+  allowedVariableMarkets,
+  allowedFixedMarkets,
+  chain: chainProp
 }) {
   const { address, isConnected, login, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
   const { isDeployed } = useEarnAccount();
-  const { chainId: CHAIN_ID } = useChain();
+  const { chainId: contextChainId } = useChain();
+  const CHAIN_ID = chainProp || contextChainId;
   const queryClient = reactQuery.useQueryClient();
   const [activeTab, setActiveTab] = react.useState("deposit");
   const [selectedToken, setSelectedToken] = react.useState("USDC");
@@ -4688,9 +4657,8 @@ function EarnAccount({
   const [fundError, setFundError] = react.useState(null);
   const [fundStatus, setFundStatus] = react.useState("");
   const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
-  const [marketType, setMarketType] = react.useState(defaultMarketType);
+  const [marketTab, setMarketTab] = react.useState(defaultMarketTab);
   const [selectedMarket, setSelectedMarket] = react.useState(null);
-  const [minTvl, setMinTvl] = react.useState(defaultMinTvl);
   const [isEarningsModalOpen, setIsEarningsModalOpen] = react.useState(false);
   react.useEffect(() => {
     setSelectedMarket(null);
@@ -4756,7 +4724,7 @@ function EarnAccount({
   });
   const allPositionData = positionQuery.data || [];
   const totalDepositedBalance = allPositionData.reduce((sum, p) => sum + parseFloat(p.balanceUsd || "0"), 0);
-  const earnAccountTotal = parseFloat(earnAccountTotalUsd);
+  const earnAccountTotal = parseFloat(earnAccountTotalUsd) + totalDepositedBalance;
   const aaveMarketsQuery = reactQuery.useQuery({
     queryKey: ["allAaveMarkets", CHAIN_ID],
     queryFn: async () => {
@@ -5373,7 +5341,7 @@ function EarnAccount({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}),
+    !chainProp && /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(EarnAccountGuard, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -5385,14 +5353,14 @@ function EarnAccount({
             padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.25)"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: () => setIsBalancesModalOpen(true),
-                className: "flex flex-col text-left w-full transition-opacity hover:opacity-80",
-                style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => setIsBalancesModalOpen(true),
+                  className: "flex items-center text-left transition-opacity hover:opacity-80",
+                  style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" },
+                  children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
@@ -5402,22 +5370,51 @@ function EarnAccount({
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12, style: { color: "var(--compass-color-text-tertiary)" } })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: "font-bold",
-                      style: {
-                        color: "var(--compass-color-text)",
-                        fontSize: compact ? "2rem" : "2.5rem",
-                        lineHeight: "1"
-                      },
-                      children: formatCurrency(earnAccountTotal)
-                    }
-                  )
-                ]
-              }
-            ),
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => setIsBalancesModalOpen(true),
+                    className: "transition-opacity hover:opacity-80",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "font-bold",
+                        style: {
+                          color: "var(--compass-color-text)",
+                          fontSize: compact ? "2rem" : "2.5rem",
+                          lineHeight: "1"
+                        },
+                        children: formatCurrency(earnAccountTotal)
+                      }
+                    )
+                  }
+                ),
+                showTopUpButton && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => setIsFundModalOpen(true),
+                    className: "flex items-center font-medium transition-all hover:opacity-80",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface-elevated, var(--compass-color-surface))",
+                      border: "1px solid var(--compass-color-border)",
+                      color: "var(--compass-color-text-secondary)",
+                      borderRadius: "var(--compass-border-radius-md)",
+                      padding: "6px 10px",
+                      gap: "4px",
+                      fontSize: "12px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14 }),
+                      "Top Up"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -5480,14 +5477,13 @@ function EarnAccount({
           markets: allMarkets,
           selectedMarket,
           onMarketSelect: setSelectedMarket,
-          marketType,
-          onMarketTypeChange: (type) => {
-            setMarketType(type);
+          marketTab,
+          onMarketTabChange: (tab) => {
+            setMarketTab(tab);
             setSelectedMarket(null);
           },
-          minTvl,
-          onMinTvlChange: setMinTvl,
-          isLoading: isMarketsLoading
+          isLoading: isMarketsLoading,
+          allowedMarketIds: marketTab === "variable" ? allowedVariableMarkets : allowedFixedMarkets
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5747,26 +5743,6 @@ function EarnAccount({
             ] })
           ]
         }
-      ),
-      showTopUpButton && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: () => setIsFundModalOpen(true),
-          className: "w-full font-medium flex items-center justify-center transition-all",
-          style: {
-            backgroundColor: "var(--compass-color-surface)",
-            border: "1px solid var(--compass-color-border)",
-            color: "var(--compass-color-text)",
-            borderRadius: "var(--compass-border-radius-lg)",
-            padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
-            gap: "calc(var(--compass-spacing-unit) * 0.5)",
-            transition: "var(--compass-transition-normal)"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 16 : 18 }),
-            "Top Up"
-          ]
-        }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -6680,152 +6656,154 @@ function SwapWidget({
         /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "number",
-              value: fromAmount,
-              onChange: (e) => setFromAmount(e.target.value),
-              placeholder: "0.00",
-              className: "flex-1 bg-transparent outline-none text-2xl font-mono min-w-0",
-              style: { color: "var(--compass-color-text)" }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "select",
-            {
-              value: fromToken,
-              onChange: (e) => setFromToken(e.target.value),
-              className: "border text-sm font-medium cursor-pointer flex-shrink-0",
-              style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
-              children: allowedTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
-            }
-          )
+    /* @__PURE__ */ jsxRuntime.jsxs(EarnAccountGuard, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                value: fromAmount,
+                onChange: (e) => setFromAmount(e.target.value),
+                placeholder: "0.00",
+                className: "flex-1 bg-transparent outline-none text-2xl font-mono min-w-0",
+                style: { color: "var(--compass-color-text)" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: fromToken,
+                onChange: (e) => setFromToken(e.target.value),
+                className: "border text-sm font-medium cursor-pointer flex-shrink-0",
+                style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
+                children: allowedTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
+              }
+            )
+          ] })
+        ] }),
+        showReverseButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center relative z-10", style: { margin: "calc(var(--compass-spacing-unit) * -0.25) 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleReverse,
+            className: "border hover:opacity-80",
+            style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-full)", padding: "calc(var(--compass-spacing-unit) * 0.5)", transition: "var(--compass-transition-normal)" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 16, className: "animate-spin" }),
+              "Loading..."
+            ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(8) : "0.00000000" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: toToken,
+                onChange: (e) => setToToken(e.target.value),
+                className: "border text-sm font-medium cursor-pointer",
+                style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
+                children: allowedTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      quote && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rate" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+          "1 ",
+          fromToken,
+          " = ",
+          parseFloat(quote.rate).toFixed(6),
+          " ",
+          toToken
         ] })
       ] }),
-      showReverseButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center relative z-10", style: { margin: "calc(var(--compass-spacing-unit) * -0.25) 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      quoteError && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-center text-sm",
+          style: {
+            backgroundColor: "var(--compass-color-error-muted)",
+            color: "var(--compass-color-error)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            padding: "calc(var(--compass-spacing-unit) * 0.75)",
+            gap: "calc(var(--compass-spacing-unit) * 0.5)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 16 }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: quoteError.message })
+          ]
+        }
+      ),
+      swapStatus && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-center text-sm",
+          style: {
+            backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
+            color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            padding: "calc(var(--compass-spacing-unit) * 0.75)",
+            gap: "calc(var(--compass-spacing-unit) * 0.5)"
+          },
+          children: [
+            !swapStatus.includes("successful") && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, className: "animate-spin" }),
+            swapStatus
+          ]
+        }
+      ),
+      !isConnected ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex flex-col items-center",
+          style: {
+            backgroundColor: "var(--compass-color-surface)",
+            border: "1px solid var(--compass-color-border)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            fontFamily: "var(--compass-font-family)",
+            padding: "calc(var(--compass-spacing-unit) * 1.5) var(--compass-spacing-card)",
+            gap: "calc(var(--compass-spacing-unit) * 0.75)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "text-sm text-center",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: "Connect your wallet to swap"
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
-          onClick: handleReverse,
-          className: "border hover:opacity-80",
-          style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-full)", padding: "calc(var(--compass-spacing-unit) * 0.5)", transition: "var(--compass-transition-normal)" },
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
+          onClick: handleSwap,
+          disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
+          className: "w-full font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed",
+          style: {
+            backgroundColor: "var(--compass-color-primary)",
+            color: "var(--compass-color-primary-text)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            fontFamily: "var(--compass-font-family)",
+            padding: "calc(var(--compass-spacing-unit) * 0.75)",
+            gap: "calc(var(--compass-spacing-unit) * 0.5)",
+            transition: "var(--compass-transition-normal)"
+          },
+          children: [
+            isSwapping && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
+            isSwapping ? "Swapping..." : "Swap"
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 16, className: "animate-spin" }),
-            "Loading..."
-          ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(8) : "0.00000000" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "select",
-            {
-              value: toToken,
-              onChange: (e) => setToToken(e.target.value),
-              className: "border text-sm font-medium cursor-pointer",
-              style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
-              children: allowedTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    quote && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rate" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
-        "1 ",
-        fromToken,
-        " = ",
-        parseFloat(quote.rate).toFixed(6),
-        " ",
-        toToken
-      ] })
-    ] }),
-    quoteError && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "flex items-center text-sm",
-        style: {
-          backgroundColor: "var(--compass-color-error-muted)",
-          color: "var(--compass-color-error)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          padding: "calc(var(--compass-spacing-unit) * 0.75)",
-          gap: "calc(var(--compass-spacing-unit) * 0.5)"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 16 }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: quoteError.message })
-        ]
-      }
-    ),
-    swapStatus && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "flex items-center text-sm",
-        style: {
-          backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
-          color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          padding: "calc(var(--compass-spacing-unit) * 0.75)",
-          gap: "calc(var(--compass-spacing-unit) * 0.5)"
-        },
-        children: [
-          !swapStatus.includes("successful") && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, className: "animate-spin" }),
-          swapStatus
-        ]
-      }
-    ),
-    !isConnected ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "flex flex-col items-center",
-        style: {
-          backgroundColor: "var(--compass-color-surface)",
-          border: "1px solid var(--compass-color-border)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          fontFamily: "var(--compass-font-family)",
-          padding: "calc(var(--compass-spacing-unit) * 1.5) var(--compass-spacing-card)",
-          gap: "calc(var(--compass-spacing-unit) * 0.75)"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: "text-sm text-center",
-              style: { color: "var(--compass-color-text-secondary)" },
-              children: "Connect your wallet to swap"
-            }
-          )
-        ]
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick: handleSwap,
-        disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
-        className: "w-full font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed",
-        style: {
-          backgroundColor: "var(--compass-color-primary)",
-          color: "var(--compass-color-primary-text)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          fontFamily: "var(--compass-font-family)",
-          padding: "calc(var(--compass-spacing-unit) * 0.75)",
-          gap: "calc(var(--compass-spacing-unit) * 0.5)",
-          transition: "var(--compass-transition-normal)"
-        },
-        children: [
-          isSwapping && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
-          isSwapping ? "Swapping..." : "Swap"
-        ]
-      }
-    )
+      )
+    ] })
   ] });
 }
 function getEarliestDepositTimestamp(deposits) {