@velora-dex/widget 0.1.2 → 0.2.0

package/dist/core/index.js

@@ -5,7 +5,7 @@ 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 { JotaiProvider, Web3Providers } from '../components/web3/providers.js';
+import { QueryClientProvider, JotaiProvider, Web3Providers } from '../components/web3/providers.js';
 import { useAccount } from 'wagmi';
 import { WIDGET_HEIGHT_CLASSNAME, WIDGET_ELEMENT_ID } from './constants.js';
 import { Updaters } from './Updaters.js';
@@ -24,8 +24,8 @@ import { useHydrateAtoms } from 'jotai/utils';
 import { containerAtom } from './state/containerAtom.js';
 import { AppHeader } from '../components/widget/AppHeader/AppHeader.js';
 import { useLayoutEffect } from 'react';
-import { defaultWidgetConfig, useWidgetConfig } from './state/configAtom.js';
-import { setWidgetConfigAtom } from './state/configActionsAtom.js';
+import { defaultWidgetConfig, defaultSubConfig, useWidgetConfig } from './state/configAtom.js';
+import { setWidgetConfigAtom, setSubConfigAtom } from './state/configActionsAtom.js';
 import { WrapEthDrawerButton } from '../components/widget/WrapEth/WrapEthDrawerButton.js';
 import { useWrapEthProps } from '../components/widget/WrapEth/hooks/useWrapEthProps.js';
 import { PoweredBy } from '../components/widget/PoweredBy/PoweredBy.js';
@@ -60,6 +60,8 @@ import { useSwapReceiverAddress } from '../components/widget/ReceiverAddress/sta
 import { useOtcReceiverAddress } from './otc/state/receiverAddressAtom.js';
 import { useWidgetEventsSetter, widgetEventsAtom } from './state/widgetEventsAtom.js';
 import { useSetFormInputFromProps, formInputPropsAtom } from './inputs/state/setTokenByAddressAtom.js';
