@rango-dev/widget-embedded 0.1.10-next.77 → 0.1.10-next.81

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

@@ -10,95 +10,62 @@ var React__default = _interopDefault(React);
 var reactRouter = require('react-router');
 var reactRouterDom = require('react-router-dom');
 var zustand = require('zustand');
-var immer = require('zustand/middleware/immer');
 var BigNumber = require('bignumber.js');
 var BigNumber__default = _interopDefault(BigNumber);
+var middleware = require('zustand/middleware');
 var rangoSdk = require('rango-sdk');
-var walletsCore = require('@rango-dev/wallets-core');
-var providerAll = require('@rango-dev/provider-all');
 var walletsShared = require('@rango-dev/wallets-shared');
-var middleware = require('zustand/middleware');
+var walletsCore = require('@rango-dev/wallets-core');
 var theme = require('@rango-dev/ui/src/theme');
+var providerAll = require('@rango-dev/provider-all');
+var shallow = require('zustand/shallow');
+
+const navigationRoutes = {
+  home: '/',
+  fromChain: '/from-chain',
+  fromToken: '/from-token',
+  toChain: '/to-chain',
+  toToken: '/to-token',
+  settings: '/settings',
+  liquiditySources: '/settings/liquidity-sources',
+  history: '/history',
+  wallets: '/wallets',
+  confirmSwap: '/confirm-swap',
+  confirmWallets: '/confirm-wallets',
+  swapDetails: '/history/swap-details'
+};
 
 const ZERO = /*#__PURE__*/new BigNumber__default(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.BigNumber(number);
-  const roundingMode = 1;
-  let maxI = 1000;
-  for (let i = 0; i < 60; i++) {
-    if (new BigNumber.BigNumber(n.toFixed(i, roundingMode)).eq(n)) {
-      maxI = i;
-      break;
-    }
-  }
-  if (n.gte(10000)) return n.toFormat(0, roundingMode);
-  if (n.gte(1000)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))), roundingMode);
-  if (n.gte(100)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))), roundingMode);
-  if (n.gte(1)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 2))), roundingMode);
-  if (n.gte(0.01)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 4))), roundingMode);
-  for (let i = minDecimals || 4; i < 17; i++) if (n.gte(Math.pow(10, -i))) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, i))), roundingMode);
-  if (n.isEqualTo(0)) return '0';
-  return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))), roundingMode);
-};
+function removeDuplicateFrom(array) {
+  return Array.from(new Set(array));
+}
+function areEqual(array1, array2) {
+  return array1.length === array2.length && array1.every((v, i) => v === array2[i]);
+}
 
 const getBestRouteToTokenUsdPrice = bestRoute => bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
-const compareRoutes = (route1, route2, inputAmount, fromTokenUsdPrice, toTokenUsdPrice) => {
-  let outUsdValue = (new BigNumber__default(route2.result?.outputAmount || '0') || ZERO).multipliedBy(toTokenUsdPrice || 0);
-  if (outUsdValue.isNaN()) outUsdValue = ZERO;
-  let inUsdValue = new BigNumber__default(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__default(400))) || parseInt(outToInRatio?.toFixed(2) || '0') <= -5 && (inUsdValue === null || inUsdValue.gte(new BigNumber__default(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__default(out2).div(new BigNumber__default(out1)).minus(1).multipliedBy(100);
-    if (changePercent.toNumber() <= -1) {
-      return {
-        isChanged: true,
-        warningMessage: `Output amount changed to ${numberToString(out2)} 
-      (${numberToString(changePercent, null, 2)}% change).`
-      };
-    }
-  }
+function isNumberOfSwapsChanged(route1, route2) {
   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
-  };
+  return route1Swaps.length !== route2Swaps.length;
+}
+function isRouteSwappersUpdated(route1, route2) {
+  const route1Swappers = route1.result?.swaps.map(swap => swap.swapperId) || [];
+  const route2Swappers = route2.result?.swaps.map(swap => swap.swapperId) || [];
+  return !areEqual(route1Swappers, route2Swappers);
+}
+function isRouteInternalCoinsUpdated(route1, route2) {
+  const route1InternalCoins = route1.result?.swaps.map(swap => swap.to.symbol) || [];
+  const route2InternalCoins = route2.result?.swaps.map(swap => swap.to.symbol) || [];
+  return !areEqual(route1InternalCoins, route2InternalCoins);
+}
+const isRouteChanged = (route1, route2) => {
+  return isNumberOfSwapsChanged(route1, route2) || isRouteSwappersUpdated(route1, route2) || isRouteInternalCoinsUpdated(route1, route2);
 };
-const getRequiredBalanceOfWallet = (wallet, fee) => {
+const getRequiredBalanceOfWallet = (selectedWallet, fee) => {
   if (fee === null) return null;
-  const relatedFeeStatus = fee?.find(item => item.blockchain === wallet.chain)?.wallets.find(it => it.address?.toLowerCase() === wallet.address.toLowerCase());
+  const relatedFeeStatus = fee?.find(item => item.blockchain === selectedWallet.chain)?.wallets.find(wallet => wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase());
   if (!relatedFeeStatus) return null;
   return relatedFeeStatus.requiredAssets;
 };
@@ -112,49 +79,13 @@ const createSelectors = _store => {
   return store;
 };
 
-const getUsdValue = (token, amount) => new BigNumber__default(amount || ZERO).multipliedBy(token?.usdPrice || 0);
-const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/immer.immer(set => ({
-  fromChain: null,
-  fromToken: null,
-  inputAmount: '',
-  outputAmount: null,
-  inputUsdValue: new BigNumber__default(0),
-  outputUsdValue: new BigNumber__default(0),
-  toChain: null,
-  toToken: null,
-  bestRoute: null,
-  setBestRoute: bestRoute => set(state => {
-    state.bestRoute = bestRoute;
-    if (!!bestRoute) {
-      const outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber__default(bestRoute.result?.outputAmount) : null;
-      state.outputAmount = outputAmount;
-      state.outputUsdValue = new BigNumber__default(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 rangoSdk.RangoClient(process.env.REACT_API_KEY);
 
-function removeDuplicateFrom(array) {
-  return Array.from(new Set(array));
-}
+const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
+const DEFAULT_SLIPPAGE = 1;
+const HIGH_SLIPPAGE = 5;
+const MAX_SLIPPAGE = 100;
+const MIN_SLIPPGAE = 0;
 
 const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()(set => ({
   meta: {
@@ -182,103 +113,87 @@ const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()
   }
 })));
 
-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 = React.useRef(true);
-  const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
-  const location = reactRouterDom.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();
-  React.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]);
-  React.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);
+const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.persist( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
+  slippage: DEFAULT_SLIPPAGE,
+  customSlippage: null,
+  infinitApprove: false,
+  disabledLiquiditySources: [],
+  theme: 'auto',
+  setSlippage: slippage => set(() => ({
+    slippage: slippage
+  })),
+  setCustomSlippage: customSlippage => set(() => ({
+    customSlippage: customSlippage
+  })),
+  toggleAllLiquiditySources: () => set(state => {
+    const {
+      swappers
+    } = useMetaStore.getState().meta;
+    const swappersGroup = removeDuplicateFrom(swappers.map(swapper => swapper.swapperGroup));
+    if (swappersGroup.length === state.disabledLiquiditySources.length) return {
+      disabledLiquiditySources: []
+    };else {
+      return {
+        disabledLiquiditySources: swappersGroup
+      };
     }
-  }, [loadingStatus]);
-  return null;
-}
+  }),
+  toggleInfinitApprove: () => set(state => ({
+    infinitApprove: !state.infinitApprove
+  })),
+  toggleLiquiditySource: name => set(state => {
+    if (state.disabledLiquiditySources.includes(name)) return {
+      disabledLiquiditySources: state.disabledLiquiditySources.filter(liquiditySource => liquiditySource != name)
+    };else return {
+      disabledLiquiditySources: state.disabledLiquiditySources.concat(name)
+    };
+  }),
+  setTheme: theme => set(() => ({
+    theme
+  }))
+})), {
+  name: 'user-settings'
+})));
 
-function AppRouter(_ref) {
-  let {
-    children
-  } = _ref;
-  const isRouterInContext = reactRouter.useInRouterContext();
-  const Router = isRouterInContext ? React.Fragment : reactRouter.MemoryRouter;
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Router, null, children), isRouterInContext && React__default.createElement(UpdateUrl, null));
-}
+const secondsToString = s => {
+  const seconds = (s % 60).toString().padStart(2, '0');
+  const minutes = parseInt((s / 60).toString()).toString().padStart(2, '0');
+  return `${minutes}:${seconds}`;
+};
+const numberToString = function (number, minDecimals, maxDecimals) {
+  if (minDecimals === void 0) {
+    minDecimals = null;
+  }
+  if (maxDecimals === void 0) {
+    maxDecimals = null;
+  }
+  if (number === null) return '';
+  if (number === '') return '';
+  const n = new BigNumber.BigNumber(number);
+  const roundingMode = 1;
+  let maxI = 1000;
+  for (let i = 0; i < 60; i++) {
+    if (new BigNumber.BigNumber(n.toFixed(i, roundingMode)).eq(n)) {
+      maxI = i;
+      break;
+    }
+  }
+  if (n.gte(10000)) return n.toFormat(0, roundingMode);
+  if (n.gte(1000)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))), roundingMode);
+  if (n.gte(100)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))), roundingMode);
+  if (n.gte(1)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 2))), roundingMode);
+  if (n.gte(0.01)) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 4))), roundingMode);
+  for (let i = minDecimals || 4; i < 17; i++) if (n.gte(Math.pow(10, -i))) return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, i))), roundingMode);
+  if (n.isEqualTo(0)) return '0';
+  return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))), roundingMode);
+};
+const totalArrivalTime = data => data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
+const decimalNumber = function (number, toFixed) {
+  if (number === void 0) {
+    number = '0';
+  }
+  return parseFloat(number).toFixed(toFixed);
+};
 
 function getStateWallet(state) {
   switch (true) {
@@ -374,7 +289,7 @@ function getRequiredChains(route) {
   });
   return wallets;
 }
