@rango-dev/widget-embedded 0.1.10-next.92 → 0.1.10-next.94

package/dist/widget-embedded.esm.js

@@ -4,15 +4,15 @@ import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation a
 import { useSearchParams, useLocation, createSearchParams, useNavigate, useInRouterContext, useRoutes } from 'react-router-dom';
 import { create } from 'zustand';
 import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
-import { persist, subscribeWithSelector } from 'zustand/middleware';
-import { RangoClient, isEvmBlockchain } from 'rango-sdk';
-import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, WalletType, getCosmosExperimentalChainInfo, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
+import { Network, isEvmAddress, detectInstallLink, KEPLR_COMPATIBLE_WALLETS, WalletType, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
 import { isCosmosBlockchain } from 'rango-types';
 import { readAccountAddress, useWallets, Provider as Provider$1, Events } from '@rango-dev/wallets-core';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
+import { RangoClient, isEvmBlockchain } from 'rango-sdk';
+import { shallow } from 'zustand/shallow';
 import { useTranslation, initReactI18next } from 'react-i18next';
 import { styled as styled$1 } from '@rango-dev/ui/src/theme';
 import { allProviders } from '@rango-dev/provider-all';
-import { shallow } from 'zustand/shallow';
 import { useManager, Provider } from '@rango-dev/queue-manager-react';
 import copy from 'copy-to-clipboard';
 import i18n from 'i18next';
@@ -62,117 +62,6 @@ function shadeColor(color, percent) {
   return '#' + RR + GG + BB;
 }
 
-const getBestRouteToTokenUsdPrice = bestRoute => bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
-function isNumberOfSwapsChanged(route1, route2) {
-  const route1Swaps = route1.result?.swaps || [];
-  const route2Swaps = route2.result?.swaps || [];
-  return route1Swaps.length !== route2Swaps.length;
-}
-function isRouteSwappersUpdated(route1, route2) {
-  const route1Swappers = route1.result?.swaps.map(swap => swap.swapperId) || [];
-  const route2Swappers = route2.result?.swaps.map(swap => swap.swapperId) || [];
-  return !areEqual(route1Swappers, route2Swappers);
-}
-function isRouteInternalCoinsUpdated(route1, route2) {
-  const route1InternalCoins = route1.result?.swaps.map(swap => swap.to.symbol) || [];
-  const route2InternalCoins = route2.result?.swaps.map(swap => swap.to.symbol) || [];
-  return !areEqual(route1InternalCoins, route2InternalCoins);
-}
-const isRouteChanged = (route1, route2) => {
-  return isNumberOfSwapsChanged(route1, route2) || isRouteSwappersUpdated(route1, route2) || isRouteInternalCoinsUpdated(route1, route2);
-};
-const getRequiredBalanceOfWallet = (selectedWallet, fee) => {
-  if (fee === null) return null;
-  const relatedFeeStatus = fee?.find(item => item.blockchain === selectedWallet.chain)?.wallets.find(wallet => wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase());
-  if (!relatedFeeStatus) return null;
-  return relatedFeeStatus.requiredAssets;
-};
-
-const createSelectors = _store => {
-  let store = _store;
-  store.use = {};
-  for (let k of Object.keys(store.getState())) {
-    store.use[k] = () => store(s => s[k]);
-  }
-  return store;
-};
-
-const httpService = /*#__PURE__*/new RangoClient(process.env.REACT_APP_API_KEY);
-
-const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
-const DEFAULT_SLIPPAGE = 1;
-const HIGH_SLIPPAGE = 5;
-const MAX_SLIPPAGE = 100;
-const MIN_SLIPPGAE = 0;
-
-const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
-  meta: {
-    blockchains: [],
-    popularTokens: [],
-    swappers: [],
-    tokens: []
-  },
-  loadingStatus: 'loading',
-  fetchMeta: async () => {
-    try {
-      const response = await httpService.getAllMetadata();
-      const chainThatHasTokenInMetaResponse = removeDuplicateFrom(response.tokens.map(t => t.blockchain));
-      const enabledChains = response.blockchains.filter(chain => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name));
-      response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
-      set({
-        meta: response,
-        loadingStatus: 'success'
-      });
-    } catch (error) {
-      set({
-        loadingStatus: 'failed'
-      });
-    }
-  }
-})));
-
-const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/persist( /*#__PURE__*/subscribeWithSelector(set => ({
-  slippage: DEFAULT_SLIPPAGE,
-  customSlippage: null,
-  infiniteApprove: false,
-  disabledLiquiditySources: [],
-  theme: 'auto',
-  setSlippage: slippage => set(() => ({
-    slippage: slippage
-  })),
-  setCustomSlippage: customSlippage => set(() => ({
-    customSlippage: customSlippage
-  })),
-  toggleAllLiquiditySources: () => set(state => {
-    const {
-      swappers
-    } = useMetaStore.getState().meta;
-    const swappersGroup = removeDuplicateFrom(swappers.map(swapper => swapper.swapperGroup));
-    if (swappersGroup.length === state.disabledLiquiditySources.length) return {
-      disabledLiquiditySources: []
-    };else {
-      return {
-        disabledLiquiditySources: swappersGroup
-      };
-    }
-  }),
-  toggleInfiniteApprove: () => set(state => ({
-    infiniteApprove: !state.infiniteApprove
-  })),
-  toggleLiquiditySource: name => set(state => {
-    if (state.disabledLiquiditySources.includes(name)) return {
-      disabledLiquiditySources: state.disabledLiquiditySources.filter(liquiditySource => liquiditySource != name)
-    };else return {
-      disabledLiquiditySources: state.disabledLiquiditySources.concat(name)
-    };
-  }),
-  setTheme: theme => set(() => ({
-    theme
-  }))
-})), {
-  name: 'user-settings'
-})));
-
 const secondsToString = s => {
   const seconds = (s % 60).toString().padStart(2, '0');
   const minutes = parseInt((s / 60).toString()).toString().padStart(2, '0');
@@ -231,15 +120,17 @@ function getlistWallet(getState, getWalletInfo, list) {
     const {
       name,
       img: image,
-      installLink
+      installLink,
+      showOnMobile
     } = getWalletInfo(type);
     const state = getStateWallet(getState(type));
     return {
       name,
       image,
-      installLink,
+      installLink: detectInstallLink(installLink),
       state,
-      type
+      type,
+      showOnMobile: typeof showOnMobile === 'undefined' ? false : true
     };
   });
 }
@@ -387,18 +278,12 @@ function numberWithThousandSeperator(number) {
   parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   return parts.join('.');
 }
