@rango-dev/widget-embedded 0.1.10-next.88 → 0.1.10-next.91

package/dist/widget-embedded.esm.js

@@ -1,18 +1,24 @@
-import { WalletState, Tooltip, Button, RetryIcon, HistoryIcon, SettingsIcon, styled, Typography, InfoCircleIcon, AngleDownIcon, TextField, VerticalSwapIcon, BestRoute, Alert, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Wallet, ConfirmWallets, SwapHistory, AddWalletIcon, globalCss, lightTheme, darkTheme, SwapContainer } from '@rango-dev/ui';
-import React, { useRef, useEffect, useState } from 'react';
+import { WalletState, Tooltip, Button, RetryIcon, HistoryIcon, SettingsIcon, styled, css, Typography, InfoCircleIcon, AngleDownIcon, TextField, VerticalSwapIcon, BestRoute, Alert, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Wallet, ConfirmWallets, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
+import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
 import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
 import { useSearchParams, useLocation, createSearchParams, useNavigate, useInRouterContext, useRoutes } from 'react-router-dom';
 import { create } from 'zustand';
 import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { RangoClient, isEvmBlockchain } from 'rango-sdk';
-import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, WalletType, getCosmosExperimentalChainInfo, isCosmosBlockchain } from '@rango-dev/wallets-shared';
-import { readAccountAddress, useWallets, Provider, Events } from '@rango-dev/wallets-core';
+import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, WalletType, getCosmosExperimentalChainInfo, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
+import { isCosmosBlockchain } from 'rango-types';
+import { readAccountAddress, useWallets, Provider as Provider$1, Events } from '@rango-dev/wallets-core';
+import { useTranslation, initReactI18next } from 'react-i18next';
 import { styled as styled$1 } from '@rango-dev/ui/src/theme';
 import { allProviders } from '@rango-dev/provider-all';
 import { shallow } from 'zustand/shallow';
-import { useManager } from '@rango-dev/queue-manager-react';
+import { useManager, Provider } from '@rango-dev/queue-manager-react';
 import copy from 'copy-to-clipboard';
+import i18n from 'i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { swapQueueDef } from '@rango-dev/queue-manager-rango-preset';
 
 const navigationRoutes = {
   home: '/',
@@ -37,6 +43,24 @@ 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;
+}
 
 const getBestRouteToTokenUsdPrice = bestRoute => bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
 function isNumberOfSwapsChanged(route1, route2) {
@@ -993,11 +1017,22 @@ const HeaderContainer = /*#__PURE__*/styled('div', {
 });
 function Header(props) {
   const {
-    onClickRefresh
+    onClickRefresh,
+    title,
+    titleSize,
+    titleWeight
   } = props;
+  const {
+    t
+  } = useTranslation();
+  const titleStyle = css({
+    fontSize: `${titleSize}px !important`,
+    fontWeight: `${titleWeight} !important`
+  });
   return React.createElement(HeaderContainer, null, React.createElement(Typography, {
-    variant: "h4"
-  }, "SWAP"), React.createElement(HeaderButtons, {
+    variant: "h4",
+    className: titleStyle()
+  }, t(title.toLocaleLowerCase()) || title), React.createElement(HeaderButtons, {
     onClickRefresh: onClickRefresh
   }));
 }
@@ -1075,6 +1110,11 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
       address: wallet.address,
       walletType: wallet.walletType
     })
+  })),
+  clearConnectedWallet: () => set(() => ({
+    accounts: [],
+    balances: [],
+    selectedWallets: []
   }))
 }))));
 
