@rango-dev/widget-embedded 0.1.10-next.99 → 0.1.11-next.0

package/dist/widget-embedded.esm.js

@@ -1,22 +1,23 @@
-import { WalletState, Tooltip, Button, RetryIcon, HistoryIcon, SettingsIcon, styled, css, Typography, InfoCircleIcon, AngleDownIcon, Spacer, TextField, VerticalSwapIcon, BestRoute, Alert, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Wallet, ChevronRightIcon, GasIcon, ConfirmWallets, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
+import { WalletState, Typography, InfoCircleIcon, AngleDownIcon, Spacer, Button, TextField, styled, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, Alert, ChevronRightIcon, GasIcon, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, LoadingFailedAlert, Wallet, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
 import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
 import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
+import { PendingSwapNetworkStatus, useQueueManager, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, swapQueueDef, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
+import { isCosmosBlockchain, isEvmBlockchain } from 'rango-types';
 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 { Network, isEvmAddress, detectInstallLink, KEPLR_COMPATIBLE_WALLETS, WalletType, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
-import { isCosmosBlockchain } from 'rango-types';
+import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, detectInstallLink, WalletType, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
 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 { RangoClient, isEvmBlockchain as isEvmBlockchain$1 } 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 { useManager, Provider } from '@rango-dev/queue-manager-react';
 import i18n, { t } from 'i18next';
+import { useManager, Provider } from '@rango-dev/queue-manager-react';
+import dayjs from 'dayjs';
 import copy from 'copy-to-clipboard';
-import { cancelSwap, swapQueueDef } from '@rango-dev/queue-manager-rango-preset';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
@@ -31,7 +32,6 @@ const navigationRoutes = {
   swaps: '/swaps',
   wallets: '/wallets',
   confirmSwap: '/confirm-swap',
-  confirmWallets: '/confirm-wallets',
   swapDetails: '/swaps/:requestId'
 };
 
@@ -61,6 +61,22 @@ function shadeColor(color, percent) {
   var BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);
   return '#' + RR + GG + BB;
 }
+function debounce(fn, time) {
+  let timeoutId;
+  return wrapper;
+  function wrapper() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      fn(...args);
+    }, time);
+  }
+}
 
 const secondsToString = s => {
   const seconds = (s % 60).toString().padStart(2, '0');
@@ -327,7 +343,7 @@ function getSortedTokens(chain, tokens, balances, otherChainTokens) {
   return sortTokens(getTokensWithBalance(filteredTokens, balances));
 }
 function tokensAreEqual(tokenA, tokenB) {
-  return tokenA?.blockchain === tokenB?.blockchain && tokenA?.name === tokenB?.name && tokenA?.address === tokenB?.address;
+  return tokenA?.blockchain === tokenB?.blockchain && tokenA?.symbol === tokenB?.symbol && tokenA?.address === tokenB?.address;
 }
 function getDefaultToken(sortedTokens, otherToken) {
   let selectedToken;
@@ -337,7 +353,7 @@ function getDefaultToken(sortedTokens, otherToken) {
   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));
+  return wallets.sort((a, b) => Number(b.state === WalletState.CONNECTED) - Number(a.state === WalletState.CONNECTED) || Number(b.state === WalletState.DISCONNECTED || b.state === WalletState.CONNECTING) - Number(a.state === WalletState.DISCONNECTED || a.state === WalletState.CONNECTING));
 }
 
 function getOutputRatio(inputUsdValue, outputUsdValue) {
@@ -420,7 +436,7 @@ function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, has
   };else if (inputIsZero) return {
     title: 'Enter an amount',
     disabled: true
-  };else if (!bestRoute) return {
+  };else if (!bestRoute || !bestRoute.result) return {
     title: 'Swap',
     disabled: true
   };else if (hasLimitError) return {
@@ -453,6 +469,7 @@ function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validat
     finishTime: null,
     requestId: bestRoute.requestId || '',
     inputAmount: inputAmount,
+    //@ts-ignore
     wallets,
     status: 'running',
     isPaused: false,
@@ -467,6 +484,7 @@ function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validat
     settings: settings,
     simulationResult: simulationResult,
     validateBalanceOrFee,
+    //@ts-ignore
     steps: bestRoute.result?.swaps?.map((swap, index) => {
       const swapper = meta.swappers.find(swapper => swapper.id === swap.swapperId);
       const swapperType = swapper?.types[0];
@@ -552,11 +570,10 @@ function hasHighFee(totalFeeInUsd) {
 }
 function getMinRequiredSlippage(route) {
   const slippages = route.result?.swaps.map(slippage => slippage.recommendedSlippage);
-  return slippages?.map(s => parseFloat(s?.slippage || '0'))?.filter(s => s > 0)?.sort((a, b) => b - a)?.find(() => true) || null;
+  return slippages?.map(s => s?.slippage || '0')?.filter(s => parseFloat(s) > 0)?.sort((a, b) => parseFloat(b) - parseFloat(a))?.find(() => true) || null;
 }
 function hasProperSlippage(userSlippage, minRequiredSlippage) {
   if (!minRequiredSlippage) return true;
-  //@ts-ignore
   return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
 }
 function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, checkPrerequisites) {
@@ -569,6 +586,7 @@ function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, se
       addresses: [wallet.address]
     });
   });
+  const filteredBlockchains = selectedWallets.map(wallet => wallet.chain);
   const requestBody = {
     amount: inputAmount.toString(),
     checkPrerequisites,
@@ -586,8 +604,10 @@ function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, se
     selectedWallets: selectedWalletsMap,
     swapperGroups: disabledLiquiditySources,
     swappersGroupsExclude: true,
-    //@ts-ignore
-    slippage: slippage.toString()
+    slippage: slippage.toString(),
+    ...(checkPrerequisites && {
+      blockchains: filteredBlockchains
+    })
   };
   return requestBody;
 }
@@ -633,6 +653,61 @@ function calcOutputUsdValue(outputAmount, tokenPrice) {
   const amount = !!outputAmount ? new BigNumber(outputAmount) : ZERO;
   return amount.multipliedBy(tokenPrice || 0);
 }
+function isNetworkStatusInWarningState(pendingSwapStep) {
+  return !!pendingSwapStep && pendingSwapStep.networkStatus !== null && pendingSwapStep.networkStatus !== PendingSwapNetworkStatus.NetworkChanged;
+}
+function getSwapMessages(pendingSwap, currentStep) {
+  const textForRemove = 'bellow button or';
+  let message = pendingSwap.extraMessage;
+  let detailedMessage = pendingSwap.extraMessageDetail;
+  if (pendingSwap.networkStatusExtraMessageDetail?.includes(textForRemove)) {
+    pendingSwap.networkStatusExtraMessageDetail = pendingSwap.networkStatusExtraMessageDetail.replace(textForRemove, '');
+  }
+  const networkWarningState = isNetworkStatusInWarningState(currentStep);
+  if (networkWarningState) {
+    message = pendingSwap.networkStatusExtraMessage || '';
+    detailedMessage = pendingSwap.networkStatusExtraMessageDetail || '';
+    switch (currentStep?.networkStatus) {
+      case PendingSwapNetworkStatus.WaitingForConnectingWallet:
+        message = message || 'Waiting for connecting wallet';
+        break;
+      case PendingSwapNetworkStatus.WaitingForQueue:
+        message = message || 'Waiting for other running tasks to be finished';
+        break;
+      case PendingSwapNetworkStatus.WaitingForNetworkChange:
+        message = message || 'Waiting for changing wallet network';
+        break;
+    }
+  }
+  detailedMessage = detailedMessage || '';
+  message = message || '';
+  const isRpc = message?.indexOf('code') !== -1 && message?.indexOf('reason') !== -1;
+  return {
+    shortMessage: message,
+    detailedMessage: {
+      content: detailedMessage,
+      long: isRpc
+    }
+  };
+}
+function getLastConvertedTokenInFailedSwap(pendingSwap) {
+  let resultToken = null;
+  if (pendingSwap.status === 'failed') {
+    const lastSuccessStep = pendingSwap.steps.slice().reverse().filter(step => step.status === 'success')[0];
+    if (lastSuccessStep) {
+      resultToken = {
+        blockchain: lastSuccessStep.toBlockchain,
+        symbol: lastSuccessStep.toSymbol,
+        outputAmount: lastSuccessStep.outputAmount,
+        address: lastSuccessStep.toSymbolAddress
+      };
+    }
+  }
+  return resultToken;
+}
+function shouldRetrySwap(pendingSwap) {
+  return pendingSwap.status === 'failed' && !!pendingSwap.finishTime && new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000;
+}
 
 function searchParamsToToken(tokens, searchParams, chain) {
   if (!chain) return null;
@@ -669,23 +744,27 @@ function getRequiredBalanceOfWallet(selectedWallet, fee) {
   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
-    }
-  };
+function isRouteParametersChanged(params) {
+  if (params.store === 'bestRoute') {
+    const {
+      prevState,
+      currentState
+    } = params;
+    return !!currentState.fromToken && !!currentState.toToken && (prevState.fromChain?.name !== currentState.fromChain?.name || prevState.toChain?.name !== currentState.toChain?.name || prevState.fromToken?.symbol !== currentState.fromToken?.symbol || prevState.toToken?.symbol !== currentState.toToken?.symbol || prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain || prevState.toToken?.blockchain !== currentState.toToken?.blockchain || prevState.fromToken?.address !== currentState.fromToken?.address || prevState.toToken?.address !== currentState.toToken?.address || prevState.inputAmount !== currentState.inputAmount);
+  } else if (params.store === 'settings') {
+    const {
+      prevState,
+      currentState
+    } = params;
+    return prevState.slippage !== currentState.slippage || prevState.customSlippage !== currentState.customSlippage || prevState.disabledLiquiditySources?.length !== currentState.disabledLiquiditySources?.length || prevState.infiniteApprove || currentState.infiniteApprove;
+  }
+  return false;
 }
