@velora-dex/widget 0.2.5-dev.4 → 0.2.5-dev.6

package/dist/core/index.js

@@ -3,7 +3,6 @@ import { d as distExports } from '../_virtual/index.js';
 import '../styles.css';/* empty css                   */
 import { TokenInput } from '../components/widget/TokenInput/index.js';
 import { useTokenFromInputProps } from './inputs/hooks/useTokenFromInputProps.js';
-import { DialogRoot } from '../components/widget/Dialog/DialogRoot.js';
 import '../components/ui/button.js';
 import { QueryClientProvider, JotaiProvider, Web3Providers } from '../components/web3/providers.js';
 import { useAccount } from 'wagmi';
@@ -19,7 +18,7 @@ import { SwapModeSwitcherExpandable } from '../components/widget/SwapModeSwitche
 import { useTokenInputsFromPrice } from '../hooks/swap/prices/useTokenInputsFromPrice.js';
 import { SwapDetailsExpandable } from '../components/widget/Details/SwapDetailsExpandable.js';
 import { ReceiverAddress } from '../components/widget/ReceiverAddress/ReceiverAddress.js';
-import { useSetAtom } from 'jotai';
+import { useSetAtom } from './store.js';
 import { useHydrateAtoms } from 'jotai/utils';
 import { containerAtom } from './state/containerAtom.js';
 import { AppHeader } from '../components/widget/AppHeader/AppHeader.js';
@@ -34,7 +33,7 @@ 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 { SwapTradeFlowButton } from './TradeFlowButton.js';
+import { SwapTradeFlowScreenButton } from './TradeFlowScreenButton.js';
 import { ConnectWalletDrawerButton } from './ConnectWalletDrawerButton.js';
 import { PriceInput } from '../components/widget/LimitPriceInput/index.js';
 import { OrderExpiryInput } from '../components/widget/OrderExpiryInput/index.js';
@@ -62,6 +61,9 @@ import { useWidgetEventsSetter, widgetEventsAtom } from './state/widgetEventsAto
 import { useSetFormInputFromProps, formInputPropsAtom } from './inputs/state/setTokenByAddressAtom.js';
 import { queryClientAtom } from 'jotai-tanstack-query';
 import { useQueryClient } from '@tanstack/react-query';