-const sortedTokens = (tokens, position, balance) => {
-  if (!tokens) return [];
-  const walletSymbols = new Set((balance || []).flatMap(a => a.balances || []).filter(b => (new BigNumber(b?.rawAmount) || ZERO).gt(0)).map(b => `${b?.chain}.${b?.symbol}.${b?.address}`));
-  let sortedList = [...tokens.filter(t => !t.address && walletSymbols.size && position === 'to'), ...tokens.filter(t => !(position === 'to' && !t.address) && walletSymbols.has(`${t.blockchain}.${t.symbol}.${t.address}`)).sort((tokenA, tokenB) => compareBalance(tokenA, tokenB, balance)), ...tokens.filter(t => !walletSymbols.has(`${t.blockchain}.${t.symbol}.${t.address}`) && !t.address && (!walletSymbols.size || position === 'from')), ...tokens.filter(t => !walletSymbols.has(`${t.blockchain}.${t.symbol}.${t.address}`) && t.address && !t.isSecondaryCoin), ...tokens.filter(t => !walletSymbols.has(`${t.blockchain}.${t.symbol}.${t.address}`) && t.isSecondaryCoin)];
-  return sortedList;
-};
-const compareBalance = (tokenA, tokenB, wallet) => {
-  if (!tokenA.usdPrice || !tokenB.usdPrice) return 0;
-  const tokenAUsdValue = new BigNumber(getBalanceFromWallet(wallet, tokenA.blockchain, tokenA.symbol, tokenA.address)?.amount || ZERO).multipliedBy(tokenA.usdPrice);
-  const tokenBUsdValue = new BigNumber(getBalanceFromWallet(wallet, tokenB.blockchain, tokenB.symbol, tokenB.address)?.amount || ZERO).multipliedBy(tokenB.usdPrice);
-  if (tokenAUsdValue.gt(tokenBUsdValue)) return -1;
-  return 1;
+const sortTokens = tokens => {
+  let walletConnected = !!tokens.some(token => token.balance);
+  if (!walletConnected) {
+    return tokens.filter(token => !token.address).concat(tokens.filter(token => token.address && !token.isSecondaryCoin), tokens.filter(token => token.isSecondaryCoin));
+  }
+  return tokens.filter(token => !!token.balance).sort((tokenA, tokenB) => parseFloat(tokenB.balance?.usdValue || '0') - parseFloat(tokenA.balance?.usdValue || '0')).concat(tokens.filter(token => !token.balance && !token.isSecondaryCoin), tokens.filter(token => !token.balance && token.isSecondaryCoin));
 };
 const getUsdPrice = (blockchain, symbol, address, allTokens) => {
   const token = allTokens?.find(t => t.blockchain === blockchain && t.symbol?.toUpperCase() === symbol?.toUpperCase() && t.address === address);
@@ -415,6 +300,45 @@ const getKeplrCompatibleConnectedWallets = selectableWallets => {
   const connectedWalletTypes = new Set(selectableWallets.map(a => a.walletType.toString()));
   return KEPLR_COMPATIBLE_WALLETS.filter(compatibleWallet => connectedWalletTypes.has(compatibleWallet));
 };
+function getTokensWithBalance(tokens, balances) {
+  return tokens.map(_ref2 => {
+    let {
+      balance,
+      ...otherProps
+    } = _ref2;
+    const tokenAmount = numberToString(new BigNumber(getBalanceFromWallet(balances, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO));
+    let tokenUsdValue = '';
+    if (otherProps.usdPrice) tokenUsdValue = numberToString(new BigNumber(getBalanceFromWallet(balances, otherProps.blockchain, otherProps.symbol, otherProps.address)?.amount || ZERO).multipliedBy(otherProps.usdPrice));
+    return {
+      ...otherProps,
+      ...(tokenAmount !== '0' && {
+        balance: {
+          amount: tokenAmount,
+          usdValue: tokenUsdValue
+        }
+      })
+    };
+  });
+}
+function getSortedTokens(chain, tokens, balances, otherChainTokens) {
+  const fromChainEqueulsToToChain = chain?.name === otherChainTokens[0]?.name;
+  if (fromChainEqueulsToToChain) return otherChainTokens;
+  const filteredTokens = tokens.filter(token => token.blockchain === chain?.name);
+  return sortTokens(getTokensWithBalance(filteredTokens, balances));
+}
+function tokensAreEqual(tokenA, tokenB) {
+  return tokenA?.blockchain === tokenB?.blockchain && tokenA?.name === tokenB?.name && tokenA?.address === tokenB?.address;
+}
+function getDefaultToken(sortedTokens, otherToken) {
+  let selectedToken;
+  const firstToken = sortedTokens[0];
+  const secondToken = sortedTokens[1];
+  if (sortedTokens.length === 1) selectedToken = firstToken;else if (tokensAreEqual(firstToken, otherToken)) selectedToken = secondToken;else selectedToken = firstToken;
+  return selectedToken;
+}
+function sortWalletsBasedOnState(wallets) {
+  return wallets.sort((a, b) => Number(b.state === WalletState.CONNECTED) - Number(a.state === WalletState.CONNECTED) || Number(b.state === WalletState.DISCONNECTED) - Number(a.state === WalletState.DISCONNECTED));
+}
 
 function getOutputRatio(inputUsdValue, outputUsdValue) {
   if (inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) return 0;
@@ -582,10 +506,10 @@ function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validat
         transferTransaction: null,
         diagnosisUrl: null,
         internalSteps: null,
-        fromBlockchainLogo: fromBlockchain.logo,
-        toBlockchainLogo: toBlockchain.logo,
-        swapperLogo: swapper?.logo,
-        swapperType: swapperType
+        fromBlockchainLogo: fromBlockchain?.logo || '',
+        toBlockchainLogo: toBlockchain?.logo || '',
+        swapperLogo: swapper?.logo || '',
+        swapperType: swapperType || ''
       };
     }) || []
   };