+//todo: refactor bestRoute store and add loadingStatus
+const getBestRouteStatus = (loading, error) => {
+  if (loading) return 'loading';
+  if (error) return 'failed';else return 'success';
+};
 
 const createSelectors = _store => {
   let store = _store;
@@ -836,7 +915,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
       }
     });
     return {
-      selectedWallets: state.selectedWallets.concat(selectedWallets)
+      selectedWallets: selectedWallets
     };
   }),
   setSelectedWallet: wallet => set(state => ({
@@ -868,6 +947,7 @@ useWalletsStore.subscribe(state => state.balances, balances => {
 }, {
   equalityFn: shallow
 });
+const fetchingBalanceSelector = state => !!state.balances.find(wallet => wallet.loading);
 
 const getUsdValue = (token, amount) => new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
 const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
@@ -887,6 +967,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
   setBestRoute: bestRoute => set(state => {
     let outputAmount = null;
     let outputUsdValue = ZERO;
+    if (!state.inputAmount || state.inputAmount === '0') return {};
     if (!!bestRoute) {
       outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber(bestRoute.result?.outputAmount) : null;
       outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
@@ -954,7 +1035,58 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
         inputUsdValue: getUsdValue(state.fromToken, amount)
       })
     }));
-  }
+  },
+  retry: pendingSwap => {
+    const {
+      tokens,
+      blockchains
+    } = useMetaStore.getState().meta;
+    const balances = useWalletsStore.getState().balances;
+    const failedIndex = pendingSwap.status === 'failed' ? pendingSwap.steps.findIndex(s => s.status === 'failed') : null;
+    if (failedIndex === null || failedIndex < 0) return;
+    const firstStep = pendingSwap.steps[0];
+    const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
+    const fromChain = blockchains.find(blockchain => blockchain.name === firstStep.fromBlockchain) || null;
+    const toChain = blockchains.find(blockchain => blockchain.name === lastStep.toBlockchain) || null;
+    const fromToken = tokens.find(token => tokensAreEqual(token, {
+      blockchain: firstStep.fromBlockchain,
+      symbol: firstStep.fromSymbol,
+      address: firstStep.fromSymbolAddress
+    }));
+    const toToken = tokens.find(token => tokensAreEqual(token, {
+      blockchain: lastStep.toBlockchain,
+      symbol: lastStep.toSymbol,
+      address: lastStep.toSymbolAddress
+    }));
+    const sortedSourceTokens = getSortedTokens(fromChain, tokens, balances, []);
+    const sortedDestinationTokens = getSortedTokens(toChain, tokens, balances, []);
+    const inputAmount = pendingSwap.inputAmount;
+    set({
+      fromChain,
+      fromToken,
+      inputAmount,
+      outputAmount: null,
+      inputUsdValue: getUsdValue(fromToken || null, inputAmount),
+      outputUsdValue: new BigNumber(0),
+      toChain,
+      toToken,
+      bestRoute: null,
+      loading: false,
+      error: '',
+      sourceTokens: sortedSourceTokens,
+      destinationTokens: sortedDestinationTokens
+    });
+  },
+  switchFromAndTo: () => set(state => ({
+    fromChain: state.toChain,
+    fromToken: state.toToken,
+    toChain: state.fromChain,
+    toToken: state.fromToken,
+    sourceTokens: state.destinationTokens,
+    destinationTokens: state.sourceTokens,
+    inputAmount: state.outputAmount?.toString() || '',
+    inputUsdValue: getUsdValue(state.toToken, state.outputAmount?.toString() || '')
+  }))
 }))));
 const bestRoute = (bestRouteStore, settingsStore) => {
   let abortController = null;
@@ -969,12 +1101,12 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       customSlippage,
       disabledLiquiditySources
     } = settingsStore.getState();
-    if (!fromToken || !toToken || !inputAmount) return;
+    if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
     abortController?.abort();
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
     const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, false);
-    bestRouteStore.setState({
+    if (!bestRouteStore.getState().loading) bestRouteStore.setState({
       loading: true,
       bestRoute: null,
       outputAmount: null,
@@ -999,24 +1131,56 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       });
     });
   };
+  const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
+  const bestRouteParamsListener = () => {
+    const {
+      fromToken,
+      toToken,
+      inputAmount,
+      inputUsdValue
+    } = useBestRouteStore.getState();
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0)) return;
+    if (tokensAreEqual(fromToken, toToken)) return bestRouteStore.setState({
+      loading: false,
+      bestRoute: null,
+      outputAmount: new BigNumber(inputAmount),
+      outputUsdValue: inputUsdValue
+    });
+    if (!bestRouteStore.getState().loading) bestRouteStore.setState({
+      loading: true,
+      bestRoute: null,
+      outputAmount: null,
+      outputUsdValue: new BigNumber(0)
+    });
+    debouncedFetchBestRoute();
+  };
   useBestRouteStore.subscribe(state => ({
     fromChain: state.fromChain,
     fromToken: state.fromToken,
     toChain: state.toChain,
     toToken: state.toToken,
     inputAmount: state.inputAmount
-  }), fetchBestRoute.bind(null), {
-    equalityFn: (prevState, state) => {
-      if (isRouteParametersChanged(prevState, state)) return false;else return true;
+  }), bestRouteParamsListener, {
+    equalityFn: (prevState, currentState) => {
+      if (isRouteParametersChanged({
+        store: 'bestRoute',
+        prevState,
+        currentState
+      })) return false;else return true;
     }
   });
   useSettingsStore.subscribe(state => ({
     slippage: state.slippage,
     customSlippage: state.customSlippage,
-    disabledLiquiditySources: state.disabledLiquiditySources
-  }), fetchBestRoute.bind(null), {
-    equalityFn: (prevState, state) => {
-      if (isRouteParametersChanged(prevState, state)) return false;else return true;
+    disabledLiquiditySources: state.disabledLiquiditySources,
+    infiniteApprove: state.infiniteApprove
+  }), bestRouteParamsListener, {
+    equalityFn: (prevState, currentState) => {
+      if (isRouteParametersChanged({
+        store: 'settings',
+        prevState,
+        currentState
+      })) return false;else return true;
     }
   });
   return {
@@ -1039,11 +1203,15 @@ var SearchParams;
 const useUiStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
   connectWalletsButtonDisabled: false,
   selectedSwapRequestId: null,
+  currentPage: '',
   toggleConnectWalletsButton: () => set(state => ({
     connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled
   })),
   setSelectedSwap: requestId => set({
     selectedSwapRequestId: requestId
+  }),
+  setCurrentPage: path => set({
+    currentPage: path
   })
 })));
 
@@ -1084,7 +1252,7 @@ function UpdateUrl() {
       toChainString = '',
       toTokenString = '',
       fromAmount = '';
-    if (loadingStatus !== 'success' && ![navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname)) {
+    if (loadingStatus !== 'success' && location.pathname != navigationRoutes.confirmSwap) {
       fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
       fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
       toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
@@ -1177,65 +1345,18 @@ function UpdateUrl() {
   return null;
 }
 
-const ButtonsContainer = /*#__PURE__*/styled('div', {
-  display: 'flex'
-});
-function HeaderButtons(props) {
-  const {
-    onClickRefresh
-  } = props;
-  const navigate = useNavigate();
-  return React.createElement(ButtonsContainer, null, React.createElement(Tooltip, {
-    content: "Refresh"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: onClickRefresh
-  }, React.createElement(RetryIcon, {
-    size: 24
-  }))), React.createElement(Tooltip, {
-    content: "Transactions History"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.swaps)
-  }, React.createElement(HistoryIcon, {
-    size: 24
-  }))), React.createElement(Tooltip, {
-    content: "Settings"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.settings)
-  }, React.createElement(SettingsIcon, {
-    size: 24
-  }))));
-}
-
-const HeaderContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%',
-  padding: '$16 0'
-});
-function Header(props) {
+function PercentageChange(props) {
   const {
-    onClickRefresh,
-    title,
-    titleSize,
-    titleWeight
+    inputUsdValue,
+    outputUsdValue
   } = props;
-  const {
-    t
-  } = useTranslation();
-  const titleStyle = css({
-    fontSize: `${titleSize}px !important`,
-    fontWeight: `${titleWeight} !important`
-  });
-  return React.createElement(HeaderContainer, null, React.createElement(Typography, {
-    variant: "h4",
-    className: titleStyle()
-  }, title ? t(title.toLocaleLowerCase()) : ''), React.createElement(HeaderButtons, {
-    onClickRefresh: onClickRefresh
-  }));
+  if (!inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)) return null;
+  const percentageChange = getPercentageChange(inputUsdValue.toNumber(), outputUsdValue.toNumber());
+  const showPercentageChange = percentageChange?.lt(0);
+  return React.createElement(React.Fragment, null, showPercentageChange && React.createElement(Typography, {
+    variant: "caption",
+    color: "$error500"
+  }, `(${numberToString(percentageChange, 0, 2)}%)`));
 }
 
 const Box = /*#__PURE__*/styled('div', {
@@ -1281,6 +1402,13 @@ const Container = /*#__PURE__*/styled('div', {
     '.amount': {
       width: '30%'
     }
+  },
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8'
+    }
   }
 });
 const StyledImage = /*#__PURE__*/styled('img', {
@@ -1365,10 +1493,15 @@ function TokenInfo(props) {
     type: "primary",
     variant: "ghost",
     size: "compact"
-  }, t('Max')))) : React.createElement(Typography, {
+  }, t('Max')))) : React.createElement("div", {
+    className: "output-usd"
+  }, React.createElement(PercentageChange, {
+    inputUsdValue: inputUsdValue,
+    outputUsdValue: props.outputUsdValue
+  }), React.createElement("div", null, React.createElement(Typography, {
     variant: "caption",
     color: "neutrals600"
-  }, `$${numberToString(props.outputUsdValue)}`)), React.createElement("div", {
+  }, `$${numberToString(props.outputUsdValue)}`)))), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
     className: "selectors",
