@rango-dev/widget-embedded 0.1.10-next.98 → 0.1.10

package/dist/widget-embedded.esm.js

@@ -1,22 +1,23 @@
-import { WalletState, Tooltip, Button, RetryIcon, HistoryIcon, SettingsIcon, styled, css, Typography, InfoCircleIcon, AngleDownIcon, TextField, VerticalSwapIcon, BestRoute, Alert, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Wallet, ConfirmWallets, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
+import { WalletState, InfoCircleIcon, AngleDownIcon, Typography, 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 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 i18n from 'i18next';
 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) {
@@ -405,7 +421,7 @@ function LimitErrorMessage(bestRoute) {
     recommendation
   };
 }
-function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath) {
+function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputIsZero) {
   if (loadingMetaStatus !== 'success') return {
     title: 'Connect Wallet',
     disabled: true
@@ -417,6 +433,9 @@ function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, has
   if (loading) return {
     title: 'Finding Best Route...',
     disabled: true
+  };else if (inputIsZero) return {
+    title: 'Enter an amount',
+    disabled: true
   };else if (!bestRoute) return {
     title: 'Swap',
     disabled: true
@@ -450,6 +469,7 @@ function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validat
     finishTime: null,
     requestId: bestRoute.requestId || '',
     inputAmount: inputAmount,
+    //@ts-ignore
     wallets,
     status: 'running',
     isPaused: false,
@@ -464,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];
@@ -549,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) {
@@ -566,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,
@@ -583,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;
 }
@@ -626,6 +649,65 @@ function getBalanceWarnings(route, selectedWallets) {
     return warningMessage;
   });
 }
+function calcOutputUsdValue(outputAmount, tokenPrice) {
+  const amount = !!outputAmount ? new BigNumber(outputAmount) : ZERO;
+  return amount.multipliedBy(tokenPrice || 0);
+}
+function isNetworkStatusInWarningState(pendingSwapStep) {
+  return !!pendingSwapStep && pendingSwapStep.networkStatus !== null && pendingSwapStep.networkStatus !== PendingSwapNetworkStatus.NetworkChanged;
+}
+function getSwapMessages(pendingSwap, currentStep) {
+  const textForRemove = 'bellow button or';
+  let message = pendingSwap.extraMessage;
+  let detailedMessage = pendingSwap.extraMessageDetail;
+  if (pendingSwap.networkStatusExtraMessageDetail?.includes(textForRemove)) {
+    pendingSwap.networkStatusExtraMessageDetail = pendingSwap.networkStatusExtraMessageDetail.replace(textForRemove, '');
+  }
+  const networkWarningState = isNetworkStatusInWarningState(currentStep);
+  if (networkWarningState) {
+    message = pendingSwap.networkStatusExtraMessage || '';
+    detailedMessage = pendingSwap.networkStatusExtraMessageDetail || '';
+    switch (currentStep?.networkStatus) {
+      case PendingSwapNetworkStatus.WaitingForConnectingWallet:
+        message = message || 'Waiting for connecting wallet';
+        break;
+      case PendingSwapNetworkStatus.WaitingForQueue:
+        message = message || 'Waiting for other running tasks to be finished';
+        break;
+      case PendingSwapNetworkStatus.WaitingForNetworkChange:
+        message = message || 'Waiting for changing wallet network';
+        break;
+    }
+  }
+  detailedMessage = detailedMessage || '';
+  message = message || '';
+  const isRpc = message?.indexOf('code') !== -1 && message?.indexOf('reason') !== -1;
+  return {
+    shortMessage: message,
+    detailedMessage: {
+      content: detailedMessage,
+      long: isRpc
+    }
+  };
+}
+function getLastConvertedTokenInFailedSwap(pendingSwap) {
+  let resultToken = null;
+  if (pendingSwap.status === 'failed') {
+    const lastSuccessStep = pendingSwap.steps.slice().reverse().filter(step => step.status === 'success')[0];
+    if (lastSuccessStep) {
+      resultToken = {
+        blockchain: lastSuccessStep.toBlockchain,
+        symbol: lastSuccessStep.toSymbol,
+        outputAmount: lastSuccessStep.outputAmount,
+        address: lastSuccessStep.toSymbolAddress
+      };
+    }
+  }
+  return resultToken;
+}
+function shouldRetrySwap(pendingSwap) {
+  return pendingSwap.status === 'failed' && !!pendingSwap.finishTime && new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000;
+}
 
 function searchParamsToToken(tokens, searchParams, chain) {
   if (!chain) return null;
@@ -663,22 +745,13 @@ function getRequiredBalanceOfWallet(selectedWallet, fee) {
   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
-    }
-  };
+  return !!currentParams.fromToken && !!currentParams.toToken && (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);
 }
