@rango-dev/widget-embedded 0.1.10-next.72 → 0.1.10-next.73

package/dist/widget-embedded.esm.js

@@ -0,0 +1,2860 @@
+import { WalletState, ConfirmSwap, History, Tooltip, Button, RetryIcon, HistoryIcon, SettingsIcon, styled, Typography, InfoCircleIcon, AngleDownIcon, TextField, VerticalSwapIcon, BestRoute, Alert, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Wallet, ConfirmWallets, SwapHistory, AddWalletIcon, globalCss, lightTheme, darkTheme, SwapContainer } from '@rango-dev/ui';
+import React, { useRef, useEffect, Fragment, useState } from 'react';
+import { useInRouterContext, MemoryRouter } from 'react-router';
+import { useSearchParams, useLocation, useNavigate, useInRouterContext as useInRouterContext$1, useRoutes } from 'react-router-dom';
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
+import { RangoClient, TransactionType } from 'rango-sdk';
+import { readAccountAddress, useWallets, Provider, Events } from '@rango-dev/wallets-core';
+import { allProviders } from '@rango-dev/provider-all';
+import { Network, isEvmAddress, WalletType, isEvmBlockchain } from '@rango-dev/wallets-shared';
+import { persist } from 'zustand/middleware';
+import { styled as styled$1 } from '@rango-dev/ui/src/theme';
+
+const ZERO = /*#__PURE__*/new BigNumber(0);
+
+const numberToString = function (number, minDecimals, maxDecimals) {
+  if (minDecimals === void 0) {
+    minDecimals = null;
+  }
+  if (maxDecimals === void 0) {
+    maxDecimals = null;
+  }
+  if (number === null) return '';
+  if (number === '') return '';
+  const n = new BigNumber$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 getBestRouteToTokenUsdPrice = bestRoute => bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
+const compareRoutes = (route1, route2, inputAmount, fromTokenUsdPrice, toTokenUsdPrice) => {
+  let outUsdValue = (new BigNumber(route2.result?.outputAmount || '0') || ZERO).multipliedBy(toTokenUsdPrice || 0);
+  if (outUsdValue.isNaN()) outUsdValue = ZERO;
+  let inUsdValue = new BigNumber(inputAmount || '0').multipliedBy(fromTokenUsdPrice || 0);
+  if (inUsdValue.isNaN()) inUsdValue = ZERO;
+  const outToInRatio = inUsdValue === null || inUsdValue.lte(ZERO) ? 0 : outUsdValue === null || outUsdValue.lte(ZERO) ? 0 : outUsdValue.div(inUsdValue).minus(1).multipliedBy(100);
+  const disableSwapButton = parseInt(outToInRatio?.toFixed(2) || '0') <= -10 && (inUsdValue === null || inUsdValue.gte(new BigNumber(400))) || parseInt(outToInRatio?.toFixed(2) || '0') <= -5 && (inUsdValue === null || inUsdValue.gte(new BigNumber(1000)));
+  if (disableSwapButton) {
+    return {
+      isChanged: true,
+      warningMessage: 'Route updated and price impact is too high, try again later!'
+    };
+  }
+  const out1 = route1.result?.outputAmount || null;
+  const out2 = route2.result?.outputAmount || null;
+  if (!!out1 && !!out2) {
+    const changePercent = new BigNumber(out2).div(new BigNumber(out1)).minus(1).multipliedBy(100);
+    if (changePercent.toNumber() <= -1) {
+      return {
+        isChanged: true,
+        warningMessage: `Output amount changed to ${numberToString(out2)} 
+      (${numberToString(changePercent, null, 2)}% change).`
+      };
+    }
+  }
+  const route1Swaps = route1.result?.swaps || [];
+  const route2Swaps = route2.result?.swaps || [];
+  if (route1Swaps.length !== route2Swaps.length) return {
+    isChanged: true,
+    warningMessage: 'Route has been updated.'
+  };else {
+    for (let i = 0; i < route1Swaps.length; i++) {
+      if (route1Swaps[i].swapperId !== route2Swaps[i].swapperId) return {
+        isChanged: true,
+        warningMessage: 'Route swappers has been updated.'
+      };else if (route1Swaps[i].to.symbol !== route2Swaps[i].to.symbol) return {
+        isChanged: true,
+        warningMessage: 'Route internal coins has been updated.'
+      };
+    }
+  }
+  return {
+    isChanged: false
+  };
+};
+const getRequiredBalanceOfWallet = (wallet, fee) => {
+  if (fee === null) return null;
+  const relatedFeeStatus = fee?.find(item => item.blockchain === wallet.chain)?.wallets.find(it => it.address?.toLowerCase() === wallet.address.toLowerCase());
+  if (!relatedFeeStatus) return null;
+  return relatedFeeStatus.requiredAssets;
+};
+
+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 getUsdValue = (token, amount) => new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
+const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/immer(set => ({
+  fromChain: null,
+  fromToken: null,
+  inputAmount: '',
+  outputAmount: null,
+  inputUsdValue: new BigNumber(0),
+  outputUsdValue: new BigNumber(0),
+  toChain: null,
+  toToken: null,
+  bestRoute: null,
+  setBestRoute: bestRoute => set(state => {
+    state.bestRoute = bestRoute;
+    if (!!bestRoute) {
+      const outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber(bestRoute.result?.outputAmount) : null;
+      state.outputAmount = outputAmount;
+      state.outputUsdValue = new BigNumber(outputAmount || ZERO).multipliedBy(getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice || 0);
+    }
+  }),
+  setFromChain: chain => set(state => {
+    state.fromChain = chain;
+  }),
+  setFromToken: token => set(state => {
+    state.fromToken = token;
+    if (!!state.inputAmount) state.inputUsdValue = getUsdValue(state.fromToken, state.inputAmount);
+  }),
+  setToChain: chain => set(state => {
+    state.toChain = chain;
+  }),
+  setToToken: token => set(state => {
+    state.toToken = token;
+  }),
+  setInputAmount: amount => set(state => {
+    state.inputAmount = amount;
+    if (!!state.fromToken) state.inputUsdValue = getUsdValue(state.fromToken, state.inputAmount);
+  })
+}))));
+
+const httpService = /*#__PURE__*/new RangoClient(process.env.REACT_API_KEY);
+
+function removeDuplicateFrom(array) {
+  return Array.from(new Set(array));
+}
+
+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'
+      });
+    }
+  }
+})));
+
+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 = {}));
+
+function searchParamsToToken(tokens, searchParams) {
+  return tokens.find(token => {
+    const symbolAndAddress = searchParams?.split('--');
+    if (symbolAndAddress?.length === 1) return token.symbol === symbolAndAddress[0] && token.address === null;
+    return token.symbol === symbolAndAddress?.[0] && token.address === symbolAndAddress?.[1];
+  }) || null;
+}
+function UpdateUrl() {
+  const firstRender = useRef(true);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+  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();
+  useEffect(() => {
+    if (!firstRender.current) {
+      const fromChainString = fromChain?.name || '';
+      const fromTokenString = (fromToken?.symbol || '') + (fromToken?.address ? `--${fromToken?.address}` : '');
+      const toChainString = toChain?.name || '';
+      const toTokenString = (toToken?.symbol || '') + (toToken?.address ? `--${toToken?.address}` : '');
+      const 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]);
+  useEffect(() => {
+    if (loadingStatus === 'success') {
+      const fronChainString = 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 === fronChainString);
+      const fromToken = searchParamsToToken(tokens, fromTokenString);
+      const toChain = blockchains.find(blockchain => blockchain.name === toChainString);
+      const toToken = searchParamsToToken(tokens, toTokenString);
+      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
+  } = _ref;
+  const isRouterInContext = useInRouterContext();
+  const Router = isRouterInContext ? Fragment : MemoryRouter;
+  return React.createElement(React.Fragment, null, React.createElement(Router, null, children), isRouterInContext && React.createElement(UpdateUrl, null));
+}
+
+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;
+  }
+}
+function getlistWallet(getState, getWalletInfo, list) {
+  const excludedWallets = [WalletType.UNKNOWN, WalletType.TERRA_STATION, WalletType.LEAP];
+  return list.filter(wallet => !excludedWallets.includes(wallet)).map(type => {
+    const {
+      name,
+      img: image,
+      installLink
+    } = getWalletInfo(type);
+    const state = getStateWallet(getState(type));
+    return {
+      name,
+      image,
+      installLink,
+      state,
+      type
+    };
+  });
+}
+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(accounts, selectedWallets, getWalletInfo, requiredChains) {
+  const connectedWallets = accounts.map(account => ({
+    address: account.address,
+    walletType: account.walletType,
+    chain: account.chain,
+    image: getWalletInfo(account.walletType).img,
+    selected: !!selectedWallets.find(wallet => wallet.chain === account.chain)
+  }));
+  return requiredChains ? connectedWallets.filter(wallet => requiredChains.includes(wallet.chain)) : removeDuplicateWallets(connectedWallets, 'walletType');
+}
+const removeDuplicateWallets = (arr, key) => {
+  return [...new Map(arr.map(item => [item[key], item])).values()];
+};
+function getBalanceFromWallet(balances, chain, symbol, address) {
+  if (balances.length === 0) return null;
+  const selectedChainBalances = balances.filter(balance => balance.chain === chain);
+  if (selectedChainBalances.length === 0) return null;
+  return selectedChainBalances.map(a => a.balances?.find(bl => address !== null && bl.address === address || address === null && bl.address === address && bl.symbol === symbol) || null).filter(b => b !== null).sort((a, b) => parseFloat(b?.amount || '0') - parseFloat(a?.amount || '1')).find(() => true) || null;
+}
+function isAccountAndBalanceMatched(account, balance) {
+  return account.address === balance.address && account.chain === balance.chain && account.walletType === balance.walletType;
+}
+function makeBalanceFor(account, retrivedBalance, tokens) {
+  const {
+    address,
+    blockChain: chain,
+    explorerUrl,
+    balances = []
+  } = retrivedBalance;
+  return {
+    address,
+    chain,
+    loading: false,
+    error: false,
+    explorerUrl,
+    walletType: account.walletType,
+    balances: balances?.map(tokenBalance => ({
+      chain,
+      symbol: tokenBalance.asset.symbol,
+      ticker: tokenBalance.asset.symbol,
+      address: tokenBalance.asset.address || null,
+      rawAmount: tokenBalance.amount.amount,
+      decimal: tokenBalance.amount.decimals,
+      amount: new BigNumber(tokenBalance.amount.amount).shiftedBy(-tokenBalance.amount.decimals).toFixed(),
+      logo: '',
+      usdPrice: getUsdPrice(chain, tokenBalance.asset.symbol, tokenBalance.asset.address, tokens) || null
+    })) || []
+  };
+}
+function resetBalanceState(balance) {
+  return {
+    ...balance,
+    loading: false,
+    error: true
+  };
+}
+const calculateWalletUsdValue = balance => {
+  const uniqueAccountAddresses = new Set();
+  const uniqueBalane = balance?.reduce((acc, current) => {
+    return acc.findIndex(i => i.address === current.address && i.chain === current.chain) === -1 ? [...acc, current] : acc;
+  }, []);
+  const modifiedWalletBlockchains = uniqueBalane?.map(chain => {
+    const modifiedWalletBlockchain = {
+      name: chain.chain,
+      accounts: []
+    };
+    if (!uniqueAccountAddresses.has(chain.address)) {
+      uniqueAccountAddresses.add(chain.address);
+    }
+    uniqueAccountAddresses.forEach(accountAddress => {
+      if (chain.address === accountAddress) modifiedWalletBlockchain.accounts.push(chain);
+    });
+    return modifiedWalletBlockchain;
+  });
+  const total = numberToString(modifiedWalletBlockchains?.flatMap(b => b.accounts)?.flatMap(a => a?.balances)?.map(b => new BigNumber(b?.amount || ZERO).multipliedBy(b?.usdPrice || 0))?.reduce((a, b) => a.plus(b), ZERO) || ZERO).toString();
+  console.log('total');
+  console.log(total);
+  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 sortedTokens = (tokens, position, balance) => {
+  if (!tokens) return [];
+  const walletSymbols = new Set((balance || []).flatMap(a => a.balances || []).filter(b => (new BigNumber(b?.rawAmount) || ZERO).gt(0)).map(b => `${b?.chain}.${b?.symbol}.${b?.address}`));
+  let sortedList = [...tokens.filter(t => !t.address && walletSymbols.size && position === 'to'), ...tokens.filter(t => !(position === 'to' && !t.address) && walletSymbols.has(`${t.blockchain}.${t.symbol}.${t.address}`)).sort((tokenA, tokenB) => compareBalance(tokenA, tokenB, balance)), ...tokens.filter(t => !walletSymbols.has(`${t.blockchain}.${t.symbol}.${t.address}`) && !t.address && (!walletSymbols.size || position === 'from')), ...tokens.filter(t => !walletSymbols.has(`${t.blockchain}.${t.symbol}.${t.address}`) && t.address && !t.isSecondaryCoin), ...tokens.filter(t => !walletSymbols.has(`${t.blockchain}.${t.symbol}.${t.address}`) && t.isSecondaryCoin)];
+  return sortedList;
+};
+const compareBalance = (tokenA, tokenB, wallet) => {
+  if (!tokenA.usdPrice || !tokenB.usdPrice) return 0;
+  const tokenAUsdValue = new BigNumber(getBalanceFromWallet(wallet, tokenA.blockchain, tokenA.symbol, tokenA.address)?.amount || ZERO).multipliedBy(tokenA.usdPrice);
+  const tokenBUsdValue = new BigNumber(getBalanceFromWallet(wallet, tokenB.blockchain, tokenB.symbol, tokenB.address)?.amount || ZERO).multipliedBy(tokenB.usdPrice);
+  if (tokenAUsdValue.gt(tokenBUsdValue)) return -1;
+  return 1;
+};
+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 useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
+  accounts: [],
+  balances: [],
+  selectedWallets: [],
+  connectWallet: accounts => {
+    const tokens = useMetaStore.getState().meta.tokens;
+    set(state => ({
+      accounts: state.accounts.concat(accounts),
+      balances: state.balances.concat(accounts.map(account => ({
+        balances: [],
+        address: account.address,
+        chain: account.chain,
+        loading: true,
+        walletType: account.walletType,
+        error: false,
+        explorerUrl: null
+      })))
+    }));
+    accounts.forEach(async account => {
+      try {
+        const response = await httpService.getWalletsDetails([{
+          address: account.address,
+          blockchain: account.chain
+        }]);
+        const retrivedBalance = response.wallets[0];
+        if (retrivedBalance) {
+          set(state => ({
+            balances: state.balances.map(balance => {
+              return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
+            })
+          }));
+        } else throw new Error('Wallet not found');
+      } catch (error) {
+        set(state => ({
+          balances: state.balances.map(balance => {
+            return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
+          })
+        }));
+      }
+    });
+  },
+  disconnectWallet: walletType => {
+    set(state => ({
+      accounts: state.accounts.filter(account => account.walletType !== walletType),
+      balances: state.balances.filter(balance => balance.walletType !== walletType),
+      selectedWallets: state.selectedWallets.filter(wallet => wallet.walletType != walletType)
+    }));
+  },
+  initSelectedWallets: () => set(state => {
+    const requiredChains = getRequiredChains(useBestRouteStore.getState().bestRoute);
+    const connectedWallets = state.accounts;
+    const selectedWallets = [];
+    requiredChains.forEach(chain => {
+      const anyWalletSelected = !!state.selectedWallets.find(wallet => wallet.chain === chain);
+      if (!anyWalletSelected) {
+        const firstWalletWithMatchedChain = connectedWallets.find(wallet => wallet.chain === chain);
+        if (!!firstWalletWithMatchedChain) selectedWallets.push({
+          address: firstWalletWithMatchedChain.address,
+          chain: firstWalletWithMatchedChain.chain,
+          walletType: firstWalletWithMatchedChain.walletType
+        });
+      }
+    });
+    return {
+      selectedWallets: state.selectedWallets.concat(selectedWallets)
+    };
+  }),
+  setSelectedWallet: wallet => set(state => ({
+    selectedWallets: state.selectedWallets.filter(selectedWallet => selectedWallet.chain !== wallet.chain).concat({
+      chain: wallet.chain,
+      address: wallet.address,
+      walletType: wallet.walletType
+    })
+  }))
+})));
+
+const navigationRoutes = {
+  home: '/',
+  fromChain: '/from-chain',
+  fromToken: '/from-token',
+  toChain: '/to-chain',
+  toToken: '/to-token',
+  settings: '/settings',
+  liquiditySources: '/liquidity-sources',
+  history: '/history',
+  wallets: '/wallets',
+  confirmSwap: '/confirm-swap',
+  confirmWallets: '/confirm-wallets',
+  swapDetails: '/swap-details'
+};
+
+const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/persist( /*#__PURE__*/immer(set => ({
+  slippage: 1,
+  customSlippage: null,
+  infinitApprove: false,
+  disabledLiquiditySources: [],
+  theme: 'auto',
+  setSlippage: slippage => set(state => {
+    state.slippage = slippage;
+  }),
+  setCustomSlippage: customSlippage => {
+    return set(state => {
+      state.customSlippage = customSlippage;
+    });
+  },
+  toggleAllLiquiditySources: () => set(state => {
+    const {
+      swappers
+    } = useMetaStore.getState().meta;
+    if (swappers.length - state.disabledLiquiditySources.length === 0) state.disabledLiquiditySources = [];else {
+      const allSwappers = swappers.map(swapper => swapper.swapperGroup);
+      state.disabledLiquiditySources = allSwappers;
+    }
+  }),
+  toggleInfinitApprove: () => set(state => {
+    state.infinitApprove = !state.infinitApprove;
+  }),
+  toggleLiquiditySource: name => set(state => {
+    state.disabledLiquiditySources = state.disabledLiquiditySources.includes(name) ? state.disabledLiquiditySources.filter(liquiditySource => liquiditySource != name) : state.disabledLiquiditySources.concat(name);
+  }),
+  setTheme: theme => set(state => {
+    state.theme = theme;
+  })
+})), {
+  name: 'user-settings'
+})));
+
+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 getSwapButtonTitle(accounts, loading, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath) {
+  if (loading) return 'Finding Best Route...';
+  if (accounts.length == 0) return 'Connect Wallet';else if (hasLimitError) return 'Limit Error';else if (highValueLoss) return 'Price impact is too high!';else if (priceImpactCanNotBeComputed) return 'USD price is unknown, price impact might be high!';else if (needsToWarnEthOnPath) return 'The route goes through Ethereum. Continue?';else return 'Swap';
+}
+function canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue) {
+  return !((inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) && !!bestRoute?.result && !!inputAmount && inputAmount !== '0' && parseFloat(inputAmount || '0') !== 0);
+}
+function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validateBalanceOrFee) {
+  const simulationResult = bestRoute.result;
+  if (!simulationResult) throw Error('Simulation result should not be null');
+  return {
+    creationTime: new Date().getTime().toString(),
+    finishTime: null,
+    requestId: bestRoute.requestId || '',
+    inputAmount: inputAmount,
+    wallets,
+    status: 'running',
+    isPaused: false,
+    extraMessage: null,
+    extraMessageSeverity: null,
+    extraMessageDetail: null,
+    extraMessageErrorCode: null,
+    networkStatusExtraMessage: null,
+    networkStatusExtraMessageDetail: null,
+    lastNotificationTime: null,
+    settings: settings,
+    simulationResult: simulationResult,
+    validateBalanceOrFee,
+    //TODO: finalize PendingSwap type and remove ts-ignore
+    //@ts-ignore
+    steps: bestRoute.result?.swaps?.map((s, i) => ({
+      id: i + 1,
+      fromBlockchain: s.from.blockchain,
+      fromSymbol: s.from.symbol,
+      fromSymbolAddress: s.from.address,
+      fromDecimals: s.from.decimals,
+      fromAmountPrecision: s.fromAmountPrecision,
+      fromAmountMinValue: s.fromAmountMinValue,
+      fromAmountMaxValue: s.fromAmountMaxValue,
+      toBlockchain: s.to.blockchain,
+      fromLogo: s.from.logo,
+      toSymbol: s.to.symbol,
+      toSymbolAddress: s.to.address,
+      toDecimals: s.to.decimals,
+      toLogo: s.to.logo,
+      startTransactionTime: new Date().getTime(),
+      swapperId: s.swapperId,
+      expectedOutputAmountHumanReadable: s.toAmount,
+      outputAmount: null,
+      status: 'created',
+      networkStatus: null,
+      executedTransactionId: null,
+      externalTransactionId: null,
+      explorerUrl: null,
+      trackingCode: null,
+      cosmosTransaction: null,
+      solanaTransaction: null,
+      starknetTransaction: null,
+      starknetApprovalTransaction: null,
+      tronTransaction: null,
+      tronApprovalTransaction: null,
+      evmTransaction: null,
+      evmApprovalTransaction: null,
+      transferTransaction: null,
+      diagnosisUrl: null,
+      internalSteps: null,
+      fromBlockchainLogo: '',
+      toBlockchainLogo: '',
+      swapperLogo: '',
+      swapperType: ''
+    })) || []
+  };
+}
+function requiredWallets(route) {
+  const wallets = [];
+  route?.result?.swaps.forEach(swap => {
+    const currentStepFromBlockchain = swap.from.blockchain;
+    const currentStepToBlockchain = swap.to.blockchain;
+    let lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepFromBlockchain != lastAddedWallet) wallets.push(currentStepFromBlockchain);
+    lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepToBlockchain != lastAddedWallet) wallets.push(currentStepToBlockchain);
+  });
+  return wallets;
+}
+
+function useConfirmSwap() {
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const setBestRoute = useBestRouteStore.use.setBestRoute();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const slippage = useSettingsStore.use.slippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [warning, setWarning] = useState('');
+  const [data, setData] = useState(null);
+  const [feeStatus, setFeeStatus] = useState(null);
+  const [bestRouteChanged, setBestRouteChanged] = useState(false);
+  const [enoughBalance, setEnoughBalance] = useState(null);
+  const hasEnoughBalanceOrProperSlippage = (route, selectedWallets, userSlippage, routeChanged) => {
+    const fee = route.validationStatus;
+    if (fee === null || fee.length === 0) return {
+      balance: true,
+      slippage: true,
+      routeChanged
+    };
+    for (const wallet of selectedWallets) {
+      const requiredAssets = getRequiredBalanceOfWallet(wallet, fee);
+      if (!requiredAssets) continue;
+      const hasEnoughBalance = requiredAssets?.map(it => it.ok).reduce((a, b) => a && b);
+      if (!hasEnoughBalance) return {
+        balance: false,
+        slippage: true,
+        routeChanged
+      };
+    }
+    const slippages = route.result?.swaps?.map(s => s.recommendedSlippage);
+    const slippageError = (slippages?.filter(s => !!s?.error)?.length || 0) > 0;
+    const minSlippage = slippages?.map(s => parseFloat(s?.slippage.toString() || '0') || 0).filter(s => s > 0).sort((a, b) => b - a).find(() => true) || null;
+    if (slippageError) {
+      setError('Server cannot calculated required slippage for your swap');
+      return {
+        balance: true,
+        slippage: false,
+        routeChanged
+      };
+    } else if (minSlippage !== null && minSlippage > parseFloat(userSlippage)) {
+      setError(`Your slippage should be ${minSlippage} at least`);
+      return {
+        balance: true,
+        slippage: false,
+        routeChanged
+      };
+    }
+    return {
+      balance: true,
+      slippage: true,
+      routeChanged
+    };
+  };
+  const checkFeeAndBalance = async selectedWallets => {
+    setLoading(true);
+    setFeeStatus(null);
+    const selectedWalletsMap = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = selectedWallet.address, selectedWalletsMap), {});
+    const connectedWallets = [];
+    accounts.forEach(account => {
+      const chainAndAccounts = connectedWallets.find(wallet => wallet.blockchain);
+      if (!!chainAndAccounts) chainAndAccounts.addresses.push(account.address);else connectedWallets.push({
+        blockchain: account.chain,
+        addresses: [account.address]
+      });
+    });
+    const r = await httpService.getBestRoute({
+      amount: inputAmount.toString(),
+      checkPrerequisites: true,
+      from: {
+        address: fromToken.address,
+        blockchain: fromToken.blockchain,
+        symbol: fromToken.symbol
+      },
+      to: {
+        address: toToken.address,
+        blockchain: toToken.blockchain,
+        symbol: toToken.symbol
+      },
+      connectedWallets,
+      selectedWallets: selectedWalletsMap,
+      //@ts-ignore
+      swapperGroups: disabledLiquiditySources,
+      swappersGroupsExclude: true
+    }).catch(error => {
+      setError(error.message);
+      setLoading(false);
+    });
+    setLoading(false);
+    if (!r || !r.result || !bestRoute) return {
+      bestRoute: null
+    };
+    if (!new BigNumber(r.requestAmount).isEqualTo(new BigNumber(inputAmount || '-1'))) return null;
+    setFeeStatus(r.validationStatus);
+    const routeChangeStatus = compareRoutes(bestRoute, r, inputAmount.toString(), fromToken.usdPrice, toToken.usdPrice);
+    setBestRoute(r);
+    const isChanged = routeChangeStatus.isChanged;
+    setBestRouteChanged(isChanged);
+    setWarning('Best route changed');
+    setData(r);
+    return {
+      hasEnoughBalanceOrSlippage: hasEnoughBalanceOrProperSlippage(r, selectedWallets, slippage.toString(), isChanged),
+      bestRoute: r
+    };
+  };
+  const swap = () => {
+    if (!bestRoute) return;
+    if (inputAmount.toString() === '') return;
+    const wallets = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = {
+      address: selectedWallet.address,
+      walletType: selectedWallet.walletType
+    }, selectedWalletsMap), {});
+    const proceedAnyway = enoughBalance !== null;
+    const settings = {
+      slippage: slippage.toString(),
+      disabledSwappersGroups: ['Osmosis'],
+      disabledSwappersIds: []
+    };
+    if (proceedAnyway) {
+      const newSwap = calculatePendingSwap(inputAmount.toString(), bestRoute, wallets, settings, false);
+    }
+    !proceedAnyway && checkFeeAndBalance(selectedWallets).then(data => {
+      if (!data) {
+        setError('confirm swap error');
+        return;
+      }
+      if (!data.bestRoute) {
+        setError('confirm swap error');
+        return;
+      } else {
+        const {
+          hasEnoughBalanceOrSlippage,
+          bestRoute: newBestRoute
+        } = data;
+        if (!hasEnoughBalanceOrSlippage) {
+          return;
+        }
+        setEnoughBalance(hasEnoughBalanceOrSlippage.balance && hasEnoughBalanceOrSlippage.slippage);
+        if (hasEnoughBalanceOrSlippage.balance && hasEnoughBalanceOrSlippage.slippage && !hasEnoughBalanceOrSlippage.routeChanged) {
+          const newSwap = calculatePendingSwap(inputAmount.toString(), newBestRoute, wallets, settings, true);
+        } else if (!hasEnoughBalanceOrSlippage.balance) {
+          setError('not enough balance');
+        }
+      }
+    }).catch(error => {
+      console.log('unexpected error', error);
+    });
+  };
+  return {
+    loading,
+    error,
+    data,
+    warning,
+    feeStatus,
+    bestRouteChanged,
+    enoughBalance,
+    swap
+  };
+}
+
+function ConfirmSwapPage() {
+  const navigate = useNavigate();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const {
+    error,
+    loading,
+    warning,
+    swap
+  } = useConfirmSwap();
+  return React.createElement(ConfirmSwap, {
+    onConfirm: swap.bind(null),
+    onBack: navigate.bind(null, -1),
+    bestRoute: bestRoute,
+    loading: loading,
+    error: error,
+    warning: warning
+  });
+}
+
+const pendingSwap = [{
+  creationTime: '1673164511955',
+  finishTime: '1673164550137',
+  requestId: '51e211d9-d61c-45d2-a4d4-1f9f7f90ee85',
+  inputAmount: '1',
+  wallets: {
+    OSMOSIS: {
+      walletType: 'keplr',
+      address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl'
+    }
+  },
+  status: 'running',
+  isPaused: false,
+  extraMessage: null,
+  extraMessageSeverity: 'info',
+  extraMessageDetail: '',
+  extraMessageErrorCode: null,
+  networkStatusExtraMessage: null,
+  networkStatusExtraMessageDetail: null,
+  lastNotificationTime: null,
+  settings: {
+    slippage: '1.0',
+    disabledSwappersIds: [],
+    disabledSwappersGroups: []
+  },
+  simulationResult: {
+    outputAmount: '1.540670',
+    swaps: [{
+      swapperId: 'Osmosis',
+      swapperType: 'DEX',
+      swapperLogo: '',
+      // @ts-ignore
+      result: null,
+      from: {
+        symbol: 'JUNO',
+        logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+        address: 'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+        blockchain: 'OSMOSIS',
+        blockchainLogo: '',
+        decimals: 6,
+        usdPrice: 1.1091996179668873
+      },
+      to: {
+        symbol: 'OSMO',
+        logo: 'https://api.rango.exchange/i/mJQPS2',
+        address: null,
+        blockchain: 'OSMOSIS',
+        decimals: 6,
+        blockchainLogo: '',
+        usdPrice: 0.7192435454440882
+      },
+      fromAmount: '1.000000',
+      fromAmountPrecision: null,
+      fromAmountMinValue: null,
+      fromAmountMaxValue: null,
+      toAmount: '1.540670',
+      fee: [{
+        name: '',
+        asset: {
+          blockchain: 'OSMOSIS',
+          symbol: 'OSMO',
+          address: null
+        },
+        expenseType: 'FROM_SOURCE_WALLET',
+        amount: '0'
+      }],
+      estimatedTimeInSeconds: 45,
+      swapChainType: 'INTRA_CHAIN',
+      routes: [{
+        nodes: [{
+          nodes: [{
+            marketName: 'pool#498',
+            marketId: null,
+            percent: 1
+          }],
+          from: 'JUNO',
+          fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+          fromAddress: 'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+          fromBlockchain: 'OSMOSIS',
+          to: 'ATOM',
+          toLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+          toAddress: 'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+          toBlockchain: 'OSMOSIS'
+        }, {
+          nodes: [{
+            marketName: 'pool#8',
+            marketId: null,
+            percent: 1
+          }],
+          from: 'ATOM',
+          fromLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+          fromAddress: 'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+          fromBlockchain: 'OSMOSIS',
+          to: 'IRIS',
+          toLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+          toAddress: 'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+          toBlockchain: 'OSMOSIS'
+        }, {
+          nodes: [{
+            marketName: 'pool#7',
+            marketId: null,
+            percent: 1
+          }],
+          from: 'IRIS',
+          fromLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+          fromAddress: 'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+          fromBlockchain: 'OSMOSIS',
+          to: 'OSMO',
+          toLogo: 'https://api.rango.exchange/tokens/COSMOS/OSMO.png',
+          toAddress: null,
+          toBlockchain: 'OSMOSIS'
+        }]
+      }],
+      recommendedSlippage: null,
+      timeStat: {
+        min: 6,
+        avg: 40,
+        max: 241
+      },
+      includesDestinationTx: false
+    }]
+  },
+  validateBalanceOrFee: true,
+  steps: [{
+    id: 1,
+    fromBlockchain: 'OSMOSIS',
+    fromSymbol: 'JUNO',
+    fromSymbolAddress: 'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+    fromDecimals: 6,
+    fromAmountPrecision: null,
+    fromAmountMinValue: null,
+    swapperLogo: '',
+    swapperType: '',
+    fromAmountMaxValue: null,
+    toBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+    fromBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+    toBlockchain: 'OSMOSIS',
+    fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+    toSymbol: 'OSMO',
+    toSymbolAddress: null,
+    toDecimals: 6,
+    toLogo: 'https://api.rango.exchange/i/mJQPS2',
+    startTransactionTime: 1673164519916,
+    swapperId: 'Osmosis',
+    expectedOutputAmountHumanReadable: '1.540670',
+    outputAmount: '1.540658',
+    status: 'running',
+    networkStatus: null,
+    executedTransactionId: '0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+    explorerUrl: [{
+      url: 'https://www.mintscan.io/osmosis/txs/0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+      description: null
+    }],
+    cosmosTransaction: {
+      type: TransactionType.COSMOS,
+      fromWalletAddress: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+      blockChain: 'OSMOSIS',
+      data: {
+        chainId: 'osmosis-1',
+        account_number: 102721,
+        sequence: '308',
+        msgs: [{
+          __type: 'OsmosisSwapMessage',
+          type: 'osmosis/gamm/swap-exact-amount-in',
+          value: {
+            sender: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+            routes: [{
+              pool_id: '498',
+              token_out_denom: 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2'
+            }, {
+              pool_id: '8',
+              token_out_denom: 'ibc/7C4D60AA95E5A7558B0A364860979CA34B7FF8AAF255B87AF9E879374470CEC0'
+            }, {
+              pool_id: '7',
+              token_out_denom: 'uosmo'
+            }],
+            token_in: {
+              denom: 'ibc/46B44899322F3CD854D2D46DEEF881958467CDD4B3B10086DA49296BBED94BED',
+              amount: '1000000'
+            },
+            token_out_min_amount: '1525264'
+          }
+        }],
+        protoMsgs: [{
+          type_url: '/osmosis.gamm.v1beta1.MsgSwapExactAmountIn',
+          value: [10, 43, 111, 115, 109, 111, 49, 117, 110, 102, 50, 114, 99, 121, 116, 106, 120, 102, 112, 122, 56, 120, 56, 97, 114, 54, 51, 104, 52, 113, 101, 102, 116, 97, 100, 112, 116, 103, 53, 116, 48, 110, 113, 99, 108, 18, 73, 8, -14, 3, 18, 68, 105, 98, 99, 47, 50, 55, 51, 57, 52, 70, 66, 48, 57, 50, 68, 50, 69, 67, 67, 68, 53, 54, 49, 50, 51, 67, 55, 52, 70, 51, 54, 69, 52, 67, 49, 70, 57, 50, 54, 48, 48, 49, 67, 69, 65, 68, 65, 57, 67, 65, 57, 55, 69, 65, 54, 50, 50, 66, 50, 53, 70, 52, 49, 69, 53, 69, 66, 50, 18, 72, 8, 8, 18, 68, 105, 98, 99, 47, 55, 67, 52, 68, 54, 48, 65, 65, 57, 53, 69, 53, 65, 55, 53, 53, 56, 66, 48, 65, 51, 54, 52, 56, 54, 48, 57, 55, 57, 67, 65, 51, 52, 66, 55, 70, 70, 56, 65, 65, 70, 50, 53, 53, 66, 56, 55, 65, 70, 57, 69, 56, 55, 57, 51, 55, 52, 52, 55, 48, 67, 69, 67, 48, 18, 9, 8, 7, 18, 5, 117, 111, 115, 109, 111, 26, 79, 10, 68, 105, 98, 99, 47, 52, 54, 66, 52, 52, 56, 57, 57, 51, 50, 50, 70, 51, 67, 68, 56, 53, 52, 68, 50, 68, 52, 54, 68, 69, 69, 70, 56, 56, 49, 57, 53, 56, 52, 54, 55, 67, 68, 68, 52, 66, 51, 66, 49, 48, 48, 56, 54, 68, 65, 52, 57, 50, 57, 54, 66, 66, 69, 68, 57, 52, 66, 69, 68, 18, 7, 49, 48, 48, 48, 48, 48, 48, 34, 7, 49, 53, 50, 53, 50, 54, 52]
+        }],
+        memo: '',
+        source: null,
+        fee: {
+          gas: '900000',
+          amount: [{
+            denom: 'uosmo',
+            amount: '0'
+          }]
+        },
+        signType: 'AMINO',
+        rpcUrl: ''
+      },
+      rawTransfer: null
+    },
+    solanaTransaction: null,
+    evmTransaction: null,
+    evmApprovalTransaction: null,
+    transferTransaction: null,
+    diagnosisUrl: null,
+    internalSteps: null
+  }]
+}, {
+  creationTime: '1673164511955',
+  finishTime: '1673164550137',
+  requestId: '51e211d9-d61c-45d2-a4d4-1f9f7f90ee85',
+  inputAmount: '1',
+  wallets: {
+    OSMOSIS: {
+      walletType: 'keplr',
+      address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl'
+    }
+  },
+  status: 'failed',
+  isPaused: false,
+  extraMessage: null,
+  extraMessageSeverity: 'info',
+  extraMessageDetail: '',
+  extraMessageErrorCode: null,
+  networkStatusExtraMessage: null,
+  networkStatusExtraMessageDetail: null,
+  lastNotificationTime: null,
+  settings: {
+    slippage: '1.0',
+    disabledSwappersIds: [],
+    disabledSwappersGroups: []
+  },
+  simulationResult: {
+    outputAmount: '1.540670',
+    swaps: [{
+      swapperId: 'Osmosis',
+      swapperLogo: '',
+      // @ts-ignore
+      result: null,
+      swapperType: 'DEX',
+      from: {
+        symbol: 'JUNO',
+        logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+        address: 'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+        blockchain: 'OSMOSIS',
+        blockchainLogo: '',
+        decimals: 6,
+        usdPrice: 1.1091996179668873
+      },
+      to: {
+        symbol: 'OSMO',
+        logo: 'https://api.rango.exchange/i/mJQPS2',
+        address: null,
+        blockchain: 'OSMOSIS',
+        decimals: 6,
+        blockchainLogo: '',
+        usdPrice: 0.7192435454440882
+      },
+      fromAmount: '1.000000',
+      fromAmountPrecision: null,
+      fromAmountMinValue: null,
+      fromAmountMaxValue: null,
+      toAmount: '1.540670',
+      fee: [{
+        name: '',
+        asset: {
+          blockchain: 'OSMOSIS',
+          symbol: 'OSMO',
+          address: null
+        },
+        expenseType: 'FROM_SOURCE_WALLET',
+        amount: '0'
+      }],
+      estimatedTimeInSeconds: 45,
+      swapChainType: 'INTRA_CHAIN',
+      routes: [{
+        nodes: [{
+          nodes: [{
+            marketName: 'pool#498',
+            marketId: null,
+            percent: 1
+          }],
+          from: 'JUNO',
+          fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+          fromAddress: 'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+          fromBlockchain: 'OSMOSIS',
+          to: 'ATOM',
+          toLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+          toAddress: 'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+          toBlockchain: 'OSMOSIS'
+        }, {
+          nodes: [{
+            marketName: 'pool#8',
+            marketId: null,
+            percent: 1
+          }],
+          from: 'ATOM',
+          fromLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+          fromAddress: 'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+          fromBlockchain: 'OSMOSIS',
+          to: 'IRIS',
+          toLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+          toAddress: 'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+          toBlockchain: 'OSMOSIS'
+        }, {
+          nodes: [{
+            marketName: 'pool#7',
+            marketId: null,
+            percent: 1
+          }],
+          from: 'IRIS',
+          fromLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+          fromAddress: 'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+          fromBlockchain: 'OSMOSIS',
+          to: 'OSMO',
+          toLogo: 'https://api.rango.exchange/tokens/COSMOS/OSMO.png',
+          toAddress: null,
+          toBlockchain: 'OSMOSIS'
+        }]
+      }],
+      recommendedSlippage: null,
+      timeStat: {
+        min: 6,
+        avg: 40,
+        max: 241
+      },
+      includesDestinationTx: false
+    }]
+  },
+  validateBalanceOrFee: true,
+  steps: [{
+    id: 1,
+    fromBlockchain: 'OSMOSIS',
+    fromSymbol: 'JUNO',
+    fromSymbolAddress: 'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+    fromDecimals: 6,
+    fromAmountPrecision: null,
+    fromAmountMinValue: null,
+    fromAmountMaxValue: null,
+    toBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+    fromBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+    toBlockchain: 'OSMOSIS',
+    swapperLogo: '',
+    swapperType: '',
+    fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+    toSymbol: 'OSMO',
+    toSymbolAddress: null,
+    toDecimals: 6,
+    toLogo: 'https://api.rango.exchange/i/mJQPS2',
+    startTransactionTime: 1673164519916,
+    swapperId: 'Osmosis',
+    expectedOutputAmountHumanReadable: '1.540670',
+    outputAmount: '1.540658',
+    status: 'failed',
+    networkStatus: null,
+    executedTransactionId: '0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+    explorerUrl: [{
+      url: 'https://www.mintscan.io/osmosis/txs/0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+      description: null
+    }],
+    cosmosTransaction: {
+      type: TransactionType.COSMOS,
+      fromWalletAddress: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+      blockChain: 'OSMOSIS',
+      data: {
+        chainId: 'osmosis-1',
+        account_number: 102721,
+        sequence: '308',
+        msgs: [{
+          __type: 'OsmosisSwapMessage',
+          type: 'osmosis/gamm/swap-exact-amount-in',
+          value: {
+            sender: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+            routes: [{
+              pool_id: '498',
+              token_out_denom: 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2'
+            }, {
+              pool_id: '8',
+              token_out_denom: 'ibc/7C4D60AA95E5A7558B0A364860979CA34B7FF8AAF255B87AF9E879374470CEC0'
+            }, {
+              pool_id: '7',
+              token_out_denom: 'uosmo'
+            }],
+            token_in: {
+              denom: 'ibc/46B44899322F3CD854D2D46DEEF881958467CDD4B3B10086DA49296BBED94BED',
+              amount: '1000000'
+            },
+            token_out_min_amount: '1525264'
+          }
+        }],
+        protoMsgs: [{
+          type_url: '/osmosis.gamm.v1beta1.MsgSwapExactAmountIn',
+          value: [10, 43, 111, 115, 109, 111, 49, 117, 110, 102, 50, 114, 99, 121, 116, 106, 120, 102, 112, 122, 56, 120, 56, 97, 114, 54, 51, 104, 52, 113, 101, 102, 116, 97, 100, 112, 116, 103, 53, 116, 48, 110, 113, 99, 108, 18, 73, 8, -14, 3, 18, 68, 105, 98, 99, 47, 50, 55, 51, 57, 52, 70, 66, 48, 57, 50, 68, 50, 69, 67, 67, 68, 53, 54, 49, 50, 51, 67, 55, 52, 70, 51, 54, 69, 52, 67, 49, 70, 57, 50, 54, 48, 48, 49, 67, 69, 65, 68, 65, 57, 67, 65, 57, 55, 69, 65, 54, 50, 50, 66, 50, 53, 70, 52, 49, 69, 53, 69, 66, 50, 18, 72, 8, 8, 18, 68, 105, 98, 99, 47, 55, 67, 52, 68, 54, 48, 65, 65, 57, 53, 69, 53, 65, 55, 53, 53, 56, 66, 48, 65, 51, 54, 52, 56, 54, 48, 57, 55, 57, 67, 65, 51, 52, 66, 55, 70, 70, 56, 65, 65, 70, 50, 53, 53, 66, 56, 55, 65, 70, 57, 69, 56, 55, 57, 51, 55, 52, 52, 55, 48, 67, 69, 67, 48, 18, 9, 8, 7, 18, 5, 117, 111, 115, 109, 111, 26, 79, 10, 68, 105, 98, 99, 47, 52, 54, 66, 52, 52, 56, 57, 57, 51, 50, 50, 70, 51, 67, 68, 56, 53, 52, 68, 50, 68, 52, 54, 68, 69, 69, 70, 56, 56, 49, 57, 53, 56, 52, 54, 55, 67, 68, 68, 52, 66, 51, 66, 49, 48, 48, 56, 54, 68, 65, 52, 57, 50, 57, 54, 66, 66, 69, 68, 57, 52, 66, 69, 68, 18, 7, 49, 48, 48, 48, 48, 48, 48, 34, 7, 49, 53, 50, 53, 50, 54, 52]
+        }],
+        memo: '',
+        source: null,
+        fee: {
+          gas: '900000',
+          amount: [{
+            denom: 'uosmo',
+            amount: '0'
+          }]
+        },
+        signType: 'AMINO',
+        rpcUrl: ''
+      },
+      rawTransfer: null
+    },
+    solanaTransaction: null,
+    evmTransaction: null,
+    evmApprovalTransaction: null,
+    transferTransaction: null,
+    diagnosisUrl: null,
+    internalSteps: null
+  }]
+}, {
+  creationTime: '1673164511955',
+  finishTime: '1673164550137',
+  requestId: '51e211d9-d61c-45d2-a4d4-1f9f7f90ee85',
+  inputAmount: '1',
+  wallets: {
+    OSMOSIS: {
+      walletType: 'keplr',
+      address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl'
+    }
+  },
+  status: 'success',
+  isPaused: false,
+  extraMessage: null,
+  extraMessageSeverity: 'info',
+  extraMessageDetail: '',
+  extraMessageErrorCode: null,
+  networkStatusExtraMessage: null,
+  networkStatusExtraMessageDetail: null,
+  lastNotificationTime: null,
+  settings: {
+    slippage: '1.0',
+    disabledSwappersIds: [],
+    disabledSwappersGroups: []
+  },
+  simulationResult: {
+    outputAmount: '1.540670',
+    swaps: [{
+      // @ts-ignore
+      result: [],
+      swapperId: 'Osmosis',
+      swapperType: 'DEX',
+      swapperLogo: '',
+      from: {
+        symbol: 'JUNO',
+        logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+        address: 'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+        blockchain: 'OSMOSIS',
+        blockchainLogo: '',
+        decimals: 6,
+        usdPrice: 1.1091996179668873
+      },
+      to: {
+        symbol: 'OSMO',
+        logo: 'https://api.rango.exchange/i/mJQPS2',
+        address: null,
+        blockchain: 'OSMOSIS',
+        decimals: 6,
+        blockchainLogo: '',
+        usdPrice: 0.7192435454440882
+      },
+      fromAmount: '1.000000',
+      fromAmountPrecision: null,
+      fromAmountMinValue: null,
+      fromAmountMaxValue: null,
+      toAmount: '1.540670',
+      fee: [{
+        name: '',
+        asset: {
+          blockchain: 'OSMOSIS',
+          symbol: 'OSMO',
+          address: null
+        },
+        expenseType: 'FROM_SOURCE_WALLET',
+        amount: '0'
+      }],
+      estimatedTimeInSeconds: 45,
+      swapChainType: 'INTRA_CHAIN',
+      routes: [{
+        nodes: [{
+          nodes: [{
+            marketName: 'pool#498',
+            marketId: null,
+            percent: 1
+          }],
+          from: 'JUNO',
+          fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+          fromAddress: 'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+          fromBlockchain: 'OSMOSIS',
+          to: 'ATOM',
+          toLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+          toAddress: 'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+          toBlockchain: 'OSMOSIS'
+        }, {
+          nodes: [{
+            marketName: 'pool#8',
+            marketId: null,
+            percent: 1
+          }],
+          from: 'ATOM',
+          fromLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+          fromAddress: 'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+          fromBlockchain: 'OSMOSIS',
+          to: 'IRIS',
+          toLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+          toAddress: 'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+          toBlockchain: 'OSMOSIS'
+        }, {
+          nodes: [{
+            marketName: 'pool#7',
+            marketId: null,
+            percent: 1
+          }],
+          from: 'IRIS',
+          fromLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+          fromAddress: 'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+          fromBlockchain: 'OSMOSIS',
+          to: 'OSMO',
+          toLogo: 'https://api.rango.exchange/tokens/COSMOS/OSMO.png',
+          toAddress: null,
+          toBlockchain: 'OSMOSIS'
+        }]
+      }],
+      recommendedSlippage: null,
+      timeStat: {
+        min: 6,
+        avg: 40,
+        max: 241
+      },
+      includesDestinationTx: false
+    }]
+  },
+  validateBalanceOrFee: true,
+  steps: [{
+    id: 1,
+    fromBlockchain: 'OSMOSIS',
+    fromSymbol: 'JUNO',
+    fromSymbolAddress: 'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+    fromDecimals: 6,
+    fromAmountPrecision: null,
+    fromAmountMinValue: null,
+    swapperLogo: '',
+    swapperType: '',
+    fromAmountMaxValue: null,
+    toBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+    fromBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+    toBlockchain: 'OSMOSIS',
+    fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+    toSymbol: 'OSMO',
+    toSymbolAddress: null,
+    toDecimals: 6,
+    toLogo: 'https://api.rango.exchange/i/mJQPS2',
+    startTransactionTime: 1673164519916,
+    swapperId: 'Osmosis',
+    expectedOutputAmountHumanReadable: '1.540670',
+    outputAmount: '1.540658',
+    status: 'success',
+    networkStatus: null,
+    executedTransactionId: '0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+    explorerUrl: [{
+      url: 'https://www.mintscan.io/osmosis/txs/0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+      description: null
+    }],
+    cosmosTransaction: {
+      type: TransactionType.COSMOS,
+      fromWalletAddress: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+      blockChain: 'OSMOSIS',
+      data: {
+        chainId: 'osmosis-1',
+        account_number: 102721,
+        sequence: '308',
+        msgs: [{
+          __type: 'OsmosisSwapMessage',
+          type: 'osmosis/gamm/swap-exact-amount-in',
+          value: {
+            sender: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+            routes: [{
+              pool_id: '498',
+              token_out_denom: 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2'
+            }, {
+              pool_id: '8',
+              token_out_denom: 'ibc/7C4D60AA95E5A7558B0A364860979CA34B7FF8AAF255B87AF9E879374470CEC0'
+            }, {
+              pool_id: '7',
+              token_out_denom: 'uosmo'
+            }],
+            token_in: {
+              denom: 'ibc/46B44899322F3CD854D2D46DEEF881958467CDD4B3B10086DA49296BBED94BED',
+              amount: '1000000'
+            },
+            token_out_min_amount: '1525264'
+          }
+        }],
+        protoMsgs: [{
+          type_url: '/osmosis.gamm.v1beta1.MsgSwapExactAmountIn',
+          value: [10, 43, 111, 115, 109, 111, 49, 117, 110, 102, 50, 114, 99, 121, 116, 106, 120, 102, 112, 122, 56, 120, 56, 97, 114, 54, 51, 104, 52, 113, 101, 102, 116, 97, 100, 112, 116, 103, 53, 116, 48, 110, 113, 99, 108, 18, 73, 8, -14, 3, 18, 68, 105, 98, 99, 47, 50, 55, 51, 57, 52, 70, 66, 48, 57, 50, 68, 50, 69, 67, 67, 68, 53, 54, 49, 50, 51, 67, 55, 52, 70, 51, 54, 69, 52, 67, 49, 70, 57, 50, 54, 48, 48, 49, 67, 69, 65, 68, 65, 57, 67, 65, 57, 55, 69, 65, 54, 50, 50, 66, 50, 53, 70, 52, 49, 69, 53, 69, 66, 50, 18, 72, 8, 8, 18, 68, 105, 98, 99, 47, 55, 67, 52, 68, 54, 48, 65, 65, 57, 53, 69, 53, 65, 55, 53, 53, 56, 66, 48, 65, 51, 54, 52, 56, 54, 48, 57, 55, 57, 67, 65, 51, 52, 66, 55, 70, 70, 56, 65, 65, 70, 50, 53, 53, 66, 56, 55, 65, 70, 57, 69, 56, 55, 57, 51, 55, 52, 52, 55, 48, 67, 69, 67, 48, 18, 9, 8, 7, 18, 5, 117, 111, 115, 109, 111, 26, 79, 10, 68, 105, 98, 99, 47, 52, 54, 66, 52, 52, 56, 57, 57, 51, 50, 50, 70, 51, 67, 68, 56, 53, 52, 68, 50, 68, 52, 54, 68, 69, 69, 70, 56, 56, 49, 57, 53, 56, 52, 54, 55, 67, 68, 68, 52, 66, 51, 66, 49, 48, 48, 56, 54, 68, 65, 52, 57, 50, 57, 54, 66, 66, 69, 68, 57, 52, 66, 69, 68, 18, 7, 49, 48, 48, 48, 48, 48, 48, 34, 7, 49, 53, 50, 53, 50, 54, 52]
+        }],
+        memo: '',
+        source: null,
+        fee: {
+          gas: '900000',
+          amount: [{
+            denom: 'uosmo',
+            amount: '0'
+          }]
+        },
+        signType: 'AMINO',
+        rpcUrl: ''
+      },
+      rawTransfer: null
+    },
+    solanaTransaction: null,
+    evmTransaction: null,
+    evmApprovalTransaction: null,
+    transferTransaction: null,
+    diagnosisUrl: null,
+    internalSteps: null
+  }]
+}];
+function HistoryPage() {
+  const navigate = useNavigate();
+  return React.createElement(History, {
+    list: pendingSwap,
+    onSwapClick: () => navigate(navigationRoutes.swapDetails),
+    onBack: () => {
+      navigate(-1);
+    }
+  });
+}
+
+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: "Retry"
+  }, React.createElement(Button, {
+    variant: "ghost",
+    onClick: onClickRefresh.bind(null)
+  }, React.createElement(RetryIcon, {
+    size: 28
+  }))), React.createElement(Tooltip, {
+    content: "Transactions History"
+  }, React.createElement(Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.history)
+  }, 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 HeaderContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: '$16 0'
+});
+function Header(props) {
+  const {
+    onClickRefresh
+  } = props;
+  return React.createElement(HeaderContainer, null, React.createElement(Typography, {
+    variant: "h4"
+  }, "SWAP"), React.createElement(HeaderButtons, {
+    onClickRefresh: onClickRefresh
+  }));
+}
+
+const Box = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%'
+});
+const Container = /*#__PURE__*/styled('div', {
+  boxSizing: 'border-box',
+  backgroundColor: '$neutrals300',
+  borderRadius: '$5',
+  padding: '$8 0',
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$8 $16'
+  }
+});
+const StyledImage = /*#__PURE__*/styled('img', {
+  width: '$24',
+  maxHeight: '$24'
+});
+const Options = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '0 $8'
+});
+const ImagePlaceholder = /*#__PURE__*/styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px'
+});
+const OutputContainer = /*#__PURE__*/styled('div', {
+  height: '$48',
+  borderRadius: '$5',
+  flexGrow: 1,
+  width: '70%',
+  backgroundColor: '$background',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8'
+});
+function TokenInfo(props) {
+  const {
+    type,
+    chain,
+    token
+  } = props;
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const balances = useWalletsStore.use.balances();
+  const navigate = useNavigate();
+  const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
+  const tokenBalanceReal = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.decimal) : '0';
+  const ItemSuffix = React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
+    color: "error",
+    size: 24
+  }), React.createElement(AngleDownIcon, null));
+  return React.createElement(Box, null, React.createElement("div", null, React.createElement(Typography, {
+    variant: "body2"
+  }, type)), React.createElement(Container, null, props.type === 'From' && React.createElement(Options, null, React.createElement("div", {
+    className: "balance",
+    onClick: () => {
+      if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
+    }
+  }, React.createElement(Button, {
+    variant: "ghost",
+    size: "small"
+  }, React.createElement(Typography, {
+    variant: "body2"
+  }, `Max: ${tokenBalance} ${fromToken?.symbol || ''}`)))), React.createElement("div", {
+    className: "form"
+  }, React.createElement(Button, {
+    onClick: () => {
+      navigate(`/${props.type.toLowerCase()}-chain`);
+    },
+    variant: "outlined",
+    disabled: loadingStatus === 'failed',
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage, {
+      src: chain.logo
+    }) : React.createElement(ImagePlaceholder, null),
+    suffix: ItemSuffix,
+    align: "start",
+    size: "large",
+    style: {
+      marginRight: '.5rem'
+    }
+  }, loadingStatus === 'success' && chain ? chain.name : 'Chain'), React.createElement(Button, {
+    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(StyledImage, {
+      src: token.image
+    }) : React.createElement(ImagePlaceholder, null),
+    suffix: ItemSuffix,
+    size: "large",
+    align: "start",
+    style: {
+      marginRight: '.5rem'
+    }
+  }, loadingStatus === 'success' && token ? token.symbol : 'Token'), props.type === 'From' ? React.createElement(TextField, {
+    type: "number",
+    size: "large",
+    autoFocus: true,
+    placeholder: "0",
+    style: {
+      width: '70%',
+      position: 'relative',
+      backgroundColor: '$background !important'
+    },
+    suffix: React.createElement("span", {
+      style: {
+        position: 'absolute',
+        right: '4px',
+        bottom: '2px'
+      }
+    }, React.createElement(Typography, {
+      variant: "caption"
+    }, `$${numberToString(inputUsdValue)}`)),
+    value: props.inputAmount || '',
+    onChange: props.type === 'From' ? event => {
+      props.onAmountChange(event.target.value);
+    } : undefined
+  }) : React.createElement(OutputContainer, null, React.createElement(Typography, {
+    variant: "body1"
+  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'), React.createElement("span", {
+    style: {
+      position: 'absolute',
+      right: '4px',
+      bottom: '2px'
+    }
+  }, React.createElement(Typography, {
+    variant: "caption"
+  }, `$${numberToString(props.outputUsdValue)}`))))));
+}
+
+const Container$1 = /*#__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() {
+  return React.createElement(Container$1, null, React.createElement(Typography, {
+    variant: "caption"
+  }, "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'
+});
+
+function useBestRoute() {
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const slippage = useSettingsStore.use.slippage();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const [count, setCount] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [data, setData] = useState(null);
+  const abortControllerRef = useRef(null);
+  const retry = () => {
+    setCount(prev => prev + 1);
+  };
+  useEffect(() => {
+    if (abortControllerRef.current) abortControllerRef.current.abort();
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+    if (!!fromToken && !!toToken && !!inputAmount) {
+      if (!!data) setData(null);
+      const requestBody = {
+        amount: inputAmount?.toString(),
+        connectedWallets: [],
+        selectedWallets: {},
+        checkPrerequisites: false,
+        swapperGroups: disabledLiquiditySources,
+        swappersGroupsExclude: true,
+        from: {
+          address: fromToken.address,
+          blockchain: fromToken.blockchain,
+          symbol: fromToken.symbol
+        },
+        to: {
+          address: toToken.address,
+          blockchain: toToken.blockchain,
+          symbol: toToken.symbol
+        }
+      };
+      setLoading(true);
+      httpService.getBestRoute(requestBody, {
+        signal: abortControllerRef.current.signal
+      }).then(res => {
+        setData(res);
+        setLoading(false);
+        abortControllerRef.current = null;
+      }).catch(error => {
+        if (error.code === 'ERR_CANCELED') return;
+        setError(error.message);
+        setLoading(false);
+      });
+    }
+  }, [fromToken, toToken, inputAmount, count, slippage, customSlippage, disabledLiquiditySources.length]);
+  return {
+    loading,
+    error,
+    data,
+    retry
+  };
+}
+
+const errorMessages = {
+  genericServerError: 'Error connecting server, please reload the app and try again'
+};
+
+const Container$2 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const SwitchButtonContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'relative',
+  top: '11px'
+});
+const BestRouteContainer = /*#__PURE__*/styled('div', {
+  width: '100%',
+  paddingTop: '$16'
+});
+const Alerts = /*#__PURE__*/styled('div', {
+  paddingTop: '$16'
+});
+function Home() {
+  const waningMessage = '';
+  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 setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const setBestRoute = useBestRouteStore.use.setBestRoute();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const outputAmount = useBestRouteStore.use.outputAmount();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const accounts = useWalletsStore.use.accounts();
+  const swithFromAndTo = () => {
+    setFromChain(toChain);
+    setFromToken(toToken);
+    setToChain(fromChain);
+    setToToken(fromToken);
+    setInputAmount(outputAmount?.toString() || '');
+    setCount(prev => prev + 1);
+  };
+  const {
+    data,
+    loading: fetchingBestRoute,
+    error: bestRouteError,
+    retry
+  } = useBestRoute();
+  const noConnectedWallet = accounts.length > 0;
+  const noRoutesFound = !bestRoute?.result;
+  const errorMessage = loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
+  const needsToWarnEthOnPath = false;
+  const showBestRoute = inputAmount && (!!data || fetchingBestRoute || bestRouteError);
+  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
+  const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
+  const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
+  const buttonTitle = getSwapButtonTitle(accounts, fetchingBestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath);
+  const buttonDisabled = loadingMetaStatus != 'success' || fetchingBestRoute || highValueLoss || noConnectedWallet && noRoutesFound || hasLimitError(bestRoute);
+  useEffect(() => {
+    setBestRoute(data);
+  }, [data]);
+  return React.createElement(Container$2, null, React.createElement(Header, {
+    onClickRefresh: retry
+  }), React.createElement(TokenInfo, {
+    type: "From",
+    chain: fromChain,
+    token: fromToken,
+    onAmountChange: setInputAmount,
+    inputAmount: inputAmount
+  }), React.createElement(SwitchButtonContainer, null, React.createElement(Button, {
+    variant: "ghost",
+    onClick: swithFromAndTo
+  }, React.createElement(VerticalSwapIcon, {
+    size: 36
+  }), isRouterInContext && React.createElement(SwithFromAndTo, {
+    count: count
+  }))), React.createElement(TokenInfo, {
+    type: "To",
+    chain: toChain,
+    token: toToken,
+    outputAmount: outputAmount,
+    outputUsdValue: outputUsdValue
+  }), showBestRoute && React.createElement(BestRouteContainer, null, React.createElement(BestRoute, {
+    error: bestRouteError,
+    loading: fetchingBestRoute,
+    data: data
+  })), (errorMessage || waningMessage) && React.createElement(Alerts, null, errorMessage && React.createElement(Alert, {
+    description: errorMessage,
+    type: "error"
+  }), waningMessage ), React.createElement(Footer, null, React.createElement(Button, {
+    type: "primary",
+    align: "grow",
+    size: "large",
+    disabled: buttonDisabled,
+    onClick: () => {
+      if (buttonTitle === 'Connect Wallet') navigate(navigationRoutes.wallets);else {
+        navigate(navigationRoutes.confirmWallets);
+      }
+    }
+  }, buttonTitle), React.createElement(BottomLogo, null)));
+}
+
+function LiquiditySourcePage() {
+  const {
+    swappers
+  } = useMetaStore.use.meta();
+  const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const toggleAllLiquiditySources = useSettingsStore.use.toggleAllLiquiditySources();
+  const navigate = useNavigate();
+  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: uniqueSwappersGroups,
+    onChange: liquiditySource => toggleLiquiditySource(liquiditySource.title),
+    onBack: () => {
+      navigate(-1);
+    }
+  });
+}
+
+function SelectChainPage(props) {
+  const {
+    type
+  } = props;
+  const accounts = useWalletsStore.use.accounts();
+  const {
+    blockchains
+  } = useMetaStore.use.meta();
+  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 setFromToken = useBestRouteStore.use.setFromToken();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const navigate = useNavigate();
+  const [list, setList] = useState(blockchains);
+  useEffect(() => {
+    let chainSortedByConnectedWallets = [];
+    if (accounts.length !== 0) {
+      const connectedChains = removeDuplicateFrom(accounts.map(account => account.chain));
+      chainSortedByConnectedWallets = blockchains.sort((blockchainA, blockchainB) => connectedChains.lastIndexOf(blockchainA.name) - connectedChains.lastIndexOf(blockchainB.name));
+    } else {
+      chainSortedByConnectedWallets = blockchains;
+    }
+    setList(chainSortedByConnectedWallets);
+  }, [blockchains.length, accounts.length]);
+  return React.createElement(BlockchainSelector, {
+    type: type === 'from' ? 'Source' : 'Destination',
+    list: list,
+    selected: type === 'from' ? fromChain : toChain,
+    loadingStatus: loadingStatus,
+    onChange: chain => {
+      if (type === 'from') setFromChain(chain);else setToChain(chain);
+      if (type === 'from' && fromChain?.name != chain.name) setFromToken(null);
+      if (type === 'to' && toChain?.name != chain.name) setToToken(null);
+      navigate(-1);
+    },
+    onBack: navigate.bind(null, -1)
+  });
+}
+
+function SelectTokenPage(props) {
+  const {
+    type
+  } = props;
+  const navigate = useNavigate();
+  const {
+    tokens
+  } = useMetaStore.use.meta();
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const balance = useWalletsStore.use.balances();
+  const tokenWithSelectedChain = tokens.filter(token => {
+    if (type === 'from') return token.blockchain === fromChain?.name;
+    return token.blockchain === toChain?.name;
+  });
+  const TokensWithBalance = tokenWithSelectedChain.map(token => {
+    const tokenAmount = numberToString(new BigNumber(getBalanceFromWallet(balance, token.blockchain, token.symbol, token.address)?.amount || ZERO));
+    let tokenUsdValue = '';
+    if (token.usdPrice) tokenUsdValue = numberToString(new BigNumber(getBalanceFromWallet(balance, token.blockchain, token.symbol, token.address)?.amount || ZERO).multipliedBy(token.usdPrice));
+    return {
+      ...token,
+      balance: {
+        amount: tokenAmount !== '0' ? tokenAmount : '',
+        usdValue: tokenUsdValue !== '0' ? tokenUsdValue : ''
+      }
+    };
+  });
+  const sortedTokenList = sortedTokens(TokensWithBalance, type, balance);
+  return React.createElement(TokenSelector, {
+    type: type === 'from' ? 'Source' : 'Destination',
+    list: sortedTokenList,
+    selected: type === 'from' ? fromToken : toToken,
+    onChange: token => {
+      if (type === 'from') setFromToken(token);else setToToken(token);
+      navigate(-1);
+    },
+    onBack: navigate.bind(null, -1)
+  });
+}
+
+function SettingsPage() {
+  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();
+  const navigate = useNavigate();
+  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(Settings, {
+    slippages: [1, 2, 3, 4],
+    selectedSlippage: slippage,
+    onSlippageChange: slippage => setSlippage(slippage),
+    liquiditySources: uniqueSwappersGroups,
+    selectedLiquiditySources: uniqueSwappersGroups.filter(s => s.selected),
+    onLiquiditySourcesClick: () => navigate(navigationRoutes.liquiditySources),
+    onBack: navigate.bind(null, -1),
+    customSlippage: customSlippage || NaN,
+    onCustomSlippageChange: setCustomSlippage,
+    minSlippage: 1,
+    maxSlippage: 10,
+    selectedTheme: theme,
+    onThemeChange: setTheme
+  });
+}
+
+const ListContainer = /*#__PURE__*/styled('div', {
+  display: 'grid',
+  gap: '.5rem',
+  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
+  height: '450px',
+  alignContent: 'baseline'
+});
+const AlertContainer = /*#__PURE__*/styled('div', {
+  paddingBottom: '$16'
+});
+function WalletsPage() {
+  const navigate = useNavigate();
+  const {
+    state,
+    disconnect,
+    getWalletInfo,
+    connect
+  } = useWallets();
+  const wallets = getlistWallet(state, getWalletInfo, Object.values(WalletType));
+  const [walletErrorMessage, setWalletErrorMessage] = useState('');
+  const onSelectWallet = async type => {
+    const wallet = state(type);
+    try {
+      if (walletErrorMessage) setWalletErrorMessage('');
+      if (wallet.connected) {
+        await disconnect(type);
+      } else {
+        await connect(type);
+      }
+    } catch (e) {
+      setWalletErrorMessage('Error: ' + e.message);
+    }
+  };
+  return React.createElement(SecondaryPage, {
+    title: "Select Wallet",
+    textField: false,
+    onBack: () => {
+      navigate(-1);
+    },
+    Content: React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
+      type: "error",
+      description: walletErrorMessage
+    })), React.createElement(ListContainer, null, wallets.map((info, index) => React.createElement(Wallet, Object.assign({}, info, {
+      key: index,
+      onClick: onSelectWallet
+    })))))
+  });
+}
+
+function ConfirmWalletsPage() {
+  const navigate = useNavigate();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
+  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
+  const {
+    getWalletInfo
+  } = useWallets();
+  const confirmDisabled = !requiredWallets(bestRoute).every(chain => selectedWallets.map(wallet => wallet.chain).includes(chain));
+  useEffect(() => {
+    initSelectedWallets();
+  }, []);
+  return React.createElement(ConfirmWallets, {
+    requiredWallets: getRequiredChains(bestRoute),
+    selectableWallets: getSelectableWallets(accounts, selectedWallets, getWalletInfo, getRequiredChains(bestRoute)),
+    onBack: () => navigate(-1),
+    swap: bestRoute,
+    onConfirm: () => navigate(navigationRoutes.confirmSwap),
+    onChange: wallet => setSelectedWallet(wallet),
+    confirmDisabled: confirmDisabled
+  });
+}
+
+//TODO: remove mock data after queue manager integration
+const pendingSwap$1 = {
+  creationTime: '1675837879344',
+  finishTime: '1675842500799',
+  requestId: 'c40b81cd-fdac-4dad-bfef-1c7b2cff715f',
+  inputAmount: '2',
+  wallets: {
+    POLYGON: {
+      walletType: 'metamask',
+      address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c'
+    },
+    SOLANA: {
+      walletType: 'phantom',
+      address: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk'
+    }
+  },
+  status: 'success',
+  isPaused: false,
+  extraMessage: null,
+  extraMessageSeverity: 'info',
+  extraMessageDetail: '',
+  extraMessageErrorCode: null,
+  networkStatusExtraMessage: '',
+  networkStatusExtraMessageDetail: '',
+  lastNotificationTime: null,
+  settings: {
+    slippage: '13.0',
+    disabledSwappersIds: ['PancakeSwapBsc', 'ThorChain', 'Horizon Bridge', 'OneInchOptimism', 'OneInchGnosis', 'OneInchBsc', 'OneInchArbitrum', 'OpenOceanFantom', 'SushiHarmony', 'SushiArbitrum', 'OkcSwap', 'CherrySwap', 'Osmosis', 'SolanaWrapper', 'Jupiter', 'stargate', 'AnySwap', 'Satellite', 'Diffusion', 'JunoSwap', 'PangolinSwap', 'MMFinance', 'CronaSwap', 'VVSFinance', 'MDexHeco', 'ParaSwap Polygon', 'ParaSwap Bsc', 'ParaSwap Avalanche', 'AuroraSwap', 'Across', 'Arbitrum Bridge', 'TrisolarisSwap', 'Polygon Bridge', 'SpookySwap', 'Rainbow Bridge', 'Lido', 'Symbiosis', 'Avalanche Bridge', 'VoltageSwap', 'Stargate Aggregator', 'Across Aggregator', 'THORChain Aggregator', 'CBridge Aggregator', 'AnySwap Aggregator', 'Hyphen Aggregator', 'Optimism Bridge', 'OolongSwap', 'QuickSwap', 'StellaSwap', 'Hyphen', 'ViperSwap', 'cBridge v2.0', 'FinKujira', 'Hop', 'BeamSwap', 'SolarbeamSwap', 'Sifchain', 'Wormhole', 'EthUniSwapV2', 'OneInchPolygon'],
+    disabledSwappersGroups: []
+  },
+  simulationResult: {
+    outputAmount: '0.084249153',
+    swaps: [{
+      swapperId: 'QuickSwap',
+      swapperLogo: 'https://api.rango.exchange/swappers/quick-swap.png',
+      swapperType: 'DEX',
+      from: {
+        symbol: 'USDC',
+        logo: 'https://api.rango.exchange/i/ns0AMf',
+        blockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+        address: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+        blockchain: 'POLYGON',
+        decimals: 6,
+        usdPrice: 0.999792
+      },
+      to: {
+        symbol: 'SOL',
+        logo: 'https://api.rango.exchange/i/YhJ1nK',
+        blockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+        address: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+        blockchain: 'POLYGON',
+        decimals: 9,
+        usdPrice: 23.700913462284028
+      },
+      fromAmount: '2.000000',
+      fromAmountPrecision: null,
+      fromAmountMinValue: null,
+      fromAmountMaxValue: null,
+      fromAmountRestrictionType: null,
+      toAmount: '0.084249153',
+      fee: [{
+        asset: {
+          blockchain: 'POLYGON',
+          symbol: 'USDC',
+          address: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174'
+        },
+        expenseType: 'DECREASE_FROM_OUTPUT',
+        amount: '0.006000000000000000124900090270330110797658562660217285156250000000',
+        name: 'Swapper Fee'
+      }, {
+        asset: {
+          blockchain: 'POLYGON',
+          symbol: 'MATIC',
+          address: null
+        },
+        expenseType: 'FROM_SOURCE_WALLET',
+        amount: '0.032758180196833611',
+        name: 'Network Fee'
+      }],
+      estimatedTimeInSeconds: 60,
+      swapChainType: 'INTER_CHAIN',
+      routes: [{
+        nodes: [{
+          nodes: [{
+            marketName: 'QuickSwap',
+            marketId: 'QuickSwap',
+            percent: 1
+          }],
+          from: 'USDC',
+          fromLogo: '',
+          fromAddress: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+          fromBlockchain: 'POLYGON',
+          to: 'SOL',
+          toLogo: '',
+          toAddress: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+          toBlockchain: 'POLYGON'
+        }]
+      }],
+      recommendedSlippage: null,
+      warnings: [],
+      timeStat: {
+        min: 7,
+        avg: 59,
+        max: 736
+      },
+      includesDestinationTx: false,
+      internalSwaps: null,
+      maxRequiredSign: 1,
+      fromAsset: {
+        blockchain: 'POLYGON',
+        symbol: 'USDC',
+        address: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174'
+      },
+      toAsset: {
+        blockchain: 'POLYGON',
+        symbol: 'SOL',
+        address: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912'
+      }
+    }, {
+      swapperId: 'Wormhole',
+      swapperLogo: 'https://api.rango.exchange/swappers/wormhole.png',
+      swapperType: 'BRIDGE',
+      from: {
+        symbol: 'SOL',
+        logo: 'https://api.rango.exchange/i/YhJ1nK',
+        blockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+        address: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+        blockchain: 'POLYGON',
+        decimals: 9,
+        usdPrice: 23.700913462284028
+      },
+      to: {
+        symbol: 'SOL',
+        logo: 'https://api.rango.exchange/i/eLHYrb',
+        blockchainLogo: 'https://api.rango.exchange/blockchains/solana.svg',
+        address: null,
+        blockchain: 'SOLANA',
+        decimals: 9,
+        usdPrice: 23.97093428787272
+      },
+      fromAmount: '0.084249153',
+      fromAmountPrecision: null,
+      fromAmountMinValue: null,
+      fromAmountMaxValue: null,
+      fromAmountRestrictionType: null,
+      toAmount: '0.084249153',
+      fee: [{
+        asset: {
+          blockchain: 'POLYGON',
+          symbol: 'MATIC',
+          address: null
+        },
+        expenseType: 'FROM_SOURCE_WALLET',
+        amount: '0.042205949048288939',
+        name: 'Network Fee'
+      }, {
+        asset: {
+          blockchain: 'SOLANA',
+          symbol: 'SOL',
+          address: null
+        },
+        expenseType: 'FROM_DESTINATION_WALLET',
+        amount: '0.000070000',
+        name: 'Swapper Fee'
+      }],
+      estimatedTimeInSeconds: 150,
+      swapChainType: 'INTRA_CHAIN',
+      routes: null,
+      recommendedSlippage: null,
+      warnings: [],
+      timeStat: {
+        min: 42,
+        avg: 146,
+        max: 5582
+      },
+      includesDestinationTx: true,
+      internalSwaps: null,
+      maxRequiredSign: 6,
+      fromAsset: {
+        blockchain: 'POLYGON',
+        symbol: 'SOL',
+        address: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912'
+      },
+      toAsset: {
+        blockchain: 'SOLANA',
+        symbol: 'SOL',
+        address: null
+      }
+    }],
+    resultType: 'OK'
+  },
+  validateBalanceOrFee: true,
+  steps: [{
+    id: 1,
+    fromBlockchain: 'POLYGON',
+    fromSymbol: 'USDC',
+    fromSymbolAddress: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+    fromDecimals: 6,
+    fromAmountPrecision: null,
+    fromAmountMinValue: null,
+    fromAmountMaxValue: null,
+    toBlockchain: 'POLYGON',
+    fromLogo: 'https://api.rango.exchange/i/ns0AMf',
+    fromBlockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+    toBlockchainLogo: 'https://api.rango.exchange/blockchains/solana.svg',
+    toSymbol: 'SOL',
+    toSymbolAddress: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+    toDecimals: 9,
+    toLogo: 'https://api.rango.exchange/i/YhJ1nK',
+    startTransactionTime: 1675837904769,
+    swapperId: 'QuickSwap',
+    swapperLogo: 'https://api.rango.exchange/swappers/quick-swap.png',
+    expectedOutputAmountHumanReadable: '0.084249153',
+    outputAmount: '0.084206923',
+    status: 'success',
+    networkStatus: 'networkChanged',
+    executedTransactionId: '0xb2a6b1b497b660bd58d8583d05425ea1b89fa19efc18c9b3baa501abf5f8cee9',
+    externalTransactionId: null,
+    explorerUrl: [{
+      url: 'https://polygonscan.com/tx/0xb2a6b1b497b660bd58d8583d05425ea1b89fa19efc18c9b3baa501abf5f8cee9',
+      description: 'swap'
+    }],
+    trackingCode: null,
+    cosmosTransaction: null,
+    solanaTransaction: null,
+    evmTransaction: {
+      type: 'EVM',
+      blockChain: 'POLYGON',
+      isApprovalTx: false,
+      from: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+      to: '0x38F7Aa5370439E879370E24AdD063a11Bd74610D',
+      spender: null,
+      data: '0xa60fdfb60000000000000000000000002791bca1f2de4661ed88a30c99a7a9449aa84174000000000000000000000000d93f7e271cb87c23aaa73edc008a79646d1f991200000000000000000000000000000000000000000000000000000000001e84800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000020000000000000000000000000a5e0829caced8ffdd4de3c43696c57f7d7a678ff0000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000010438ed173900000000000000000000000000000000000000000000000000000000001e848000000000000000000000000000000000000000000000000000000000045e6b7b00000000000000000000000000000000000000000000000000000000000000a000000000000000000000000038f7aa5370439e879370e24add063a11bd74610d0000000000000000000000000000000000000000000000000000000063e348d800000000000000000000000000000000000000000000000000000000000000020000000000000000000000002791bca1f2de4661ed88a30c99a7a9449aa84174000000000000000000000000d93f7e271cb87c23aaa73edc008a79646d1f991200000000000000000000000000000000000000000000000000000000',
+      value: null,
+      gasLimit: '0x62f20',
+      gasPrice: '247516799843',
+      nonce: null
+    },
+    evmApprovalTransaction: null,
+    transferTransaction: null,
+    diagnosisUrl: null,
+    internalSteps: null
+  }, {
+    id: 2,
+    fromBlockchain: 'POLYGON',
+    fromSymbol: 'SOL',
+    fromSymbolAddress: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+    fromDecimals: 9,
+    fromAmountPrecision: null,
+    fromAmountMinValue: null,
+    fromAmountMaxValue: null,
+    toBlockchain: 'SOLANA',
+    fromLogo: 'https://api.rango.exchange/i/YhJ1nK',
+    fromBlockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+    toBlockchainLogo: 'https://api.rango.exchange/blockchains/solana.svg',
+    toSymbol: 'SOL',
+    toSymbolAddress: null,
+    toDecimals: 9,
+    toLogo: 'https://api.rango.exchange/i/eLHYrb',
+    startTransactionTime: 1675842459076,
+    swapperId: 'Wormhole',
+    swapperLogo: 'https://api.rango.exchange/swappers/wormhole.png',
+    expectedOutputAmountHumanReadable: '0.084249153',
+    outputAmount: '0.08420692',
+    status: 'failed',
+    networkStatus: 'networkChanged',
+    executedTransactionId: '5MGhqrNRwRKkHGU11S37mgF7LscXWhAvwBeAWEdxcmV9AD6bNqig6iCCzC4mKBH41JBexKb6kj4axLfcH4XZQsT9',
+    externalTransactionId: null,
+    explorerUrl: [{
+      url: 'https://solscan.io/tx/2wvqHEy5hCDfpwZM5sZhBpFxXZL7p6PRqpDdCZGpGF85deGQU9oiBC9Jgoszdo8x9hjkySktGPYzubcXP8pxW3H4',
+      description: 'Associate Token'
+    }, {
+      url: 'https://polygonscan.com/tx/0xcdd0c684fc203d41a0eaacfba2201ab0a48845bb6d0f0805fb4a70a0f971a599',
+      description: 'Transfer'
+    }, {
+      url: 'https://solscan.io/tx/5rc5EHfMrChB749RsJew1ze35yQMddafkQqy5JFqcdKPJ6j2NiggGT7UDmFDAXzP2AwHGyFj2XjaYr7RQjjc1KmH',
+      description: 'Verify vaa 1'
+    }, {
+      url: 'https://solscan.io/tx/5xNgHvdzu63fmF7uojrHuqcHC3NgErpdGiSg38X7KZ7EEjTyPWt8W1QUtuyUFcNcSjGkFGrGzfnkRUbe4Hj6oY2v',
+      description: 'Verify vaa 2'
+    }, {
+      url: 'https://solscan.io/tx/3FnXLYwwpc93o2TyjKNDfiBcRDZ9W1qJVdmCjTRw3kz4Jrwjr5zQzLSbsbbBzqFNMSxBFcUDaiQ7pP4DL5coUGq',
+      description: 'Post vaa'
+    }, {
+      url: 'https://solscan.io/tx/5MGhqrNRwRKkHGU11S37mgF7LscXWhAvwBeAWEdxcmV9AD6bNqig6iCCzC4mKBH41JBexKb6kj4axLfcH4XZQsT9',
+      description: 'Redeem'
+    }],
+    trackingCode: null,
+    cosmosTransaction: null,
+    solanaTransaction: {
+      type: 'SOLANA',
+      blockChain: 'SOLANA',
+      from: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+      identifier: 'redeem',
+      instructions: [{
+        keys: [{
+          pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+          isSigner: true,
+          isWritable: true
+        }, {
+          pubkey: 'DapiQYH3BGonhN8cngWcXQ6SrqSm3cwysoznoHr6Sbsx',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: 'Wf8aqunuZ9y1tprCihMateij299Pa57XL15a6EQz9qt',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: 'FTWSFuqyc6B5BbarBzuHdBofA2ks12eyRNmUfKmDiUN1',
+          isSigner: false,
+          isWritable: true
+        }, {
+          pubkey: 'J6fNPeeJc1E2zDRUtvD9aaC9kBsEq7JaFr1oa97DAJhj',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: '8nUPRxuXUJPbWiCbqCPrVLkmXqR8LdifLrRW3VjCQDhZ',
+          isSigner: false,
+          isWritable: true
+        }, {
+          pubkey: '8nUPRxuXUJPbWiCbqCPrVLkmXqR8LdifLrRW3VjCQDhZ',
+          isSigner: false,
+          isWritable: true
+        }, {
+          pubkey: '2nQNF8F9LLWMqdjymiLK2u8HoHMvYa4orCXsp3w65fQ2',
+          isSigner: false,
+          isWritable: true
+        }, {
+          pubkey: 'So11111111111111111111111111111111111111112',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: 'GugU1tP7doLeTw9hQP51xRJyS8Da1fWxuiy2rVrnMD2m',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: 'SysvarRent111111111111111111111111111111111',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: '11111111111111111111111111111111',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: 'worm2ZoG2kUd4vFXhvjh93UUH596ayRfgQ2MgjNMTth',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: 'TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA',
+          isSigner: false,
+          isWritable: false
+        }],
+        programId: 'wormDTUJ6AWPNvk59vGQbDvGJmqbDTdgWgAqcLBCgUb',
+        data: [2]
+      }, {
+        keys: [{
+          pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+          isSigner: true,
+          isWritable: true
+        }, {
+          pubkey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+          isSigner: true,
+          isWritable: true
+        }],
+        programId: '11111111111111111111111111111111',
+        data: [0, 0, 0, 0, -16, 29, 31, 0, 0, 0, 0, 0, -91, 0, 0, 0, 0, 0, 0, 0, 6, -35, -10, -31, -41, 101, -95, -109, -39, -53, -31, 70, -50, -21, 121, -84, 28, -76, -123, -19, 95, 91, 55, -111, 58, -116, -11, -123, 126, -1, 0, -87]
+      }, {
+        keys: [{
+          pubkey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+          isSigner: false,
+          isWritable: true
+        }, {
+          pubkey: 'So11111111111111111111111111111111111111112',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+          isSigner: false,
+          isWritable: false
+        }, {
+          pubkey: 'SysvarRent111111111111111111111111111111111',
+          isSigner: false,
+          isWritable: false
+        }],
+        programId: 'TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA',
+        data: [1]
+      }, {
+        keys: [{
+          pubkey: '8nUPRxuXUJPbWiCbqCPrVLkmXqR8LdifLrRW3VjCQDhZ',
+          isSigner: false,
+          isWritable: true
+        }, {
+          pubkey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+          isSigner: false,
+          isWritable: true
+        }, {
+          pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+          isSigner: true,
+          isWritable: false
+        }],
+        programId: 'TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA',
+        data: [3, 72, -27, 4, 5, 0, 0, 0, 0]
+      }, {
+        keys: [{
+          pubkey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+          isSigner: false,
+          isWritable: true
+        }, {
+          pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+          isSigner: false,
+          isWritable: true
+        }, {
+          pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+          isSigner: true,
+          isWritable: false
+        }],
+        programId: 'TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA',
+        data: [9]
+      }],
+      recentBlockhash: '2wBCvR3jVNj6wzL8vHSuqTRtxBYiwhtoY6Gkp6WaBxSG',
+      signatures: [{
+        publicKey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+        signature: [-116, 17, -5, 86, -122, 120, -7, -53, -29, -15, -70, -100, 16, 48, 113, -42, 8, 126, 75, -13, 63, -31, -17, 1, 74, 85, 77, 90, 98, -15, 104, 63, 4, -74, 45, -3, -3, -117, -24, -56, 20, -89, -40, 33, 125, -120, -44, -75, 17, 69, 20, -48, 106, 48, 16, -19, 83, 123, -77, 93, -20, -27, -77, 7]
+      }],
+      serializedMessage: null
+    },
+    evmTransaction: null,
+    evmApprovalTransaction: null,
+    transferTransaction: null,
+    diagnosisUrl: null,
+    internalSteps: [{
+      name: 'associate token address',
+      state: 'SUCCESSED',
+      current: false
+    }, {
+      name: 'transfer',
+      state: 'SUCCESSED',
+      current: false
+    }, {
+      name: 'signed vaa',
+      state: 'SUCCESSED',
+      current: false
+    }, {
+      name: 'verify vaa#1',
+      state: 'SUCCESSED',
+      current: false
+    }, {
+      name: 'verify vaa#2',
+      state: 'SUCCESSED',
+      current: false
+    }, {
+      name: 'post vaa',
+      state: 'SUCCESSED',
+      current: false
+    }, {
+      name: 'redeem',
+      state: 'SUCCESSED',
+      current: true
+    }]
+  }]
+};
+
+function SwapDetailsPage() {
+  const navigate = useNavigate();
+  return React.createElement(SwapHistory, {
+    onBack: navigate.bind(null, -1),
+    pendingSwap: pendingSwap$1
+  });
+}
+
+const AppRoutes = () => useRoutes([{
+  path: navigationRoutes.home,
+  element: React.createElement(Home, null)
+}, {
+  path: navigationRoutes.fromChain,
+  element: React.createElement(SelectChainPage, {
+    type: "from"
+  })
+}, {
+  path: navigationRoutes.toChain,
+  element: React.createElement(SelectChainPage, {
+    type: "to"
+  })
+}, {
+  path: navigationRoutes.fromToken + '/*',
+  element: React.createElement(SelectTokenPage, {
+    type: "from"
+  })
+}, {
+  path: navigationRoutes.toToken,
+  element: React.createElement(SelectTokenPage, {
+    type: "to"
+  })
+}, {
+  path: navigationRoutes.settings,
+  element: React.createElement(SettingsPage, null)
+}, {
+  path: navigationRoutes.liquiditySources,
+  element: React.createElement(LiquiditySourcePage, null)
+}, {
+  path: navigationRoutes.history,
+  element: React.createElement(HistoryPage, null)
+}, {
+  path: navigationRoutes.wallets,
+  element: React.createElement(WalletsPage, null)
+}, {
+  path: navigationRoutes.confirmSwap,
+  element: React.createElement(ConfirmSwapPage, null)
+}, {
+  path: navigationRoutes.confirmWallets,
+  element: React.createElement(ConfirmWalletsPage, null)
+}, {
+  path: navigationRoutes.swapDetails,
+  element: React.createElement(SwapDetailsPage, null)
+}]);
+
+const Header$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end'
+});
+const WalletImage = /*#__PURE__*/styled('img', {
+  width: '$24',
+  height: '$24',
+  marginLeft: -15,
+  marginRight: '$6',
+  borderRadius: '99999px'
+});
+function Layout() {
+  const navigate = useNavigate();
+  const {
+    balances,
+    accounts,
+    selectedWallets
+  } = useWalletsStore();
+  const {
+    getWalletInfo
+  } = useWallets();
+  const filterSelelectedWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
+  const totalBalance = calculateWalletUsdValue(balances);
+  return React.createElement(React.Fragment, null, React.createElement(Header$1, null, React.createElement(Button, {
+    size: "small",
+    suffix: React.createElement(AddWalletIcon, {
+      size: 20
+    }),
+    variant: "ghost",
+    flexContent: true,
+    onClick: () => navigate(navigationRoutes.wallets)
+  }, accounts?.length ? filterSelelectedWallets.map((selectedWallet, index) => React.createElement(WalletImage, {
+    key: index,
+    src: selectedWallet.image
+  })) : React.createElement(React.Fragment, null), React.createElement(Typography, {
+    variant: "body2"
+  }, !accounts?.length ? 'Connect Wallet' : `$${totalBalance || 0}`))), React.createElement(AppRoutes, null));
+}
+
+const globalStyles = /*#__PURE__*/globalCss({
+  '*': {
+    '&::-webkit-scrollbar': {
+      width: '$8'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: '$neutrals400'
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: '$neutrals500'
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: '$neutrals300'
+    }
+  }
+});
+
+function useTheme() {
+  const theme = useSettingsStore.use.theme();
+  const fetchMeta = useMetaStore.use.fetchMeta();
+  const [OSTheme, setOSTheme] = useState(lightTheme);
+  useEffect(() => {
+    (async () => {
+      await fetchMeta();
+    })();
+    const switchTheme = event => {
+      if (event.matches) setOSTheme(darkTheme);else setOSTheme(lightTheme);
+    };
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setOSTheme(darkTheme);
+    }
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme);
+    return () => {
+      window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', switchTheme);
+    };
+  }, []);
+  const getActiveTheme = () => {
+    if (theme === 'auto') return OSTheme;else return theme === 'dark' ? darkTheme : lightTheme;
+  };
+  return {
+    activeTheme: getActiveTheme()
+  };
+}
+
+const providers = /*#__PURE__*/allProviders();
+const SwapBox = () => {
+  globalStyles();
+  const {
+    activeTheme
+  } = useTheme();
+  const {
+    blockchains
+  } = useMetaStore.use.meta();
+  const disconnectWallet = useWalletsStore.use.disconnectWallet();
+  const connectWallet = useWalletsStore.use.connectWallet();
+  const evmBasedChainNames = blockchains.filter(isEvmBlockchain).map(chain => chain.name);
+  const onUpdateState = (type, event, value, supportedChains) => {
+    if (event === Events.ACCOUNTS) {
+      if (value) {
+        const supportedChainNames =
+        //@ts-ignore
+        walletAndSupportedChainsNames(supportedChains);
+        const data = prepareAccountsForWalletStore(type, value, evmBasedChainNames, supportedChainNames);
+        connectWallet(data);
+      } else {
+        disconnectWallet(type);
+      }
+    }
+  };
+  return React.createElement(Provider, {
+    allBlockChains: blockchains,
+    providers: providers,
+    onUpdateState: onUpdateState
+  }, React.createElement("div", {
+    id: "pageContainer",
+    className: activeTheme
+  }, React.createElement(SwapContainer, null, React.createElement(AppRouter, null, React.createElement(Layout, null)))));
+};
+
+export { SwapBox };
+//# sourceMappingURL=widget-embedded.esm.js.map