@@ -1525,6 +1658,39 @@ const errorMessages = {
   genericServerError: 'Error connecting server, please reload the app and try again'
 };
 
+const ButtonsContainer = /*#__PURE__*/styled('div', {
+  display: 'flex'
+});
+function HeaderButtons(props) {
+  const {
+    onClickRefresh
+  } = props;
+  const navigate = useNavigate();
+  return React.createElement(ButtonsContainer, null, React.createElement(Tooltip, {
+    content: "Refresh"
+  }, React.createElement(Button, {
+    variant: "ghost",
+    onClick: onClickRefresh,
+    disabled: !onClickRefresh
+  }, React.createElement(RetryIcon, {
+    size: 24
+  }))), React.createElement(Tooltip, {
+    content: "Transactions History"
+  }, React.createElement(Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.swaps)
+  }, React.createElement(HistoryIcon, {
+    size: 24
+  }))), React.createElement(Tooltip, {
+    content: "Settings"
+  }, React.createElement(Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.settings)
+  }, React.createElement(SettingsIcon, {
+    size: 24
+  }))));
+}
+
 const Container$2 = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column'
@@ -1549,9 +1715,7 @@ const Alerts = /*#__PURE__*/styled('div', {
 });
 function Home(props) {
   const {
-    title = 'SWAP',
-    titleSize = 18,
-    titleWeight = 600
+    title = 'SWAP'
   } = props;
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
@@ -1560,10 +1724,6 @@ function Home(props) {
   const fromToken = useBestRouteStore.use.fromToken();
   const toChain = useBestRouteStore.use.toChain();
   const toToken = useBestRouteStore.use.toToken();
-  const setFromChain = useBestRouteStore.use.setFromChain();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToChain = useBestRouteStore.use.setToChain();
-  const setToToken = useBestRouteStore.use.setToToken();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const inputAmount = useBestRouteStore.use.inputAmount();
@@ -1575,14 +1735,8 @@ function Home(props) {
   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 setCurrentPage = useUiStore.use.setCurrentPage();
+  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
   const errorMessage = loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
   const needsToWarnEthOnPath = false;
   const showBestRoute = inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
@@ -1598,11 +1752,15 @@ function Home(props) {
   const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputIsZero);
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
   const highFee = hasHighFee(totalFeeInUsd);
-  return React.createElement(Container$2, null, React.createElement(Header, {
+  useEffect(() => {
+    setCurrentPage(navigationRoutes.home);
+    return setCurrentPage.bind(null, '');
+  }, []);
+  return React.createElement(Container$2, null, React.createElement(Header$1, {
     title: title,
-    titleSize: titleSize,
-    titleWeight: titleWeight,
-    onClickRefresh: fetchBestRoute
+    suffix: React.createElement(HeaderButtons, {
+      onClickRefresh: !!bestRoute ? fetchBestRoute : undefined
+    })
   }), React.createElement(FromContainer, null, React.createElement(TokenInfo, {
     type: "From",
     chain: fromChain,
@@ -1611,9 +1769,12 @@ function Home(props) {
     inputAmount: inputAmount
   }), React.createElement(SwitchButtonContainer, null, React.createElement(Button, {
     variant: "ghost",
-    onClick: swithFromAndTo
+    onClick: () => {
+      switchFromAndTo();
+      setCount(prev => prev + 1);
+    }
   }, React.createElement(VerticalSwapIcon, {
-    size: 24
+    size: 32
   }), isRouterInContext && React.createElement(SwithFromAndTo, {
     count: count
   })))), React.createElement(TokenInfo, {
@@ -1647,7 +1808,7 @@ function Home(props) {
     disabled: swapButtonState.disabled,
     onClick: () => {
       if (swapButtonState.title === 'Connect Wallet') navigate(navigationRoutes.wallets);else {
-        navigate(navigationRoutes.confirmWallets, {
+        navigate(navigationRoutes.confirmSwap, {
           replace: true
         });
       }
@@ -1664,12 +1825,12 @@ const Route = _ref => {
   const navigate = useNavigate$1();
   const ref = useRef(true);
   useEffect(() => {
-    if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) navigate(navigationRoutes.home + location.search, {
+    if (location.pathname === navigationRoutes.confirmSwap && ref.current) navigate(navigationRoutes.home + location.search, {
       state: 'redirect'
     });
     ref.current = false;
   }, []);
-  if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) return React.createElement(Home, Object.assign({}, props));
+  if (location.pathname === navigationRoutes.confirmSwap && ref.current) return React.createElement(Home, Object.assign({}, props));
   return React.createElement(React.Fragment, null, " ", children);
 };
 function AppRouter(_ref2) {
@@ -1679,52 +1840,34 @@ function AppRouter(_ref2) {
   } = _ref2;
   const isRouterInContext = useInRouterContext$1();
   const Router = isRouterInContext ? Route : MemoryRouter;
-  return React.createElement(React.Fragment, null, React.createElement(Router, Object.assign({}, props), children), isRouterInContext && React.createElement(UpdateUrl, null));
-}
-
-function ChangeSlippageButton() {
-  const navigate = useNavigate();
-  return React.createElement(Button, {
-    type: "primary",
-    variant: "outlined",
-    size: "small",
-    onClick: () => navigate(navigationRoutes.settings)
-  }, "Change Slippage");
-}
-
-function HighSlippageWarning(props) {
   const {
-    selectedSlippage
-  } = props;
-  return React.createElement(Alert, {
-    type: "warning",
-    footer: React.createElement(ChangeSlippageButton, null)
-  }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.");
-}
-
-function ConfirmSwapExtraMessages(props) {
-  const {
-    selectedSlippage
-  } = props;
-  const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
-  return React.createElement(React.Fragment, null, highSlippage && React.createElement(HighSlippageWarning, {
-    selectedSlippage: selectedSlippage
-  }));
+    blockchains
+  } = useMetaStore.use.meta();
+  const evmChains = blockchains.filter(isEvmBlockchain);
+  useQueueManager({
+    lastConnectedWallet: props.lastConnectedWallet,
+    clearDisconnectedWallet: props.clearDisconnectedWallet,
+    disconnectedWallet: props.disconnectedWallet,
+    evmChains,
+    notifier: () => {}
+  });
+  return React.createElement(React.Fragment, null, React.createElement(Router, Object.assign({}, props), children), isRouterInContext && React.createElement(UpdateUrl, null));
 }
 
 function useNavigateBack() {
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
   const navigateBackFrom = currentRoute => {
+    if (currentRoute === navigationRoutes.swapDetails) return navigate(navigationRoutes.swaps, {
+      replace: true
+    });
     if (!isRouterInContext || window.history.state && window.history.state.idx > 0) navigate(-1);else {
-      if ([navigationRoutes.fromChain, navigationRoutes.fromToken, navigationRoutes.toChain, navigationRoutes.toToken, navigationRoutes.settings, navigationRoutes.wallets, navigationRoutes.swaps, navigationRoutes.confirmWallets].includes(currentRoute)) navigate(navigationRoutes.home, {
+      if ([navigationRoutes.fromChain, navigationRoutes.fromToken, navigationRoutes.toChain, navigationRoutes.toToken, navigationRoutes.settings, navigationRoutes.wallets, navigationRoutes.swaps, navigationRoutes.confirmSwap].includes(currentRoute)) navigate(navigationRoutes.home, {
         replace: true
       });else if (currentRoute === navigationRoutes.liquiditySources) navigate(navigationRoutes.settings, {
         replace: true
       });else if (currentRoute === navigationRoutes.swapDetails) navigate(navigationRoutes.swaps, {
         replace: true
-      });else if (currentRoute === navigationRoutes.confirmSwap) navigate(navigationRoutes.confirmWallets, {
-        replace: true
       });
     }
   };
@@ -1733,122 +1876,197 @@ function useNavigateBack() {
   };
 }
 
-var ConfirmSwapErrorTypes;
-(function (ConfirmSwapErrorTypes) {
-  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["NO_ROUTE"] = 0] = "NO_ROUTE";
-  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS"] = 1] = "ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS";
-  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["REQUEST_FAILED"] = 2] = "REQUEST_FAILED";
-  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["INSUFFICIENT_SLIPPAGE"] = 3] = "INSUFFICIENT_SLIPPAGE";
-})(ConfirmSwapErrorTypes || (ConfirmSwapErrorTypes = {}));
-var ConfirmSwapWarningTypes;
-(function (ConfirmSwapWarningTypes) {
-  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_UPDATED"] = 0] = "ROUTE_UPDATED";
-  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_SWAPPERS_UPDATED"] = 1] = "ROUTE_SWAPPERS_UPDATED";
-  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_COINS_UPDATED"] = 2] = "ROUTE_COINS_UPDATED";
-  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_AND_OUTPUT_AMOUNT_UPDATED"] = 3] = "ROUTE_AND_OUTPUT_AMOUNT_UPDATED";
-  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
-})(ConfirmSwapWarningTypes || (ConfirmSwapWarningTypes = {}));
-
-function MinRequiredSlippage(_ref) {
-  let {
-    minRequiredSlippage
-  } = _ref;
-  return React.createElement(Typography, {
-    variant: "body2"
-  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React.createElement(ChangeSlippageButton, null));
-}
-
-function ConfirmSwapErrors(errors) {
-  return errors.flatMap(error => {
-    switch (error.type) {
-      case ConfirmSwapErrorTypes.NO_ROUTE:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "No routes found. Please try again later.");
-      case ConfirmSwapErrorTypes.REQUEST_FAILED:
-        return React.createElement(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.createElement(Typography, {
-          variant: "body2"
-        }, "Route updated and price impact is too high, try again later!");
-      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
-        return React.createElement(MinRequiredSlippage, {
-          minRequiredSlippage: error.minRequiredSlippage
-        });
-      default:
-        return [];
-    }
-  });
-}
-
-const List = /*#__PURE__*/styled('ul', {
+const Box$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%'
+});
+const Container$3 = /*#__PURE__*/styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
   variants: {
-    showListStyle: {
-      true: {
-        paddingLeft: '$24'
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300'
+      },
+      outlined: {
+        border: '1px solid $neutrals300'
       }
     }
-  }
-});
-const ListItem = /*#__PURE__*/styled('li', {
-  variants: {
-    showListStyle: {
-      true: {
-        listStyleType: 'disc',
-        listStylePosition: 'outside'
+  },
+  defaultVariants: {
+    type: 'filled'
+  },
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8'
+    }
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
       }
+    },
+    '.amount': {
+      width: '30%'
     }
   }
 });
-const Message = /*#__PURE__*/styled(Typography, {
-  display: 'block'
+const StyledImage$1 = /*#__PURE__*/styled('img', {
+  width: '$24',
+  maxHeight: '$24'
 });
-function BalanceWarnings(_ref) {
-  let {
-    messages
-  } = _ref;
-  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))));
+const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px'
+});
+const OutputContainer$1 = /*#__PURE__*/styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$background',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8'
+});
+function TokenPreview(props) {
+  const {
+    chain,
+    token,
+    loadingStatus,
+    percentageChange
+  } = props;
+  const {
+    t
+  } = useTranslation();
+  const ItemSuffix = React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
+    color: "error",
+    size: 24
+  }));
+  return React.createElement(Box$1, null, React.createElement(Container$3, {
+    type: 'outlined'
+  }, React.createElement("div", {
+    className: "head"
+  }, React.createElement(Typography, {
+    variant: "body2",
+    color: "neutrals800"
+  }, props.label), React.createElement("div", null, percentageChange, props.usdValue && React.createElement(Typography, {
+    variant: "caption",
+    color: "neutrals600",
+    className: "usd-value"
+  }, `$${numberToString(props.usdValue)}`))), React.createElement("div", {
+    className: "form"
+  }, React.createElement(Button, {
+    className: "selectors",
+    variant: "outlined",
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage$1, {
+      src: chain.logo
+    }) : React.createElement(ImagePlaceholder$1, null),
+    suffix: ItemSuffix,
+    align: "start",
+    size: "large"
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement(Button, {
+    className: "selectors",
+    variant: "outlined",
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && token ? React.createElement(StyledImage$1, {
+      src: token.image
+    }) : React.createElement(ImagePlaceholder$1, null),
+    suffix: ItemSuffix,
+    size: "large",
+    align: "start"
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement("div", {
+    className: "amount"
+  }, React.createElement(OutputContainer$1, null, React.createElement(Typography, {
+    variant: "h4"
+  }, props.amount))))));
 }
 
-function ConfirmSwapWarnings(warnings) {
-  return warnings.flatMap(warning => {
-    switch (warning.type) {
-      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route has been updated.");
-      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, `Output amount changed to ${warning.newOutputAmount} 
-      (${warning.percentageChange}% change).`);
-      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route swappers has been updated.");
-      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route internal coins has been updated.");
-      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
-        return React.createElement(BalanceWarnings, {
-          messages: warning.messages
-        });
-      default:
-        return [];
-    }
-  });
+const Container$4 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  fontSize: '$12',
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+function RoutesOverview(props) {
+  if (!props.routes) return null;
+  const swaps = props.routes.result?.swaps;
+  return React.createElement(Container$4, null, React.createElement("div", {
+    className: "routes"
+  }, swaps?.map((swap, idx) => {
+    const isLast = idx + 1 == swaps.length;
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+      className: "route"
+    }, swap.from.symbol), React.createElement(ChevronRightIcon, {
+      size: 12
+    }), isLast ? React.createElement("div", {
+      className: "route"
+    }, swap.to.symbol) : null);
+  })), props.totalFee ? React.createElement("div", {
+    className: "fee"
+  }, React.createElement(GasIcon, {
+    size: 12
+  }), React.createElement(Spacer, {
+    size: 4
+  }), "$", props.totalFee) : null);
 }
 
+var ConfirmSwapErrorTypes;
+(function (ConfirmSwapErrorTypes) {
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["NO_ROUTE"] = 0] = "NO_ROUTE";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS"] = 1] = "ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["REQUEST_FAILED"] = 2] = "REQUEST_FAILED";
+  ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["INSUFFICIENT_SLIPPAGE"] = 3] = "INSUFFICIENT_SLIPPAGE";
+})(ConfirmSwapErrorTypes || (ConfirmSwapErrorTypes = {}));
+var ConfirmSwapWarningTypes;
+(function (ConfirmSwapWarningTypes) {
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_UPDATED"] = 0] = "ROUTE_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_SWAPPERS_UPDATED"] = 1] = "ROUTE_SWAPPERS_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_COINS_UPDATED"] = 2] = "ROUTE_COINS_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["ROUTE_AND_OUTPUT_AMOUNT_UPDATED"] = 3] = "ROUTE_AND_OUTPUT_AMOUNT_UPDATED";
+  ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
+})(ConfirmSwapWarningTypes || (ConfirmSwapWarningTypes = {}));
+
 function useConfirmSwap() {
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();
@@ -1889,6 +2107,7 @@ function useConfirmSwap() {
       proceedAnywayRef.current = false;
       if (confiremedRouteRef.current) {
         const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        //@ts-ignore
         return newSwap;
       }
       return;
@@ -1951,6 +2170,7 @@ function useConfirmSwap() {
           disabledSwappersGroups: disabledLiquiditySources
         };
         const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        //@ts-ignore
         return newSwap;
       } else if (!proceedAnywayRef.current) {
         proceedAnywayRef.current = true;
@@ -1980,63 +2200,269 @@ function useConfirmSwap() {
   };
 }
 
-function ConfirmSwapPage() {
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const {
-    manager
-  } = useManager();
+function ChangeSlippageButton() {
   const navigate = useNavigate();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-  const fetchingBestRoute = useBestRouteStore.use.loading();
-  const {
-    tokens
-  } = useMetaStore.use.meta();
-  const slippage = useSettingsStore.use.slippage();
-  const customSlippage = useSettingsStore.use.customSlippage();
-  const selectedSlippage = customSlippage || slippage;
-  const {
-    loading,
-    errors,
-    warnings,
-    confirmSwap
-  } = useConfirmSwap();
-  const showHighSlippageWarning = !errors.find(error => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE);
-  return React.createElement(ConfirmSwap, {
-    onConfirm: () => {
-      confirmSwap?.().then(swap => {
-        if (swap) {
-          manager?.create('swap', {
-            swapDetails: swap
-          }, {
-            id: swap.requestId
-          });
-          setSelectedSwap(swap.requestId);
-          navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
-            replace: true
-          });
-        }
-      });
-    },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
-    bestRoute: getBestRouteWithCalculatedFees(bestRoute, tokens),
-    loading: loading,
-    errors: ConfirmSwapErrors(errors),
-    warnings: ConfirmSwapWarnings(warnings),
-    extraMessages: showHighSlippageWarning && React.createElement(ConfirmSwapExtraMessages, {
-      selectedSlippage: selectedSlippage
-    }),
-    confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!',
-    confirmButtonDisabled: fetchingBestRoute
-  });
+  return React.createElement(Button, {
+    type: "primary",
+    variant: "outlined",
+    size: "small",
+    onClick: () => navigate(navigationRoutes.settings)
+  }, "Change Slippage");
 }
 
