@aori/mega-swap-widget 0.1.0

package/dist/index.js

@@ -0,0 +1,1780 @@
+"use client";
+import {
+  QuoteLoader_default
+} from "./chunk-QHW27RMH.js";
+import {
+  AssetAmountInput_default,
+  AssetSelection_default,
+  ChainSwitch,
+  RecipientForm_default,
+  RfqProvider,
+  SignSwap,
+  SwapButton,
+  TxStatusDisplay_default,
+  WalletModalContext,
+  canSubmitOrder,
+  cleanupOldSubmissions,
+  isQuoteFresh,
+  markOrderAsSubmitted,
+  pollOrderStatus,
+  useBalanceEventListener,
+  useBalanceEventSubscription,
+  useEmitBalanceEvent,
+  useOrderStatusPolling,
+  useRfq,
+  useTransactionRegistry,
+  useUnwrapToken,
+  useWalletModal,
+  useWrapToken
+} from "./chunk-ARMW5POL.js";
+import "./chunk-LTA7IG3J.js";
+import {
+  SwapFormProvider,
+  useSwapForm,
+  useSwapFormContext,
+  useTokenSelection,
+  useTokenSelectionStore,
+  useWidgetSwapUIStore
+} from "./chunk-TMC4SUEV.js";
+import {
+  AoriClientProvider,
+  WidgetConfigContext,
+  getAllChainConfigs,
+  getChainKeyToIdMapping,
+  setApiKey,
+  setRpcOverrides,
+  setVtApiBaseUrl,
+  staticChainsConfig,
+  useTextScramble,
+  useTokenData,
+  useWidgetConfig
+} from "./chunk-6Q7MSCKS.js";
+import {
+  useWalletState
+} from "./chunk-7AWG6OWF.js";
+import "./chunk-GGM3MDFM.js";
+
+// src/SwapWidget.tsx
+import React2, { useMemo as useMemo2 } from "react";
+
+// src/components/SwapContainer.tsx
+import { Suspense, lazy, useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useShallow as useShallow3 } from "zustand/react/shallow";
+
+// src/components/SwapForm.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SwapForm = ({ onSwapComplete, onSwapInitiated }) => {
+  const {
+    web3ConnectionType,
+    hasConnectHandler,
+    lockBase,
+    lockQuote,
+    disableInverting,
+    tokenDisplay,
+    tokenBadgeOrientation,
+    widgetType
+  } = useWidgetConfig();
+  const isOverlayToken = tokenDisplay === "pill" || tokenDisplay === "ghost";
+  const isCompactMode = widgetType === "compact";
+  const basePadding = isCompactMode ? "px-4 pt-3 pb-1" : "px-4 pt-4 pb-2";
+  const quotePadding = isCompactMode ? "px-4 pt-4 pb-1" : "px-4 pt-6 pb-2";
+  const {
+    baseToken,
+    quoteToken,
+    baseAmount,
+    quoteAmount,
+    isBaseGasToken,
+    isQuoteGasToken,
+    isWrappingPair,
+    isUnwrappingPair,
+    baseBalance,
+    quoteBalance,
+    setBaseAmount,
+    setQuoteAmount,
+    swapTokens,
+    clearForm
+  } = useSwapFormContext();
+  const {
+    rfqQuote,
+    status: rfqStatus,
+    handleInputChange,
+    ensureForParams,
+    stop,
+    clear,
+    refresh
+  } = useRfq();
+  const { address: userAddress } = useWalletState();
+  const { openConnectModal: openWalletModal } = useWalletModal();
+  const { isRecipientInputOpen, txStatus } = useWidgetSwapUIStore(
+    useShallow((state) => ({
+      isRecipientInputOpen: state.isRecipientInputOpen,
+      txStatus: state.txStatus
+    }))
+  );
+  const [reviewState, setReviewState] = useState(null);
+  const [trackedOrderHash, setTrackedOrderHash] = useState(null);
+  const isHandlingStaleRestart = useRef(false);
+  const isPlacingOrder = false;
+  const reviewActionProps = useMemo(() => {
+    if (!baseToken || !quoteToken || typeof baseAmount !== "number" || !quoteAmount || !userAddress) return null;
+    if (parseFloat(baseBalance.formatted) < baseAmount) return null;
+    return { base: baseToken, quote: quoteToken, baseAmount, quoteAmount, userAddress };
+  }, [baseToken, quoteToken, baseAmount, quoteAmount, userAddress, baseBalance.formatted]);
+  const onOrderSubmitted = useCallback((orderHash) => {
+    setTrackedOrderHash(orderHash);
+    useWidgetSwapUIStore.getState().startTracking(orderHash);
+  }, []);
+  const onStaleQuoteRestart = useCallback(() => {
+    isHandlingStaleRestart.current = true;
+    refresh();
+  }, [refresh]);
+  useEffect(() => {
+    if (reviewState !== null) return;
+    if (!baseToken || !quoteToken) return;
+    if (!baseAmount || baseAmount <= 0) {
+      handleInputChange({ amount: null, inputToken: baseToken, outputToken: quoteToken, setOutputAmount: setQuoteAmount });
+      return;
+    }
+    if (isWrappingPair || isUnwrappingPair) {
+      setQuoteAmount(baseAmount);
+      return;
+    }
+    handleInputChange({
+      amount: baseAmount,
+      inputToken: baseToken,
+      outputToken: quoteToken,
+      setOutputAmount: setQuoteAmount
+    });
+  }, [
+    reviewState,
+    baseAmount,
+    baseToken,
+    quoteToken,
+    isWrappingPair,
+    isUnwrappingPair,
+    handleInputChange,
+    setQuoteAmount
+  ]);
+  const handleToggleBaseSelection = useCallback(() => {
+    useWidgetSwapUIStore.getState().setView("baseSelection");
+  }, []);
+  const handleToggleQuoteSelection = useCallback(() => {
+    useWidgetSwapUIStore.getState().setView("quoteSelection");
+  }, []);
+  const handleInvert = useCallback(() => {
+    swapTokens();
+    setQuoteAmount(null);
+  }, [swapTokens, setQuoteAmount]);
+  const handleMax = useCallback(() => {
+    if (!baseBalance.formatted || !baseToken || !quoteToken) return;
+    const balNum = parseFloat(baseBalance.formatted);
+    if (!balNum || balNum <= 0) return;
+    const adjusted = balNum * 0.9999999999;
+    if (isWrappingPair || isUnwrappingPair) {
+      setBaseAmount(adjusted);
+      setQuoteAmount(adjusted);
+      clear();
+    } else {
+      setBaseAmount(adjusted);
+      setQuoteAmount(null);
+      ensureForParams({
+        inputToken: baseToken,
+        outputToken: quoteToken,
+        inputAmount: adjusted.toString(),
+        setOutputAmount: (amount) => setQuoteAmount(amount)
+      });
+    }
+  }, [
+    baseBalance.formatted,
+    baseToken,
+    quoteToken,
+    isWrappingPair,
+    isUnwrappingPair,
+    setBaseAmount,
+    setQuoteAmount,
+    clear,
+    ensureForParams
+  ]);
+  const handleClear = useCallback(() => {
+    clear();
+    clearForm();
+  }, [clear, clearForm]);
+  const baseBalanceNum = baseBalance.formatted ? parseFloat(baseBalance.formatted) : null;
+  const hasAmount = !!(baseAmount || quoteAmount);
+  const baseUsd = baseToken?.price && baseAmount ? `$${(baseToken.price * baseAmount).toFixed(2)}` : "$0.00";
+  const quoteUsd = quoteToken?.price && quoteAmount ? `$${(quoteToken.price * quoteAmount).toFixed(2)}` : "$0.00";
+  const isShowingTxStatus = reviewState === "trackingTx" && !!trackedOrderHash && !!baseToken && !!quoteToken && !!baseAmount && !!quoteAmount;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
+    isShowingTxStatus && trackedOrderHash && baseToken && quoteToken && baseAmount && quoteAmount ? (
+      /* ── TX STATUS (replaces token sections during tracking) ── */
+      /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+        TxStatusDisplay_default,
+        {
+          orderHash: trackedOrderHash,
+          base: baseToken,
+          quote: quoteToken,
+          baseAmount,
+          quoteAmount,
+          status: txStatus
+        }
+      ) })
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `relative ${basePadding}`,
+          style: { borderBottom: "1px solid var(--widget-border)" },
+          children: [
+            isOverlayToken ? isCompactMode ? (
+              // compact + pill/ghost: side-by-side row, badge on side
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `flex items-center gap-2 mb-2 ${tokenBadgeOrientation === "right" ? "flex-row-reverse" : "flex-row"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      AssetSelection_default,
+                      {
+                        toggle: handleToggleBaseSelection,
+                        side: "base",
+                        asset: baseToken,
+                        isPlacingOrder: isPlacingOrder || lockBase
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+                      AssetAmountInput_default,
+                      {
+                        side: "base",
+                        asset: baseToken ?? null,
+                        otherAsset: quoteToken ?? null,
+                        isPlacingOrder,
+                        isWrappingPair,
+                        isUnwrappingPair
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ) : (
+              // default + pill/ghost: badge stacked above input, aligned to chosen side
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `flex flex-col ${tokenBadgeOrientation === "right" ? "items-end" : "items-start"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      AssetSelection_default,
+                      {
+                        toggle: handleToggleBaseSelection,
+                        side: "base",
+                        asset: baseToken,
+                        isPlacingOrder: isPlacingOrder || lockBase
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      AssetAmountInput_default,
+                      {
+                        side: "base",
+                        asset: baseToken ?? null,
+                        otherAsset: quoteToken ?? null,
+                        isPlacingOrder,
+                        isWrappingPair,
+                        isUnwrappingPair
+                      }
+                    )
+                  ]
+                }
+              )
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                AssetSelection_default,
+                {
+                  toggle: handleToggleBaseSelection,
+                  side: "base",
+                  asset: baseToken,
+                  isPlacingOrder: isPlacingOrder || lockBase
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AssetAmountInput_default,
+                {
+                  side: "base",
+                  asset: baseToken ?? null,
+                  otherAsset: quoteToken ?? null,
+                  isPlacingOrder,
+                  isWrappingPair,
+                  isUnwrappingPair
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-1 flex w-full flex-row items-center justify-between", children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "mono text-sm",
+                  style: { color: "var(--widget-muted-foreground)" },
+                  children: baseUsd
+                }
+              ),
+              userAddress && baseBalanceNum !== null && baseBalanceNum > 0 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleMax,
+                  disabled: isPlacingOrder,
+                  className: "absolute bottom-3 right-4 flex items-center px-3 py-0.5 text-xs font-medium uppercase cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed transition-colors bg-(--widget-primary) text-(--widget-primary-foreground) hover:bg-(--widget-foreground) hover:text-(--widget-card)",
+                  style: { borderRadius: "var(--widget-radius)" },
+                  children: "Max"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      !disableInverting && /* @__PURE__ */ jsx("div", { className: "flex justify-center -my-4 relative z-10", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleInvert,
+          "aria-label": "Swap input and output tokens",
+          className: "flex h-8 w-8 items-center justify-center rounded-full cursor-pointer transition-colors bg-(--widget-card) text-(--widget-muted-foreground) hover:bg-(--widget-secondary) hover:text-(--widget-foreground)",
+          style: { border: "1px solid var(--widget-border)" },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-2xs", children: "\u2191" }),
+            /* @__PURE__ */ jsx("span", { className: "text-2xs", children: "\u2193" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: `relative ${quotePadding}`, children: [
+        isOverlayToken ? isCompactMode ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex items-center gap-2 ${tokenBadgeOrientation === "right" ? "flex-row-reverse" : "flex-row"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                AssetSelection_default,
+                {
+                  toggle: handleToggleQuoteSelection,
+                  side: "quote",
+                  asset: quoteToken,
+                  isPlacingOrder: isPlacingOrder || lockQuote
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+                AssetAmountInput_default,
+                {
+                  side: "quote",
+                  asset: quoteToken ?? null,
+                  otherAsset: baseToken ?? null,
+                  isPlacingOrder,
+                  isWrappingPair,
+                  isUnwrappingPair
+                }
+              ) })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex flex-col ${tokenBadgeOrientation === "right" ? "items-end" : "items-start"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                AssetSelection_default,
+                {
+                  toggle: handleToggleQuoteSelection,
+                  side: "quote",
+                  asset: quoteToken,
+                  isPlacingOrder: isPlacingOrder || lockQuote
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AssetAmountInput_default,
+                {
+                  side: "quote",
+                  asset: quoteToken ?? null,
+                  otherAsset: baseToken ?? null,
+                  isPlacingOrder,
+                  isWrappingPair,
+                  isUnwrappingPair
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            AssetSelection_default,
+            {
+              toggle: handleToggleQuoteSelection,
+              side: "quote",
+              asset: quoteToken,
+              isPlacingOrder: isPlacingOrder || lockQuote
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AssetAmountInput_default,
+            {
+              side: "quote",
+              asset: quoteToken ?? null,
+              otherAsset: baseToken ?? null,
+              isPlacingOrder,
+              isWrappingPair,
+              isUnwrappingPair
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mono text-sm",
+              style: { color: "var(--widget-muted-foreground)" },
+              children: quoteUsd
+            }
+          ),
+          hasAmount && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              disabled: isPlacingOrder,
+              className: "absolute bottom-2 right-4 flex items-center px-3 py-0.5 text-xs font-medium uppercase cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-(--widget-muted-foreground) hover:bg-(--widget-secondary)",
+              style: { borderRadius: "var(--widget-radius)" },
+              children: "Clear"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex flex-row items-center w-full overflow-hidden",
+          style: {
+            borderTop: isRecipientInputOpen ? "1px solid var(--widget-border)" : "none",
+            maxHeight: isRecipientInputOpen ? "60px" : "0px",
+            opacity: isRecipientInputOpen ? 1 : 0,
+            transition: "max-height 0.3s ease, opacity 0.3s ease"
+          },
+          children: /* @__PURE__ */ jsx(RecipientForm_default, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "px-4",
+          style: {
+            borderTop: "1px solid var(--widget-border)",
+            borderBottom: "1px solid var(--widget-border)"
+          },
+          children: /* @__PURE__ */ jsx(QuoteLoader_default, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `relative ${isShowingTxStatus ? "px-0" : "px-4"} ${isCompactMode ? "py-2" : "py-4"}`, children: userAddress && baseToken && quoteToken && baseAmount && baseAmount > 0 ? /* @__PURE__ */ jsx(
+      SwapButton,
+      {
+        base: baseToken,
+        baseAmount,
+        quote: quoteToken,
+        quoteAmount: quoteAmount ?? 0,
+        userAddress,
+        isWrappingPair,
+        isUnwrappingPair,
+        isBaseGasToken,
+        isQuoteGasToken,
+        reviewActionProps,
+        reviewState,
+        setReviewState,
+        trackedOrderHash,
+        setTrackedOrderHash,
+        onSwapComplete,
+        onSwapInitiated,
+        onOrderSubmitted,
+        onStaleQuoteRestart,
+        txStatus
+      }
+    ) : !userAddress && hasConnectHandler ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => openWalletModal(),
+        className: `w-full ${isCompactMode ? "py-2" : "py-3"} text-sm font-medium cursor-pointer transition-opacity hover:opacity-80`,
+        style: {
+          backgroundColor: "var(--widget-primary)",
+          color: "var(--widget-primary-foreground)",
+          borderRadius: "var(--widget-radius)"
+        },
+        children: "Connect Wallet"
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        disabled: true,
+        className: `w-full ${isCompactMode ? "py-2" : "py-3"} text-sm font-medium transition-colors disabled:opacity-40 cursor-not-allowed`,
+        style: {
+          backgroundColor: "var(--widget-primary)",
+          color: "var(--widget-primary-foreground)",
+          borderRadius: "var(--widget-radius)"
+        },
+        children: !userAddress ? "Connect Wallet" : "Enter Amount"
+      }
+    ) })
+  ] });
+};
+var SwapForm_default = SwapForm;
+
+// src/components/SwapFormSkeleton.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SwapFormSkeleton = () => /* @__PURE__ */ jsxs2("div", { className: "flex flex-col w-full", children: [
+  /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "relative px-4 pt-4 pb-2",
+      style: { borderBottom: "1px solid var(--widget-border)" },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "h-12 w-full animate-pulse",
+            style: { backgroundColor: "var(--widget-secondary)", borderRadius: "0.25rem" }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "mt-2 h-20 w-2/3 animate-pulse",
+            style: { backgroundColor: "var(--widget-secondary)", opacity: 0.5, borderRadius: "0.25rem" }
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { className: "mt-1 mb-1 flex w-full items-center justify-between", children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "h-4 w-12 animate-pulse",
+            style: { backgroundColor: "var(--widget-secondary)", opacity: 0.4, borderRadius: "0.25rem" }
+          }
+        ) })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx2("div", { className: "flex justify-center -my-4 relative z-10", children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "h-8 w-8",
+      style: {
+        border: "1px solid var(--widget-border)",
+        backgroundColor: "var(--widget-card)",
+        borderRadius: "9999px"
+      }
+    }
+  ) }),
+  /* @__PURE__ */ jsxs2("div", { className: "relative px-4 pt-6 pb-2", children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "h-12 w-full animate-pulse",
+        style: { backgroundColor: "var(--widget-secondary)", borderRadius: "0.25rem" }
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "mt-2 h-20 w-2/3 animate-pulse",
+        style: { backgroundColor: "var(--widget-secondary)", opacity: 0.5, borderRadius: "0.25rem" }
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: "mt-1 mb-1 flex w-full items-center justify-between", children: /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "h-4 w-12 animate-pulse",
+        style: { backgroundColor: "var(--widget-secondary)", opacity: 0.4, borderRadius: "0.25rem" }
+      }
+    ) })
+  ] }),
+  /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "px-4",
+      style: {
+        height: "28px",
+        borderTop: "1px solid var(--widget-border)",
+        borderBottom: "1px solid var(--widget-border)"
+      }
+    }
+  ),
+  /* @__PURE__ */ jsx2("div", { className: "relative px-4 py-4", children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "w-full animate-pulse",
+      style: {
+        height: "44px",
+        backgroundColor: "var(--widget-secondary)",
+        borderRadius: "var(--widget-radius)",
+        opacity: 0.6
+      }
+    }
+  ) })
+] });
+
+// src/components/SwapHeader.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useShallow as useShallow2 } from "zustand/react/shallow";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TextScrambleDisplay = ({
+  targetText,
+  isError
+}) => {
+  const { displayText, suffix, characterColors } = useTextScramble(
+    targetText,
+    isError
+  );
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    displayText.split("").map((char, index) => /* @__PURE__ */ jsx3(
+      "span",
+      {
+        style: characterColors[index] ? { color: "var(--widget-destructive)" } : void 0,
+        children: char
+      },
+      index
+    )),
+    /* @__PURE__ */ jsx3(
+      "span",
+      {
+        style: {
+          color: isError ? "var(--widget-destructive)" : "var(--widget-muted-foreground)",
+          opacity: isError ? 0.5 : 1
+        },
+        children: suffix
+      }
+    )
+  ] });
+};
+var SwapHeader = ({
+  headerText,
+  onBackClick,
+  isSameChain,
+  isWrappingPair,
+  isUnwrappingPair,
+  hasLowLiquidity,
+  hasInsufficientLiquidity,
+  hasRoutingError,
+  hasSizeCapError
+}) => {
+  const view = useWidgetSwapUIStore((state) => state.view);
+  const {
+    isRecipientInputOpen,
+    hasAllowanceError,
+    hoveredChainName,
+    isTrackingTx,
+    txStatus,
+    walletTab
+  } = useWidgetSwapUIStore(
+    useShallow2((state) => ({
+      isRecipientInputOpen: state.isRecipientInputOpen,
+      hasAllowanceError: state.hasAllowanceError,
+      hoveredChainName: state.hoveredChainName,
+      isTrackingTx: state.isTrackingTx,
+      txStatus: state.txStatus,
+      walletTab: state.walletTab
+    }))
+  );
+  const { web3ConnectionType, swapHeaderVariant, customWalletUI, walletButtonEnabled } = useWidgetConfig();
+  const { isConnected } = useWalletState();
+  const { openAccountModal } = useWalletModal();
+  const [mounted, setMounted] = useState2(false);
+  useEffect2(() => setMounted(true), []);
+  const [isRecipientButtonHovered, setIsRecipientButtonHovered] = useState2(false);
+  const scrambleKey = `${view}-${isRecipientButtonHovered}-${isRecipientInputOpen}-${hoveredChainName || "none"}`;
+  const getHeaderText = () => {
+    if (isTrackingTx && txStatus) {
+      switch (txStatus) {
+        case "pending":
+          return "Trade Pending";
+        case "received":
+          return "Trade Received";
+        case "completed":
+          return "Trade Filled";
+        case "failed":
+          return "Trade Failed";
+        case "cancelled":
+          return "Trade Cancelled";
+        default:
+          return "Processing Trade";
+      }
+    }
+    if (hoveredChainName && (view === "baseSelection" || view === "quoteSelection" || view === "baseChainSelection" || view === "quoteChainSelection")) {
+      return hoveredChainName;
+    }
+    if (view === "swap" && isRecipientButtonHovered) {
+      return isRecipientInputOpen ? "Remove Custom Recipient" : "Add Custom Recipient";
+    }
+    switch (view) {
+      case "wallet":
+        return "Wallet";
+      case "baseSelection":
+        return "Select Source Token";
+      case "quoteSelection":
+        return "Select Destination Token";
+      case "baseChainSelection":
+        return "Select Source Chain";
+      case "quoteChainSelection":
+        return "Select Destination Chain";
+      default:
+        if (view === "swap") {
+          if (hasAllowanceError && !isWrappingPair && !isUnwrappingPair)
+            return "Allowance check failed";
+          if (hasSizeCapError && !isWrappingPair && !isUnwrappingPair)
+            return "Size limit exceeded";
+          if (hasInsufficientLiquidity && !isWrappingPair && !isUnwrappingPair)
+            return "Insufficient Liquidity";
+          if (hasRoutingError && !isWrappingPair && !isUnwrappingPair)
+            return "Route Not Found";
+          if (hasLowLiquidity && !isWrappingPair && !isUnwrappingPair)
+            return "High Price Impact";
+        }
+        if (isSameChain && !isWrappingPair && !isUnwrappingPair) return "Swap";
+        if (isWrappingPair) return "Wrap";
+        if (isUnwrappingPair) return "Unwrap";
+        return headerText;
+    }
+  };
+  const targetHeaderText = getHeaderText();
+  const isErrorMessage = !isTrackingTx && view === "swap" && !isRecipientButtonHovered && (hasAllowanceError && !isWrappingPair && !isUnwrappingPair || hasSizeCapError && !isWrappingPair && !isUnwrappingPair || hasInsufficientLiquidity && !isWrappingPair && !isUnwrappingPair || hasRoutingError && !isWrappingPair && !isUnwrappingPair || hasLowLiquidity && !isWrappingPair && !isUnwrappingPair);
+  const statusVarMap = {
+    pending: "var(--widget-status-pending)",
+    received: "var(--widget-status-received)",
+    completed: "var(--widget-status-completed)",
+    failed: "var(--widget-status-failed)",
+    cancelled: "var(--widget-status-failed)"
+  };
+  const getHeaderTextColor = () => {
+    if (!isTrackingTx || !txStatus) return null;
+    return statusVarMap[txStatus] ?? null;
+  };
+  const renderRightComponent = () => {
+    if (isTrackingTx) return null;
+    if (view === "swap") {
+      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        walletButtonEnabled && mounted && web3ConnectionType === "custom" && isConnected && /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => {
+              if (customWalletUI === "provider" && openAccountModal) {
+                openAccountModal();
+              } else {
+                useWidgetSwapUIStore.getState().setView("wallet");
+              }
+            },
+            "aria-label": "Open wallet",
+            className: "size-4 -translate-y-0.5 flex cursor-pointer items-center justify-center rounded-full transition-colors text-(--widget-muted-foreground) opacity-60 hover:text-(--widget-foreground) hover:opacity-100",
+            children: /* @__PURE__ */ jsxs3(
+              "svg",
+              {
+                className: "size-3.5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                  /* @__PURE__ */ jsx3("rect", { x: "2", y: "5", width: "20", height: "15", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+                  /* @__PURE__ */ jsx3("path", { d: "M16 12C16 11.4477 16.4477 11 17 11H21V13H17C16.4477 13 16 12.5523 16 12Z", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx3("path", { d: "M2 9H22", stroke: "currentColor", strokeWidth: "1.5" })
+                ]
+              }
+            )
+          }
+        ),
+        walletButtonEnabled && mounted && web3ConnectionType === "standalone" && isConnected && openAccountModal && /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => openAccountModal(),
+            "aria-label": "Open account",
+            className: "size-4 -translate-y-0.5 flex cursor-pointer items-center justify-center rounded-full transition-colors text-(--widget-muted-foreground) opacity-60 hover:text-(--widget-foreground) hover:opacity-100",
+            children: /* @__PURE__ */ jsxs3(
+              "svg",
+              {
+                className: "size-3.5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                  /* @__PURE__ */ jsx3("rect", { x: "2", y: "5", width: "20", height: "15", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+                  /* @__PURE__ */ jsx3("path", { d: "M16 12C16 11.4477 16.4477 11 17 11H21V13H17C16.4477 13 16 12.5523 16 12Z", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx3("path", { d: "M2 9H22", stroke: "currentColor", strokeWidth: "1.5" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => useWidgetSwapUIStore.getState().toggleRecipientInput(),
+            onMouseEnter: () => setIsRecipientButtonHovered(true),
+            onMouseLeave: () => setIsRecipientButtonHovered(false),
+            "aria-label": isRecipientInputOpen ? "Remove custom recipient" : "Add custom recipient",
+            className: `size-4 -translate-y-0.5 flex cursor-pointer items-center justify-center rounded-full transition-colors hover:text-(--widget-foreground) hover:opacity-100 ${isRecipientInputOpen ? "text-(--widget-destructive) opacity-80" : "text-(--widget-muted-foreground) opacity-60"}`,
+            children: /* @__PURE__ */ jsxs3(
+              "svg",
+              {
+                className: "size-3.5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    "path",
+                    {
+                      d: "M2 7.75C1.58579 7.75 1.25 8.08579 1.25 8.5C1.25 8.91421 1.58579 9.25 2 9.25V7.75ZM2 8.5V9.25H13.5V8.5V7.75H2V8.5Z",
+                      fill: "currentColor"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "path",
+                    {
+                      d: "M6 16.5H8",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeMiterlimit: "10",
+                      strokeLinecap: "butt",
+                      strokeLinejoin: "miter"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "path",
+                    {
+                      d: "M10.5 16.5H14.5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeMiterlimit: "10",
+                      strokeLinecap: "butt",
+                      strokeLinejoin: "miter"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "path",
+                    {
+                      d: "M22 12.03V16.11C22 20.5 22 20.5 17.56 20.5H6.44C2 20.5 2 20.5 2 16.11V7.89C2 3.5 2 3.5 6.44 3.5H13.5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinejoin: "miter"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs3(
+                    "g",
+                    {
+                      style: {
+                        transform: `rotate(${isRecipientInputOpen ? "45deg" : "0deg"})`,
+                        transformOrigin: "18.75px 6.75px",
+                        transition: "transform 150ms ease-out"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx3(
+                          "path",
+                          {
+                            d: "M15 6.75H22.5",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx3(
+                          "path",
+                          {
+                            d: "M18.75 10.5V3",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: () => onBackClick ? onBackClick() : useWidgetSwapUIStore.getState().setView("swap"),
+        className: "flex cursor-pointer items-center justify-center whitespace-nowrap h-6 transition-colors text-(--widget-muted-foreground) opacity-70 hover:text-(--widget-foreground) hover:opacity-100",
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "pr-1", children: "\u2190" }),
+          /* @__PURE__ */ jsx3("span", { className: "text-sm", children: "Back" })
+        ]
+      }
+    );
+  };
+  const headerTextColor = getHeaderTextColor();
+  if (swapHeaderVariant === "none") return null;
+  return /* @__PURE__ */ jsxs3("div", { className: "w-full pt-3 px-2 mono text-base flex flex-row justify-between h-6 shrink-0", children: [
+    view === "wallet" ? /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 mono uppercase -translate-y-0.5 text-xs", children: [
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          onClick: () => useWidgetSwapUIStore.getState().setWalletTab("wallet"),
+          className: "cursor-pointer transition-colors",
+          style: {
+            color: walletTab === "wallet" ? "var(--widget-foreground)" : "var(--widget-muted-foreground)"
+          },
+          children: [
+            /* @__PURE__ */ jsx3("span", { style: { color: "var(--widget-muted-foreground)" }, children: ">> " }),
+            /* @__PURE__ */ jsx3("span", { children: "Wallet" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3("span", { style: { color: "var(--widget-foreground)", opacity: 0.4 }, children: ">>" }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: () => useWidgetSwapUIStore.getState().setWalletTab("activity"),
+          className: "cursor-pointer transition-colors",
+          style: {
+            color: walletTab === "activity" ? "var(--widget-foreground)" : "var(--widget-muted-foreground)"
+          },
+          children: "Activity"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs3("div", { className: "mono uppercase -translate-y-0.5 text-xs flex items-center", children: [
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "mr-1.5",
+          style: { color: "var(--widget-muted-foreground)", opacity: 0.4 },
+          children: ">> "
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "relative",
+          style: { color: headerTextColor || "var(--widget-foreground)" },
+          children: /* @__PURE__ */ jsx3(
+            TextScrambleDisplay,
+            {
+              targetText: targetHeaderText,
+              isError: isErrorMessage ?? false
+            }
+          )
+        },
+        scrambleKey
+      )
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "flex flex-row items-center", children: renderRightComponent() })
+  ] });
+};
+var SwapHeader_default = SwapHeader;
+
+// src/components/SwapContainer.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var AssetSelectionMenu = lazy(() => import("./AssetSelectionMenu-ZRG42UCZ.js"));
+var ChainSelectionMenu = lazy(() => import("./ChainSelectionMenu-QO3H4TNR.js"));
+var SwapFormHorizontal = lazy(() => import("./SwapFormHorizontal-JDJUDFNX.js"));
+var SwapFormSplit = lazy(() => import("./SwapFormSplit-7CHTPLEQ.js"));
+var WidgetWalletPanel = lazy(() => import("./WidgetWalletPanel-D7I5TAU3.js").then((m) => ({ default: m.WidgetWalletPanel })));
+var WalletPlaceholderPanel = lazy(() => import("./WalletPlaceholderPanel-7YDQ4FT6.js").then((m) => ({ default: m.WalletPlaceholderPanel })));
+var SwapContainerInner = ({
+  onSwapComplete,
+  cardStyles,
+  cardWidth
+}) => {
+  const {
+    baseToken,
+    quoteToken,
+    baseAmount,
+    quoteAmount,
+    isWrappingPair,
+    isUnwrappingPair,
+    isRegistryLoading
+  } = useSwapFormContext();
+  const { liquidityError, routingError, sizeCapError, stop, clear } = useRfq();
+  const view = useWidgetSwapUIStore((state) => state.view);
+  const {
+    isTransitioning,
+    isRecipientInputOpen,
+    recipient,
+    selectedChainFilterChainId
+  } = useWidgetSwapUIStore(
+    useShallow3((state) => ({
+      isTransitioning: state.isTransitioning,
+      isRecipientInputOpen: state.isRecipientInputOpen,
+      recipient: state.recipient,
+      selectedChainFilterChainId: state.selectedChainFilter?.chainId ?? null
+    }))
+  );
+  const enterTimeoutRef = useRef2(null);
+  const exitTimeoutRef = useRef2(null);
+  const [exitingOverlay, setExitingOverlay] = useState3(null);
+  useBalanceEventSubscription();
+  useEffect3(() => {
+    return () => {
+      if (enterTimeoutRef.current) clearTimeout(enterTimeoutRef.current);
+      if (exitTimeoutRef.current) clearTimeout(exitTimeoutRef.current);
+    };
+  }, []);
+  useEffect3(() => {
+    useWidgetSwapUIStore.getState().resetUI();
+  }, []);
+  useEffect3(() => {
+    if (!isTransitioning) return;
+    enterTimeoutRef.current = setTimeout(() => {
+      useWidgetSwapUIStore.getState().setIsTransitioning(false);
+      enterTimeoutRef.current = null;
+    }, 20);
+    return () => {
+      if (enterTimeoutRef.current) {
+        clearTimeout(enterTimeoutRef.current);
+        enterTimeoutRef.current = null;
+      }
+    };
+  }, [isTransitioning]);
+  const transitionToView = useCallback2(
+    (newView, type = "navigation") => {
+      if (exitTimeoutRef.current) {
+        clearTimeout(exitTimeoutRef.current);
+        exitTimeoutRef.current = null;
+        setExitingOverlay(null);
+      }
+      const currentView = useWidgetSwapUIStore.getState().view;
+      if (currentView !== "swap" && newView !== "swap") {
+        useWidgetSwapUIStore.getState().setView(newView);
+        useWidgetSwapUIStore.getState().setIsTransitioning(false);
+      } else {
+        useWidgetSwapUIStore.getState().transitionToView(newView, type);
+      }
+    },
+    []
+  );
+  const handleBackToSwap = useCallback2(() => {
+    if (enterTimeoutRef.current) {
+      clearTimeout(enterTimeoutRef.current);
+      enterTimeoutRef.current = null;
+    }
+    if (exitTimeoutRef.current) {
+      clearTimeout(exitTimeoutRef.current);
+      exitTimeoutRef.current = null;
+    }
+    const currentView = useWidgetSwapUIStore.getState().view;
+    setExitingOverlay(currentView);
+    useWidgetSwapUIStore.getState().setChainFilter(null);
+    useWidgetSwapUIStore.getState().setView("swap");
+    useWidgetSwapUIStore.getState().setIsTransitioning(false);
+    useWidgetSwapUIStore.getState().resetAssetSelection();
+    exitTimeoutRef.current = setTimeout(() => {
+      setExitingOverlay(null);
+      exitTimeoutRef.current = null;
+    }, 200);
+  }, []);
+  const handleChainFilterSelect = useCallback2(
+    (chainId) => {
+      const previousView = view;
+      const side = previousView === "baseChainSelection" ? "base" : "quote";
+      useWidgetSwapUIStore.getState().setChainFilter({ chainId, side });
+      useWidgetSwapUIStore.getState().pushRecentChain(chainId);
+      transitionToView(
+        side === "base" ? "baseSelection" : "quoteSelection",
+        "chainSelection"
+      );
+    },
+    [view, transitionToView]
+  );
+  const handleMoreChainsClick = useCallback2(() => {
+    const currentView = useWidgetSwapUIStore.getState().view;
+    if (currentView === "baseSelection") {
+      transitionToView("baseChainSelection", "chainSelection");
+    } else if (currentView === "quoteSelection") {
+      transitionToView("quoteChainSelection", "chainSelection");
+    }
+  }, [transitionToView]);
+  const handleSwapInitiated = useCallback2(() => {
+    stop();
+    clear();
+  }, [stop, clear]);
+  const isSameChain = baseToken && quoteToken ? baseToken.chainId === quoteToken.chainId : true;
+  const getHeaderText = () => {
+    switch (view) {
+      case "wallet":
+        return "Wallet";
+      case "baseSelection":
+        return "Select Input Token";
+      case "quoteSelection":
+        return "Select Output Token";
+      case "baseChainSelection":
+      case "quoteChainSelection":
+        return "Select Chain";
+      default:
+        return "Swap";
+    }
+  };
+  const { assetMenuVariant, widgetType, customWalletUI } = useWidgetConfig();
+  const isTokenSelection = view === "baseSelection" || view === "quoteSelection";
+  const isChainSelection = view === "baseChainSelection" || view === "quoteChainSelection";
+  const isSideBySide = assetMenuVariant === "split" && (widgetType === "default" || widgetType === "compact");
+  const isInlineMenu = assetMenuVariant === "split" && (widgetType === "horizontal" || widgetType === "split");
+  const isPanelMode = assetMenuVariant === "default";
+  const showSwapForm = view === "swap" || isTokenSelection || isChainSelection || view === "wallet";
+  const isTokenSelectionExiting = exitingOverlay === "baseSelection" || exitingOverlay === "quoteSelection";
+  const isChainSelectionExiting = exitingOverlay === "baseChainSelection" || exitingOverlay === "quoteChainSelection";
+  const showTokenOverlay = isTokenSelection || isTokenSelectionExiting;
+  const showChainOverlay = isChainSelection || isChainSelectionExiting;
+  const isTokenOverlayActive = isTokenSelection && !isTransitioning;
+  const isChainOverlayActive = isChainSelection && !isTransitioning;
+  const effectiveTokenView = isTokenSelection ? view : exitingOverlay;
+  const menuSide = effectiveTokenView === "baseSelection" ? "base" : "quote";
+  const menuOtherAsset = effectiveTokenView === "baseSelection" ? quoteToken : baseToken;
+  const effectiveChainView = isChainSelection ? view : exitingOverlay;
+  const chainMenuSide = effectiveChainView === "baseChainSelection" ? "base" : "quote";
+  const overlayStyle = (isActive) => ({
+    backgroundColor: "var(--widget-background)",
+    opacity: isActive ? 1 : 0,
+    transform: isActive ? "translateY(0)" : "translateY(6px)",
+    transition: "opacity 200ms ease-in-out, transform 200ms ease-in-out"
+  });
+  const hasActiveOverlay = isPanelMode && (isTokenSelection || isChainSelection || view === "wallet" || exitingOverlay != null);
+  const formContent = isRegistryLoading ? /* @__PURE__ */ jsx4(SwapFormSkeleton, {}) : widgetType === "horizontal" ? /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: /* @__PURE__ */ jsx4(
+    SwapFormHorizontal,
+    {
+      onSwapComplete,
+      onSwapInitiated: handleSwapInitiated,
+      onBackToSwap: isInlineMenu ? handleBackToSwap : void 0,
+      onMoreChainsClick: isInlineMenu ? handleMoreChainsClick : void 0
+    }
+  ) }) : widgetType === "split" ? /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: /* @__PURE__ */ jsx4(
+    SwapFormSplit,
+    {
+      onSwapComplete,
+      onSwapInitiated: handleSwapInitiated,
+      onBackToSwap: isInlineMenu ? handleBackToSwap : void 0,
+      onMoreChainsClick: isInlineMenu ? handleMoreChainsClick : void 0
+    }
+  ) }) : /* @__PURE__ */ jsx4(SwapForm_default, { onSwapComplete, onSwapInitiated: handleSwapInitiated });
+  const cs = cardStyles ?? {};
+  const leftCardRef = useRef2(null);
+  const [leftCardHeight, setLeftCardHeight] = useState3(420);
+  useEffect3(() => {
+    if (!isSideBySide) return;
+    const el = leftCardRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setLeftCardHeight(entry.contentRect.height);
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isSideBySide]);
+  if (isSideBySide) {
+    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          ref: leftCardRef,
+          className: "flex flex-col w-full overflow-hidden transition-colors duration-300",
+          style: {
+            flex: "1 1 0",
+            minWidth: 0,
+            ...cs
+          },
+          children: [
+            /* @__PURE__ */ jsx4(
+              SwapHeader_default,
+              {
+                headerText: "Swap",
+                onBackClick: handleBackToSwap,
+                isSameChain,
+                isWrappingPair,
+                isUnwrappingPair,
+                hasLowLiquidity: liquidityError,
+                hasInsufficientLiquidity: liquidityError,
+                hasRoutingError: routingError,
+                hasSizeCapError: sizeCapError
+              }
+            ),
+            /* @__PURE__ */ jsx4("div", { className: "overflow-hidden", children: formContent })
+          ]
+        }
+      ),
+      (showTokenOverlay || showChainOverlay) && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: "flex flex-col overflow-hidden shrink-0",
+          style: {
+            width: cardWidth,
+            height: `${leftCardHeight}px`,
+            ...cs,
+            ...overlayStyle(
+              (isTokenSelection || isChainSelection) && !isTransitioning
+            )
+          },
+          children: isTokenSelection || isTokenSelectionExiting ? /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: /* @__PURE__ */ jsx4(
+            AssetSelectionMenu,
+            {
+              toggle: handleBackToSwap,
+              side: menuSide,
+              otherAsset: menuOtherAsset,
+              onMoreChainsClick: handleMoreChainsClick,
+              selectedChainFilter: selectedChainFilterChainId
+            }
+          ) }) : /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: /* @__PURE__ */ jsx4(
+            ChainSelectionMenu,
+            {
+              toggle: handleBackToSwap,
+              side: chainMenuSide,
+              onChainSelect: handleChainFilterSelect
+            }
+          ) })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "flex flex-col w-full",
+      style: {
+        overflow: "hidden",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          SwapHeader_default,
+          {
+            headerText: getHeaderText(),
+            onBackClick: handleBackToSwap,
+            isSameChain,
+            isWrappingPair,
+            isUnwrappingPair,
+            hasLowLiquidity: liquidityError,
+            hasInsufficientLiquidity: liquidityError,
+            hasRoutingError: routingError,
+            hasSizeCapError: sizeCapError
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: "relative overflow-hidden", children: [
+          showSwapForm && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "overflow-hidden",
+              style: hasActiveOverlay ? { pointerEvents: "none" } : void 0,
+              children: formContent
+            }
+          ),
+          (view === "wallet" || exitingOverlay === "wallet") && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "absolute inset-0 overflow-hidden",
+              style: overlayStyle(view === "wallet" && !isTransitioning),
+              children: /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: customWalletUI === "none" ? /* @__PURE__ */ jsx4(WalletPlaceholderPanel, {}) : /* @__PURE__ */ jsx4(WidgetWalletPanel, {}) })
+            }
+          ),
+          isPanelMode && showTokenOverlay && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "absolute inset-0 overflow-hidden",
+              style: overlayStyle(isTokenOverlayActive),
+              children: /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: /* @__PURE__ */ jsx4(
+                AssetSelectionMenu,
+                {
+                  toggle: handleBackToSwap,
+                  side: menuSide,
+                  otherAsset: menuOtherAsset,
+                  onMoreChainsClick: handleMoreChainsClick,
+                  selectedChainFilter: selectedChainFilterChainId
+                }
+              ) })
+            }
+          ),
+          isPanelMode && showChainOverlay && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "absolute inset-0 overflow-hidden",
+              style: overlayStyle(isChainOverlayActive),
+              children: /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: /* @__PURE__ */ jsx4(
+                ChainSelectionMenu,
+                {
+                  toggle: handleBackToSwap,
+                  side: chainMenuSide,
+                  onChainSelect: handleChainFilterSelect
+                }
+              ) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var SwapContainer = ({
+  onSwapComplete,
+  defaultBaseToken,
+  defaultQuoteToken,
+  onBaseTokenChange,
+  onQuoteTokenChange,
+  cardStyles,
+  cardWidth
+}) => {
+  const { address: userAddress } = useWalletState();
+  const recipient = useWidgetSwapUIStore((s) => s.recipient);
+  return /* @__PURE__ */ jsx4(
+    SwapFormProvider,
+    {
+      defaultBaseToken,
+      defaultQuoteToken,
+      onBaseTokenChange,
+      onQuoteTokenChange,
+      children: /* @__PURE__ */ jsx4(RfqProvider, { recipient, children: /* @__PURE__ */ jsx4(
+        SwapContainerInner,
+        {
+          onSwapComplete,
+          cardStyles,
+          cardWidth
+        }
+      ) })
+    }
+  );
+};
+
+// src/theme/ThemeContext.tsx
+import { createContext, useContext } from "react";
+
+// src/theme/types.ts
+var defaultLightTheme = {
+  background: "#ffffff",
+  foreground: "#0a0a0a",
+  card: "#ffffff",
+  "card-foreground": "#0a0a0a",
+  popover: "#ffffff",
+  "popover-foreground": "#0a0a0a",
+  primary: "#171717",
+  "primary-foreground": "#fafafa",
+  secondary: "#f5f5f5",
+  "secondary-foreground": "#171717",
+  muted: "#f5f5f5",
+  "muted-foreground": "#737373",
+  accent: "#f5f5f5",
+  "accent-foreground": "#171717",
+  destructive: "#e7000b",
+  "destructive-foreground": "#ffffff",
+  border: "#e5e5e5",
+  input: "#e5e5e5",
+  ring: "#a1a1a1",
+  radius: "0.625rem",
+  "border-style": "dotted",
+  "status-pending": "#a1a1aa",
+  "status-received": "#f59e0b",
+  "status-completed": "#10b981",
+  "status-failed": "#ef4444"
+};
+var defaultDarkTheme = {
+  background: "#0a0a0a",
+  foreground: "#fafafa",
+  card: "#171717",
+  "card-foreground": "#fafafa",
+  popover: "#262626",
+  "popover-foreground": "#fafafa",
+  primary: "#e5e5e5",
+  "primary-foreground": "#171717",
+  secondary: "#262626",
+  "secondary-foreground": "#fafafa",
+  muted: "#262626",
+  "muted-foreground": "#a1a1a1",
+  accent: "#404040",
+  "accent-foreground": "#fafafa",
+  destructive: "#ff6467",
+  "destructive-foreground": "#fafafa",
+  border: "#282828",
+  input: "#343434",
+  ring: "#737373",
+  radius: "0.625rem",
+  "border-style": "dotted",
+  "status-pending": "#a1a1aa",
+  "status-received": "#fbbf24",
+  "status-completed": "#2dd4bf",
+  "status-failed": "#fb7185"
+};
+function themeToCSS(theme) {
+  const vars = {
+    "--widget-background": theme.background,
+    "--widget-foreground": theme.foreground,
+    "--widget-card": theme.card,
+    "--widget-card-foreground": theme["card-foreground"],
+    "--widget-popover": theme.popover,
+    "--widget-popover-foreground": theme["popover-foreground"],
+    "--widget-primary": theme.primary,
+    "--widget-primary-foreground": theme["primary-foreground"],
+    "--widget-secondary": theme.secondary,
+    "--widget-secondary-foreground": theme["secondary-foreground"],
+    "--widget-muted": theme.muted,
+    "--widget-muted-foreground": theme["muted-foreground"],
+    "--widget-accent": theme.accent,
+    "--widget-accent-foreground": theme["accent-foreground"],
+    "--widget-destructive": theme.destructive,
+    "--widget-destructive-foreground": theme["destructive-foreground"],
+    "--widget-border": theme.border,
+    "--widget-input": theme.input,
+    "--widget-ring": theme.ring,
+    "--widget-radius": theme.radius,
+    "--widget-border-style": theme["border-style"] || "dotted"
+  };
+  vars["--widget-font-sans"] = theme["font-sans"] || "inherit";
+  vars["--widget-font-mono"] = theme["font-mono"] || "inherit";
+  vars["--widget-shadow-color"] = theme["shadow-color"] || "oklch(0 0 0)";
+  vars["--widget-shadow-opacity"] = theme["shadow-opacity"] || "0.1";
+  vars["--widget-shadow-blur"] = theme["shadow-blur"] || "3px";
+  vars["--widget-shadow-spread"] = theme["shadow-spread"] || "0px";
+  vars["--widget-shadow-offset-x"] = theme["shadow-offset-x"] || "0";
+  vars["--widget-shadow-offset-y"] = theme["shadow-offset-y"] || "1px";
+  vars["--widget-letter-spacing"] = theme["letter-spacing"] || "normal";
+  vars["--widget-status-pending"] = theme["status-pending"] || "#a1a1aa";
+  vars["--widget-status-received"] = theme["status-received"] || "#fbbf24";
+  vars["--widget-status-completed"] = theme["status-completed"] || "#2dd4bf";
+  vars["--widget-status-failed"] = theme["status-failed"] || "#fb7185";
+  return vars;
+}
+
+// src/theme/ThemeContext.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var WidgetThemeContext = createContext(defaultDarkTheme);
+function WidgetThemeProvider({ theme, children }) {
+  return /* @__PURE__ */ jsx5(WidgetThemeContext.Provider, { value: theme, children });
+}
+function useWidgetTheme() {
+  return useContext(WidgetThemeContext);
+}
+
+// src/SwapWidget.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var EMPTY_CHAINS = [];
+var EMPTY_SUPPORTED_INPUT_TOKENS = [];
+var EMPTY_SUPPORTED_OUTPUT_TOKENS = [];
+var EMPTY_SUPPORTED_CHAINS = [];
+var WIDGET_CRITICAL_CSS = `
+.aori-widget .text-2xs { font-size: 0.75rem; }
+.aori-widget .text-3xs { font-size: 0.68rem; }
+.aori-widget ::-webkit-scrollbar { width: 0px; height: 0px; display: none; }
+.aori-widget * { scrollbar-width: none; }
+.aori-widget input:focus, .aori-widget input:focus-visible,
+.aori-widget button:focus, .aori-widget button:focus-visible,
+.aori-widget select:focus, .aori-widget select:focus-visible { outline: none; }
+`;
+var WidgetErrorBoundary = class extends React2.Component {
+  state = { hasError: false };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxs5("div", { style: { padding: "1.5rem", textAlign: "center", color: "var(--widget-foreground, #888)", fontFamily: "system-ui, sans-serif" }, children: [
+        /* @__PURE__ */ jsx6("p", { style: { margin: "0 0 0.75rem", fontSize: "0.875rem" }, children: "Something went wrong." }),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            onClick: () => this.setState({ hasError: false }),
+            style: {
+              padding: "0.375rem 1rem",
+              fontSize: "0.8125rem",
+              cursor: "pointer",
+              border: "1px solid currentColor",
+              borderRadius: "0.25rem",
+              background: "transparent",
+              color: "inherit"
+            },
+            children: "Retry"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+};
+function resolveTheme(cfg) {
+  const base = cfg.theme.mode === "light" ? defaultLightTheme : defaultDarkTheme;
+  const override = cfg.theme.mode === "light" ? cfg.theme.light : cfg.theme.dark;
+  return override ? { ...base, ...override } : base;
+}
+function SwapWidget({
+  config,
+  className,
+  onSwapComplete,
+  onBaseTokenChange,
+  onQuoteTokenChange,
+  onRequestConnect,
+  onRequestAccount,
+  customWalletUI = "builtin"
+}) {
+  setApiKey(config.apiKey);
+  setRpcOverrides(config.rpcOverrides);
+  setVtApiBaseUrl(config.vtApiBaseUrl);
+  const theme = resolveTheme(config);
+  const widgetType = config.appearance?.widgetType ?? "default";
+  const tokenDisplay = config.appearance?.tokenDisplay ?? "default";
+  const tokenBadgeOrientation = config.appearance?.tokenBadgeOrientation ?? "left";
+  const assetMenuVariant = config.appearance?.assetMenuVariant ?? "default";
+  const amountInputVariant = config.appearance?.amountInputVariant ?? "default";
+  const hideAmountInputSymbol = config.appearance?.hideAmountInputSymbol ?? false;
+  const swapButtonVariant = config.appearance?.swapButtonVariant ?? "default";
+  const swapHeaderVariant = config.appearance?.swapHeaderVariant ?? "default";
+  const quoteLoaderVariant = config.appearance?.quoteLoaderVariant ?? "default";
+  const walletButtonEnabled = config.appearance?.walletButtonEnabled ?? true;
+  const fillContainer = config.appearance?.fillContainer ?? false;
+  const hideBorder = config.appearance?.hideBorder ?? false;
+  const cssVars = themeToCSS(theme);
+  const isSplitSideBySide = assetMenuVariant === "split" && (widgetType === "default" || widgetType === "compact");
+  const isSelectionOpen = useWidgetSwapUIStore(
+    (s) => s.view === "baseSelection" || s.view === "quoteSelection" || s.view === "baseChainSelection" || s.view === "quoteChainSelection"
+  );
+  const cardWidth = widgetType === "compact" ? "22rem" : "24rem";
+  const expandedMaxWidth = widgetType === "compact" ? "46rem" : "49rem";
+  const widgetDimensions = isSplitSideBySide ? {
+    maxWidth: isSelectionOpen ? expandedMaxWidth : cardWidth,
+    transition: "max-width 0.3s ease",
+    height: "auto",
+    overflow: "visible",
+    display: "flex",
+    gap: "1rem",
+    alignItems: "stretch",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: 0,
+    boxShadow: "none",
+    padding: 0
+  } : {
+    width: "100%",
+    ...fillContainer ? {} : {
+      maxWidth: widgetType === "split" ? "48rem" : widgetType === "horizontal" ? "48rem" : widgetType === "compact" ? "22rem" : "24rem"
+    },
+    height: "auto",
+    overflow: "hidden"
+  };
+  const cardStyles = {
+    boxSizing: "border-box",
+    backgroundColor: "var(--widget-background)",
+    color: "var(--widget-foreground)",
+    borderRadius: "var(--widget-radius)",
+    ...hideBorder ? { border: "none" } : {
+      borderWidth: "1px",
+      borderStyle: "var(--widget-border-style)",
+      borderColor: "var(--widget-border)"
+    },
+    boxShadow: "var(--widget-shadow-offset-x) var(--widget-shadow-offset-y) var(--widget-shadow-blur) var(--widget-shadow-spread) color-mix(in srgb, var(--widget-shadow-color) calc(var(--widget-shadow-opacity) * 100%), transparent)",
+    padding: "0.25rem 0.5rem",
+    paddingTop: "0.25rem"
+  };
+  const enabledChains = config.tokens?.enabledChains ?? EMPTY_CHAINS;
+  const supportedInputTokens = config.tokens?.supportedInputTokens ?? EMPTY_SUPPORTED_INPUT_TOKENS;
+  const supportedOutputTokens = config.tokens?.supportedOutputTokens ?? EMPTY_SUPPORTED_OUTPUT_TOKENS;
+  const supportedInputChains = config.tokens?.supportedInputChains ?? EMPTY_SUPPORTED_CHAINS;
+  const supportedOutputChains = config.tokens?.supportedOutputChains ?? EMPTY_SUPPORTED_CHAINS;
+  const inputSelectionSearch = config.tokens?.inputSelectionSearch ?? true;
+  const outputSelectionSearch = config.tokens?.outputSelectionSearch ?? true;
+  const showInputSelectionTokenBalances = config.tokens?.showInputSelectionTokenBalances ?? true;
+  const showOutputSelectionTokenBalances = config.tokens?.showOutputSelectionTokenBalances ?? true;
+  const lockBase = config.tokens?.lockBase ?? false;
+  const lockQuote = config.tokens?.lockQuote ?? false;
+  const disableInverting = config.tokens?.disableInverting ?? false;
+  const defaultSlippage = config.settings?.defaultSlippage ?? 0.01;
+  const hasConnectHandler = !!onRequestConnect;
+  const widgetConfigValue = useMemo2(
+    () => ({
+      apiKey: config.apiKey,
+      web3ConnectionType: "custom",
+      enabledChains,
+      supportedInputTokens,
+      supportedOutputTokens,
+      supportedInputChains,
+      supportedOutputChains,
+      inputSelectionSearch,
+      outputSelectionSearch,
+      showInputSelectionTokenBalances,
+      showOutputSelectionTokenBalances,
+      lockBase,
+      lockQuote,
+      disableInverting,
+      defaultSlippage,
+      widgetType,
+      tokenDisplay,
+      tokenBadgeOrientation,
+      assetMenuVariant,
+      amountInputVariant,
+      hideAmountInputSymbol,
+      swapButtonVariant,
+      swapHeaderVariant,
+      quoteLoaderVariant,
+      walletButtonEnabled,
+      hasConnectHandler,
+      customWalletUI
+    }),
+    [
+      config.apiKey,
+      enabledChains,
+      supportedInputTokens,
+      supportedOutputTokens,
+      supportedInputChains,
+      supportedOutputChains,
+      inputSelectionSearch,
+      outputSelectionSearch,
+      showInputSelectionTokenBalances,
+      showOutputSelectionTokenBalances,
+      lockBase,
+      lockQuote,
+      disableInverting,
+      defaultSlippage,
+      widgetType,
+      tokenDisplay,
+      tokenBadgeOrientation,
+      assetMenuVariant,
+      amountInputVariant,
+      hideAmountInputSymbol,
+      swapButtonVariant,
+      swapHeaderVariant,
+      quoteLoaderVariant,
+      walletButtonEnabled,
+      hasConnectHandler,
+      customWalletUI
+    ]
+  );
+  const walletModalValue = useMemo2(
+    () => onRequestConnect ? { openConnectModal: onRequestConnect, openAccountModal: onRequestAccount } : null,
+    [onRequestConnect, onRequestAccount]
+  );
+  const inner = /* @__PURE__ */ jsx6(AoriClientProvider, { children: /* @__PURE__ */ jsx6(WidgetConfigContext.Provider, { value: widgetConfigValue, children: /* @__PURE__ */ jsx6(WidgetThemeProvider, { theme, children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `aori-widget${className ? ` ${className}` : ""}`,
+      style: {
+        ...cssVars,
+        "--font-sans": "var(--widget-font-sans)",
+        "--font-mono": "var(--widget-font-mono)",
+        fontFamily: "var(--widget-font-sans)",
+        letterSpacing: "var(--widget-letter-spacing)",
+        width: "100%",
+        ...widgetDimensions,
+        position: "relative",
+        ...isSplitSideBySide ? {} : cardStyles
+      },
+      children: [
+        /* @__PURE__ */ jsx6("style", { dangerouslySetInnerHTML: { __html: WIDGET_CRITICAL_CSS } }),
+        /* @__PURE__ */ jsx6(WidgetErrorBoundary, { children: /* @__PURE__ */ jsx6(
+          SwapContainer,
+          {
+            onSwapComplete,
+            defaultBaseToken: config.tokens?.defaultBase,
+            defaultQuoteToken: config.tokens?.defaultQuote,
+            onBaseTokenChange,
+            onQuoteTokenChange,
+            cardStyles: isSplitSideBySide ? cardStyles : void 0,
+            cardWidth: isSplitSideBySide ? cardWidth : void 0
+          }
+        ) })
+      ]
+    }
+  ) }) }) });
+  if (walletModalValue) {
+    return /* @__PURE__ */ jsx6(WalletModalContext.Provider, { value: walletModalValue, children: inner });
+  }
+  return inner;
+}
+
+// src/wallet/ConnectButton.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ConnectButton() {
+  const { openConnectModal } = useWalletModal();
+  const { isConnected, address } = useWalletState();
+  const label = isConnected && address ? `${address.slice(0, 6)}...${address.slice(-4)}` : "Connect";
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      onClick: () => openConnectModal(),
+      className: "h-8 cursor-pointer px-3 text-xs font-bold uppercase tracking-wide transition-colors duration-150 border border-border rounded-sm bg-card text-foreground hover:bg-secondary hover:border-foreground/20",
+      children: label
+    }
+  );
+}
+
+// src/wallet/shared/transports.ts
+import { http, fallback } from "wagmi";
+function buildTransports(rpcOverrides) {
+  const chainEntries = Object.entries(staticChainsConfig);
+  return Object.fromEntries(
+    chainEntries.map(([id, c]) => {
+      const override = rpcOverrides?.[Number(id)];
+      const overrideUrls = override ? Array.isArray(override) ? override : [override] : [];
+      const urls = overrideUrls.length > 0 ? [...overrideUrls, ...c.rpcUrls] : c.rpcUrls;
+      return [
+        id,
+        urls.length > 1 ? fallback(urls.map((url) => http(url, { batch: { batchSize: 50, wait: 50 } }))) : http(urls[0], { batch: { batchSize: 50, wait: 50 } })
+      ];
+    })
+  );
+}
+var wagmiChains = getAllChainConfigs().map((c) => c.wagmiChain);
+
+// src/hooks/useTokenHelpers.ts
+import { useMemo as useMemo3 } from "react";
+var useTokensForChain = (chainId) => {
+  const { tokenRegistry, isLoadingRegistry, error } = useTokenData();
+  const tokens = useMemo3(() => {
+    return tokenRegistry.filter((token) => token.chainId === chainId);
+  }, [tokenRegistry, chainId]);
+  return { tokens, isLoading: isLoadingRegistry, error };
+};
+var useIsTokenSupported = (address, chainId) => {
+  const { tokenRegistry } = useTokenData();
+  return useMemo3(() => {
+    if (!address || !tokenRegistry.length) return false;
+    return tokenRegistry.some(
+      (token) => token.address.toLowerCase() === address.toLowerCase() && token.chainId === chainId
+    );
+  }, [tokenRegistry, address, chainId]);
+};
+var useTokenByAddress = (address, chainId) => {
+  const { getToken } = useTokenData();
+  return useMemo3(() => {
+    if (!address || !chainId) return void 0;
+    return getToken(chainId, address);
+  }, [getToken, address, chainId]);
+};
+var SUPPORTED_CHAINS = getChainKeyToIdMapping();
+export {
+  ChainSwitch,
+  ConnectButton,
+  RfqProvider,
+  SignSwap,
+  SwapFormProvider,
+  SwapWidget,
+  WidgetThemeProvider,
+  buildTransports,
+  canSubmitOrder,
+  cleanupOldSubmissions,
+  defaultDarkTheme,
+  defaultLightTheme,
+  isQuoteFresh,
+  markOrderAsSubmitted,
+  pollOrderStatus,
+  themeToCSS,
+  useBalanceEventListener,
+  useBalanceEventSubscription,
+  useEmitBalanceEvent,
+  useIsTokenSupported,
+  useOrderStatusPolling,
+  useRfq,
+  useSwapForm,
+  useSwapFormContext,
+  useTokenByAddress,
+  useTokenSelection,
+  useTokenSelectionStore,
+  useTokensForChain,
+  useTransactionRegistry,
+  useUnwrapToken,
+  useWalletModal,
+  useWalletState,
+  useWidgetSwapUIStore,
+  useWidgetTheme,
+  useWrapToken,
+  wagmiChains
+};
+//# sourceMappingURL=index.js.map