-function getSelectableWallets(accounts, selectedWallets, getWalletInfo, requiredChains) {
+function getSelectableWallets(accounts, selectedWallets, getWalletInfo) {
   const connectedWallets = accounts.map(account => ({
     address: account.address,
     walletType: account.walletType,
@@ -383,12 +298,8 @@ function getSelectableWallets(accounts, selectedWallets, getWalletInfo, required
     name: getWalletInfo(account.walletType).name,
     selected: !!selectedWallets.find(wallet => wallet.chain === account.chain && wallet.walletType === account.walletType)
   }));
-  return requiredChains ? connectedWallets.filter((wallet, index, array) => requiredChains.includes(wallet.chain) && array.findIndex(w => w.address === wallet.address) === index) : removeDuplicateWallets(connectedWallets, 'walletType');
+  return connectedWallets;
 }
-const removeDuplicateWallets = (arr, key) => {
-  const map = new Map(arr.map(item => [item[key], item]));
-  return Array.from(map.values());
-};
 function getBalanceFromWallet(balances, chain, symbol, address) {
   if (balances.length === 0) return null;
   const selectedChainBalances = balances.filter(balance => balance.chain === chain);
@@ -487,133 +398,6 @@ const getKeplrCompatibleConnectedWallets = selectableWallets => {
   return walletsShared.KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
 };
 
-const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.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__*/zustand.create()( /*#__PURE__*/middleware.persist( /*#__PURE__*/immer.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);
@@ -633,14 +417,90 @@ function hasLimitError(bestRoute) {
     }
   }).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 LimitErrorMessage(bestRoute) {
+  if (!bestRoute) return {
+    swap: null,
+    fromAmountRangeError: '',
+    recommendation: ''
+  };
+  const swap = (bestRoute?.result?.swaps || []).filter(swap => {
+    const minimum = !!swap.fromAmountMinValue ? new BigNumber__default(swap.fromAmountMinValue) : null;
+    const maximum = !!swap.fromAmountMaxValue ? new BigNumber__default(swap.fromAmountMaxValue) : null;
+    const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
+    if (isExclusive) {
+      return minimum?.gte(swap.fromAmount) || maximum?.lte(swap.fromAmount);
+    } else {
+      return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
+    }
+  })[0];
+  if (!swap) return {
+    swap: null,
+    fromAmountRangeError: '',
+    recommendation: ''
+  };
+  const minimum = !!swap.fromAmountMinValue ? new BigNumber__default(swap.fromAmountMinValue) : null;
+  const maximum = !!swap.fromAmountMaxValue ? new BigNumber__default(swap.fromAmountMaxValue) : null;
+  const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
+  let fromAmountRangeError = '';
+  let recommendation = '';
+  if (!isExclusive && !!minimum && minimum.gt(swap.fromAmount)) {
+    fromAmountRangeError = `Required: >= ${numberToString(minimum)} ${swap.from.symbol}`;
+    recommendation = 'Increase your swap amount';
+  } else if (isExclusive && !!minimum && minimum.gte(swap.fromAmount)) {
+    fromAmountRangeError = `Required: > ${numberToString(minimum)} ${swap.from.symbol}`;
+    recommendation = 'Increase your swap amount';
+  }
+  if (!isExclusive && !!maximum && maximum.lt(swap.fromAmount)) {
+    fromAmountRangeError = `Required: <= ${numberToString(maximum)} ${swap.from.symbol}`;
+    recommendation = 'Decrease your swap amount';
+  } else if (isExclusive && !!maximum && maximum.lte(swap.fromAmount)) {
+    fromAmountRangeError = `Required: < ${numberToString(maximum)} ${swap.from.symbol}`;
+    recommendation = 'Decrease your swap amount';
+  }
+  return {
+    swap,
+    fromAmountRangeError,
+    recommendation
+  };
+}
+function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath) {
+  if (loadingMetaStatus !== 'success') return {
+    title: 'Connect Wallet',
+    disabled: true
+  };
+  if (accounts.length == 0) return {
+    title: 'Connect Wallet',
+    disabled: false
+  };
+  if (loading) return {
+    title: 'Finding Best Route...',
+    disabled: true
+  };else if (!bestRoute) return {
+    title: 'Swap',
+    disabled: true
+  };else if (hasLimitError) return {
+    title: 'Limit Error',
+    disabled: true
+  };else if (highValueLoss) return {
+    title: 'Price impact is too high!',
+    disabled: true
+  };else if (priceImpactCanNotBeComputed) return {
+    title: 'USD price is unknown, price impact might be high!',
+    disabled: false,
+    hasWarning: true
+  };else if (needsToWarnEthOnPath) return {
+    title: 'The route goes through Ethereum. Continue?',
+    disabled: false,
+    hasWarning: true
+  };else return {
+    title: 'Swap',
+    disabled: false
+  };
 }
 function canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue) {
-  return !((inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) && !!bestRoute?.result && !!inputAmount && inputAmount !== '0' && parseFloat(inputAmount || '0') !== 0);
+  return !((inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) && !!bestRoute?.result && !!inputAmount && inputAmount !== '0' && parseFloat(inputAmount || '0') !== 0 && !!bestRoute.result);
 }
-function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validateBalanceOrFee) {
+function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validateBalanceOrFee, meta) {
   const simulationResult = bestRoute.result;
   if (!simulationResult) throw Error('Simulation result should not be null');
   return {
@@ -658,52 +518,58 @@ function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validat
     networkStatusExtraMessage: null,
     networkStatusExtraMessageDetail: null,
     lastNotificationTime: null,
+    //@ts-ignore
     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: ''
-    })) || []
+    steps: bestRoute.result?.swaps?.map((swap, index) => {
+      const swapper = meta.swappers.find(swapper => swapper.id === swap.swapperId);
+      const swapperType = swapper?.types[0];
+      const fromBlockchain = meta.blockchains.find(blockchain => blockchain.name === swap.from.blockchain);
+      const toBlockchain = meta.blockchains.find(blockchain => blockchain.name === swap.to.blockchain);
+      return {
+        id: index + 1,
+        fromBlockchain: swap.from.blockchain,
+        fromSymbol: swap.from.symbol,
+        fromSymbolAddress: swap.from.address,
+        fromDecimals: swap.from.decimals,
+        fromAmountPrecision: swap.fromAmountPrecision,
+        fromAmountMinValue: swap.fromAmountMinValue,
+        fromAmountMaxValue: swap.fromAmountMaxValue,
+        toBlockchain: swap.to.blockchain,
+        fromLogo: swap.from.logo,
+        toSymbol: swap.to.symbol,
+        toSymbolAddress: swap.to.address,
+        toDecimals: swap.to.decimals,
+        toLogo: swap.to.logo,
+        startTransactionTime: new Date().getTime(),
+        swapperId: swap.swapperId,
+        feeInUsd: numberToString(getUsdFeeOfStep(swap, meta.tokens), null, 2),
+        expectedOutputAmountHumanReadable: swap.toAmount,
+        outputAmount: '',
+        status: 'created',
+        networkStatus: null,
+        executedTransactionId: null,
+        externalTransactionId: null,
+        explorerUrl: null,
+        trackingCode: null,
+        cosmosTransaction: null,
+        solanaTransaction: null,
+        starknetTransaction: null,
+        starknetApprovalTransaction: null,
+        tronTransaction: null,
+        tronApprovalTransaction: null,
+        evmTransaction: null,
+        evmApprovalTransaction: null,
+        transferTransaction: null,
+        diagnosisUrl: null,
+        internalSteps: null,
+        fromBlockchainLogo: fromBlockchain.logo,
+        toBlockchainLogo: toBlockchain.logo,
+        swapperLogo: swapper?.logo,
+        swapperType: swapperType
+      };
+    }) || []
   };
 }
 function requiredWallets(route) {
@@ -718,399 +584,1207 @@ function requiredWallets(route) {
   });
   return wallets;
 }
+const getUsdPrice$1 = (blockchain, symbol, address, allTokens) => {
+  const token = allTokens?.find(t => t.blockchain === blockchain && t.symbol?.toUpperCase() === symbol?.toUpperCase() && t.address === address);
+  return token?.usdPrice || null;
+};
+function getUsdFeeOfStep(step, allTokens) {
+  let totalFeeInUsd = ZERO;
+  for (let i = 0; i < step.fee.length; i++) {
+    const fee = step.fee[i];
+    if (fee.expenseType === 'DECREASE_FROM_OUTPUT') continue;
+    const unitPrice = getUsdPrice$1(fee.asset.blockchain, fee.asset.symbol, fee.asset.address, allTokens);
+    totalFeeInUsd = totalFeeInUsd.plus(new BigNumber__default(fee.amount).multipliedBy(unitPrice || 0));
+  }
+  return totalFeeInUsd;
+}
+function getTotalFeeInUsd(bestRoute, allTokens) {
+  return bestRoute?.result?.swaps.reduce((totalFee, step) => totalFee.plus(getUsdFeeOfStep(step, allTokens)), ZERO) || null;
+}
+function hasHighFee(totalFeeInUsd) {
+  if (!totalFeeInUsd) return false;
+  return !totalFeeInUsd.lt(new BigNumber__default(30));
+}
+function getMinRequiredSlippage(route) {
+  const slippages = route.result?.swaps.map(slippage => slippage.recommendedSlippage);
+  return slippages?.map(s => s?.slippage || 0)?.filter(s => s > 0)?.sort((a, b) => b - a)?.find(() => true) || null;
+}
+function hasProperSlippage(userSlippage, minRequiredSlippage) {
+  if (!minRequiredSlippage) return true;
+  return parseFloat(userSlippage) > minRequiredSlippage;
+}
+function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, checkPrerequisites) {
+  const selectedWalletsMap = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = selectedWallet.address, selectedWalletsMap), {});
+  const connectedWallets = [];
+  wallets.forEach(wallet => {
+    const chainAndAccounts = connectedWallets.find(connectedWallet => connectedWallet.blockchain === wallet.chain);
+    if (!!chainAndAccounts) chainAndAccounts.addresses.push(wallet.address);else connectedWallets.push({
+      blockchain: wallet.chain,
+      addresses: [wallet.address]
+    });
+  });
+  const requestBody = {
+    amount: inputAmount.toString(),
+    checkPrerequisites,
+    from: {
+      address: fromToken.address,
+      blockchain: fromToken.blockchain,
+      symbol: fromToken.symbol
+    },
+    to: {
+      address: toToken.address,
+      blockchain: toToken.blockchain,
+      symbol: toToken.symbol
+    },
+    connectedWallets,
+    selectedWallets: selectedWalletsMap,
+    swapperGroups: disabledLiquiditySources,
+    swappersGroupsExclude: true,
+    //@ts-ignore
+    slippage: slippage.toString()
+  };
+  return requestBody;
+}
+function getWalletsForNewSwap(selectedWallets) {
+  const wallets = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = {
+    address: selectedWallet.address,
+    walletType: selectedWallet.walletType
+  }, selectedWalletsMap), {});
+  return wallets;
+}
+function getRouteOutputAmount(route) {
+  return route.result?.outputAmount || null;
+}
+function getPercentageChange(oldValue, newValue) {
+  return new BigNumber__default(newValue).div(new BigNumber__default(oldValue)).minus(1).multipliedBy(100);
+}
+function isOutputAmountChangedALot(oldRoute, newRoute) {
+  const oldOutputAmount = getRouteOutputAmount(oldRoute);
+  const newOutputAmount = getRouteOutputAmount(newRoute);
+  if (!oldOutputAmount || !newOutputAmount) return false;
+  const percentageChange = getPercentageChange(oldOutputAmount, newOutputAmount);
+  return percentageChange.toNumber() <= -1;
+}
+function getBalanceWarnings(route, selectedWallets) {
+  const fee = route.validationStatus;
+  const requiredWallets = getRequiredChains(route);
+  const walletsSortedByRequiredWallets = selectedWallets.sort((selectedWallet1, selectedWallet2) => requiredWallets.indexOf(selectedWallet1.chain) - requiredWallets.indexOf(selectedWallet2.chain));
+  return walletsSortedByRequiredWallets.flatMap(wallet => getRequiredBalanceOfWallet(wallet, fee) || []).filter(asset => !asset.ok).map(asset => {
+    const symbol = asset.asset.symbol;
+    const currentAmount = numberToString(new BigNumber__default(asset.currentAmount.amount).shiftedBy(-asset.currentAmount.decimals), 8);
+    const requiredAmount = numberToString(new BigNumber__default(asset.requiredAmount.amount).shiftedBy(-asset.requiredAmount.decimals), 8);
+    let reason = '';
+    if (asset.reason === 'FEE') reason = ' for network fee';
+    if (asset.reason === 'INPUT_ASSET') reason = ' for swap';
+    if (asset.reason === 'FEE_AND_INPUT_ASSET') reason = ' for input and network fee';
+    const warningMessage = `Needs ≈ ${requiredAmount} ${symbol}${reason}, but you have ${currentAmount} ${symbol} in your ${asset.asset.blockchain} wallet.`;
+    return warningMessage;
+  });
+}
 