-const getPendingSwaps = manager => {
-  const result = [];
-  manager?.getAll().forEach((q, id) => {
-    const storage = q.list.getStorage();
+const StyledMessage = /*#__PURE__*/styled(Typography, {
+  color: '$error500 !important'
+});
+function MinRequiredSlippage(_ref) {
+  let {
+    minRequiredSlippage
+  } = _ref;
+  return React.createElement(StyledMessage, {
+    variant: "body2"
+  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React.createElement(Spacer, {
+    size: 8,
+    direction: "vertical"
+  }), React.createElement(ChangeSlippageButton, null));
+}
+
+function ConfirmSwapErrors(errors) {
+  return errors.flatMap(error => {
+    switch (error.type) {
+      case ConfirmSwapErrorTypes.NO_ROUTE:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, "No routes found. Please try again later.");
+      case ConfirmSwapErrorTypes.REQUEST_FAILED:
+        return React.createElement(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.createElement(Typography, {
+          variant: "body2"
+        }, "Route updated and price impact is too high, try again later!");
+      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
+        return React.createElement(MinRequiredSlippage, {
+          minRequiredSlippage: error.minRequiredSlippage
+        });
+      default:
+        return [];
+    }
+  });
+}
+
+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',
+  color: '$warning500 !important'
+});
+function BalanceWarnings(_ref) {
+  let {
+    messages
+  } = _ref;
+  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))));
+}
+
+function ConfirmSwapWarnings(warnings) {
+  return warnings.flatMap(warning => {
+    switch (warning.type) {
+      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, "Route has been updated.");
+      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, `Output amount changed to ${warning.newOutputAmount} 
+      (${warning.percentageChange}% change).`);
+      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, "Route swappers has been updated.");
+      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, "Route internal coins has been updated.");
+      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
+        return React.createElement(BalanceWarnings, {
+          messages: warning.messages
+        });
+      default:
+        return [];
+    }
+  });
+}
+
+function HighSlippageWarning(props) {
+  const {
+    selectedSlippage
+  } = props;
+  return React.createElement(Alert, {
+    type: "warning",
+    footer: React.createElement(ChangeSlippageButton, null)
+  }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.");
+}
+
+function ConfirmSwapExtraMessages(props) {
+  const {
+    selectedSlippage
+  } = props;
+  const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
+  return React.createElement(React.Fragment, null, highSlippage && React.createElement(HighSlippageWarning, {
+    selectedSlippage: selectedSlippage
+  }));
+}
+
+function ConfirmSwapPage() {
+  const navigate = useNavigate();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const fetchingBestRouteError = useBestRouteStore.use.error();
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  const {
+    blockchains,
+    tokens
+  } = useMetaStore.use.meta();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
+  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
+  const slippage = useSettingsStore.use.slippage();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
+  const {
+    manager
+  } = useManager();
+  const {
+    loading,
+    errors,
+    warnings,
+    confirmSwap
+  } = useConfirmSwap();
+  const selectedSlippage = customSlippage || slippage;
+  const showHighSlippageWarning = !errors.find(error => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE);
+  const {
+    getWalletInfo,
+    connect
+  } = useWallets();
+  const confirmDisabled = fetchingBestRoute || !requiredWallets(bestRoute).every(chain => selectedWallets.map(wallet => wallet.chain).includes(chain));
+  const firstStep = bestRoute?.result?.swaps[0];
+  const lastStep = bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
+  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
+  const toAmount = decimalNumber(lastStep?.toAmount, 3);
+  useEffect(() => {
+    initSelectedWallets();
+  }, []);
+  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
+  const handleConnectChain = wallet => {
+    const network = wallet;
+    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
+  };
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+  return React.createElement(ConfirmSwap, {
+    requiredWallets: getRequiredChains(bestRoute),
+    selectableWallets: selectableWallets,
+    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
+    onConfirm: () => {
+      confirmSwap?.().then(swap => {
+        if (swap) {
+          manager?.create('swap', {
+            swapDetails: swap
+          }, {
+            id: swap.requestId
+          });
+          setSelectedSwap(swap.requestId);
+          navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
+            replace: true
+          });
+        }
+      });
+    },
+    onChange: wallet => setSelectedWallet(wallet),
+    confirmDisabled: confirmDisabled,
+    handleConnectChain: wallet => handleConnectChain(wallet),
+    isExperimentalChain: wallet => getKeplrCompatibleConnectedWallets(selectableWallets).length > 0 ? isExperimentalChain(blockchains, wallet) : false,
+    previewInputs: React.createElement(React.Fragment, null, React.createElement(TokenPreview, {
+      chain: {
+        displayName: firstStep?.from.blockchain || '',
+        logo: firstStep?.from.blockchainLogo || ''
+      },
+      token: {
+        symbol: firstStep?.from.symbol || '',
+        image: firstStep?.from.logo || ''
+      },
+      usdValue: inputUsdValue,
+      amount: fromAmount,
+      label: t('From'),
+      loadingStatus: bestRouteloadingStatus
+    }), React.createElement(Spacer, {
+      size: 12,
+      direction: "vertical"
+    }), React.createElement(TokenPreview, {
+      chain: {
+        displayName: lastStep?.to.blockchain || '',
+        logo: lastStep?.to.blockchainLogo || ''
+      },
+      token: {
+        symbol: lastStep?.to.symbol || '',
+        image: lastStep?.to.logo || ''
+      },
+      usdValue: outputUsdValue,
+      amount: toAmount,
+      label: t('To'),
+      loadingStatus: bestRouteloadingStatus,
+      percentageChange: React.createElement(PercentageChange, {
+        inputUsdValue: inputUsdValue,
+        outputUsdValue: outputUsdValue
+      })
+    })),
+    previewRoutes: React.createElement(RoutesOverview, {
+      routes: bestRoute,
+      totalFee: numberToString(totalFeeInUsd, 0, 2)
+    }),
+    loading: loading,
+    errors: ConfirmSwapErrors(errors),
+    warnings: ConfirmSwapWarnings(warnings),
+    extraMessages: showHighSlippageWarning && React.createElement(ConfirmSwapExtraMessages, {
+      selectedSlippage: selectedSlippage
+    }),
+    confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!'
+  });
+}
+
+const getPendingSwaps = manager => {
+  const result = [];
+  manager?.getAll().forEach((q, id) => {
+    const storage = q.list.getStorage();
     if (storage?.swapDetails) {
       result.push({
         id,
@@ -2047,6 +2473,31 @@ const getPendingSwaps = manager => {
   return result.sort((a, b) => Number(b.swap.creationTime) - Number(a.swap.creationTime));
 };
 
+const groupSwapsByDate = swaps => {
+  const output = new Map([['today', {
+    title: 'Today',
+    swaps: []
+  }], ['week', {
+    title: 'This week',
+    swaps: []
+  }], ['month', {
+    title: 'This month',
+    swaps: []
+  }], ['year', {
+    title: 'This year',
+    swaps: []
+  }], ['history', {
+    title: 'History',
+    swaps: []
+  }]]);
+  const now = dayjs();
+  swaps.forEach(swap => {
+    const swapDate = dayjs(Number(swap.creationTime));
+    if (now.isSame(swapDate, 'day')) output.get('today')?.swaps.push(swap);else if (now.isSame(swapDate, 'week')) output.get('week')?.swaps.push(swap);else if (now.isSame(swapDate, 'month')) output.get('month')?.swaps.push(swap);else if (now.isSame(swapDate, 'year')) output.get('year')?.swaps.push(swap);else output.get('history')?.swaps.push(swap);
+  });
+  return Array.from(output.values());
+};
+
 function HistoryPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
@@ -2062,16 +2513,14 @@ function HistoryPage() {
     } = _ref;
     return swap;
   });
-  return React.createElement(History
-  //todo: move PendingSwap type to rango-types
-  //@ts-ignore
-  , {
-    //todo: move PendingSwap type to rango-types
-    //@ts-ignore
+  return React.createElement(History, {
     list: pendingSwaps,
+    groupBy: groupSwapsByDate,
     onSwapClick: requestId => {
       setSelectedSwap(requestId);
-      navigate(navigationRoutes.swaps + `/${requestId}`);
+      navigate(navigationRoutes.swaps + `/${requestId}`, {
+        replace: true
+      });
     },
     onBack: navigateBackFrom.bind(null, navigationRoutes.swaps)
   });
@@ -2082,6 +2531,7 @@ function LiquiditySourcePage(_ref) {
     supportedSwappers
   } = _ref;
   const swappers = useMetaStore.use.meta().swappers;
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
   const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
   const toggleAllLiquiditySources = useSettingsStore.use.toggleAllLiquiditySources();
@@ -2107,7 +2557,8 @@ function LiquiditySourcePage(_ref) {
     toggleAll: toggleAllLiquiditySources,
     list: supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups,
     onChange: liquiditySource => toggleLiquiditySource(liquiditySource.title),
-    onBack: navigateBackFrom.bind(null, navigationRoutes.liquiditySources)
+    onBack: navigateBackFrom.bind(null, navigationRoutes.liquiditySources),
+    loadingStatus: loadingMetaStatus
   });
 }
 
@@ -2149,391 +2600,169 @@ function SelectTokenPage(props) {
   const sourceTokens = useBestRouteStore.use.sourceTokens();
   const destinationTokens = useBestRouteStore.use.destinationTokens();
   const supportedSourceTokens = supportedTokens === 'all' ? sourceTokens : sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
-  const supportedDestinationTokens = supportedTokens === 'all' ? destinationTokens : destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
-  console.log(supportedSourceTokens);
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toToken = useBestRouteStore.use.toToken();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToToken = useBestRouteStore.use.setToToken();
-  return React.createElement(TokenSelector, {
-    type: type === 'from' ? 'Source' : 'Destination',
-    list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
-    selected: type === 'from' ? fromToken : toToken,
-    onChange: token => {
-      if (type === 'from') setFromToken(token);else setToToken(token);
-      navigateBackFrom(navigationRoutes.fromToken);
-    },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken)
-  });
-}
-
-function SettingsPage(_ref) {
-  let {
-    supportedSwappers
-  } = _ref;
-  const slippage = useSettingsStore.use.slippage();
-  const setSlippage = useSettingsStore.use.setSlippage();
-  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
-  const customSlippage = useSettingsStore.use.customSlippage();
-  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
-  const theme = useSettingsStore.use.theme();
-  const setTheme = useSettingsStore.use.setTheme();
-  const swappers = useMetaStore.use.meta().swappers;
-  const navigate = useNavigate();
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const infiniteApprove = useSettingsStore.use.infiniteApprove();
-  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
-  const uniqueSwappersGroups = [];
-  removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
-    return swappers.find(s => s.swapperGroup === swapperGroup);
-  }).find(s => {
-    if (s) {
-      for (const type of s.types) {
-        uniqueSwappersGroups.push({
-          title: s.swapperGroup,
-          logo: s.logo,
-          type,
-          selected: !disabledLiquiditySources.includes(s.swapperGroup)
-        });
-      }
-    }
-  });
-  supportedSwappers !== 'all' && uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0);
-  const supportedUniqueSwappersGroups = supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups;
-  return React.createElement(Settings, {
-    slippages: SLIPPAGES,
-    selectedSlippage: slippage,
-    onSlippageChange: slippage => setSlippage(slippage),
-    onLiquiditySourcesClick: () => navigate(navigationRoutes.liquiditySources),
-    onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
-    liquiditySources: supportedUniqueSwappersGroups,
-    selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
-    customSlippage: customSlippage || NaN,
-    onCustomSlippageChange: setCustomSlippage,
-    minSlippage: MIN_SLIPPGAE,
-    maxSlippage: MAX_SLIPPAGE,
-    selectedTheme: theme,
-    onThemeChange: setTheme,
-    infiniteApprove: infiniteApprove,
-    toggleInfiniteApprove: toggleInfiniteApprove
-  });
-}
-
-const ListContainer = /*#__PURE__*/styled('div', {
-  display: 'grid',
-  gap: '.5rem',
-  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
-  height: '450px',
-  alignContent: 'baseline',
-  padding: '0.5rem'
-});
-const AlertContainer = /*#__PURE__*/styled('div', {
-  paddingBottom: '$16'
-});
-function WalletsPage(_ref) {
-  let {
-    supportedWallets,
-    multiWallets
-  } = _ref;
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const {
-    state,
-    disconnect,
-    getWalletInfo,
-    connect
-  } = useWallets();
-  const wallets = getlistWallet(state, getWalletInfo, supportedWallets === '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 {
-    t
-  } = useTranslation();
-  const onSelectWallet = async type => {
-    const wallet = state(type);
-    try {
-      if (walletErrorMessage) setWalletErrorMessage('');
-      if (wallet.connected) {
-        await disconnect(type);
-      } else {
-        if (!multiWallets && !!wallets.find(w => w.state === WalletState.CONNECTED)) {
-          return;
-        }
-        await connect(type);
-      }
-    } catch (e) {
-      setWalletErrorMessage('Error: ' + e?.message);
-    }
-  };
-  useEffect(() => {
-    toggleConnectWalletsButton();
-    return () => toggleConnectWalletsButton();
-  }, []);
-  return React.createElement(SecondaryPage, {
-    title: t('Select Wallet') || '',
-    textField: false,
-    onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
-  }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
-    type: "error"
-  }, walletErrorMessage)), React.createElement(ListContainer, null, sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
-    key: `${index}-${wallet.type}`,
-    onClick: onSelectWallet
-  }))))));
-}
-
-const Box$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%'
-});
-const Container$3 = /*#__PURE__*/styled('div', {
-  boxSizing: 'border-box',
-  borderRadius: '$5',
-  padding: '$8 $16 $16 $16',
-  variants: {
-    type: {
-      filled: {
-        backgroundColor: '$neutrals300'
-      },
-      outlined: {
-        border: '1px solid $neutrals300'
-      }
-    }
-  },
-  defaultVariants: {
-    type: 'filled'
-  },
-  '.head': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: '32px'
-  },
-  '.form': {
-    display: 'flex',
-    width: '100%',
-    padding: '$2 0',
-    '.selectors': {
-      width: '35%',
-      '._text': {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-      }
-    },
-    '.amount': {
-      width: '30%'
-    }
-  }
-});
-const StyledImage$1 = /*#__PURE__*/styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
-const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
-  width: '24px',
-  height: '24px',
-  backgroundColor: '$neutrals300',
-  borderRadius: '99999px'
-});
-const OutputContainer$1 = /*#__PURE__*/styled('div', {
-  windth: '100%',
-  height: '$48',
-  borderRadius: '$5',
-  backgroundColor: '$background',
-  border: '1px solid transparent',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '$8',
-  paddingRight: '$8'
-});
-function TokenPreview(props) {
-  const {
-    chain,
-    token,
-    loadingStatus
-  } = props;
-  const {
-    t
-  } = useTranslation();
-  const ItemSuffix = React.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
-    color: "error",
-    size: 24
-  }));
-  return React.createElement(Box$1, null, React.createElement(Container$3, {
-    type: 'outlined'
-  }, React.createElement("div", {
-    className: "head"
-  }, React.createElement(Typography, {
-    variant: "body2",
-    color: "neutrals800"
-  }, props.label), React.createElement(Typography, {
-    variant: "caption",
-    color: "neutrals600"
-  }, `$${numberToString(props.usdValue)}`)), React.createElement("div", {
-    className: "form"
-  }, React.createElement(Button, {
-    className: "selectors",
-    variant: "outlined",
-    loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage$1, {
-      src: chain.logo
-    }) : React.createElement(ImagePlaceholder$1, null),
-    suffix: ItemSuffix,
-    align: "start",
-    size: "large"
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
-    size: 12
-  }), React.createElement(Button, {
-    className: "selectors",
-    variant: "outlined",
-    loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && token ? React.createElement(StyledImage$1, {
-      src: token.image
-    }) : React.createElement(ImagePlaceholder$1, null),
-    suffix: ItemSuffix,
-    size: "large",
-    align: "start"
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
-    size: 12
-  }), React.createElement("div", {
-    className: "amount"
-  }, React.createElement(OutputContainer$1, null, React.createElement(Typography, {
-    variant: "h4"
-  }, props.amount))))));
-}
-
-const Container$4 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '$8',
-  borderRadius: '$5',
-  backgroundColor: '$neutrals300',
-  color: '$neutrals800',
-  fontSize: '$12',
-  '.routes': {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  '.fee': {
-    display: 'flex',
-    alignItems: 'center'
-  }
-});
-function RoutesOverview(props) {
-  if (!props.routes) return null;
-  const swaps = props.routes.result?.swaps;
-  return React.createElement(Container$4, null, React.createElement("div", {
-    className: "routes"
-  }, swaps?.map((swap, idx) => {
-    const isLast = idx + 1 == swaps.length;
-    return React.createElement(React.Fragment, null, React.createElement("div", {
-      className: "route"
-    }, swap.from.symbol), React.createElement(ChevronRightIcon, {
-      size: 12
-    }), isLast ? React.createElement("div", {
-      className: "route"
-    }, swap.to.symbol) : null);
-  })), props.totalFee ? React.createElement("div", {
-    className: "fee"
-  }, React.createElement(GasIcon, {
-    size: 12
-  }), React.createElement(Spacer, {
-    size: 4
-  }), "$", props.totalFee) : null);
+  const supportedDestinationTokens = supportedTokens === 'all' ? destinationTokens : destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  return React.createElement(TokenSelector, {
+    type: type === 'from' ? 'Source' : 'Destination',
+    list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
+    selected: type === 'from' ? fromToken : toToken,
+    onChange: token => {
+      if (type === 'from') setFromToken(token);else setToToken(token);
+      navigateBackFrom(navigationRoutes.fromToken);
+    },
+    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken),
+    loadingStatus: loadingMetaStatus
+  });
 }
 