+//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;
@@ -829,7 +902,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
       }
     });
     return {
-      selectedWallets: state.selectedWallets.concat(selectedWallets)
+      selectedWallets: selectedWallets
     };
   }),
   setSelectedWallet: wallet => set(state => ({
@@ -861,6 +934,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 => ({
@@ -880,9 +954,10 @@ 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 = new BigNumber(outputAmount || ZERO).multipliedBy(getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice || 0);
+      outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
     }
     return {
       bestRoute,
@@ -936,6 +1011,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
     toToken: token
   })),
   setInputAmount: amount => {
+    console.log(amount, typeof amount);
     set(state => ({
       inputAmount: amount,
       ...(!amount && {
@@ -947,6 +1023,47 @@ 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
+    });
   }
 }))));
 const bestRoute = (bestRouteStore, settingsStore) => {
@@ -962,12 +1079,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,
@@ -992,13 +1109,36 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       });
     });
   };
+  const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
+  const bestRouteParamsListener = () => {
+    const {
+      fromToken,
+      toToken,
+      inputAmount,
+      inputUsdValue
+    } = useBestRouteStore.getState();
+    if (!inputAmount || inputAmount === '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), {
+  }), bestRouteParamsListener, {
     equalityFn: (prevState, state) => {
       if (isRouteParametersChanged(prevState, state)) return false;else return true;
     }
@@ -1007,7 +1147,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     slippage: state.slippage,
     customSlippage: state.customSlippage,
     disabledLiquiditySources: state.disabledLiquiditySources
-  }), fetchBestRoute.bind(null), {
+  }), bestRouteParamsListener, {
     equalityFn: (prevState, state) => {
       if (isRouteParametersChanged(prevState, state)) return false;else return true;
     }
@@ -1032,11 +1172,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
   })
 })));
 