@@ -1138,6 +1178,9 @@ function TokenInfo(props) {
   const inputAmount = useBestRouteStore.use.inputAmount();
   const balances = useWalletsStore.use.balances();
   const navigate = useNavigate();
+  const {
+    t
+  } = useTranslation();
   const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
   const tokenBalanceReal = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.decimal) : '0';
   const ItemSuffix = React.createElement("div", {
@@ -1152,7 +1195,7 @@ function TokenInfo(props) {
   }), React.createElement(AngleDownIcon, null));
   return React.createElement(Box, null, React.createElement("div", null, React.createElement(Typography, {
     variant: "body2"
-  }, type)), React.createElement(Container, null, props.type === 'From' && React.createElement(Options, null, React.createElement("div", {
+  }, t(type))), React.createElement(Container, null, props.type === 'From' && React.createElement(Options, null, React.createElement("div", {
     className: "balance",
     onClick: () => {
       if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
@@ -1162,7 +1205,7 @@ function TokenInfo(props) {
     size: "small"
   }, React.createElement(Typography, {
     variant: "body2"
-  }, `Max: ${tokenBalance} ${fromToken?.symbol || ''}`)))), React.createElement("div", {
+  }, `${t('Max')}: ${tokenBalance} ${fromToken?.symbol || ''}`)))), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
     onClick: () => {
@@ -1180,7 +1223,7 @@ function TokenInfo(props) {
     style: {
       marginRight: '.5rem'
     }
-  }, loadingStatus === 'success' && chain ? chain.displayName : 'Chain'), React.createElement(Button, {
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Button, {
     onClick: () => {
       navigate(`/${props.type.toLowerCase()}-token`);
     },
@@ -1196,7 +1239,7 @@ function TokenInfo(props) {
     style: {
       marginRight: '.5rem'
     }
-  }, loadingStatus === 'success' && token ? token.symbol : 'Token'), props.type === 'From' ? React.createElement(TextField, {
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), props.type === 'From' ? React.createElement(TextField, {
     type: "number",
     size: "large",
     autoFocus: true,
@@ -1251,9 +1294,12 @@ const StyledAnchor = /*#__PURE__*/styled$1('a', {
   textDecoration: 'none'
 });
 function BottomLogo() {
+  const {
+    t
+  } = useTranslation();
   return React.createElement(Container$1, null, React.createElement(Typography, {
     variant: "caption"
-  }, "Powered By"), React.createElement(StyledAnchor, {
+  }, t('Powered By')), React.createElement(StyledAnchor, {
     href: "https://rango.exchange",
     target: "_blank"
   }, React.createElement(Logo, {
@@ -1343,7 +1389,12 @@ const Alerts = /*#__PURE__*/styled('div', {
   width: '100%',
   paddingTop: '$16'
 });
-function Home() {
+function Home(props) {
+  const {
+    title = 'SWAP',
+    titleSize = 18,
+    titleWeight = 600
+  } = props;
   const waningMessage = '';
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
@@ -1356,9 +1407,9 @@ function Home() {
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToChain = useBestRouteStore.use.setToChain();
   const setToToken = useBestRouteStore.use.setToToken();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const inputAmount = useBestRouteStore.use.inputAmount();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
   const outputAmount = useBestRouteStore.use.outputAmount();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
   const bestRoute = useBestRouteStore.use.bestRoute();
@@ -1390,6 +1441,9 @@ function Home() {
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
   const highFee = hasHighFee(totalFeeInUsd);
   return React.createElement(Container$2, null, React.createElement(Header, {
+    title: title,
+    titleSize: titleSize,
+    titleWeight: titleWeight,
     onClickRefresh: fetchBestRoute
   }), React.createElement(TokenInfo, {
     type: "From",
@@ -1445,7 +1499,11 @@ function Home() {
   }, swapButtonState.title), React.createElement(BottomLogo, null)));
 }
 
-const Route = props => {
+const Route = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
   const location = useLocation$1();
   const navigate = useNavigate$1();
   const ref = useRef(true);
@@ -1455,16 +1513,17 @@ const Route = props => {
     });
     ref.current = false;
   }, []);
-  if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) return React.createElement(Home, null);
-  return React.createElement(React.Fragment, null, " ", props.children);
+  if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) return React.createElement(Home, Object.assign({}, props));
+  return React.createElement(React.Fragment, null, " ", children);
 };
-function AppRouter(_ref) {
+function AppRouter(_ref2) {
   let {
-    children
-  } = _ref;
+    children,
+    ...props
+  } = _ref2;
   const isRouterInContext = useInRouterContext$1();
   const Router = isRouterInContext ? Route : MemoryRouter;
-  return React.createElement(React.Fragment, null, React.createElement(Router, null, children), isRouterInContext && React.createElement(UpdateUrl, null));
+  return React.createElement(React.Fragment, null, React.createElement(Router, Object.assign({}, props), children), isRouterInContext && React.createElement(UpdateUrl, null));
 }
 
 const StyledButton = /*#__PURE__*/styled(Button, {
@@ -1568,7 +1627,7 @@ const confirmSwap = async () => {
     meta
   } = useMetaStore.getState();
   const userSlippage = customSlippage || slippage;
-  if (!fromToken || !toToken || !inputAmount || !initialRoute) return;
+  if (!fromToken || !toToken || !inputAmount || !initialRoute) return undefined;
   if (proceedAnyway) {
     const swapSettings = {
       slippage: userSlippage.toString(),
@@ -1859,10 +1918,11 @@ function HistoryPage() {
   });
 }
 
-function LiquiditySourcePage() {
-  const {
-    swappers
-  } = useMetaStore.use.meta();
+function LiquiditySourcePage(_ref) {
+  let {
+    supportedSwappers
+  } = _ref;
+  const swappers = useMetaStore.use.meta().swappers;
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
   const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
   const toggleAllLiquiditySources = useSettingsStore.use.toggleAllLiquiditySources();
@@ -1886,7 +1946,7 @@ function LiquiditySourcePage() {
   });
   return React.createElement(LiquiditySourcesSelector, {
     toggleAll: toggleAllLiquiditySources,
-    list: uniqueSwappersGroups,
+    list: supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups,
     onChange: liquiditySource => toggleLiquiditySource(liquiditySource.title),
     onBack: navigateBackFrom.bind(null, navigationRoutes.liquiditySources)
   });
@@ -1894,11 +1954,10 @@ function LiquiditySourcePage() {
 
 function SelectChainPage(props) {
   const {
-    type
+    type,
+    supportedChains
   } = props;
-  const {
-    blockchains
-  } = useMetaStore.use.meta();
+  const blockchains = supportedChains === 'all' ? useMetaStore.use.meta().blockchains : supportedChains;
   const loadingStatus = useMetaStore.use.loadingStatus();
   const fromChain = useBestRouteStore.use.fromChain();
   const toChain = useBestRouteStore.use.toChain();
@@ -1925,15 +1984,14 @@ function SelectChainPage(props) {
 }
 
 function SelectTokenPage(props) {
-  const {
-    type
-  } = props;
   const {
     navigateBackFrom
   } = useNavigateBack();
   const {
-    tokens
-  } = useMetaStore.use.meta();
+    type,
+    supportedTokens
+  } = props;
+  const tokens = supportedTokens === 'all' ? useMetaStore.use.meta().tokens : supportedTokens;
   const fromChain = useBestRouteStore.use.fromChain();
   const toChain = useBestRouteStore.use.toChain();
   const fromToken = useBestRouteStore.use.fromToken();
@@ -1970,7 +2028,10 @@ function SelectTokenPage(props) {
   });
 }
 
-function SettingsPage() {
+function SettingsPage(_ref) {
+  let {
+    supportedSwappers
+  } = _ref;
   const slippage = useSettingsStore.use.slippage();
   const setSlippage = useSettingsStore.use.setSlippage();
   const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
@@ -1978,9 +2039,7 @@ function SettingsPage() {
   const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
   const theme = useSettingsStore.use.theme();
   const setTheme = useSettingsStore.use.setTheme();
-  const {
-    swappers
-  } = useMetaStore.use.meta();
+  const swappers = useMetaStore.use.meta().swappers;
   const navigate = useNavigate();
   const {
     navigateBackFrom
@@ -2002,14 +2061,16 @@ function SettingsPage() {
       }
     }
   });
+  supportedSwappers !== 'all' && uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0);
+  const supportedUniqueSwappersGroups = supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups;
   return React.createElement(Settings, {
     slippages: SLIPPAGES,
     selectedSlippage: slippage,
     onSlippageChange: slippage => setSlippage(slippage),
-    liquiditySources: uniqueSwappersGroups,
-    selectedLiquiditySources: uniqueSwappersGroups.filter(s => s.selected),
     onLiquiditySourcesClick: navigate.bind(null, navigationRoutes.liquiditySources),
     onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
+    liquiditySources: supportedUniqueSwappersGroups,
+    selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
     customSlippage: customSlippage || NaN,
     onCustomSlippageChange: setCustomSlippage,
     minSlippage: MIN_SLIPPGAE,
@@ -2032,7 +2093,11 @@ const ListContainer = /*#__PURE__*/styled('div', {
 const AlertContainer = /*#__PURE__*/styled('div', {
   paddingBottom: '$16'
 });
-function WalletsPage() {
+function WalletsPage(_ref) {
+  let {
+    supportedWallets,
+    multiWallets
+  } = _ref;
   const {
     navigateBackFrom
   } = useNavigateBack();
@@ -2042,9 +2107,12 @@ function WalletsPage() {
     getWalletInfo,
     connect
   } = useWallets();
-  const wallets = getlistWallet(state, getWalletInfo, Object.values(WalletType));
+  const wallets = getlistWallet(state, getWalletInfo, supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets);
   const [walletErrorMessage, setWalletErrorMessage] = useState('');
   const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
+  const {
+    t
+  } = useTranslation();
   const onSelectWallet = async type => {
     const wallet = state(type);
     try {
@@ -2052,6 +2120,9 @@ function WalletsPage() {
       if (wallet.connected) {
         await disconnect(type);
       } else {
+        if (!multiWallets && !!wallets.find(w => w.state === WalletState.CONNECTED)) {
+          return;
+        }
         await connect(type);
       }
     } catch (e) {
@@ -2063,7 +2134,7 @@ function WalletsPage() {
     return () => toggleConnectWalletsButton();
   }, []);
   return React.createElement(SecondaryPage, {
-    title: "Select Wallet",
+    title: t('Select Wallet'),
     textField: false,
     onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
   }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
@@ -2169,51 +2240,80 @@ function SwapDetailsPage() {
   });
 }
 
-const AppRoutes = () => useRoutes([{
-  path: navigationRoutes.home,
-  element: React.createElement(Home, null)
-}, {
-  path: navigationRoutes.fromChain,
-  element: React.createElement(SelectChainPage, {
-    type: "from"
-  })
-}, {
-  path: navigationRoutes.toChain,
-  element: React.createElement(SelectChainPage, {
-    type: "to"
-  })
-}, {
-  path: navigationRoutes.fromToken + '/*',
-  element: React.createElement(SelectTokenPage, {
-    type: "from"
-  })
-}, {
-  path: navigationRoutes.toToken,
-  element: React.createElement(SelectTokenPage, {
-    type: "to"
-  })
-}, {
-  path: navigationRoutes.settings,
-  element: React.createElement(SettingsPage, null)
-}, {
-  path: navigationRoutes.liquiditySources,
-  element: React.createElement(LiquiditySourcePage, null)
-}, {
-  path: navigationRoutes.swaps,
-  element: React.createElement(HistoryPage, null)
-}, {
-  path: navigationRoutes.swapDetails,
-  element: React.createElement(SwapDetailsPage, null)
-}, {
-  path: navigationRoutes.wallets,
-  element: React.createElement(WalletsPage, null)
-}, {
-  path: navigationRoutes.confirmSwap,
-  element: React.createElement(ConfirmSwapPage, null)
-}, {
-  path: navigationRoutes.confirmWallets,
-  element: React.createElement(ConfirmWalletsPage, null)
-}]);
+const AppRoutes = _ref => {
+  let {
+    fromChains = 'all',
+    toChains = 'all',
+    fromTokens = 'all',
+    toTokens = 'all',
+    liquiditySources = 'all',
+    wallets = 'all',
+    title,
+    multiWallets = true,
+    titleSize,
+    titleWeight
+  } = _ref;
+  return useRoutes([{
+    path: navigationRoutes.home,
+    element: React.createElement(Home, {
+      title: title,
+      titleSize: titleSize,
+      titleWeight: titleWeight
+    })
+  }, {
+    path: navigationRoutes.fromChain,
+    element: React.createElement(SelectChainPage, {
+      type: "from",
+      supportedChains: fromChains
+    })
+  }, {
+    path: navigationRoutes.toChain,
+    element: React.createElement(SelectChainPage, {
+      type: "to",
+      supportedChains: toChains
+    })
+  }, {
+    path: navigationRoutes.fromToken + '/*',
+    element: React.createElement(SelectTokenPage, {
+      type: "from",
+      supportedTokens: fromTokens
+    })
+  }, {
+    path: navigationRoutes.toToken,
+    element: React.createElement(SelectTokenPage, {
+      type: "to",
+      supportedTokens: toTokens
+    })
+  }, {
+    path: navigationRoutes.settings,
+    element: React.createElement(SettingsPage, {
+      supportedSwappers: liquiditySources
+    })
+  }, {
+    path: navigationRoutes.liquiditySources,
+    element: React.createElement(LiquiditySourcePage, {
+      supportedSwappers: liquiditySources
+    })
+  }, {
+    path: navigationRoutes.swaps,
+    element: React.createElement(HistoryPage, null)
+  }, {
+    path: navigationRoutes.swapDetails,
+    element: React.createElement(SwapDetailsPage, null)
+  }, {
+    path: navigationRoutes.wallets,
+    element: React.createElement(WalletsPage, {
+      supportedWallets: wallets,
+      multiWallets: multiWallets
+    })
+  }, {
+    path: navigationRoutes.confirmSwap,
+    element: React.createElement(ConfirmSwapPage, null)
+  }, {
+    path: navigationRoutes.confirmWallets,
+    element: React.createElement(ConfirmWalletsPage, null)
+  }]);
+};
 
 const Header$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -2227,7 +2327,10 @@ const WalletImage = /*#__PURE__*/styled('img', {
   marginRight: '$6',
   borderRadius: '99999px'
 });
-function Layout() {
+function Layout(_ref) {
+  let {
+    configs
+  } = _ref;
   const navigate = useNavigate();
   const {
     balances,
@@ -2238,8 +2341,34 @@ function Layout() {
     getWalletInfo
   } = useWallets();
   const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(w => w.image));
+  const {
+    fromChain,
+    toChain,
+    toToken,
+    fromToken,
+    fromAmount
+  } = configs;
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
   const totalBalance = calculateWalletUsdValue(balances);
   const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
+  const {
+    t
+  } = useTranslation();
+  useEffect(() => {
+    setToChain(toChain);
+    setToToken(toToken);
+  }, [toChain, toToken]);
+  useEffect(() => {
+    setInputAmount(fromAmount.toString());
+  }, [fromAmount]);
+  useEffect(() => {
+    setFromToken(fromToken);
+    setFromChain(fromChain);
+  }, [fromToken, fromChain]);
   return React.createElement(React.Fragment, null, React.createElement(Header$1, null, React.createElement(Button, {
     size: "small",
     suffix: React.createElement(AddWalletIcon, {
@@ -2255,7 +2384,7 @@ function Layout() {
     src: walletImage
   })) : React.createElement(React.Fragment, null), React.createElement(Typography, {
     variant: "body2"
-  }, !accounts?.length ? 'Connect Wallet' : `$${totalBalance || 0}`))), React.createElement(AppRoutes, null));
+  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`))), React.createElement(AppRoutes, Object.assign({}, configs)));
 }
 
 const globalStyles = /*#__PURE__*/globalCss({
@@ -2274,52 +2403,298 @@ const globalStyles = /*#__PURE__*/globalCss({
     }
   }
 });
+const globalFont = fontFamily => globalCss({
+  '@import': ["url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')", "url('https://fonts.cdnfonts.com/css/times-new-roman')"],
+  [`.font_${fontFamily.replace(/ /g, '')} ._text`]: {
+    fontFamily
+  }
+})();
+
+function usePrevious(value) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef();
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}
 
-function useTheme() {
+function useTheme(_ref) {
+  let {
+    primary = '#5FA425',
+    background = '#fff',
+    foreground = '#000',
+    error = '#FF0000',
+    warning = '#F5A623',
+    success = '#0070F3',
+    fontFamily = 'Robot',
+    borderRadius = 5
+  } = _ref;
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
-  const [OSTheme, setOSTheme] = useState(lightTheme);
+  const colors = {
+    neutrals200: '#FAFAFA',
+    neutrals300: '#EAEAEA',
+    neutrals400: '#999999',
+    neutrals500: '#888888',
+    neutrals600: '#666666',
+    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),
+    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)
+  };
+  const customeLightTheme = createTheme({
+    colors,
+    radii: {
+      5: `${borderRadius}px`
+    }
+  });
+  const customeDarkTheme = createTheme({
+    colors: {
+      ...colors,
+      neutrals200: '#111111',
+      neutrals300: '#333333',
+      neutrals400: '#444444',
+      neutrals500: '#666666',
+      neutrals600: '#888888',
+      neutrals700: '#999999',
+      neutrals800: '#EAEAEA',
+      neutrals900: '#FAFAFA',
+      foreground: background,
+      background: foreground
+    },
+    radii: {
+      5: `${borderRadius}px`
+    }
+  });
+  const [OSTheme, setOSTheme] = useState(customeLightTheme);
   useEffect(() => {
     (async () => {
       await fetchMeta();
     })();
     const switchTheme = event => {
-      if (event.matches) setOSTheme(darkTheme);else setOSTheme(lightTheme);
+      if (event.matches) setOSTheme(customeDarkTheme);else setOSTheme(customeLightTheme);
     };
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      setOSTheme(darkTheme);
+      setOSTheme(customeDarkTheme);
     }
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme);
     return () => {
       window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', switchTheme);
     };
   }, []);
+  const prevFont = usePrevious(fontFamily);
+  useLayoutEffect(() => {
+    const {
+      classList
+    } = document.body;
+    if (prevFont) classList.remove(`font_${prevFont.replace(/ /g, '')}`);
+    classList.add(`font_${fontFamily.replace(/ /g, '')}`);
+  }, [fontFamily]);
   const getActiveTheme = () => {
-    if (theme === 'auto') return OSTheme;else return theme === 'dark' ? darkTheme : lightTheme;
+    if (theme === 'auto') return OSTheme;else return theme === 'dark' ? customeDarkTheme : customeLightTheme;
   };
   return {
     activeTheme: getActiveTheme()
   };
 }
 
-const providers = /*#__PURE__*/allProviders();
-const SwapBox = () => {
+function useSelectLanguage() {
+  const {
+    i18n
+  } = useTranslation();
+  // @ts-ignore
+  const currentLanguage = i18n?.language || 'en';
+  const changeLanguage = value => {
+    if (currentLanguage !== value) {
+      // @ts-ignore
+      i18n.changeLanguage(value);
+    }
+  };
+  return {
+    changeLanguage,
+    currentLanguage
+  };
+}
+
+var swap = "SWAP";
+var From = "From";
+var To = "To";
+var Max = "Max";
+var Chain = "Chain";
+var Token = "Token";
+var Source = "Source";
+var Destination = "Destination";
+var en = {
+	swap: swap,
+	"Connect Wallet": "Connect Wallet",
+	"Powered By": "Powered By",
+	From: From,
+	To: To,
+	Max: Max,
+	Chain: Chain,
+	Token: Token,
+	Source: Source,
+	Destination: Destination,
+	"Select Wallet": "Select Wallet"
+};
+
+var swap$1 = "TAKAS";
+var From$1 = "İtibaren";
+var To$1 = "İle";
+var Max$1 = "maks.";
+var Chain$1 = "Zincir";
+var Token$1 = "Jeton";
+var tr = {
+	swap: swap$1,
+	"Select Wallet": "Cüzdan Seç",
+	"Powered By": "Tarafından desteklenmektedir",
+	"Connect Wallet": "Cüzdanı Bağla",
+	From: From$1,
+	To: To$1,
+	Max: Max$1,
+	Chain: Chain$1,
+	Token: Token$1
+};
+
+const languages = ['en', 'tr'];
+i18n.use(Backend)
+// detect user language
+.use(LanguageDetector)
+// pass the i18n instance to react-i18next.
+.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: en
+    },
+    tr: {
+      translation: tr
+    }
+  },
+  fallbackLng: 'en',
+  debug: true,
+  whitelist: languages
+});
+
+function QueueManager(props) {
+  const {
+    providers,
+    getSigners,
+    state,
+    connect,
+    canSwitchNetworkTo,
+    getWalletInfo
+  } = useWallets();
+  const {
+    blockchains
+  } = useMetaStore.use.meta();
+  const balances = useWalletsStore.use.balances();
+  const wallets = {
+    blockchains: balances.map(wallet => ({
+      accounts: [wallet],
+      name: wallet.chain
+    }))
+  };
+  const switchNetwork = (wallet, network) => {
+    if (!canSwitchNetworkTo(wallet, network)) {
+      return undefined;
+    }
+    return connect(wallet, network);
+  };
+  // 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(isEvmBlockchain);
+  const getSupportedChainNames = type => {
+    const {
+      supportedChains
+    } = getWalletInfo(type);
+    return walletAndSupportedChainsNames(supportedChains);
+  };
+  const allProviders = providers();
+  const context = {
+    meta: {
+      blockchains: allBlockchains,
+      evmBasedChains: evmBasedChains,
+      evmNetworkChainInfo: convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
+      getSupportedChainNames
+    },
+    getSigners,
+    //todo: remove Network type
+    //@ts-ignore
+    wallets,
+    providers: allProviders,
+    switchNetwork,
+    connect,
+    state,
+    notifier: message => {
+      console.log('[notifier]', message);
+    }
+  };
+  return React.createElement(Provider, {
+    queuesDefs: [swapQueueDef],
+    context: context,
+    onPersistedDataLoaded: _manager => {},
+    isPaused: false
+  }, props.children);
+}
+
+const SwapBox = _ref => {
+  let {
+    configs
+  } = _ref;
   globalStyles();
+  globalFont(configs?.fontFamily || 'Roboto');
   const {
     activeTheme
-  } = useTheme();
+  } = useTheme({
+    ...configs.colors,
+    borderRadius: configs?.borderRadius,
+    fontFamily: configs?.fontFamily
+  });
   const {
     blockchains
   } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
+  const setTheme = useSettingsStore.use.setTheme();
+  const {
+    changeLanguage
+  } = useSelectLanguage();
+  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
   const evmBasedChainNames = blockchains.filter(isEvmBlockchain).map(chain => chain.name);
-  const onUpdateState = (type, event, value, supportedChains) => {
+  const onUpdateState = (type, event, value, _, supportedChains) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
-        const supportedChainNames =
-        //@ts-ignore
-        walletAndSupportedChainsNames(supportedChains);
+        const supportedChainNames = walletAndSupportedChainsNames(supportedChains);
         const data = prepareAccountsForWalletStore(type, value, evmBasedChainNames, supportedChainNames);
         connectWallet(data);
       } else {
@@ -2327,14 +2702,40 @@ const SwapBox = () => {
       }
     }
   };
-  return React.createElement(Provider, {
+  let providers = allProviders();
+  useEffect(() => {
+    if (configs.theme !== 'auto') setTheme(configs.theme);
+  }, [configs.theme]);
+  useEffect(() => {
+    const wallets = configs.wallets;
+    clearConnectedWallet();
+    providers = wallets === 'all' ? allProviders() : allProviders().filter(provider => {
+      const type = provider.config.type;
+      return wallets.find(w => w === type);
+    });
+  }, [configs?.wallets]);
+  useEffect(() => {
+    changeLanguage(configs?.languege);
+  }, [configs?.languege]);
+  return React.createElement(Provider$1, {
     allBlockChains: blockchains,
     providers: providers,
     onUpdateState: onUpdateState
   }, React.createElement("div", {
     id: "pageContainer",
     className: activeTheme
-  }, React.createElement(SwapContainer, null, React.createElement(AppRouter, null, React.createElement(Layout, null)))));
+  }, React.createElement(QueueManager, null, React.createElement(SwapContainer, {
+    style: {
+      width: configs?.width || 'auto',
+      height: configs?.height || 'auto'
+    }
+  }, React.createElement(AppRouter, {
+    title: configs.title,
+    titleSize: configs.titleSize,
+    titleWeight: configs.titleWeight
+  }, React.createElement(Layout, {
+    configs: configs
+  }))))));
 };
 
 export { SwapBox };