-function ConfirmWalletsPage() {
+function SettingsPage(_ref) {
+  let {
+    supportedSwappers
+  } = _ref;
+  const slippage = useSettingsStore.use.slippage();
+  const setSlippage = useSettingsStore.use.setSlippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
+  const theme = useSettingsStore.use.theme();
+  const setTheme = useSettingsStore.use.setTheme();
+  const swappers = useMetaStore.use.meta().swappers;
   const navigate = useNavigate();
   const {
     navigateBackFrom
   } = useNavigateBack();
-  const bestRoute = useBestRouteStore.use.bestRoute();
+  const infiniteApprove = useSettingsStore.use.infiniteApprove();
+  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const uniqueSwappersGroups = [];
+  removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
+    return swappers.find(s => s.swapperGroup === swapperGroup);
+  }).find(s => {
+    if (s) {
+      for (const type of s.types) {
+        uniqueSwappersGroups.push({
+          title: s.swapperGroup,
+          logo: s.logo,
+          type,
+          selected: !disabledLiquiditySources.includes(s.swapperGroup)
+        });
+      }
+    }
+  });
+  supportedSwappers !== 'all' && uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0);
+  const supportedUniqueSwappersGroups = supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups;
+  return React.createElement(Settings, {
+    slippages: SLIPPAGES,
+    selectedSlippage: slippage,
+    onSlippageChange: slippage => setSlippage(slippage),
+    onLiquiditySourcesClick: () => navigate(navigationRoutes.liquiditySources),
+    onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
+    liquiditySources: supportedUniqueSwappersGroups,
+    selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
+    customSlippage: customSlippage || NaN,
+    onCustomSlippageChange: setCustomSlippage,
+    minSlippage: MIN_SLIPPGAE,
+    maxSlippage: MAX_SLIPPAGE,
+    selectedTheme: theme,
+    onThemeChange: setTheme,
+    infiniteApprove: infiniteApprove,
+    toggleInfiniteApprove: toggleInfiniteApprove,
+    loadingStatus: loadingMetaStatus
+  });
+}
+
+const ListContainer = /*#__PURE__*/styled('div', {
+  display: 'grid',
+  gap: '.5rem',
+  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
+  alignContent: 'baseline',
+  padding: '0.5rem',
+  overflowY: 'auto'
+});
+const LoaderContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  position: 'absolute',
+  top: '50%'
+});
+const AlertContainer = /*#__PURE__*/styled('div', {
+  paddingBottom: '$16'
+});
+function WalletsPage(_ref) {
+  let {
+    supportedWallets,
+    multiWallets
+  } = _ref;
   const {
-    blockchains,
-    tokens
-  } = useMetaStore.use.meta();
-  const accounts = useWalletsStore.use.accounts();
-  const selectedWallets = useWalletsStore.use.selectedWallets();
-  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
-  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
+    navigateBackFrom
+  } = useNavigateBack();
   const {
+    state,
+    disconnect,
     getWalletInfo,
     connect
   } = 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);
