@rango-dev/widget-embedded 0.1.16-next.2 → 0.1.16-next.21

package/dist/widget-embedded.cjs.production.min.js

@@ -37,24 +37,6 @@ function removeDuplicateFrom(array) {
 function areEqual(array1, array2) {
   return array1.length === array2.length && array1.every((v, i) => v === array2[i]);
 }
-function shadeColor(color, percent) {
-  var R = parseInt(color.substring(1, 3), 16);
-  var G = parseInt(color.substring(3, 5), 16);
-  var B = parseInt(color.substring(5, 7), 16);
-  R = R * (100 + percent) / 100;
-  G = G * (100 + percent) / 100;
-  B = B * (100 + percent) / 100;
-  R = R < 255 ? R : 255;
-  G = G < 255 ? G : 255;
-  B = B < 255 ? B : 255;
-  R = Math.round(R);
-  G = Math.round(G);
-  B = Math.round(B);
-  var RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
-  var GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
-  var BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);
-  return '#' + RR + GG + BB;
-}
 function debounce(fn, time) {
   let timeoutId;
   return wrapper;
@@ -318,8 +300,8 @@ function getStateWallet(state) {
       return ui.WalletState.DISCONNECTED;
   }
 }
+const excludedWallets = [walletsShared.WalletTypes.LEAP];
 function getlistWallet(getState, getWalletInfo, list) {
-  const excludedWallets = [walletsShared.WalletType.UNKNOWN, walletsShared.WalletType.TERRA_STATION, walletsShared.WalletType.LEAP];
   return list.filter(wallet => !excludedWallets.includes(wallet)).map(type => {
     const {
       name,
@@ -420,7 +402,7 @@ function getBalanceFromWallet(connectedWallets, chain, symbol, address) {
   return selectedChainWallets.map(wallet => wallet.balances?.find(balance => address !== null && balance.address === address || address === null && balance.address === address && balance.symbol === symbol) || null).filter(balance => balance !== null).sort((a, b) => parseFloat(b?.amount || '0') - parseFloat(a?.amount || '1')).find(() => true) || null;
 }
 function isAccountAndWalletMatched(account, connectedWallet) {
-  return account.address === connectedWallet.address && account.chain === connectedWallet.chain && account.walletType === connectedWallet.walletType;
+  return account.address === connectedWallet.address && account.chain === connectedWallet.chain;
 }
 function makeBalanceFor(wallet, retrivedBalance, tokens) {
   const {
@@ -501,7 +483,9 @@ const isExperimentalChain = (blockchains, wallet) => {
   return cosmosExperimentalChainInfo && !!cosmosExperimentalChainInfo[wallet];
 };
 const getKeplrCompatibleConnectedWallets = selectableWallets => {
-  const connectedWalletTypes = new Set(selectableWallets.map(a => a.walletType.toString()));
+  const connectedWalletTypes = new Set(selectableWallets.map(wallet => {
+    return wallet.walletType;
+  }));
   return walletsShared.KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
 };
 function getTokensWithBalance(tokens, connectedWallets) {
@@ -831,7 +815,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
   connectWallet: accounts => {
     const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
     set(state => ({
-      connectedWallets: state.connectedWallets.concat(accounts.map(account => ({
+      connectedWallets: state.connectedWallets.filter(wallet => wallet.walletType !== accounts[0].walletType).concat(accounts.map(account => ({
         balances: [],
         address: account.address,
         chain: account.chain,
@@ -1367,10 +1351,10 @@ const Container = /*#__PURE__*/ui.styled('div', {
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutrals300'
+        backgroundColor: '$neutral100'
       },
       outlined: {
-        border: '1px solid $neutrals300'
+        border: '1px solid $neutral100'
       }
     }
   },
@@ -1406,14 +1390,14 @@ const Container = /*#__PURE__*/ui.styled('div', {
 const ImagePlaceholder = /*#__PURE__*/ui.styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   borderRadius: '99999px'
 });
 const OutputContainer = /*#__PURE__*/ui.styled('div', {
   windth: '100%',
   height: '$48',
   borderRadius: '$5',
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
   display: 'flex',
@@ -1447,10 +1431,10 @@ function TokenPreview(props) {
     className: "head"
   }, React__default.createElement(ui.Typography, {
     variant: "body2",
-    color: "neutrals800"
+    color: "neutral800"
   }, props.label), React__default.createElement("div", null, percentageChange, props.usdValue && React__default.createElement(ui.Typography, {
     variant: "caption",
-    color: "neutrals600",
+    color: "neutral600",
     className: "usd-value"
   }, `$${numberToString(props.usdValue)}`))), React__default.createElement("div", {
     className: "form"
@@ -1465,8 +1449,9 @@ function TokenPreview(props) {
     suffix: ItemSuffix,
     align: "start",
     size: "large"
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Spacer, {
-    size: 12
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Divider, {
+    size: 12,
+    direction: "horizontal"
   }), React__default.createElement(ui.Button, {
     className: "selectors",
     variant: "outlined",
@@ -1478,8 +1463,9 @@ function TokenPreview(props) {
     suffix: ItemSuffix,
     size: "large",
     align: "start"
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Spacer, {
-    size: 12
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Divider, {
+    size: 12,
+    direction: "horizontal"
   }), React__default.createElement("div", {
     className: "amount"
   }, React__default.createElement(OutputContainer, null, React__default.createElement(ui.Typography, {
@@ -1493,8 +1479,8 @@ const Container$1 = /*#__PURE__*/ui.styled('div', {
   justifyContent: 'space-between',
   padding: '$8',
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
-  color: '$neutrals800',
+  backgroundColor: '$neutral100',
+  color: '$neutral800',
   fontSize: '$12',
   '.routes': {
     display: 'flex',
@@ -1525,8 +1511,9 @@ function RoutesOverview(props) {
     className: "fee"
   }, React__default.createElement(ui.GasIcon, {
     size: 12
-  }), React__default.createElement(ui.Spacer, {
-    size: 4
+  }), React__default.createElement(ui.Divider, {
+    size: 4,
+    direction: "horizontal"
   }), "$", props.totalFee) : null);
 }
 
@@ -1697,9 +1684,8 @@ function MinRequiredSlippage(_ref) {
   } = _ref;
   return React__default.createElement(StyledMessage, {
     variant: "body2"
-  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React__default.createElement(ui.Spacer, {
-    size: 8,
-    direction: "vertical"
+  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React__default.createElement(ui.Divider, {
+    size: 8
   }), React__default.createElement(ChangeSlippageButton, null));
 }
 
@@ -1736,9 +1722,8 @@ function BalanceErrors(_ref) {
     className: "title",
     variant: "title",
     color: 'error'
-  }, "Insufficent Balance:"), React__default.createElement(ui.Spacer, {
-    size: 8,
-    direction: "vertical"
+  }, "Insufficent Balance:"), React__default.createElement(ui.Divider, {
+    size: 8
   }), React__default.createElement(List, {
     showListStyle: showListStyle
   }, messages.map((warning, index) => React__default.createElement(ListItem, {
@@ -1846,6 +1831,7 @@ function ConfirmSwapPage() {
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const [dbErrorMessage, setDbErrorMessage] = React.useState('');
   const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
   const {
     manager
@@ -1880,21 +1866,25 @@ function ConfirmSwapPage() {
     requiredWallets: getRequiredChains(bestRoute),
     selectableWallets: selectableWallets,
     onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
-    onConfirm: () => {
-      confirmSwap?.().then(swap => {
+    onConfirm: async () => {
+      confirmSwap?.().then(async swap => {
         if (swap) {
-          manager?.create('swap', {
-            swapDetails: swap
-          }, {
-            id: swap.requestId
-          });
-          setSelectedSwap(swap.requestId);
-          navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
-            replace: true
-          });
-          setTimeout(() => {
-            setInputAmount('');
-          }, 0);
+          try {
+            await manager?.create('swap', {
+              swapDetails: swap
+            }, {
+              id: swap.requestId
+            });
+            setSelectedSwap(swap.requestId);
+            navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
+              replace: true
+            });
+            setTimeout(() => {
+              setInputAmount('');
+            }, 0);
+          } catch (e) {
+            setDbErrorMessage('Error: ' + e?.message);
+          }
         }
       });
     },
@@ -1915,9 +1905,8 @@ function ConfirmSwapPage() {
       amount: fromAmount,
       label: i18n.t('From'),
       loadingStatus: loadingMetaStatus !== 'success' ? loadingMetaStatus : bestRouteloadingStatus
-    }), React__default.createElement(ui.Spacer, {
-      size: 12,
-      direction: "vertical"
+    }), React__default.createElement(ui.Divider, {
+      size: 12
     }), React__default.createElement(TokenPreview, {
       chain: {
         displayName: lastStep?.to.blockchain || '',
@@ -1941,11 +1930,9 @@ function ConfirmSwapPage() {
       totalFee: numberToString(totalFeeInUsd, 0, 2)
     }),
     loading: fetchingConfirmedRoute,
-    errors: ConfirmSwapErrors(errors),
+    errors: dbErrorMessage ? [dbErrorMessage, ...ConfirmSwapErrors(errors)] : ConfirmSwapErrors(errors),
     warnings: ConfirmSwapWarnings(warnings),
-    extraMessages: React__default.createElement(React__default.Fragment, null, loadingMetaStatus === 'failed' && React__default.createElement(ui.LoadingFailedAlert, null), loadingMetaStatus === 'failed' && showHighSlippageWarning && React__default.createElement(ui.Spacer, {
-      direction: "vertical"
-    }), showHighSlippageWarning && React__default.createElement(ConfirmSwapExtraMessages, {
+    extraMessages: React__default.createElement(React__default.Fragment, null, loadingMetaStatus === 'failed' && React__default.createElement(ui.LoadingFailedAlert, null), loadingMetaStatus === 'failed' && showHighSlippageWarning && React__default.createElement(ui.Divider, null), showHighSlippageWarning && React__default.createElement(ConfirmSwapExtraMessages, {
       selectedSlippage: selectedSlippage
     })),
     confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!'
@@ -2035,10 +2022,11 @@ const Container$2 = /*#__PURE__*/ui.styled('div', {
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutrals300'
+        backgroundColor: '$neutral100'
       },
       outlined: {
-        border: '1px solid $neutrals300'
+        border: '1px solid $neutral100',
+        backgroundColor: '$surface'
       }
     }
   },
@@ -2086,14 +2074,14 @@ const Options = /*#__PURE__*/ui.styled('div', {
 const ImagePlaceholder$1 = /*#__PURE__*/ui.styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   borderRadius: '99999px'
 });
 const OutputContainer$1 = /*#__PURE__*/ui.styled('div', {
   windth: '100%',
   height: '$48',
   borderRadius: '$5',
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
   display: 'flex',
@@ -2139,7 +2127,7 @@ function TokenInfo(props) {
     className: "head"
   }, React__default.createElement(ui.Typography, {
     variant: "body2",
-    color: "neutrals800"
+    color: "neutral800"
   }, t(type)), props.type === 'From' ? React__default.createElement(Options, null, React__default.createElement("div", {
     className: "balance",
     onClick: () => {
@@ -2147,8 +2135,8 @@ function TokenInfo(props) {
     }
   }, React__default.createElement(ui.Typography, {
     variant: "body3",
-    color: "neutrals600"
-  }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React__default.createElement(ui.Spacer, {
+    color: "neutral600"
+  }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React__default.createElement(ui.Divider, {
     size: 4
   }), React__default.createElement(ui.Button, {
     type: "primary",
@@ -2161,7 +2149,7 @@ function TokenInfo(props) {
     outputUsdValue: props.outputUsdValue
   }), React__default.createElement("div", null, React__default.createElement(ui.Typography, {
     variant: "caption",
-    color: "neutrals600"
+    color: "neutral600"
   }, `$${numberToString(props.outputUsdValue)}`)))), React__default.createElement("div", {
     className: "form"
   }, React__default.createElement(ui.Button, {
@@ -2179,8 +2167,9 @@ function TokenInfo(props) {
     suffix: ItemSuffix,
     align: "start",
     size: "large"
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Spacer, {
-    size: 12
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Divider, {
+    size: 12,
+    direction: "horizontal"
   }), React__default.createElement(ui.Button, {
     className: "selectors",
     onClick: () => {
@@ -2196,8 +2185,9 @@ function TokenInfo(props) {
     suffix: ItemSuffix,
     size: "large",
     align: "start"
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Spacer, {
-    size: 12
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Divider, {
+    size: 12,
+    direction: "horizontal"
   }), React__default.createElement("div", {
     className: "amount"
   }, props.type === 'From' ? React__default.createElement(ui.TextField, {
@@ -2217,7 +2207,7 @@ function TokenInfo(props) {
       }
     }, React__default.createElement(ui.Typography, {
       variant: "caption",
-      color: "neutrals800"
+      color: "neutral800"
     }, `$${numberToString(inputUsdValue)}`)),
     value: props.inputAmount || '',
     min: 0,
@@ -2253,7 +2243,7 @@ function BottomLogo() {
   } = reactI18next.useTranslation();
   return React__default.createElement(Container$3, null, React__default.createElement(ui.Typography, {
     variant: "caption",
-    color: "$neutrals600"
+    color: "$neutral600"
   }, t('Powered By')), React__default.createElement(StyledAnchor, {
     href: "https://rango.exchange",
     target: "_blank"
@@ -2571,7 +2561,8 @@ function SelectTokenPage(props) {
 
 function SettingsPage(_ref) {
   let {
-    supportedSwappers
+    supportedSwappers,
+    singleTheme
   } = _ref;
   const slippage = useSettingsStore.use.slippage();
   const setSlippage = useSettingsStore.use.setSlippage();
@@ -2613,7 +2604,8 @@ function SettingsPage(_ref) {
     onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
     liquiditySources: supportedUniqueSwappersGroups,
     selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
-    customSlippage: customSlippage || NaN,
+    singleTheme: singleTheme,
+    customSlippage: customSlippage,
     onCustomSlippageChange: setCustomSlippage,
     minSlippage: MIN_SLIPPGAE,
     maxSlippage: MAX_SLIPPAGE,
@@ -2657,7 +2649,7 @@ function WalletsPage(_ref) {
     getWalletInfo,
     connect
   } = walletsCore.useWallets();
-  const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(walletsShared.WalletType));
+  const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(walletsShared.WalletTypes));
   const walletsRef = React.useRef();
   let sortedWallets = walletsShared.detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
   sortedWallets = sortWalletsBasedOnState(sortedWallets);
@@ -2846,7 +2838,7 @@ function SwapDetailsPage() {
           label={t('From')}
           loadingStatus={'success'}
         />
-        <Spacer size={12} direction="vertical" />
+        <Divider size={12} />
         <TokenPreview
           chain={{
             displayName: lastStep?.toBlockchain || '',
@@ -2924,6 +2916,7 @@ function AppRoutes(props) {
   }, {
     path: navigationRoutes.settings,
     element: React__default.createElement(SettingsPage, {
+      singleTheme: config?.theme?.singleTheme,
       supportedSwappers: config?.liquiditySources
     })
   }, {
@@ -2957,6 +2950,10 @@ const Header = /*#__PURE__*/ui.styled('div', {
     display: 'flex'
   }
 });
+const WalletImages = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  paddingLeft: '12px'
+});
 const WalletImageContainer = /*#__PURE__*/ui.styled('div', {
   marginLeft: -15,
   marginRight: '$6',
@@ -3027,13 +3024,14 @@ function Layout(_ref) {
     disabled: loadingMetaStatus === 'failed',
     onClick: () => {
       if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
-    }
-  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React__default.createElement(WalletImageContainer, {
-    key: index
-  }, React__default.createElement(ui.Image, {
-    src: walletImage,
-    size: 24
-  }))) : React__default.createElement(React__default.Fragment, null), React__default.createElement("div", {
+    },
+    prefix: connectedWalletsImages?.length ? React__default.createElement(WalletImages, null, connectedWalletsImages.map((walletImage, index) => React__default.createElement(WalletImageContainer, {
+      key: index
+    }, React__default.createElement(ui.Image, {
+      src: walletImage,
+      size: 24
+    })))) : null
+  }, React__default.createElement("div", {
     className: "balance"
   }, React__default.createElement(ui.Typography, {
     variant: "body2"
@@ -3064,96 +3062,73 @@ function usePrevious(value) {
 function useTheme(_ref) {
   let {
     colors: themeColors,
-    fontFamily = 'Robot',
+    fontFamily = 'Roboto',
     borderRadius = 8,
     mode = 'auto'
   } = _ref;
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const setTheme = useSettingsStore.use.setTheme();
-  const primary = themeColors?.primary || '#5FA425',
-    background = themeColors?.background || '#fff',
-    foreground = themeColors?.foreground || '#000',
-    error = themeColors?.error || '#FF0000',
-    warning = themeColors?.warning || '#F5A623',
-    success = themeColors?.success || '#0070F3';
-  const colors = {
-    neutrals200: '#FAFAFA',
-    neutrals300: '#f2f2f2',
-    neutrals400: '#dedede',
-    neutrals500: '#cccccc',
-    neutrals600: '#acacac',
-    neutrals700: '#444444',
-    neutrals800: '#333333',
-    neutrals900: '#111111',
-    primary,
-    primary100: shadeColor(primary, 15),
-    primary200: shadeColor(primary, -10),
-    primary300: shadeColor(primary, -15),
-    primary400: shadeColor(primary, -20),
-    primary500: shadeColor(primary, -25),
-    primary600: shadeColor(primary, -30),
-    primary700: shadeColor(primary, -35),
-    primary800: shadeColor(primary, -40),
-    primary900: shadeColor(primary, -45),
+  const light = themeColors?.light;
+  const dark = themeColors?.dark;
+  const neutral = light?.neutral || '#fafafa';
+  const background = light?.background || '#fff';
+  const foreground = light?.foreground || '#000';
+  const darkColors = {
+    ...ui.generateRangeColors('primary', 'dark', dark?.primary),
+    ...ui.generateRangeColors('error', 'dark', dark?.error),
+    ...ui.generateRangeColors('warning', 'dark', dark?.warning),
+    ...ui.generateRangeColors('success', 'dark', dark?.success),
+    ...ui.generateRangeColors('neutral', 'dark', dark?.neutral),
+    surface: dark?.surface,
+    background: dark?.background,
+    foreground: dark?.foreground
+  };
+  const lightColors = {
+    surface: light?.surface || '#fff',
+    ...ui.generateRangeColors('primary', 'light', light?.primary || '#5FA425'),
+    ...ui.generateRangeColors('error', 'light', light?.error || '#FF0000'),
+    ...ui.generateRangeColors('warning', 'light', light?.warning || '#F5A623'),
+    ...ui.generateRangeColors('success', 'light', light?.success || '#0070F3'),
+    ...ui.generateRangeColors('neutral', 'light', neutral),
     background,
-    foreground,
-    error,
-    error100: shadeColor(error, 50),
-    error300: shadeColor(error, -10),
-    error500: shadeColor(error, -20),
-    error700: shadeColor(error, -30),
-    warning,
-    warning100: shadeColor(warning, 50),
-    warning300: shadeColor(warning, -10),
-    warning500: shadeColor(warning, -20),
-    warning700: shadeColor(warning, -30),
-    success,
-    success100: shadeColor(success, 50),
-    success300: shadeColor(success, -10),
-    success500: shadeColor(success, -20),
-    success700: shadeColor(success, -30)
+    foreground
   };
-  const customeLightTheme = ui.createTheme({
-    colors,
+  const customLightTheme = ui.createTheme({
+    colors: lightColors,
     radii: {
       5: `${borderRadius}px`
     },
     shadows: {
-      s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5'
+      s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${light?.neutral || '#f0f2f5'}, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`
     }
   });
-  const customeDarkTheme = ui.createTheme({
+  const customDarkTheme = ui.createTheme({
     colors: {
-      ...colors,
-      neutrals200: '#111111',
-      neutrals300: '#333333',
-      neutrals400: '#444444',
-      neutrals500: '#acacac',
-      neutrals600: '#cccccc',
-      neutrals700: '#dedede',
-      neutrals800: '#f2f2f2',
-      neutrals900: '#FAFAFA',
+      ...lightColors,
+      ...ui.generateRangeColors('neutral', 'dark', '#111111'),
       foreground: background,
-      background: foreground
+      background: foreground,
+      surface: '#000',
+      ...JSON.parse(JSON.stringify(darkColors))
     },
     radii: {
       5: `${borderRadius}px`
     },
     shadows: {
-      s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222'
+      s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${dark?.neutral || '#222'}, 0px 1px 18px 3px ${dark?.neutral || '#222'}`
     }
   });
-  const [OSTheme, setOSTheme] = React.useState(customeLightTheme);
+  const [OSTheme, setOSTheme] = React.useState('light');
   React.useEffect(() => {
     (async () => {
       await fetchMeta();
     })();
     const switchTheme = event => {
-      if (event.matches) setOSTheme(customeDarkTheme);else setOSTheme(customeLightTheme);
+      if (event.matches) setOSTheme('dark');else setOSTheme('light');
     };
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      setOSTheme(customeDarkTheme);
+      setOSTheme('dark');
     }
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme);
     return () => {
@@ -3172,7 +3147,7 @@ function useTheme(_ref) {
     classList.add(`font_${fontFamily.replace(/ /g, '')}`);
   }, [fontFamily]);
   const getActiveTheme = () => {
-    if (theme === 'auto') return OSTheme;else return theme === 'dark' ? customeDarkTheme : customeLightTheme;
+    if (theme === 'auto') return OSTheme === 'dark' ? customDarkTheme : customLightTheme;else return theme === 'dark' ? customDarkTheme : customLightTheme;
   };
   return {
     activeTheme: getActiveTheme()
@@ -3289,6 +3264,7 @@ function QueueManager(props) {
     }
     return connect(wallet, network);
   };
+  const isMobileWallet = walletType => !!getWalletInfo(walletType).mobileWallet;
   // TODO: this code copy & pasted from rango, should be refactored.
   const allBlockchains = blockchains.filter(blockchain => blockchain.enabled).reduce((blockchainsObj, blockchain) => (blockchainsObj[blockchain.name] = blockchain, blockchainsObj), {});
   const evmBasedChains = blockchains.filter(rangoSdk.isEvmBlockchain);
@@ -3325,12 +3301,10 @@ function QueueManager(props) {
     switchNetwork,
     connect,
     state,
+    isMobileWallet,
     notifier
   };
-  return React__default.createElement(queueManagerReact.Provider
-  //@ts-ignore
-  , {
-    //@ts-ignore
+  return React__default.createElement(queueManagerReact.Provider, {
     queuesDefs: [swapQueueDef],
     context: context,
     onPersistedDataLoaded: manager => {
@@ -3423,11 +3397,5 @@ const Widget = _ref => {
   }))))));
 };
 
-Object.defineProperty(exports, 'WalletType', {
-  enumerable: true,
-  get: function () {
-    return walletsShared.WalletType;
-  }
-});
 exports.Widget = Widget;
 //# sourceMappingURL=widget-embedded.cjs.production.min.js.map