+import { queryClientAtom } from 'jotai-tanstack-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 runSubscriptions();
 const SwapScreen = () => {
@@ -238,163 +240,232 @@ const App = () => {
   return t0;
 };
 const WidgetBase = (t0) => {
-  const $ = distExports.c(42);
+  const $ = distExports.c(58);
   const {
-    config,
+    config: _config,
     provider,
     events,
     input: formInputProps
   } = t0;
+  const queryClient = useQueryClient();
   const setWidgetConfig = useSetAtom(setWidgetConfigAtom);
+  const setSubConfig = useSetAtom(setSubConfigAtom);
   let t1;
-  if ($[0] !== config) {
-    t1 = [setWidgetConfigAtom, {
-      ...defaultWidgetConfig,
-      ...config
-    }];
-    $[0] = config;
+  if ($[0] !== _config) {
+    t1 = _config || {};
+    $[0] = _config;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const t2 = provider || null;
-  let t3;
-  if ($[2] !== t2) {
-    t3 = [externalProviderAtom, t2];
-    $[2] = t2;
-    $[3] = t3;
+  let config;
+  let destChains;
+  let srcChains;
+  let tokenLists;
+  let tradeModes;
+  if ($[2] !== t1) {
+    ({
+      srcChains,
+      destChains,
+      tokenLists,
+      tradeModes,
+      ...config
+    } = t1);
+    $[2] = t1;
+    $[3] = config;
+    $[4] = destChains;
+    $[5] = srcChains;
+    $[6] = tokenLists;
+    $[7] = tradeModes;
   } else {
-    t3 = $[3];
+    config = $[3];
+    destChains = $[4];
+    srcChains = $[5];
+    tokenLists = $[6];
+    tradeModes = $[7];
   }
-  let t4;
-  if ($[4] !== events) {
-    t4 = events || {};
-    $[4] = events;
-    $[5] = t4;
+  let t2;
+  if ($[8] !== config) {
+    t2 = [setWidgetConfigAtom, {
+      ...defaultWidgetConfig,
+      ...config
+    }];
+    $[8] = config;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== destChains || $[11] !== srcChains || $[12] !== tokenLists || $[13] !== tradeModes) {
+    t3 = [setSubConfigAtom, {
+      ...defaultSubConfig,
+      srcChains,
+      destChains,
+      tokenLists,
+      tradeModes
+    }];
+    $[10] = destChains;
+    $[11] = srcChains;
+    $[12] = tokenLists;
+    $[13] = tradeModes;
+    $[14] = t3;
   } else {
-    t4 = $[5];
+    t3 = $[14];
   }
+  const t4 = provider || null;
   let t5;
-  if ($[6] !== t4) {
-    t5 = [widgetEventsAtom, t4];
-    $[6] = t4;
-    $[7] = t5;
+  if ($[15] !== t4) {
+    t5 = [externalProviderAtom, t4];
+    $[15] = t4;
+    $[16] = t5;
   } else {
-    t5 = $[7];
+    t5 = $[16];
   }
   let t6;
-  if ($[8] !== formInputProps) {
-    t6 = formInputProps || {};
-    $[8] = formInputProps;
-    $[9] = t6;
+  if ($[17] !== events) {
+    t6 = events || {};
+    $[17] = events;
+    $[18] = t6;
   } else {
-    t6 = $[9];
+    t6 = $[18];
   }
   let t7;
-  if ($[10] !== t6) {
-    t7 = [formInputPropsAtom, t6];
-    $[10] = t6;
-    $[11] = t7;
+  if ($[19] !== t6) {
+    t7 = [widgetEventsAtom, t6];
+    $[19] = t6;
+    $[20] = t7;
   } else {
-    t7 = $[11];
+    t7 = $[20];
   }
   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;
+  if ($[21] !== formInputProps) {
+    t8 = formInputProps || {};
+    $[21] = formInputProps;
+    $[22] = t8;
   } else {
-    t8 = $[16];
+    t8 = $[22];
   }
-  useHydrateAtoms(t8);
+  let t9;
+  if ($[23] !== t8) {
+    t9 = [formInputPropsAtom, t8];
+    $[23] = t8;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== queryClient) {
+    t10 = [queryClientAtom, queryClient];
+    $[25] = queryClient;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== t10 || $[28] !== t2 || $[29] !== t3 || $[30] !== t5 || $[31] !== t7 || $[32] !== t9) {
+    t11 = [t2, t3, t5, t7, t9, t10];
+    $[27] = t10;
+    $[28] = t2;
+    $[29] = t3;
+    $[30] = t5;
+    $[31] = t7;
+    $[32] = t9;
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  useHydrateAtoms(t11);
   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 = () => {
+  let t12;
+  let t13;
+  if ($[34] !== config.debug || $[35] !== config.enableCrossChain || $[36] !== config.enableDelta || $[37] !== config.ignoreBadUsdPrice || $[38] !== config.partner || $[39] !== config.privyAppId || $[40] !== config.privyClientId || $[41] !== config.theme || $[42] !== config.widgetMode || $[43] !== setWidgetConfig) {
+    t12 = () => {
       setWidgetConfig({
-        theme: config?.theme,
-        enableDelta: config?.enableDelta,
-        partner: config?.partner,
-        privyAppId: config?.privyAppId,
-        privyClientId: config?.privyClientId,
-        debug: config?.debug,
-        widgetMode: config?.widgetMode,
-        ignoreBadUsdPrice: config?.ignoreBadUsdPrice
+        theme: config.theme,
+        enableDelta: config.enableDelta,
+        enableCrossChain: config.enableCrossChain,
+        partner: config.partner,
+        privyAppId: config.privyAppId,
+        privyClientId: config.privyClientId,
+        debug: config.debug,
+        widgetMode: config.widgetMode,
+        ignoreBadUsdPrice: config.ignoreBadUsdPrice
       });
     };
-    $[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);
+    t13 = [config.theme, config.enableDelta, config.enableCrossChain, config.partner, config.privyAppId, config.privyClientId, config.debug, config.widgetMode, config.ignoreBadUsdPrice, setWidgetConfig];
+    $[34] = config.debug;
+    $[35] = config.enableCrossChain;
+    $[36] = config.enableDelta;
+    $[37] = config.ignoreBadUsdPrice;
+    $[38] = config.partner;
+    $[39] = config.privyAppId;
+    $[40] = config.privyClientId;
+    $[41] = config.theme;
+    $[42] = config.widgetMode;
+    $[43] = setWidgetConfig;
+    $[44] = t12;
+    $[45] = t13;
+  } else {
+    t12 = $[44];
+    t13 = $[45];
+  }
+  useLayoutEffect(t12, t13);
+  let t14;
+  let t15;
+  if ($[46] !== destChains || $[47] !== setSubConfig || $[48] !== srcChains || $[49] !== tokenLists || $[50] !== tradeModes) {
+    t14 = () => {
+      setSubConfig({
+        srcChains,
+        destChains,
+        tokenLists,
+        tradeModes
+      });
+    };
+    t15 = [srcChains, destChains, tokenLists, setSubConfig, tradeModes];
+    $[46] = destChains;
+    $[47] = setSubConfig;
+    $[48] = srcChains;
+    $[49] = tokenLists;
+    $[50] = tradeModes;
+    $[51] = t14;
+    $[52] = t15;
+  } else {
+    t14 = $[51];
+    t15 = $[52];
+  }
+  useLayoutEffect(t14, t15);
   const setExternalProvider = useSetAtom(externalProviderAtom);
-  let t19;
-  let t20;
-  if ($[37] !== provider || $[38] !== setExternalProvider) {
-    t19 = () => {
+  let t16;
+  let t17;
+  if ($[53] !== provider || $[54] !== setExternalProvider) {
+    t16 = () => {
       setExternalProvider(provider || null);
     };
-    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: [
+    t17 = [provider, setExternalProvider];
+    $[53] = provider;
+    $[54] = setExternalProvider;
+    $[55] = t16;
+    $[56] = t17;
+  } else {
+    t16 = $[55];
+    t17 = $[56];
+  }
+  useLayoutEffect(t16, t17);
+  let t18;
+  if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+    t18 = /* @__PURE__ */ jsxs(Web3Providers, { children: [
       /* @__PURE__ */ jsx(AutoconnectExternalProvider, {}),
       /* @__PURE__ */ jsx(PrivyIframeDependency, {}),
       /* @__PURE__ */ jsx(Updaters, {}),
       /* @__PURE__ */ jsx(App, {}),
       false
     ] });
-    $[41] = t21;
+    $[57] = t18;
   } else {
-    t21 = $[41];
+    t18 = $[57];
   }
-  return t21;
+  return t18;
 };
 const Widget = (t0) => {
   const $ = distExports.c(5);
@@ -406,7 +477,7 @@ const Widget = (t0) => {
   } = t0;
   let t1;
   if ($[0] !== config || $[1] !== events || $[2] !== input || $[3] !== provider) {
-    t1 = /* @__PURE__ */ jsx(JotaiProvider, { children: /* @__PURE__ */ jsx(WidgetBase, { config, provider, events, input }) });
+    t1 = /* @__PURE__ */ jsx(QueryClientProvider, { children: /* @__PURE__ */ jsx(JotaiProvider, { children: /* @__PURE__ */ jsx(WidgetBase, { config, provider, events, input }) }) });
     $[0] = config;
     $[1] = events;
     $[2] = input;
@@ -700,8 +771,8 @@ function SwapButton() {
     t2 = tokenFromInputProps.token && tokenToInputProps.token ? {
       fromToken: tokenFromInputProps.token,
       toToken: tokenToInputProps.token,
-      fromAmount: tokenFromInputProps.amount?.toString() ?? "0",
-      toAmount: tokenToInputProps.amount?.toString() ?? "0"
+      fromAmount: tokenFromInputProps.amount,
+      toAmount: tokenToInputProps.amount
     } : void 0;
     $[11] = tokenFromInputProps.amount;
     $[12] = tokenFromInputProps.token;