@@ -629,7 +553,8 @@ function getMinRequiredSlippage(route) {
 }
 function hasProperSlippage(userSlippage, minRequiredSlippage) {
   if (!minRequiredSlippage) return true;
-  return parseFloat(userSlippage) > minRequiredSlippage;
+  //@ts-ignore
+  return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
 }
 function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, checkPrerequisites) {
   const selectedWalletsMap = selectedWallets.reduce((selectedWalletsMap, selectedWallet) => (selectedWalletsMap[selectedWallet.chain] = selectedWallet.address, selectedWalletsMap), {});
@@ -671,9 +596,10 @@ function getWalletsForNewSwap(selectedWallets) {
   return wallets;
 }
 function getRouteOutputAmount(route) {
-  return route.result?.outputAmount || null;
+  return route?.result?.outputAmount || null;
 }
 function getPercentageChange(oldValue, newValue) {
+  if (!oldValue || !newValue) return null;
   return new BigNumber(newValue).div(new BigNumber(oldValue)).minus(1).multipliedBy(100);
 }
 function isOutputAmountChangedALot(oldRoute, newRoute) {
@@ -681,6 +607,7 @@ function isOutputAmountChangedALot(oldRoute, newRoute) {
   const newOutputAmount = getRouteOutputAmount(newRoute);
   if (!oldOutputAmount || !newOutputAmount) return false;
   const percentageChange = getPercentageChange(oldOutputAmount, newOutputAmount);
+  if (!percentageChange) return true;
   return percentageChange.toNumber() <= -1;
 }
 function getBalanceWarnings(route, selectedWallets) {
@@ -698,7 +625,242 @@ function getBalanceWarnings(route, selectedWallets) {
     const warningMessage = `Needs ≈ ${requiredAmount} ${symbol}${reason}, but you have ${currentAmount} ${symbol} in your ${asset.asset.blockchain} wallet.`;
     return warningMessage;
   });
-}
+}
+
+function searchParamsToToken(tokens, searchParams, chain) {
+  if (!chain) return null;
+  return tokens.find(token => {
+    const symbolAndAddress = searchParams?.split('--');
+    if (symbolAndAddress?.length === 1) return token.symbol === symbolAndAddress[0] && token.address === null && token.blockchain === chain.name;
+    return token.symbol === symbolAndAddress?.[0] && token.address === symbolAndAddress?.[1] && token.blockchain === chain.name;
+  }) || null;
+}
+function getBestRouteToTokenUsdPrice(bestRoute) {
+  return bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
+}
+function isNumberOfSwapsChanged(route1, route2) {
+  const route1Swaps = route1.result?.swaps || [];
+  const route2Swaps = route2.result?.swaps || [];
+  return route1Swaps.length !== route2Swaps.length;
+}
+function isRouteSwappersUpdated(route1, route2) {
+  const route1Swappers = route1.result?.swaps.map(swap => swap.swapperId) || [];
+  const route2Swappers = route2.result?.swaps.map(swap => swap.swapperId) || [];
+  return !areEqual(route1Swappers, route2Swappers);
+}
+function isRouteInternalCoinsUpdated(route1, route2) {
+  const route1InternalCoins = route1.result?.swaps.map(swap => swap.to.symbol) || [];
+  const route2InternalCoins = route2.result?.swaps.map(swap => swap.to.symbol) || [];
+  return !areEqual(route1InternalCoins, route2InternalCoins);
+}
+function isRouteChanged(route1, route2) {
+  return isNumberOfSwapsChanged(route1, route2) || isRouteSwappersUpdated(route1, route2) || isRouteInternalCoinsUpdated(route1, route2);
+}
+function getRequiredBalanceOfWallet(selectedWallet, fee) {
+  if (fee === null) return null;
+  const relatedFeeStatus = fee?.find(item => item.blockchain === selectedWallet.chain)?.wallets.find(wallet => wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase());
+  if (!relatedFeeStatus) return null;
+  return relatedFeeStatus.requiredAssets;
+}
+function isRouteParametersChanged(prevParams, currentParams) {
+  return prevParams.fromChain?.name !== currentParams.fromChain?.name || prevParams.toChain?.name !== currentParams.toChain?.name || prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol || prevParams.toToken?.symbol !== currentParams.toToken?.symbol || prevParams.fromToken?.blockchain !== currentParams.fromToken?.blockchain || prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain || prevParams.fromToken?.address !== currentParams.fromToken?.address || prevParams.toToken?.address !== currentParams.toToken?.address || prevParams.inputAmount !== currentParams.inputAmount || prevParams.slippage !== currentParams.slippage || prevParams.customSlippage !== currentParams.customSlippage || prevParams.disabledLiquiditySources?.length !== currentParams.disabledLiquiditySources?.length;
+}
+function getBestRouteWithCalculatedFees(bestRoute, tokens) {
+  if (!bestRoute || !bestRoute.result) return null;
+  const swapsWithFee = (bestRoute?.result?.swaps || []).map(swap => ({
+    ...swap,
+    feeInUsd: numberToString(getUsdFeeOfStep(swap, tokens), 0, 2)
+  }));
+  return {
+    ...bestRoute,
+    result: {
+      ...bestRoute.result,
+      swaps: swapsWithFee
+    }
+  };
+}
+
+const createSelectors = _store => {
+  let store = _store;
+  store.use = {};
+  for (let k of Object.keys(store.getState())) {
+    store.use[k] = () => store(s => s[k]);
+  }
+  return store;
+};
+
+const httpService = /*#__PURE__*/new RangoClient(process.env.REACT_APP_API_KEY);
+
+const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
+const DEFAULT_SLIPPAGE = 1;
+const HIGH_SLIPPAGE = 5;
+const MAX_SLIPPAGE = 100;
+const MIN_SLIPPGAE = 0;
+
+const useMetaStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
+  meta: {
+    blockchains: [],
+    popularTokens: [],
+    swappers: [],
+    tokens: []
+  },
+  loadingStatus: 'loading',
+  fetchMeta: async () => {
+    try {
+      const response = await httpService.getAllMetadata();
+      const chainThatHasTokenInMetaResponse = removeDuplicateFrom(response.tokens.map(t => t.blockchain));
+      const enabledChains = response.blockchains.filter(chain => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name));
+      response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
+      set({
+        meta: response,
+        loadingStatus: 'success'
+      });
+    } catch (error) {
+      set({
+        loadingStatus: 'failed'
+      });
+    }
+  }
+})));
+
+const useSettingsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/persist( /*#__PURE__*/subscribeWithSelector(set => ({
+  slippage: DEFAULT_SLIPPAGE,
+  customSlippage: null,
+  infiniteApprove: false,
+  disabledLiquiditySources: [],
+  theme: 'auto',
+  setSlippage: slippage => set(() => ({
+    slippage: slippage
+  })),
+  setCustomSlippage: customSlippage => set(() => ({
+    customSlippage: customSlippage
+  })),
+  toggleAllLiquiditySources: () => set(state => {
+    const {
+      swappers
+    } = useMetaStore.getState().meta;
+    const swappersGroup = removeDuplicateFrom(swappers.map(swapper => swapper.swapperGroup));
+    if (swappersGroup.length === state.disabledLiquiditySources.length) return {
+      disabledLiquiditySources: []
+    };else {
+      return {
+        disabledLiquiditySources: swappersGroup
+      };
+    }
+  }),
+  toggleInfiniteApprove: () => set(state => ({
+    infiniteApprove: !state.infiniteApprove
+  })),
+  toggleLiquiditySource: name => set(state => {
+    if (state.disabledLiquiditySources.includes(name)) return {
+      disabledLiquiditySources: state.disabledLiquiditySources.filter(liquiditySource => liquiditySource != name)
+    };else return {
+      disabledLiquiditySources: state.disabledLiquiditySources.concat(name)
+    };
+  }),
+  setTheme: theme => set(() => ({
+    theme
+  }))
+})), {
+  name: 'user-settings'
+})));
+
+const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
+  accounts: [],
+  balances: [],
+  selectedWallets: [],
+  connectWallet: accounts => {
+    const tokens = useMetaStore.getState().meta.tokens;
+    set(state => ({
+      accounts: state.accounts.concat(accounts),
+      balances: state.balances.concat(accounts.map(account => ({
+        balances: [],
+        address: account.address,
+        chain: account.chain,
+        loading: true,
+        walletType: account.walletType,
+        error: false,
+        explorerUrl: null
+      })))
+    }));
+    accounts.forEach(async account => {
+      try {
+        const response = await httpService.getWalletsDetails([{
+          address: account.address,
+          blockchain: account.chain
+        }]);
+        const retrivedBalance = response.wallets[0];
+        if (retrivedBalance) {
+          set(state => ({
+            balances: state.balances.map(balance => {
+              return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
+            })
+          }));
+        } else throw new Error('Wallet not found');
+      } catch (error) {
+        set(state => ({
+          balances: state.balances.map(balance => {
+            return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
+          })
+        }));
+      }
+    });
+  },
+  disconnectWallet: walletType => {
+    set(state => ({
+      accounts: state.accounts.filter(account => account.walletType !== walletType),
+      balances: state.balances.filter(balance => balance.walletType !== walletType),
+      selectedWallets: state.selectedWallets.filter(wallet => wallet.walletType != walletType)
+    }));
+  },
+  initSelectedWallets: () => set(state => {
+    const requiredChains = getRequiredChains(useBestRouteStore.getState().bestRoute);
+    const connectedWallets = state.accounts;
+    const selectedWallets = [];
+    requiredChains.forEach(chain => {
+      const anyWalletSelected = !!state.selectedWallets.find(wallet => wallet.chain === chain);
+      if (!anyWalletSelected) {
+        const firstWalletWithMatchedChain = connectedWallets.find(wallet => wallet.chain === chain);
+        if (!!firstWalletWithMatchedChain) selectedWallets.push({
+          address: firstWalletWithMatchedChain.address,
+          chain: firstWalletWithMatchedChain.chain,
+          walletType: firstWalletWithMatchedChain.walletType
+        });
+      }
+    });
+    return {
+      selectedWallets: state.selectedWallets.concat(selectedWallets)
+    };
+  }),
+  setSelectedWallet: wallet => set(state => ({
+    selectedWallets: state.selectedWallets.filter(selectedWallet => selectedWallet.chain !== wallet.chain).concat({
+      chain: wallet.chain,
+      address: wallet.address,
+      walletType: wallet.walletType
+    })
+  })),
+  clearConnectedWallet: () => set(() => ({
+    accounts: [],
+    balances: [],
+    selectedWallets: []
+  }))
+}))));
+useWalletsStore.subscribe(state => state.balances, balances => {
+  useBestRouteStore.setState(_ref => {
+    let {
+      sourceTokens,
+      destinationTokens
+    } = _ref;
+    const sourceTokensWithBalance = getTokensWithBalance(sourceTokens, balances);
+    const destinationTokensWithBalance = getTokensWithBalance(destinationTokens, balances);
+    return {
+      sourceTokens: sortTokens(sourceTokensWithBalance),
+      destinationTokens: sortTokens(destinationTokensWithBalance)
+    };
+  });
+}, {
+  equalityFn: shallow
+});
 
 const getUsdValue = (token, amount) => new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
 const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
