@velora-dex/widget 0.1.0-rc.2 → 0.1.0

package/dist/core/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { d as distExports } from '../_virtual/index.js';
 import '../styles.css';/* empty css                   */
 import { TokenInput } from '../components/widget/TokenInput/index.js';
@@ -7,12 +7,12 @@ import { DialogRoot } from '../components/widget/Dialog/DialogRoot.js';
 import '../components/ui/button.js';
 import { JotaiProvider, Web3Providers } from '../components/web3/providers.js';
 import { useAccount } from 'wagmi';
-import { WIDGET_ELEMENT_ID } from './constants.js';
+import { WIDGET_HEIGHT_CLASSNAME, WIDGET_ELEMENT_ID } from './constants.js';
 import { Updaters } from './Updaters.js';
 import { useTokenToInputProps } from './inputs/hooks/useTokenToInputProps.js';
 import { TokenSwitcher } from '../components/widget/TokenSwitcher/TokenSwitcher.js';
 import { cn } from '../lib/utils/index.js';
-import { useTokenSwitcherProps } from './inputs/hooks/useTokenSwitcherProps.js';
+import { useSwapTokenSwitcherProps } from './inputs/hooks/useTokenSwitcherProps.js';
 import { runSubscriptions } from './subscriptions.js';
 import { PrivyIframeDependency } from '../components/web3/ConnectWallets/privy/iframe.js';
 import { SwapModeSwitcherExpandable } from '../components/widget/SwapModeSwitcher/SwapModeSwitcherExpandable.js';
@@ -34,12 +34,192 @@ import { useSwapPrices } from '../hooks/swap/prices/useSwapPrices.js';
 import { Toaster } from './Toaster.js';
 import { externalProviderAtom } from './state/externalProviderAtom.js';
 import { AutoconnectExternalProvider } from '../components/web3/ConnectExternalProvider/AutoconnectExternal.js';
-import { TradeFlowButton } from './TradeFlowButton.js';
+import { SwapTradeFlowButton } from './TradeFlowButton.js';
 import { ConnectWalletDrawerButton } from './ConnectWalletDrawerButton.js';
+import { PriceInput } from '../components/widget/LimitPriceInput/index.js';
+import { OrderExpiryInput } from '../components/widget/OrderExpiryInput/index.js';
+import { useLimitTokenToInputProps } from './limit/useLimitTokenToInputProps.js';
+import { useLimitTokenFromInputProps } from './limit/useLimitTokenFromInputProps.js';
+import { useTradeMode } from './state/tradeModeAtom.js';
 import { useDrawerContainerHeightTransition } from '../components/widget/Drawer/state/useDrawerControls.js';
 import { InWidgetDrawerOverlay } from '../components/widget/Drawer/Overlay.js';
+import { LimitOrderButton } from './LimitOrderButton.js';
+import { LimitOrderDetails } from './LimitOrderDetails.js';
+import { useOtcTokenFromInputProps } from './otc/useOtcTokenFromInputProps.js';
+import { useOtcTokenToInputProps } from './otc/useOtcTokenToInputProps.js';
+import { useLimitPriceInputProps } from './limit/useLimitPriceInputProps.js';
+import { useOtcPriceInputProps } from './otc/useOtcPriceInputProps.js';
+import { OtcOrderButton } from './OtcOrderButton.js';
+import { OtcOrderDetails } from './OtcOrderDetails.js';
+import { WidgetWarning } from './Warnings.js';
+import { useUnsupportedLimitChain } from './limit/useLimitNotSupported.js';
+import { useUnsupportedOtcChain } from './otc/useOtcNotSupported.js';
+import { useLimitTokenSwitcherProps } from './limit/useLimitTokenSwitcherProps.js';
+import { useOtcTokenSwitcherProps } from './otc/useOtcTokenSwitcherProps.js';
+import { useSwapReceiverAddress } from '../components/widget/ReceiverAddress/state/receiverAddressAtom.js';
+import { useOtcReceiverAddress } from './otc/state/receiverAddressAtom.js';
+import { useWidgetEventsSetter, widgetEventsAtom } from './state/widgetEventsAtom.js';
+import { useSetFormInputFromProps, formInputPropsAtom } from './inputs/state/setTokenByAddressAtom.js';
 
 runSubscriptions();