+  const wallets = getlistWallet(state, getWalletInfo, supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets);
+  const walletsRef = useRef();
+  let sortedWallets = detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
+  sortedWallets = sortWalletsBasedOnState(sortedWallets);
+  const [walletErrorMessage, setWalletErrorMessage] = useState('');
+  const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const {
+    t
+  } = useTranslation();
+  const onSelectWallet = async type => {
+    const wallet = state(type);
+    try {
+      if (walletErrorMessage) setWalletErrorMessage('');
+      if (wallet.connected) {
+        await disconnect(type);
+      } else {
+        if (!multiWallets && !!wallets.find(w => w.state === WalletState.CONNECTED)) {
+          return;
+        }
+        await connect(type);
+      }
+    } catch (e) {
+      setWalletErrorMessage('Error: ' + e?.message);
+    }
+  };
+  const disconnectConnectingWallets = () => {
+    const connectingWallets = walletsRef.current?.filter(wallet => wallet.state === WalletState.CONNECTING) || [];
+    for (const wallet of connectingWallets) {
+      disconnect(wallet.type);
+    }
+  };
   useEffect(() => {
-    initSelectedWallets();
+    toggleConnectWalletsButton();
+    return () => {
+      disconnectConnectingWallets();
+      toggleConnectWalletsButton();
+    };
   }, []);