+import { useScreen } from './screen/state/screenAtom.js';
+import { screenByType } from './screen/screenByType.js';
+import { SecondaryScreenContainer, MainScreenContainer } from '../components/widget/Screen/ScreenContainer.js';
 
 runSubscriptions();
 const SwapScreen = () => {
@@ -223,24 +225,37 @@ const MainScreen = () => {
   return t0;
 };
 const App = () => {
-  const $ = distExports.c(1);
+  const $ = distExports.c(5);
+  const {
+    screen
+  } = useScreen();
+  const SpecificScreen = screen?.screenType ? screenByType[screen?.screenType] : null;
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = /* @__PURE__ */ jsxs(Containers, { children: [
-      /* @__PURE__ */ jsx(DialogRoot, {}),
+  if ($[0] !== screen) {
+    t0 = screen?.screenType && screen?.screenProps ? screen.screenProps[screen.screenType] : {};
+    $[0] = screen;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const screenProps = t0;
+  let t1;
+  if ($[2] !== SpecificScreen || $[3] !== screenProps) {
+    t1 = /* @__PURE__ */ jsx(Containers, { children: SpecificScreen ? /* @__PURE__ */ jsx(SecondaryScreenContainer, { children: /* @__PURE__ */ jsx(SpecificScreen, { ...screenProps }) }) : /* @__PURE__ */ jsxs(MainScreenContainer, { children: [
       /* @__PURE__ */ jsx(WidgetHeader, {}),
       /* @__PURE__ */ jsx(MainScreen, {}),
-      /* @__PURE__ */ jsx(PoweredBy, {}),
-      /* @__PURE__ */ jsx(Toaster, {})
-    ] });
-    $[0] = t0;
+      /* @__PURE__ */ jsx(PoweredBy, {})
+    ] }) });
+    $[2] = SpecificScreen;
+    $[3] = screenProps;
+    $[4] = t1;
   } else {
-    t0 = $[0];
+    t1 = $[4];
   }
-  return t0;
+  return t1;
 };
 const WidgetBase = (t0) => {
-  const $ = distExports.c(61);
+  const $ = distExports.c(64);
   const {
     config: _config,
     provider,
@@ -260,6 +275,7 @@ const WidgetBase = (t0) => {
   }
   let config;
   let destChains;
+  let devURLs;
   let excludeUI;
   let srcChains;
   let tokenLists;
@@ -271,121 +287,126 @@ const WidgetBase = (t0) => {
       tokenLists,
       tradeModes,
       excludeUI,
+      devURLs,
       ...config
     } = t1);
     $[2] = t1;
     $[3] = config;
     $[4] = destChains;
-    $[5] = excludeUI;
-    $[6] = srcChains;
-    $[7] = tokenLists;
-    $[8] = tradeModes;
+    $[5] = devURLs;
+    $[6] = excludeUI;
+    $[7] = srcChains;
+    $[8] = tokenLists;
+    $[9] = tradeModes;
   } else {
     config = $[3];
     destChains = $[4];
-    excludeUI = $[5];
-    srcChains = $[6];
-    tokenLists = $[7];
-    tradeModes = $[8];
+    devURLs = $[5];
+    excludeUI = $[6];
+    srcChains = $[7];
+    tokenLists = $[8];
+    tradeModes = $[9];
   }
   let t2;
-  if ($[9] !== config) {
+  if ($[10] !== config) {
     t2 = [setWidgetConfigAtom, {
       ...defaultWidgetConfig,
       ...config
     }];
-    $[9] = config;
-    $[10] = t2;
+    $[10] = config;
+    $[11] = t2;
   } else {
-    t2 = $[10];
+    t2 = $[11];
   }
   let t3;
-  if ($[11] !== destChains || $[12] !== excludeUI || $[13] !== srcChains || $[14] !== tokenLists || $[15] !== tradeModes) {
+  if ($[12] !== destChains || $[13] !== devURLs || $[14] !== excludeUI || $[15] !== srcChains || $[16] !== tokenLists || $[17] !== tradeModes) {
     t3 = [setSubConfigAtom, {
       ...defaultSubConfig,
       srcChains,
       destChains,
       tokenLists,
       tradeModes,
-      excludeUI
+      excludeUI,
+      devURLs
     }];
-    $[11] = destChains;
-    $[12] = excludeUI;
-    $[13] = srcChains;
-    $[14] = tokenLists;
-    $[15] = tradeModes;
-    $[16] = t3;
+    $[12] = destChains;
+    $[13] = devURLs;
+    $[14] = excludeUI;
+    $[15] = srcChains;
+    $[16] = tokenLists;
+    $[17] = tradeModes;
+    $[18] = t3;
   } else {
-    t3 = $[16];
+    t3 = $[18];
   }
   const t4 = provider || null;
   let t5;
-  if ($[17] !== t4) {
+  if ($[19] !== t4) {
     t5 = [externalProviderAtom, t4];
-    $[17] = t4;
-    $[18] = t5;
+    $[19] = t4;
+    $[20] = t5;
   } else {
-    t5 = $[18];
+    t5 = $[20];
   }
   let t6;
-  if ($[19] !== events) {
+  if ($[21] !== events) {
     t6 = events || {};
-    $[19] = events;
-    $[20] = t6;
+    $[21] = events;
+    $[22] = t6;
   } else {
-    t6 = $[20];
+    t6 = $[22];
   }
   let t7;
-  if ($[21] !== t6) {
+  if ($[23] !== t6) {
     t7 = [widgetEventsAtom, t6];
-    $[21] = t6;
-    $[22] = t7;
+    $[23] = t6;
+    $[24] = t7;
   } else {
-    t7 = $[22];
+    t7 = $[24];
   }
   let t8;
-  if ($[23] !== formInputProps) {
+  if ($[25] !== formInputProps) {
     t8 = formInputProps || {};
-    $[23] = formInputProps;
-    $[24] = t8;
+    $[25] = formInputProps;
+    $[26] = t8;
   } else {
-    t8 = $[24];
+    t8 = $[26];
   }
   let t9;
-  if ($[25] !== t8) {
+  if ($[27] !== t8) {
     t9 = [formInputPropsAtom, t8];
-    $[25] = t8;
-    $[26] = t9;
+    $[27] = t8;
+    $[28] = t9;
   } else {
-    t9 = $[26];
+    t9 = $[28];
   }
   let t10;
-  if ($[27] !== queryClient) {
+  if ($[29] !== queryClient) {
     t10 = [queryClientAtom, queryClient];
-    $[27] = queryClient;
-    $[28] = t10;
+    $[29] = queryClient;
+    $[30] = t10;
   } else {
-    t10 = $[28];
+    t10 = $[30];
   }
   let t11;
-  if ($[29] !== t10 || $[30] !== t2 || $[31] !== t3 || $[32] !== t5 || $[33] !== t7 || $[34] !== t9) {
+  if ($[31] !== t10 || $[32] !== t2 || $[33] !== t3 || $[34] !== t5 || $[35] !== t7 || $[36] !== t9) {
     t11 = [t2, t3, t5, t7, t9, t10];
-    $[29] = t10;
-    $[30] = t2;
-    $[31] = t3;
-    $[32] = t5;
-    $[33] = t7;
-    $[34] = t9;
-    $[35] = t11;
+    $[31] = t10;
+    $[32] = t2;
+    $[33] = t3;
+    $[34] = t5;
+    $[35] = t7;
+    $[36] = t9;
+    $[37] = t11;
   } else {
-    t11 = $[35];
+    t11 = $[37];
   }
   useHydrateAtoms(t11);
   useWidgetEventsSetter(events);
   useSetFormInputFromProps(formInputProps);
   let t12;
   let t13;
-  if ($[36] !== config.debug || $[37] !== config.enableCrossChain || $[38] !== config.enableDelta || $[39] !== config.ignoreBadUsdPrice || $[40] !== config.partner || $[41] !== config.privyAppId || $[42] !== config.privyClientId || $[43] !== config.theme || $[44] !== config.widgetMode || $[45] !== setWidgetConfig) {
+  if ($[38] !== config.debug || $[39] !== config.enableCrossChain || $[40] !== config.enableDelta || $[41] !== config.ignoreBadUsdPrice || $[42] !== config.partner || $[43] !== config.privyAppId || $[44] !== config.privyClientId || $[45] !== config.theme || $[46] !== config.widgetMode || $[47] !== setWidgetConfig) {
     t12 = () => {
       setWidgetConfig({
         theme: config.theme,
@@ -400,78 +421,81 @@ const WidgetBase = (t0) => {
       });
     };
     t13 = [config.theme, config.enableDelta, config.enableCrossChain, config.partner, config.privyAppId, config.privyClientId, config.debug, config.widgetMode, config.ignoreBadUsdPrice, setWidgetConfig];
-    $[36] = config.debug;
-    $[37] = config.enableCrossChain;
-    $[38] = config.enableDelta;
-    $[39] = config.ignoreBadUsdPrice;
-    $[40] = config.partner;
-    $[41] = config.privyAppId;
-    $[42] = config.privyClientId;
-    $[43] = config.theme;
-    $[44] = config.widgetMode;
-    $[45] = setWidgetConfig;
-    $[46] = t12;
-    $[47] = t13;
+    $[38] = config.debug;
+    $[39] = config.enableCrossChain;
+    $[40] = config.enableDelta;
+    $[41] = config.ignoreBadUsdPrice;
+    $[42] = config.partner;
+    $[43] = config.privyAppId;
+    $[44] = config.privyClientId;
+    $[45] = config.theme;
+    $[46] = config.widgetMode;
+    $[47] = setWidgetConfig;
+    $[48] = t12;
+    $[49] = t13;
   } else {
-    t12 = $[46];
-    t13 = $[47];
+    t12 = $[48];
+    t13 = $[49];
   }
   useLayoutEffect(t12, t13);
   let t14;
   let t15;
-  if ($[48] !== destChains || $[49] !== excludeUI || $[50] !== setSubConfig || $[51] !== srcChains || $[52] !== tokenLists || $[53] !== tradeModes) {
+  if ($[50] !== destChains || $[51] !== devURLs || $[52] !== excludeUI || $[53] !== setSubConfig || $[54] !== srcChains || $[55] !== tokenLists || $[56] !== tradeModes) {
     t14 = () => {
       setSubConfig({
         srcChains,
         destChains,
         tokenLists,
         tradeModes,
-        excludeUI
+        excludeUI,
+        devURLs
       });
     };
-    t15 = [srcChains, destChains, tokenLists, setSubConfig, tradeModes, excludeUI];
-    $[48] = destChains;
-    $[49] = excludeUI;
-    $[50] = setSubConfig;
-    $[51] = srcChains;
-    $[52] = tokenLists;
-    $[53] = tradeModes;
-    $[54] = t14;
-    $[55] = t15;
+    t15 = [srcChains, destChains, tokenLists, setSubConfig, tradeModes, excludeUI, devURLs];
+    $[50] = destChains;
+    $[51] = devURLs;
+    $[52] = excludeUI;
+    $[53] = setSubConfig;
+    $[54] = srcChains;
+    $[55] = tokenLists;
+    $[56] = tradeModes;
+    $[57] = t14;
+    $[58] = t15;
   } else {
-    t14 = $[54];
-    t15 = $[55];
+    t14 = $[57];
+    t15 = $[58];
   }
   useLayoutEffect(t14, t15);
   const setExternalProvider = useSetAtom(externalProviderAtom);
   let t16;
   let t17;
-  if ($[56] !== provider || $[57] !== setExternalProvider) {
+  if ($[59] !== provider || $[60] !== setExternalProvider) {
     t16 = () => {
       setExternalProvider(provider || null);
     };
     t17 = [provider, setExternalProvider];
-    $[56] = provider;
-    $[57] = setExternalProvider;
-    $[58] = t16;
-    $[59] = t17;
+    $[59] = provider;
+    $[60] = setExternalProvider;
+    $[61] = t16;
+    $[62] = t17;
   } else {
-    t16 = $[58];
-    t17 = $[59];
+    t16 = $[61];
+    t17 = $[62];
   }
   useLayoutEffect(t16, t17);
   let t18;
-  if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
     t18 = /* @__PURE__ */ jsxs(Web3Providers, { children: [
       /* @__PURE__ */ jsx(AutoconnectExternalProvider, {}),
       /* @__PURE__ */ jsx(PrivyIframeDependency, {}),
       /* @__PURE__ */ jsx(Updaters, {}),
+      /* @__PURE__ */ jsx(Toaster, {}),
       /* @__PURE__ */ jsx(App, {}),
       false
     ] });
-    $[60] = t18;
+    $[63] = t18;
   } else {
-    t18 = $[60];
+    t18 = $[63];
   }
   return t18;
 };
@@ -497,7 +521,7 @@ const Widget = (t0) => {
   return t1;
 };
 function Containers(t0) {
-  const $ = distExports.c(15);
+  const $ = distExports.c(13);
   const {
     children
   } = t0;
@@ -544,30 +568,22 @@ function Containers(t0) {
     t5 = $[6];
   }
   let t6;
-  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: [
+  if ($[7] !== children || $[8] !== containerRef || $[9] !== t2 || $[10] !== t3 || $[11] !== t5) {
+    t6 = /* @__PURE__ */ jsxs("div", { ref: containerRef, className: t2, id: WIDGET_ELEMENT_ID, children: [
       t3,
       t5,
-      t6
+      children
     ] });
-    $[9] = containerRef;
-    $[10] = t2;
-    $[11] = t3;
-    $[12] = t5;
-    $[13] = t6;
-    $[14] = t7;
+    $[7] = children;
+    $[8] = containerRef;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t5;
+    $[12] = t6;
   } else {
-    t7 = $[14];
+    t6 = $[12];
   }
-  return t7;
+  return t6;
 }
 function WidgetHeader() {
   const $ = distExports.c(1);
@@ -736,7 +752,7 @@ function OtcTokenSwitcher() {
   return t0;
 }
 function SwapButton() {
-  const $ = distExports.c(26);
+  const $ = distExports.c(27);
   const overrides = useTokenInputsFromPrice();
   let t0;
   if ($[0] !== overrides.isLoading || $[1] !== overrides.price || $[2] !== overrides.priceMode || $[3] !== overrides.tokenFromAmount) {
@@ -775,50 +791,52 @@ function SwapButton() {
   }
   const tokenToInputProps = useTokenToInputProps(t1);
   let t2;
-  if ($[11] !== tokenFromInputProps.amount || $[12] !== tokenFromInputProps.token || $[13] !== tokenToInputProps.amount || $[14] !== tokenToInputProps.token) {
+  if ($[11] !== overrides.side || $[12] !== tokenFromInputProps.amount || $[13] !== tokenFromInputProps.token || $[14] !== tokenToInputProps.amount || $[15] !== tokenToInputProps.token) {
     t2 = tokenFromInputProps.token && tokenToInputProps.token ? {
       fromToken: tokenFromInputProps.token,
       toToken: tokenToInputProps.token,
       fromAmount: tokenFromInputProps.amount,
-      toAmount: tokenToInputProps.amount
+      toAmount: tokenToInputProps.amount,
+      swapSide: overrides.side
     } : void 0;
-    $[11] = tokenFromInputProps.amount;
-    $[12] = tokenFromInputProps.token;
-    $[13] = tokenToInputProps.amount;
-    $[14] = tokenToInputProps.token;
-    $[15] = t2;
+    $[11] = overrides.side;
+    $[12] = tokenFromInputProps.amount;
+    $[13] = tokenFromInputProps.token;
+    $[14] = tokenToInputProps.amount;
+    $[15] = tokenToInputProps.token;
+    $[16] = t2;
   } else {
-    t2 = $[15];
+    t2 = $[16];
   }
   const orderProps = t2;
   const wrapEthProps = useWrapEthProps();
   let t3;
-  if ($[16] !== tokenFromInputProps.token || $[17] !== tokenToInputProps.token) {
+  if ($[17] !== tokenFromInputProps.token || $[18] !== tokenToInputProps.token) {
     t3 = {
       tokenFrom: tokenFromInputProps.token,
       tokenTo: tokenToInputProps.token
     };
-    $[16] = tokenFromInputProps.token;
-    $[17] = tokenToInputProps.token;
-    $[18] = t3;
+    $[17] = tokenFromInputProps.token;
+    $[18] = tokenToInputProps.token;
+    $[19] = t3;
   } else {
-    t3 = $[18];
+    t3 = $[19];
   }
   const extraProps = useWidgetButtonExtraProps(t3);
   const t4 = overrides.priceMode === "market" ? overrides.price : void 0;
   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) {
+  if ($[20] !== extraProps || $[21] !== orderProps || $[22] !== overrides.priceMode || $[23] !== t4 || $[24] !== t5 || $[25] !== wrapEthProps) {
     t6 = /* @__PURE__ */ jsx(SwapButtonWithDrawer, { orderProps, marketPrice: t4, deltaPrice: t5, priceMode: overrides.priceMode, wrapEthProps, ...extraProps });
-    $[19] = extraProps;
-    $[20] = orderProps;
-    $[21] = overrides.priceMode;
-    $[22] = t4;
-    $[23] = t5;
-    $[24] = wrapEthProps;
-    $[25] = t6;
+    $[20] = extraProps;
+    $[21] = orderProps;
+    $[22] = overrides.priceMode;
+    $[23] = t4;
+    $[24] = t5;
+    $[25] = wrapEthProps;
+    $[26] = t6;
   } else {
-    t6 = $[25];
+    t6 = $[26];
   }
   return t6;
 }
@@ -966,7 +984,7 @@ function SwapModeSwitcher() {
   }
 }
 function SwapButtonWithDrawer(t0) {
-  const $ = distExports.c(25);
+  const $ = distExports.c(26);
   let buttonProps;
   let deltaPrice;
   let drawerContainer;
@@ -1035,20 +1053,34 @@ function SwapButtonWithDrawer(t0) {
     return t12;
   }
   let t1;
-  if ($[17] !== buttonProps || $[18] !== deltaPrice || $[19] !== drawerContainer || $[20] !== labelOverride || $[21] !== marketPrice || $[22] !== orderProps || $[23] !== priceMode) {
-    t1 = /* @__PURE__ */ jsx(SwapTradeFlowButton, { orderProps, drawerContainer, marketPrice, deltaPrice, priceMode, labelOverride, ...buttonProps });
-    $[17] = buttonProps;
-    $[18] = deltaPrice;
-    $[19] = drawerContainer;
-    $[20] = labelOverride;
-    $[21] = marketPrice;
-    $[22] = orderProps;
-    $[23] = priceMode;
-    $[24] = t1;
+  if ($[17] !== deltaPrice || $[18] !== marketPrice || $[19] !== priceMode) {
+    t1 = priceMode === "delta" ? {
+      price: deltaPrice,
+      priceMode
+    } : {
+      price: marketPrice,
+      priceMode
+    };
+    $[17] = deltaPrice;
+    $[18] = marketPrice;
+    $[19] = priceMode;
+    $[20] = t1;
   } else {
-    t1 = $[24];
+    t1 = $[20];
   }
-  return t1;
+  const priceProps = t1;
+  let t2;
+  if ($[21] !== buttonProps || $[22] !== labelOverride || $[23] !== orderProps || $[24] !== priceProps) {
+    t2 = /* @__PURE__ */ jsx(SwapTradeFlowScreenButton, { orderProps, labelOverride, ...priceProps, ...buttonProps });
+    $[21] = buttonProps;
+    $[22] = labelOverride;
+    $[23] = orderProps;
+    $[24] = priceProps;
+    $[25] = t2;
+  } else {
+    t2 = $[25];
+  }
+  return t2;
 }
 
 export { Widget };