@@ -1077,7 +1221,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];
@@ -1170,67 +1314,6 @@ 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: "Retry"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: onClickRefresh
-  }, React.createElement(RetryIcon, {
-    size: 28
-  }))), 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) {
-  const {
-    onClickRefresh,
-    title,
-    titleSize,
-    titleWeight
-  } = 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
-  }));
-}
-
 const Box = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -1238,13 +1321,42 @@ const Box = /*#__PURE__*/styled('div', {
 });
 const Container = /*#__PURE__*/styled('div', {
   boxSizing: 'border-box',
-  backgroundColor: '$neutrals300',
   borderRadius: '$5',
-  padding: '$8 0',
+  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: '$8 $16'
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    },
+    '.amount': {
+      width: '30%'
+    }
   }
 });
 const StyledImage = /*#__PURE__*/styled('img', {
@@ -1254,7 +1366,10 @@ const StyledImage = /*#__PURE__*/styled('img', {
 const Options = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
-  padding: '0 $8'
+  '.balance': {
+    display: 'flex',
+    alignItems: 'center'
+  }
 });
 const ImagePlaceholder = /*#__PURE__*/styled('span', {
   width: '24px',
@@ -1263,10 +1378,9 @@ const ImagePlaceholder = /*#__PURE__*/styled('span', {
   borderRadius: '99999px'
 });
 const OutputContainer = /*#__PURE__*/styled('div', {
+  windth: '100%',
   height: '$48',
   borderRadius: '$5',
-  flexGrow: 1,
-  width: '70%',
   backgroundColor: '$background',
   border: '1px solid transparent',
   position: 'relative',
@@ -1306,21 +1420,34 @@ function TokenInfo(props) {
     color: "error",
     size: 24
   }), React.createElement(AngleDownIcon, null));
-  return React.createElement(Box, null, React.createElement("div", null, React.createElement(Typography, {
-    variant: "body2"
-  }, t(type))), React.createElement(Container, null, props.type === 'From' && React.createElement(Options, null, React.createElement("div", {
+  return React.createElement(Box, null, React.createElement(Container, {
+    type: props.type === 'From' ? 'filled' : 'outlined'
+  }, React.createElement("div", {
+    className: "head"
+  }, React.createElement(Typography, {
+    variant: "body2",
+    color: "neutrals800"
+  }, t(type)), props.type === 'From' ? React.createElement(Options, null, React.createElement("div", {
     className: "balance",
     onClick: () => {
       if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
     }
-  }, React.createElement(Button, {
-    variant: "ghost",
-    size: "small"
   }, React.createElement(Typography, {
-    variant: "body2"
-  }, `${t('Max')}: ${tokenBalance} ${fromToken?.symbol || ''}`)))), React.createElement("div", {
+    variant: "body3",
+    color: "neutrals600"
+  }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React.createElement(Spacer, {
+    size: 4
+  }), React.createElement(Button, {
+    type: "primary",
+    variant: "ghost",
+    size: "compact"
+  }, t('Max')))) : React.createElement(Typography, {
+    variant: "caption",
+    color: "neutrals600"
+  }, `$${numberToString(props.outputUsdValue)}`)), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
+    className: "selectors",
     onClick: () => {
       navigate(`/${props.type.toLowerCase()}-chain`);
     },
@@ -1332,11 +1459,11 @@ function TokenInfo(props) {
     }) : React.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     align: "start",
-    size: "large",
-    style: {
-      marginRight: '.5rem'
-    }
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Button, {
+    size: "large"
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement(Button, {
+    className: "selectors",
     onClick: () => {
       navigate(`/${props.type.toLowerCase()}-token`);
     },
@@ -1348,17 +1475,17 @@ function TokenInfo(props) {
     }) : React.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     size: "large",
-    align: "start",
-    style: {
-      marginRight: '.5rem'
-    }
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), props.type === 'From' ? React.createElement(TextField, {
+    align: "start"
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement("div", {
+    className: "amount"
+  }, props.type === 'From' ? React.createElement(TextField, {
     type: "number",
     size: "large",
     autoFocus: true,
     placeholder: "0",
     style: {
-      width: '70%',
       position: 'relative',
       backgroundColor: '$background !important'
     },
@@ -1369,23 +1496,16 @@ function TokenInfo(props) {
         bottom: '2px'
       }
     }, React.createElement(Typography, {
-      variant: "caption"
+      variant: "caption",
+      color: "neutrals800"
     }, `$${numberToString(inputUsdValue)}`)),
     value: props.inputAmount || '',
     onChange: props.type === 'From' ? event => {
       props.onAmountChange(event.target.value);
     } : undefined
   }) : React.createElement(OutputContainer, null, React.createElement(Typography, {
-    variant: "body1"
-  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'), React.createElement("span", {
-    style: {
-      position: 'absolute',
-      right: '4px',
-      bottom: '2px'
-    }
-  }, React.createElement(Typography, {
-    variant: "caption"
-  }, `$${numberToString(props.outputUsdValue)}`))))));
+    variant: "h4"
+  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'))))));
 }
 
 const Container$1 = /*#__PURE__*/styled$1('div', {
@@ -1481,18 +1601,52 @@ 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',
-  justifyContent: 'center',
-  alignItems: 'center'
+  flexDirection: 'column'
 });
-const SwitchButtonContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+const FromContainer = /*#__PURE__*/styled('div', {
   position: 'relative',
-  top: '11px'
+  paddingBottom: '$12'
+});
+const SwitchButtonContainer = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)'
 });
 const BestRouteContainer = /*#__PURE__*/styled('div', {
   width: '100%',
@@ -1504,11 +1658,8 @@ const Alerts = /*#__PURE__*/styled('div', {
 });
 function Home(props) {
   const {
-    title = 'SWAP',
-    titleSize = 18,
-    titleWeight = 600
+    title = 'SWAP'
   } = props;
-  const waningMessage = '';
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
   const [count, setCount] = useState(0);
@@ -1531,6 +1682,7 @@ function Home(props) {
   const bestRouteError = useBestRouteStore.use.error();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
+  const setCurrentPage = useUiStore.use.setCurrentPage();
   const swithFromAndTo = () => {
     setFromChain(toChain);
     setFromToken(toToken);
@@ -1550,15 +1702,20 @@ function Home(props) {
     swap
   } = LimitErrorMessage(bestRoute);
   const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
-  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath);
+  const inputIsZero = inputAmount === '0';
+  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
-  }), React.createElement(TokenInfo, {
+    suffix: React.createElement(HeaderButtons, {
+      onClickRefresh: !!bestRoute ? fetchBestRoute : undefined
+    })
+  }), React.createElement(FromContainer, null, React.createElement(TokenInfo, {
     type: "From",
     chain: fromChain,
     token: fromToken,
@@ -1568,14 +1725,14 @@ function Home(props) {
     variant: "ghost",
     onClick: swithFromAndTo
   }, React.createElement(VerticalSwapIcon, {
-    size: 36
+    size: 32
   }), isRouterInContext && React.createElement(SwithFromAndTo, {
     count: count
-  }))), React.createElement(TokenInfo, {
+  })))), React.createElement(TokenInfo, {
     type: "To",
     chain: toChain,
     token: toToken,
-    outputAmount: outputAmount,
+    outputAmount: outputAmount ? new BigNumber(outputAmount) : new BigNumber(0),
     outputUsdValue: outputUsdValue
   }), showBestRoute && React.createElement(BestRouteContainer, null, React.createElement(BestRoute, {
     error: bestRouteError,
@@ -1584,11 +1741,9 @@ function Home(props) {
     totalFee: numberToString(totalFeeInUsd, 0, 2),
     feeWarning: highFee,
     totalTime: secondsToString(totalArrivalTime(bestRoute))
-  })), (errorMessage || waningMessage || hasLimitError(bestRoute)) && React.createElement(Alerts, null, errorMessage && React.createElement(Alert, {
+  })), (errorMessage || hasLimitError(bestRoute)) && React.createElement(Alerts, null, errorMessage && React.createElement(Alert, {
     type: "error"
-  }, React.createElement(Typography, {
-    variant: "body2"
-  }, errorMessage)), hasLimitError(bestRoute) && React.createElement(Alert, {
+  }, errorMessage), hasLimitError(bestRoute) && React.createElement(Alert, {
     type: "error",
     title: `${swap?.swapperId} Limit`
   }, React.createElement(React.Fragment, null, React.createElement(Typography, {
@@ -1597,14 +1752,14 @@ function Home(props) {
     variant: "body2"
   }, "Yours: ", numberToString(swap?.fromAmount || null), swap?.from.symbol), React.createElement("br", null), React.createElement(Typography, {
     variant: "body2"
-  }, recommendation))), waningMessage ), React.createElement(Footer, null, React.createElement(Button, {
+  }, recommendation)))), React.createElement(Footer, null, React.createElement(Button, {
     type: "primary",
     align: "grow",
     size: "large",
     disabled: swapButtonState.disabled,
     onClick: () => {
       if (swapButtonState.title === 'Connect Wallet') navigate(navigationRoutes.wallets);else {
-        navigate(navigationRoutes.confirmWallets, {
+        navigate(navigationRoutes.confirmSwap, {
           replace: true
         });
       }
@@ -1621,12 +1776,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) {
@@ -1636,56 +1791,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));
-}
-
-const StyledButton = /*#__PURE__*/styled(Button, {
-  marginTop: '$8'
-});
-function ChangeSlippageButton() {
-  const navigate = useNavigate();
-  return React.createElement(StyledButton, {
-    type: "primary",
-    variant: "contained",
-    size: "small",
-    onClick: () => navigate(navigationRoutes.settings)
-  }, "Change Slippage");
-}
-
-function HighSlippageWarning(props) {
-  const {
-    selectedSlippage
-  } = props;
-  return React.createElement(Alert, {
-    type: "warning"
-  }, React.createElement(Typography, {
-    variant: "body2"
-  }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.", React.createElement(ChangeSlippageButton, null)));
-}
-
-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
       });
     }
   };
@@ -1694,122 +1827,192 @@ 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 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'
+      }
     }
-  });
-}
-
-const List = /*#__PURE__*/styled('ul', {
-  variants: {
-    showListStyle: {
-      true: {
-        paddingLeft: '$24'
+  },
+  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 ListItem = /*#__PURE__*/styled('li', {
-  variants: {
-    showListStyle: {
-      true: {
-        listStyleType: 'disc',
-        listStylePosition: 'outside'
-      }
-    }
-  }
+const StyledImage$1 = /*#__PURE__*/styled('img', {
+  width: '$24',
+  maxHeight: '$24'
 });
-const Message = /*#__PURE__*/styled(Typography, {
-  display: 'block'
+const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px'
 });
-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 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), props.usdValue && 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))))));
 }
 