-  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
-  const handleConnectChain = wallet => {
-    const network = wallet;
-    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
-  };
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-  return React.createElement(ConfirmWallets, {
-    requiredWallets: getRequiredChains(bestRoute),
-    selectableWallets: selectableWallets,
-    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmWallets),
-    onConfirm: () => navigate(navigationRoutes.confirmSwap, {
-      replace: true
-    }),
-    onChange: wallet => setSelectedWallet(wallet),
-    confirmDisabled: confirmDisabled,
-    handleConnectChain: wallet => handleConnectChain(wallet),
-    isExperimentalChain: wallet => getKeplrCompatibleConnectedWallets(selectableWallets).length > 0 ? isExperimentalChain(blockchains, wallet) : false,
-    previewInputs: React.createElement(React.Fragment, null, React.createElement(TokenPreview, {
-      chain: {
-        displayName: firstStep?.from.blockchain || '',
-        logo: firstStep?.from.blockchainLogo || ''
-      },
-      token: {
-        symbol: firstStep?.from.symbol || '',
-        image: firstStep?.from.logo || ''
-      },
-      usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
-      amount: fromAmount,
-      label: t('From'),
-      loadingStatus: 'success'
-    }), React.createElement(Spacer, {
-      size: 12,
-      direction: "vertical"
-    }), React.createElement(TokenPreview, {
-      chain: {
-        displayName: lastStep?.to.blockchain || '',
-        logo: lastStep?.to.blockchainLogo || ''
-      },
-      token: {
-        symbol: lastStep?.to.symbol || '',
-        image: lastStep?.to.logo || ''
-      },
-      usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
-      amount: toAmount,
-      label: t('To'),
-      loadingStatus: 'success'
-    })),
-    previewRoutes: React.createElement(RoutesOverview, {
-      routes: bestRoute,
-      totalFee: numberToString(totalFeeInUsd, 0, 2)
-    })
-  });
+  useEffect(() => {
+    walletsRef.current = wallets;
+  }, [wallets]);
+  return React.createElement(SecondaryPage, {
+    title: t('Select Wallet') || '',
+    textField: false,
+    onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
+  }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
+    type: "error"
+  }, walletErrorMessage)), loadingMetaStatus === 'loading' && React.createElement(LoaderContainer, {
+    className: "loader"
+  }, React.createElement(Spinner, {
+    size: 24
+  })), loadingMetaStatus === 'failed' && React.createElement(LoadingFailedAlert, null), React.createElement(ListContainer, null, loadingMetaStatus === 'success' && sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
+    key: `${index}-${wallet.type}`,
+    onClick: onSelectWallet
+  }))))));
 }
 
 function useCopyToClipboard(resetInterval) {
@@ -2554,15 +2783,87 @@ function useCopyToClipboard(resetInterval) {
   return [isCopied, handleCopy];
 }
 
+function timeSince(timeMillis) {
+  const seconds = Math.floor((new Date().getTime() - timeMillis) / 1000);
+  let intervalType;
+  let interval = Math.floor(seconds / 31536000);
+  if (interval >= 1) {
+    intervalType = 'year';
+  } else {
+    interval = Math.floor(seconds / 2592000);
+    if (interval >= 1) {
+      intervalType = 'month';
+    } else {
+      interval = Math.floor(seconds / 86400);
+      if (interval >= 1) {
+        intervalType = 'day';
+      } else {
+        interval = Math.floor(seconds / 3600);
+        if (interval >= 1) {
+          intervalType = 'hour';
+        } else {
+          interval = Math.floor(seconds / 60);
+          if (interval >= 1) {
+            intervalType = 'minute';
+          } else {
+            interval = seconds;
+            intervalType = 'second';
+          }
+        }
+      }
+    }
+  }
+  if (interval > 1 || interval === 0) {
+    intervalType += 's';
+  }
+  return interval + ' ' + intervalType;
+}
+function getSwapDate(pendingSwap) {
+  return pendingSwap.finishTime ? `Finished ${timeSince(parseInt(pendingSwap.finishTime))} ago @ ${new Date(parseInt(pendingSwap.finishTime)).toLocaleString()}` : `Started ${timeSince(parseInt(pendingSwap.creationTime))} ago @ ${new Date(parseInt(pendingSwap.creationTime)).toLocaleString()}`;
+}
+
+const PlaceholderContainer = /*#__PURE__*/styled('div', {
+  height: '450px'
+});
+function SwapDetailsPlaceholder(props) {
+  const {
+    requestId,
+    loading,
+    onBack
+  } = props;
+  return React.createElement(SecondaryPage, {
+    title: "Swap Details",
+    textField: false,
+    onBack: onBack
+  }, React.createElement(PlaceholderContainer, null, loading ? React.createElement(LoaderContainer, null, React.createElement(Spinner, {
+    size: 24
+  })) : React.createElement(Alert, {
+    type: "secondary",
+    title: `Swap with request ID = ${requestId} not found.`
+  })));
+}
+
 function SwapDetailsPage() {
   const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
+  const {
+    canSwitchNetworkTo,
+    connect
+  } = useWallets();
+  const retry = useBestRouteStore.use.retry();
+  const navigate = useNavigate();
   const {
     navigateBackFrom
   } = useNavigateBack();
+  const [isCopied, handleCopy] = useCopyToClipboard(2000);
   const {
     manager
   } = useManager();
-  const [isCopied, handleCopy] = useCopyToClipboard(2000);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+  }, []);
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(_ref => {
     let {
@@ -2570,92 +2871,161 @@ function SwapDetailsPage() {
     } = _ref;
     return swap.requestId === selectedSwapRequestId;
   });
-  //TODO: implement swap cancellation (move queueManager logic to queueManager/rango-preset)
   const onCancel = () => {
-    const swap = selectedSwap ? manager?.get(selectedSwap.id) : undefined;
+    const swap = manager?.get(selectedSwap?.id);
     if (swap) cancelSwap(swap);
   };
-  return React.createElement(SwapHistory, {
+  const swap = selectedSwap?.swap;
+  if (!swap) return React.createElement(SwapDetailsPlaceholder, {
+    requestId: selectedSwapRequestId || '',
+    loading: loading,
+    onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails)
+  });
+  const firstStep = swap.steps[0];
+  const lastStep = swap.steps[swap.steps.length - 1];
+  const fromAmount = numberToString(swap.inputAmount);
+  const toAmount = numberToString(swap.simulationResult.outputAmount);
+  const currentStep = getCurrentStep(swap);
+  const currentStepBlockchain = currentStep ? getCurrentBlockchainOfOrNull(swap, currentStep) : null;
+  const currentStepWallet = currentStep ? getRelatedWalletOrNull(swap, currentStep) : null;
+  const currentStepNetworkStatus = currentStep?.networkStatus;
+  const swapMessages = getSwapMessages(swap, currentStep);
+  const networkWarningState = isNetworkStatusInWarningState(currentStep);
+  const swapDate = getSwapDate(swap);
+  const shouldRetry = shouldRetrySwap(swap);
+  const switchNetwork = !!currentStepBlockchain && !!currentStepWallet?.walletType && currentStepNetworkStatus === PendingSwapNetworkStatus.WaitingForNetworkChange && canSwitchNetworkTo(currentStepWallet?.walletType, currentStepBlockchain) ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain) : undefined;
+  const lastConvertedTokenInFailedSwap = getLastConvertedTokenInFailedSwap(swap);
+  return React.createElement(SwapHistory, Object.assign({
     onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+    previewInputs: React.createElement(React.Fragment, null, React.createElement(TokenPreview, {
+      chain: {
+        displayName: firstStep?.fromBlockchain || '',
+        // @ts-ignore
+        logo: firstStep?.fromBlockchainLogo || ''
+      },
+      token: {
+        symbol: firstStep?.fromSymbol || '',
+        image: firstStep?.fromLogo || ''
+      },
+      amount: fromAmount,
+      label: t('From'),
+      loadingStatus: 'success'
+    }), React.createElement(Spacer, {
+      size: 12,
+      direction: "vertical"
+    }), React.createElement(TokenPreview, {
+      chain: {
+        displayName: lastStep?.toBlockchain || '',
+        // @ts-ignore
+        logo: lastStep?.toBlockchainLogo || ''
+      },
+      token: {
+        symbol: lastStep?.toSymbol || '',
+        image: lastStep?.toLogo || ''
+      },
+      amount: toAmount,
+      label: t('To'),
+      loadingStatus: 'success'
+    })),
     //todo: move PendingSwap type to rango-types
     //@ts-ignore
-    pendingSwap: selectedSwap?.swap,
+    pendingSwap: swap,
     onCopy: handleCopy,
     isCopied: isCopied,
-    onCancel: onCancel
-  });
+    onCancel: onCancel,
+    shortMessage: swapMessages.shortMessage,
+    detailedMessage: swapMessages.detailedMessage,
+    currentStepBlockchain: currentStepBlockchain || '',
+    switchNetwork: switchNetwork,
+    type: networkWarningState ? 'warning' : swap.extraMessageSeverity || undefined,
+    date: swapDate
+  }, shouldRetry && {
+    onRetry: () => {
+      retry(swap);
+      setTimeout(() => {
+        navigate(navigationRoutes.home);
+      }, 0);
+    }
+  }, lastConvertedTokenInFailedSwap && {
+    lastConvertedTokenInFailedSwap: {
+      blockchain: lastConvertedTokenInFailedSwap.blockchain,
+      outputAmount: lastConvertedTokenInFailedSwap.outputAmount || '',
+      symbol: lastConvertedTokenInFailedSwap.symbol
+    }
+  }));
 }
 
