@rango-dev/widget-embedded 0.1.19 → 0.1.20-next.1

package/dist/widget-embedded.esm.js

@@ -1,3384 +0,0 @@
-import { WalletState, InfoCircleIcon, Typography, Button, Image, Spacer, styled, ChevronRightIcon, GasIcon, Alert, ConfirmSwap, LoadingFailedAlert, History, AngleDownIcon, TextField, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, Wallet, useCopyToClipboard, SwapHistory, AddWalletIcon, globalCss, generateRangeColors, createTheme, SwapContainer } from '@rango-dev/ui';
-import React, { useRef, useEffect, Fragment, useState, useLayoutEffect, useMemo } from 'react';
-import { useInRouterContext, MemoryRouter } from 'react-router';
-import { PendingSwapNetworkStatus, useQueueManager, calculatePendingSwap, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, makeQueueDefinition, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
-import { isCosmosBlockchain, isEvmBlockchain } from 'rango-types';
-import { useSearchParams, useLocation, createSearchParams, useInRouterContext as useInRouterContext$1, useNavigate, useRoutes } from 'react-router-dom';
-import { create } from 'zustand';
-import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
-import { persist, subscribeWithSelector } from 'zustand/middleware';
-import { RangoClient, isEvmBlockchain as isEvmBlockchain$1 } from 'rango-sdk';
-import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, detectInstallLink, WalletType, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
-export { WalletType } from '@rango-dev/wallets-shared';
-import { readAccountAddress, useWallets, Provider as Provider$1, Events } from '@rango-dev/wallets-core';
-import { shallow } from 'zustand/shallow';
-import { allProviders } from '@rango-dev/provider-all';
-import { useTranslation, initReactI18next } from 'react-i18next';
-import i18n, { t } from 'i18next';
-import { useManager, Provider } from '@rango-dev/queue-manager-react';
-import dayjs from 'dayjs';
-import { styled as styled$1 } from '@rango-dev/ui/';
-import Backend from 'i18next-http-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
-
-const ZERO = /*#__PURE__*/new BigNumber(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 debounce(fn, time) {
-  let timeoutId;
-  return wrapper;
-  function wrapper() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      timeoutId = null;
-      fn(...args);
-    }, time);
-  }
-}
-
-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 || number === undefined) return '';
-  if (number === '') return '';
-  const n = new BigNumber$1(number);
-  const roundingMode = 1;
-  let maxI = 1000;
-  for (let i = 0; i < 60; i++) {
-    if (new BigNumber$1(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 isPositiveNumber = text => !!text && parseFloat(text) > 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(params) {
-  if (params.store === 'bestRoute') {
-    const {
-      prevState,
-      currentState
-    } = params;
-    return !!currentState.fromToken && !!currentState.toToken && (prevState.fromChain?.name !== currentState.fromChain?.name || prevState.toChain?.name !== currentState.toChain?.name || prevState.fromToken?.symbol !== currentState.fromToken?.symbol || prevState.toToken?.symbol !== currentState.toToken?.symbol || prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain || prevState.toToken?.blockchain !== currentState.toToken?.blockchain || prevState.fromToken?.address !== currentState.fromToken?.address || prevState.toToken?.address !== currentState.toToken?.address || prevState.inputAmount !== currentState.inputAmount);
-  } else if (params.store === 'settings') {
-    const {
-      prevState,
-      currentState
-    } = params;
-    return prevState.slippage !== currentState.slippage || prevState.customSlippage !== currentState.customSlippage || prevState.disabledLiquiditySources?.length !== currentState.disabledLiquiditySources?.length || prevState.infiniteApprove || currentState.infiniteApprove;
-  }
-  return false;
-}
-function getFormatedBestRoute(bestRoute) {
-  if (!bestRoute) return null;
-  const formatedSwaps = (bestRoute.result?.swaps || []).map(swap => ({
-    ...swap,
-    fromAmount: numberToString(swap.fromAmount, 6, 6),
-    toAmount: numberToString(swap.toAmount, 6, 6)
-  }));
-  return {
-    ...bestRoute,
-    ...(bestRoute.result && {
-      result: {
-        ...bestRoute.result,
-        swaps: formatedSwaps
-      }
-    })
-  };
-}
-function getFormatedPendingSwap(pendingSwap) {
-  const formatedSteps = pendingSwap.steps.map(step => ({
-    ...step,
-    feeInUsd: numberToString(step.feeInUsd, 4, 4),
-    outputAmount: numberToString(step.outputAmount, 6, 6),
-    expectedOutputAmountHumanReadable: numberToString(step.expectedOutputAmountHumanReadable, 6, 6)
-  }));
-  return {
-    ...pendingSwap,
-    inputAmount: numberToString(pendingSwap.inputAmount, 6, 6),
-    steps: formatedSteps
-  };
-}
-//todo: refactor bestRoute store and add loadingStatus
-const getBestRouteStatus = (loading, error) => {
-  if (loading) return 'loading';
-  if (error) return 'failed';else return 'success';
-};
-
-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 RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
-let configs = {
-  API_KEY: RANGO_PUBLIC_API_KEY
-};
-function getConfig(name) {
-  return configs[name];
-}
-function initConfig(nextConfigs) {
-  let clonedConfigs;
-  if (typeof structuredClone === 'function') {
-    clonedConfigs = structuredClone(nextConfigs);
-  } else {
-    clonedConfigs = JSON.parse(JSON.stringify(nextConfigs));
-  }
-  configs = clonedConfigs;
-  return configs;
-}
-
-let rango = undefined;
-const httpService = () => {
-  if (rango) return rango;
-  rango = new RangoClient(getConfig('API_KEY'));
-  return rango;
-};
-
-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__*/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__*/create()( /*#__PURE__*/persist( /*#__PURE__*/subscribeWithSelector(set => ({
-  slippage: DEFAULT_SLIPPAGE,
-  customSlippage: null,
-  infiniteApprove: false,
-  affiliateRef: null,
-  disabledLiquiditySources: [],
-  theme: 'auto',
-  setSlippage: slippage => set(() => ({
-    slippage: slippage
-  })),
-  setCustomSlippage: customSlippage => set(() => ({
-    customSlippage: customSlippage
-  })),
-  setAffiliateRef: affiliateRef => set(() => ({
-    affiliateRef
-  })),
-  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'
-})));
-
-function getStateWallet(state) {
-  switch (true) {
-    case state.connected:
-      return WalletState.CONNECTED;
-    case state.connecting:
-      return WalletState.CONNECTING;
-    case !state.installed:
-      return WalletState.NOT_INSTALLED;
-    default:
-      return WalletState.DISCONNECTED;
-  }
-}
-const excludedWallets = [WalletType.UNKNOWN, WalletType.LEAP];
-function getlistWallet(getState, getWalletInfo, list) {
-  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: 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
-    } = readAccountAddress(account);
-    const hasLimitation = supportedChains.length > 0;
-    const isSupported = supportedChains.includes(network);
-    const isUnknown = network === 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 === Network.Unknown && 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(connectedWallets, selectedWallets, getWalletInfo) {
-  const selectableWallets = connectedWallets.map(connectedWallet => ({
-    address: connectedWallet.address,
-    walletType: connectedWallet.walletType,
-    chain: connectedWallet.chain,
-    image: getWalletInfo(connectedWallet.walletType).img,
-    name: getWalletInfo(connectedWallet.walletType).name,
-    selected: !!selectedWallets.find(selectedWallet => selectedWallet.chain === connectedWallet.chain && selectedWallet.walletType === connectedWallet.walletType)
-  }));
-  return selectableWallets;
-}
-function getBalanceFromWallet(connectedWallets, chain, symbol, address) {
-  if (connectedWallets.length === 0) return null;
-  const selectedChainWallets = connectedWallets.filter(wallet => wallet.chain === chain);
-  if (selectedChainWallets.length === 0) return null;
-  return selectedChainWallets.map(wallet => wallet.balances?.find(balance => address !== null && balance.address === address || address === null && balance.address === address && balance.symbol === symbol) || null).filter(balance => balance !== null).sort((a, b) => parseFloat(b?.amount || '0') - parseFloat(a?.amount || '1')).find(() => true) || null;
-}
-function isAccountAndWalletMatched(account, connectedWallet) {
-  return account.address === connectedWallet.address && account.chain === connectedWallet.chain;
-}
-function makeBalanceFor(wallet, retrivedBalance, tokens) {
-  const {
-    address,
-    blockChain: chain,
-    explorerUrl,
-    balances = []
-  } = retrivedBalance;
-  return {
-    address,
-    chain,
-    loading: false,
-    error: false,
-    explorerUrl,
-    walletType: wallet.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(tokenBalance.amount.amount).shiftedBy(-tokenBalance.amount.decimals).toFixed(),
-      logo: '',
-      usdPrice: getUsdPrice(chain, tokenBalance.asset.symbol, tokenBalance.asset.address, tokens) || null
-    })) || []
-  };
-}
-function resetConnectedWalletState(connectedWallet) {
-  return {
-    ...connectedWallet,
-    loading: false,
-    error: true
-  };
-}
-const calculateWalletUsdValue = connectedWallet => {
-  const uniqueAccountAddresses = new Set();
-  const uniqueBalane = connectedWallet?.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(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 = getCosmosExperimentalChainInfo(Object.entries(blockchains).map(_ref => {
-    let [, blockchainMeta] = _ref;
-    return blockchainMeta;
-  }).filter(isCosmosBlockchain));
-  return cosmosExperimentalChainInfo && !!cosmosExperimentalChainInfo[wallet];
-};
-const getKeplrCompatibleConnectedWallets = selectableWallets => {
-  const connectedWalletTypes = new Set(selectableWallets.map(a => a.walletType.toString()));
-  return KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
-};
-function getTokensWithBalance(tokens, connectedWallets) {
-  return tokens.map(_ref2 => {
-    let {
-      balance,
-      ...otherProps
-    } = _ref2;
-    const tokenAmount = numberToString(new BigNumber(getBalanceFromWallet(connectedWallets, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO));
-    let tokenUsdValue = '';
-    if (otherProps.usdPrice) tokenUsdValue = numberToString(new BigNumber(getBalanceFromWallet(connectedWallets, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO).multipliedBy(otherProps.usdPrice));
-    return {
-      ...otherProps,
-      ...(tokenAmount !== '0' && {
-        balance: {
-          amount: tokenAmount,
-          usdValue: tokenUsdValue
-        }
-      })
-    };
-  });
-}
-function getSortedTokens(chain, tokens, connectedWallets, 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, connectedWallets));
-}
-function tokensAreEqual(tokenA, tokenB) {
-  return tokenA?.blockchain === tokenB?.blockchain && tokenA?.symbol === tokenB?.symbol && 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 === WalletState.CONNECTED) - Number(a.state === WalletState.CONNECTED) || Number(b.state === WalletState.DISCONNECTED || b.state === WalletState.CONNECTING) - Number(a.state === WalletState.DISCONNECTED || a.state === 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(400)) || parseInt(outputRatio.toFixed(2) || '0') <= -5 && inputUsdValue.gte(new BigNumber(1000));
-}
-function hasLimitError(bestRoute) {
-  return (bestRoute?.result?.swaps || []).filter(swap => {
-    const minimum = !!swap.fromAmountMinValue ? new BigNumber(swap.fromAmountMinValue) : null;
-    const maximum = !!swap.fromAmountMaxValue ? new BigNumber(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(swap.fromAmountMinValue) : null;
-    const maximum = !!swap.fromAmountMaxValue ? new BigNumber(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(swap.fromAmountMinValue) : null;
-  const maximum = !!swap.fromAmountMaxValue ? new BigNumber(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, connectedWallets, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount) {
-  if (loadingMetaStatus !== 'success') return {
-    title: 'Connect Wallet',
-    disabled: true
-  };
-  if (connectedWallets.length == 0) return {
-    title: 'Connect Wallet',
-    disabled: false
-  };
-  if (loading) return {
-    title: 'Finding Best Route...',
-    disabled: true
-  };else if (!inputAmount || inputAmount === '0') return {
-    title: 'Enter an amount',
-    disabled: true
-  };else if (!bestRoute || !bestRoute.result) 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 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(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(30));
-}
-function getMinRequiredSlippage(route) {
-  const slippages = route.result?.swaps.map(slippage => slippage.recommendedSlippage);
-  return slippages?.map(s => s?.slippage || '0')?.filter(s => parseFloat(s) > 0)?.sort((a, b) => parseFloat(b) - parseFloat(a))?.find(() => true) || null;
-}
-function hasProperSlippage(userSlippage, minRequiredSlippage) {
-  if (!minRequiredSlippage) return true;
-  return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
-}
-function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, affiliateRef, initialRoute) {
-  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 checkPrerequisites = !!initialRoute;
-  const filteredBlockchains = removeDuplicateFrom((initialRoute?.result?.swaps || []).reduce((blockchains, swap) => (blockchains.push(swap.from.blockchain, swap.to.blockchain), blockchains), []));
-  const requestBody = {
-    amount: inputAmount.toString(),
-    affiliateRef,
-    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,
-    slippage: slippage.toString(),
-    ...(checkPrerequisites && {
-      blockchains: filteredBlockchains
-    })
-  };
-  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(newValue).div(new BigNumber(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(asset.currentAmount.amount).shiftedBy(-asset.currentAmount.decimals), 8);
-    const requiredAmount = numberToString(new BigNumber(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(outputAmount) : ZERO;
-  return amount.multipliedBy(tokenPrice || 0);
-}
-function isNetworkStatusInWarningState(pendingSwapStep) {
-  return !!pendingSwapStep && pendingSwapStep.networkStatus !== null && pendingSwapStep.networkStatus !== PendingSwapNetworkStatus.NetworkChanged;
-}
-function getSwapMessages(pendingSwap, currentStep) {
-  const textForRemove = 'bellow button or';
-  let message = pendingSwap.extraMessage;
-  let detailedMessage = pendingSwap.extraMessageDetail;
-  if (pendingSwap.networkStatusExtraMessageDetail?.includes(textForRemove)) {
-    pendingSwap.networkStatusExtraMessageDetail = pendingSwap.networkStatusExtraMessageDetail.replace(textForRemove, '');
-  }
-  const networkWarningState = isNetworkStatusInWarningState(currentStep);
-  if (networkWarningState) {
-    message = pendingSwap.networkStatusExtraMessage || '';
-    detailedMessage = pendingSwap.networkStatusExtraMessageDetail || '';
-    switch (currentStep?.networkStatus) {
-      case PendingSwapNetworkStatus.WaitingForConnectingWallet:
-        message = message || 'Waiting for connecting wallet';
-        break;
-      case PendingSwapNetworkStatus.WaitingForQueue:
-        message = message || 'Waiting for other running tasks to be finished';
-        break;
-      case PendingSwapNetworkStatus.WaitingForNetworkChange:
-        message = message || 'Waiting for changing wallet network';
-        break;
-    }
-  }
-  detailedMessage = detailedMessage || '';
-  message = message || '';
-  const isRpc = message?.indexOf('code') !== -1 && message?.indexOf('reason') !== -1;
-  return {
-    shortMessage: message,
-    detailedMessage: {
-      content: detailedMessage,
-      long: isRpc
-    }
-  };
-}
-function getLastConvertedTokenInFailedSwap(pendingSwap) {
-  let resultToken = null;
-  if (pendingSwap.status === 'failed') {
-    const lastSuccessStep = pendingSwap.steps.slice().reverse().filter(step => step.status === 'success')[0];
-    if (lastSuccessStep) {
-      resultToken = {
-        blockchain: lastSuccessStep.toBlockchain,
-        symbol: lastSuccessStep.toSymbol,
-        outputAmount: lastSuccessStep.outputAmount,
-        address: lastSuccessStep.toSymbolAddress
-      };
-    }
-  }
-  return resultToken;
-}
-function shouldRetrySwap(pendingSwap) {
-  return pendingSwap.status === 'failed' && !!pendingSwap.finishTime && new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000;
-}
-
-const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector((set, get) => ({
-  connectedWallets: [],
-  selectedWallets: [],
-  connectWallet: accounts => {
-    const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
-    set(state => ({
-      connectedWallets: state.connectedWallets.filter(wallet => wallet.walletType !== accounts[0].walletType).concat(accounts.map(account => ({
-        balances: [],
-        address: account.address,
-        chain: account.chain,
-        loading: true,
-        walletType: account.walletType,
-        error: false,
-        explorerUrl: null
-      })))
-    }));
-    accounts.forEach(async account => getOneOfWalletsDetails(account));
-  },
-  disconnectWallet: walletType => {
-    set(state => ({
-      connectedWallets: state.connectedWallets.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.connectedWallets;
-    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(() => ({
-    connectedWallets: [],
-    selectedWallets: []
-  })),
-  getOneOfWalletsDetails: async account => {
-    const tokens = useMetaStore.getState().meta.tokens;
-    set(state => ({
-      connectedWallets: state.connectedWallets.map(balance => {
-        return balance.address === account.address && balance.chain === account.chain ? {
-          ...balance,
-          loading: true
-        } : balance;
-      })
-    }));
-    try {
-      const response = await httpService().getWalletsDetails([{
-        address: account.address,
-        blockchain: account.chain
-      }]);
-      const retrivedBalance = response.wallets[0];
-      if (retrivedBalance) {
-        set(state => ({
-          connectedWallets: state.connectedWallets.map(connectedWallet => {
-            return isAccountAndWalletMatched(account, connectedWallet) ? makeBalanceFor(account, retrivedBalance, tokens) : connectedWallet;
-          })
-        }));
-      } else throw new Error('Wallet not found');
-    } catch (error) {
-      set(state => ({
-        connectedWallets: state.connectedWallets.map(balance => {
-          return isAccountAndWalletMatched(account, balance) ? resetConnectedWalletState(balance) : balance;
-        })
-      }));
-    }
-  }
-}))));
-useWalletsStore.subscribe(state => state.connectedWallets, connectedWallets => {
-  useBestRouteStore.setState(_ref => {
-    let {
-      sourceTokens,
-      destinationTokens
-    } = _ref;
-    const sourceTokensWithBalance = getTokensWithBalance(sourceTokens, connectedWallets);
-    const destinationTokensWithBalance = getTokensWithBalance(destinationTokens, connectedWallets);
-    return {
-      sourceTokens: sortTokens(sourceTokensWithBalance),
-      destinationTokens: sortTokens(destinationTokensWithBalance)
-    };
-  });
-}, {
-  equalityFn: shallow
-});
-const fetchingBalanceSelector = state => !!state.connectedWallets.find(wallet => wallet.loading);
-
-const getUsdValue = (token, amount) => new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
-const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
-  fromChain: null,
-  fromToken: null,
-  inputAmount: '',
-  outputAmount: null,
-  inputUsdValue: new BigNumber(0),
-  outputUsdValue: new BigNumber(0),
-  toChain: null,
-  toToken: null,
-  bestRoute: null,
-  loading: false,
-  error: '',
-  sourceTokens: [],
-  destinationTokens: [],
-  setBestRoute: bestRoute => set(state => {
-    let outputAmount = null;
-    let outputUsdValue = ZERO;
-    if (!isPositiveNumber(state.inputAmount)) return {};
-    if (!!bestRoute) {
-      outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber(bestRoute.result?.outputAmount) : null;
-      outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
-    }
-    return {
-      bestRoute,
-      ...(!!bestRoute && {
-        outputAmount,
-        outputUsdValue
-      })
-    };
-  }),
-  resetRoute: () => set(() => ({
-    loading: true,
-    error: '',
-    bestRoute: null,
-    outputAmount: null,
-    outputUsdValue: new BigNumber(0)
-  })),
-  setFromChain: (chain, setDefaultToken) => {
-    set(state => {
-      if (state.fromChain?.name === chain?.name) return {};
-      const tokens = useMetaStore.getState().meta.tokens;
-      const connectedWallets = useWalletsStore.getState().connectedWallets;
-      const sortedTokens = getSortedTokens(chain, tokens, connectedWallets, 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 connectedWallets = useWalletsStore.getState().connectedWallets;
-      const sortedTokens = getSortedTokens(chain, tokens, connectedWallets, 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(0),
-        outputUsdValue: new BigNumber(0),
-        bestRoute: null,
-        error: ''
-      }),
-      ...(!!state.fromToken && {
-        inputUsdValue: getUsdValue(state.fromToken, amount)
-      })
-    }));
-  },
-  retry: pendingSwap => {
-    const {
-      tokens,
-      blockchains
-    } = useMetaStore.getState().meta;
-    const connectedWallets = useWalletsStore.getState().connectedWallets;
-    const failedIndex = pendingSwap.status === 'failed' ? pendingSwap.steps.findIndex(s => s.status === 'failed') : null;
-    if (failedIndex === null || failedIndex < 0) return;
-    const firstStep = pendingSwap.steps[0];
-    const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
-    const fromChain = blockchains.find(blockchain => blockchain.name === firstStep.fromBlockchain) || null;
-    const toChain = blockchains.find(blockchain => blockchain.name === lastStep.toBlockchain) || null;
-    const fromToken = tokens.find(token => tokensAreEqual(token, {
-      blockchain: firstStep.fromBlockchain,
-      symbol: firstStep.fromSymbol,
-      address: firstStep.fromSymbolAddress
-    }));
-    const toToken = tokens.find(token => tokensAreEqual(token, {
-      blockchain: lastStep.toBlockchain,
-      symbol: lastStep.toSymbol,
-      address: lastStep.toSymbolAddress
-    }));
-    const sortedSourceTokens = getSortedTokens(fromChain, tokens, connectedWallets, []);
-    const sortedDestinationTokens = getSortedTokens(toChain, tokens, connectedWallets, []);
-    const inputAmount = pendingSwap.inputAmount;
-    set({
-      fromChain,
-      fromToken,
-      inputAmount,
-      outputAmount: null,
-      inputUsdValue: getUsdValue(fromToken || null, inputAmount),
-      outputUsdValue: new BigNumber(0),
-      toChain,
-      toToken,
-      bestRoute: null,
-      loading: false,
-      error: '',
-      sourceTokens: sortedSourceTokens,
-      destinationTokens: sortedDestinationTokens
-    });
-  },
-  switchFromAndTo: () => set(state => ({
-    fromChain: state.toChain,
-    fromToken: state.toToken,
-    toChain: state.fromChain,
-    toToken: state.fromToken,
-    sourceTokens: state.destinationTokens,
-    destinationTokens: state.sourceTokens,
-    inputAmount: state.outputAmount?.toString() || '',
-    inputUsdValue: getUsdValue(state.toToken, state.outputAmount?.toString() || '')
-  }))
-}))));
-const bestRoute = (bestRouteStore, settingsStore) => {
-  let abortController = null;
-  const fetchBestRoute = () => {
-    const {
-      fromToken,
-      toToken,
-      inputAmount,
-      resetRoute
-    } = bestRouteStore.getState();
-    const {
-      slippage,
-      customSlippage,
-      disabledLiquiditySources,
-      affiliateRef
-    } = settingsStore.getState();
-    if (!fromToken || !toToken || !isPositiveNumber(inputAmount)) return;
-    abortController?.abort();
-    abortController = new AbortController();
-    const userSlippage = !!customSlippage ? customSlippage : slippage;
-    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, affiliateRef);
-    if (!bestRouteStore.getState().loading) {
-      resetRoute();
-    }
-    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
-      });
-    });
-  };
-  const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
-  const bestRouteParamsListener = () => {
-    const {
-      fromToken,
-      toToken,
-      inputAmount,
-      inputUsdValue,
-      resetRoute
-    } = useBestRouteStore.getState();
-    if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0)) return bestRouteStore.setState({
-      loading: false
-    });
-    if (tokensAreEqual(fromToken, toToken)) return bestRouteStore.setState({
-      loading: false,
-      bestRoute: null,
-      outputAmount: new BigNumber(inputAmount),
-      outputUsdValue: inputUsdValue
-    });
-    if (!bestRouteStore.getState().loading) resetRoute();
-    debouncedFetchBestRoute();
-  };
-  useBestRouteStore.subscribe(state => ({
-    fromChain: state.fromChain,
-    fromToken: state.fromToken,
-    toChain: state.toChain,
-    toToken: state.toToken,
-    inputAmount: state.inputAmount
-  }), bestRouteParamsListener, {
-    equalityFn: (prevState, currentState) => {
-      if (isRouteParametersChanged({
-        store: 'bestRoute',
-        prevState,
-        currentState
-      })) return false;else return true;
-    }
-  });
-  useSettingsStore.subscribe(state => ({
-    slippage: state.slippage,
-    customSlippage: state.customSlippage,
-    disabledLiquiditySources: state.disabledLiquiditySources,
-    infiniteApprove: state.infiniteApprove
-  }), bestRouteParamsListener, {
-    equalityFn: (prevState, currentState) => {
-      if (isRouteParametersChanged({
-        store: 'settings',
-        prevState,
-        currentState
-      })) 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 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',
-  swapDetails: 'swaps/:requestId'
-};
-
-const useUiStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
-  connectWalletsButtonDisabled: false,
-  selectedSwapRequestId: null,
-  currentPage: '',
-  toggleConnectWalletsButton: () => set(state => ({
-    connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled
-  })),
-  setSelectedSwap: requestId => set({
-    selectedSwapRequestId: requestId
-  }),
-  setCurrentPage: path => set({
-    currentPage: path
-  })
-})));
-
-function UpdateUrl() {
-  const firstRender = useRef(true);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const location = useLocation();
-  const firstRenderSearchParams = useRef(location.search);
-  const searchParamsRef = 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();
-  useEffect(() => {
-    const params = {};
-    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);
-  }, []);
-  useEffect(() => {
-    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] || inputAmount;
-      } 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, fromChain, fromToken, toChain, toToken]);
-  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;
-}
-
-function AppRouter(_ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
-  const isRouterInContext = useInRouterContext();
-  const Router = isRouterInContext ? Fragment : MemoryRouter;
-  const {
-    blockchains
-  } = useMetaStore.use.meta();
-  const evmChains = blockchains.filter(isEvmBlockchain);
-  useQueueManager({
-    lastConnectedWallet: props.lastConnectedWallet,
-    clearDisconnectedWallet: props.clearDisconnectedWallet,
-    disconnectedWallet: props.disconnectedWallet,
-    evmChains,
-    notifier: () => {}
-  });
-  return React.createElement(React.Fragment, null, React.createElement(Router, null, children), isRouterInContext && React.createElement(UpdateUrl, null));
-}
-
-function useNavigateBack() {
-  const isRouterInContext = useInRouterContext$1();
-  const navigate = useNavigate();
-  const navigateBackFrom = currentRoute => {
-    if (currentRoute === navigationRoutes.swapDetails) return navigate('/' + navigationRoutes.swaps, {
-      replace: true
-    });
-    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.confirmSwap].includes(currentRoute)) navigate(navigationRoutes.home, {
-        replace: true
-      });else if (currentRoute === navigationRoutes.liquiditySources) navigate('/' + navigationRoutes.settings, {
-        replace: true
-      });
-    }
-  };
-  return {
-    navigateBackFrom
-  };
-}
-
-const Box = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  overflow: 'hidden'
-});
-const Container = /*#__PURE__*/styled('div', {
-  boxSizing: 'border-box',
-  borderRadius: '$5',
-  padding: '$8 $16 $16 $16',
-  variants: {
-    type: {
-      filled: {
-        backgroundColor: '$neutral100'
-      },
-      outlined: {
-        border: '1px solid $neutral100'
-      }
-    }
-  },
-  defaultVariants: {
-    type: 'filled'
-  },
-  '.head': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: '32px',
-    '.usd-value': {
-      paddingLeft: '$8'
-    }
-  },
-  '.form': {
-    display: 'flex',
-    width: '100%',
-    padding: '$2 0',
-    '.selectors': {
-      width: '35%',
-      '._text': {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-      }
-    },
-    '.amount': {
-      width: '30%'
-    }
-  }
-});
-const ImagePlaceholder = /*#__PURE__*/styled('span', {
-  width: '24px',
-  height: '24px',
-  backgroundColor: '$neutral100',
-  borderRadius: '99999px'
-});
-const OutputContainer = /*#__PURE__*/styled('div', {
-  windth: '100%',
-  height: '$48',
-  borderRadius: '$5',
-  backgroundColor: '$surface',
-  border: '1px solid transparent',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '$8',
-  paddingRight: '$8'
-});
-function TokenPreview(props) {
-  const {
-    chain,
-    token,
-    loadingStatus,
-    percentageChange
-  } = props;
-  const {
-    t
-  } = useTranslation();
-  const ItemSuffix = React.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
-    color: "error",
-    size: 24
-  }));
-  return React.createElement(Box, null, React.createElement(Container, {
-    type: 'outlined'
-  }, React.createElement("div", {
-    className: "head"
-  }, React.createElement(Typography, {
-    variant: "body2",
-    color: "neutral800"
-  }, props.label), React.createElement("div", null, percentageChange, props.usdValue && React.createElement(Typography, {
-    variant: "caption",
-    color: "neutral600",
-    className: "usd-value"
-  }, `$${numberToString(props.usdValue)}`))), React.createElement("div", {
-    className: "form"
-  }, React.createElement(Button, {
-    className: "selectors",
-    variant: "outlined",
-    loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React.createElement(Image, {
-      src: chain.logo,
-      size: 24
-    }) : React.createElement(ImagePlaceholder, null),
-    suffix: ItemSuffix,
-    align: "start",
-    size: "large"
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
-    size: 12
-  }), React.createElement(Button, {
-    className: "selectors",
-    variant: "outlined",
-    loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && token ? React.createElement(Image, {
-      src: token.image,
-      size: 24
-    }) : React.createElement(ImagePlaceholder, null),
-    suffix: ItemSuffix,
-    size: "large",
-    align: "start"
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
-    size: 12
-  }), React.createElement("div", {
-    className: "amount"
-  }, React.createElement(OutputContainer, null, React.createElement(Typography, {
-    variant: "h4"
-  }, props.amount))))));
-}
-
-const Container$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '$8',
-  borderRadius: '$5',
-  backgroundColor: '$neutral100',
-  color: '$neutral800',
-  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.createElement(Container$1, null, React.createElement("div", {
-    className: "routes"
-  }, swaps?.map((swap, idx) => {
-    const isLast = idx + 1 == swaps.length;
-    return React.createElement(React.Fragment, {
-      key: idx
-    }, React.createElement("div", {
-      className: "route"
-    }, swap.from.symbol), React.createElement(ChevronRightIcon, {
-      size: 12
-    }), isLast ? React.createElement("div", {
-      className: "route"
-    }, swap.to.symbol) : null);
-  })), props.totalFee ? React.createElement("div", {
-    className: "fee"
-  }, React.createElement(GasIcon, {
-    size: 12
-  }), React.createElement(Spacer, {
-    size: 4
-  }), "$", props.totalFee) : null);
-}
-
-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["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
-})(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 = {}));
-
-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 affiliateRef = useSettingsStore.use.affiliateRef();
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  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 = useRef(false);
-  const confiremedRouteRef = useRef(null);
-  let abortControllerRef = useRef(null);
-  const [loading, setLoading] = useState(false);
-  const [errors, setErrors] = useState([]);
-  const [warnings, setWarnings] = useState([]);
-  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, connectedWallets, selectedWallets, disabledLiquiditySources, userSlippage, affiliateRef, initialRoute);
-    try {
-      const confiremedRoute = await httpService().getBestRoute(requestBody, {
-        signal: abortControllerRef.current?.signal
-      });
-      abortControllerRef.current = null;
-      setLoading(false);
-      if (!confiremedRoute.result || !new BigNumber(confiremedRoute.requestAmount).isEqualTo(new BigNumber(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(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.errors.push({
-        type: ConfirmSwapErrorTypes.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 ChangeSlippageButton() {
-  const navigate = useNavigate();
-  return React.createElement(Button, {
-    type: "primary",
-    variant: "outlined",
-    size: "small",
-    onClick: () => navigate('/' + navigationRoutes.settings)
-  }, "Change Slippage");
-}
-
-const StyledMessage = /*#__PURE__*/styled(Typography, {
-  color: '$error500 !important'
-});
-function MinRequiredSlippage(_ref) {
-  let {
-    minRequiredSlippage
-  } = _ref;
-  return React.createElement(StyledMessage, {
-    variant: "body2"
-  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React.createElement(Spacer, {
-    size: 8,
-    direction: "vertical"
-  }), React.createElement(ChangeSlippageButton, null));
-}
-
-const List = /*#__PURE__*/styled('ul', {
-  padding: 0,
-  margin: 0,
-  variants: {
-    showListStyle: {
-      true: {
-        paddingLeft: '$24'
-      }
-    }
-  }
-});
-const ListItem = /*#__PURE__*/styled('li', {
-  variants: {
-    showListStyle: {
-      true: {
-        listStyleType: 'disc',
-        listStylePosition: 'outside'
-      }
-    }
-  }
-});
-const Message = /*#__PURE__*/styled(Typography, {
-  display: 'block'
-});
-function BalanceErrors(_ref) {
-  let {
-    messages
-  } = _ref;
-  const showListStyle = messages.length > 1;
-  return React.createElement(React.Fragment, null, React.createElement(Typography, {
-    className: "title",
-    variant: "title",
-    color: 'error'
-  }, "Insufficent Balance:"), React.createElement(Spacer, {
-    size: 8,
-    direction: "vertical"
-  }), React.createElement(List, {
-    showListStyle: showListStyle
-  }, messages.map((warning, index) => React.createElement(ListItem, {
-    showListStyle: showListStyle,
-    key: index
-  }, React.createElement(Message, {
-    variant: "body2"
-  }, warning)))));
-}
-
-function ConfirmSwapErrors(errors) {
-  return errors.flatMap(error => {
-    switch (error.type) {
-      case ConfirmSwapErrorTypes.NO_ROUTE:
-        return 'No routes found. Please try again later.';
-      case ConfirmSwapErrorTypes.REQUEST_FAILED:
-        return `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`;
-      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-        return 'Route updated and price impact is too high, try again later!';
-      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
-        return React.createElement(MinRequiredSlippage, {
-          minRequiredSlippage: error.minRequiredSlippage
-        });
-      case ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE:
-        return React.createElement(BalanceErrors, {
-          messages: error.messages
-        });
-      default:
-        return [];
-    }
-  });
-}
-
-function ConfirmSwapWarnings(warnings) {
-  return warnings.flatMap(warning => {
-    switch (warning.type) {
-      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
-        return "Route has been updated.";
-      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
-        return `Output amount changed to ${warning.newOutputAmount} (${warning.percentageChange}% change).`;
-      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
-        return "Route swappers has been updated.";
-      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
-        return "Route internal coins has been updated.";
-      default:
-        return [];
-    }
-  });
-}
-
-function HighSlippageWarning(props) {
-  const {
-    selectedSlippage
-  } = props;
-  return React.createElement(Alert, {
-    type: "warning",
-    footer: React.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.createElement(React.Fragment, null, highSlippage && React.createElement(HighSlippageWarning, {
-    selectedSlippage: selectedSlippage
-  }));
-}
-
-function PercentageChange(props) {
-  const {
-    inputUsdValue,
-    outputUsdValue
-  } = props;
-  if (!inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)) return null;
-  const percentageChange = getPercentageChange(inputUsdValue.toNumber(), outputUsdValue.toNumber());
-  const showPercentageChange = percentageChange?.lt(0);
-  return React.createElement(React.Fragment, null, showPercentageChange && React.createElement(Typography, {
-    variant: "caption",
-    color: "$error500"
-  }, `(${numberToString(percentageChange, 0, 2)}%)`));
-}
-
-function ConfirmSwapPage() {
-  const navigate = useNavigate();
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-  const fetchingBestRoute = useBestRouteStore.use.loading();
-  const fetchingBestRouteError = useBestRouteStore.use.error();
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const {
-    blockchains,
-    tokens
-  } = useMetaStore.use.meta();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const selectedWallets = useWalletsStore.use.selectedWallets();
-  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
-  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
-  const slippage = useSettingsStore.use.slippage();
-  const customSlippage = useSettingsStore.use.customSlippage();
-  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
-  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
-  const [dbErrorMessage, setDbErrorMessage] = useState('');
-  const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
-  const {
-    manager
-  } = useManager();
-  const {
-    loading: fetchingConfirmedRoute,
-    errors,
-    warnings,
-    confirmSwap
-  } = useConfirmSwap();
-  const selectedSlippage = customSlippage || slippage;
-  const showHighSlippageWarning = !errors.find(error => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE);
-  const {
-    getWalletInfo,
-    connect
-  } = useWallets();
-  const confirmDisabled = fetchingBestRoute || !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 = numberToString(firstStep?.fromAmount, 4, 6);
-  const toAmount = numberToString(lastStep?.toAmount, 4, 6);
-  useEffect(() => {
-    initSelectedWallets();
-  }, []);
-  const selectableWallets = getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo);
-  const handleConnectChain = wallet => {
-    const network = wallet;
-    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
-  };
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-  return React.createElement(ConfirmSwap, {
-    requiredWallets: getRequiredChains(bestRoute),
-    selectableWallets: selectableWallets,
-    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
-    onConfirm: async () => {
-      confirmSwap?.().then(async swap => {
-        if (swap) {
-          try {
-            await manager?.create('swap', {
-              swapDetails: swap
-            }, {
-              id: swap.requestId
-            });
-            setSelectedSwap(swap.requestId);
-            navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
-              replace: true
-            });
-            setTimeout(() => {
-              setInputAmount('');
-            }, 0);
-          } catch (e) {
-            setDbErrorMessage('Error: ' + e?.message);
-          }
-        }
-      });
-    },
-    onChange: wallet => setSelectedWallet(wallet),
-    confirmDisabled: loadingMetaStatus !== 'success' || confirmDisabled,
-    handleConnectChain: wallet => handleConnectChain(wallet),
-    isExperimentalChain: wallet => getKeplrCompatibleConnectedWallets(selectableWallets).length > 0 ? isExperimentalChain(blockchains, wallet) : false,
-    previewInputs: React.createElement(React.Fragment, null, React.createElement(TokenPreview, {
-      chain: {
-        displayName: firstStep?.from.blockchain || '',
-        logo: firstStep?.from.blockchainLogo || ''
-      },
-      token: {
-        symbol: firstStep?.from.symbol || '',
-        image: firstStep?.from.logo || ''
-      },
-      usdValue: inputUsdValue,
-      amount: fromAmount,
-      label: t('From'),
-      loadingStatus: loadingMetaStatus !== 'success' ? loadingMetaStatus : bestRouteloadingStatus
-    }), React.createElement(Spacer, {
-      size: 12,
-      direction: "vertical"
-    }), React.createElement(TokenPreview, {
-      chain: {
-        displayName: lastStep?.to.blockchain || '',
-        logo: lastStep?.to.blockchainLogo || ''
-      },
-      token: {
-        symbol: lastStep?.to.symbol || '',
-        image: lastStep?.to.logo || ''
-      },
-      usdValue: outputUsdValue,
-      amount: toAmount,
-      label: t('To'),
-      loadingStatus: loadingMetaStatus !== 'success' ? loadingMetaStatus : bestRouteloadingStatus,
-      percentageChange: React.createElement(PercentageChange, {
-        inputUsdValue: inputUsdValue,
-        outputUsdValue: outputUsdValue
-      })
-    })),
-    previewRoutes: React.createElement(RoutesOverview, {
-      routes: bestRoute,
-      totalFee: numberToString(totalFeeInUsd, 0, 2)
-    }),
-    loading: fetchingConfirmedRoute,
-    errors: dbErrorMessage ? [dbErrorMessage, ...ConfirmSwapErrors(errors)] : ConfirmSwapErrors(errors),
-    warnings: ConfirmSwapWarnings(warnings),
-    extraMessages: React.createElement(React.Fragment, null, loadingMetaStatus === 'failed' && React.createElement(LoadingFailedAlert, null), loadingMetaStatus === 'failed' && showHighSlippageWarning && React.createElement(Spacer, {
-      direction: "vertical"
-    }), showHighSlippageWarning && React.createElement(ConfirmSwapExtraMessages, {
-      selectedSlippage: selectedSlippage
-    })),
-    confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!'
-  });
-}
-
-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));
-};
-
-const groupSwapsByDate = swaps => {
-  const output = new Map([['today', {
-    title: 'Today',
-    swaps: []
-  }], ['week', {
-    title: 'This week',
-    swaps: []
-  }], ['month', {
-    title: 'This month',
-    swaps: []
-  }], ['year', {
-    title: 'This year',
-    swaps: []
-  }], ['history', {
-    title: 'History',
-    swaps: []
-  }]]);
-  const now = dayjs();
-  swaps.forEach(swap => {
-    const swapDate = dayjs(Number(swap.creationTime));
-    if (now.isSame(swapDate, 'day')) output.get('today')?.swaps.push(swap);else if (now.isSame(swapDate, 'week')) output.get('week')?.swaps.push(swap);else if (now.isSame(swapDate, 'month')) output.get('month')?.swaps.push(swap);else if (now.isSame(swapDate, 'year')) output.get('year')?.swaps.push(swap);else output.get('history')?.swaps.push(swap);
-  });
-  return Array.from(output.values());
-};
-
-function HistoryPage() {
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const navigate = useNavigate();
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const {
-    manager,
-    state
-  } = useManager();
-  const pendingSwaps = getPendingSwaps(manager).map(_ref => {
-    let {
-      swap
-    } = _ref;
-    return swap;
-  });
-  const loading = !state.loadedFromPersistor;
-  return React.createElement(History, {
-    list: pendingSwaps,
-    groupBy: groupSwapsByDate,
-    loading: loading,
-    onSwapClick: requestId => {
-      setSelectedSwap(requestId);
-      navigate(`${requestId}`, {
-        replace: true
-      });
-    },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.swaps)
-  });
-}
-
-const Box$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  overflow: 'hidden'
-});
-const Container$2 = /*#__PURE__*/styled('div', {
-  boxSizing: 'border-box',
-  borderRadius: '$5',
-  padding: '$8 $16 $16 $16',
-  variants: {
-    type: {
-      filled: {
-        backgroundColor: '$neutral100'
-      },
-      outlined: {
-        border: '1px solid $neutral100',
-        backgroundColor: '$surface'
-      }
-    }
-  },
-  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%'
-    }
-  },
-  '.output-usd': {
-    display: 'flex',
-    div: {
-      display: 'flex',
-      paddingLeft: '$8'
-    }
-  }
-});
-const Options = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'flex-end',
-  '.balance': {
-    display: 'flex',
-    alignItems: 'center'
-  }
-});
-const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
-  width: '24px',
-  height: '24px',
-  backgroundColor: '$neutral100',
-  borderRadius: '99999px'
-});
-const OutputContainer$1 = /*#__PURE__*/styled('div', {
-  windth: '100%',
-  height: '$48',
-  borderRadius: '$5',
-  backgroundColor: '$surface',
-  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 connectedWallets = useWalletsStore.use.connectedWallets();
-  const fetchingBestRoute = useBestRouteStore.use.loading();
-  const navigate = useNavigate();
-  const {
-    t
-  } = useTranslation();
-  const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(connectedWallets, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
-  const tokenBalanceReal = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(connectedWallets, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', getBalanceFromWallet(connectedWallets, fromChain?.name, fromToken?.symbol, fromToken?.address)?.decimal) : '0';
-  const ItemSuffix = React.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
-    color: "error",
-    size: 24
-  }), React.createElement(AngleDownIcon, null));
-  return React.createElement(Box$1, null, React.createElement(Container$2, {
-    type: props.type === 'From' ? 'filled' : 'outlined'
-  }, React.createElement("div", {
-    className: "head"
-  }, React.createElement(Typography, {
-    variant: "body2",
-    color: "neutral800"
-  }, t(type)), props.type === 'From' ? React.createElement(Options, null, React.createElement("div", {
-    className: "balance",
-    onClick: () => {
-      if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
-    }
-  }, React.createElement(Typography, {
-    variant: "body3",
-    color: "neutral600"
-  }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React.createElement(Spacer, {
-    size: 4
-  }), React.createElement(Button, {
-    type: "primary",
-    variant: "ghost",
-    size: "compact"
-  }, t('Max')))) : React.createElement("div", {
-    className: "output-usd"
-  }, React.createElement(PercentageChange, {
-    inputUsdValue: inputUsdValue,
-    outputUsdValue: props.outputUsdValue
-  }), React.createElement("div", null, React.createElement(Typography, {
-    variant: "caption",
-    color: "neutral600"
-  }, `$${numberToString(props.outputUsdValue)}`)))), React.createElement("div", {
-    className: "form"
-  }, React.createElement(Button, {
-    className: "selectors",
-    onClick: () => {
-      navigate(`${props.type.toLowerCase()}-chain`);
-    },
-    variant: "outlined",
-    disabled: loadingStatus === 'failed',
-    loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React.createElement(Image, {
-      src: chain.logo,
-      size: 24
-    }) : React.createElement(ImagePlaceholder$1, null),
-    suffix: ItemSuffix,
-    align: "start",
-    size: "large"
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
-    size: 12
-  }), React.createElement(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.createElement(Image, {
-      src: token.image,
-      size: 24
-    }) : React.createElement(ImagePlaceholder$1, null),
-    suffix: ItemSuffix,
-    size: "large",
-    align: "start"
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
-    size: 12
-  }), React.createElement("div", {
-    className: "amount"
-  }, props.type === 'From' ? React.createElement(TextField, {
-    type: "number",
-    size: "large",
-    autoFocus: true,
-    placeholder: "0",
-    style: {
-      position: 'relative',
-      backgroundColor: '$background !important'
-    },
-    suffix: React.createElement("span", {
-      style: {
-        position: 'absolute',
-        right: '4px',
-        bottom: '2px'
-      }
-    }, React.createElement(Typography, {
-      variant: "caption",
-      color: "neutral800"
-    }, `$${numberToString(inputUsdValue)}`)),
-    value: props.inputAmount || '',
-    min: 0,
-    onChange: props.type === 'From' ? event => {
-      props.onAmountChange(event.target.value);
-    } : undefined
-  }) : React.createElement(OutputContainer$1, null, React.createElement(Typography, {
-    variant: "h4"
-  }, fetchingBestRoute && '?', !!bestRoute?.result && `≈ ${numberToString(props.outputAmount)}`, (!inputAmount || inputAmount === '0') && '0'))))));
-}
-
-const Container$3 = /*#__PURE__*/styled$1('div', {
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'end',
-  alignItems: 'center',
-  paddingTop: '$16'
-});
-const Logo = /*#__PURE__*/styled$1('svg', {
-  fill: '$foreground',
-  width: '$24',
-  margin: '0 $8 0 $16'
-});
-const StyledAnchor = /*#__PURE__*/styled$1('a', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  textDecoration: 'none'
-});
-function BottomLogo() {
-  const {
-    t
-  } = useTranslation();
-  return React.createElement(Container$3, null, React.createElement(Typography, {
-    variant: "caption",
-    color: "$neutral600"
-  }, t('Powered By')), React.createElement(StyledAnchor, {
-    href: "https://rango.exchange",
-    target: "_blank"
-  }, React.createElement(Logo, {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 33.68 29"
-  }, React.createElement("defs", null), React.createElement("g", {
-    id: "Layer_2",
-    "data-name": "Layer 2"
-  }, React.createElement("g", {
-    id: "Layer_1-2",
-    "data-name": "Layer 1"
-  }, React.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.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.createElement(Typography, {
-    variant: "body2"
-  }, "RANGO")));
-}
-
-function SwithFromAndTo(_ref) {
-  let {
-    count
-  } = _ref;
-  const firstRender = useRef(true);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const outputAmount = useBestRouteStore.use.outputAmount();
-  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__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  paddingTop: '$16'
-});
-
-const errorMessages = {
-  genericServerError: 'Error connecting server, please reload the app and try again'
-};
-
-const ButtonsContainer = /*#__PURE__*/styled('div', {
-  display: 'flex'
-});
-function HeaderButtons(props) {
-  const {
-    onClickRefresh
-  } = props;
-  const navigate = useNavigate();
-  return React.createElement(ButtonsContainer, null, React.createElement(Tooltip, {
-    content: "Refresh"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: onClickRefresh,
-    disabled: !onClickRefresh
-  }, React.createElement(RetryIcon, {
-    size: 24,
-    disabled: !onClickRefresh
-  }))), React.createElement(Tooltip, {
-    content: "Transactions History"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.swaps)
-  }, React.createElement(HistoryIcon, {
-    size: 24
-  }))), React.createElement(Tooltip, {
-    content: "Settings"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.settings)
-  }, React.createElement(SettingsIcon, {
-    size: 24
-  }))));
-}
-
-const Container$4 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column'
-});
-const FromContainer = /*#__PURE__*/styled('div', {
-  position: 'relative',
-  paddingBottom: '$12'
-});
-const SwitchButtonContainer = /*#__PURE__*/styled('div', {
-  position: 'absolute',
-  bottom: '-12px',
-  left: '50%',
-  transform: 'translate(-50%, 10%)'
-});
-const BestRouteContainer = /*#__PURE__*/styled('div', {
-  width: '100%',
-  paddingTop: '$16'
-});
-const Alerts = /*#__PURE__*/styled('div', {
-  width: '100%',
-  paddingTop: '$16'
-});
-function Home() {
-  const isRouterInContext = useInRouterContext$1();
-  const navigate = useNavigate();
-  const [count, setCount] = useState(0);
-  const fromChain = useBestRouteStore.use.fromChain();
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toChain = useBestRouteStore.use.toChain();
-  const toToken = useBestRouteStore.use.toToken();
-  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 connectedWallets = useWalletsStore.use.connectedWallets();
-  const setCurrentPage = useUiStore.use.setCurrentPage();
-  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
-  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 swapButtonState = getSwapButtonState(loadingMetaStatus, connectedWallets, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount);
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-  const highFee = hasHighFee(totalFeeInUsd);
-  useEffect(() => {
-    setCurrentPage(navigationRoutes.home);
-    return setCurrentPage.bind(null, '');
-  }, []);
-  return React.createElement(Container$4, null, React.createElement(Header$1, {
-    title: "SWAP",
-    suffix: React.createElement(HeaderButtons, {
-      onClickRefresh: !!bestRoute || bestRouteError ? fetchBestRoute : undefined
-    })
-  }), React.createElement(FromContainer, null, React.createElement(TokenInfo, {
-    type: "From",
-    chain: fromChain,
-    token: fromToken,
-    onAmountChange: setInputAmount,
-    inputAmount: inputAmount
-  }), React.createElement(SwitchButtonContainer, null, React.createElement(Button, {
-    variant: "ghost",
-    onClick: () => {
-      switchFromAndTo();
-      setCount(prev => prev + 1);
-    }
-  }, React.createElement(VerticalSwapIcon, {
-    size: 32
-  }), isRouterInContext && React.createElement(SwithFromAndTo, {
-    count: count
-  })))), React.createElement(TokenInfo, {
-    type: "To",
-    chain: toChain,
-    token: toToken,
-    outputAmount: outputAmount ? new BigNumber(outputAmount) : new BigNumber(0),
-    outputUsdValue: outputUsdValue
-  }), showBestRoute && React.createElement(BestRouteContainer, null, React.createElement(BestRoute, {
-    error: bestRouteError,
-    loading: fetchingBestRoute,
-    data: getFormatedBestRoute(bestRoute),
-    totalFee: numberToString(totalFeeInUsd, 0, 2),
-    feeWarning: highFee,
-    totalTime: secondsToString(totalArrivalTime(bestRoute))
-  })), (errorMessage || hasLimitError(bestRoute)) && React.createElement(Alerts, null, errorMessage && React.createElement(Alert, {
-    type: "error"
-  }, errorMessage), hasLimitError(bestRoute) && React.createElement(Alert, {
-    type: "error",
-    title: `${swap?.swapperId} Limit`
-  }, React.createElement(React.Fragment, null, React.createElement(Typography, {
-    variant: "body2"
-  }, `${fromAmountRangeError}, Yours: ${numberToString(swap?.fromAmount || null)} ${swap?.from.symbol}`), React.createElement(Typography, {
-    variant: "body2"
-  }, recommendation)))), React.createElement(Footer, null, React.createElement(Button, {
-    type: "primary",
-    align: "grow",
-    size: "large",
-    disabled: swapButtonState.disabled,
-    onClick: () => {
-      if (swapButtonState.title === 'Connect Wallet') navigate(navigationRoutes.wallets);else {
-        navigate(navigationRoutes.confirmSwap, {
-          replace: true
-        });
-      }
-    }
-  }, swapButtonState.title), React.createElement(BottomLogo, null)));
-}
-
-function LiquiditySourcePage(_ref) {
-  let {
-    supportedSwappers
-  } = _ref;
-  const swappers = useMetaStore.use.meta().swappers;
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  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.createElement(LiquiditySourcesSelector, {
-    toggleAll: toggleAllLiquiditySources,
-    list: supportedSwappers ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s === item.title).length > 0) : uniqueSwappersGroups,
-    onChange: liquiditySource => toggleLiquiditySource(liquiditySource.title),
-    onBack: navigateBackFrom.bind(null, navigationRoutes.liquiditySources),
-    loadingStatus: loadingMetaStatus
-  });
-}
-
-function SelectChainPage(props) {
-  const {
-    type,
-    supportedChains
-  } = props;
-  const blockchains = supportedChains ? useMetaStore.use.meta().blockchains.filter(chain => supportedChains.includes(chain.name)) : useMetaStore.use.meta().blockchains;
-  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.createElement(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 ? sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token))) : sourceTokens;
-  const supportedDestinationTokens = supportedTokens ? destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token))) : destinationTokens;
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toToken = useBestRouteStore.use.toToken();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToToken = useBestRouteStore.use.setToToken();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  return React.createElement(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),
-    loadingStatus: loadingMetaStatus
-  });
-}
-
-function SettingsPage(_ref) {
-  let {
-    supportedSwappers,
-    singleTheme
-  } = _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 = useNavigate();
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const infiniteApprove = useSettingsStore.use.infiniteApprove();
-  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  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 && uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s === item.title).length > 0);
-  const supportedUniqueSwappersGroups = supportedSwappers ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s === item.title).length > 0) : uniqueSwappersGroups;
-  return React.createElement(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),
-    singleTheme: singleTheme,
-    customSlippage: customSlippage,
-    onCustomSlippageChange: setCustomSlippage,
-    minSlippage: MIN_SLIPPGAE,
-    maxSlippage: MAX_SLIPPAGE,
-    selectedTheme: theme,
-    onThemeChange: setTheme,
-    infiniteApprove: infiniteApprove,
-    toggleInfiniteApprove: toggleInfiniteApprove,
-    loadingStatus: loadingMetaStatus
-  });
-}
-
-const ListContainer = /*#__PURE__*/styled('div', {
-  display: 'grid',
-  gap: '.5rem',
-  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
-  alignContent: 'baseline',
-  padding: '0.5rem',
-  overflowY: 'auto'
-});
-const LoaderContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  width: '100%',
-  position: 'absolute',
-  top: '50%'
-});
-const AlertContainer = /*#__PURE__*/styled('div', {
-  paddingBottom: '$16'
-});
-function WalletsPage(_ref) {
-  let {
-    supportedWallets,
-    multiWallets
-  } = _ref;
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const {
-    state,
-    disconnect,
-    getWalletInfo,
-    connect
-  } = useWallets();
-  const wallets = getlistWallet(state, getWalletInfo, supportedWallets || Object.values(WalletType));
-  const walletsRef = useRef();
-  let sortedWallets = detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
-  sortedWallets = sortWalletsBasedOnState(sortedWallets);
-  const [walletErrorMessage, setWalletErrorMessage] = useState('');
-  const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const {
-    t
-  } = 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 === WalletState.CONNECTED)) {
-          return;
-        }
-        await connect(type);
-      }
-    } catch (e) {
-      setWalletErrorMessage('Error: ' + e?.message);
-    }
-  };
-  const disconnectConnectingWallets = () => {
-    const connectingWallets = walletsRef.current?.filter(wallet => wallet.state === WalletState.CONNECTING) || [];
-    for (const wallet of connectingWallets) {
-      disconnect(wallet.type);
-    }
-  };
-  useEffect(() => {
-    toggleConnectWalletsButton();
-    return () => {
-      disconnectConnectingWallets();
-      toggleConnectWalletsButton();
-    };
-  }, []);
-  useEffect(() => {
-    walletsRef.current = wallets;
-  }, [wallets]);
-  return React.createElement(SecondaryPage, {
-    title: t('Select Wallet') || '',
-    textField: false,
-    onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
-  }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
-    type: "error",
-    title: walletErrorMessage
-  })), loadingMetaStatus === 'loading' && React.createElement(LoaderContainer, {
-    className: "loader"
-  }, React.createElement(Spinner, {
-    size: 24
-  })), loadingMetaStatus === 'failed' && React.createElement(LoadingFailedAlert, null), React.createElement(ListContainer, null, loadingMetaStatus === 'success' && sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
-    key: `${index}-${wallet.type}`,
-    onClick: onSelectWallet
-  }))))));
-}
-
-function timeSince(timeMillis) {
-  const seconds = Math.floor((new Date().getTime() - timeMillis) / 1000);
-  let intervalType;
-  let interval = Math.floor(seconds / 31536000);
-  if (interval >= 1) {
-    intervalType = 'year';
-  } else {
-    interval = Math.floor(seconds / 2592000);
-    if (interval >= 1) {
-      intervalType = 'month';
-    } else {
-      interval = Math.floor(seconds / 86400);
-      if (interval >= 1) {
-        intervalType = 'day';
-      } else {
-        interval = Math.floor(seconds / 3600);
-        if (interval >= 1) {
-          intervalType = 'hour';
-        } else {
-          interval = Math.floor(seconds / 60);
-          if (interval >= 1) {
-            intervalType = 'minute';
-          } else {
-            interval = seconds;
-            intervalType = 'second';
-          }
-        }
-      }
-    }
-  }
-  if (interval > 1 || interval === 0) {
-    intervalType += 's';
-  }
-  return interval + ' ' + intervalType;
-}
-function getSwapDate(pendingSwap) {
-  return pendingSwap.finishTime ? `${timeSince(parseInt(pendingSwap.finishTime))} ago` : `${timeSince(parseInt(pendingSwap.creationTime))} ago`;
-}
-
-const PlaceholderContainer = /*#__PURE__*/styled('div', {
-  height: '450px'
-});
-const LoaderContainer$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  width: '100%',
-  paddingTop: '33%',
-  flex: 1
-});
-function SwapDetailsPlaceholder(props) {
-  const {
-    requestId,
-    loading,
-    onBack
-  } = props;
-  return React.createElement(SecondaryPage, {
-    title: "Swap Details",
-    textField: false,
-    onBack: onBack
-  }, React.createElement(PlaceholderContainer, null, loading ? React.createElement(LoaderContainer$1, null, React.createElement(Spinner, {
-    size: 24
-  })) : React.createElement(Alert, {
-    type: "secondary",
-    title: `Swap with request ID = ${requestId} not found.`
-  })));
-}
-
-function SwapDetailsPage() {
-  const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
-  const {
-    canSwitchNetworkTo,
-    connect
-  } = useWallets();
-  const retry = useBestRouteStore.use.retry();
-  const navigate = useNavigate();
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const [isCopied, handleCopy] = useCopyToClipboard(2000);
-  const {
-    manager,
-    state
-  } = useManager();
-  const pendingSwaps = getPendingSwaps(manager);
-  const selectedSwap = pendingSwaps.find(_ref => {
-    let {
-      swap
-    } = _ref;
-    return swap.requestId === selectedSwapRequestId;
-  });
-  const onCancel = () => {
-    const swap = manager?.get(selectedSwap?.id);
-    if (swap) cancelSwap(swap);
-  };
-  const swap = selectedSwap?.swap;
-  const loading = !state.loadedFromPersistor;
-  if (!swap) return React.createElement(SwapDetailsPlaceholder, {
-    requestId: selectedSwapRequestId || '',
-    loading: loading,
-    onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails)
-  });
-  const currentStep = getCurrentStep(swap);
-  const currentStepBlockchain = currentStep ? getCurrentBlockchainOfOrNull(swap, currentStep) : null;
-  const currentStepWallet = currentStep ? getRelatedWalletOrNull(swap, currentStep) : null;
-  const currentStepNetworkStatus = currentStep?.networkStatus;
-  const swapMessages = getSwapMessages(swap, currentStep);
-  const networkWarningState = isNetworkStatusInWarningState(currentStep);
-  const swapDate = getSwapDate(swap);
-  const shouldRetry = shouldRetrySwap(swap);
-  const switchNetwork = !!currentStepBlockchain && !!currentStepWallet?.walletType && currentStepNetworkStatus === PendingSwapNetworkStatus.WaitingForNetworkChange && canSwitchNetworkTo(currentStepWallet?.walletType, currentStepBlockchain) ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain) : undefined;
-  const lastConvertedTokenInFailedSwap = getLastConvertedTokenInFailedSwap(swap);
-  return React.createElement(SwapHistory, Object.assign({
-    onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
-    /* TODO: It was temporarily removed to find a better solution*/
-    /*
-    previewInputs={
-      <>
-        <TokenPreview
-          chain={{
-            displayName: firstStep?.fromBlockchain || '',
-            logo: firstStep?.fromBlockchainLogo || '',
-          }}
-          token={{
-            symbol: firstStep?.fromSymbol || '',
-            image: firstStep?.fromLogo || '',
-          }}
-          amount={fromAmount}
-          label={t('From')}
-          loadingStatus={'success'}
-        />
-        <Spacer size={12} direction="vertical" />
-        <TokenPreview
-          chain={{
-            displayName: lastStep?.toBlockchain || '',
-            logo: lastStep?.toBlockchainLogo || '',
-          }}
-          token={{
-            symbol: lastStep?.toSymbol || '',
-            image: lastStep?.toLogo || '',
-          }}
-          amount={toAmount}
-          label={t('To')}
-          loadingStatus={'success'}
-        />
-      </>
-    }
-    */
-    pendingSwap: getFormatedPendingSwap(swap),
-    onCopy: handleCopy,
-    isCopied: isCopied,
-    onCancel: onCancel,
-    shortMessage: swapMessages.shortMessage,
-    detailedMessage: swapMessages.detailedMessage,
-    currentStepBlockchain: currentStepBlockchain || '',
-    switchNetwork: switchNetwork,
-    type: networkWarningState ? 'warning' : swap.extraMessageSeverity || undefined,
-    date: swapDate
-  }, shouldRetry && {
-    onRetry: () => {
-      retry(swap);
-      setTimeout(() => {
-        navigate(navigationRoutes.home);
-      }, 0);
-    }
-  }, lastConvertedTokenInFailedSwap && {
-    lastConvertedTokenInFailedSwap: {
-      blockchain: lastConvertedTokenInFailedSwap.blockchain,
-      outputAmount: lastConvertedTokenInFailedSwap.outputAmount || '',
-      symbol: lastConvertedTokenInFailedSwap.symbol
-    }
-  }));
-}
-
-const getAbsolutePath = path => path.replace('/', '');
-function AppRoutes(props) {
-  const {
-    config
-  } = props;
-  return useRoutes([{
-    path: navigationRoutes.home,
-    element: React.createElement(Home, null)
-  }, {
-    path: navigationRoutes.fromChain,
-    element: React.createElement(SelectChainPage, {
-      type: "from",
-      supportedChains: config?.from?.blockchains
-    })
-  }, {
-    path: navigationRoutes.toChain,
-    element: React.createElement(SelectChainPage, {
-      type: "to",
-      supportedChains: config?.to?.blockchains
-    })
-  }, {
-    path: navigationRoutes.fromToken,
-    element: React.createElement(SelectTokenPage, {
-      type: "from",
-      supportedTokens: config?.from?.tokens
-    })
-  }, {
-    path: navigationRoutes.toToken,
-    element: React.createElement(SelectTokenPage, {
-      type: "to",
-      supportedTokens: config?.to?.tokens
-    })
-  }, {
-    path: navigationRoutes.settings,
-    element: React.createElement(SettingsPage, {
-      singleTheme: config?.theme?.singleTheme,
-      supportedSwappers: config?.liquiditySources
-    })
-  }, {
-    path: navigationRoutes.liquiditySources,
-    element: React.createElement(LiquiditySourcePage, {
-      supportedSwappers: config?.liquiditySources
-    })
-  }, {
-    path: navigationRoutes.swaps,
-    element: React.createElement(HistoryPage, null)
-  }, {
-    path: navigationRoutes.swapDetails,
-    element: React.createElement(SwapDetailsPage, null)
-  }, {
-    path: navigationRoutes.wallets,
-    element: React.createElement(WalletsPage, {
-      supportedWallets: config?.wallets,
-      multiWallets: typeof config?.multiWallets === 'undefined' ? true : config.multiWallets
-    })
-  }, {
-    path: getAbsolutePath(navigationRoutes.confirmSwap),
-    element: React.createElement(ConfirmSwapPage, null)
-  }]);
-}
-
-const Header = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'end',
-  '.balance': {
-    display: 'flex'
-  }
-});
-const WalletImageContainer = /*#__PURE__*/styled('div', {
-  marginLeft: -15,
-  marginRight: '$6',
-  '& img': {
-    borderRadius: '50%'
-  }
-});
-function Layout(_ref) {
-  let {
-    config
-  } = _ref;
-  const navigate = useNavigate();
-  const {
-    connectedWallets,
-    selectedWallets
-  } = useWalletsStore();
-  const {
-    getWalletInfo
-  } = useWallets();
-  const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo).map(w => w.image));
-  const {
-    blockchains,
-    tokens
-  } = useMetaStore.use.meta();
-  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 setAffiliateRef = useSettingsStore.use.setAffiliateRef();
-  const totalBalance = calculateWalletUsdValue(connectedWallets);
-  const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
-  const {
-    t
-  } = useTranslation();
-  useEffect(() => {
-    if (loadingMetaStatus === 'success') {
-      const chain = blockchains.find(chain => chain.name === config?.to?.blockchain);
-      const token = tokens.find(t => tokensAreEqual(t, config?.to?.token || null));
-      setToChain(chain || null);
-      setToToken(token || null);
-    }
-  }, [config?.to?.token, config?.to?.blockchain, loadingMetaStatus]);
-  useEffect(() => {
-    setInputAmount(config?.amount?.toString() || '');
-  }, [config?.amount]);
-  useEffect(() => {
-    if (loadingMetaStatus === 'success') {
-      const chain = blockchains.find(chain => chain.name === config?.from?.blockchain);
-      const token = tokens.find(t => tokensAreEqual(t, config?.from?.token || null));
-      setFromChain(chain || null);
-      setFromToken(token || null);
-    }
-  }, [config?.from?.token, config?.from?.blockchain, loadingMetaStatus]);
-  useEffect(() => {
-    setAffiliateRef(config?.affiliateRef || null);
-  }, [config?.affiliateRef]);
-  return React.createElement(React.Fragment, null, React.createElement(Header, null, React.createElement(Button, {
-    size: "small",
-    suffix: React.createElement(AddWalletIcon, {
-      size: 20
-    }),
-    variant: "ghost",
-    flexContent: true,
-    loading: loadingMetaStatus === 'loading',
-    disabled: loadingMetaStatus === 'failed',
-    onClick: () => {
-      if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
-    }
-  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React.createElement(WalletImageContainer, {
-    key: index
-  }, React.createElement(Image, {
-    src: walletImage,
-    size: 24
-  }))) : React.createElement(React.Fragment, null), React.createElement("div", {
-    className: "balance"
-  }, React.createElement(Typography, {
-    variant: "body2"
-  }, !connectedWallets?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React.createElement(Spinner, null)))), React.createElement(AppRoutes, {
-    config: config
-  }));
-}
-
-const globalFont = fontFamily => globalCss({
-  '@import': ["url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')", "url('https://fonts.cdnfonts.com/css/times-new-roman')"],
-  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 = useRef();
-  // Store current value in ref
-  useEffect(() => {
-    ref.current = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-  return ref.current;
-}
-
-function useTheme(_ref) {
-  let {
-    colors: themeColors,
-    fontFamily = 'Roboto',
-    borderRadius = 8,
-    mode = 'auto'
-  } = _ref;
-  const theme = useSettingsStore.use.theme();
-  const fetchMeta = useMetaStore.use.fetchMeta();
-  const setTheme = useSettingsStore.use.setTheme();
-  const light = themeColors?.light;
-  const dark = themeColors?.dark;
-  const neutral = light?.neutral || '#fafafa';
-  const background = light?.background || '#fff';
-  const foreground = light?.foreground || '#000';
-  const darkColors = {
-    ...generateRangeColors('primary', 'dark', dark?.primary),
-    ...generateRangeColors('error', 'dark', dark?.error),
-    ...generateRangeColors('warning', 'dark', dark?.warning),
-    ...generateRangeColors('success', 'dark', dark?.success),
-    ...generateRangeColors('neutral', 'dark', dark?.neutral),
-    surface: dark?.surface,
-    background: dark?.background,
-    foreground: dark?.foreground
-  };
-  const lightColors = {
-    surface: light?.surface || '#fff',
-    ...generateRangeColors('primary', 'light', light?.primary || '#5FA425'),
-    ...generateRangeColors('error', 'light', light?.error || '#FF0000'),
-    ...generateRangeColors('warning', 'light', light?.warning || '#F5A623'),
-    ...generateRangeColors('success', 'light', light?.success || '#0070F3'),
-    ...generateRangeColors('neutral', 'light', neutral),
-    background,
-    foreground
-  };
-  const customLightTheme = createTheme({
-    colors: lightColors,
-    radii: {
-      5: `${borderRadius}px`
-    },
-    shadows: {
-      s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${light?.neutral || '#f0f2f5'}, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`
-    }
-  });
-  const customDarkTheme = createTheme({
-    colors: {
-      ...lightColors,
-      ...generateRangeColors('neutral', 'dark', '#111111'),
-      foreground: background,
-      background: foreground,
-      surface: '#000',
-      ...JSON.parse(JSON.stringify(darkColors))
-    },
-    radii: {
-      5: `${borderRadius}px`
-    },
-    shadows: {
-      s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${dark?.neutral || '#222'}, 0px 1px 18px 3px ${dark?.neutral || '#222'}`
-    }
-  });
-  const [OSTheme, setOSTheme] = useState('light');
-  useEffect(() => {
-    (async () => {
-      await fetchMeta();
-    })();
-    const switchTheme = event => {
-      if (event.matches) setOSTheme('dark');else setOSTheme('light');
-    };
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      setOSTheme('dark');
-    }
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme);
-    return () => {
-      window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', switchTheme);
-    };
-  }, []);
-  useEffect(() => {
-    if (mode !== 'auto') setTheme(mode);
-  }, [mode]);
-  const prevFont = usePrevious(fontFamily);
-  useLayoutEffect(() => {
-    const {
-      classList
-    } = document.body;
-    if (prevFont) classList.remove(`font_${prevFont.replace(/ /g, '')}`);
-    classList.add(`font_${fontFamily.replace(/ /g, '')}`);
-  }, [fontFamily]);
-  const getActiveTheme = () => {
-    if (theme === 'auto') return OSTheme === 'dark' ? customDarkTheme : customLightTheme;else return theme === 'dark' ? customDarkTheme : customLightTheme;
-  };
-  return {
-    activeTheme: getActiveTheme()
-  };
-}
-
-function useSelectLanguage() {
-  const {
-    i18n
-  } = useTranslation();
-  // @ts-ignore
-  const currentLanguage = i18n?.language || 'en';
-  const changeLanguage = value => {
-    if (currentLanguage !== value) {
-      // @ts-ignore
-      i18n.changeLanguage(value);
-    }
-  };
-  return {
-    changeLanguage,
-    currentLanguage
-  };
-}
-
-var swap = "SWAP";
-var From = "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.use(Backend)
-// detect user language
-.use(LanguageDetector)
-// pass the i18n instance to react-i18next.
-.use(initReactI18next).init({
-  resources: {
-    en: {
-      translation: en
-    },
-    tr: {
-      translation: tr
-    }
-  },
-  fallbackLng: 'en',
-  debug: true,
-  whitelist: languages
-});
-
-function QueueManager(props) {
-  const {
-    providers,
-    getSigners,
-    state,
-    connect,
-    canSwitchNetworkTo,
-    getWalletInfo
-  } = useWallets();
-  const swapQueueDef = useMemo(() => {
-    return makeQueueDefinition({
-      API_KEY: getConfig('API_KEY')
-    });
-  }, []);
-  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
-  const {
-    blockchains
-  } = useMetaStore.use.meta();
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const wallets = {
-    blockchains: connectedWallets.map(wallet => ({
-      accounts: [wallet],
-      name: wallet.chain
-    }))
-  };
-  const switchNetwork = (wallet, network) => {
-    if (!canSwitchNetworkTo(wallet, network)) {
-      return undefined;
-    }
-    return connect(wallet, network);
-  };
-  // TODO: this code copy & pasted from rango, should be refactored.
-  const allBlockchains = blockchains.filter(blockchain => blockchain.enabled).reduce((blockchainsObj, blockchain) => (blockchainsObj[blockchain.name] = blockchain, blockchainsObj), {});
-  const evmBasedChains = blockchains.filter(isEvmBlockchain$1);
-  const getSupportedChainNames = type => {
-    const {
-      supportedChains
-    } = getWalletInfo(type);
-    return walletAndSupportedChainsNames(supportedChains);
-  };
-  const allProviders = providers();
-  const notifier = data => {
-    const lastStep = data.swap?.steps[data.swap.steps.length - 1];
-    const outputAmount = data.step?.outputAmount || '';
-    const step = data.step || lastStep;
-    if (data.eventType === 'task_completed' || data.eventType === 'step_completed_with_output' && lastStep?.id !== data.step?.id || !!outputAmount) {
-      const fromAccount = connectedWallets.find(account => account.chain === step?.fromBlockchain);
-      const toAccount = step?.fromBlockchain !== step?.toBlockchain && connectedWallets.find(wallet => wallet.chain === step?.toBlockchain);
-      fromAccount && getOneOfWalletsDetails(fromAccount);
-      toAccount && getOneOfWalletsDetails(toAccount);
-    }
-  };
-  const context = {
-    meta: {
-      blockchains: allBlockchains,
-      evmBasedChains: evmBasedChains,
-      evmNetworkChainInfo: convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
-      getSupportedChainNames
-    },
-    getSigners,
-    //todo: remove Network type
-    //@ts-ignore
-    wallets,
-    providers: allProviders,
-    switchNetwork,
-    connect,
-    state,
-    notifier
-  };
-  return React.createElement(Provider, {
-    queuesDefs: [swapQueueDef],
-    context: context,
-    onPersistedDataLoaded: manager => {
-      checkWaitingForNetworkChange(manager);
-    },
-    isPaused: false
-  }, props.children);
-}
-
-const Widget = _ref => {
-  let {
-    config
-  } = _ref;
-  globalFont(config?.theme?.fontFamily || 'Roboto');
-  const {
-    activeTheme
-  } = useTheme({
-    ...config?.theme
-  });
-  const {
-    blockchains
-  } = useMetaStore.use.meta();
-  const disconnectWallet = useWalletsStore.use.disconnectWallet();
-  const connectWallet = useWalletsStore.use.connectWallet();
-  const {
-    changeLanguage
-  } = useSelectLanguage();
-  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
-  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] = useState('');
-  const [disconnectedWallet, setDisconnectedWallet] = useState();
-  const currentPage = useUiStore.use.currentPage();
-  const evmBasedChainNames = blockchains.filter(isEvmBlockchain$1).map(chain => chain.name);
-  useMemo(() => {
-    if (config?.apiKey) {
-      initConfig({
-        API_KEY: config?.apiKey
-      });
-    }
-  }, [config]);
-  const onUpdateState = (type, event, value, state, supportedChains) => {
-    if (event === Events.ACCOUNTS) {
-      if (value) {
-        const supportedChainNames = walletAndSupportedChainsNames(supportedChains);
-        const data = prepareAccountsForWalletStore(type, value, evmBasedChainNames, supportedChainNames);
-        connectWallet(data);
-      } else {
-        disconnectWallet(type);
-      }
-    }
-    if (event === Events.ACCOUNTS && state.connected) {
-      const key = `${type}-${state.network}-${value}`;
-      if (state.connected) {
-        setLastConnectedWalletWithNetwork(key);
-      }
-    }
-    if (event === Events.NETWORK && state.network) {
-      const key = `${type}-${state.network}`;
-      setLastConnectedWalletWithNetwork(key);
-    }
-  };
-  let providers = allProviders();
-  useEffect(() => {
-    const wallets = config?.wallets;
-    clearConnectedWallet();
-    providers = !wallets ? allProviders() : allProviders().filter(provider => {
-      const type = provider.config.type;
-      return wallets.find(w => w === type);
-    });
-  }, [config?.wallets]);
-  useEffect(() => {
-    changeLanguage(config?.language || 'en');
-  }, [config?.language]);
-  return React.createElement(Provider$1, {
-    allBlockChains: blockchains,
-    providers: providers,
-    onUpdateState: onUpdateState
-  }, React.createElement("div", {
-    id: "swap-container",
-    className: activeTheme
-  }, React.createElement(QueueManager, null, React.createElement(SwapContainer, {
-    fixedHeight: currentPage !== navigationRoutes.home
-  }, React.createElement(AppRouter, {
-    lastConnectedWallet: lastConnectedWalletWithNetwork,
-    disconnectedWallet: disconnectedWallet,
-    clearDisconnectedWallet: () => {
-      setDisconnectedWallet(undefined);
-    }
-  }, React.createElement(Layout, {
-    config: config
-  }))))));
-};
-
-export { Widget };
-//# sourceMappingURL=widget-embedded.esm.js.map