-function 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] = React.useState(false);
-  const [error, setError] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [data, setData] = React.useState(null);
-  const [feeStatus, setFeeStatus] = React.useState(null);
-  const [bestRouteChanged, setBestRouteChanged] = React.useState(false);
-  const [enoughBalance, setEnoughBalance] = React.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
-      };
+const getUsdValue = (token, amount) => new BigNumber__default(amount || ZERO).multipliedBy(token?.usdPrice || 0);
+const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
+  fromChain: null,
+  fromToken: null,
+  inputAmount: '',
+  outputAmount: null,
+  inputUsdValue: new BigNumber__default(0),
+  outputUsdValue: new BigNumber__default(0),
+  toChain: null,
+  toToken: null,
+  bestRoute: null,
+  loading: false,
+  error: '',
+  setBestRoute: bestRoute => set(state => {
+    let outputAmount = null;
+    let outputUsdValue = ZERO;
+    if (!!bestRoute) {
+      outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber__default(bestRoute.result?.outputAmount) : null;
+      outputUsdValue = new BigNumber__default(outputAmount || ZERO).multipliedBy(getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice || 0);
     }
     return {
-      balance: true,
-      slippage: true,
-      routeChanged
+      bestRoute,
+      ...(!!bestRoute && {
+        outputAmount,
+        outputUsdValue
+      })
     };
-  };
-  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]
-      });
+  }),
+  setFromChain: chain => set(() => ({
+    fromChain: chain
+  })),
+  setFromToken: token => set(state => ({
+    fromToken: token,
+    ...(!!state.inputAmount && {
+      inputUsdValue: getUsdValue(token, state.inputAmount)
+    })
+  })),
+  setToChain: chain => set(() => ({
+    toChain: chain
+  })),
+  setToToken: token => set(() => ({
+    toToken: token
+  })),
+  setInputAmount: amount => set(state => ({
+    inputAmount: amount,
+    ...(!!state.fromToken && {
+      inputUsdValue: getUsdValue(state.fromToken, amount)
+    })
+  }))
+}))));
+const bestRoute = (bestRouteStore, settingsStore) => {
+  let abortController = null;
+  const fetchBestRoute = () => {
+    const {
+      fromToken,
+      toToken,
+      inputAmount
+    } = bestRouteStore.getState();
+    const {
+      slippage,
+      customSlippage,
+      disabledLiquiditySources
+    } = settingsStore.getState();
+    if (!fromToken || !toToken || !inputAmount) return;
+    abortController?.abort();
+    abortController = new AbortController();
+    const userSlippage = customSlippage | slippage;
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, false);
+    bestRouteStore.setState({
+      loading: true,
+      bestRoute: null
     });
-    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
+    httpService.getBestRoute(requestBody, {
+      signal: abortController.signal
+    }).then(res => {
+      const {
+        setBestRoute
+      } = bestRouteStore.getState();
+      setBestRoute(res);
+      bestRouteStore.setState({
+        loading: false
+      });
+      abortController = null;
     }).catch(error => {
-      setError(error.message);
-      setLoading(false);
+      if (error.code === 'ERR_CANCELED') return;
+      bestRouteStore.setState({
+        error: error.message,
+        loading: false
+      });
     });
-    setLoading(false);
-    if (!r || !r.result || !bestRoute) return {
-      bestRoute: null
-    };
-    if (!new BigNumber__default(r.requestAmount).isEqualTo(new BigNumber__default(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);
+  useBestRouteStore.subscribe(state => ({
+    fromChain: state.fromChain,
+    fromToken: state.fromToken,
+    toChain: state.toChain,
+    toToken: state.toToken,
+    inputAmount: state.inputAmount
+  }), fetchBestRoute.bind(null), {
+    equalityFn: (prevState, state) => {
+      if (prevState.fromChain?.name !== state.fromChain?.name || prevState.toChain?.name !== state.toChain?.name || prevState.fromToken?.symbol !== state.fromToken?.symbol || prevState.toToken?.symbol !== state.toToken?.symbol || prevState.fromToken?.blockchain !== state.fromToken?.blockchain || prevState.toToken?.blockchain !== state.toToken?.blockchain || prevState.fromToken?.address !== state.fromToken?.address || prevState.toToken?.address !== state.toToken?.address || prevState.inputAmount !== state.inputAmount) return false;else return true;
     }
-    !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);
-    });
-  };
+  });
+  useSettingsStore.subscribe(state => ({
+    slippage: state.slippage,
+    customSlippage: state.customSlippage,
+    disabledLiquiditySources: state.disabledLiquiditySources
+  }), fetchBestRoute.bind(null), {
+    equalityFn: (prevState, state) => {
+      if (prevState.slippage !== state.slippage || prevState.customSlippage !== state.customSlippage || prevState.disabledLiquiditySources.length !== state.disabledLiquiditySources.length) return false;else return true;
+    }
+  });
   return {
-    loading,
-    error,
-    data,
-    warning,
-    feeStatus,
-    bestRouteChanged,
-    enoughBalance,
-    swap
+    fetchBestRoute
   };
-}
+};
+const {
+  fetchBestRoute
+} = /*#__PURE__*/bestRoute(useBestRouteStore, useSettingsStore);
 
-function ConfirmSwapPage() {
-  const navigate = reactRouterDom.useNavigate();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-  const {
-    error,
-    loading,
-    warning,
-    swap
-  } = useConfirmSwap();
-  return React__default.createElement(ui.ConfirmSwap, {
-    onConfirm: swap.bind(null),
-    onBack: navigate.bind(null, -1),
-    bestRoute: bestRoute,
-    loading: loading,
-    error: error,
-    warning: warning
-  });
-}
+var SearchParams;
+(function (SearchParams) {
+  SearchParams["FROM_CHAIN"] = "fromChain";
+  SearchParams["FROM_TOKEN"] = "fromToken";
+  SearchParams["TO_CHAIN"] = "toChain";
+  SearchParams["TO_TOKEN"] = "toToken";
+  SearchParams["FROM_AMOUNT"] = "fromAmount";
+})(SearchParams || (SearchParams = {}));
 