+const getAbsolutePath = path => path.replace('/', '');
 function AppRoutes(props) {
   const {
     configs
   } = props;
   return useRoutes([{
-    path: navigationRoutes.home,
+    path: getAbsolutePath(navigationRoutes.home),
     element: React.createElement(Home, {
       title: configs?.title,
       titleSize: configs?.titleSize,
       titleWeight: configs?.titleWeight
     })
   }, {
-    path: navigationRoutes.fromChain,
+    path: getAbsolutePath(navigationRoutes.fromChain),
     element: React.createElement(SelectChainPage, {
       type: "from",
       supportedChains: configs?.fromChains || 'all'
     })
   }, {
-    path: navigationRoutes.toChain,
+    path: getAbsolutePath(navigationRoutes.toChain),
     element: React.createElement(SelectChainPage, {
       type: "to",
       supportedChains: configs?.toChains || 'all'
     })
   }, {
-    path: navigationRoutes.fromToken + '/*',
+    path: getAbsolutePath(navigationRoutes.fromToken),
     element: React.createElement(SelectTokenPage, {
       type: "from",
       supportedTokens: configs?.fromTokens || 'all'
     })
   }, {
-    path: navigationRoutes.toToken,
+    path: getAbsolutePath(navigationRoutes.toToken),
     element: React.createElement(SelectTokenPage, {
       type: "to",
       supportedTokens: configs?.toTokens || 'all'
     })
   }, {
-    path: navigationRoutes.settings,
+    path: getAbsolutePath(navigationRoutes.settings),
     element: React.createElement(SettingsPage, {
       supportedSwappers: configs?.liquiditySources || 'all'
     })
   }, {
-    path: navigationRoutes.liquiditySources,
+    path: getAbsolutePath(navigationRoutes.liquiditySources),
     element: React.createElement(LiquiditySourcePage, {
       supportedSwappers: configs?.liquiditySources || 'all'
     })
   }, {
-    path: navigationRoutes.swaps,
+    path: getAbsolutePath(navigationRoutes.swaps),
     element: React.createElement(HistoryPage, null)
   }, {
     path: navigationRoutes.swapDetails,
     element: React.createElement(SwapDetailsPage, null)
   }, {
-    path: navigationRoutes.wallets,
+    path: getAbsolutePath(navigationRoutes.wallets),
     element: React.createElement(WalletsPage, {
       supportedWallets: configs?.wallets || 'all',
       multiWallets: typeof configs?.multiWallets === 'undefined' ? true : configs.multiWallets
     })
   }, {
-    path: navigationRoutes.confirmSwap,
+    path: getAbsolutePath(navigationRoutes.confirmSwap),
     element: React.createElement(ConfirmSwapPage, null)
-  }, {
-    path: navigationRoutes.confirmWallets,
-    element: React.createElement(ConfirmWalletsPage, null)
   }]);
 }
 
-const Header$1 = /*#__PURE__*/styled('div', {
+const Header = /*#__PURE__*/styled('div', {
   display: 'flex',
   width: '100%',
-  justifyContent: 'end'
+  justifyContent: 'end',
+  '.balance': {
+    display: 'flex'
+  }
 });
 const WalletImage = /*#__PURE__*/styled('img', {
   width: '$24',
@@ -2685,6 +3055,8 @@ function Layout(_ref) {
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const totalBalance = calculateWalletUsdValue(balances);
   const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
   const {
     t
   } = useTranslation();
@@ -2699,22 +3071,32 @@ function Layout(_ref) {
     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, {
+  useEffect(() => {
+    setToChain(null);
+    setFromChain(null);
+    setFromToken(null);
+    setToToken(null);
+  }, [configs?.fromChains, configs?.toChains, configs?.fromTokens, configs?.toTokens]);
+  return React.createElement(React.Fragment, null, React.createElement(Header, null, React.createElement(Button, {
     size: "small",
     suffix: React.createElement(AddWalletIcon, {
       size: 20
     }),
     variant: "ghost",
     flexContent: true,
+    loading: loadingMetaStatus === 'loading',
+    disabled: loadingMetaStatus === 'failed',
     onClick: () => {
       if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
     }
   }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React.createElement(WalletImage, {
     key: index,
     src: walletImage
-  })) : React.createElement(React.Fragment, null), React.createElement(Typography, {
+  })) : React.createElement(React.Fragment, null), React.createElement("div", {
+    className: "balance"
+  }, React.createElement(Typography, {
     variant: "body2"
-  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`))), React.createElement(AppRoutes, {
+  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React.createElement(Spinner, null)))), React.createElement(AppRoutes, {
     configs: configs
   }));
 }
@@ -2722,10 +3104,12 @@ function Layout(_ref) {
 const globalStyles = /*#__PURE__*/globalCss({
   '*': {
     '&::-webkit-scrollbar': {
-      width: '$8'
+      width: '$8',
+      height: '$8'
     },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400'
+      backgroundColor: '$neutrals400',
+      borderRadius: '$10'
     },
     '&::-webkit-scrollbar-thumb:hover': {
       backgroundColor: '$neutrals500'
@@ -2966,7 +3350,7 @@ function QueueManager(props) {
   };
   // TODO: this code copy & pasted from rango, should be refactored.
   const allBlockchains = blockchains.filter(blockchain => blockchain.enabled).reduce((blockchainsObj, blockchain) => (blockchainsObj[blockchain.name] = blockchain, blockchainsObj), {});
-  const evmBasedChains = blockchains.filter(isEvmBlockchain);
+  const evmBasedChains = blockchains.filter(isEvmBlockchain$1);
   const getSupportedChainNames = type => {
     const {
       supportedChains
@@ -2999,7 +3383,9 @@ function QueueManager(props) {
     //@ts-ignore
     queuesDefs: [swapQueueDef],
     context: context,
-    onPersistedDataLoaded: _manager => {},
+    onPersistedDataLoaded: manager => {
+      checkWaitingForNetworkChange(manager);
+    },
     isPaused: false
   }, props.children);
 }
@@ -3027,8 +3413,10 @@ const SwapBox = _ref => {
     changeLanguage
   } = useSelectLanguage();
   const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
-  const evmBasedChainNames = blockchains.filter(isEvmBlockchain).map(chain => chain.name);
-  const onUpdateState = (type, event, value, _, supportedChains) => {
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] = useState('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState();
+  const evmBasedChainNames = blockchains.filter(isEvmBlockchain$1).map(chain => chain.name);
+  const onUpdateState = (type, event, value, state, supportedChains) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
         const supportedChainNames = walletAndSupportedChainsNames(supportedChains);
@@ -3038,6 +3426,16 @@ const SwapBox = _ref => {
         disconnectWallet(type);
       }
     }
+    if (event === Events.ACCOUNTS && state.connected) {
+      const key = `${type}-${state.network}-${value}`;
+      if (state.connected) {
+        setLastConnectedWalletWithNetwork(key);
+      }
+    }
+    if (event === Events.NETWORK && state.network) {
+      const key = `${type}-${state.network}`;
+      setLastConnectedWalletWithNetwork(key);
+    }
   };
   let providers = allProviders();
   useEffect(() => {
@@ -3069,7 +3467,12 @@ const SwapBox = _ref => {
   }, React.createElement(AppRouter, {
     title: configs.title,
     titleSize: configs.titleSize,
-    titleWeight: configs.titleWeight
+    titleWeight: configs.titleWeight,
+    lastConnectedWallet: lastConnectedWalletWithNetwork,
+    disconnectedWallet: disconnectedWallet,
+    clearDisconnectedWallet: () => {
+      setDisconnectedWallet(undefined);
+    }
   }, React.createElement(Layout, {
     configs: configs
   }))))));