@rango-dev/widget-embedded 0.1.10-next.100

package/dist/widget-embedded.cjs.development.js

@@ -0,0 +1,3101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var ui = require('@rango-dev/ui');
+var React = require('react');
+var React__default = _interopDefault(React);
+var reactRouter = require('react-router');
+var reactRouterDom = require('react-router-dom');
+var zustand = require('zustand');
+var BigNumber = require('bignumber.js');
+var BigNumber__default = _interopDefault(BigNumber);
+var walletsShared = require('@rango-dev/wallets-shared');
+var rangoTypes = require('rango-types');
+var walletsCore = require('@rango-dev/wallets-core');
+var middleware = require('zustand/middleware');
+var rangoSdk = require('rango-sdk');
+var shallow = require('zustand/shallow');
+var reactI18next = require('react-i18next');
+var theme = require('@rango-dev/ui/src/theme');
+var providerAll = require('@rango-dev/provider-all');
+var queueManagerReact = require('@rango-dev/queue-manager-react');
+var i18n = require('i18next');
+var i18n__default = _interopDefault(i18n);
+var copy = _interopDefault(require('copy-to-clipboard'));
+var queueManagerRangoPreset = require('@rango-dev/queue-manager-rango-preset');
+var Backend = _interopDefault(require('i18next-http-backend'));
+var LanguageDetector = _interopDefault(require('i18next-browser-languagedetector'));
+
+const navigationRoutes = {
+  home: '/',
+  fromChain: '/from-chain',
+  fromToken: '/from-token',
+  toChain: '/to-chain',
+  toToken: '/to-token',
+  settings: '/settings',
+  liquiditySources: '/settings/liquidity-sources',
+  swaps: '/swaps',
+  wallets: '/wallets',
+  confirmSwap: '/confirm-swap',
+  confirmWallets: '/confirm-wallets',
+  swapDetails: '/swaps/:requestId'
+};
+
+const ZERO = /*#__PURE__*/new BigNumber__default(0);
+
+function removeDuplicateFrom(array) {
+  return Array.from(new Set(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 secondsToString = s => {
+  const seconds = (s % 60).toString().padStart(2, '0');
+  const minutes = parseInt((s / 60).toString()).toString().padStart(2, '0');
+  return `${minutes}:${seconds}`;
+};
+const numberToString = function (number, minDecimals, maxDecimals) {
+  if (minDecimals === void 0) {
+    minDecimals = null;
+  }
+  if (maxDecimals === void 0) {
+    maxDecimals = null;
+  }
+  if (number === null) return '';
+  if (number === '') return '';
+  const n = new BigNumber.BigNumber(number);
+  const roundingMode = 1;
+  let maxI = 1000;
+  for (let i = 0; i < 60; i++) {
+    if (new BigNumber.BigNumber(n.toFixed(i, roundingMode)).eq(n)) {
+      maxI = i;
+      break;
+    }
+  }
+  if (n.gte(10000)) return n.toFormat(0, roundingMode);
+  if (n.gte(1000)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))), roundingMode);
+  if (n.gte(100)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))), roundingMode);
+  if (n.gte(1)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 2))), roundingMode);
+  if (n.gte(0.01)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 4))), roundingMode);
+  for (let i = minDecimals || 4; i < 17; i++) if (n.gte(Math.pow(10, -i))) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, i))), roundingMode);
+  if (n.isEqualTo(0)) return '0';
+  return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))), roundingMode);
+};
+const totalArrivalTime = data => data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
+const decimalNumber = function (number, toFixed) {
+  if (number === void 0) {
+    number = '0';
+  }
+  return parseFloat(number).toFixed(toFixed);
+};
+
+function getStateWallet(state) {
+  switch (true) {
+    case state.connected:
+      return ui.WalletState.CONNECTED;
+    case state.connecting:
+      return ui.WalletState.CONNECTING;
+    case !state.installed:
+      return ui.WalletState.NOT_INSTALLED;
+    default:
+      return ui.WalletState.DISCONNECTED;
+  }
+}
+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,
+      img: image,
+      installLink,
+      showOnMobile
+    } = getWalletInfo(type);
+    const state = getStateWallet(getState(type));
+    return {
+      name,
+      image,
+      installLink: walletsShared.detectInstallLink(installLink),
+      state,
+      type,
+      showOnMobile: typeof showOnMobile === 'undefined' ? false : true
+    };
+  });
+}
+function walletAndSupportedChainsNames(supportedChains) {
+  if (!supportedChains) return null;
+  let walletAndSupportedChainsNames = [];
+  walletAndSupportedChainsNames = supportedChains.map(blockchainMeta => blockchainMeta.name);
+  return walletAndSupportedChainsNames;
+}
+function prepareAccountsForWalletStore(wallet, accounts, evmBasedChains, supportedChainNames) {
+  const result = [];
+  function addAccount(network, address) {
+    const newAccount = {
+      address,
+      chain: network,
+      walletType: wallet
+    };
+    result.push(newAccount);
+  }
+  const supportedChains = supportedChainNames || [];
+  accounts.forEach(account => {
+    const {
+      address,
+      network
+    } = walletsCore.readAccountAddress(account);
+    const hasLimitation = supportedChains.length > 0;
+    const isSupported = supportedChains.includes(network);
+    const isUnknown = network === walletsShared.Network.Unknown;
+    const notSupportedNetworkByWallet = hasLimitation && !isSupported && !isUnknown;
+    // Here we check given `network` is not supported by wallet
+    // And also the network is known.
+    if (notSupportedNetworkByWallet) return;
+    // In some cases we can handle unknown network by checking its address
+    // pattern and act on it.
+    // Example: showing our evm compatible netwrok when the uknown network is evem.
+    // Otherwise, we stop executing this function.
+    const isUknownAndEvmBased = network === walletsShared.Network.Unknown && walletsShared.isEvmAddress(address);
+    if (isUnknown && !isUknownAndEvmBased) return;
+    const isEvmBasedChain = evmBasedChains.includes(network);
+    // If it's an evm network, we will add the address to all the evm chains.
+    if (isEvmBasedChain || isUknownAndEvmBased) {
+      // all evm chains are not supported in wallets, so we are adding
+      // only to those that are supported by wallet.
+      const evmChainsSupportedByWallet = supportedChains.filter(chain => evmBasedChains.includes(chain));
+      evmChainsSupportedByWallet.forEach(network => {
+        // EVM addresses are not case sensetive.
+        // Some wallets like Binance-chain return some letters in uppercase which produces bugs in our wallet state.
+        addAccount(network, address.toLowerCase());
+      });
+    } else {
+      addAccount(network, address);
+    }
+  });
+  return result;
+}
+function getRequiredChains(route) {
+  const wallets = [];
+  route?.result?.swaps.forEach(swap => {
+    const currentStepFromBlockchain = swap.from.blockchain;
+    const currentStepToBlockchain = swap.to.blockchain;
+    let lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepFromBlockchain != lastAddedWallet) wallets.push(currentStepFromBlockchain);
+    lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepToBlockchain != lastAddedWallet) wallets.push(currentStepToBlockchain);
+  });
+  return wallets;
+}
+function getSelectableWallets(accounts, selectedWallets, getWalletInfo) {
+  const connectedWallets = accounts.map(account => ({
+    address: account.address,
+    walletType: account.walletType,
+    chain: account.chain,
+    image: getWalletInfo(account.walletType).img,
+    name: getWalletInfo(account.walletType).name,
+    selected: !!selectedWallets.find(wallet => wallet.chain === account.chain && wallet.walletType === account.walletType)
+  }));
+  return connectedWallets;
+}
+function getBalanceFromWallet(balances, chain, symbol, address) {
+  if (balances.length === 0) return null;
+  const selectedChainBalances = balances.filter(balance => balance.chain === chain);
+  if (selectedChainBalances.length === 0) return null;
+  return selectedChainBalances.map(a => a.balances?.find(bl => address !== null && bl.address === address || address === null && bl.address === address && bl.symbol === symbol) || null).filter(b => b !== null).sort((a, b) => parseFloat(b?.amount || '0') - parseFloat(a?.amount || '1')).find(() => true) || null;
+}
+function isAccountAndBalanceMatched(account, balance) {
+  return account.address === balance.address && account.chain === balance.chain && account.walletType === balance.walletType;
+}
+function makeBalanceFor(account, retrivedBalance, tokens) {
+  const {
+    address,
+    blockChain: chain,
+    explorerUrl,
+    balances = []
+  } = retrivedBalance;
+  return {
+    address,
+    chain,
+    loading: false,
+    error: false,
+    explorerUrl,
+    walletType: account.walletType,
+    balances: balances?.map(tokenBalance => ({
+      chain,
+      symbol: tokenBalance.asset.symbol,
+      ticker: tokenBalance.asset.symbol,
+      address: tokenBalance.asset.address || null,
+      rawAmount: tokenBalance.amount.amount,
+      decimal: tokenBalance.amount.decimals,
+      amount: new BigNumber__default(tokenBalance.amount.amount).shiftedBy(-tokenBalance.amount.decimals).toFixed(),
+      logo: '',
+      usdPrice: getUsdPrice(chain, tokenBalance.asset.symbol, tokenBalance.asset.address, tokens) || null
+    })) || []
+  };
+}
+function resetBalanceState(balance) {
+  return {
+    ...balance,
+    loading: false,
+    error: true
+  };
+}
+const calculateWalletUsdValue = balance => {
+  const uniqueAccountAddresses = new Set();
+  const uniqueBalane = balance?.reduce((acc, current) => {
+    return acc.findIndex(i => i.address === current.address && i.chain === current.chain) === -1 ? [...acc, current] : acc;
+  }, []);
+  const modifiedWalletBlockchains = uniqueBalane?.map(chain => {
+    const modifiedWalletBlockchain = {
+      name: chain.chain,
+      accounts: []
+    };
+    if (!uniqueAccountAddresses.has(chain.address)) {
+      uniqueAccountAddresses.add(chain.address);
+    }
+    uniqueAccountAddresses.forEach(accountAddress => {
+      if (chain.address === accountAddress) modifiedWalletBlockchain.accounts.push(chain);
+    });
+    return modifiedWalletBlockchain;
+  });
+  const total = numberToString(modifiedWalletBlockchains?.flatMap(b => b.accounts)?.flatMap(a => a?.balances)?.map(b => new BigNumber__default(b?.amount || ZERO).multipliedBy(b?.usdPrice || 0))?.reduce((a, b) => a.plus(b), ZERO) || ZERO).toString();
+  return numberWithThousandSeperator(total);
+};
+function numberWithThousandSeperator(number) {
+  var parts = number.toString().split('.');
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return parts.join('.');
+}
+const sortTokens = tokens => {
+  let walletConnected = !!tokens.some(token => token.balance);
+  if (!walletConnected) {
+    return tokens.filter(token => !token.address).concat(tokens.filter(token => token.address && !token.isSecondaryCoin), tokens.filter(token => token.isSecondaryCoin));
+  }
+  return tokens.filter(token => !!token.balance).sort((tokenA, tokenB) => parseFloat(tokenB.balance?.usdValue || '0') - parseFloat(tokenA.balance?.usdValue || '0')).concat(tokens.filter(token => !token.balance && !token.isSecondaryCoin), tokens.filter(token => !token.balance && token.isSecondaryCoin));
+};
+const getUsdPrice = (blockchain, symbol, address, allTokens) => {
+  const token = allTokens?.find(t => t.blockchain === blockchain && t.symbol?.toUpperCase() === symbol?.toUpperCase() && t.address === address);
+  return token?.usdPrice || null;
+};
+const isExperimentalChain = (blockchains, wallet) => {
+  const cosmosExperimentalChainInfo = walletsShared.getCosmosExperimentalChainInfo(Object.entries(blockchains).map(_ref => {
+    let [, blockchainMeta] = _ref;
+    return blockchainMeta;
+  }).filter(rangoTypes.isCosmosBlockchain));
+  return cosmosExperimentalChainInfo && !!cosmosExperimentalChainInfo[wallet];
+};
+const getKeplrCompatibleConnectedWallets = selectableWallets => {
+  const connectedWalletTypes = new Set(selectableWallets.map(a => a.walletType.toString()));
+  return walletsShared.KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
+};
+function getTokensWithBalance(tokens, balances) {
+  return tokens.map(_ref2 => {
+    let {
+      balance,
+      ...otherProps
+    } = _ref2;
+    const tokenAmount = numberToString(new BigNumber__default(getBalanceFromWallet(balances, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO));
+    let tokenUsdValue = '';
+    if (otherProps.usdPrice) tokenUsdValue = numberToString(new BigNumber__default(getBalanceFromWallet(balances, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO).multipliedBy(otherProps.usdPrice));
+    return {
+      ...otherProps,
+      ...(tokenAmount !== '0' && {
+        balance: {
+          amount: tokenAmount,
+          usdValue: tokenUsdValue
+        }
+      })
+    };
+  });
+}
+function getSortedTokens(chain, tokens, balances, otherChainTokens) {
+  const fromChainEqueulsToToChain = chain?.name === otherChainTokens[0]?.name;
+  if (fromChainEqueulsToToChain) return otherChainTokens;
+  const filteredTokens = tokens.filter(token => token.blockchain === chain?.name);
+  return sortTokens(getTokensWithBalance(filteredTokens, balances));
+}
+function tokensAreEqual(tokenA, tokenB) {
+  return tokenA?.blockchain === tokenB?.blockchain && tokenA?.name === tokenB?.name && tokenA?.address === tokenB?.address;
+}
+function getDefaultToken(sortedTokens, otherToken) {
+  let selectedToken;
+  const firstToken = sortedTokens[0];
+  const secondToken = sortedTokens[1];
+  if (sortedTokens.length === 1) selectedToken = firstToken;else if (tokensAreEqual(firstToken, otherToken)) selectedToken = secondToken;else selectedToken = firstToken;
+  return selectedToken;
+}
+function sortWalletsBasedOnState(wallets) {
+  return wallets.sort((a, b) => Number(b.state === ui.WalletState.CONNECTED) - Number(a.state === ui.WalletState.CONNECTED) || Number(b.state === ui.WalletState.DISCONNECTED || b.state === ui.WalletState.CONNECTING) - Number(a.state === ui.WalletState.DISCONNECTED || a.state === ui.WalletState.CONNECTING));
+}
+
+function getOutputRatio(inputUsdValue, outputUsdValue) {
+  if (inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) return 0;
+  return outputUsdValue.div(inputUsdValue).minus(1).multipliedBy(100);
+}
+function outputRatioHasWarning(inputUsdValue, outputRatio) {
+  return parseInt(outputRatio.toFixed(2) || '0') <= -10 && inputUsdValue.gte(new BigNumber__default(400)) || parseInt(outputRatio.toFixed(2) || '0') <= -5 && inputUsdValue.gte(new BigNumber__default(1000));
+}
+function hasLimitError(bestRoute) {
+  return (bestRoute?.result?.swaps || []).filter(swap => {
+    const minimum = !!swap.fromAmountMinValue ? new BigNumber__default(swap.fromAmountMinValue) : null;
+    const maximum = !!swap.fromAmountMaxValue ? new BigNumber__default(swap.fromAmountMaxValue) : null;
+    const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
+    if (isExclusive) {
+      return minimum?.gte(swap.fromAmount) || maximum?.lte(swap.fromAmount);
+    } else {
+      return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
+    }
+  }).length > 0;
+}
+function LimitErrorMessage(bestRoute) {
+  if (!bestRoute) return {
+    swap: null,
+    fromAmountRangeError: '',
+    recommendation: ''
+  };
+  const swap = (bestRoute?.result?.swaps || []).filter(swap => {
+    const minimum = !!swap.fromAmountMinValue ? new BigNumber__default(swap.fromAmountMinValue) : null;
+    const maximum = !!swap.fromAmountMaxValue ? new BigNumber__default(swap.fromAmountMaxValue) : null;
+    const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
+    if (isExclusive) {
+      return minimum?.gte(swap.fromAmount) || maximum?.lte(swap.fromAmount);
+    } else {
+      return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
+    }
+  })[0];
+  if (!swap) return {
+    swap: null,
+    fromAmountRangeError: '',
+    recommendation: ''
+  };
+  const minimum = !!swap.fromAmountMinValue ? new BigNumber__default(swap.fromAmountMinValue) : null;
+  const maximum = !!swap.fromAmountMaxValue ? new BigNumber__default(swap.fromAmountMaxValue) : null;
+  const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
+  let fromAmountRangeError = '';
+  let recommendation = '';
+  if (!isExclusive && !!minimum && minimum.gt(swap.fromAmount)) {
+    fromAmountRangeError = `Required: >= ${numberToString(minimum)} ${swap.from.symbol}`;
+    recommendation = 'Increase your swap amount';
+  } else if (isExclusive && !!minimum && minimum.gte(swap.fromAmount)) {
+    fromAmountRangeError = `Required: > ${numberToString(minimum)} ${swap.from.symbol}`;
+    recommendation = 'Increase your swap amount';
+  }
+  if (!isExclusive && !!maximum && maximum.lt(swap.fromAmount)) {
+    fromAmountRangeError = `Required: <= ${numberToString(maximum)} ${swap.from.symbol}`;
+    recommendation = 'Decrease your swap amount';
+  } else if (isExclusive && !!maximum && maximum.lte(swap.fromAmount)) {
+    fromAmountRangeError = `Required: < ${numberToString(maximum)} ${swap.from.symbol}`;
+    recommendation = 'Decrease your swap amount';
+  }
+  return {
+    swap,
+    fromAmountRangeError,
+    recommendation
+  };
+}
+function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputIsZero) {
+  if (loadingMetaStatus !== 'success') return {
+    title: 'Connect Wallet',
+    disabled: true
+  };
+  if (accounts.length == 0) return {
+    title: 'Connect Wallet',
+    disabled: false
+  };
+  if (loading) return {
+    title: 'Finding Best Route...',
+    disabled: true
+  };else if (inputIsZero) return {
+    title: 'Enter an amount',
+    disabled: true
+  };else if (!bestRoute) return {
+    title: 'Swap',
+    disabled: true
+  };else if (hasLimitError) return {
+    title: 'Limit Error',
+    disabled: true
+  };else if (highValueLoss) return {
+    title: 'Price impact is too high!',
+    disabled: true
+  };else if (priceImpactCanNotBeComputed) return {
+    title: 'USD price is unknown, price impact might be high!',
+    disabled: false,
+    hasWarning: true
+  };else if (needsToWarnEthOnPath) return {
+    title: 'The route goes through Ethereum. Continue?',
+    disabled: false,
+    hasWarning: true
+  };else return {
+    title: 'Swap',
+    disabled: false
+  };
+}
+function canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue) {
+  return !((inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) && !!bestRoute?.result && !!inputAmount && inputAmount !== '0' && parseFloat(inputAmount || '0') !== 0 && !!bestRoute.result);
+}
+function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validateBalanceOrFee, meta) {
+  const simulationResult = bestRoute.result;
+  if (!simulationResult) throw Error('Simulation result should not be null');
+  return {
+    creationTime: new Date().getTime().toString(),
+    finishTime: null,
+    requestId: bestRoute.requestId || '',
+    inputAmount: inputAmount,
+    wallets,
+    status: 'running',
+    isPaused: false,
+    extraMessage: null,
+    extraMessageSeverity: null,
+    extraMessageDetail: null,
+    extraMessageErrorCode: null,
+    networkStatusExtraMessage: null,
+    networkStatusExtraMessageDetail: null,
+    lastNotificationTime: null,
+    //@ts-ignore
+    settings: settings,
+    simulationResult: simulationResult,
+    validateBalanceOrFee,
+    steps: bestRoute.result?.swaps?.map((swap, index) => {
+      const swapper = meta.swappers.find(swapper => swapper.id === swap.swapperId);
+      const swapperType = swapper?.types[0];
+      const fromBlockchain = meta.blockchains.find(blockchain => blockchain.name === swap.from.blockchain);
+      const toBlockchain = meta.blockchains.find(blockchain => blockchain.name === swap.to.blockchain);
+      return {
+        id: index + 1,
+        fromBlockchain: swap.from.blockchain,
+        fromSymbol: swap.from.symbol,
+        fromSymbolAddress: swap.from.address,
+        fromDecimals: swap.from.decimals,
+        fromAmountPrecision: swap.fromAmountPrecision,
+        fromAmountMinValue: swap.fromAmountMinValue,
+        fromAmountMaxValue: swap.fromAmountMaxValue,
+        toBlockchain: swap.to.blockchain,
+        fromLogo: swap.from.logo,
+        toSymbol: swap.to.symbol,
+        toSymbolAddress: swap.to.address,
+        toDecimals: swap.to.decimals,
+        toLogo: swap.to.logo,
+        startTransactionTime: new Date().getTime(),
+        swapperId: swap.swapperId,
+        feeInUsd: numberToString(getUsdFeeOfStep(swap, meta.tokens), null, 2),
+        expectedOutputAmountHumanReadable: swap.toAmount,
+        outputAmount: '',
+        status: 'created',
+        networkStatus: null,
+        executedTransactionId: null,
+        externalTransactionId: null,
+        explorerUrl: null,
+        trackingCode: null,
+        cosmosTransaction: null,
+        solanaTransaction: null,
+        starknetTransaction: null,
+        starknetApprovalTransaction: null,
+        tronTransaction: null,
+        tronApprovalTransaction: null,
+        evmTransaction: null,
+        evmApprovalTransaction: null,
+        transferTransaction: null,
+        diagnosisUrl: null,
+        internalSteps: null,
+        fromBlockchainLogo: fromBlockchain?.logo || '',
+        toBlockchainLogo: toBlockchain?.logo || '',
+        swapperLogo: swapper?.logo || '',
+        swapperType: swapperType || ''
+      };
+    }) || []
+  };
+}
+function requiredWallets(route) {
+  const wallets = [];
+  route?.result?.swaps.forEach(swap => {
+    const currentStepFromBlockchain = swap.from.blockchain;
+    const currentStepToBlockchain = swap.to.blockchain;
+    let lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepFromBlockchain != lastAddedWallet) wallets.push(currentStepFromBlockchain);
+    lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepToBlockchain != lastAddedWallet) wallets.push(currentStepToBlockchain);
+  });
+  return wallets;
+}
+const getUsdPrice$1 = (blockchain, symbol, address, allTokens) => {
+  const token = allTokens?.find(t => t.blockchain === blockchain && t.symbol?.toUpperCase() === symbol?.toUpperCase() && t.address === address);
+  return token?.usdPrice || null;
+};
+function getUsdFeeOfStep(step, allTokens) {
+  let totalFeeInUsd = ZERO;
+  for (let i = 0; i < step.fee.length; i++) {
+    const fee = step.fee[i];
+    if (fee.expenseType === 'DECREASE_FROM_OUTPUT') continue;
+    const unitPrice = getUsdPrice$1(fee.asset.blockchain, fee.asset.symbol, fee.asset.address, allTokens);
+    totalFeeInUsd = totalFeeInUsd.plus(new BigNumber__default(fee.amount).multipliedBy(unitPrice || 0));
+  }
+  return totalFeeInUsd;
+}
+function getTotalFeeInUsd(bestRoute, allTokens) {
+  return bestRoute?.result?.swaps.reduce((totalFee, step) => totalFee.plus(getUsdFeeOfStep(step, allTokens)), ZERO) || null;
+}
+function hasHighFee(totalFeeInUsd) {
+  if (!totalFeeInUsd) return false;
+  return !totalFeeInUsd.lt(new BigNumber__default(30));
+}
+function getMinRequiredSlippage(route) {
+  const slippages = route.result?.swaps.map(slippage => slippage.recommendedSlippage);
+  return slippages?.map(s => parseFloat(s?.slippage || '0'))?.filter(s => s > 0)?.sort((a, b) => b - a)?.find(() => true) || null;
+}
+function hasProperSlippage(userSlippage, minRequiredSlippage) {
+  if (!minRequiredSlippage) return true;
+  //@ts-ignore
+  return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
+}
+function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, checkPrerequisites) {
+  const selectedWalletsMap = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = selectedWallet.address, selectedWalletsMap), {});
+  const connectedWallets = [];
+  wallets.forEach(wallet => {
+    const chainAndAccounts = connectedWallets.find(connectedWallet => connectedWallet.blockchain === wallet.chain);
+    if (!!chainAndAccounts) chainAndAccounts.addresses.push(wallet.address);else connectedWallets.push({
+      blockchain: wallet.chain,
+      addresses: [wallet.address]
+    });
+  });
+  const requestBody = {
+    amount: inputAmount.toString(),
+    checkPrerequisites,
+    from: {
+      address: fromToken.address,
+      blockchain: fromToken.blockchain,
+      symbol: fromToken.symbol
+    },
+    to: {
+      address: toToken.address,
+      blockchain: toToken.blockchain,
+      symbol: toToken.symbol
+    },
+    connectedWallets,
+    selectedWallets: selectedWalletsMap,
+    swapperGroups: disabledLiquiditySources,
+    swappersGroupsExclude: true,
+    //@ts-ignore
+    slippage: slippage.toString()
+  };
+  return requestBody;
+}
+function getWalletsForNewSwap(selectedWallets) {
+  const wallets = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = {
+    address: selectedWallet.address,
+    walletType: selectedWallet.walletType
+  }, selectedWalletsMap), {});
+  return wallets;
+}
+function getRouteOutputAmount(route) {
+  return route?.result?.outputAmount || null;
+}
+function getPercentageChange(oldValue, newValue) {
+  if (!oldValue || !newValue) return null;
+  return new BigNumber__default(newValue).div(new BigNumber__default(oldValue)).minus(1).multipliedBy(100);
+}
+function isOutputAmountChangedALot(oldRoute, newRoute) {
+  const oldOutputAmount = getRouteOutputAmount(oldRoute);
+  const newOutputAmount = getRouteOutputAmount(newRoute);
+  if (!oldOutputAmount || !newOutputAmount) return false;
+  const percentageChange = getPercentageChange(oldOutputAmount, newOutputAmount);
+  if (!percentageChange) return true;
+  return percentageChange.toNumber() <= -1;
+}
+function getBalanceWarnings(route, selectedWallets) {
+  const fee = route.validationStatus;
+  const requiredWallets = getRequiredChains(route);
+  const walletsSortedByRequiredWallets = selectedWallets.sort((selectedWallet1, selectedWallet2) => requiredWallets.indexOf(selectedWallet1.chain) - requiredWallets.indexOf(selectedWallet2.chain));
+  return walletsSortedByRequiredWallets.flatMap(wallet => getRequiredBalanceOfWallet(wallet, fee) || []).filter(asset => !asset.ok).map(asset => {
+    const symbol = asset.asset.symbol;
+    const currentAmount = numberToString(new BigNumber__default(asset.currentAmount.amount).shiftedBy(-asset.currentAmount.decimals), 8);
+    const requiredAmount = numberToString(new BigNumber__default(asset.requiredAmount.amount).shiftedBy(-asset.requiredAmount.decimals), 8);
+    let reason = '';
+    if (asset.reason === 'FEE') reason = ' for network fee';
+    if (asset.reason === 'INPUT_ASSET') reason = ' for swap';
+    if (asset.reason === 'FEE_AND_INPUT_ASSET') reason = ' for input and network fee';
+    const warningMessage = `Needs ≈ ${requiredAmount} ${symbol}${reason}, but you have ${currentAmount} ${symbol} in your ${asset.asset.blockchain} wallet.`;
+    return warningMessage;
+  });
+}
+function calcOutputUsdValue(outputAmount, tokenPrice) {
+  const amount = !!outputAmount ? new BigNumber__default(outputAmount) : ZERO;
+  return amount.multipliedBy(tokenPrice || 0);
+}
+
+function searchParamsToToken(tokens, searchParams, chain) {
+  if (!chain) return null;
+  return tokens.find(token => {
+    const symbolAndAddress = searchParams?.split('--');
+    if (symbolAndAddress?.length === 1) return token.symbol === symbolAndAddress[0] && token.address === null && token.blockchain === chain.name;
+    return token.symbol === symbolAndAddress?.[0] && token.address === symbolAndAddress?.[1] && token.blockchain === chain.name;
+  }) || null;
+}
+function getBestRouteToTokenUsdPrice(bestRoute) {
+  return bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
+}
+function isNumberOfSwapsChanged(route1, route2) {
+  const route1Swaps = route1.result?.swaps || [];
+  const route2Swaps = route2.result?.swaps || [];
+  return route1Swaps.length !== route2Swaps.length;
+}
+function isRouteSwappersUpdated(route1, route2) {
+  const route1Swappers = route1.result?.swaps.map(swap => swap.swapperId) || [];
+  const route2Swappers = route2.result?.swaps.map(swap => swap.swapperId) || [];
+  return !areEqual(route1Swappers, route2Swappers);
+}
+function isRouteInternalCoinsUpdated(route1, route2) {
+  const route1InternalCoins = route1.result?.swaps.map(swap => swap.to.symbol) || [];
+  const route2InternalCoins = route2.result?.swaps.map(swap => swap.to.symbol) || [];
+  return !areEqual(route1InternalCoins, route2InternalCoins);
+}
+function isRouteChanged(route1, route2) {
+  return isNumberOfSwapsChanged(route1, route2) || isRouteSwappersUpdated(route1, route2) || isRouteInternalCoinsUpdated(route1, route2);
+}
+function getRequiredBalanceOfWallet(selectedWallet, fee) {
+  if (fee === null) return null;
+  const relatedFeeStatus = fee?.find(item => item.blockchain === selectedWallet.chain)?.wallets.find(wallet => wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase());
+  if (!relatedFeeStatus) return null;
+  return relatedFeeStatus.requiredAssets;
+}
+function isRouteParametersChanged(prevParams, currentParams) {
+  return prevParams.fromChain?.name !== currentParams.fromChain?.name || prevParams.toChain?.name !== currentParams.toChain?.name || prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol || prevParams.toToken?.symbol !== currentParams.toToken?.symbol || prevParams.fromToken?.blockchain !== currentParams.fromToken?.blockchain || prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain || prevParams.fromToken?.address !== currentParams.fromToken?.address || prevParams.toToken?.address !== currentParams.toToken?.address || prevParams.inputAmount !== currentParams.inputAmount || prevParams.slippage !== currentParams.slippage || prevParams.customSlippage !== currentParams.customSlippage || prevParams.disabledLiquiditySources?.length !== currentParams.disabledLiquiditySources?.length;
+}
+function getBestRouteWithCalculatedFees(bestRoute, tokens) {
+  if (!bestRoute || !bestRoute.result) return null;
+  const swapsWithFee = (bestRoute?.result?.swaps || []).map(swap => ({
+    ...swap,
+    feeInUsd: numberToString(getUsdFeeOfStep(swap, tokens), 0, 2)
+  }));
+  return {
+    ...bestRoute,
+    result: {
+      ...bestRoute.result,
+      swaps: swapsWithFee
+    }
+  };
+}
+
+const createSelectors = _store => {
+  let store = _store;
+  store.use = {};
+  for (let k of Object.keys(store.getState())) {
+    store.use[k] = () => store(s => s[k]);
+  }
+  return store;
+};
+
+const httpService = /*#__PURE__*/new rangoSdk.RangoClient(process.env.REACT_APP_API_KEY);
+
+const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
+const DEFAULT_SLIPPAGE = 1;
+const HIGH_SLIPPAGE = 5;
+const MAX_SLIPPAGE = 100;
+const MIN_SLIPPGAE = 0;
+
+const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()(set => ({
+  meta: {
+    blockchains: [],
+    popularTokens: [],
+    swappers: [],
+    tokens: []
+  },
+  loadingStatus: 'loading',
+  fetchMeta: async () => {
+    try {
+      const response = await httpService.getAllMetadata();
+      const chainThatHasTokenInMetaResponse = removeDuplicateFrom(response.tokens.map(t => t.blockchain));
+      const enabledChains = response.blockchains.filter(chain => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name));
+      response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
+      set({
+        meta: response,
+        loadingStatus: 'success'
+      });
+    } catch (error) {
+      set({
+        loadingStatus: 'failed'
+      });
+    }
+  }
+})));
+
+const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.persist( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
+  slippage: DEFAULT_SLIPPAGE,
+  customSlippage: null,
+  infiniteApprove: false,
+  disabledLiquiditySources: [],
+  theme: 'auto',
+  setSlippage: slippage => set(() => ({
+    slippage: slippage
+  })),
+  setCustomSlippage: customSlippage => set(() => ({
+    customSlippage: customSlippage
+  })),
+  toggleAllLiquiditySources: () => set(state => {
+    const {
+      swappers
+    } = useMetaStore.getState().meta;
+    const swappersGroup = removeDuplicateFrom(swappers.map(swapper => swapper.swapperGroup));
+    if (swappersGroup.length === state.disabledLiquiditySources.length) return {
+      disabledLiquiditySources: []
+    };else {
+      return {
+        disabledLiquiditySources: swappersGroup
+      };
+    }
+  }),
+  toggleInfiniteApprove: () => set(state => ({
+    infiniteApprove: !state.infiniteApprove
+  })),
+  toggleLiquiditySource: name => set(state => {
+    if (state.disabledLiquiditySources.includes(name)) return {
+      disabledLiquiditySources: state.disabledLiquiditySources.filter(liquiditySource => liquiditySource != name)
+    };else return {
+      disabledLiquiditySources: state.disabledLiquiditySources.concat(name)
+    };
+  }),
+  setTheme: theme => set(() => ({
+    theme
+  }))
+})), {
+  name: 'user-settings'
+})));
+
+const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
+  accounts: [],
+  balances: [],
+  selectedWallets: [],
+  connectWallet: accounts => {
+    const tokens = useMetaStore.getState().meta.tokens;
+    set(state => ({
+      accounts: state.accounts.concat(accounts),
+      balances: state.balances.concat(accounts.map(account => ({
+        balances: [],
+        address: account.address,
+        chain: account.chain,
+        loading: true,
+        walletType: account.walletType,
+        error: false,
+        explorerUrl: null
+      })))
+    }));
+    accounts.forEach(async account => {
+      try {
+        const response = await httpService.getWalletsDetails([{
+          address: account.address,
+          blockchain: account.chain
+        }]);
+        const retrivedBalance = response.wallets[0];
+        if (retrivedBalance) {
+          set(state => ({
+            balances: state.balances.map(balance => {
+              return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
+            })
+          }));
+        } else throw new Error('Wallet not found');
+      } catch (error) {
+        set(state => ({
+          balances: state.balances.map(balance => {
+            return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
+          })
+        }));
+      }
+    });
+  },
+  disconnectWallet: walletType => {
+    set(state => ({
+      accounts: state.accounts.filter(account => account.walletType !== walletType),
+      balances: state.balances.filter(balance => balance.walletType !== walletType),
+      selectedWallets: state.selectedWallets.filter(wallet => wallet.walletType != walletType)
+    }));
+  },
+  initSelectedWallets: () => set(state => {
+    const requiredChains = getRequiredChains(useBestRouteStore.getState().bestRoute);
+    const connectedWallets = state.accounts;
+    const selectedWallets = [];
+    requiredChains.forEach(chain => {
+      const anyWalletSelected = !!state.selectedWallets.find(wallet => wallet.chain === chain);
+      if (!anyWalletSelected) {
+        const firstWalletWithMatchedChain = connectedWallets.find(wallet => wallet.chain === chain);
+        if (!!firstWalletWithMatchedChain) selectedWallets.push({
+          address: firstWalletWithMatchedChain.address,
+          chain: firstWalletWithMatchedChain.chain,
+          walletType: firstWalletWithMatchedChain.walletType
+        });
+      }
+    });
+    return {
+      selectedWallets: state.selectedWallets.concat(selectedWallets)
+    };
+  }),
+  setSelectedWallet: wallet => set(state => ({
+    selectedWallets: state.selectedWallets.filter(selectedWallet => selectedWallet.chain !== wallet.chain).concat({
+      chain: wallet.chain,
+      address: wallet.address,
+      walletType: wallet.walletType
+    })
+  })),
+  clearConnectedWallet: () => set(() => ({
+    accounts: [],
+    balances: [],
+    selectedWallets: []
+  }))
+}))));
+useWalletsStore.subscribe(state => state.balances, balances => {
+  useBestRouteStore.setState(_ref => {
+    let {
+      sourceTokens,
+      destinationTokens
+    } = _ref;
+    const sourceTokensWithBalance = getTokensWithBalance(sourceTokens, balances);
+    const destinationTokensWithBalance = getTokensWithBalance(destinationTokens, balances);
+    return {
+      sourceTokens: sortTokens(sourceTokensWithBalance),
+      destinationTokens: sortTokens(destinationTokensWithBalance)
+    };
+  });
+}, {
+  equalityFn: shallow.shallow
+});
+
+const getUsdValue = (token, amount) => new BigNumber__default(amount || ZERO).multipliedBy(token?.usdPrice || 0);
+const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
+  fromChain: null,
+  fromToken: null,
+  inputAmount: '',
+  outputAmount: null,
+  inputUsdValue: new BigNumber__default(0),
+  outputUsdValue: new BigNumber__default(0),
+  toChain: null,
+  toToken: null,
+  bestRoute: null,
+  loading: false,
+  error: '',
+  sourceTokens: [],
+  destinationTokens: [],
+  setBestRoute: bestRoute => set(state => {
+    let outputAmount = null;
+    let outputUsdValue = ZERO;
+    if (!!bestRoute) {
+      outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber__default(bestRoute.result?.outputAmount) : null;
+      outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
+    }
+    return {
+      bestRoute,
+      ...(!!bestRoute && {
+        outputAmount,
+        outputUsdValue
+      })
+    };
+  }),
+  setFromChain: (chain, setDefaultToken) => {
+    set(state => {
+      if (state.fromChain?.name === chain?.name) return {};
+      const tokens = useMetaStore.getState().meta.tokens;
+      const balances = useWalletsStore.getState().balances;
+      const sortedTokens = getSortedTokens(chain, tokens, balances, state.destinationTokens);
+      const fromToken = getDefaultToken(sortedTokens, state.toToken);
+      return {
+        fromChain: chain,
+        sourceTokens: sortedTokens,
+        ...(setDefaultToken && {
+          fromToken
+        }),
+        ...(!!state.inputAmount && {
+          inputUsdValue: getUsdValue(fromToken, state.inputAmount)
+        })
+      };
+    });
+  },
+  setFromToken: token => set(state => ({
+    fromToken: token,
+    ...(!!state.inputAmount && {
+      inputUsdValue: getUsdValue(token, state.inputAmount)
+    })
+  })),
+  setToChain: (chain, setDefaultToken) => {
+    set(state => {
+      if (state.toChain?.name === chain?.name) return {};
+      const tokens = useMetaStore.getState().meta.tokens;
+      const balances = useWalletsStore.getState().balances;
+      const sortedTokens = getSortedTokens(chain, tokens, balances, state.destinationTokens);
+      return {
+        toChain: chain,
+        destinationTokens: sortedTokens,
+        ...(setDefaultToken && {
+          toToken: getDefaultToken(sortedTokens, state.fromToken)
+        })
+      };
+    });
+  },
+  setToToken: token => set(() => ({
+    toToken: token
+  })),
+  setInputAmount: amount => {
+    set(state => ({
+      inputAmount: amount,
+      ...(!amount && {
+        outputAmount: new BigNumber__default(0),
+        outputUsdValue: new BigNumber__default(0),
+        bestRoute: null
+      }),
+      ...(!!state.fromToken && {
+        inputUsdValue: getUsdValue(state.fromToken, amount)
+      })
+    }));
+  }
+}))));
+const bestRoute = (bestRouteStore, settingsStore) => {
+  let abortController = null;
+  const fetchBestRoute = () => {
+    const {
+      fromToken,
+      toToken,
+      inputAmount
+    } = bestRouteStore.getState();
+    const {
+      slippage,
+      customSlippage,
+      disabledLiquiditySources
+    } = settingsStore.getState();
+    if (!fromToken || !toToken || !inputAmount) return;
+    abortController?.abort();
+    abortController = new AbortController();
+    const userSlippage = !!customSlippage ? customSlippage : slippage;
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, false);
+    bestRouteStore.setState({
+      loading: true,
+      bestRoute: null,
+      outputAmount: null,
+      outputUsdValue: new BigNumber__default(0)
+    });
+    httpService.getBestRoute(requestBody, {
+      signal: abortController.signal
+    }).then(res => {
+      const {
+        setBestRoute
+      } = bestRouteStore.getState();
+      setBestRoute(res);
+      bestRouteStore.setState({
+        loading: false
+      });
+      abortController = null;
+    }).catch(error => {
+      if (error.code === 'ERR_CANCELED') return;
+      bestRouteStore.setState({
+        error: error.message,
+        loading: false
+      });
+    });
+  };
+  useBestRouteStore.subscribe(state => ({
+    fromChain: state.fromChain,
+    fromToken: state.fromToken,
+    toChain: state.toChain,
+    toToken: state.toToken,
+    inputAmount: state.inputAmount
+  }), fetchBestRoute.bind(null), {
+    equalityFn: (prevState, state) => {
+      if (isRouteParametersChanged(prevState, state)) return false;else return true;
+    }
+  });
+  useSettingsStore.subscribe(state => ({
+    slippage: state.slippage,
+    customSlippage: state.customSlippage,
+    disabledLiquiditySources: state.disabledLiquiditySources
+  }), fetchBestRoute.bind(null), {
+    equalityFn: (prevState, state) => {
+      if (isRouteParametersChanged(prevState, state)) return false;else return true;
+    }
+  });
+  return {
+    fetchBestRoute
+  };
+};
+const {
+  fetchBestRoute
+} = /*#__PURE__*/bestRoute(useBestRouteStore, useSettingsStore);
+
+var SearchParams;
+(function (SearchParams) {
+  SearchParams["FROM_CHAIN"] = "fromChain";
+  SearchParams["FROM_TOKEN"] = "fromToken";
+  SearchParams["TO_CHAIN"] = "toChain";
+  SearchParams["TO_TOKEN"] = "toToken";
+  SearchParams["FROM_AMOUNT"] = "fromAmount";
+})(SearchParams || (SearchParams = {}));
+
+const useUiStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()(set => ({
+  connectWalletsButtonDisabled: false,
+  selectedSwapRequestId: null,
+  toggleConnectWalletsButton: () => set(state => ({
+    connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled
+  })),
+  setSelectedSwap: requestId => set({
+    selectedSwapRequestId: requestId
+  })
+})));
+
+function UpdateUrl() {
+  const firstRender = React.useRef(true);
+  const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
+  const location = reactRouterDom.useLocation();
+  const firstRenderSearchParams = React.useRef(location.search);
+  const searchParamsRef = React.useRef({});
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const {
+    blockchains,
+    tokens
+  } = useMetaStore.use.meta();
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  React.useEffect(() => {
+    const params = {};
+    reactRouterDom.createSearchParams(firstRenderSearchParams.current).forEach((value, key) => {
+      params[key] = value;
+    });
+    searchParamsRef.current = params;
+    const requestId = location.pathname.split(navigationRoutes.swaps + '/')[1] || null;
+    if (requestId) setSelectedSwap(requestId);
+  }, []);
+  React.useEffect(() => {
+    let fromChainString = '',
+      fromTokenString = '',
+      toChainString = '',
+      toTokenString = '',
+      fromAmount = '';
+    if (loadingStatus !== 'success' && ![navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname)) {
+      fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
+      fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
+      toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
+      toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
+      fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
+      setSearchParams({
+        ...(fromChainString && {
+          [SearchParams.FROM_CHAIN]: fromChainString
+        }),
+        ...(fromTokenString && {
+          [SearchParams.FROM_TOKEN]: fromTokenString
+        }),
+        ...(toChainString && {
+          [SearchParams.TO_CHAIN]: toChainString
+        }),
+        ...(toTokenString && {
+          [SearchParams.TO_TOKEN]: toTokenString
+        }),
+        ...(fromAmount && {
+          [SearchParams.FROM_AMOUNT]: fromAmount.toString()
+        })
+      }, {
+        replace: true
+      });
+    }
+    if (!firstRender.current) {
+      let fromChainString = '',
+        fromTokenString = '',
+        toChainString = '',
+        toTokenString = '',
+        fromAmount = '';
+      if (loadingStatus !== 'success') {
+        fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
+        fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
+        toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
+        toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
+        fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
+      } else {
+        if (location.state === 'redirect') return;
+        fromChainString = fromChain?.name || '';
+        fromTokenString = (fromToken?.symbol || '') + (fromToken?.address ? `--${fromToken?.address}` : '');
+        toChainString = toChain?.name || '';
+        toTokenString = (toToken?.symbol || '') + (toToken?.address ? `--${toToken?.address}` : '');
+        fromAmount = inputAmount;
+        setSearchParams({
+          ...(fromChainString && {
+            [SearchParams.FROM_CHAIN]: fromChainString
+          }),
+          ...(fromTokenString && {
+            [SearchParams.FROM_TOKEN]: fromTokenString
+          }),
+          ...(toChainString && {
+            [SearchParams.TO_CHAIN]: toChainString
+          }),
+          ...(toTokenString && {
+            [SearchParams.TO_TOKEN]: toTokenString
+          }),
+          ...(fromAmount && {
+            [SearchParams.FROM_AMOUNT]: fromAmount.toString()
+          })
+        }, {
+          replace: true
+        });
+      }
+    }
+    firstRender.current = false;
+  }, [location.pathname, inputAmount]);
+  React.useEffect(() => {
+    if (loadingStatus === 'success') {
+      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
+      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
+      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
+      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
+      const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
+      const fromChain = blockchains.find(blockchain => blockchain.name === fromChainString);
+      const fromToken = searchParamsToToken(tokens, fromTokenString, fromChain || null);
+      const toChain = blockchains.find(blockchain => blockchain.name === toChainString);
+      const toToken = searchParamsToToken(tokens, toTokenString, toChain || null);
+      if (!!fromChain) {
+        setFromChain(fromChain);
+        if (!!fromToken) setFromToken(fromToken);
+      }
+      if (!!toChain) {
+        setToChain(toChain);
+        if (!!toToken) setToToken(toToken);
+      }
+      if (fromAmount) setInputAmount(fromAmount);
+    }
+  }, [loadingStatus]);
+  return null;
+}
+
+const ButtonsContainer = /*#__PURE__*/ui.styled('div', {
+  display: 'flex'
+});
+function HeaderButtons(props) {
+  const {
+    onClickRefresh
+  } = props;
+  const navigate = reactRouterDom.useNavigate();
+  return React__default.createElement(ButtonsContainer, null, React__default.createElement(ui.Tooltip, {
+    content: "Refresh"
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: onClickRefresh
+  }, React__default.createElement(ui.RetryIcon, {
+    size: 24
+  }))), React__default.createElement(ui.Tooltip, {
+    content: "Transactions History"
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.swaps)
+  }, React__default.createElement(ui.HistoryIcon, {
+    size: 24
+  }))), React__default.createElement(ui.Tooltip, {
+    content: "Settings"
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.settings)
+  }, React__default.createElement(ui.SettingsIcon, {
+    size: 24
+  }))));
+}
+
+const HeaderContainer = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: '$16 0'
+});
+function Header(props) {
+  const {
+    onClickRefresh,
+    title,
+    titleSize,
+    titleWeight
+  } = props;
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const titleStyle = ui.css({
+    fontSize: `${titleSize}px !important`,
+    fontWeight: `${titleWeight} !important`
+  });
+  return React__default.createElement(HeaderContainer, null, React__default.createElement(ui.Typography, {
+    variant: "h4",
+    className: titleStyle()
+  }, title ? t(title.toLocaleLowerCase()) : ''), React__default.createElement(HeaderButtons, {
+    onClickRefresh: onClickRefresh
+  }));
+}
+
+const Box = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%'
+});
+const Container = /*#__PURE__*/ui.styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300'
+      },
+      outlined: {
+        border: '1px solid $neutrals300'
+      }
+    }
+  },
+  defaultVariants: {
+    type: 'filled'
+  },
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px'
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    },
+    '.amount': {
+      width: '30%'
+    }
+  }
+});
+const StyledImage = /*#__PURE__*/ui.styled('img', {
+  width: '$24',
+  maxHeight: '$24'
+});
+const Options = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  '.balance': {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+const ImagePlaceholder = /*#__PURE__*/ui.styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px'
+});
+const OutputContainer = /*#__PURE__*/ui.styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$background',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8'
+});
+function TokenInfo(props) {
+  const {
+    type,
+    chain,
+    token
+  } = props;
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const balances = useWalletsStore.use.balances();
+  const navigate = reactRouterDom.useNavigate();
+  const {
+    t
+  } = reactI18next.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__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, loadingStatus === 'failed' && React__default.createElement(ui.InfoCircleIcon, {
+    color: "error",
+    size: 24
+  }), React__default.createElement(ui.AngleDownIcon, null));
+  return React__default.createElement(Box, null, React__default.createElement(Container, {
+    type: props.type === 'From' ? 'filled' : 'outlined'
+  }, React__default.createElement("div", {
+    className: "head"
+  }, React__default.createElement(ui.Typography, {
+    variant: "body2",
+    color: "neutrals800"
+  }, t(type)), props.type === 'From' ? React__default.createElement(Options, null, React__default.createElement("div", {
+    className: "balance",
+    onClick: () => {
+      if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
+    }
+  }, React__default.createElement(ui.Typography, {
+    variant: "body3",
+    color: "neutrals600"
+  }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React__default.createElement(ui.Spacer, {
+    size: 4
+  }), React__default.createElement(ui.Button, {
+    type: "primary",
+    variant: "ghost",
+    size: "compact"
+  }, t('Max')))) : React__default.createElement(ui.Typography, {
+    variant: "caption",
+    color: "neutrals600"
+  }, `$${numberToString(props.outputUsdValue)}`)), React__default.createElement("div", {
+    className: "form"
+  }, React__default.createElement(ui.Button, {
+    className: "selectors",
+    onClick: () => {
+      navigate(`/${props.type.toLowerCase()}-chain`);
+    },
+    variant: "outlined",
+    disabled: loadingStatus === 'failed',
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && chain ? React__default.createElement(StyledImage, {
+      src: chain.logo
+    }) : React__default.createElement(ImagePlaceholder, null),
+    suffix: ItemSuffix,
+    align: "start",
+    size: "large"
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Spacer, {
+    size: 12
+  }), React__default.createElement(ui.Button, {
+    className: "selectors",
+    onClick: () => {
+      navigate(`/${props.type.toLowerCase()}-token`);
+    },
+    variant: "outlined",
+    disabled: loadingStatus === 'failed' || type === 'From' && !fromChain || type === 'To' && !toChain,
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && token ? React__default.createElement(StyledImage, {
+      src: token.image
+    }) : React__default.createElement(ImagePlaceholder, null),
+    suffix: ItemSuffix,
+    size: "large",
+    align: "start"
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Spacer, {
+    size: 12
+  }), React__default.createElement("div", {
+    className: "amount"
+  }, props.type === 'From' ? React__default.createElement(ui.TextField, {
+    type: "number",
+    size: "large",
+    autoFocus: true,
+    placeholder: "0",
+    style: {
+      position: 'relative',
+      backgroundColor: '$background !important'
+    },
+    suffix: React__default.createElement("span", {
+      style: {
+        position: 'absolute',
+        right: '4px',
+        bottom: '2px'
+      }
+    }, React__default.createElement(ui.Typography, {
+      variant: "caption",
+      color: "neutrals800"
+    }, `$${numberToString(inputUsdValue)}`)),
+    value: props.inputAmount || '',
+    onChange: props.type === 'From' ? event => {
+      props.onAmountChange(event.target.value);
+    } : undefined
+  }) : React__default.createElement(OutputContainer, null, React__default.createElement(ui.Typography, {
+    variant: "h4"
+  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'))))));
+}
+
+const Container$1 = /*#__PURE__*/theme.styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+  alignItems: 'center',
+  paddingTop: '$16'
+});
+const Logo = /*#__PURE__*/theme.styled('svg', {
+  fill: '$foreground',
+  width: '$24',
+  margin: '0 $8 0 $16'
+});
+const StyledAnchor = /*#__PURE__*/theme.styled('a', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textDecoration: 'none'
+});
+function BottomLogo() {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return React__default.createElement(Container$1, null, React__default.createElement(ui.Typography, {
+    variant: "caption"
+  }, t('Powered By')), React__default.createElement(StyledAnchor, {
+    href: "https://rango.exchange",
+    target: "_blank"
+  }, React__default.createElement(Logo, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 33.68 29"
+  }, React__default.createElement("defs", null), React__default.createElement("g", {
+    id: "Layer_2",
+    "data-name": "Layer 2"
+  }, React__default.createElement("g", {
+    id: "Layer_1-2",
+    "data-name": "Layer 1"
+  }, React__default.createElement("path", {
+    d: "M33.68,18.05A17.93,17.93,0,0,0,28.34,5.29,18.31,18.31,0,0,0,15.45,0H13.54V7.41L6.07,0H.69L9.83,9.07H0V11A17.93,17.93,0,0,0,5.34,23.71,18.32,18.32,0,0,0,18.24,29h1.9V21.59l7.38,7.31h5.39l-9-9h9.82ZM17.37,16.16H12.49a1.93,1.93,0,0,0-1.35.55,1.89,1.89,0,0,0-.56,1.34,1.85,1.85,0,0,0,.56,1.33,1.93,1.93,0,0,0,1.35.55h3.84V25.1A14.43,14.43,0,0,1,8,21a14.21,14.21,0,0,1-4.1-8.2H21.2a1.86,1.86,0,0,0,.74-.13,1.92,1.92,0,0,0,.64-.4,2,2,0,0,0,.43-.62,1.88,1.88,0,0,0,0-1.47,2,2,0,0,0-.43-.62,1.92,1.92,0,0,0-.64-.4,1.86,1.86,0,0,0-.74-.13H17.35V3.9A14.43,14.43,0,0,1,25.64,8a14.19,14.19,0,0,1,4.11,8.2Zm2.12-5.27a1.43,1.43,0,0,1,.26-.83,1.52,1.52,0,0,1,.67-.56,1.55,1.55,0,0,1,.88-.08,1.51,1.51,0,0,1,.77.4,1.54,1.54,0,0,1,.42.77,1.41,1.41,0,0,1-.09.86,1.47,1.47,0,0,1-.55.68,1.56,1.56,0,0,1-.84.25,1.52,1.52,0,0,1-1.52-1.49Z"
+  }), React__default.createElement("path", {
+    d: "M21.7,11.57a.68.68,0,0,0-.12-.38.64.64,0,0,0-.31-.25.68.68,0,0,0-.75.15.61.61,0,0,0-.19.35.62.62,0,0,0,0,.4.67.67,0,0,0,.25.3.69.69,0,0,0,.39.12.7.7,0,0,0,.49-.2A.68.68,0,0,0,21.7,11.57Z"
+  })))), React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, "RANGO")));
+}
+
+function SwithFromAndTo(_ref) {
+  let {
+    count
+  } = _ref;
+  const firstRender = React.useRef(true);
+  const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
+  const outputAmount = useBestRouteStore.use.outputAmount();
+  React.useEffect(() => {
+    if (!firstRender.current) {
+      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
+      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
+      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
+      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
+      setSearchParams({
+        ...(toChainString && {
+          [SearchParams.FROM_CHAIN]: toChainString
+        }),
+        ...(toTokenString && {
+          [SearchParams.FROM_TOKEN]: toTokenString
+        }),
+        ...(fromChainString && {
+          [SearchParams.TO_CHAIN]: fromChainString
+        }),
+        ...(fromTokenString && {
+          [SearchParams.TO_TOKEN]: fromTokenString
+        }),
+        ...(outputAmount && {
+          [SearchParams.FROM_AMOUNT]: outputAmount.toString()
+        })
+      });
+    } else {
+      firstRender.current = false;
+    }
+  }, [count]);
+  return null;
+}
+
+const Footer = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  paddingTop: '$16'
+});
+
+const errorMessages = {
+  genericServerError: 'Error connecting server, please reload the app and try again'
+};
+
+const Container$2 = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  flexDirection: 'column'
+});
+const FromContainer = /*#__PURE__*/ui.styled('div', {
+  position: 'relative',
+  paddingBottom: '$12'
+});
+const SwitchButtonContainer = /*#__PURE__*/ui.styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)'
+});
+const BestRouteContainer = /*#__PURE__*/ui.styled('div', {
+  width: '100%',
+  paddingTop: '$16'
+});
+const Alerts = /*#__PURE__*/ui.styled('div', {
+  width: '100%',
+  paddingTop: '$16'
+});
+function Home(props) {
+  const {
+    title = 'SWAP',
+    titleSize = 18,
+    titleWeight = 600
+  } = props;
+  const isRouterInContext = reactRouterDom.useInRouterContext();
+  const navigate = reactRouterDom.useNavigate();
+  const [count, setCount] = React.useState(0);
+  const fromChain = useBestRouteStore.use.fromChain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toChain = useBestRouteStore.use.toChain();
+  const toToken = useBestRouteStore.use.toToken();
+  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 inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const outputAmount = useBestRouteStore.use.outputAmount();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const tokens = useMetaStore.use.meta().tokens;
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const bestRouteError = useBestRouteStore.use.error();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const accounts = useWalletsStore.use.accounts();
+  const swithFromAndTo = () => {
+    setFromChain(toChain);
+    setFromToken(toToken);
+    setToChain(fromChain);
+    setToToken(fromToken);
+    setInputAmount(outputAmount?.toString() || '');
+    setCount(prev => prev + 1);
+  };
+  const errorMessage = loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
+  const needsToWarnEthOnPath = false;
+  const showBestRoute = inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
+  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
+  const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
+  const {
+    fromAmountRangeError,
+    recommendation,
+    swap
+  } = LimitErrorMessage(bestRoute);
+  const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
+  const inputIsZero = inputAmount === '0';
+  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputIsZero);
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+  const highFee = hasHighFee(totalFeeInUsd);
+  return React__default.createElement(Container$2, null, React__default.createElement(Header, {
+    title: title,
+    titleSize: titleSize,
+    titleWeight: titleWeight,
+    onClickRefresh: fetchBestRoute
+  }), React__default.createElement(FromContainer, null, React__default.createElement(TokenInfo, {
+    type: "From",
+    chain: fromChain,
+    token: fromToken,
+    onAmountChange: setInputAmount,
+    inputAmount: inputAmount
+  }), React__default.createElement(SwitchButtonContainer, null, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: swithFromAndTo
+  }, React__default.createElement(ui.VerticalSwapIcon, {
+    size: 24
+  }), isRouterInContext && React__default.createElement(SwithFromAndTo, {
+    count: count
+  })))), React__default.createElement(TokenInfo, {
+    type: "To",
+    chain: toChain,
+    token: toToken,
+    outputAmount: outputAmount ? new BigNumber__default(outputAmount) : new BigNumber__default(0),
+    outputUsdValue: outputUsdValue
+  }), showBestRoute && React__default.createElement(BestRouteContainer, null, React__default.createElement(ui.BestRoute, {
+    error: bestRouteError,
+    loading: fetchingBestRoute,
+    data: bestRoute,
+    totalFee: numberToString(totalFeeInUsd, 0, 2),
+    feeWarning: highFee,
+    totalTime: secondsToString(totalArrivalTime(bestRoute))
+  })), (errorMessage || hasLimitError(bestRoute)) && React__default.createElement(Alerts, null, errorMessage && React__default.createElement(ui.Alert, {
+    type: "error"
+  }, errorMessage), hasLimitError(bestRoute) && React__default.createElement(ui.Alert, {
+    type: "error",
+    title: `${swap?.swapperId} Limit`
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, fromAmountRangeError), React__default.createElement("br", null), React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, "Yours: ", numberToString(swap?.fromAmount || null), swap?.from.symbol), React__default.createElement("br", null), React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, recommendation)))), React__default.createElement(Footer, null, React__default.createElement(ui.Button, {
+    type: "primary",
+    align: "grow",
+    size: "large",
+    disabled: swapButtonState.disabled,
+    onClick: () => {
+      if (swapButtonState.title === 'Connect Wallet') navigate(navigationRoutes.wallets);else {
+        navigate(navigationRoutes.confirmWallets, {
+          replace: true
+        });
+      }
+    }
+  }, swapButtonState.title), React__default.createElement(BottomLogo, null)));
+}
+
+const Route = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const location = reactRouter.useLocation();
+  const navigate = reactRouter.useNavigate();
+  const ref = React.useRef(true);
+  React.useEffect(() => {
+    if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) navigate(navigationRoutes.home + location.search, {
+      state: 'redirect'
+    });
+    ref.current = false;
+  }, []);
+  if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) return React__default.createElement(Home, Object.assign({}, props));
+  return React__default.createElement(React__default.Fragment, null, " ", children);
+};
+function AppRouter(_ref2) {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  const isRouterInContext = reactRouter.useInRouterContext();
+  const Router = isRouterInContext ? Route : reactRouter.MemoryRouter;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Router, Object.assign({}, props), children), isRouterInContext && React__default.createElement(UpdateUrl, null));
+}
+
+function ChangeSlippageButton() {
+  const navigate = reactRouterDom.useNavigate();
+  return React__default.createElement(ui.Button, {
+    type: "primary",
+    variant: "outlined",
+    size: "small",
+    onClick: () => navigate(navigationRoutes.settings)
+  }, "Change Slippage");
+}
+
+function HighSlippageWarning(props) {
+  const {
+    selectedSlippage
+  } = props;
+  return React__default.createElement(ui.Alert, {
+    type: "warning",
+    footer: React__default.createElement(ChangeSlippageButton, null)
+  }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.");
+}
+
+function ConfirmSwapExtraMessages(props) {
+  const {
+    selectedSlippage
+  } = props;
+  const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
+  return React__default.createElement(React__default.Fragment, null, highSlippage && React__default.createElement(HighSlippageWarning, {
+    selectedSlippage: selectedSlippage
+  }));
+}
+
+function useNavigateBack() {
+  const isRouterInContext = reactRouterDom.useInRouterContext();
+  const navigate = reactRouterDom.useNavigate();
+  const navigateBackFrom = currentRoute => {
+    if (!isRouterInContext || window.history.state && window.history.state.idx > 0) navigate(-1);else {
+      if ([navigationRoutes.fromChain, navigationRoutes.fromToken, navigationRoutes.toChain, navigationRoutes.toToken, navigationRoutes.settings, navigationRoutes.wallets, navigationRoutes.swaps, navigationRoutes.confirmWallets].includes(currentRoute)) navigate(navigationRoutes.home, {
+        replace: true
+      });else if (currentRoute === navigationRoutes.liquiditySources) navigate(navigationRoutes.settings, {
+        replace: true
+      });else if (currentRoute === navigationRoutes.swapDetails) navigate(navigationRoutes.swaps, {
+        replace: true
+      });else if (currentRoute === navigationRoutes.confirmSwap) navigate(navigationRoutes.confirmWallets, {
+        replace: true
+      });
+    }
+  };
+  return {
+    navigateBackFrom
+  };
+}
+
+var ConfirmSwapErrorTypes;
+(function (ConfirmSwapErrorTypes) {
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["NO_ROUTE"] = 0] = "NO_ROUTE";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS"] = 1] = "ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["REQUEST_FAILED"] = 2] = "REQUEST_FAILED";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["INSUFFICIENT_SLIPPAGE"] = 3] = "INSUFFICIENT_SLIPPAGE";
+})(ConfirmSwapErrorTypes || (ConfirmSwapErrorTypes = {}));
+var ConfirmSwapWarningTypes;
+(function (ConfirmSwapWarningTypes) {
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_UPDATED"] = 0] = "ROUTE_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_SWAPPERS_UPDATED"] = 1] = "ROUTE_SWAPPERS_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_COINS_UPDATED"] = 2] = "ROUTE_COINS_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_AND_OUTPUT_AMOUNT_UPDATED"] = 3] = "ROUTE_AND_OUTPUT_AMOUNT_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
+})(ConfirmSwapWarningTypes || (ConfirmSwapWarningTypes = {}));
+
+function MinRequiredSlippage(_ref) {
+  let {
+    minRequiredSlippage
+  } = _ref;
+  return React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React__default.createElement(ChangeSlippageButton, null));
+}
+
+function ConfirmSwapErrors(errors) {
+  return errors.flatMap(error => {
+    switch (error.type) {
+      case ConfirmSwapErrorTypes.NO_ROUTE:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "No routes found. Please try again later.");
+      case ConfirmSwapErrorTypes.REQUEST_FAILED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`);
+      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "Route updated and price impact is too high, try again later!");
+      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
+        return React__default.createElement(MinRequiredSlippage, {
+          minRequiredSlippage: error.minRequiredSlippage
+        });
+      default:
+        return [];
+    }
+  });
+}
+
+const List = /*#__PURE__*/ui.styled('ul', {
+  variants: {
+    showListStyle: {
+      true: {
+        paddingLeft: '$24'
+      }
+    }
+  }
+});
+const ListItem = /*#__PURE__*/ui.styled('li', {
+  variants: {
+    showListStyle: {
+      true: {
+        listStyleType: 'disc',
+        listStylePosition: 'outside'
+      }
+    }
+  }
+});
+const Message = /*#__PURE__*/ui.styled(ui.Typography, {
+  display: 'block'
+});
+function BalanceWarnings(_ref) {
+  let {
+    messages
+  } = _ref;
+  const showListStyle = messages.length > 1;
+  return React__default.createElement(List, {
+    showListStyle: showListStyle
+  }, messages.map(warning => React__default.createElement(ListItem, {
+    showListStyle: showListStyle
+  }, React__default.createElement(Message, {
+    variant: "body2"
+  }, warning))));
+}
+
+function ConfirmSwapWarnings(warnings) {
+  return warnings.flatMap(warning => {
+    switch (warning.type) {
+      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "Route has been updated.");
+      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, `Output amount changed to ${warning.newOutputAmount} 
+      (${warning.percentageChange}% change).`);
+      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "Route swappers has been updated.");
+      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "Route internal coins has been updated.");
+      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
+        return React__default.createElement(BalanceWarnings, {
+          messages: warning.messages
+        });
+      default:
+        return [];
+    }
+  });
+}
+
+function useConfirmSwap() {
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const initialRoute = useBestRouteStore.use.bestRoute();
+  const setBestRoute = useBestRouteStore.use.setBestRoute();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const meta = useMetaStore.use.meta();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const slippage = useSettingsStore.use.slippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const userSlippage = customSlippage || slippage;
+  const proceedAnywayRef = React.useRef(false);
+  const confiremedRouteRef = React.useRef(null);
+  let abortControllerRef = React.useRef(null);
+  const [loading, setLoading] = React.useState(false);
+  const [errors, setErrors] = React.useState([]);
+  const [warnings, setWarnings] = React.useState([]);
+  React.useEffect(() => {
+    return () => abortControllerRef.current?.abort();
+  }, []);
+  if (!fromToken || !toToken || !inputAmount || !initialRoute) return {
+    loading: false,
+    warnings: [],
+    errors: [],
+    confirmSwap: null
+  };
+  const confirmSwap = async () => {
+    if (proceedAnywayRef.current) {
+      const swapSettings = {
+        slippage: userSlippage.toString(),
+        disabledSwappersGroups: disabledLiquiditySources
+      };
+      if (errors.length > 0) setErrors([]);
+      if (warnings.length > 0) setWarnings([]);
+      proceedAnywayRef.current = false;
+      if (confiremedRouteRef.current) {
+        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        return newSwap;
+      }
+      return;
+    }
+    abortControllerRef.current = new AbortController();
+    setLoading(true);
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, true);
+    try {
+      const confiremedRoute = await httpService.getBestRoute(requestBody, {
+        signal: abortControllerRef.current?.signal
+      });
+      abortControllerRef.current = null;
+      setLoading(false);
+      if (!confiremedRoute.result || !new BigNumber__default(confiremedRoute.requestAmount).isEqualTo(new BigNumber__default(inputAmount || '-1'))) {
+        setErrors(prevState => prevState.concat({
+          type: ConfirmSwapErrorTypes.NO_ROUTE
+        }));
+        return;
+      }
+      const confirmSwapState = {
+        errors: [],
+        warnings: []
+      };
+      const routeChanged = isRouteChanged(initialRoute, confiremedRoute);
+      if (routeChanged) {
+        setBestRoute(confiremedRoute);
+        const newRouteOutputUsdValue = new BigNumber__default(confiremedRoute.result?.outputAmount || '0').multipliedBy(toToken.usdPrice || 0);
+        const outputRatio = getOutputRatio(inputUsdValue, newRouteOutputUsdValue);
+        const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
+        if (highValueLoss) confirmSwapState.errors.push({
+          type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS
+        });else if (isOutputAmountChangedALot(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+          newOutputAmount: numberToString(getRouteOutputAmount(confiremedRoute)),
+          percentageChange: numberToString(getPercentageChange(getRouteOutputAmount(initialRoute), getRouteOutputAmount(confiremedRoute)), null, 2)
+        });else if (isRouteInternalCoinsUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED
+        });else if (isNumberOfSwapsChanged(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_UPDATED
+        });else if (isRouteSwappersUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED
+        });
+      }
+      const balanceWarnings = getBalanceWarnings(confiremedRoute, selectedWallets);
+      const enoughBalance = balanceWarnings.length === 0;
+      if (!enoughBalance) confirmSwapState.warnings.push({
+        type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE,
+        messages: balanceWarnings
+      });
+      const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
+      if (!hasProperSlippage(userSlippage.toString(), minRequiredSlippage)) confirmSwapState.errors.push({
+        type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE,
+        minRequiredSlippage
+      });
+      const noErrors = confirmSwapState.errors.length === 0;
+      const noWarnings = confirmSwapState.warnings.length === 0;
+      if ((noErrors || !noErrors && proceedAnywayRef.current) && (noWarnings || !noWarnings && proceedAnywayRef.current)) {
+        const swapSettings = {
+          slippage: userSlippage.toString(),
+          disabledSwappersGroups: disabledLiquiditySources
+        };
+        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        return newSwap;
+      } else if (!proceedAnywayRef.current) {
+        proceedAnywayRef.current = true;
+        setErrors(confirmSwapState.errors);
+        setWarnings(confirmSwapState.warnings);
+        confiremedRouteRef.current = confiremedRoute;
+      }
+      return;
+    } catch (error) {
+      if (error?.code === 'ERR_CANCELED') {
+        return;
+      }
+      const status = error?.response?.status;
+      setLoading(false);
+      setErrors([{
+        type: ConfirmSwapErrorTypes.REQUEST_FAILED,
+        status
+      }]);
+      return;
+    }
+  };
+  return {
+    loading,
+    warnings,
+    errors,
+    confirmSwap
+  };
+}
+
+function ConfirmSwapPage() {
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const {
+    manager
+  } = queueManagerReact.useManager();
+  const navigate = reactRouterDom.useNavigate();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const {
+    tokens
+  } = useMetaStore.use.meta();
+  const slippage = useSettingsStore.use.slippage();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const selectedSlippage = customSlippage || slippage;
+  const {
+    loading,
+    errors,
+    warnings,
+    confirmSwap
+  } = useConfirmSwap();
+  const showHighSlippageWarning = !errors.find(error => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE);
+  return React__default.createElement(ui.ConfirmSwap, {
+    onConfirm: () => {
+      confirmSwap?.().then(swap => {
+        if (swap) {
+          manager?.create('swap', {
+            swapDetails: swap
+          }, {
+            id: swap.requestId
+          });
+          setSelectedSwap(swap.requestId);
+          navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
+            replace: true
+          });
+        }
+      });
+    },
+    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
+    bestRoute: getBestRouteWithCalculatedFees(bestRoute, tokens),
+    loading: loading,
+    errors: ConfirmSwapErrors(errors),
+    warnings: ConfirmSwapWarnings(warnings),
+    extraMessages: showHighSlippageWarning && React__default.createElement(ConfirmSwapExtraMessages, {
+      selectedSlippage: selectedSlippage
+    }),
+    confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!',
+    confirmButtonDisabled: fetchingBestRoute
+  });
+}
+
+const getPendingSwaps = manager => {
+  const result = [];
+  manager?.getAll().forEach((q, id) => {
+    const storage = q.list.getStorage();
+    if (storage?.swapDetails) {
+      result.push({
+        id,
+        swap: storage?.swapDetails
+      });
+    }
+  });
+  return result.sort((a, b) => Number(b.swap.creationTime) - Number(a.swap.creationTime));
+};
+
+function HistoryPage() {
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  const navigate = reactRouterDom.useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const {
+    manager
+  } = queueManagerReact.useManager();
+  const pendingSwaps = getPendingSwaps(manager).map(_ref => {
+    let {
+      swap
+    } = _ref;
+    return swap;
+  });
+  return React__default.createElement(ui.History
+  //todo: move PendingSwap type to rango-types
+  //@ts-ignore
+  , {
+    //todo: move PendingSwap type to rango-types
+    //@ts-ignore
+    list: pendingSwaps,
+    onSwapClick: requestId => {
+      setSelectedSwap(requestId);
+      navigate(navigationRoutes.swaps + `/${requestId}`);
+    },
+    onBack: navigateBackFrom.bind(null, navigationRoutes.swaps)
+  });
+}
+
+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();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const uniqueSwappersGroups = [];
+  removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
+    return swappers.find(s => s.swapperGroup === swapperGroup);
+  }).find(s => {
+    if (s) {
+      for (const type of s.types) {
+        uniqueSwappersGroups.push({
+          title: s.swapperGroup,
+          logo: s.logo,
+          type,
+          selected: !disabledLiquiditySources.includes(s.swapperGroup)
+        });
+      }
+    }
+  });
+  return React__default.createElement(ui.LiquiditySourcesSelector, {
+    toggleAll: toggleAllLiquiditySources,
+    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)
+  });
+}
+
+function SelectChainPage(props) {
+  const {
+    type,
+    supportedChains
+  } = props;
+  const blockchains = supportedChains === 'all' ? useMetaStore.use.meta().blockchains : supportedChains;
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  return React__default.createElement(ui.BlockchainSelector, {
+    type: type === 'from' ? 'Source' : 'Destination',
+    list: blockchains,
+    selected: type === 'from' ? fromChain : toChain,
+    loadingStatus: loadingStatus,
+    onChange: chain => {
+      if (type === 'from') setFromChain(chain, true);else setToChain(chain, true);
+      navigateBackFrom(navigationRoutes.fromChain);
+    },
+    onBack: navigateBackFrom.bind(null, navigationRoutes.fromChain)
+  });
+}
+
+function SelectTokenPage(props) {
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const {
+    type,
+    supportedTokens
+  } = props;
+  const sourceTokens = useBestRouteStore.use.sourceTokens();
+  const destinationTokens = useBestRouteStore.use.destinationTokens();
+  const supportedSourceTokens = supportedTokens === 'all' ? sourceTokens : sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
+  const supportedDestinationTokens = supportedTokens === 'all' ? destinationTokens : destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
+  console.log(supportedSourceTokens);
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToToken = useBestRouteStore.use.setToToken();
+  return React__default.createElement(ui.TokenSelector, {
+    type: type === 'from' ? 'Source' : 'Destination',
+    list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
+    selected: type === 'from' ? fromToken : toToken,
+    onChange: token => {
+      if (type === 'from') setFromToken(token);else setToToken(token);
+      navigateBackFrom(navigationRoutes.fromToken);
+    },
+    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken)
+  });
+}
+
+function SettingsPage(_ref) {
+  let {
+    supportedSwappers
+  } = _ref;
+  const slippage = useSettingsStore.use.slippage();
+  const setSlippage = useSettingsStore.use.setSlippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
+  const theme = useSettingsStore.use.theme();
+  const setTheme = useSettingsStore.use.setTheme();
+  const swappers = useMetaStore.use.meta().swappers;
+  const navigate = reactRouterDom.useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const infiniteApprove = useSettingsStore.use.infiniteApprove();
+  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const uniqueSwappersGroups = [];
+  removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
+    return swappers.find(s => s.swapperGroup === swapperGroup);
+  }).find(s => {
+    if (s) {
+      for (const type of s.types) {
+        uniqueSwappersGroups.push({
+          title: s.swapperGroup,
+          logo: s.logo,
+          type,
+          selected: !disabledLiquiditySources.includes(s.swapperGroup)
+        });
+      }
+    }
+  });
+  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__default.createElement(ui.Settings, {
+    slippages: SLIPPAGES,
+    selectedSlippage: slippage,
+    onSlippageChange: slippage => setSlippage(slippage),
+    onLiquiditySourcesClick: () => navigate(navigationRoutes.liquiditySources),
+    onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
+    liquiditySources: supportedUniqueSwappersGroups,
+    selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
+    customSlippage: customSlippage || NaN,
+    onCustomSlippageChange: setCustomSlippage,
+    minSlippage: MIN_SLIPPGAE,
+    maxSlippage: MAX_SLIPPAGE,
+    selectedTheme: theme,
+    onThemeChange: setTheme,
+    infiniteApprove: infiniteApprove,
+    toggleInfiniteApprove: toggleInfiniteApprove
+  });
+}
+
+const ListContainer = /*#__PURE__*/ui.styled('div', {
+  display: 'grid',
+  gap: '.5rem',
+  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
+  height: '450px',
+  alignContent: 'baseline',
+  padding: '0.5rem'
+});
+const AlertContainer = /*#__PURE__*/ui.styled('div', {
+  paddingBottom: '$16'
+});
+function WalletsPage(_ref) {
+  let {
+    supportedWallets,
+    multiWallets
+  } = _ref;
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const {
+    state,
+    disconnect,
+    getWalletInfo,
+    connect
+  } = walletsCore.useWallets();
+  const wallets = getlistWallet(state, getWalletInfo, supportedWallets === 'all' ? Object.values(walletsShared.WalletType) : supportedWallets);
+  const walletsRef = React.useRef();
+  let sortedWallets = walletsShared.detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
+  sortedWallets = sortWalletsBasedOnState(sortedWallets);
+  const [walletErrorMessage, setWalletErrorMessage] = React.useState('');
+  const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const onSelectWallet = async type => {
+    const wallet = state(type);
+    try {
+      if (walletErrorMessage) setWalletErrorMessage('');
+      if (wallet.connected) {
+        await disconnect(type);
+      } else {
+        if (!multiWallets && !!wallets.find(w => w.state === ui.WalletState.CONNECTED)) {
+          return;
+        }
+        await connect(type);
+      }
+    } catch (e) {
+      setWalletErrorMessage('Error: ' + e?.message);
+    }
+  };
+  const disconnectConnectingWallets = () => {
+    const connectingWallets = walletsRef.current?.filter(wallet => wallet.state === ui.WalletState.CONNECTING) || [];
+    for (const wallet of connectingWallets) {
+      disconnect(wallet.type);
+    }
+  };
+  React.useEffect(() => {
+    toggleConnectWalletsButton();
+    return () => {
+      disconnectConnectingWallets();
+      toggleConnectWalletsButton();
+    };
+  }, []);
+  React.useEffect(() => {
+    walletsRef.current = wallets;
+  }, [wallets]);
+  return React__default.createElement(ui.SecondaryPage, {
+    title: t('Select Wallet') || '',
+    textField: false,
+    onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
+  }, React__default.createElement(React__default.Fragment, null, walletErrorMessage && React__default.createElement(AlertContainer, null, React__default.createElement(ui.Alert, {
+    type: "error"
+  }, walletErrorMessage)), React__default.createElement(ListContainer, null, sortedWallets.map((wallet, index) => React__default.createElement(ui.Wallet, Object.assign({}, wallet, {
+    key: `${index}-${wallet.type}`,
+    onClick: onSelectWallet
+  }))))));
+}
+
+const Box$1 = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%'
+});
+const Container$3 = /*#__PURE__*/ui.styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300'
+      },
+      outlined: {
+        border: '1px solid $neutrals300'
+      }
+    }
+  },
+  defaultVariants: {
+    type: 'filled'
+  },
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px'
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    },
+    '.amount': {
+      width: '30%'
+    }
+  }
+});
+const StyledImage$1 = /*#__PURE__*/ui.styled('img', {
+  width: '$24',
+  maxHeight: '$24'
+});
+const ImagePlaceholder$1 = /*#__PURE__*/ui.styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px'
+});
+const OutputContainer$1 = /*#__PURE__*/ui.styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$background',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8'
+});
+function TokenPreview(props) {
+  const {
+    chain,
+    token,
+    loadingStatus
+  } = props;
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const ItemSuffix = React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, loadingStatus === 'failed' && React__default.createElement(ui.InfoCircleIcon, {
+    color: "error",
+    size: 24
+  }));
+  return React__default.createElement(Box$1, null, React__default.createElement(Container$3, {
+    type: 'outlined'
+  }, React__default.createElement("div", {
+    className: "head"
+  }, React__default.createElement(ui.Typography, {
+    variant: "body2",
+    color: "neutrals800"
+  }, props.label), React__default.createElement(ui.Typography, {
+    variant: "caption",
+    color: "neutrals600"
+  }, `$${numberToString(props.usdValue)}`)), React__default.createElement("div", {
+    className: "form"
+  }, React__default.createElement(ui.Button, {
+    className: "selectors",
+    variant: "outlined",
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && chain ? React__default.createElement(StyledImage$1, {
+      src: chain.logo
+    }) : React__default.createElement(ImagePlaceholder$1, null),
+    suffix: ItemSuffix,
+    align: "start",
+    size: "large"
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React__default.createElement(ui.Spacer, {
+    size: 12
+  }), React__default.createElement(ui.Button, {
+    className: "selectors",
+    variant: "outlined",
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && token ? React__default.createElement(StyledImage$1, {
+      src: token.image
+    }) : React__default.createElement(ImagePlaceholder$1, null),
+    suffix: ItemSuffix,
+    size: "large",
+    align: "start"
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React__default.createElement(ui.Spacer, {
+    size: 12
+  }), React__default.createElement("div", {
+    className: "amount"
+  }, React__default.createElement(OutputContainer$1, null, React__default.createElement(ui.Typography, {
+    variant: "h4"
+  }, props.amount))))));
+}
+
+const Container$4 = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  fontSize: '$12',
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+function RoutesOverview(props) {
+  if (!props.routes) return null;
+  const swaps = props.routes.result?.swaps;
+  return React__default.createElement(Container$4, null, React__default.createElement("div", {
+    className: "routes"
+  }, swaps?.map((swap, idx) => {
+    const isLast = idx + 1 == swaps.length;
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: "route"
+    }, swap.from.symbol), React__default.createElement(ui.ChevronRightIcon, {
+      size: 12
+    }), isLast ? React__default.createElement("div", {
+      className: "route"
+    }, swap.to.symbol) : null);
+  })), props.totalFee ? React__default.createElement("div", {
+    className: "fee"
+  }, React__default.createElement(ui.GasIcon, {
+    size: 12
+  }), React__default.createElement(ui.Spacer, {
+    size: 4
+  }), "$", props.totalFee) : null);
+}
+
+function ConfirmWalletsPage() {
+  const navigate = reactRouterDom.useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const {
+    blockchains,
+    tokens
+  } = useMetaStore.use.meta();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
+  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
+  const {
+    getWalletInfo,
+    connect
+  } = walletsCore.useWallets();
+  const confirmDisabled = !requiredWallets(bestRoute).every(chain => selectedWallets.map(wallet => wallet.chain).includes(chain));
+  const firstStep = bestRoute?.result?.swaps[0];
+  const lastStep = bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
+  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
+  const toAmount = decimalNumber(lastStep?.toAmount, 3);
+  React.useEffect(() => {
+    initSelectedWallets();
+  }, []);
+  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
+  const handleConnectChain = wallet => {
+    const network = wallet;
+    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
+  };
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+  return React__default.createElement(ui.ConfirmWallets, {
+    requiredWallets: getRequiredChains(bestRoute),
+    selectableWallets: selectableWallets,
+    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmWallets),
+    onConfirm: () => navigate(navigationRoutes.confirmSwap, {
+      replace: true
+    }),
+    onChange: wallet => setSelectedWallet(wallet),
+    confirmDisabled: confirmDisabled,
+    handleConnectChain: wallet => handleConnectChain(wallet),
+    isExperimentalChain: wallet => getKeplrCompatibleConnectedWallets(selectableWallets).length > 0 ? isExperimentalChain(blockchains, wallet) : false,
+    previewInputs: React__default.createElement(React__default.Fragment, null, React__default.createElement(TokenPreview, {
+      chain: {
+        displayName: firstStep?.from.blockchain || '',
+        logo: firstStep?.from.blockchainLogo || ''
+      },
+      token: {
+        symbol: firstStep?.from.symbol || '',
+        image: firstStep?.from.logo || ''
+      },
+      usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
+      amount: fromAmount,
+      label: i18n.t('From'),
+      loadingStatus: 'success'
+    }), React__default.createElement(ui.Spacer, {
+      size: 12,
+      direction: "vertical"
+    }), React__default.createElement(TokenPreview, {
+      chain: {
+        displayName: lastStep?.to.blockchain || '',
+        logo: lastStep?.to.blockchainLogo || ''
+      },
+      token: {
+        symbol: lastStep?.to.symbol || '',
+        image: lastStep?.to.logo || ''
+      },
+      usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
+      amount: toAmount,
+      label: i18n.t('To'),
+      loadingStatus: 'success'
+    })),
+    previewRoutes: React__default.createElement(RoutesOverview, {
+      routes: bestRoute,
+      totalFee: numberToString(totalFeeInUsd, 0, 2)
+    })
+  });
+}
+
+function useCopyToClipboard(resetInterval) {
+  const [isCopied, setCopied] = React__default.useState(false);
+  const handleCopy = React__default.useCallback(text => {
+    copy(text.toString());
+    setCopied(true);
+  }, []);
+  React__default.useEffect(() => {
+    let timeout;
+    if (isCopied && resetInterval) {
+      timeout = setTimeout(() => setCopied(false), resetInterval);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isCopied, resetInterval]);
+  return [isCopied, handleCopy];
+}
+
+function SwapDetailsPage() {
+  const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const {
+    manager
+  } = queueManagerReact.useManager();
+  const [isCopied, handleCopy] = useCopyToClipboard(2000);
+  const pendingSwaps = getPendingSwaps(manager);
+  const selectedSwap = pendingSwaps.find(_ref => {
+    let {
+      swap
+    } = _ref;
+    return swap.requestId === selectedSwapRequestId;
+  });
+  //TODO: implement swap cancellation (move queueManager logic to queueManager/rango-preset)
+  const onCancel = () => {
+    const swap = selectedSwap ? manager?.get(selectedSwap.id) : undefined;
+    if (swap) queueManagerRangoPreset.cancelSwap(swap);
+  };
+  return React__default.createElement(ui.SwapHistory, {
+    onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+    //todo: move PendingSwap type to rango-types
+    //@ts-ignore
+    pendingSwap: selectedSwap?.swap,
+    onCopy: handleCopy,
+    isCopied: isCopied,
+    onCancel: onCancel
+  });
+}
+
+function AppRoutes(props) {
+  const {
+    configs
+  } = props;
+  return reactRouterDom.useRoutes([{
+    path: navigationRoutes.home,
+    element: React__default.createElement(Home, {
+      title: configs?.title,
+      titleSize: configs?.titleSize,
+      titleWeight: configs?.titleWeight
+    })
+  }, {
+    path: navigationRoutes.fromChain,
+    element: React__default.createElement(SelectChainPage, {
+      type: "from",
+      supportedChains: configs?.fromChains || 'all'
+    })
+  }, {
+    path: navigationRoutes.toChain,
+    element: React__default.createElement(SelectChainPage, {
+      type: "to",
+      supportedChains: configs?.toChains || 'all'
+    })
+  }, {
+    path: navigationRoutes.fromToken + '/*',
+    element: React__default.createElement(SelectTokenPage, {
+      type: "from",
+      supportedTokens: configs?.fromTokens || 'all'
+    })
+  }, {
+    path: navigationRoutes.toToken,
+    element: React__default.createElement(SelectTokenPage, {
+      type: "to",
+      supportedTokens: configs?.toTokens || 'all'
+    })
+  }, {
+    path: navigationRoutes.settings,
+    element: React__default.createElement(SettingsPage, {
+      supportedSwappers: configs?.liquiditySources || 'all'
+    })
+  }, {
+    path: navigationRoutes.liquiditySources,
+    element: React__default.createElement(LiquiditySourcePage, {
+      supportedSwappers: configs?.liquiditySources || 'all'
+    })
+  }, {
+    path: navigationRoutes.swaps,
+    element: React__default.createElement(HistoryPage, null)
+  }, {
+    path: navigationRoutes.swapDetails,
+    element: React__default.createElement(SwapDetailsPage, null)
+  }, {
+    path: navigationRoutes.wallets,
+    element: React__default.createElement(WalletsPage, {
+      supportedWallets: configs?.wallets || 'all',
+      multiWallets: typeof configs?.multiWallets === 'undefined' ? true : configs.multiWallets
+    })
+  }, {
+    path: navigationRoutes.confirmSwap,
+    element: React__default.createElement(ConfirmSwapPage, null)
+  }, {
+    path: navigationRoutes.confirmWallets,
+    element: React__default.createElement(ConfirmWalletsPage, null)
+  }]);
+}
+
+const Header$1 = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end'
+});
+const WalletImage = /*#__PURE__*/ui.styled('img', {
+  width: '$24',
+  height: '$24',
+  marginLeft: -15,
+  marginRight: '$6',
+  borderRadius: '99999px'
+});
+function Layout(_ref) {
+  let {
+    configs
+  } = _ref;
+  const navigate = reactRouterDom.useNavigate();
+  const {
+    balances,
+    accounts,
+    selectedWallets
+  } = useWalletsStore();
+  const {
+    getWalletInfo
+  } = walletsCore.useWallets();
+  const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(w => w.image));
+  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
+  } = reactI18next.useTranslation();
+  React.useEffect(() => {
+    setToChain(configs?.toChain || null);
+    setToToken(configs?.toToken || null);
+  }, [configs?.toChain, configs?.toToken]);
+  React.useEffect(() => {
+    setInputAmount(configs?.fromAmount?.toString() || '');
+  }, [configs?.fromAmount]);
+  React.useEffect(() => {
+    setFromToken(configs?.fromToken || null);
+    setFromChain(configs?.fromChain || null);
+  }, [configs?.fromToken, configs?.fromChain]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Header$1, null, React__default.createElement(ui.Button, {
+    size: "small",
+    suffix: React__default.createElement(ui.AddWalletIcon, {
+      size: 20
+    }),
+    variant: "ghost",
+    flexContent: true,
+    onClick: () => {
+      if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
+    }
+  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React__default.createElement(WalletImage, {
+    key: index,
+    src: walletImage
+  })) : React__default.createElement(React__default.Fragment, null), React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`))), React__default.createElement(AppRoutes, {
+    configs: configs
+  }));
+}
+
+const globalStyles = /*#__PURE__*/ui.globalCss({
+  '*': {
+    '&::-webkit-scrollbar': {
+      width: '$8'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: '$neutrals400'
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: '$neutrals500'
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: '$neutrals300'
+    }
+  }
+});
+const globalFont = fontFamily => ui.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')"],
+  body: {
+    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 = React.useRef();
+  // Store current value in ref
+  React.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(_ref) {
+  let {
+    primary = '#5FA425',
+    background = '#fff',
+    foreground = '#000',
+    error = '#FF0000',
+    warning = '#F5A623',
+    success = '#0070F3',
+    fontFamily = 'Robot',
+    borderRadius = 8
+  } = _ref;
+  const theme = useSettingsStore.use.theme();
+  const fetchMeta = useMetaStore.use.fetchMeta();
+  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),
+    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 = ui.createTheme({
+    colors,
+    radii: {
+      5: `${borderRadius}px`
+    }
+  });
+  const customeDarkTheme = ui.createTheme({
+    colors: {
+      ...colors,
+      neutrals200: '#111111',
+      neutrals300: '#333333',
+      neutrals400: '#444444',
+      neutrals500: '#acacac',
+      neutrals600: '#cccccc',
+      neutrals700: '#dedede',
+      neutrals800: '#f2f2f2',
+      neutrals900: '#FAFAFA',
+      foreground: background,
+      background: foreground
+    },
+    radii: {
+      5: `${borderRadius}px`
+    }
+  });
+  const [OSTheme, setOSTheme] = React.useState(customeLightTheme);
+  React.useEffect(() => {
+    (async () => {
+      await fetchMeta();
+    })();
+    const switchTheme = event => {
+      if (event.matches) setOSTheme(customeDarkTheme);else setOSTheme(customeLightTheme);
+    };
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      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);
+  React.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' ? customeDarkTheme : customeLightTheme;
+  };
+  return {
+    activeTheme: getActiveTheme()
+  };
+}
+
+function useSelectLanguage() {
+  const {
+    i18n
+  } = reactI18next.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 = "You sell";
+var To = "You receive";
+var Balance = "Balance";
+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,
+	Balance: Balance,
+	Max: Max,
+	Chain: Chain,
+	Token: Token,
+	Source: Source,
+	Destination: Destination,
+	"Select Wallet": "Connect Your 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__default.use(Backend)
+// detect user language
+.use(LanguageDetector)
+// pass the i18n instance to react-i18next.
+.use(reactI18next.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
+  } = walletsCore.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(rangoSdk.isEvmBlockchain);
+  const getSupportedChainNames = type => {
+    const {
+      supportedChains
+    } = getWalletInfo(type);
+    return walletAndSupportedChainsNames(supportedChains);
+  };
+  const allProviders = providers();
+  const context = {
+    meta: {
+      blockchains: allBlockchains,
+      evmBasedChains: evmBasedChains,
+      evmNetworkChainInfo: walletsShared.convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
+      getSupportedChainNames
+    },
+    getSigners,
+    //todo: remove Network type
+    //@ts-ignore
+    wallets,
+    providers: allProviders,
+    switchNetwork,
+    connect,
+    state,
+    notifier: message => {
+      console.log('[notifier]', message);
+    }
+  };
+  return React__default.createElement(queueManagerReact.Provider
+  //@ts-ignore
+  , {
+    //@ts-ignore
+    queuesDefs: [queueManagerRangoPreset.swapQueueDef],
+    context: context,
+    onPersistedDataLoaded: _manager => {},
+    isPaused: false
+  }, props.children);
+}
+
+const SwapBox = _ref => {
+  let {
+    configs
+  } = _ref;
+  globalStyles();
+  globalFont(configs?.fontFamily || 'Roboto');
+  const {
+    activeTheme
+  } = 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(rangoSdk.isEvmBlockchain).map(chain => chain.name);
+  const onUpdateState = (type, event, value, _, supportedChains) => {
+    if (event === walletsCore.Events.ACCOUNTS) {
+      if (value) {
+        const supportedChainNames = walletAndSupportedChainsNames(supportedChains);
+        const data = prepareAccountsForWalletStore(type, value, evmBasedChainNames, supportedChainNames);
+        connectWallet(data);
+      } else {
+        disconnectWallet(type);
+      }
+    }
+  };
+  let providers = providerAll.allProviders();
+  React.useEffect(() => {
+    if (configs.theme !== 'auto') setTheme(configs.theme);
+  }, [configs.theme]);
+  React.useEffect(() => {
+    const wallets = configs.wallets;
+    clearConnectedWallet();
+    providers = wallets === 'all' ? providerAll.allProviders() : providerAll.allProviders().filter(provider => {
+      const type = provider.config.type;
+      return wallets.find(w => w === type);
+    });
+  }, [configs?.wallets]);
+  React.useEffect(() => {
+    changeLanguage(configs?.languege);
+  }, [configs?.languege]);
+  return React__default.createElement(walletsCore.Provider, {
+    allBlockChains: blockchains,
+    providers: providers,
+    onUpdateState: onUpdateState
+  }, React__default.createElement("div", {
+    id: "pageContainer",
+    className: activeTheme
+  }, React__default.createElement(QueueManager, null, React__default.createElement(ui.SwapContainer, {
+    style: {
+      width: configs?.width || 'auto',
+      height: configs?.height || 'auto'
+    }
+  }, React__default.createElement(AppRouter, {
+    title: configs.title,
+    titleSize: configs.titleSize,
+    titleWeight: configs.titleWeight
+  }, React__default.createElement(Layout, {
+    configs: configs
+  }))))));
+};
+
+exports.SwapBox = SwapBox;
+//# sourceMappingURL=widget-embedded.cjs.development.js.map