-const 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'
+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 = React.useRef(true);
+  const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
+  const location = reactRouterDom.useLocation();
+  const firstRenderSearchParams = React.useRef(location.search);
+  const searchParamsRef = React.useRef({});
+  React.useEffect(() => {
+    const params = {};
+    reactRouterDom.createSearchParams(firstRenderSearchParams.current).forEach((value, key) => {
+      params[key] = value;
+    });
+    searchParamsRef.current = params;
+  }, []);
+  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();
+  React.useEffect(() => {
+    let fromChainString = '',
+      fromTokenString = '',
+      toChainString = '',
+      toTokenString = '',
+      fromAmount = '';
+    if (loadingStatus !== 'success' && ![navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname)) {
+      fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
+      fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
+      toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
+      toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
+      fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
+      setSearchParams({
+        ...(fromChainString && {
+          [SearchParams.FROM_CHAIN]: fromChainString
+        }),
+        ...(fromTokenString && {
+          [SearchParams.FROM_TOKEN]: fromTokenString
+        }),
+        ...(toChainString && {
+          [SearchParams.TO_CHAIN]: toChainString
+        }),
+        ...(toTokenString && {
+          [SearchParams.TO_TOKEN]: toTokenString
+        }),
+        ...(fromAmount && {
+          [SearchParams.FROM_AMOUNT]: fromAmount.toString()
+        })
+      }, {
+        replace: true
+      });
+    }
+    if (!firstRender.current) {
+      let fromChainString = '',
+        fromTokenString = '',
+        toChainString = '',
+        toTokenString = '',
+        fromAmount = '';
+      if (loadingStatus !== 'success') {
+        fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
+        fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
+        toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
+        toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
+        fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
+      } else {
+        if (location.state === 'redirect') return;
+        fromChainString = fromChain?.name || '';
+        fromTokenString = (fromToken?.symbol || '') + (fromToken?.address ? `--${fromToken?.address}` : '');
+        toChainString = toChain?.name || '';
+        toTokenString = (toToken?.symbol || '') + (toToken?.address ? `--${toToken?.address}` : '');
+        fromAmount = inputAmount;
+        setSearchParams({
+          ...(fromChainString && {
+            [SearchParams.FROM_CHAIN]: fromChainString
+          }),
+          ...(fromTokenString && {
+            [SearchParams.FROM_TOKEN]: fromTokenString
+          }),
+          ...(toChainString && {
+            [SearchParams.TO_CHAIN]: toChainString
+          }),
+          ...(toTokenString && {
+            [SearchParams.TO_TOKEN]: toTokenString
+          }),
+          ...(fromAmount && {
+            [SearchParams.FROM_AMOUNT]: fromAmount.toString()
+          })
         }, {
-          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
-    }]
+          replace: true
+        });
+      }
+    }
+    firstRender.current = false;
+  }, [location.pathname, inputAmount]);
+  React.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;
+}
+
+const ButtonsContainer = /*#__PURE__*/ui.styled('div', {
+  display: 'flex'
+});
+function HeaderButtons(props) {
+  const {
+    onClickRefresh
+  } = props;
+  const navigate = reactRouterDom.useNavigate();
+  return React__default.createElement(ButtonsContainer, null, React__default.createElement(ui.Tooltip, {
+    content: "Retry"
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: onClickRefresh.bind(null)
+  }, React__default.createElement(ui.RetryIcon, {
+    size: 28
+  }))), React__default.createElement(ui.Tooltip, {
+    content: "Transactions History"
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.history)
+  }, React__default.createElement(ui.HistoryIcon, {
+    size: 24
+  }))), React__default.createElement(ui.Tooltip, {
+    content: "Settings"
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.settings)
+  }, React__default.createElement(ui.SettingsIcon, {
+    size: 24
+  }))));
+}
+
+const HeaderContainer = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: '$16 0'
+});
+function Header(props) {
+  const {
+    onClickRefresh
+  } = props;
+  return React__default.createElement(HeaderContainer, null, React__default.createElement(ui.Typography, {
+    variant: "h4"
+  }, "SWAP"), React__default.createElement(HeaderButtons, {
+    onClickRefresh: onClickRefresh
+  }));
+}
+
+const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
+  accounts: [],
+  balances: [],
+  selectedWallets: [],
+  connectWallet: accounts => {
+    const tokens = useMetaStore.getState().meta.tokens;
+    set(state => ({
+      accounts: state.accounts.concat(accounts),
+      balances: state.balances.concat(accounts.map(account => ({
+        balances: [],
+        address: account.address,
+        chain: account.chain,
+        loading: true,
+        walletType: account.walletType,
+        error: false,
+        explorerUrl: null
+      })))
+    }));
+    accounts.forEach(async account => {
+      try {
+        const response = await httpService.getWalletsDetails([{
+          address: account.address,
+          blockchain: account.chain
+        }]);
+        const retrivedBalance = response.wallets[0];
+        if (retrivedBalance) {
+          set(state => ({
+            balances: state.balances.map(balance => {
+              return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
+            })
+          }));
+        } else throw new Error('Wallet not found');
+      } catch (error) {
+        set(state => ({
+          balances: state.balances.map(balance => {
+            return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
+          })
+        }));
+      }
+    });
   },