@@ -713,6 +875,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
   bestRoute: null,
   loading: false,
   error: '',
+  sourceTokens: [],
+  destinationTokens: [],
   setBestRoute: bestRoute => set(state => {
     let outputAmount = null;
     let outputUsdValue = ZERO;
@@ -728,27 +892,62 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       })
     };
   }),
-  setFromChain: chain => set(() => ({
-    fromChain: chain
-  })),
+  setFromChain: (chain, setDefaultToken) => {
+    set(state => {
+      if (state.fromChain?.name === chain?.name) return {};
+      const tokens = useMetaStore.getState().meta.tokens;
+      const balances = useWalletsStore.getState().balances;
+      const sortedTokens = getSortedTokens(chain, tokens, balances, state.destinationTokens);
+      const fromToken = getDefaultToken(sortedTokens, state.toToken);
+      return {
+        fromChain: chain,
+        sourceTokens: sortedTokens,
+        ...(setDefaultToken && {
+          fromToken
+        }),
+        ...(!!state.inputAmount && {
+          inputUsdValue: getUsdValue(fromToken, state.inputAmount)
+        })
+      };
+    });
+  },
   setFromToken: token => set(state => ({
     fromToken: token,
     ...(!!state.inputAmount && {
       inputUsdValue: getUsdValue(token, state.inputAmount)
     })
   })),
-  setToChain: chain => set(() => ({
-    toChain: chain
-  })),
+  setToChain: (chain, setDefaultToken) => {
+    set(state => {
+      if (state.toChain?.name === chain?.name) return {};
+      const tokens = useMetaStore.getState().meta.tokens;
+      const balances = useWalletsStore.getState().balances;
+      const sortedTokens = getSortedTokens(chain, tokens, balances, state.destinationTokens);
+      return {
+        toChain: chain,
+        destinationTokens: sortedTokens,
+        ...(setDefaultToken && {
+          toToken: getDefaultToken(sortedTokens, state.fromToken)
+        })
+      };
+    });
+  },
   setToToken: token => set(() => ({
     toToken: token
   })),
-  setInputAmount: amount => set(state => ({
-    inputAmount: amount,
-    ...(!!state.fromToken && {
-      inputUsdValue: getUsdValue(state.fromToken, amount)
-    })
-  }))
+  setInputAmount: amount => {
+    set(state => ({
+      inputAmount: amount,
+      ...(!amount && {
+        outputAmount: new BigNumber(0),
+        outputUsdValue: new BigNumber(0),
+        bestRoute: null
+      }),
+      ...(!!state.fromToken && {
+        inputUsdValue: getUsdValue(state.fromToken, amount)
+      })
+    }));
+  }
 }))));
 const bestRoute = (bestRouteStore, settingsStore) => {
   let abortController = null;
@@ -766,11 +965,13 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     if (!fromToken || !toToken || !inputAmount) return;
     abortController?.abort();
     abortController = new AbortController();
-    const userSlippage = customSlippage | slippage;
+    const userSlippage = !!customSlippage ? customSlippage : slippage;
     const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, false);
     bestRouteStore.setState({
       loading: true,
-      bestRoute: null
+      bestRoute: null,
+      outputAmount: null,
+      outputUsdValue: new BigNumber(0)
     });
     httpService.getBestRoute(requestBody, {
       signal: abortController.signal
@@ -799,7 +1000,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     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;
+      if (isRouteParametersChanged(prevState, state)) return false;else return true;
     }
   });
   useSettingsStore.subscribe(state => ({
@@ -808,7 +1009,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     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;
+      if (isRouteParametersChanged(prevState, state)) return false;else return true;
     }
   });
   return {
@@ -839,13 +1040,6 @@ const useUiStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
   })
 })));
 