-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();
@@ -1850,6 +2053,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;
@@ -1912,6 +2116,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;
@@ -1941,31 +2146,196 @@ function useConfirmSwap() {
   };
 }
 
+function ChangeSlippageButton() {
+  const navigate = useNavigate();
+  return React.createElement(Button, {
+    type: "primary",
+    variant: "outlined",
+    size: "small",
+    onClick: () => navigate(navigationRoutes.settings)
+  }, "Change Slippage");
+}
+
+const StyledMessage = /*#__PURE__*/styled(Typography, {
+  color: '$error500 !important'
+});
+function MinRequiredSlippage(_ref) {
+  let {
+    minRequiredSlippage
+  } = _ref;
+  return React.createElement(StyledMessage, {
+    variant: "body2"
+  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React.createElement(Spacer, {
+    size: 8,
+    direction: "vertical"
+  }), React.createElement(ChangeSlippageButton, null));
+}
+
+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 setSelectedSwap = useUiStore.use.setSelectedSwap();
+  const navigate = useNavigate();
   const {
     navigateBackFrom
   } = useNavigateBack();
-  const {
-    manager
-  } = useManager();
-  const navigate = useNavigate();
   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 selectedSlippage = customSlippage || slippage;
+  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) {
@@ -1981,16 +2351,51 @@ function ConfirmSwapPage() {
         }
       });
     },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