-  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: rangoSdk.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
+  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 Box = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%'
+});
+const Container = /*#__PURE__*/ui.styled('div', {
+  boxSizing: 'border-box',
+  backgroundColor: '$neutrals300',
+  borderRadius: '$5',
+  padding: '$8 0',
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$8 $16'
+  }
+});
+const StyledImage = /*#__PURE__*/ui.styled('img', {
+  width: '$24',
+  maxHeight: '$24'
+});
+const Options = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '0 $8'
+});
+const ImagePlaceholder = /*#__PURE__*/ui.styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px'
+});
+const OutputContainer = /*#__PURE__*/ui.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 = reactRouterDom.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__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, loadingStatus === 'failed' && React__default.createElement(ui.InfoCircleIcon, {
+    color: "error",
+    size: 24
+  }), React__default.createElement(ui.AngleDownIcon, null));
+  return React__default.createElement(Box, null, React__default.createElement("div", null, React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, type)), React__default.createElement(Container, null, props.type === 'From' && React__default.createElement(Options, null, React__default.createElement("div", {
+    className: "balance",
+    onClick: () => {
+      if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
+    }
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    size: "small"
+  }, React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, `Max: ${tokenBalance} ${fromToken?.symbol || ''}`)))), React__default.createElement("div", {
+    className: "form"
+  }, React__default.createElement(ui.Button, {
+    onClick: () => {
+      navigate(`/${props.type.toLowerCase()}-chain`);
     },
-    solanaTransaction: null,
-    evmTransaction: null,
-    evmApprovalTransaction: null,
-    transferTransaction: null,
-    diagnosisUrl: null,
-    internalSteps: null
-  }]
-}, {
+    variant: "outlined",
+    disabled: loadingStatus === 'failed',
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && chain ? React__default.createElement(StyledImage, {
+      src: chain.logo
+    }) : React__default.createElement(ImagePlaceholder, null),
+    suffix: ItemSuffix,
+    align: "start",
+    size: "large",
+    style: {
+      marginRight: '.5rem'
+    }
+  }, loadingStatus === 'success' && chain ? chain.displayName : 'Chain'), React__default.createElement(ui.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__default.createElement(StyledImage, {
+      src: token.image
+    }) : React__default.createElement(ImagePlaceholder, null),
+    suffix: ItemSuffix,
+    size: "large",
+    align: "start",
+    style: {
+      marginRight: '.5rem'
+    }
+  }, loadingStatus === 'success' && token ? token.symbol : 'Token'), props.type === 'From' ? React__default.createElement(ui.TextField, {
+    type: "number",
+    size: "large",
+    autoFocus: true,
+    placeholder: "0",
+    style: {
+      width: '70%',
+      position: 'relative',
+      backgroundColor: '$background !important'
+    },
+    suffix: React__default.createElement("span", {
+      style: {
+        position: 'absolute',
+        right: '4px',
+        bottom: '2px'
+      }
+    }, React__default.createElement(ui.Typography, {
+      variant: "caption"
+    }, `$${numberToString(inputUsdValue)}`)),
+    value: props.inputAmount || '',
+    onChange: props.type === 'From' ? event => {
+      props.onAmountChange(event.target.value);
+    } : undefined
+  }) : React__default.createElement(OutputContainer, null, React__default.createElement(ui.Typography, {
+    variant: "body1"
+  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'), React__default.createElement("span", {
+    style: {
+      position: 'absolute',
+      right: '4px',
+      bottom: '2px'
+    }
+  }, React__default.createElement(ui.Typography, {
+    variant: "caption"
+  }, `$${numberToString(props.outputUsdValue)}`))))));
+}
+
+const Container$1 = /*#__PURE__*/theme.styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+  alignItems: 'center',
+  paddingTop: '$16'
+});
+const Logo = /*#__PURE__*/theme.styled('svg', {
+  fill: '$foreground',
+  width: '$24',
+  margin: '0 $8 0 $16'
+});
+const StyledAnchor = /*#__PURE__*/theme.styled('a', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textDecoration: 'none'
+});
+function BottomLogo() {
+  return React__default.createElement(Container$1, null, React__default.createElement(ui.Typography, {
+    variant: "caption"
+  }, "Powered By"), React__default.createElement(StyledAnchor, {
+    href: "https://rango.exchange",
+    target: "_blank"
+  }, React__default.createElement(Logo, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 33.68 29"
+  }, React__default.createElement("defs", null), React__default.createElement("g", {
+    id: "Layer_2",
+    "data-name": "Layer 2"
+  }, React__default.createElement("g", {
+    id: "Layer_1-2",
+    "data-name": "Layer 1"
+  }, React__default.createElement("path", {
+    d: "M33.68,18.05A17.93,17.93,0,0,0,28.34,5.29,18.31,18.31,0,0,0,15.45,0H13.54V7.41L6.07,0H.69L9.83,9.07H0V11A17.93,17.93,0,0,0,5.34,23.71,18.32,18.32,0,0,0,18.24,29h1.9V21.59l7.38,7.31h5.39l-9-9h9.82ZM17.37,16.16H12.49a1.93,1.93,0,0,0-1.35.55,1.89,1.89,0,0,0-.56,1.34,1.85,1.85,0,0,0,.56,1.33,1.93,1.93,0,0,0,1.35.55h3.84V25.1A14.43,14.43,0,0,1,8,21a14.21,14.21,0,0,1-4.1-8.2H21.2a1.86,1.86,0,0,0,.74-.13,1.92,1.92,0,0,0,.64-.4,2,2,0,0,0,.43-.62,1.88,1.88,0,0,0,0-1.47,2,2,0,0,0-.43-.62,1.92,1.92,0,0,0-.64-.4,1.86,1.86,0,0,0-.74-.13H17.35V3.9A14.43,14.43,0,0,1,25.64,8a14.19,14.19,0,0,1,4.11,8.2Zm2.12-5.27a1.43,1.43,0,0,1,.26-.83,1.52,1.52,0,0,1,.67-.56,1.55,1.55,0,0,1,.88-.08,1.51,1.51,0,0,1,.77.4,1.54,1.54,0,0,1,.42.77,1.41,1.41,0,0,1-.09.86,1.47,1.47,0,0,1-.55.68,1.56,1.56,0,0,1-.84.25,1.52,1.52,0,0,1-1.52-1.49Z"
+  }), React__default.createElement("path", {
+    d: "M21.7,11.57a.68.68,0,0,0-.12-.38.64.64,0,0,0-.31-.25.68.68,0,0,0-.75.15.61.61,0,0,0-.19.35.62.62,0,0,0,0,.4.67.67,0,0,0,.25.3.69.69,0,0,0,.39.12.7.7,0,0,0,.49-.2A.68.68,0,0,0,21.7,11.57Z"
+  })))), React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, "RANGO")));
+}
+
+function SwithFromAndTo(_ref) {
+  let {
+    count
+  } = _ref;
+  const firstRender = React.useRef(true);
+  const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
+  const outputAmount = useBestRouteStore.use.outputAmount();
+  React.useEffect(() => {
+    if (!firstRender.current) {
+      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
+      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
+      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
+      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
+      setSearchParams({
+        ...(toChainString && {
+          [SearchParams.FROM_CHAIN]: toChainString
+        }),
+        ...(toTokenString && {
+          [SearchParams.FROM_TOKEN]: toTokenString
+        }),
+        ...(fromChainString && {
+          [SearchParams.TO_CHAIN]: fromChainString
+        }),
+        ...(fromTokenString && {
+          [SearchParams.TO_TOKEN]: fromTokenString
+        }),
+        ...(outputAmount && {
+          [SearchParams.FROM_AMOUNT]: outputAmount.toString()
+        })
+      });
+    } else {
+      firstRender.current = false;
+    }
+  }, [count]);
+  return null;
+}
+
+const Footer = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  paddingTop: '$16'
+});
+
+const errorMessages = {
+  genericServerError: 'Error connecting server, please reload the app and try again'
+};
+
+const Container$2 = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const SwitchButtonContainer = /*#__PURE__*/ui.styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'relative',
+  top: '11px'
+});
+const BestRouteContainer = /*#__PURE__*/ui.styled('div', {
+  width: '100%',
+  paddingTop: '$16'
+});
+const Alerts = /*#__PURE__*/ui.styled('div', {
+  width: '100%',
+  paddingTop: '$16'
+});
+function Home() {
+  const waningMessage = '';
+  const isRouterInContext = reactRouterDom.useInRouterContext();
+  const navigate = reactRouterDom.useNavigate();
+  const [count, setCount] = React.useState(0);
+  const fromChain = useBestRouteStore.use.fromChain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toChain = useBestRouteStore.use.toChain();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const 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 tokens = useMetaStore.use.meta().tokens;
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const bestRouteError = useBestRouteStore.use.error();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const accounts = useWalletsStore.use.accounts();
+  const swithFromAndTo = () => {
+    setFromChain(toChain);
+    setFromToken(toToken);
+    setToChain(fromChain);
+    setToToken(fromToken);
+    setInputAmount(outputAmount?.toString() || '');
+    setCount(prev => prev + 1);
+  };
+  const errorMessage = loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
+  const needsToWarnEthOnPath = false;
+  const showBestRoute = inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
+  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
+  const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
+  const {
+    fromAmountRangeError,
+    recommendation,
+    swap
+  } = LimitErrorMessage(bestRoute);
+  const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
+  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath);
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+  const highFee = hasHighFee(totalFeeInUsd);
+  return React__default.createElement(Container$2, null, React__default.createElement(Header, {
+    onClickRefresh: fetchBestRoute
+  }), React__default.createElement(TokenInfo, {
+    type: "From",
+    chain: fromChain,
+    token: fromToken,
+    onAmountChange: setInputAmount,
+    inputAmount: inputAmount
+  }), React__default.createElement(SwitchButtonContainer, null, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: swithFromAndTo
+  }, React__default.createElement(ui.VerticalSwapIcon, {
+    size: 36
+  }), isRouterInContext && React__default.createElement(SwithFromAndTo, {
+    count: count
+  }))), React__default.createElement(TokenInfo, {
+    type: "To",
+    chain: toChain,
+    token: toToken,
+    outputAmount: outputAmount,
+    outputUsdValue: outputUsdValue
+  }), showBestRoute && React__default.createElement(BestRouteContainer, null, React__default.createElement(ui.BestRoute, {
+    error: bestRouteError,
+    loading: fetchingBestRoute,
+    data: bestRoute,
+    totalFee: numberToString(totalFeeInUsd, 0, 2),
+    feeWarning: highFee,
+    totalTime: secondsToString(totalArrivalTime(bestRoute))
+  })), (errorMessage || waningMessage || hasLimitError(bestRoute)) && React__default.createElement(Alerts, null, errorMessage && React__default.createElement(ui.Alert, {
+    type: "error"
+  }, React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, errorMessage)), hasLimitError(bestRoute) && React__default.createElement(ui.Alert, {
+    type: "error",
+    title: `${swap?.swapperId} Limit`
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, fromAmountRangeError), React__default.createElement("br", null), React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, "Yours: ", numberToString(swap?.fromAmount || null), swap?.from.symbol), React__default.createElement("br", null), React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, recommendation))), waningMessage ), React__default.createElement(Footer, null, React__default.createElement(ui.Button, {
+    type: "primary",
+    align: "grow",
+    size: "large",
+    disabled: swapButtonState.disabled,
+    onClick: () => {
+      if (swapButtonState.title === 'Connect Wallet') navigate(navigationRoutes.wallets);else {
+        navigate(navigationRoutes.confirmWallets);
+      }
+    }
+  }, swapButtonState.title), React__default.createElement(BottomLogo, null)));
+}
+
+const Route = props => {
+  const location = reactRouter.useLocation();
+  const navigate = reactRouter.useNavigate();
+  const ref = React.useRef(true);
+  React.useEffect(() => {
+    if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) navigate(navigationRoutes.home + location.search, {
+      state: 'redirect'
+    });
+    ref.current = false;
+  }, []);
+  if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) return React__default.createElement(Home, null);
+  return React__default.createElement(React__default.Fragment, null, " ", props.children);
+};
+function AppRouter(_ref) {
+  let {
+    children
+  } = _ref;
+  const isRouterInContext = reactRouter.useInRouterContext();
+  const Router = isRouterInContext ? Route : reactRouter.MemoryRouter;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Router, null, children), isRouterInContext && React__default.createElement(UpdateUrl, null));
+}
+
+const useUiStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()(set => ({
+  connectWalletsButtonDisabled: false,
+  toggleConnectWalletsButton: () => set(state => ({
+    connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled
+  }))
+})));
+
+const StyledButton = /*#__PURE__*/ui.styled(ui.Button, {
+  marginTop: '$8'
+});
+function ChangeSlippageButton() {
+  const navigate = reactRouterDom.useNavigate();
+  return React__default.createElement(StyledButton, {
+    type: "primary",
+    variant: "contained",
+    size: "small",
+    onClick: navigate.bind(null, navigationRoutes.settings)
+  }, "Change Slippage");
+}
+
+function HighSlippageWarning(props) {
+  const {
+    selectedSlippage
+  } = props;
+  return React__default.createElement(ui.Alert, {
+    type: "warning"
+  }, React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, "slippage is high=> Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.", React__default.createElement(ChangeSlippageButton, null)));
+}
+
+function ConfirmSwapExtraMessages(props) {
+  const {
+    selectedSlippage
+  } = props;
+  const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
+  return React__default.createElement(React__default.Fragment, null, highSlippage && React__default.createElement(HighSlippageWarning, {
+    selectedSlippage: selectedSlippage
+  }));
+}
+
+function useNavigateBack() {
+  const isRouterInContext = reactRouterDom.useInRouterContext();
+  const navigate = reactRouterDom.useNavigate();
+  const navigateBackFrom = currentRoute => {
+    if (!isRouterInContext || window.history.state && window.history.state.idx > 0) navigate(-1);else {
+      if ([navigationRoutes.fromChain, navigationRoutes.fromToken, navigationRoutes.toChain, navigationRoutes.toToken, navigationRoutes.settings, navigationRoutes.wallets, navigationRoutes.history].includes(currentRoute)) navigate(navigationRoutes.home, {
+        replace: true
+      });else if (currentRoute === navigationRoutes.liquiditySources) {
+        navigate(navigationRoutes.settings, {
+          replace: true
+        });
+      } else if (currentRoute === navigationRoutes.swapDetails) navigate(navigationRoutes.history, {
+        replace: true
+      });
+    }
+  };
+  return {
+    navigateBackFrom
+  };
+}
+
+const useConfirmSwapStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(() => ({
+  loading: false,
+  errors: [],
+  warnings: [],
+  proceedAnyway: false
+}))));
+var ConfirmSwapErrorTypes;
+(function (ConfirmSwapErrorTypes) {
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["NO_ROUTE"] = 0] = "NO_ROUTE";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS"] = 1] = "ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["REQUEST_FAILED"] = 2] = "REQUEST_FAILED";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["INSUFFICIENT_SLIPPAGE"] = 3] = "INSUFFICIENT_SLIPPAGE";
+})(ConfirmSwapErrorTypes || (ConfirmSwapErrorTypes = {}));
+var ConfirmSwapWarningTypes;
+(function (ConfirmSwapWarningTypes) {
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_UPDATED"] = 0] = "ROUTE_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_SWAPPERS_UPDATED"] = 1] = "ROUTE_SWAPPERS_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_COINS_UPDATED"] = 2] = "ROUTE_COINS_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_AND_OUTPUT_AMOUNT_UPDATED"] = 3] = "ROUTE_AND_OUTPUT_AMOUNT_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
+})(ConfirmSwapWarningTypes || (ConfirmSwapWarningTypes = {}));
+const confirmSwap = () => {
+  const {
+    fromToken,
+    toToken,
+    inputAmount,
+    bestRoute: initialRoute,
+    inputUsdValue,
+    setBestRoute
+  } = useBestRouteStore.getState();
+  const {
+    accounts,
+    selectedWallets
+  } = useWalletsStore.getState();
+  const {
+    proceedAnyway
+  } = useConfirmSwapStore.getState();
+  const {
+    disabledLiquiditySources,
+    slippage,
+    customSlippage
+  } = useSettingsStore.getState();
+  const {
+    meta
+  } = useMetaStore.getState();
+  const userSlippage = customSlippage || slippage;
+  if (!fromToken || !toToken || !inputAmount || !initialRoute) return;
+  if (proceedAnyway) {
+    const swapSettings = {
+      slippage: userSlippage.toString(),
+      disabledSwappersGroups: disabledLiquiditySources
+    };
+    const newSwap = calculatePendingSwap(inputAmount.toString(), initialRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+    console.log('new swap:', newSwap);
+    return useConfirmSwapStore.setState({
+      errors: [],
+      warnings: [],
+      proceedAnyway: false
+    });
+  }
+  let abortController = new AbortController();
+  useConfirmSwapStore.setState({
+    loading: true
+  });
+  const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, true);
+  const unsubscribeFromBestRouteStore = useBestRouteStore.subscribe(state => state.bestRoute, () => {
+    abortController.abort();
+  }, {
+    equalityFn: shallow.shallow
+  });
+  const unsubscribeFromWalletsStore = useWalletsStore.subscribe(state => state.selectedWallets, () => {
+    abortController?.abort();
+  }, {
+    equalityFn: (prevState, state) => {
+      const selectedWalletsChanged = !state.every(wallet => !!prevState.find(prevWallet => wallet.address === prevWallet.address && wallet.chain === prevWallet.chain));
+      if (selectedWalletsChanged) return false;else return true;
+    }
+  });
+  httpService.getBestRoute(requestBody, {
+    signal: abortController.signal
+  }).then(confiremedRoute => {
+    useConfirmSwapStore.setState({
+      loading: false
+    });
+    if (!confiremedRoute.result || !new BigNumber__default(confiremedRoute.requestAmount).isEqualTo(new BigNumber__default(inputAmount || '-1'))) return useConfirmSwapStore.setState(prevState => ({
+      errors: prevState.errors.concat({
+        type: ConfirmSwapErrorTypes.NO_ROUTE
+      })
+    }));
+    const confirmSwap = {
+      loading: false,
+      errors: [],
+      warnings: [],
+      proceedAnyway
+    };
+    const routeChanged = isRouteChanged(initialRoute, confiremedRoute);
+    if (routeChanged) {
+      setBestRoute(confiremedRoute);
+      const newRouteOutputUsdValue = new BigNumber__default(confiremedRoute.result?.outputAmount || '0').multipliedBy(toToken.usdPrice || 0);
+      const outputRatio = getOutputRatio(inputUsdValue, newRouteOutputUsdValue);
+      const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
+      if (isNumberOfSwapsChanged(initialRoute, confiremedRoute)) confirmSwap.warnings.push({
+        type: ConfirmSwapWarningTypes.ROUTE_UPDATED
+      });else if (isRouteSwappersUpdated(initialRoute, confiremedRoute)) confirmSwap.warnings.push({
+        type: ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED
+      });else isRouteInternalCoinsUpdated(initialRoute, confiremedRoute);
+      confirmSwap.warnings.push({
+        type: ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED
+      });
+      if (highValueLoss) confirmSwap.errors.push({
+        type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS
+      });else if (isOutputAmountChangedALot(initialRoute, confiremedRoute)) confirmSwap.warnings.push({
+        type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+        newOutputAmount: numberToString(getRouteOutputAmount(confiremedRoute)),
+        percentageChange: numberToString(getPercentageChange(getRouteOutputAmount(initialRoute), getRouteOutputAmount(confiremedRoute)), null, 2)
+      });
+    }
+    const balanceWarnings = getBalanceWarnings(confiremedRoute, selectedWallets);
+    const enoughBalance = balanceWarnings.length === 0;
+    if (!enoughBalance) confirmSwap.warnings.push({
+      type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE,
+      messages: balanceWarnings
+    });
+    const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
+    if (!hasProperSlippage(userSlippage.toString(), minRequiredSlippage)) confirmSwap.errors.push({
+      type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE,
+      minRequiredSlippage
+    });
+    const noErrors = confirmSwap.errors.length === 0;
+    const noWarnings = confirmSwap.warnings.length === 0;
+    if ((noErrors || !noErrors && proceedAnyway) && (noWarnings || !noWarnings && proceedAnyway)) {
+      const swapSettings = {
+        slippage: userSlippage.toString(),
+        disabledSwappersGroups: disabledLiquiditySources
+      };
+      const newSwap = calculatePendingSwap(inputAmount.toString(), initialRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+      console.log('new swap:', newSwap);
+    } else if (!proceedAnyway) confirmSwap.proceedAnyway = true;
+    abortController = null;
+    useConfirmSwapStore.setState(confirmSwap);
+    unsubscribeFromBestRouteStore();
+    unsubscribeFromWalletsStore();
+  }).catch(error => {
+    abortController = null;
+    if (error.code === 'ERR_CANCELED') {
+      useConfirmSwapStore.setState({
+        errors: [],
+        warnings: [],
+        loading: false,
+        proceedAnyway: false
+      });
+      unsubscribeFromBestRouteStore();
+      unsubscribeFromWalletsStore();
+    }
+    const status = error.response?.status;
+    useConfirmSwapStore.setState(prevState => ({
+      loading: false,
+      errors: prevState.errors.concat({
+        type: ConfirmSwapErrorTypes.REQUEST_FAILED,
+        status
+      })
+    }));
+  });
+};
+
+function MinRequiredSlippage(_ref) {
+  let {
+    minRequiredSlippage
+  } = _ref;
+  return React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, "slippage is low => We recommend you to increase slippage to at least", minRequiredSlippage, "for this route.", React__default.createElement(ChangeSlippageButton, null));
+}
+
+function ConfirmSwapErrors(errors) {
+  return errors.flatMap(error => {
+    switch (error.type) {
+      case ConfirmSwapErrorTypes.NO_ROUTE:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "No routes found. Please try again later.");
+      case ConfirmSwapErrorTypes.REQUEST_FAILED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`);
+      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "Route updated and price impact is too high, try again later!");
+      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
+        return React__default.createElement(MinRequiredSlippage, {
+          minRequiredSlippage: error.minRequiredSlippage
+        });
+      default:
+        return [];
+    }
+  });
+}
+
+function BalanceWarnings(_ref) {
+  let {
+    messages
+  } = _ref;
+  return React__default.createElement("div", null, messages.map(warning => React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, warning)));
+}
+
+function ConfirmSwapWarnings(warnings) {
+  return warnings.flatMap(warning => {
+    switch (warning.type) {
+      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "Route has been updated.");
+      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, `Output amount changed to ${warning.newOutputAmount} 
+      (${warning.percentageChange}% change).`);
+      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "Route swappers has been updated.");
+      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
+        return React__default.createElement(ui.Typography, {
+          variant: "body2"
+        }, "Route internal coins has been updated.");
+      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
+        return React__default.createElement(BalanceWarnings, {
+          messages: warning.messages
+        });
+      default:
+        return [];
+    }
+  });
+}
+
+function ConfirmSwapPage() {
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const loading = useConfirmSwapStore.use.loading();
+  const warnings = useConfirmSwapStore.use.warnings();
+  const errors = useConfirmSwapStore.use.errors();
+  console.log('loading:', loading, 'warnings:', warnings, 'errors:', errors);
+  const slippage = useSettingsStore.use.slippage();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const selectedSlippage = customSlippage || slippage;
+  return React__default.createElement(ui.ConfirmSwap, {
+    onConfirm: confirmSwap.bind(null),
+    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
+    bestRoute: bestRoute,
+    loading: loading,
+    errors: ConfirmSwapErrors(errors),
+    warnings: ConfirmSwapWarnings(warnings),
+    extraMessages: React__default.createElement(ConfirmSwapExtraMessages, {
+      selectedSlippage: selectedSlippage
+    }),
+    confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!',
+    confirmButtonDisabled: errors.length > 0
+  });
+}
+
+const pendingSwap = [{
   creationTime: '1673164511955',
   finishTime: '1673164550137',
   requestId: '51e211d9-d61c-45d2-a4d4-1f9f7f90ee85',
@@ -1121,7 +1795,7 @@ const pendingSwap = [{
       address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl'
     }
   },
-  status: 'failed',
+  status: 'running',
   isPaused: false,
   extraMessage: null,
   extraMessageSeverity: 'info',
@@ -1139,10 +1813,10 @@ const pendingSwap = [{
     outputAmount: '1.540670',
     swaps: [{
       swapperId: 'Osmosis',
+      swapperType: 'DEX',
       swapperLogo: '',
       // @ts-ignore
       result: null,
-      swapperType: 'DEX',
       from: {
         symbol: 'JUNO',
         logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
@@ -1241,12 +1915,12 @@ const pendingSwap = [{
     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',
-    swapperLogo: '',
-    swapperType: '',
     fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
     toSymbol: 'OSMO',
     toSymbolAddress: null,
@@ -1256,7 +1930,7 @@ const pendingSwap = [{
     swapperId: 'Osmosis',
     expectedOutputAmountHumanReadable: '1.540670',
     outputAmount: '1.540658',
-    status: 'failed',
+    status: 'running',
     networkStatus: null,
     executedTransactionId: '0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
     explorerUrl: [{
@@ -1329,7 +2003,7 @@ const pendingSwap = [{
       address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl'
     }
   },
-  status: 'success',
+  status: 'failed',
   isPaused: false,
   extraMessage: null,
   extraMessageSeverity: 'info',
@@ -1346,11 +2020,11 @@ const pendingSwap = [{
   simulationResult: {
     outputAmount: '1.540670',
     swaps: [{
-      // @ts-ignore
-      result: [],
       swapperId: 'Osmosis',
-      swapperType: 'DEX',
       swapperLogo: '',
+      // @ts-ignore
+      result: null,
+      swapperType: 'DEX',
       from: {
         symbol: 'JUNO',
         logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
@@ -1449,12 +2123,12 @@ const pendingSwap = [{
     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',
+    swapperLogo: '',
+    swapperType: '',
     fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
     toSymbol: 'OSMO',
     toSymbolAddress: null,
@@ -1464,543 +2138,287 @@ const pendingSwap = [{
     swapperId: 'Osmosis',
     expectedOutputAmountHumanReadable: '1.540670',
     outputAmount: '1.540658',
-    status: 'success',
+    status: 'failed',
     networkStatus: null,
     executedTransactionId: '0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
     explorerUrl: [{
       url: 'https://www.mintscan.io/osmosis/txs/0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
       description: null
-    }],
-    cosmosTransaction: {
-      type: rangoSdk.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 = reactRouterDom.useNavigate();
-  return React__default.createElement(ui.History, {
-    list: pendingSwap,
-    onSwapClick: () => navigate(navigationRoutes.swapDetails),
-    onBack: () => {
-      navigate(-1);
-    }
-  });
-}
-
-const ButtonsContainer = /*#__PURE__*/ui.styled('div', {
-  display: 'flex'
-});
-function HeaderButtons(props) {
-  const {
-    onClickRefresh
-  } = props;
-  const navigate = reactRouterDom.useNavigate();
-  return React__default.createElement(ButtonsContainer, null, React__default.createElement(ui.Tooltip, {
-    content: "Retry"
-  }, React__default.createElement(ui.Button, {
-    variant: "ghost",
-    onClick: onClickRefresh.bind(null)
-  }, React__default.createElement(ui.RetryIcon, {
-    size: 28
-  }))), React__default.createElement(ui.Tooltip, {
-    content: "Transactions History"
-  }, React__default.createElement(ui.Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.history)
-  }, React__default.createElement(ui.HistoryIcon, {
-    size: 24
-  }))), React__default.createElement(ui.Tooltip, {
-    content: "Settings"
-  }, React__default.createElement(ui.Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.settings)
-  }, React__default.createElement(ui.SettingsIcon, {
-    size: 24
-  }))));
-}
-
-const HeaderContainer = /*#__PURE__*/ui.styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%',
-  padding: '$16 0'
-});
-function Header(props) {
-  const {
-    onClickRefresh
-  } = props;
-  return React__default.createElement(HeaderContainer, null, React__default.createElement(ui.Typography, {
-    variant: "h4"
-  }, "SWAP"), React__default.createElement(HeaderButtons, {
-    onClickRefresh: onClickRefresh
-  }));
-}
-
-const Box = /*#__PURE__*/ui.styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%'
-});
-const Container = /*#__PURE__*/ui.styled('div', {
-  boxSizing: 'border-box',
-  backgroundColor: '$neutrals300',
-  borderRadius: '$5',
-  padding: '$8 0',
-  '.form': {
-    display: 'flex',
-    width: '100%',
-    padding: '$8 $16'
-  }
-});
-const StyledImage = /*#__PURE__*/ui.styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
-const Options = /*#__PURE__*/ui.styled('div', {
-  display: 'flex',
-  justifyContent: 'flex-end',
-  padding: '0 $8'
-});
-const ImagePlaceholder = /*#__PURE__*/ui.styled('span', {
-  width: '24px',
-  height: '24px',
-  backgroundColor: '$neutrals300',
-  borderRadius: '99999px'
-});
-const OutputContainer = /*#__PURE__*/ui.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 = reactRouterDom.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__default.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, loadingStatus === 'failed' && React__default.createElement(ui.InfoCircleIcon, {
-    color: "error",
-    size: 24
-  }), React__default.createElement(ui.AngleDownIcon, null));
-  return React__default.createElement(Box, null, React__default.createElement("div", null, React__default.createElement(ui.Typography, {
-    variant: "body2"
-  }, type)), React__default.createElement(Container, null, props.type === 'From' && React__default.createElement(Options, null, React__default.createElement("div", {
-    className: "balance",
-    onClick: () => {
-      if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
-    }
-  }, React__default.createElement(ui.Button, {
-    variant: "ghost",
-    size: "small"
-  }, React__default.createElement(ui.Typography, {
-    variant: "body2"
-  }, `Max: ${tokenBalance} ${fromToken?.symbol || ''}`)))), React__default.createElement("div", {
-    className: "form"
-  }, React__default.createElement(ui.Button, {
-    onClick: () => {
-      navigate(`/${props.type.toLowerCase()}-chain`);
-    },
-    variant: "outlined",
-    disabled: loadingStatus === 'failed',
-    loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React__default.createElement(StyledImage, {
-      src: chain.logo
-    }) : React__default.createElement(ImagePlaceholder, null),
-    suffix: ItemSuffix,
-    align: "start",
-    size: "large",
-    style: {
-      marginRight: '.5rem'
-    }
-  }, loadingStatus === 'success' && chain ? chain.displayName : 'Chain'), React__default.createElement(ui.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__default.createElement(StyledImage, {
-      src: token.image
-    }) : React__default.createElement(ImagePlaceholder, null),
-    suffix: ItemSuffix,
-    size: "large",
-    align: "start",
-    style: {
-      marginRight: '.5rem'
-    }
-  }, loadingStatus === 'success' && token ? token.symbol : 'Token'), props.type === 'From' ? React__default.createElement(ui.TextField, {
-    type: "number",
-    size: "large",
-    autoFocus: true,
-    placeholder: "0",
-    style: {
-      width: '70%',
-      position: 'relative',
-      backgroundColor: '$background !important'
+    }],
+    cosmosTransaction: {
+      type: rangoSdk.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
     },
-    suffix: React__default.createElement("span", {
-      style: {
-        position: 'absolute',
-        right: '4px',
-        bottom: '2px'
-      }
-    }, React__default.createElement(ui.Typography, {
-      variant: "caption"
-    }, `$${numberToString(inputUsdValue)}`)),
-    value: props.inputAmount || '',
-    onChange: props.type === 'From' ? event => {
-      props.onAmountChange(event.target.value);
-    } : undefined
-  }) : React__default.createElement(OutputContainer, null, React__default.createElement(ui.Typography, {
-    variant: "body1"
-  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'), React__default.createElement("span", {
-    style: {
-      position: 'absolute',
-      right: '4px',
-      bottom: '2px'
-    }
-  }, React__default.createElement(ui.Typography, {
-    variant: "caption"
-  }, `$${numberToString(props.outputUsdValue)}`))))));
-}
-
-const Container$1 = /*#__PURE__*/theme.styled('div', {
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'end',
-  alignItems: 'center',
-  paddingTop: '$16'
-});
-const Logo = /*#__PURE__*/theme.styled('svg', {
-  fill: '$foreground',
-  width: '$24',
-  margin: '0 $8 0 $16'
-});
-const StyledAnchor = /*#__PURE__*/theme.styled('a', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  textDecoration: 'none'
-});
-function BottomLogo() {
-  return React__default.createElement(Container$1, null, React__default.createElement(ui.Typography, {
-    variant: "caption"
-  }, "Powered By"), React__default.createElement(StyledAnchor, {
-    href: "https://rango.exchange",
-    target: "_blank"
-  }, React__default.createElement(Logo, {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 33.68 29"
-  }, React__default.createElement("defs", null), React__default.createElement("g", {
-    id: "Layer_2",
-    "data-name": "Layer 2"
-  }, React__default.createElement("g", {
-    id: "Layer_1-2",
-    "data-name": "Layer 1"
-  }, React__default.createElement("path", {
-    d: "M33.68,18.05A17.93,17.93,0,0,0,28.34,5.29,18.31,18.31,0,0,0,15.45,0H13.54V7.41L6.07,0H.69L9.83,9.07H0V11A17.93,17.93,0,0,0,5.34,23.71,18.32,18.32,0,0,0,18.24,29h1.9V21.59l7.38,7.31h5.39l-9-9h9.82ZM17.37,16.16H12.49a1.93,1.93,0,0,0-1.35.55,1.89,1.89,0,0,0-.56,1.34,1.85,1.85,0,0,0,.56,1.33,1.93,1.93,0,0,0,1.35.55h3.84V25.1A14.43,14.43,0,0,1,8,21a14.21,14.21,0,0,1-4.1-8.2H21.2a1.86,1.86,0,0,0,.74-.13,1.92,1.92,0,0,0,.64-.4,2,2,0,0,0,.43-.62,1.88,1.88,0,0,0,0-1.47,2,2,0,0,0-.43-.62,1.92,1.92,0,0,0-.64-.4,1.86,1.86,0,0,0-.74-.13H17.35V3.9A14.43,14.43,0,0,1,25.64,8a14.19,14.19,0,0,1,4.11,8.2Zm2.12-5.27a1.43,1.43,0,0,1,.26-.83,1.52,1.52,0,0,1,.67-.56,1.55,1.55,0,0,1,.88-.08,1.51,1.51,0,0,1,.77.4,1.54,1.54,0,0,1,.42.77,1.41,1.41,0,0,1-.09.86,1.47,1.47,0,0,1-.55.68,1.56,1.56,0,0,1-.84.25,1.52,1.52,0,0,1-1.52-1.49Z"
-  }), React__default.createElement("path", {
-    d: "M21.7,11.57a.68.68,0,0,0-.12-.38.64.64,0,0,0-.31-.25.68.68,0,0,0-.75.15.61.61,0,0,0-.19.35.62.62,0,0,0,0,.4.67.67,0,0,0,.25.3.69.69,0,0,0,.39.12.7.7,0,0,0,.49-.2A.68.68,0,0,0,21.7,11.57Z"
-  })))), React__default.createElement(ui.Typography, {
-    variant: "body2"
-  }, "RANGO")));
-}
-
-function SwithFromAndTo(_ref) {
-  let {
-    count
-  } = _ref;
-  const firstRender = React.useRef(true);
-  const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
-  const outputAmount = useBestRouteStore.use.outputAmount();
-  React.useEffect(() => {
-    if (!firstRender.current) {
-      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
-      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
-      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
-      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
-      setSearchParams({
-        ...(toChainString && {
-          [SearchParams.FROM_CHAIN]: toChainString
-        }),
-        ...(toTokenString && {
-          [SearchParams.FROM_TOKEN]: toTokenString
-        }),
-        ...(fromChainString && {
-          [SearchParams.TO_CHAIN]: fromChainString
-        }),
-        ...(fromTokenString && {
-          [SearchParams.TO_TOKEN]: fromTokenString
-        }),
-        ...(outputAmount && {
-          [SearchParams.FROM_AMOUNT]: outputAmount.toString()
-        })
-      });
-    } else {
-      firstRender.current = false;
+    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'
     }
-  }, [count]);
-  return null;
-}
-
-const Footer = /*#__PURE__*/ui.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] = React.useState(0);
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState('');
-  const [data, setData] = React.useState(null);
-  const abortControllerRef = React.useRef(null);
-  const retry = () => {
-    setCount(prev => prev + 1);
-  };
-  React.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
+  },
+  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: rangoSdk.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'
+          }]
         },
-        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__*/ui.styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
-const SwitchButtonContainer = /*#__PURE__*/ui.styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  position: 'relative',
-  top: '11px'
-});
-const BestRouteContainer = /*#__PURE__*/ui.styled('div', {
-  width: '100%',
-  paddingTop: '$16'
-});
-const Alerts = /*#__PURE__*/ui.styled('div', {
-  paddingTop: '$16'
-});
-function Home() {
-  const waningMessage = '';
-  const isRouterInContext = reactRouterDom.useInRouterContext();
+        signType: 'AMINO',
+        rpcUrl: ''
+      },
+      rawTransfer: null
+    },
+    solanaTransaction: null,
+    evmTransaction: null,
+    evmApprovalTransaction: null,
+    transferTransaction: null,
+    diagnosisUrl: null,
+    internalSteps: null
+  }]
+}];
+function HistoryPage() {
   const navigate = reactRouterDom.useNavigate();
-  const [count, setCount] = React.useState(0);
-  const fromChain = useBestRouteStore.use.fromChain();
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toChain = useBestRouteStore.use.toChain();
-  const toToken = useBestRouteStore.use.toToken();
-  const setFromChain = useBestRouteStore.use.setFromChain();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToChain = useBestRouteStore.use.setToChain();
-  const setToToken = useBestRouteStore.use.setToToken();
-  const 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);
-  React.useEffect(() => {
-    setBestRoute(data);
-  }, [data]);
-  return React__default.createElement(Container$2, null, React__default.createElement(Header, {
-    onClickRefresh: retry
-  }), React__default.createElement(TokenInfo, {
-    type: "From",
-    chain: fromChain,
-    token: fromToken,
-    onAmountChange: setInputAmount,
-    inputAmount: inputAmount
-  }), React__default.createElement(SwitchButtonContainer, null, React__default.createElement(ui.Button, {
-    variant: "ghost",
-    onClick: swithFromAndTo
-  }, React__default.createElement(ui.VerticalSwapIcon, {
-    size: 36
-  }), isRouterInContext && React__default.createElement(SwithFromAndTo, {
-    count: count
-  }))), React__default.createElement(TokenInfo, {
-    type: "To",
-    chain: toChain,
-    token: toToken,
-    outputAmount: outputAmount,
-    outputUsdValue: outputUsdValue
-  }), showBestRoute && React__default.createElement(BestRouteContainer, null, React__default.createElement(ui.BestRoute, {
-    error: bestRouteError,
-    loading: fetchingBestRoute,
-    data: data
-  })), (errorMessage || waningMessage) && React__default.createElement(Alerts, null, errorMessage && React__default.createElement(ui.Alert, {
-    description: errorMessage,
-    type: "error"
-  }), waningMessage ), React__default.createElement(Footer, null, React__default.createElement(ui.Button, {
-    type: "primary",
-    align: "grow",
-    size: "large",
-    disabled: buttonDisabled,
-    onClick: () => {
-      if (buttonTitle === 'Connect Wallet') navigate(navigationRoutes.wallets);else {
-        navigate(navigationRoutes.confirmWallets);
-      }
-    }
-  }, buttonTitle), React__default.createElement(BottomLogo, null)));
+    navigateBackFrom
+  } = useNavigateBack();
+  return React__default.createElement(ui.History, {
+    list: pendingSwap,
+    onSwapClick: navigate.bind(null, navigationRoutes.swapDetails),
+    onBack: navigateBackFrom.bind(null, navigationRoutes.history)
+  });
 }
 
 function LiquiditySourcePage() {
@@ -2010,7 +2428,9 @@ function LiquiditySourcePage() {
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
   const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
   const toggleAllLiquiditySources = useSettingsStore.use.toggleAllLiquiditySources();
-  const navigate = reactRouterDom.useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
   const uniqueSwappersGroups = [];
   removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
     return swappers.find(s => s.swapperGroup === swapperGroup);
@@ -2030,9 +2450,7 @@ function LiquiditySourcePage() {
     toggleAll: toggleAllLiquiditySources,
     list: uniqueSwappersGroups,
     onChange: liquiditySource => toggleLiquiditySource(liquiditySource.title),
-    onBack: () => {
-      navigate(-1);
-    }
+    onBack: navigateBackFrom.bind(null, navigationRoutes.liquiditySources)
   });
 }
 
@@ -2040,7 +2458,6 @@ function SelectChainPage(props) {
   const {
     type
   } = props;
-  const accounts = useWalletsStore.use.accounts();
   const {
     blockchains
   } = useMetaStore.use.meta();
@@ -2051,30 +2468,21 @@ function SelectChainPage(props) {
   const setToChain = useBestRouteStore.use.setToChain();
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToToken = useBestRouteStore.use.setToToken();
-  const navigate = reactRouterDom.useNavigate();
-  const [list, setList] = React.useState(blockchains);
-  React.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]);
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
   return React__default.createElement(ui.BlockchainSelector, {
     type: type === 'from' ? 'Source' : 'Destination',
-    list: list,
+    list: blockchains,
     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);
+      navigateBackFrom(navigationRoutes.fromChain);
     },
-    onBack: navigate.bind(null, -1)
+    onBack: navigateBackFrom.bind(null, navigationRoutes.fromChain)
   });
 }
 
@@ -2082,7 +2490,9 @@ function SelectTokenPage(props) {
   const {
     type
   } = props;
-  const navigate = reactRouterDom.useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
   const {
     tokens
   } = useMetaStore.use.meta();
@@ -2116,9 +2526,9 @@ function SelectTokenPage(props) {
     selected: type === 'from' ? fromToken : toToken,
     onChange: token => {
       if (type === 'from') setFromToken(token);else setToToken(token);
-      navigate(-1);
+      navigateBackFrom(navigationRoutes.fromToken);
     },
-    onBack: navigate.bind(null, -1)
+    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken)
   });
 }
 
@@ -2134,6 +2544,9 @@ function SettingsPage() {
     swappers
   } = useMetaStore.use.meta();
   const navigate = reactRouterDom.useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
   const uniqueSwappersGroups = [];
   removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
     return swappers.find(s => s.swapperGroup === swapperGroup);
@@ -2150,17 +2563,17 @@ function SettingsPage() {
     }
   });
   return React__default.createElement(ui.Settings, {
-    slippages: [1, 2, 3, 4],
+    slippages: SLIPPAGES,
     selectedSlippage: slippage,
     onSlippageChange: slippage => setSlippage(slippage),
     liquiditySources: uniqueSwappersGroups,
     selectedLiquiditySources: uniqueSwappersGroups.filter(s => s.selected),
-    onLiquiditySourcesClick: () => navigate(navigationRoutes.liquiditySources),
-    onBack: navigate.bind(null, -1),
+    onLiquiditySourcesClick: navigate.bind(null, navigationRoutes.liquiditySources),
+    onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
     customSlippage: customSlippage || NaN,
     onCustomSlippageChange: setCustomSlippage,
-    minSlippage: 1,
-    maxSlippage: 10,
+    minSlippage: MIN_SLIPPGAE,
+    maxSlippage: MAX_SLIPPAGE,
     selectedTheme: theme,
     onThemeChange: setTheme
   });
@@ -2171,13 +2584,16 @@ const ListContainer = /*#__PURE__*/ui.styled('div', {
   gap: '.5rem',
   gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
   height: '450px',
-  alignContent: 'baseline'
+  alignContent: 'baseline',
+  padding: '0 0.5rem'
 });
 const AlertContainer = /*#__PURE__*/ui.styled('div', {
   paddingBottom: '$16'
 });
 function WalletsPage() {
-  const navigate = reactRouterDom.useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
   const {
     state,
     disconnect,
@@ -2186,6 +2602,7 @@ function WalletsPage() {
   } = walletsCore.useWallets();
   const wallets = getlistWallet(state, getWalletInfo, Object.values(walletsShared.WalletType));
   const [walletErrorMessage, setWalletErrorMessage] = React.useState('');
+  const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
   const onSelectWallet = async type => {
     const wallet = state(type);
     try {
@@ -2199,24 +2616,29 @@ function WalletsPage() {
       setWalletErrorMessage('Error: ' + e.message);
     }
   };
+  React.useEffect(() => {
+    toggleConnectWalletsButton();
+    return () => toggleConnectWalletsButton();
+  }, []);
   return React__default.createElement(ui.SecondaryPage, {
     title: "Select Wallet",
     textField: false,
-    onBack: () => {
-      navigate(-1);
-    },
-    Content: React__default.createElement(React__default.Fragment, null, walletErrorMessage && React__default.createElement(AlertContainer, null, React__default.createElement(ui.Alert, {
-      type: "error",
-      description: walletErrorMessage
-    })), React__default.createElement(ListContainer, null, wallets.map((info, index) => React__default.createElement(ui.Wallet, Object.assign({}, info, {
-      key: index,
-      onClick: onSelectWallet
-    })))))
-  });
+    onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
+  }, React__default.createElement(React__default.Fragment, null, walletErrorMessage && React__default.createElement(AlertContainer, null, React__default.createElement(ui.Alert, {
+    type: "error"
+  }, React__default.createElement(ui.Typography, {
+    variant: "body2"
+  }, walletErrorMessage))), React__default.createElement(ListContainer, null, wallets.map((info, index) => React__default.createElement(ui.Wallet, Object.assign({}, info, {
+    key: index,
+    onClick: onSelectWallet
+  }))))));
 }
 
 function ConfirmWalletsPage() {
   const navigate = reactRouterDom.useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
   const bestRoute = useBestRouteStore.use.bestRoute();
   const {
     blockchains
@@ -2230,10 +2652,14 @@ function ConfirmWalletsPage() {
     connect
   } = walletsCore.useWallets();
   const confirmDisabled = !requiredWallets(bestRoute).every(chain => selectedWallets.map(wallet => wallet.chain).includes(chain));
+  const firstStep = bestRoute?.result?.swaps[0];
+  const lastStep = bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
+  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
+  const toAmount = decimalNumber(lastStep?.toAmount, 3);
   React.useEffect(() => {
     initSelectedWallets();
   }, []);
-  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo, getRequiredChains(bestRoute));
+  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
   const handleConnectChain = wallet => {
     const network = wallet;
     getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
@@ -2241,9 +2667,11 @@ function ConfirmWalletsPage() {
   return React__default.createElement(ui.ConfirmWallets, {
     requiredWallets: getRequiredChains(bestRoute),
     selectableWallets: selectableWallets,
-    onBack: () => navigate(-1),
+    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmWallets),
     swap: bestRoute,
-    onConfirm: () => navigate(navigationRoutes.confirmSwap),
+    fromAmount: fromAmount,
+    toAmount: toAmount,
+    onConfirm: navigate.bind(null, navigationRoutes.confirmSwap),
     onChange: wallet => setSelectedWallet(wallet),
     confirmDisabled: confirmDisabled,
     handleConnectChain: wallet => handleConnectChain(wallet),
@@ -2714,9 +3142,11 @@ const pendingSwap$1 = {
 };
 
 function SwapDetailsPage() {
-  const navigate = reactRouterDom.useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
   return React__default.createElement(ui.SwapHistory, {
-    onBack: navigate.bind(null, -1),
+    onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
     pendingSwap: pendingSwap$1
   });
 }
@@ -2789,8 +3219,9 @@ function Layout() {
   const {
     getWalletInfo
   } = walletsCore.useWallets();
-  const filterSelelectedWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
+  const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(w => w.image));
   const totalBalance = calculateWalletUsdValue(balances);
+  const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(Header$1, null, React__default.createElement(ui.Button, {
     size: "small",
     suffix: React__default.createElement(ui.AddWalletIcon, {
@@ -2798,10 +3229,12 @@ function Layout() {
     }),
     variant: "ghost",
     flexContent: true,
-    onClick: () => navigate(navigationRoutes.wallets)
-  }, accounts?.length ? filterSelelectedWallets.map((selectedWallet, index) => React__default.createElement(WalletImage, {
+    onClick: () => {
+      if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
+    }
+  }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React__default.createElement(WalletImage, {
     key: index,
-    src: selectedWallet.image
+    src: walletImage
   })) : React__default.createElement(React__default.Fragment, null), React__default.createElement(ui.Typography, {
     variant: "body2"
   }, !accounts?.length ? 'Connect Wallet' : `$${totalBalance || 0}`))), React__default.createElement(AppRoutes, null));