-function searchParamsToToken(tokens, searchParams) {
-  return tokens.find(token => {
-    const symbolAndAddress = searchParams?.split('--');
-    if (symbolAndAddress?.length === 1) return token.symbol === symbolAndAddress[0] && token.address === null;
-    return token.symbol === symbolAndAddress?.[0] && token.address === symbolAndAddress?.[1];
-  }) || null;
-}
 function UpdateUrl() {
   const firstRender = useRef(true);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -953,15 +1147,15 @@ function UpdateUrl() {
   }, [location.pathname, inputAmount]);
   useEffect(() => {
     if (loadingStatus === 'success') {
-      const fronChainString = searchParams.get(SearchParams.FROM_CHAIN);
+      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
       const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
       const toChainString = searchParams.get(SearchParams.TO_CHAIN);
       const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
       const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
-      const fromChain = blockchains.find(blockchain => blockchain.name === fronChainString);
-      const fromToken = searchParamsToToken(tokens, fromTokenString);
+      const fromChain = blockchains.find(blockchain => blockchain.name === fromChainString);
+      const fromToken = searchParamsToToken(tokens, fromTokenString, fromChain || null);
       const toChain = blockchains.find(blockchain => blockchain.name === toChainString);
-      const toToken = searchParamsToToken(tokens, toTokenString);
+      const toToken = searchParamsToToken(tokens, toTokenString, toChain || null);
       if (!!fromChain) {
         setFromChain(fromChain);
         if (!!fromToken) setFromToken(fromToken);
@@ -1032,92 +1226,11 @@ function Header(props) {
   return React.createElement(HeaderContainer, null, React.createElement(Typography, {
     variant: "h4",
     className: titleStyle()
-  }, t(title.toLocaleLowerCase()) || title), React.createElement(HeaderButtons, {
+  }, title ? t(title.toLocaleLowerCase()) : ''), React.createElement(HeaderButtons, {
     onClickRefresh: onClickRefresh
   }));
 }
 
-const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
-  accounts: [],
-  balances: [],
-  selectedWallets: [],
-  connectWallet: accounts => {
-    const tokens = useMetaStore.getState().meta.tokens;
-    set(state => ({
-      accounts: state.accounts.concat(accounts),
-      balances: state.balances.concat(accounts.map(account => ({
-        balances: [],
-        address: account.address,
-        chain: account.chain,
-        loading: true,
-        walletType: account.walletType,
-        error: false,
-        explorerUrl: null
-      })))
-    }));
-    accounts.forEach(async account => {
-      try {
-        const response = await httpService.getWalletsDetails([{
-          address: account.address,
-          blockchain: account.chain
-        }]);
-        const retrivedBalance = response.wallets[0];
-        if (retrivedBalance) {
-          set(state => ({
-            balances: state.balances.map(balance => {
-              return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
-            })
-          }));
-        } else throw new Error('Wallet not found');
-      } catch (error) {
-        set(state => ({
-          balances: state.balances.map(balance => {
-            return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
-          })
-        }));
-      }
-    });
-  },
-  disconnectWallet: walletType => {
-    set(state => ({
-      accounts: state.accounts.filter(account => account.walletType !== walletType),
-      balances: state.balances.filter(balance => balance.walletType !== walletType),
-      selectedWallets: state.selectedWallets.filter(wallet => wallet.walletType != walletType)
-    }));
-  },
-  initSelectedWallets: () => set(state => {
-    const requiredChains = getRequiredChains(useBestRouteStore.getState().bestRoute);
-    const connectedWallets = state.accounts;
-    const selectedWallets = [];
-    requiredChains.forEach(chain => {
-      const anyWalletSelected = !!state.selectedWallets.find(wallet => wallet.chain === chain);
-      if (!anyWalletSelected) {
-        const firstWalletWithMatchedChain = connectedWallets.find(wallet => wallet.chain === chain);
-        if (!!firstWalletWithMatchedChain) selectedWallets.push({
-          address: firstWalletWithMatchedChain.address,
-          chain: firstWalletWithMatchedChain.chain,
-          walletType: firstWalletWithMatchedChain.walletType
-        });
-      }
-    });
-    return {
-      selectedWallets: state.selectedWallets.concat(selectedWallets)
-    };
-  }),
-  setSelectedWallet: wallet => set(state => ({
-    selectedWallets: state.selectedWallets.filter(selectedWallet => selectedWallet.chain !== wallet.chain).concat({
-      chain: wallet.chain,
-      address: wallet.address,
-      walletType: wallet.walletType
-    })
-  })),
-  clearConnectedWallet: () => set(() => ({
-    accounts: [],
-    balances: [],
-    selectedWallets: []
-  }))
-}))));
-
 const Box = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -1535,7 +1648,7 @@ function ChangeSlippageButton() {
     type: "primary",
     variant: "contained",
     size: "small",
-    onClick: navigate.bind(null, navigationRoutes.settings)
+    onClick: () => navigate(navigationRoutes.settings)
   }, "Change Slippage");
 }
 
@@ -1547,7 +1660,7 @@ function HighSlippageWarning(props) {
     type: "warning"
   }, React.createElement(Typography, {
     variant: "body2"
-  }, "slippage is high=> Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.", React.createElement(ChangeSlippageButton, null)));
+  }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.", React.createElement(ChangeSlippageButton, null)));
 }
 
 function ConfirmSwapExtraMessages(props) {
@@ -1581,12 +1694,6 @@ function useNavigateBack() {
   };
 }
 
-const useConfirmSwapStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(() => ({
-  loading: false,
-  errors: [],
-  warnings: [],
-  proceedAnyway: false
-}))));
 var ConfirmSwapErrorTypes;
 (function (ConfirmSwapErrorTypes) {
   ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["NO_ROUTE"] = 0] = "NO_ROUTE";
@@ -1602,161 +1709,6 @@ var ConfirmSwapWarningTypes;
   ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_AND_OUTPUT_AMOUNT_UPDATED"] = 3] = "ROUTE_AND_OUTPUT_AMOUNT_UPDATED";
   ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
 })(ConfirmSwapWarningTypes || (ConfirmSwapWarningTypes = {}));