-    bestRoute: getBestRouteWithCalculatedFees(bestRoute, tokens),
+    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: 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: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
+      amount: toAmount,
+      label: t('To'),
+      loadingStatus: bestRouteloadingStatus
+    })),
+    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!',
-    confirmButtonDisabled: fetchingBestRoute
+    confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!'
   });
 }
 
@@ -2008,6 +2413,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();
@@ -2023,16 +2453,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)
   });
@@ -2043,6 +2471,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();
@@ -2068,7 +2497,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
   });
 }
 
@@ -2111,11 +2541,11 @@ function SelectTokenPage(props) {
   const destinationTokens = useBestRouteStore.use.destinationTokens();
   const supportedSourceTokens = supportedTokens === 'all' ? sourceTokens : sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
   const supportedDestinationTokens = supportedTokens === 'all' ? destinationTokens : destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
-  console.log(supportedSourceTokens);
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToToken = useBestRouteStore.use.setToToken();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   return React.createElement(TokenSelector, {
     type: type === 'from' ? 'Source' : 'Destination',
     list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
@@ -2124,7 +2554,8 @@ function SelectTokenPage(props) {
       if (type === 'from') setFromToken(token);else setToToken(token);
       navigateBackFrom(navigationRoutes.fromToken);
     },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken)
+    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken),
+    loadingStatus: loadingMetaStatus
   });
 }
 
@@ -2146,6 +2577,7 @@ function SettingsPage(_ref) {
   } = useNavigateBack();
   const infiniteApprove = useSettingsStore.use.infiniteApprove();
   const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const uniqueSwappersGroups = [];
   removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
     return swappers.find(s => s.swapperGroup === swapperGroup);
@@ -2178,7 +2610,8 @@ function SettingsPage(_ref) {
     selectedTheme: theme,
     onThemeChange: setTheme,
     infiniteApprove: infiniteApprove,
-    toggleInfiniteApprove: toggleInfiniteApprove
+    toggleInfiniteApprove: toggleInfiniteApprove,
+    loadingStatus: loadingMetaStatus
   });
 }
 