+const SwapScreen = () => {
+  const $ = distExports.c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SwapTokenFromInput, {}),
+      /* @__PURE__ */ jsx(SwapTokenSwitcher, {}),
+      /* @__PURE__ */ jsx(SwapTokenToInput, {}),
+      /* @__PURE__ */ jsx(SwapReceiverAddress, {}),
+      /* @__PURE__ */ jsx(WidgetWarning, {}),
+      /* @__PURE__ */ jsx(SwapButton, {}),
+      /* @__PURE__ */ jsx(SwapDetails, {}),
+      /* @__PURE__ */ jsx(SwapModeSwitcher, {})
+    ] });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+};
+const LimitOrderExtraInputs = () => {
+  const $ = distExports.c(8);
+  const priceInputProps = useLimitPriceInputProps();
+  const unsupportedChain = useUnsupportedLimitChain();
+  let t0;
+  if ($[0] !== unsupportedChain) {
+    t0 = cn("flex gap-4 items-stretch py-2", {
+      "pointer-events-none": unsupportedChain
+    });
+    $[0] = unsupportedChain;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== priceInputProps) {
+    t1 = /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(PriceInput, { ...priceInputProps }) });
+    $[2] = priceInputProps;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(OrderExpiryInput, { type: "limit" }) });
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t0 || $[6] !== t1) {
+    t3 = /* @__PURE__ */ jsxs("div", { className: t0, children: [
+      t1,
+      t2
+    ] });
+    $[5] = t0;
+    $[6] = t1;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+};
+const OtcOrderExtraInputs = () => {
+  const $ = distExports.c(8);
+  const priceInputProps = useOtcPriceInputProps();
+  const unsupportedChain = useUnsupportedOtcChain();
+  let t0;
+  if ($[0] !== unsupportedChain) {
+    t0 = cn("flex gap-4 items-stretch py-2", {
+      "pointer-events-none": unsupportedChain
+    });
+    $[0] = unsupportedChain;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== priceInputProps) {
+    t1 = /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(PriceInput, { ...priceInputProps }) });
+    $[2] = priceInputProps;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(OrderExpiryInput, { type: "otc" }) });
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t0 || $[6] !== t1) {
+    t3 = /* @__PURE__ */ jsxs("div", { className: t0, children: [
+      t1,
+      t2
+    ] });
+    $[5] = t0;
+    $[6] = t1;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+};
+const LimitOrderScreen = () => {
+  const $ = distExports.c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(LimitTokenFromInput, {}),
+      /* @__PURE__ */ jsx(LimitTokenSwitcher, {}),
+      /* @__PURE__ */ jsx(LimitTokenToInput, {}),
+      /* @__PURE__ */ jsx(LimitOrderExtraInputs, {}),
+      /* @__PURE__ */ jsx(WidgetWarning, {}),
+      /* @__PURE__ */ jsx(LimitOrderButton, {}),
+      /* @__PURE__ */ jsx(LimitOrderDetails, {})
+    ] });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+};
+const OtcOrderScreen = () => {
+  const $ = distExports.c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(OtcTokenFromInput, {}),
+      /* @__PURE__ */ jsx(OtcTokenSwitcher, {}),
+      /* @__PURE__ */ jsx(OtcTokenToInput, {}),
+      /* @__PURE__ */ jsx(OtcOrderExtraInputs, {}),
+      /* @__PURE__ */ jsx(OtcReceiverAddress, {}),
+      /* @__PURE__ */ jsx(WidgetWarning, {}),
+      /* @__PURE__ */ jsx(OtcOrderButton, {}),
+      /* @__PURE__ */ jsx(OtcOrderDetails, {})
+    ] });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+};
+const MainScreen = () => {
+  const $ = distExports.c(2);
+  const tradeMode = useTradeMode();
+  let t0;
+  if ($[0] !== tradeMode) {
+    t0 = tradeMode === "swap" ? /* @__PURE__ */ jsx(SwapScreen, {}) : tradeMode === "limit" ? /* @__PURE__ */ jsx(LimitOrderScreen, {}) : /* @__PURE__ */ jsx(OtcOrderScreen, {});
+    $[0] = tradeMode;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
 const App = () => {
   const $ = distExports.c(1);
   let t0;
@@ -47,13 +227,7 @@ const App = () => {
     t0 = /* @__PURE__ */ jsxs(Containers, { children: [
       /* @__PURE__ */ jsx(DialogRoot, {}),
       /* @__PURE__ */ jsx(WidgetHeader, {}),
-      /* @__PURE__ */ jsx(TokenFromInput, {}),
-      /* @__PURE__ */ jsx(WidgetTokenSwitcher, {}),
-      /* @__PURE__ */ jsx(TokenToInput, {}),
-      /* @__PURE__ */ jsx(WidgetReceiverAddress, {}),
-      /* @__PURE__ */ jsx(WidgetButton, {}),
-      /* @__PURE__ */ jsx(SwapDetails, {}),
-      /* @__PURE__ */ jsx(SwapModeSwitcher, {}),
+      /* @__PURE__ */ jsx(MainScreen, {}),
       /* @__PURE__ */ jsx(PoweredBy, {}),
       /* @__PURE__ */ jsx(Toaster, {})
     ] });
@@ -64,10 +238,12 @@ const App = () => {
   return t0;
 };
 const WidgetBase = (t0) => {
-  const $ = distExports.c(30);
+  const $ = distExports.c(42);
   const {
     config,
-    provider
+    provider,
+    events,
+    input: formInputProps
   } = t0;
   const setWidgetConfig = useSetAtom(setWidgetConfigAtom);
   let t1;
@@ -91,18 +267,54 @@ const WidgetBase = (t0) => {
     t3 = $[3];
   }
   let t4;
-  if ($[4] !== t1 || $[5] !== t3) {
-    t4 = [t1, t3];
-    $[4] = t1;
-    $[5] = t3;
-    $[6] = t4;
+  if ($[4] !== events) {
+    t4 = events || {};
+    $[4] = events;
+    $[5] = t4;
   } else {
-    t4 = $[6];
+    t4 = $[5];
   }
-  useHydrateAtoms(t4);
   let t5;
-  if ($[7] !== config?.debug || $[8] !== config?.enableDelta || $[9] !== config?.partner || $[10] !== config?.privyAppId || $[11] !== config?.privyClientId || $[12] !== config?.theme || $[13] !== config?.widgetMode || $[14] !== setWidgetConfig) {
-    t5 = () => {
+  if ($[6] !== t4) {
+    t5 = [widgetEventsAtom, t4];
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== formInputProps) {
+    t6 = formInputProps || {};
+    $[8] = formInputProps;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t6) {
+    t7 = [formInputPropsAtom, t6];
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== t1 || $[13] !== t3 || $[14] !== t5 || $[15] !== t7) {
+    t8 = [t1, t3, t5, t7];
+    $[12] = t1;
+    $[13] = t3;
+    $[14] = t5;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  useHydrateAtoms(t8);
+  useWidgetEventsSetter(events);
+  useSetFormInputFromProps(formInputProps);
+  let t9;
+  if ($[17] !== config?.debug || $[18] !== config?.enableDelta || $[19] !== config?.ignoreBadUsdPrice || $[20] !== config?.partner || $[21] !== config?.privyAppId || $[22] !== config?.privyClientId || $[23] !== config?.theme || $[24] !== config?.widgetMode || $[25] !== setWidgetConfig) {
+    t9 = () => {
       setWidgetConfig({
         theme: config?.theme,
         enableDelta: config?.enableDelta,
@@ -110,95 +322,103 @@ const WidgetBase = (t0) => {
         privyAppId: config?.privyAppId,
         privyClientId: config?.privyClientId,
         debug: config?.debug,
-        widgetMode: config?.widgetMode
+        widgetMode: config?.widgetMode,
+        ignoreBadUsdPrice: config?.ignoreBadUsdPrice
       });
     };
-    $[7] = config?.debug;
-    $[8] = config?.enableDelta;
-    $[9] = config?.partner;
-    $[10] = config?.privyAppId;
-    $[11] = config?.privyClientId;
-    $[12] = config?.theme;
-    $[13] = config?.widgetMode;
-    $[14] = setWidgetConfig;
-    $[15] = t5;
-  } else {
-    t5 = $[15];
-  }
-  const t6 = config?.theme;
-  const t7 = config?.enableDelta;
-  const t8 = config?.partner;
-  const t9 = config?.privyAppId;
-  const t10 = config?.privyClientId;
-  const t11 = config?.debug;
-  const t12 = config?.widgetMode;
-  let t13;
-  if ($[16] !== setWidgetConfig || $[17] !== t10 || $[18] !== t11 || $[19] !== t12 || $[20] !== t6 || $[21] !== t7 || $[22] !== t8 || $[23] !== t9) {
-    t13 = [t6, t7, t8, t9, t10, t11, t12, setWidgetConfig];
-    $[16] = setWidgetConfig;
-    $[17] = t10;
-    $[18] = t11;
-    $[19] = t12;
-    $[20] = t6;
-    $[21] = t7;
-    $[22] = t8;
-    $[23] = t9;
-    $[24] = t13;
-  } else {
-    t13 = $[24];
-  }
-  useLayoutEffect(t5, t13);
+    $[17] = config?.debug;
+    $[18] = config?.enableDelta;
+    $[19] = config?.ignoreBadUsdPrice;
+    $[20] = config?.partner;
+    $[21] = config?.privyAppId;
+    $[22] = config?.privyClientId;
+    $[23] = config?.theme;
+    $[24] = config?.widgetMode;
+    $[25] = setWidgetConfig;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  const t10 = config?.theme;
+  const t11 = config?.enableDelta;
+  const t12 = config?.partner;
+  const t13 = config?.privyAppId;
+  const t14 = config?.privyClientId;
+  const t15 = config?.debug;
+  const t16 = config?.widgetMode;
+  const t17 = config?.ignoreBadUsdPrice;
+  let t18;
+  if ($[27] !== setWidgetConfig || $[28] !== t10 || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15 || $[34] !== t16 || $[35] !== t17) {
+    t18 = [t10, t11, t12, t13, t14, t15, t16, t17, setWidgetConfig];
+    $[27] = setWidgetConfig;
+    $[28] = t10;
+    $[29] = t11;
+    $[30] = t12;
+    $[31] = t13;
+    $[32] = t14;
+    $[33] = t15;
+    $[34] = t16;
+    $[35] = t17;
+    $[36] = t18;
+  } else {
+    t18 = $[36];
+  }
+  useLayoutEffect(t9, t18);
   const setExternalProvider = useSetAtom(externalProviderAtom);
-  let t14;
-  let t15;
-  if ($[25] !== provider || $[26] !== setExternalProvider) {
-    t14 = () => {
+  let t19;
+  let t20;
+  if ($[37] !== provider || $[38] !== setExternalProvider) {
+    t19 = () => {
       setExternalProvider(provider || null);
     };
-    t15 = [provider, setExternalProvider];
-    $[25] = provider;
-    $[26] = setExternalProvider;
-    $[27] = t14;
-    $[28] = t15;
-  } else {
-    t14 = $[27];
-    t15 = $[28];
-  }
-  useLayoutEffect(t14, t15);
-  let t16;
-  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-    t16 = /* @__PURE__ */ jsxs(Web3Providers, { children: [
+    t20 = [provider, setExternalProvider];
+    $[37] = provider;
+    $[38] = setExternalProvider;
+    $[39] = t19;
+    $[40] = t20;
+  } else {
+    t19 = $[39];
+    t20 = $[40];
+  }
+  useLayoutEffect(t19, t20);
+  let t21;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = /* @__PURE__ */ jsxs(Web3Providers, { children: [
       /* @__PURE__ */ jsx(AutoconnectExternalProvider, {}),
       /* @__PURE__ */ jsx(PrivyIframeDependency, {}),
       /* @__PURE__ */ jsx(Updaters, {}),
       /* @__PURE__ */ jsx(App, {}),
       false
     ] });
-    $[29] = t16;
+    $[41] = t21;
   } else {
-    t16 = $[29];
+    t21 = $[41];
   }
-  return t16;
+  return t21;
 };
 const Widget = (t0) => {
-  const $ = distExports.c(3);
+  const $ = distExports.c(5);
   const {
     config,
-    provider
+    provider,
+    events,
+    input
   } = t0;
   let t1;
-  if ($[0] !== config || $[1] !== provider) {
-    t1 = /* @__PURE__ */ jsx(JotaiProvider, { children: /* @__PURE__ */ jsx(WidgetBase, { config, provider }) });
+  if ($[0] !== config || $[1] !== events || $[2] !== input || $[3] !== provider) {
+    t1 = /* @__PURE__ */ jsx(JotaiProvider, { children: /* @__PURE__ */ jsx(WidgetBase, { config, provider, events, input }) });
     $[0] = config;
-    $[1] = provider;
-    $[2] = t1;
+    $[1] = events;
+    $[2] = input;
+    $[3] = provider;
+    $[4] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[4];
   }
   return t1;
 };
 function Containers(t0) {
-  const $ = distExports.c(14);
+  const $ = distExports.c(15);
   const {
     children
   } = t0;
@@ -230,38 +450,45 @@ function Containers(t0) {
     t3 = $[3];
   }
   let t4;
-  if ($[4] !== setContainerElement) {
-    t4 = /* @__PURE__ */ jsx("div", { className: "overflow-hidden bottom-0 left-0 right-0 h-[590px] absolute", ref: setContainerElement });
-    $[4] = setContainerElement;
-    $[5] = t4;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = cn("overflow-hidden bottom-0 left-0 right-0 absolute", WIDGET_HEIGHT_CLASSNAME);
+    $[4] = t4;
   } else {
-    t4 = $[5];
+    t4 = $[4];
   }
   let t5;
-  if ($[6] !== children) {
-    t5 = /* @__PURE__ */ jsx("div", { className: "relative flex flex-col max-w-[460px] w-full pt-[24px] px-[24px] pb-[18px] bg-contrast-9 dark:bg-contrast-3 border border-contrast-7 dark:border-contrast-4 rounded-xxl", children });
-    $[6] = children;
-    $[7] = t5;
+  if ($[5] !== setContainerElement) {
+    t5 = /* @__PURE__ */ jsx("div", { className: t4, ref: setContainerElement });
+    $[5] = setContainerElement;
+    $[6] = t5;
   } else {
-    t5 = $[7];
+    t5 = $[6];
   }
   let t6;
-  if ($[8] !== containerRef || $[9] !== t2 || $[10] !== t3 || $[11] !== t4 || $[12] !== t5) {
-    t6 = /* @__PURE__ */ jsxs("div", { ref: containerRef, className: t2, id: WIDGET_ELEMENT_ID, children: [
+  if ($[7] !== children) {
+    t6 = /* @__PURE__ */ jsx("div", { className: "relative flex flex-col max-w-[460px] min-w-[375px] w-full pt-[24px] px-[24px] pb-[18px] bg-contrast-9 dark:bg-contrast-3 border border-contrast-7 dark:border-contrast-4 rounded-xxl", children });
+    $[7] = children;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== containerRef || $[10] !== t2 || $[11] !== t3 || $[12] !== t5 || $[13] !== t6) {
+    t7 = /* @__PURE__ */ jsxs("div", { ref: containerRef, className: t2, id: WIDGET_ELEMENT_ID, children: [
       t3,
-      t4,
-      t5
+      t5,
+      t6
     ] });
-    $[8] = containerRef;
-    $[9] = t2;
-    $[10] = t3;
-    $[11] = t4;
+    $[9] = containerRef;
+    $[10] = t2;
+    $[11] = t3;
     $[12] = t5;
     $[13] = t6;
+    $[14] = t7;
   } else {
-    t6 = $[13];
+    t7 = $[14];
   }
-  return t6;
+  return t7;
 }
 function WidgetHeader() {
   const $ = distExports.c(1);
@@ -276,7 +503,7 @@ function WidgetHeader() {
   }
   return t0;
 }
-function TokenFromInput() {
+function SwapTokenFromInput() {
   const $ = distExports.c(7);
   const overrides = useTokenInputsFromPrice();
   let t0;
@@ -306,7 +533,33 @@ function TokenFromInput() {
   }
   return t1;
 }
-function TokenToInput() {
+function LimitTokenFromInput() {
+  const $ = distExports.c(2);
+  const tokenFromInputProps = useLimitTokenFromInputProps();
+  let t0;
+  if ($[0] !== tokenFromInputProps) {
+    t0 = /* @__PURE__ */ jsx(TokenInput, { ...tokenFromInputProps });
+    $[0] = tokenFromInputProps;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function OtcTokenFromInput() {
+  const $ = distExports.c(2);
+  const tokenFromInputProps = useOtcTokenFromInputProps();
+  let t0;
+  if ($[0] !== tokenFromInputProps) {
+    t0 = /* @__PURE__ */ jsx(TokenInput, { ...tokenFromInputProps });
+    $[0] = tokenFromInputProps;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function SwapTokenToInput() {
   const $ = distExports.c(8);
   const overrides = useTokenInputsFromPrice();
   let t0;
@@ -338,9 +591,48 @@ function TokenToInput() {
   }
   return t1;
 }
-function WidgetTokenSwitcher() {
+function LimitTokenToInput() {
+  const $ = distExports.c(2);
+  const tokenToInputProps = useLimitTokenToInputProps();
+  let t0;
+  if ($[0] !== tokenToInputProps) {
+    t0 = /* @__PURE__ */ jsx(TokenInput, { ...tokenToInputProps });
+    $[0] = tokenToInputProps;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function OtcTokenToInput() {
+  const $ = distExports.c(2);
+  const tokenToInputProps = useOtcTokenToInputProps();
+  let t0;
+  if ($[0] !== tokenToInputProps) {
+    t0 = /* @__PURE__ */ jsx(TokenInput, { ...tokenToInputProps });
+    $[0] = tokenToInputProps;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function SwapTokenSwitcher() {
+  const $ = distExports.c(2);
+  const tokenSwitcherProps = useSwapTokenSwitcherProps();
+  let t0;
+  if ($[0] !== tokenSwitcherProps) {
+    t0 = /* @__PURE__ */ jsx(TokenSwitcher, { ...tokenSwitcherProps });
+    $[0] = tokenSwitcherProps;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function LimitTokenSwitcher() {
   const $ = distExports.c(2);
-  const tokenSwitcherProps = useTokenSwitcherProps();
+  const tokenSwitcherProps = useLimitTokenSwitcherProps();
   let t0;
   if ($[0] !== tokenSwitcherProps) {
     t0 = /* @__PURE__ */ jsx(TokenSwitcher, { ...tokenSwitcherProps });
@@ -351,7 +643,20 @@ function WidgetTokenSwitcher() {
   }
   return t0;
 }
-function WidgetButton() {
+function OtcTokenSwitcher() {
+  const $ = distExports.c(2);
+  const tokenSwitcherProps = useOtcTokenSwitcherProps();
+  let t0;
+  if ($[0] !== tokenSwitcherProps) {
+    t0 = /* @__PURE__ */ jsx(TokenSwitcher, { ...tokenSwitcherProps });
+    $[0] = tokenSwitcherProps;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function SwapButton() {
   const $ = distExports.c(26);
   const overrides = useTokenInputsFromPrice();
   let t0;
@@ -425,7 +730,7 @@ function WidgetButton() {
   const t5 = overrides.priceMode === "delta" ? overrides.price : void 0;
   let t6;
   if ($[19] !== extraProps || $[20] !== orderProps || $[21] !== overrides.priceMode || $[22] !== t4 || $[23] !== t5 || $[24] !== wrapEthProps) {
-    t6 = /* @__PURE__ */ jsx(ButtonWithDrawer, { orderProps, marketPrice: t4, deltaPrice: t5, priceMode: overrides.priceMode, wrapEthProps, ...extraProps });
+    t6 = /* @__PURE__ */ jsx(SwapButtonWithDrawer, { orderProps, marketPrice: t4, deltaPrice: t5, priceMode: overrides.priceMode, wrapEthProps, ...extraProps });
     $[19] = extraProps;
     $[20] = orderProps;
     $[21] = overrides.priceMode;
@@ -489,23 +794,60 @@ function SwapDetails() {
   }
   return t2;
 }
-function WidgetReceiverAddress() {
-  const $ = distExports.c(2);
+function SwapReceiverAddress() {
+  const $ = distExports.c(3);
   const {
     isConnected
   } = useAccount();
   const shouldShowReceiverAddress = isConnected;
+  const swapReceiverAddressProps = useSwapReceiverAddress();
   let t0;
-  if ($[0] !== shouldShowReceiverAddress) {
+  if ($[0] !== shouldShowReceiverAddress || $[1] !== swapReceiverAddressProps) {
     t0 = shouldShowReceiverAddress ? /* @__PURE__ */ jsx(ReceiverAddress, { classes: {
       root: "mt-2"
-    } }) : null;
+    }, type: "swap", ...swapReceiverAddressProps }) : null;
     $[0] = shouldShowReceiverAddress;
+    $[1] = swapReceiverAddressProps;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+function OtcReceiverAddress() {
+  const $ = distExports.c(7);
+  const unsupportedChain = useUnsupportedOtcChain();
+  const otcReceiverAddressProps = useOtcReceiverAddress();
+  let t0;
+  if ($[0] !== unsupportedChain) {
+    t0 = cn("mt-2", {
+      "pointer-events-none": unsupportedChain
+    });
+    $[0] = unsupportedChain;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  return t0;
+  let t1;
+  if ($[2] !== t0) {
+    t1 = {
+      root: t0
+    };
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== otcReceiverAddressProps || $[5] !== t1) {
+    t2 = /* @__PURE__ */ jsx(ReceiverAddress, { classes: t1, type: "otc", ...otcReceiverAddressProps });
+    $[4] = otcReceiverAddressProps;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 }
 function SwapModeSwitcher() {
   const $ = distExports.c(2);
@@ -522,7 +864,7 @@ function SwapModeSwitcher() {
     delta,
     market
   } = useSwapPrices(t0);
-  if (delta.price && market.price) {
+  if (delta.canBeUsed && market.canBeUsed) {
     let t1;
     if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = /* @__PURE__ */ jsx(SwapModeSwitcherExpandable, { classes: {
@@ -535,7 +877,7 @@ function SwapModeSwitcher() {
     return t1;
   }
 }
-function ButtonWithDrawer(t0) {
+function SwapButtonWithDrawer(t0) {
   const $ = distExports.c(25);
   let buttonProps;
   let deltaPrice;
@@ -606,7 +948,7 @@ function ButtonWithDrawer(t0) {
   }
   let t1;
   if ($[17] !== buttonProps || $[18] !== deltaPrice || $[19] !== drawerContainer || $[20] !== labelOverride || $[21] !== marketPrice || $[22] !== orderProps || $[23] !== priceMode) {
-    t1 = /* @__PURE__ */ jsx(TradeFlowButton, { orderProps, drawerContainer, marketPrice, deltaPrice, priceMode, labelOverride, ...buttonProps });
+    t1 = /* @__PURE__ */ jsx(SwapTradeFlowButton, { orderProps, drawerContainer, marketPrice, deltaPrice, priceMode, labelOverride, ...buttonProps });
     $[17] = buttonProps;
     $[18] = deltaPrice;
     $[19] = drawerContainer;