-const confirmSwap = async () => {
-  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 undefined;
-  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);
-    // queueManager?.create('swap', { swapDetails: newSwap });
-    useConfirmSwapStore.setState({
-      errors: [],
-      warnings: [],
-      proceedAnyway: false
-    });
-    return newSwap;
-  }
-  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
-  });
-  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;
-    }
-  });
-  const newSwap = await httpService.getBestRoute(requestBody, {
-    signal: abortController.signal
-  }).then(confiremedRoute => {
-    useConfirmSwapStore.setState({
-      loading: false
-    });
-    if (!confiremedRoute.result || !new BigNumber(confiremedRoute.requestAmount).isEqualTo(new BigNumber(inputAmount || '-1'))) {
-      useConfirmSwapStore.setState(prevState => ({
-        errors: prevState.errors.concat({
-          type: ConfirmSwapErrorTypes.NO_ROUTE
-        })
-      }));
-      return undefined;
-    }
-    const confirmSwap = {
-      loading: false,
-      errors: [],
-      warnings: [],
-      proceedAnyway
-    };
-    const routeChanged = isRouteChanged(initialRoute, confiremedRoute);
-    if (routeChanged) {
-      setBestRoute(confiremedRoute);
-      const newRouteOutputUsdValue = new BigNumber(confiremedRoute.result?.outputAmount || '0').multipliedBy(toToken.usdPrice || 0);
-      const outputRatio = getOutputRatio(inputUsdValue, newRouteOutputUsdValue);
-      const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
-      if (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(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
-      console.log('new swap:', newSwap);
-      return newSwap;
-    } else if (!proceedAnyway) {
-      confirmSwap.proceedAnyway = true;
-      useConfirmSwapStore.setState(confirmSwap);
-    }
-    return undefined;
-  }).then(result => {
-    abortController = null;
-    unsubscribeFromBestRouteStore();
-    unsubscribeFromWalletsStore();
-    return result;
-  }).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
-      })
-    }));
-  });
-  return newSwap || undefined;
-};
 
 function MinRequiredSlippage(_ref) {
   let {
@@ -1764,7 +1716,7 @@ function MinRequiredSlippage(_ref) {
   } = _ref;
   return React.createElement(Typography, {
     variant: "body2"
-  }, "slippage is low => We recommend you to increase slippage to at least", minRequiredSlippage, "for this route.", React.createElement(ChangeSlippageButton, null));
+  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React.createElement(ChangeSlippageButton, null));
 }
 
 function ConfirmSwapErrors(errors) {
@@ -1792,13 +1744,40 @@ function ConfirmSwapErrors(errors) {
   });
 }
 
+const List = /*#__PURE__*/styled('ul', {
+  variants: {
+    showListStyle: {
+      true: {
+        paddingLeft: '$24'
+      }
+    }
+  }
+});
+const ListItem = /*#__PURE__*/styled('li', {
+  variants: {
+    showListStyle: {
+      true: {
+        listStyleType: 'disc',
+        listStylePosition: 'outside'
+      }
+    }
+  }
+});
+const Message = /*#__PURE__*/styled(Typography, {
+  display: 'block'
+});
 function BalanceWarnings(_ref) {
   let {
     messages
   } = _ref;
-  return React.createElement("div", null, messages.map(warning => React.createElement(Typography, {
+  const showListStyle = messages.length > 1;
+  return React.createElement(List, {
+    showListStyle: showListStyle
+  }, messages.map(warning => React.createElement(ListItem, {
+    showListStyle: showListStyle
+  }, React.createElement(Message, {
     variant: "body2"
-  }, warning)));
+  }, warning))));
 }
 
 function ConfirmSwapWarnings(warnings) {
@@ -1831,6 +1810,137 @@ function ConfirmSwapWarnings(warnings) {
   });
 }
 