@@ -2186,9 +2619,16 @@ const ListContainer = /*#__PURE__*/styled('div', {
   display: 'grid',
   gap: '.5rem',
   gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
-  height: '450px',
   alignContent: 'baseline',
-  padding: '0 0.5rem'
+  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'
@@ -2208,10 +2648,12 @@ function WalletsPage(_ref) {
     connect
   } = useWallets();
   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();
@@ -2231,71 +2673,38 @@ function WalletsPage(_ref) {
       setWalletErrorMessage('Error: ' + e?.message);
     }
   };
+  const disconnectConnectingWallets = () => {
+    const connectingWallets = walletsRef.current?.filter(wallet => wallet.state === WalletState.CONNECTING) || [];
+    for (const wallet of connectingWallets) {
+      disconnect(wallet.type);
+    }
+  };
   useEffect(() => {
     toggleConnectWalletsButton();
-    return () => toggleConnectWalletsButton();
+    return () => {
+      disconnectConnectingWallets();
+      toggleConnectWalletsButton();
+    };
   }, []);
+  useEffect(() => {
+    walletsRef.current = wallets;
+  }, [wallets]);
   return React.createElement(SecondaryPage, {
     title: t('Select Wallet') || '',
     textField: false,
     onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
   }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
     type: "error"
-  }, React.createElement(Typography, {
-    variant: "body2"
-  }, walletErrorMessage))), React.createElement(ListContainer, null, sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
+  }, 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 ConfirmWalletsPage() {
-  const navigate = useNavigate();
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-  const {
-    blockchains
-  } = useMetaStore.use.meta();
-  const accounts = useWalletsStore.use.accounts();
-  const selectedWallets = useWalletsStore.use.selectedWallets();
-  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
-  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
-  const {
-    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);
-  useEffect(() => {
-    initSelectedWallets();
-  }, []);
-  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
-  const handleConnectChain = wallet => {
-    const network = wallet;
-    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
-  };
-  return React.createElement(ConfirmWallets, {
-    requiredWallets: getRequiredChains(bestRoute),
-    selectableWallets: selectableWallets,
-    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmWallets),
-    swap: bestRoute,
-    fromAmount: fromAmount,
-    toAmount: toAmount,
-    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
-  });
-}
-
 function useCopyToClipboard(resetInterval) {
   const [isCopied, setCopied] = React.useState(false);
   const handleCopy = React.useCallback(text => {
@@ -2314,15 +2723,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 {
@@ -2330,92 +2811,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',
@@ -2445,6 +2995,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();
@@ -2459,22 +3011,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
   }));
 }
@@ -2482,10 +3044,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'
@@ -2497,7 +3061,7 @@ const globalStyles = /*#__PURE__*/globalCss({
 });
 const globalFont = fontFamily => globalCss({
   '@import': ["url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')", "url('https://fonts.cdnfonts.com/css/times-new-roman')"],
-  [`.font_${fontFamily.replace(/ /g, '')} ._text`]: {
+  body: {
     fontFamily
   }
 })();
@@ -2523,16 +3087,16 @@ function useTheme(_ref) {
     warning = '#F5A623',
     success = '#0070F3',
     fontFamily = 'Robot',
-    borderRadius = 5
+    borderRadius = 8
   } = _ref;
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const colors = {
     neutrals200: '#FAFAFA',
-    neutrals300: '#EAEAEA',
-    neutrals400: '#999999',
-    neutrals500: '#888888',
-    neutrals600: '#666666',
+    neutrals300: '#f2f2f2',
+    neutrals400: '#dedede',
+    neutrals500: '#cccccc',
+    neutrals600: '#acacac',
     neutrals700: '#444444',
     neutrals800: '#333333',
     neutrals900: '#111111',
@@ -2576,10 +3140,10 @@ function useTheme(_ref) {
       neutrals200: '#111111',
       neutrals300: '#333333',
       neutrals400: '#444444',
-      neutrals500: '#666666',
-      neutrals600: '#888888',
-      neutrals700: '#999999',
-      neutrals800: '#EAEAEA',
+      neutrals500: '#acacac',
+      neutrals600: '#cccccc',
+      neutrals700: '#dedede',
+      neutrals800: '#f2f2f2',
       neutrals900: '#FAFAFA',
       foreground: background,
       background: foreground
@@ -2639,8 +3203,9 @@ function useSelectLanguage() {
 }
 
 var swap = "SWAP";
-var From = "From";
-var To = "To";
+var From = "You sell";
+var To = "You receive";
+var Balance = "Balance";
 var Max = "Max";
 var Chain = "Chain";
 var Token = "Token";
@@ -2652,12 +3217,13 @@ var en = {
 	"Powered By": "Powered By",
 	From: From,
 	To: To,
+	Balance: Balance,
 	Max: Max,
 	Chain: Chain,
 	Token: Token,
 	Source: Source,
 	Destination: Destination,
-	"Select Wallet": "Select Wallet"
+	"Select Wallet": "Connect Your Wallet"
 };
 
 var swap$1 = "TAKAS";
@@ -2724,7 +3290,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
@@ -2757,7 +3323,9 @@ function QueueManager(props) {
     //@ts-ignore
     queuesDefs: [swapQueueDef],
     context: context,
-    onPersistedDataLoaded: _manager => {},
+    onPersistedDataLoaded: manager => {
+      checkWaitingForNetworkChange(manager);
+    },
     isPaused: false
   }, props.children);
 }
@@ -2785,8 +3353,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);
@@ -2796,6 +3366,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(() => {
@@ -2827,7 +3407,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
   }))))));