+function useConfirmSwap() {
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const initialRoute = useBestRouteStore.use.bestRoute();
+  const setBestRoute = useBestRouteStore.use.setBestRoute();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const meta = useMetaStore.use.meta();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const slippage = useSettingsStore.use.slippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const userSlippage = customSlippage || slippage;
+  const proceedAnywayRef = useRef(false);
+  const confiremedRouteRef = useRef(null);
+  let abortControllerRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState([]);
+  const [warnings, setWarnings] = useState([]);
+  useEffect(() => {
+    return () => abortControllerRef.current?.abort();
+  }, []);
+  if (!fromToken || !toToken || !inputAmount || !initialRoute) return {
+    loading: false,
+    warnings: [],
+    errors: [],
+    confirmSwap: null
+  };
+  const confirmSwap = async () => {
+    if (proceedAnywayRef.current) {
+      const swapSettings = {
+        slippage: userSlippage.toString(),
+        disabledSwappersGroups: disabledLiquiditySources
+      };
+      if (errors.length > 0) setErrors([]);
+      if (warnings.length > 0) setWarnings([]);
+      proceedAnywayRef.current = false;
+      if (confiremedRouteRef.current) {
+        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        return newSwap;
+      }
+      return;
+    }
+    abortControllerRef.current = new AbortController();
+    setLoading(true);
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, true);
+    try {
+      const confiremedRoute = await httpService.getBestRoute(requestBody, {
+        signal: abortControllerRef.current?.signal
+      });
+      abortControllerRef.current = null;
+      setLoading(false);
+      if (!confiremedRoute.result || !new BigNumber(confiremedRoute.requestAmount).isEqualTo(new BigNumber(inputAmount || '-1'))) {
+        setErrors(prevState => prevState.concat({
+          type: ConfirmSwapErrorTypes.NO_ROUTE
+        }));
+        return;
+      }
+      const confirmSwapState = {
+        errors: [],
+        warnings: []
+      };
+      const routeChanged = isRouteChanged(initialRoute, confiremedRoute);
+      if (routeChanged) {
+        setBestRoute(confiremedRoute);
+        const newRouteOutputUsdValue = new BigNumber(confiremedRoute.result?.outputAmount || '0').multipliedBy(toToken.usdPrice || 0);
+        const outputRatio = getOutputRatio(inputUsdValue, newRouteOutputUsdValue);
+        const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
+        if (highValueLoss) confirmSwapState.errors.push({
+          type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS
+        });else if (isOutputAmountChangedALot(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+          newOutputAmount: numberToString(getRouteOutputAmount(confiremedRoute)),
+          percentageChange: numberToString(getPercentageChange(getRouteOutputAmount(initialRoute), getRouteOutputAmount(confiremedRoute)), null, 2)
+        });else if (isRouteInternalCoinsUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED
+        });else if (isNumberOfSwapsChanged(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_UPDATED
+        });else if (isRouteSwappersUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED
+        });
+      }
+      const balanceWarnings = getBalanceWarnings(confiremedRoute, selectedWallets);
+      const enoughBalance = balanceWarnings.length === 0;
+      if (!enoughBalance) confirmSwapState.warnings.push({
+        type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE,
+        messages: balanceWarnings
+      });
+      const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
+      if (!hasProperSlippage(userSlippage.toString(), minRequiredSlippage)) confirmSwapState.errors.push({
+        type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE,
+        minRequiredSlippage
+      });
+      const noErrors = confirmSwapState.errors.length === 0;
+      const noWarnings = confirmSwapState.warnings.length === 0;
+      if ((noErrors || !noErrors && proceedAnywayRef.current) && (noWarnings || !noWarnings && proceedAnywayRef.current)) {
+        const swapSettings = {
+          slippage: userSlippage.toString(),
+          disabledSwappersGroups: disabledLiquiditySources
+        };
+        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        return newSwap;
+      } else if (!proceedAnywayRef.current) {
+        proceedAnywayRef.current = true;
+        setErrors(confirmSwapState.errors);
+        setWarnings(confirmSwapState.warnings);
+        confiremedRouteRef.current = confiremedRoute;
+      }
+      return;
+    } catch (error) {
+      if (error?.code === 'ERR_CANCELED') {
+        return;
+      }
+      const status = error?.response?.status;
+      setLoading(false);
+      setErrors([{
+        type: ConfirmSwapErrorTypes.REQUEST_FAILED,
+        status
+      }]);
+      return;
+    }
+  };
+  return {
+    loading,
+    warnings,
+    errors,
+    confirmSwap
+  };
+}
+
 function ConfirmSwapPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const {
@@ -1841,15 +1951,23 @@ function ConfirmSwapPage() {
   } = useManager();
   const navigate = useNavigate();
   const bestRoute = useBestRouteStore.use.bestRoute();
-  const loading = useConfirmSwapStore.use.loading();
-  const warnings = useConfirmSwapStore.use.warnings();
-  const errors = useConfirmSwapStore.use.errors();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const {
+    tokens
+  } = useMetaStore.use.meta();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
   const selectedSlippage = customSlippage || slippage;
+  const {
+    loading,
+    errors,
+    warnings,
+    confirmSwap
+  } = useConfirmSwap();
+  const showHighSlippageWarning = !errors.find(error => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE);
   return React.createElement(ConfirmSwap, {
     onConfirm: () => {
-      confirmSwap().then(swap => {
+      confirmSwap?.().then(swap => {
         if (swap) {
           manager?.create('swap', {
             swapDetails: swap
@@ -1862,15 +1980,15 @@ function ConfirmSwapPage() {
       });
     },
     onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
-    bestRoute: bestRoute,
+    bestRoute: getBestRouteWithCalculatedFees(bestRoute, tokens),
     loading: loading,
     errors: ConfirmSwapErrors(errors),
     warnings: ConfirmSwapWarnings(warnings),
-    extraMessages: React.createElement(ConfirmSwapExtraMessages, {
+    extraMessages: showHighSlippageWarning && React.createElement(ConfirmSwapExtraMessages, {
       selectedSlippage: selectedSlippage
     }),
     confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!',
-    confirmButtonDisabled: errors.length > 0
+    confirmButtonDisabled: fetchingBestRoute
   });
 }
 
@@ -1963,8 +2081,6 @@ function SelectChainPage(props) {
   const toChain = useBestRouteStore.use.toChain();
   const setFromChain = useBestRouteStore.use.setFromChain();
   const setToChain = useBestRouteStore.use.setToChain();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToToken = useBestRouteStore.use.setToToken();
   const {
     navigateBackFrom
   } = useNavigateBack();
@@ -1974,9 +2090,7 @@ function SelectChainPage(props) {
     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);
+      if (type === 'from') setFromChain(chain, true);else setToChain(chain, true);
       navigateBackFrom(navigationRoutes.fromChain);
     },
     onBack: navigateBackFrom.bind(null, navigationRoutes.fromChain)
@@ -1991,34 +2105,18 @@ function SelectTokenPage(props) {
     type,
     supportedTokens
   } = props;
-  const tokens = supportedTokens === 'all' ? useMetaStore.use.meta().tokens : supportedTokens;
-  const fromChain = useBestRouteStore.use.fromChain();
-  const toChain = useBestRouteStore.use.toChain();
+  const sourceTokens = useBestRouteStore.use.sourceTokens();
+  const destinationTokens = useBestRouteStore.use.destinationTokens();
+  const supportedSourceTokens = supportedTokens === 'all' ? sourceTokens : sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
+  const supportedDestinationTokens = supportedTokens === 'all' ? destinationTokens : destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
+  console.log(supportedSourceTokens);
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToToken = useBestRouteStore.use.setToToken();
-  const balance = useWalletsStore.use.balances();
-  const tokenWithSelectedChain = tokens.filter(token => {
-    if (type === 'from') return token.blockchain === fromChain?.name;
-    return token.blockchain === toChain?.name;
-  });
-  const TokensWithBalance = tokenWithSelectedChain.map(token => {
-    const tokenAmount = numberToString(new BigNumber(getBalanceFromWallet(balance, token.blockchain, token.symbol, token.address)?.amount || ZERO));
-    let tokenUsdValue = '';
-    if (token.usdPrice) tokenUsdValue = numberToString(new BigNumber(getBalanceFromWallet(balance, token.blockchain, token.symbol, token.address)?.amount || ZERO).multipliedBy(token.usdPrice));
-    return {
-      ...token,
-      balance: {
-        amount: tokenAmount !== '0' ? tokenAmount : '',
-        usdValue: tokenUsdValue !== '0' ? tokenUsdValue : ''
-      }
-    };
-  });
-  const sortedTokenList = sortedTokens(TokensWithBalance, type, balance);
   return React.createElement(TokenSelector, {
     type: type === 'from' ? 'Source' : 'Destination',
-    list: sortedTokenList,
+    list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
     selected: type === 'from' ? fromToken : toToken,
     onChange: token => {
       if (type === 'from') setFromToken(token);else setToToken(token);
@@ -2067,7 +2165,7 @@ function SettingsPage(_ref) {
     slippages: SLIPPAGES,
     selectedSlippage: slippage,
     onSlippageChange: slippage => setSlippage(slippage),
-    onLiquiditySourcesClick: navigate.bind(null, navigationRoutes.liquiditySources),
+    onLiquiditySourcesClick: () => navigate(navigationRoutes.liquiditySources),
     onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
     liquiditySources: supportedUniqueSwappersGroups,
     selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
@@ -2108,6 +2206,8 @@ function WalletsPage(_ref) {
     connect
   } = useWallets();
   const wallets = getlistWallet(state, getWalletInfo, supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets);
+  let sortedWallets = detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
+  sortedWallets = sortWalletsBasedOnState(sortedWallets);
   const [walletErrorMessage, setWalletErrorMessage] = useState('');
   const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
   const {
@@ -2126,7 +2226,7 @@ function WalletsPage(_ref) {
         await connect(type);
       }
     } catch (e) {
-      setWalletErrorMessage('Error: ' + e.message);
+      setWalletErrorMessage('Error: ' + e?.message);
     }
   };
   useEffect(() => {
@@ -2134,15 +2234,15 @@ function WalletsPage(_ref) {
     return () => toggleConnectWalletsButton();
   }, []);
   return React.createElement(SecondaryPage, {
-    title: t('Select Wallet'),
+    title: t('Select Wallet') || '',
     textField: false,
     onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
   }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
     type: "error"
   }, React.createElement(Typography, {
     variant: "body2"
-  }, walletErrorMessage))), React.createElement(ListContainer, null, wallets.map((info, index) => React.createElement(Wallet, Object.assign({}, info, {
-    key: index,
+  }, walletErrorMessage))), React.createElement(ListContainer, null, sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
+    key: `${index}-${wallet.type}`,
     onClick: onSelectWallet
   }))))));
 }
@@ -2240,59 +2340,50 @@ function SwapDetailsPage() {
   });
 }
 
-const AppRoutes = _ref => {
-  let {
-    fromChains = 'all',
-    toChains = 'all',
-    fromTokens = 'all',
-    toTokens = 'all',
-    liquiditySources = 'all',
-    wallets = 'all',
-    title,
-    multiWallets = true,
-    titleSize,
-    titleWeight
-  } = _ref;
+function AppRoutes(props) {
+  const {
+    configs
+  } = props;
   return useRoutes([{
     path: navigationRoutes.home,
     element: React.createElement(Home, {
-      title: title,
-      titleSize: titleSize,
-      titleWeight: titleWeight
+      title: configs?.title,
+      titleSize: configs?.titleSize,
+      titleWeight: configs?.titleWeight
     })
   }, {
     path: navigationRoutes.fromChain,
     element: React.createElement(SelectChainPage, {
       type: "from",
-      supportedChains: fromChains
+      supportedChains: configs?.fromChains || 'all'
     })
   }, {
     path: navigationRoutes.toChain,
     element: React.createElement(SelectChainPage, {
       type: "to",
-      supportedChains: toChains
+      supportedChains: configs?.toChains || 'all'
     })
   }, {
     path: navigationRoutes.fromToken + '/*',
     element: React.createElement(SelectTokenPage, {
       type: "from",
-      supportedTokens: fromTokens
+      supportedTokens: configs?.fromTokens || 'all'
     })
   }, {
     path: navigationRoutes.toToken,
     element: React.createElement(SelectTokenPage, {
       type: "to",
-      supportedTokens: toTokens
+      supportedTokens: configs?.toTokens || 'all'
     })
   }, {
     path: navigationRoutes.settings,
     element: React.createElement(SettingsPage, {
-      supportedSwappers: liquiditySources
+      supportedSwappers: configs?.liquiditySources || 'all'
     })
   }, {
     path: navigationRoutes.liquiditySources,
     element: React.createElement(LiquiditySourcePage, {
-      supportedSwappers: liquiditySources
+      supportedSwappers: configs?.liquiditySources || 'all'
     })
   }, {
     path: navigationRoutes.swaps,
@@ -2303,8 +2394,8 @@ const AppRoutes = _ref => {
   }, {
     path: navigationRoutes.wallets,
     element: React.createElement(WalletsPage, {
-      supportedWallets: wallets,
-      multiWallets: multiWallets
+      supportedWallets: configs?.wallets || 'all',
+      multiWallets: typeof configs?.multiWallets === 'undefined' ? true : configs.multiWallets
     })
   }, {
     path: navigationRoutes.confirmSwap,
@@ -2313,7 +2404,7 @@ const AppRoutes = _ref => {
     path: navigationRoutes.confirmWallets,
     element: React.createElement(ConfirmWalletsPage, null)
   }]);
-};
+}
 
 const Header$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -2341,13 +2432,6 @@ function Layout(_ref) {
     getWalletInfo
   } = useWallets();
   const connectedWalletsImages = removeDuplicateFrom(getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(w => w.image));
-  const {
-    fromChain,
-    toChain,
-    toToken,
-    fromToken,
-    fromAmount
-  } = configs;
   const setFromChain = useBestRouteStore.use.setFromChain();
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToChain = useBestRouteStore.use.setToChain();
@@ -2359,16 +2443,16 @@ function Layout(_ref) {
     t
   } = useTranslation();
   useEffect(() => {
-    setToChain(toChain);
-    setToToken(toToken);
-  }, [toChain, toToken]);
+    setToChain(configs?.toChain || null);
+    setToToken(configs?.toToken || null);
+  }, [configs?.toChain, configs?.toToken]);
   useEffect(() => {
-    setInputAmount(fromAmount.toString());
-  }, [fromAmount]);
+    setInputAmount(configs?.fromAmount?.toString() || '');
+  }, [configs?.fromAmount]);
   useEffect(() => {
-    setFromToken(fromToken);
-    setFromChain(fromChain);
-  }, [fromToken, fromChain]);
+    setFromToken(configs?.fromToken || null);
+    setFromChain(configs?.fromChain || null);
+  }, [configs?.fromToken, configs?.fromChain]);
   return React.createElement(React.Fragment, null, React.createElement(Header$1, null, React.createElement(Button, {
     size: "small",
     suffix: React.createElement(AddWalletIcon, {
@@ -2384,7 +2468,9 @@ function Layout(_ref) {
     src: walletImage
   })) : React.createElement(React.Fragment, null), React.createElement(Typography, {
     variant: "body2"
-  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`))), React.createElement(AppRoutes, Object.assign({}, configs)));
+  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`))), React.createElement(AppRoutes, {
+    configs: configs
+  }));
 }
 
 const globalStyles = /*#__PURE__*/globalCss({
@@ -2659,7 +2745,10 @@ function QueueManager(props) {
       console.log('[notifier]', message);
     }
   };
-  return React.createElement(Provider, {
+  return React.createElement(Provider
+  //@ts-ignore
+  , {
+    //@ts-ignore
     queuesDefs: [swapQueueDef],
     context: context,
     onPersistedDataLoaded: _manager => {},