@rango-dev/widget-embedded 0.1.13-next.0 → 0.1.13-next.5

package/dist/widget-embedded.esm.js

@@ -1,9 +1,9 @@
-import { WalletState, Typography, InfoCircleIcon, AngleDownIcon, Spacer, Button, Image, 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, useMemo } from 'react';
-import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
+import { WalletState, InfoCircleIcon, Typography, Button, Image, Spacer, styled, ChevronRightIcon, GasIcon, Alert, ConfirmSwap, LoadingFailedAlert, History, AngleDownIcon, TextField, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, Wallet, useCopyToClipboard, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
+import React, { useRef, useEffect, Fragment, useState, useLayoutEffect, useMemo } from 'react';
+import { useInRouterContext, MemoryRouter } from 'react-router';
 import { PendingSwapNetworkStatus, useQueueManager, calculatePendingSwap, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, makeQueueDefinition, 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 { useSearchParams, useLocation, createSearchParams, useInRouterContext as useInRouterContext$1, useNavigate, useRoutes } from 'react-router-dom';
 import { create } from 'zustand';
 import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
@@ -12,30 +12,15 @@ import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, detectInstallLink, Wal
 export { WalletType } from '@rango-dev/wallets-shared';
 import { readAccountAddress, useWallets, Provider as Provider$1, Events } from '@rango-dev/wallets-core';
 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 { useTranslation, initReactI18next } from 'react-i18next';
 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 { styled as styled$1 } from '@rango-dev/ui/src/theme';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
-const navigationRoutes = {
-  home: '/',
-  fromChain: '/from-chain',
-  fromToken: '/from-token',
-  toChain: '/to-chain',
-  toToken: '/to-token',
-  settings: '/settings',
-  liquiditySources: '/settings/liquidity-sources',
-  swaps: '/swaps',
-  wallets: '/wallets',
-  confirmSwap: '/confirm-swap',
-  swapDetails: '/swaps/:requestId'
-};
-
 const ZERO = /*#__PURE__*/new BigNumber(0);
 
 function removeDuplicateFrom(array) {
@@ -91,7 +76,7 @@ const numberToString = function (number, minDecimals, maxDecimals) {
   if (maxDecimals === void 0) {
     maxDecimals = null;
   }
-  if (number === null) return '';
+  if (number === null || number === undefined) return '';
   if (number === '') return '';
   const n = new BigNumber$1(number);
   const roundingMode = 1;
@@ -112,12 +97,6 @@ const numberToString = function (number, minDecimals, maxDecimals) {
   return n.toFormat(Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))), roundingMode);
 };
 const totalArrivalTime = data => data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
-const decimalNumber = function (number, toFixed) {
-  if (number === void 0) {
-    number = '0';
-  }
-  return parseFloat(number).toFixed(toFixed);
-};
 const isPositiveNumber = text => !!text && parseFloat(text) > 0;
 
 function searchParamsToToken(tokens, searchParams, chain) {
@@ -838,12 +817,12 @@ function shouldRetrySwap(pendingSwap) {
   return pendingSwap.status === 'failed' && !!pendingSwap.finishTime && new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000;
 }
 
-const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
+const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector((set, get) => ({
   accounts: [],
   balances: [],
   selectedWallets: [],
   connectWallet: accounts => {
-    const tokens = useMetaStore.getState().meta.tokens;
+    const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
     set(state => ({
       accounts: state.accounts.concat(accounts),
       balances: state.balances.concat(accounts.map(account => ({
@@ -856,28 +835,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
         explorerUrl: null
       })))
     }));
-    accounts.forEach(async account => {
-      try {
-        const response = await httpService().getWalletsDetails([{
-          address: account.address,
-          blockchain: account.chain
-        }]);
-        const retrivedBalance = response.wallets[0];
-        if (retrivedBalance) {
-          set(state => ({
-            balances: state.balances.map(balance => {
-              return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
-            })
-          }));
-        } else throw new Error('Wallet not found');
-      } catch (error) {
-        set(state => ({
-          balances: state.balances.map(balance => {
-            return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
-          })
-        }));
-      }
-    });
+    accounts.forEach(async account => getOneOfWalletsDetails(account));
   },
   disconnectWallet: walletType => {
     set(state => ({
@@ -916,7 +874,38 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
     accounts: [],
     balances: [],
     selectedWallets: []
-  }))
+  })),
+  getOneOfWalletsDetails: async account => {
+    const tokens = useMetaStore.getState().meta.tokens;
+    set(state => ({
+      balances: state.balances.map(balance => {
+        return balance.address === account.address && balance.chain === account.chain ? {
+          ...balance,
+          loading: true
+        } : balance;
+      })
+    }));
+    try {
+      const response = await httpService().getWalletsDetails([{
+        address: account.address,
+        blockchain: account.chain
+      }]);
+      const retrivedBalance = response.wallets[0];
+      if (retrivedBalance) {
+        set(state => ({
+          balances: state.balances.map(balance => {
+            return isAccountAndBalanceMatched(account, balance) ? makeBalanceFor(account, retrivedBalance, tokens) : balance;
+          })
+        }));
+      } else throw new Error('Wallet not found');
+    } catch (error) {
+      set(state => ({
+        balances: state.balances.map(balance => {
+          return isAccountAndBalanceMatched(account, balance) ? resetBalanceState(balance) : balance;
+        })
+      }));
+    }
+  }
 }))));
 useWalletsStore.subscribe(state => state.balances, balances => {
   useBestRouteStore.setState(_ref => {
@@ -967,6 +956,13 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       })
     };
   }),
+  resetRoute: () => set(() => ({
+    loading: true,
+    error: '',
+    bestRoute: null,
+    outputAmount: null,
+    outputUsdValue: new BigNumber(0)
+  })),
   setFromChain: (chain, setDefaultToken) => {
     set(state => {
       if (state.fromChain?.name === chain?.name) return {};
@@ -1016,7 +1012,8 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       ...(!amount && {
         outputAmount: new BigNumber(0),
         outputUsdValue: new BigNumber(0),
-        bestRoute: null
+        bestRoute: null,
+        error: ''
       }),
       ...(!!state.fromToken && {
         inputUsdValue: getUsdValue(state.fromToken, amount)
@@ -1081,7 +1078,8 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     const {
       fromToken,
       toToken,
-      inputAmount
+      inputAmount,
+      resetRoute
     } = bestRouteStore.getState();
     const {
       slippage,
@@ -1094,12 +1092,9 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
     const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, affiliateRef);
-    if (!bestRouteStore.getState().loading) bestRouteStore.setState({
-      loading: true,
-      bestRoute: null,
-      outputAmount: null,
-      outputUsdValue: new BigNumber(0)
-    });
+    if (!bestRouteStore.getState().loading) {
+      resetRoute();
+    }
     httpService().getBestRoute(requestBody, {
       signal: abortController.signal
     }).then(res => {
@@ -1125,7 +1120,8 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       fromToken,
       toToken,
       inputAmount,
-      inputUsdValue
+      inputUsdValue,
+      resetRoute
     } = useBestRouteStore.getState();
     if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0)) return bestRouteStore.setState({
       loading: false
@@ -1136,12 +1132,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       outputAmount: new BigNumber(inputAmount),
       outputUsdValue: inputUsdValue
     });
-    if (!bestRouteStore.getState().loading) bestRouteStore.setState({
-      loading: true,
-      bestRoute: null,
-      outputAmount: null,
-      outputUsdValue: new BigNumber(0)
-    });
+    if (!bestRouteStore.getState().loading) resetRoute();
     debouncedFetchBestRoute();
   };
   useBestRouteStore.subscribe(state => ({
@@ -1190,6 +1181,20 @@ var SearchParams;
   SearchParams["FROM_AMOUNT"] = "fromAmount";
 })(SearchParams || (SearchParams = {}));
 
+const navigationRoutes = {
+  home: '/',
+  fromChain: 'from-chain',
+  fromToken: 'from-token',
+  toChain: 'to-chain',
+  toToken: 'to-token',
+  settings: 'settings',
+  liquiditySources: '/settings/liquidity-sources',
+  swaps: 'swaps',
+  wallets: 'wallets',
+  confirmSwap: 'confirm-swap',
+  swapDetails: 'swaps/:requestId'
+};
+
 const useUiStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
   connectWalletsButtonDisabled: false,
   selectedSwapRequestId: null,
@@ -1237,37 +1242,6 @@ function UpdateUrl() {
     if (requestId) setSelectedSwap(requestId);
   }, []);
   useEffect(() => {
-    let fromChainString = '',
-      fromTokenString = '',
-      toChainString = '',
-      toTokenString = '',
-      fromAmount = '';
-    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];
-      toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
-      fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
-      setSearchParams({
-        ...(fromChainString && {
-          [SearchParams.FROM_CHAIN]: fromChainString
-        }),
-        ...(fromTokenString && {
-          [SearchParams.FROM_TOKEN]: fromTokenString
-        }),
-        ...(toChainString && {
-          [SearchParams.TO_CHAIN]: toChainString
-        }),
-        ...(toTokenString && {
-          [SearchParams.TO_TOKEN]: toTokenString
-        }),
-        ...(fromAmount && {
-          [SearchParams.FROM_AMOUNT]: fromAmount.toString()
-        })
-      }, {
-        replace: true
-      });
-    }
     if (!firstRender.current) {
       let fromChainString = '',
         fromTokenString = '',
@@ -1279,7 +1253,7 @@ function UpdateUrl() {
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
         toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
         toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
-        fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
+        fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
       } else {
         if (location.state === 'redirect') return;
         fromChainString = fromChain?.name || '';
@@ -1287,29 +1261,29 @@ function UpdateUrl() {
         toChainString = toChain?.name || '';
         toTokenString = (toToken?.symbol || '') + (toToken?.address ? `--${toToken?.address}` : '');
         fromAmount = inputAmount;
-        setSearchParams({
-          ...(fromChainString && {
-            [SearchParams.FROM_CHAIN]: fromChainString
-          }),
-          ...(fromTokenString && {
-            [SearchParams.FROM_TOKEN]: fromTokenString
-          }),
-          ...(toChainString && {
-            [SearchParams.TO_CHAIN]: toChainString
-          }),
-          ...(toTokenString && {
-            [SearchParams.TO_TOKEN]: toTokenString
-          }),
-          ...(fromAmount && {
-            [SearchParams.FROM_AMOUNT]: fromAmount.toString()
-          })
-        }, {
-          replace: true
-        });
       }
+      setSearchParams({
+        ...(fromChainString && {
+          [SearchParams.FROM_CHAIN]: fromChainString
+        }),
+        ...(fromTokenString && {
+          [SearchParams.FROM_TOKEN]: fromTokenString
+        }),
+        ...(toChainString && {
+          [SearchParams.TO_CHAIN]: toChainString
+        }),
+        ...(toTokenString && {
+          [SearchParams.TO_TOKEN]: toTokenString
+        }),
+        ...(fromAmount && {
+          [SearchParams.FROM_AMOUNT]: fromAmount.toString()
+        })
+      }, {
+        replace: true
+      });
     }
     firstRender.current = false;
-  }, [location.pathname, inputAmount]);
+  }, [location.pathname, inputAmount, fromChain, fromToken, toChain, toToken]);
   useEffect(() => {
     if (loadingStatus === 'success') {
       const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
@@ -1335,24 +1309,52 @@ function UpdateUrl() {
   return null;
 }
 
-function PercentageChange(props) {
+function AppRouter(_ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const isRouterInContext = useInRouterContext();
+  const Router = isRouterInContext ? Fragment : MemoryRouter;
   const {
-    inputUsdValue,
-    outputUsdValue
-  } = props;
-  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)}%)`));
+    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, null, children), isRouterInContext && React.createElement(UpdateUrl, null));
+}
+
+function useNavigateBack() {
+  const isRouterInContext = useInRouterContext$1();
+  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.confirmSwap].includes(currentRoute)) navigate(navigationRoutes.home, {
+        replace: true
+      });else if (currentRoute === navigationRoutes.liquiditySources) navigate('/' + navigationRoutes.settings, {
+        replace: true
+      });
+    }
+  };
+  return {
+    navigateBackFrom
+  };
 }
 
 const Box = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
-  width: '100%'
+  width: '100%',
+  overflow: 'hidden'
 });
 const Container = /*#__PURE__*/styled('div', {
   boxSizing: 'border-box',
@@ -1375,7 +1377,10 @@ const Container = /*#__PURE__*/styled('div', {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    minHeight: '32px'
+    minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8'
+    }
   },
   '.form': {
     display: 'flex',
@@ -1392,21 +1397,6 @@ const Container = /*#__PURE__*/styled('div', {
     '.amount': {
       width: '30%'
     }
-  },
-  '.output-usd': {
-    display: 'flex',
-    div: {
-      display: 'flex',
-      paddingLeft: '$8'
-    }
-  }
-});
-const Options = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'flex-end',
-  '.balance': {
-    display: 'flex',
-    alignItems: 'center'
   }
 });
 const ImagePlaceholder = /*#__PURE__*/styled('span', {
@@ -1427,28 +1417,16 @@ const OutputContainer = /*#__PURE__*/styled('div', {
   paddingLeft: '$8',
   paddingRight: '$8'
 });
-function TokenInfo(props) {
+function TokenPreview(props) {
   const {
-    type,
     chain,
-    token
+    token,
+    loadingStatus,
+    percentageChange
   } = props;
-  const loadingStatus = useMetaStore.use.loadingStatus();
-  const fromChain = useBestRouteStore.use.fromChain();
-  const toChain = useBestRouteStore.use.toChain();
-  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
-  const fromToken = useBestRouteStore.use.fromToken();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-  const inputAmount = useBestRouteStore.use.inputAmount();
-  const balances = useWalletsStore.use.balances();
-  const fetchingBestRoute = useBestRouteStore.use.loading();
-  const navigate = useNavigate();
   const {
     t
   } = useTranslation();
-  const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
-  const tokenBalanceReal = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.decimal) : '0';
   const ItemSuffix = React.createElement("div", {
     style: {
       display: 'flex',
@@ -1458,45 +1436,23 @@ function TokenInfo(props) {
   }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
     color: "error",
     size: 24
-  }), React.createElement(AngleDownIcon, null));
+  }));
   return React.createElement(Box, null, React.createElement(Container, {
-    type: props.type === 'From' ? 'filled' : 'outlined'
+    type: '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(Typography, {
-    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("div", {
-    className: "output-usd"
-  }, React.createElement(PercentageChange, {
-    inputUsdValue: inputUsdValue,
-    outputUsdValue: props.outputUsdValue
-  }), React.createElement("div", null, React.createElement(Typography, {
+  }, props.label), React.createElement("div", null, percentageChange, props.usdValue && React.createElement(Typography, {
     variant: "caption",
-    color: "neutrals600"
-  }, `$${numberToString(props.outputUsdValue)}`)))), React.createElement("div", {
+    color: "neutrals600",
+    className: "usd-value"
+  }, `$${numberToString(props.usdValue)}`))), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
     className: "selectors",
-    onClick: () => {
-      navigate(`/${props.type.toLowerCase()}-chain`);
-    },
     variant: "outlined",
-    disabled: loadingStatus === 'failed',
     loading: loadingStatus === 'loading',
     prefix: loadingStatus === 'success' && chain ? React.createElement(Image, {
       src: chain.logo,
@@ -1509,11 +1465,7 @@ function TokenInfo(props) {
     size: 12
   }), React.createElement(Button, {
     className: "selectors",
-    onClick: () => {
-      navigate(`/${props.type.toLowerCase()}-token`);
-    },
     variant: "outlined",
-    disabled: loadingStatus === 'failed' || type === 'From' && !fromChain || type === 'To' && !toChain,
     loading: loadingStatus === 'loading',
     prefix: loadingStatus === 'success' && token ? React.createElement(Image, {
       src: token.image,
@@ -1526,983 +1478,998 @@ function TokenInfo(props) {
     size: 12
   }), React.createElement("div", {
     className: "amount"
-  }, props.type === 'From' ? React.createElement(TextField, {
-    type: "number",
-    size: "large",
-    autoFocus: true,
-    placeholder: "0",
-    style: {
-      position: 'relative',
-      backgroundColor: '$background !important'
-    },
-    suffix: React.createElement("span", {
-      style: {
-        position: 'absolute',
-        right: '4px',
-        bottom: '2px'
-      }
-    }, React.createElement(Typography, {
-      variant: "caption",
-      color: "neutrals800"
-    }, `$${numberToString(inputUsdValue)}`)),
-    value: props.inputAmount || '',
-    min: 0,
-    onChange: props.type === 'From' ? event => {
-      props.onAmountChange(event.target.value);
-    } : undefined
-  }) : React.createElement(OutputContainer, null, React.createElement(Typography, {
+  }, React.createElement(OutputContainer, null, React.createElement(Typography, {
     variant: "h4"
-  }, fetchingBestRoute && '?', !!bestRoute?.result && `≈ ${numberToString(props.outputAmount)}`, (!inputAmount || inputAmount === '0') && '0'))))));
+  }, props.amount))))));
 }
 
-const Container$1 = /*#__PURE__*/styled$1('div', {
+const Container$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
-  width: '100%',
-  justifyContent: 'end',
   alignItems: 'center',
-  paddingTop: '$16'
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  fontSize: '$12',
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center'
+  }
 });
-const Logo = /*#__PURE__*/styled$1('svg', {
-  fill: '$foreground',
-  width: '$24',
-  margin: '0 $8 0 $16'
-});
-const StyledAnchor = /*#__PURE__*/styled$1('a', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  textDecoration: 'none'
-});
-function BottomLogo() {
-  const {
-    t
-  } = useTranslation();
-  return React.createElement(Container$1, null, React.createElement(Typography, {
-    variant: "caption"
-  }, t('Powered By')), React.createElement(StyledAnchor, {
-    href: "https://rango.exchange",
-    target: "_blank"
-  }, React.createElement(Logo, {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 33.68 29"
-  }, React.createElement("defs", null), React.createElement("g", {
-    id: "Layer_2",
-    "data-name": "Layer 2"
-  }, React.createElement("g", {
-    id: "Layer_1-2",
-    "data-name": "Layer 1"
-  }, React.createElement("path", {
-    d: "M33.68,18.05A17.93,17.93,0,0,0,28.34,5.29,18.31,18.31,0,0,0,15.45,0H13.54V7.41L6.07,0H.69L9.83,9.07H0V11A17.93,17.93,0,0,0,5.34,23.71,18.32,18.32,0,0,0,18.24,29h1.9V21.59l7.38,7.31h5.39l-9-9h9.82ZM17.37,16.16H12.49a1.93,1.93,0,0,0-1.35.55,1.89,1.89,0,0,0-.56,1.34,1.85,1.85,0,0,0,.56,1.33,1.93,1.93,0,0,0,1.35.55h3.84V25.1A14.43,14.43,0,0,1,8,21a14.21,14.21,0,0,1-4.1-8.2H21.2a1.86,1.86,0,0,0,.74-.13,1.92,1.92,0,0,0,.64-.4,2,2,0,0,0,.43-.62,1.88,1.88,0,0,0,0-1.47,2,2,0,0,0-.43-.62,1.92,1.92,0,0,0-.64-.4,1.86,1.86,0,0,0-.74-.13H17.35V3.9A14.43,14.43,0,0,1,25.64,8a14.19,14.19,0,0,1,4.11,8.2Zm2.12-5.27a1.43,1.43,0,0,1,.26-.83,1.52,1.52,0,0,1,.67-.56,1.55,1.55,0,0,1,.88-.08,1.51,1.51,0,0,1,.77.4,1.54,1.54,0,0,1,.42.77,1.41,1.41,0,0,1-.09.86,1.47,1.47,0,0,1-.55.68,1.56,1.56,0,0,1-.84.25,1.52,1.52,0,0,1-1.52-1.49Z"
-  }), React.createElement("path", {
-    d: "M21.7,11.57a.68.68,0,0,0-.12-.38.64.64,0,0,0-.31-.25.68.68,0,0,0-.75.15.61.61,0,0,0-.19.35.62.62,0,0,0,0,.4.67.67,0,0,0,.25.3.69.69,0,0,0,.39.12.7.7,0,0,0,.49-.2A.68.68,0,0,0,21.7,11.57Z"
-  })))), React.createElement(Typography, {
-    variant: "body2"
-  }, "RANGO")));
-}
-
-function SwithFromAndTo(_ref) {
-  let {
-    count
-  } = _ref;
-  const firstRender = useRef(true);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const outputAmount = useBestRouteStore.use.outputAmount();
-  useEffect(() => {
-    if (!firstRender.current) {
-      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
-      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
-      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
-      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
-      setSearchParams({
-        ...(toChainString && {
-          [SearchParams.FROM_CHAIN]: toChainString
-        }),
-        ...(toTokenString && {
-          [SearchParams.FROM_TOKEN]: toTokenString
-        }),
-        ...(fromChainString && {
-          [SearchParams.TO_CHAIN]: fromChainString
-        }),
-        ...(fromTokenString && {
-          [SearchParams.TO_TOKEN]: fromTokenString
-        }),
-        ...(outputAmount && {
-          [SearchParams.FROM_AMOUNT]: outputAmount.toString()
-        })
-      });
-    } else {
-      firstRender.current = false;
-    }
-  }, [count]);
-  return null;
+function RoutesOverview(props) {
+  if (!props.routes) return null;
+  const swaps = props.routes.result?.swaps;
+  return React.createElement(Container$1, null, React.createElement("div", {
+    className: "routes"
+  }, swaps?.map((swap, idx) => {
+    const isLast = idx + 1 == swaps.length;
+    return React.createElement(React.Fragment, {
+      key: idx
+    }, 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 Footer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  paddingTop: '$16'
-});
-
-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,
-    disabled: !onClickRefresh
-  }))), 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
-  }))));
-}
+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["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
+})(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 = {}));
 
-const Container$2 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column'
-});
-const FromContainer = /*#__PURE__*/styled('div', {
-  position: 'relative',
-  paddingBottom: '$12'
-});
-const SwitchButtonContainer = /*#__PURE__*/styled('div', {
-  position: 'absolute',
-  bottom: '-12px',
-  left: '50%',
-  transform: 'translate(-50%, 10%)'
-});
-const BestRouteContainer = /*#__PURE__*/styled('div', {
-  width: '100%',
-  paddingTop: '$16'
-});
-const Alerts = /*#__PURE__*/styled('div', {
-  width: '100%',
-  paddingTop: '$16'
-});
-function Home() {
-  const isRouterInContext = useInRouterContext();
-  const navigate = useNavigate();
-  const [count, setCount] = useState(0);
-  const fromChain = useBestRouteStore.use.fromChain();
+function useConfirmSwap() {
   const fromToken = useBestRouteStore.use.fromToken();
-  const toChain = useBestRouteStore.use.toChain();
   const toToken = useBestRouteStore.use.toToken();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
-  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const inputAmount = useBestRouteStore.use.inputAmount();
-  const outputAmount = useBestRouteStore.use.outputAmount();
-  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-  const tokens = useMetaStore.use.meta().tokens;
-  const fetchingBestRoute = useBestRouteStore.use.loading();
-  const bestRouteError = useBestRouteStore.use.error();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const initialRoute = useBestRouteStore.use.bestRoute();
+  const setBestRoute = useBestRouteStore.use.setBestRoute();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const affiliateRef = useSettingsStore.use.affiliateRef();
   const accounts = useWalletsStore.use.accounts();
-  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);
-  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
-  const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
-  const {
-    fromAmountRangeError,
-    recommendation,
-    swap
-  } = LimitErrorMessage(bestRoute);
-  const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
-  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount);
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-  const highFee = hasHighFee(totalFeeInUsd);
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const meta = useMetaStore.use.meta();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const slippage = useSettingsStore.use.slippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const userSlippage = customSlippage || slippage;
+  const proceedAnywayRef = useRef(false);
+  const confiremedRouteRef = useRef(null);
+  let abortControllerRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState([]);
+  const [warnings, setWarnings] = useState([]);
   useEffect(() => {
-    setCurrentPage(navigationRoutes.home);
-    return setCurrentPage.bind(null, '');
+    return () => abortControllerRef.current?.abort();
   }, []);
-  return React.createElement(Container$2, null, React.createElement(Header$1, {
-    title: "SWAP",
-    suffix: React.createElement(HeaderButtons, {
-      onClickRefresh: !!bestRoute ? fetchBestRoute : undefined
-    })
-  }), React.createElement(FromContainer, null, React.createElement(TokenInfo, {
-    type: "From",
-    chain: fromChain,
-    token: fromToken,
-    onAmountChange: setInputAmount,
-    inputAmount: inputAmount
-  }), React.createElement(SwitchButtonContainer, null, React.createElement(Button, {
-    variant: "ghost",
-    onClick: () => {
-      switchFromAndTo();
-      setCount(prev => prev + 1);
+  if (!fromToken || !toToken || !inputAmount || !initialRoute) return {
+    loading: false,
+    warnings: [],
+    errors: [],
+    confirmSwap: null
+  };
+  const confirmSwap = async () => {
+    if (proceedAnywayRef.current) {
+      const swapSettings = {
+        slippage: userSlippage.toString(),
+        disabledSwappersGroups: disabledLiquiditySources
+      };
+      if (errors.length > 0) setErrors([]);
+      if (warnings.length > 0) setWarnings([]);
+      proceedAnywayRef.current = false;
+      if (confiremedRouteRef.current) {
+        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        return newSwap;
+      }
+      return;
     }
-  }, React.createElement(VerticalSwapIcon, {
-    size: 32
-  }), isRouterInContext && React.createElement(SwithFromAndTo, {
-    count: count
-  })))), React.createElement(TokenInfo, {
-    type: "To",
-    chain: toChain,
-    token: toToken,
-    outputAmount: outputAmount ? new BigNumber(outputAmount) : new BigNumber(0),
-    outputUsdValue: outputUsdValue
-  }), showBestRoute && React.createElement(BestRouteContainer, null, React.createElement(BestRoute, {
-    error: bestRouteError,
-    loading: fetchingBestRoute,
-    data: getFormatedBestRoute(bestRoute),
-    totalFee: numberToString(totalFeeInUsd, 0, 2),
-    feeWarning: highFee,
-    totalTime: secondsToString(totalArrivalTime(bestRoute))
-  })), (errorMessage || hasLimitError(bestRoute)) && React.createElement(Alerts, null, errorMessage && React.createElement(Alert, {
-    type: "error"
-  }, errorMessage), hasLimitError(bestRoute) && React.createElement(Alert, {
-    type: "error",
-    title: `${swap?.swapperId} Limit`
-  }, React.createElement(React.Fragment, null, React.createElement(Typography, {
-    variant: "body2"
-  }, `${fromAmountRangeError}, Yours: ${numberToString(swap?.fromAmount || null)} ${swap?.from.symbol}`), React.createElement(Typography, {
-    variant: "body2"
-  }, 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.confirmSwap, {
-          replace: true
+    abortControllerRef.current = new AbortController();
+    setLoading(true);
+    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, affiliateRef, initialRoute);
+    try {
+      const confiremedRoute = await httpService().getBestRoute(requestBody, {
+        signal: abortControllerRef.current?.signal
+      });
+      abortControllerRef.current = null;
+      setLoading(false);
+      if (!confiremedRoute.result || !new BigNumber(confiremedRoute.requestAmount).isEqualTo(new BigNumber(inputAmount || '-1'))) {
+        setErrors(prevState => prevState.concat({
+          type: ConfirmSwapErrorTypes.NO_ROUTE
+        }));
+        return;
+      }
+      const confirmSwapState = {
+        errors: [],
+        warnings: []
+      };
+      const routeChanged = isRouteChanged(initialRoute, confiremedRoute);
+      if (routeChanged) {
+        setBestRoute(confiremedRoute);
+        const newRouteOutputUsdValue = new BigNumber(confiremedRoute.result?.outputAmount || '0').multipliedBy(toToken.usdPrice || 0);
+        const outputRatio = getOutputRatio(inputUsdValue, newRouteOutputUsdValue);
+        const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
+        if (highValueLoss) confirmSwapState.errors.push({
+          type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS
+        });else if (isOutputAmountChangedALot(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+          newOutputAmount: numberToString(getRouteOutputAmount(confiremedRoute)),
+          percentageChange: numberToString(getPercentageChange(getRouteOutputAmount(initialRoute), getRouteOutputAmount(confiremedRoute)), null, 2)
+        });else if (isRouteInternalCoinsUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED
+        });else if (isNumberOfSwapsChanged(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_UPDATED
+        });else if (isRouteSwappersUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED
         });
       }
-    }
-  }, swapButtonState.title), React.createElement(BottomLogo, null)));
-}
-
-const Route = _ref => {
-  let {
-    children
-  } = _ref;
-  const location = useLocation$1();
-  const navigate = useNavigate$1();
-  const ref = useRef(true);
-  useEffect(() => {
-    if (location.pathname === navigationRoutes.confirmSwap && ref.current) navigate(navigationRoutes.home + location.search, {
-      state: 'redirect'
-    });
-    ref.current = false;
-  }, []);
-  if (location.pathname === navigationRoutes.confirmSwap && ref.current) return React.createElement(Home, null);
-  return React.createElement(React.Fragment, null, " ", children);
-};
-function AppRouter(_ref2) {
-  let {
-    children,
-    ...props
-  } = _ref2;
-  const isRouterInContext = useInRouterContext$1();
-  const Router = isRouterInContext ? Route : MemoryRouter;
-  const {
-    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.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
+      const balanceWarnings = getBalanceWarnings(confiremedRoute, selectedWallets);
+      const enoughBalance = balanceWarnings.length === 0;
+      if (!enoughBalance) confirmSwapState.errors.push({
+        type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE,
+        messages: balanceWarnings
+      });
+      const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
+      if (!hasProperSlippage(userSlippage.toString(), minRequiredSlippage)) confirmSwapState.errors.push({
+        type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE,
+        minRequiredSlippage
       });
+      const noErrors = confirmSwapState.errors.length === 0;
+      const noWarnings = confirmSwapState.warnings.length === 0;
+      if ((noErrors || !noErrors && proceedAnywayRef.current) && (noWarnings || !noWarnings && proceedAnywayRef.current)) {
+        const swapSettings = {
+          slippage: userSlippage.toString(),
+          disabledSwappersGroups: disabledLiquiditySources
+        };
+        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        return newSwap;
+      } else if (!proceedAnywayRef.current) {
+        proceedAnywayRef.current = true;
+        setErrors(confirmSwapState.errors);
+        setWarnings(confirmSwapState.warnings);
+        confiremedRouteRef.current = confiremedRoute;
+      }
+      return;
+    } catch (error) {
+      if (error?.code === 'ERR_CANCELED') {
+        return;
+      }
+      const status = error?.response?.status;
+      setLoading(false);
+      setErrors([{
+        type: ConfirmSwapErrorTypes.REQUEST_FAILED,
+        status
+      }]);
+      return;
     }
   };
   return {
-    navigateBackFrom
+    loading,
+    warnings,
+    errors,
+    confirmSwap
   };
 }
 
-const Box$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%'
+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'
 });
-const Container$3 = /*#__PURE__*/styled('div', {
-  boxSizing: 'border-box',
-  borderRadius: '$5',
-  padding: '$8 $16 $16 $16',
+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));
+}
+
+const List = /*#__PURE__*/styled('ul', {
+  padding: 0,
+  margin: 0,
   variants: {
-    type: {
-      filled: {
-        backgroundColor: '$neutrals300'
-      },
-      outlined: {
-        border: '1px solid $neutrals300'
+    showListStyle: {
+      true: {
+        paddingLeft: '$24'
       }
     }
-  },
-  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'
+  }
+});
+const ListItem = /*#__PURE__*/styled('li', {
+  variants: {
+    showListStyle: {
+      true: {
+        listStyleType: 'disc',
+        listStylePosition: 'outside'
       }
-    },
-    '.amount': {
-      width: '30%'
     }
   }
 });
-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'
+const Message = /*#__PURE__*/styled(Typography, {
+  display: 'block'
 });
-function TokenPreview(props) {
-  const {
-    chain,
-    token,
-    loadingStatus,
-    percentageChange
-  } = props;
-  const {
-    t
-  } = useTranslation();
-  const ItemSuffix = React.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
+function BalanceErrors(_ref) {
+  let {
+    messages
+  } = _ref;
+  const showListStyle = messages.length > 1;
+  return React.createElement(React.Fragment, null, React.createElement(Typography, {
+    className: "title",
+    variant: "title",
+    color: 'error'
+  }, "Insufficent Balance:"), React.createElement(Spacer, {
+    size: 8,
+    direction: "vertical"
+  }), React.createElement(List, {
+    showListStyle: showListStyle
+  }, messages.map((warning, index) => React.createElement(ListItem, {
+    showListStyle: showListStyle,
+    key: index
+  }, React.createElement(Message, {
+    variant: "body2"
+  }, warning)))));
+}
+
+function ConfirmSwapErrors(errors) {
+  return errors.flatMap(error => {
+    switch (error.type) {
+      case ConfirmSwapErrorTypes.NO_ROUTE:
+        return 'No routes found. Please try again later.';
+      case ConfirmSwapErrorTypes.REQUEST_FAILED:
+        return `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`;
+      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+        return 'Route updated and price impact is too high, try again later!';
+      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
+        return React.createElement(MinRequiredSlippage, {
+          minRequiredSlippage: error.minRequiredSlippage
+        });
+      case ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE:
+        return React.createElement(BalanceErrors, {
+          messages: error.messages
+        });
+      default:
+        return [];
     }
-  }, 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(Image, {
-      src: chain.logo,
-      size: 24
-    }) : 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(Image, {
-      src: token.image,
-      size: 24
-    }) : 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);
+function ConfirmSwapWarnings(warnings) {
+  return warnings.flatMap(warning => {
+    switch (warning.type) {
+      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
+        return "Route has been updated.";
+      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
+        return `Output amount changed to ${warning.newOutputAmount} (${warning.percentageChange}% change).`;
+      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
+        return "Route swappers has been updated.";
+      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
+        return "Route internal coins has been updated.";
+      default:
+        return [];
+    }
+  });
 }
 
-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["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
-})(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 = {}));
+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 useConfirmSwap() {
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toToken = useBestRouteStore.use.toToken();
-  const inputAmount = useBestRouteStore.use.inputAmount();
-  const initialRoute = useBestRouteStore.use.bestRoute();
-  const setBestRoute = useBestRouteStore.use.setBestRoute();
-  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
-  const affiliateRef = useSettingsStore.use.affiliateRef();
+function ConfirmSwapExtraMessages(props) {
+  const {
+    selectedSlippage
+  } = props;
+  const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
+  return React.createElement(React.Fragment, null, highSlippage && React.createElement(HighSlippageWarning, {
+    selectedSlippage: selectedSlippage
+  }));
+}
+
+function PercentageChange(props) {
+  const {
+    inputUsdValue,
+    outputUsdValue
+  } = props;
+  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)}%)`));
+}
+
+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 loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
   const selectedWallets = useWalletsStore.use.selectedWallets();
-  const meta = useMetaStore.use.meta();
-  const customSlippage = useSettingsStore.use.customSlippage();
+  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
+  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
   const slippage = useSettingsStore.use.slippage();
-  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
-  const userSlippage = customSlippage || slippage;
-  const proceedAnywayRef = useRef(false);
-  const confiremedRouteRef = useRef(null);
-  let abortControllerRef = useRef(null);
-  const [loading, setLoading] = useState(false);
-  const [errors, setErrors] = useState([]);
-  const [warnings, setWarnings] = useState([]);
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
+  const {
+    manager
+  } = useManager();
+  const {
+    loading: fetchingConfirmedRoute,
+    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 = numberToString(firstStep?.fromAmount, 4, 6);
+  const toAmount = numberToString(lastStep?.toAmount, 4, 6);
   useEffect(() => {
-    return () => abortControllerRef.current?.abort();
+    initSelectedWallets();
   }, []);
-  if (!fromToken || !toToken || !inputAmount || !initialRoute) return {
-    loading: false,
-    warnings: [],
-    errors: [],
-    confirmSwap: null
+  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
+  const handleConnectChain = wallet => {
+    const network = wallet;
+    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
   };
-  const confirmSwap = async () => {
-    if (proceedAnywayRef.current) {
-      const swapSettings = {
-        slippage: userSlippage.toString(),
-        disabledSwappersGroups: disabledLiquiditySources
-      };
-      if (errors.length > 0) setErrors([]);
-      if (warnings.length > 0) setWarnings([]);
-      proceedAnywayRef.current = false;
-      if (confiremedRouteRef.current) {
-        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
-        return newSwap;
-      }
-      return;
-    }
-    abortControllerRef.current = new AbortController();
-    setLoading(true);
-    const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, accounts, selectedWallets, disabledLiquiditySources, userSlippage, affiliateRef, initialRoute);
-    try {
-      const confiremedRoute = await httpService().getBestRoute(requestBody, {
-        signal: abortControllerRef.current?.signal
-      });
-      abortControllerRef.current = null;
-      setLoading(false);
-      if (!confiremedRoute.result || !new BigNumber(confiremedRoute.requestAmount).isEqualTo(new BigNumber(inputAmount || '-1'))) {
-        setErrors(prevState => prevState.concat({
-          type: ConfirmSwapErrorTypes.NO_ROUTE
-        }));
-        return;
-      }
-      const confirmSwapState = {
-        errors: [],
-        warnings: []
-      };
-      const routeChanged = isRouteChanged(initialRoute, confiremedRoute);
-      if (routeChanged) {
-        setBestRoute(confiremedRoute);
-        const newRouteOutputUsdValue = new BigNumber(confiremedRoute.result?.outputAmount || '0').multipliedBy(toToken.usdPrice || 0);
-        const outputRatio = getOutputRatio(inputUsdValue, newRouteOutputUsdValue);
-        const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
-        if (highValueLoss) confirmSwapState.errors.push({
-          type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS
-        });else if (isOutputAmountChangedALot(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
-          type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
-          newOutputAmount: numberToString(getRouteOutputAmount(confiremedRoute)),
-          percentageChange: numberToString(getPercentageChange(getRouteOutputAmount(initialRoute), getRouteOutputAmount(confiremedRoute)), null, 2)
-        });else if (isRouteInternalCoinsUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
-          type: ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED
-        });else if (isNumberOfSwapsChanged(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
-          type: ConfirmSwapWarningTypes.ROUTE_UPDATED
-        });else if (isRouteSwappersUpdated(initialRoute, confiremedRoute)) confirmSwapState.warnings.push({
-          type: ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED
-        });
-      }
-      const balanceWarnings = getBalanceWarnings(confiremedRoute, selectedWallets);
-      const enoughBalance = balanceWarnings.length === 0;
-      if (!enoughBalance) confirmSwapState.errors.push({
-        type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE,
-        messages: balanceWarnings
+  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
+          });
+          setTimeout(() => {
+            setInputAmount('');
+          }, 0);
+        }
       });
-      const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
-      if (!hasProperSlippage(userSlippage.toString(), minRequiredSlippage)) confirmSwapState.errors.push({
-        type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE,
-        minRequiredSlippage
+    },
+    onChange: wallet => setSelectedWallet(wallet),
+    confirmDisabled: loadingMetaStatus !== 'success' || 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: loadingMetaStatus !== 'success' ? loadingMetaStatus : 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: loadingMetaStatus !== 'success' ? loadingMetaStatus : bestRouteloadingStatus,
+      percentageChange: React.createElement(PercentageChange, {
+        inputUsdValue: inputUsdValue,
+        outputUsdValue: outputUsdValue
+      })
+    })),
+    previewRoutes: React.createElement(RoutesOverview, {
+      routes: bestRoute,
+      totalFee: numberToString(totalFeeInUsd, 0, 2)
+    }),
+    loading: fetchingConfirmedRoute,
+    errors: ConfirmSwapErrors(errors),
+    warnings: ConfirmSwapWarnings(warnings),
+    extraMessages: React.createElement(React.Fragment, null, loadingMetaStatus === 'failed' && React.createElement(LoadingFailedAlert, null), loadingMetaStatus === 'failed' && showHighSlippageWarning && React.createElement(Spacer, {
+      direction: "vertical"
+    }), 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,
+        swap: storage?.swapDetails
       });
-      const noErrors = confirmSwapState.errors.length === 0;
-      const noWarnings = confirmSwapState.warnings.length === 0;
-      if ((noErrors || !noErrors && proceedAnywayRef.current) && (noWarnings || !noWarnings && proceedAnywayRef.current)) {
-        const swapSettings = {
-          slippage: userSlippage.toString(),
-          disabledSwappersGroups: disabledLiquiditySources
-        };
-        const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
-        return newSwap;
-      } else if (!proceedAnywayRef.current) {
-        proceedAnywayRef.current = true;
-        setErrors(confirmSwapState.errors);
-        setWarnings(confirmSwapState.warnings);
-        confiremedRouteRef.current = confiremedRoute;
-      }
-      return;
-    } catch (error) {
-      if (error?.code === 'ERR_CANCELED') {
-        return;
-      }
-      const status = error?.response?.status;
-      setLoading(false);
-      setErrors([{
-        type: ConfirmSwapErrorTypes.REQUEST_FAILED,
-        status
-      }]);
-      return;
     }
-  };
-  return {
-    loading,
-    warnings,
-    errors,
-    confirmSwap
-  };
-}
+  });
+  return result.sort((a, b) => Number(b.swap.creationTime) - Number(a.swap.creationTime));
+};
 
-function ChangeSlippageButton() {
+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();
-  return React.createElement(Button, {
-    type: "primary",
-    variant: "outlined",
-    size: "small",
-    onClick: () => navigate(navigationRoutes.settings)
-  }, "Change Slippage");
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const {
+    manager,
+    state
+  } = useManager();
+  const pendingSwaps = getPendingSwaps(manager).map(_ref => {
+    let {
+      swap
+    } = _ref;
+    return swap;
+  });
+  const loading = !state.loadedFromPersistor;
+  return React.createElement(History, {
+    list: pendingSwaps,
+    groupBy: groupSwapsByDate,
+    loading: loading,
+    onSwapClick: requestId => {
+      setSelectedSwap(requestId);
+      navigate(`${requestId}`, {
+        replace: true
+      });
+    },
+    onBack: navigateBackFrom.bind(null, navigationRoutes.swaps)
+  });
 }
 
-const StyledMessage = /*#__PURE__*/styled(Typography, {
-  color: '$error500 !important'
+const Box$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  overflow: 'hidden'
 });
-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));
-}
-
-const List = /*#__PURE__*/styled('ul', {
-  variants: {
-    showListStyle: {
-      true: {
-        paddingLeft: '$24'
+const Container$2 = /*#__PURE__*/styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+  variants: {
+    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'
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
       }
+    },
+    '.amount': {
+      width: '30%'
+    }
+  },
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8'
     }
   }
 });
-const Message = /*#__PURE__*/styled(Typography, {
-  display: 'block'
+const Options = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  '.balance': {
+    display: 'flex',
+    alignItems: 'center'
+  }
 });
-function BalanceErrors(_ref) {
-  let {
-    messages
-  } = _ref;
-  const showListStyle = messages.length > 1;
-  return React.createElement(React.Fragment, null, React.createElement(Typography, {
-    className: "title",
-    variant: "title",
-    color: 'error'
-  }, "Insufficent Balance:"), React.createElement(Spacer, {
-    size: 8,
-    direction: "vertical"
-  }), React.createElement(List, {
-    showListStyle: showListStyle
-  }, messages.map(warning => React.createElement(ListItem, {
-    showListStyle: showListStyle
-  }, React.createElement(Message, {
-    variant: "body2"
-  }, warning)))));
-}
-
-function ConfirmSwapErrors(errors) {
-  return errors.flatMap(error => {
-    switch (error.type) {
-      case ConfirmSwapErrorTypes.NO_ROUTE:
-        return 'No routes found. Please try again later.';
-      case ConfirmSwapErrorTypes.REQUEST_FAILED:
-        return `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`;
-      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-        return 'Route updated and price impact is too high, try again later!';
-      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
-        return React.createElement(MinRequiredSlippage, {
-          minRequiredSlippage: error.minRequiredSlippage
-        });
-      case ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE:
-        return React.createElement(BalanceErrors, {
-          messages: error.messages
-        });
-      default:
-        return [];
-    }
-  });
-}
-
-function ConfirmSwapWarnings(warnings) {
-  return warnings.flatMap(warning => {
-    switch (warning.type) {
-      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
-        return "Route has been updated.";
-      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
-        return `Output amount changed to ${warning.newOutputAmount} (${warning.percentageChange}% change).`;
-      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
-        return "Route swappers has been updated.";
-      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
-        return "Route internal coins has been updated.";
-      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 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 TokenInfo(props) {
   const {
-    selectedSlippage
+    type,
+    chain,
+    token
   } = 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 loadingStatus = useMetaStore.use.loadingStatus();
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
-  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const fromToken = useBestRouteStore.use.fromToken();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
-  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 bestRoute = useBestRouteStore.use.bestRoute();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const balances = useWalletsStore.use.balances();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const navigate = useNavigate();
   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
-          });
-          setTimeout(() => {
-            setInputAmount('');
-          }, 0);
-        }
-      });
+    t
+  } = useTranslation();
+  const tokenBalance = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', 8) : '0';
+  const tokenBalanceReal = !!fromChain && !!fromToken ? numberToString(getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.amount || '0', getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)?.decimal) : '0';
+  const ItemSuffix = React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
+    color: "error",
+    size: 24
+  }), React.createElement(AngleDownIcon, null));
+  return React.createElement(Box$1, null, React.createElement(Container$2, {
+    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(Typography, {
+    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("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", {
+    className: "form"
+  }, React.createElement(Button, {
+    className: "selectors",
+    onClick: () => {
+      navigate(`${props.type.toLowerCase()}-chain`);
     },
-    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!'
-  });
+    variant: "outlined",
+    disabled: loadingStatus === 'failed',
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && chain ? React.createElement(Image, {
+      src: chain.logo,
+      size: 24
+    }) : 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",
+    onClick: () => {
+      navigate(`${props.type.toLowerCase()}-token`);
+    },
+    variant: "outlined",
+    disabled: loadingStatus === 'failed' || type === 'From' && !fromChain || type === 'To' && !toChain,
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && token ? React.createElement(Image, {
+      src: token.image,
+      size: 24
+    }) : 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"
+  }, props.type === 'From' ? React.createElement(TextField, {
+    type: "number",
+    size: "large",
+    autoFocus: true,
+    placeholder: "0",
+    style: {
+      position: 'relative',
+      backgroundColor: '$background !important'
+    },
+    suffix: React.createElement("span", {
+      style: {
+        position: 'absolute',
+        right: '4px',
+        bottom: '2px'
+      }
+    }, React.createElement(Typography, {
+      variant: "caption",
+      color: "neutrals800"
+    }, `$${numberToString(inputUsdValue)}`)),
+    value: props.inputAmount || '',
+    min: 0,
+    onChange: props.type === 'From' ? event => {
+      props.onAmountChange(event.target.value);
+    } : undefined
+  }) : React.createElement(OutputContainer$1, null, React.createElement(Typography, {
+    variant: "h4"
+  }, fetchingBestRoute && '?', !!bestRoute?.result && `≈ ${numberToString(props.outputAmount)}`, (!inputAmount || inputAmount === '0') && '0'))))));
 }
 
-const getPendingSwaps = manager => {
-  const result = [];
-  manager?.getAll().forEach((q, id) => {
-    const storage = q.list.getStorage();
-    if (storage?.swapDetails) {
-      result.push({
-        id,
-        swap: storage?.swapDetails
+const Container$3 = /*#__PURE__*/styled$1('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+  alignItems: 'center',
+  paddingTop: '$16'
+});
+const Logo = /*#__PURE__*/styled$1('svg', {
+  fill: '$foreground',
+  width: '$24',
+  margin: '0 $8 0 $16'
+});
+const StyledAnchor = /*#__PURE__*/styled$1('a', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textDecoration: 'none'
+});
+function BottomLogo() {
+  const {
+    t
+  } = useTranslation();
+  return React.createElement(Container$3, null, React.createElement(Typography, {
+    variant: "caption",
+    color: '$neutrals600'
+  }, t('Powered By')), React.createElement(StyledAnchor, {
+    href: "https://rango.exchange",
+    target: "_blank"
+  }, React.createElement(Logo, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 33.68 29"
+  }, React.createElement("defs", null), React.createElement("g", {
+    id: "Layer_2",
+    "data-name": "Layer 2"
+  }, React.createElement("g", {
+    id: "Layer_1-2",
+    "data-name": "Layer 1"
+  }, React.createElement("path", {
+    d: "M33.68,18.05A17.93,17.93,0,0,0,28.34,5.29,18.31,18.31,0,0,0,15.45,0H13.54V7.41L6.07,0H.69L9.83,9.07H0V11A17.93,17.93,0,0,0,5.34,23.71,18.32,18.32,0,0,0,18.24,29h1.9V21.59l7.38,7.31h5.39l-9-9h9.82ZM17.37,16.16H12.49a1.93,1.93,0,0,0-1.35.55,1.89,1.89,0,0,0-.56,1.34,1.85,1.85,0,0,0,.56,1.33,1.93,1.93,0,0,0,1.35.55h3.84V25.1A14.43,14.43,0,0,1,8,21a14.21,14.21,0,0,1-4.1-8.2H21.2a1.86,1.86,0,0,0,.74-.13,1.92,1.92,0,0,0,.64-.4,2,2,0,0,0,.43-.62,1.88,1.88,0,0,0,0-1.47,2,2,0,0,0-.43-.62,1.92,1.92,0,0,0-.64-.4,1.86,1.86,0,0,0-.74-.13H17.35V3.9A14.43,14.43,0,0,1,25.64,8a14.19,14.19,0,0,1,4.11,8.2Zm2.12-5.27a1.43,1.43,0,0,1,.26-.83,1.52,1.52,0,0,1,.67-.56,1.55,1.55,0,0,1,.88-.08,1.51,1.51,0,0,1,.77.4,1.54,1.54,0,0,1,.42.77,1.41,1.41,0,0,1-.09.86,1.47,1.47,0,0,1-.55.68,1.56,1.56,0,0,1-.84.25,1.52,1.52,0,0,1-1.52-1.49Z"
+  }), React.createElement("path", {
+    d: "M21.7,11.57a.68.68,0,0,0-.12-.38.64.64,0,0,0-.31-.25.68.68,0,0,0-.75.15.61.61,0,0,0-.19.35.62.62,0,0,0,0,.4.67.67,0,0,0,.25.3.69.69,0,0,0,.39.12.7.7,0,0,0,.49-.2A.68.68,0,0,0,21.7,11.57Z"
+  })))), React.createElement(Typography, {
+    variant: "body2"
+  }, "RANGO")));
+}
+
+function SwithFromAndTo(_ref) {
+  let {
+    count
+  } = _ref;
+  const firstRender = useRef(true);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const outputAmount = useBestRouteStore.use.outputAmount();
+  useEffect(() => {
+    if (!firstRender.current) {
+      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
+      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
+      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
+      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
+      setSearchParams({
+        ...(toChainString && {
+          [SearchParams.FROM_CHAIN]: toChainString
+        }),
+        ...(toTokenString && {
+          [SearchParams.FROM_TOKEN]: toTokenString
+        }),
+        ...(fromChainString && {
+          [SearchParams.TO_CHAIN]: fromChainString
+        }),
+        ...(fromTokenString && {
+          [SearchParams.TO_TOKEN]: fromTokenString
+        }),
+        ...(outputAmount && {
+          [SearchParams.FROM_AMOUNT]: outputAmount.toString()
+        })
       });
+    } else {
+      firstRender.current = false;
     }
-  });
-  return result.sort((a, b) => Number(b.swap.creationTime) - Number(a.swap.creationTime));
-};
+  }, [count]);
+  return null;
+}
 
-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());
+const Footer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  paddingTop: '$16'
+});
+
+const errorMessages = {
+  genericServerError: 'Error connecting server, please reload the app and try again'
 };
 
-function HistoryPage() {
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const navigate = useNavigate();
+const ButtonsContainer = /*#__PURE__*/styled('div', {
+  display: 'flex'
+});
+function HeaderButtons(props) {
   const {
-    navigateBackFrom
-  } = useNavigateBack();
+    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,
+    disabled: !onClickRefresh
+  }))), 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$4 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column'
+});
+const FromContainer = /*#__PURE__*/styled('div', {
+  position: 'relative',
+  paddingBottom: '$12'
+});
+const SwitchButtonContainer = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)'
+});
+const BestRouteContainer = /*#__PURE__*/styled('div', {
+  width: '100%',
+  paddingTop: '$16'
+});
+const Alerts = /*#__PURE__*/styled('div', {
+  width: '100%',
+  paddingTop: '$16'
+});
+function Home() {
+  const isRouterInContext = useInRouterContext$1();
+  const navigate = useNavigate();
+  const [count, setCount] = useState(0);
+  const fromChain = useBestRouteStore.use.fromChain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toChain = useBestRouteStore.use.toChain();
+  const toToken = useBestRouteStore.use.toToken();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const outputAmount = useBestRouteStore.use.outputAmount();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const tokens = useMetaStore.use.meta().tokens;
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const bestRouteError = useBestRouteStore.use.error();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const accounts = useWalletsStore.use.accounts();
+  const 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);
+  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
+  const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
   const {
-    manager,
-    state
-  } = useManager();
-  const pendingSwaps = getPendingSwaps(manager).map(_ref => {
-    let {
-      swap
-    } = _ref;
-    return swap;
-  });
-  const loading = !state.loadedFromPersistor;
-  return React.createElement(History, {
-    list: pendingSwaps,
-    groupBy: groupSwapsByDate,
-    loading: loading,
-    onSwapClick: requestId => {
-      setSelectedSwap(requestId);
-      navigate(navigationRoutes.swaps + `/${requestId}`, {
-        replace: true
-      });
-    },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.swaps)
-  });
+    fromAmountRangeError,
+    recommendation,
+    swap
+  } = LimitErrorMessage(bestRoute);
+  const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
+  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputAmount);
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+  const highFee = hasHighFee(totalFeeInUsd);
+  useEffect(() => {
+    setCurrentPage(navigationRoutes.home);
+    return setCurrentPage.bind(null, '');
+  }, []);
+  return React.createElement(Container$4, null, React.createElement(Header$1, {
+    title: "SWAP",
+    suffix: React.createElement(HeaderButtons, {
+      onClickRefresh: !!bestRoute || bestRouteError ? fetchBestRoute : undefined
+    })
+  }), React.createElement(FromContainer, null, React.createElement(TokenInfo, {
+    type: "From",
+    chain: fromChain,
+    token: fromToken,
+    onAmountChange: setInputAmount,
+    inputAmount: inputAmount
+  }), React.createElement(SwitchButtonContainer, null, React.createElement(Button, {
+    variant: "ghost",
+    onClick: () => {
+      switchFromAndTo();
+      setCount(prev => prev + 1);
+    }
+  }, React.createElement(VerticalSwapIcon, {
+    size: 32
+  }), isRouterInContext && React.createElement(SwithFromAndTo, {
+    count: count
+  })))), React.createElement(TokenInfo, {
+    type: "To",
+    chain: toChain,
+    token: toToken,
+    outputAmount: outputAmount ? new BigNumber(outputAmount) : new BigNumber(0),
+    outputUsdValue: outputUsdValue
+  }), showBestRoute && React.createElement(BestRouteContainer, null, React.createElement(BestRoute, {
+    error: bestRouteError,
+    loading: fetchingBestRoute,
+    data: getFormatedBestRoute(bestRoute),
+    totalFee: numberToString(totalFeeInUsd, 0, 2),
+    feeWarning: highFee,
+    totalTime: secondsToString(totalArrivalTime(bestRoute))
+  })), (errorMessage || hasLimitError(bestRoute)) && React.createElement(Alerts, null, errorMessage && React.createElement(Alert, {
+    type: "error"
+  }, errorMessage), hasLimitError(bestRoute) && React.createElement(Alert, {
+    type: "error",
+    title: `${swap?.swapperId} Limit`
+  }, React.createElement(React.Fragment, null, React.createElement(Typography, {
+    variant: "body2"
+  }, `${fromAmountRangeError}, Yours: ${numberToString(swap?.fromAmount || null)} ${swap?.from.symbol}`), React.createElement(Typography, {
+    variant: "body2"
+  }, 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.confirmSwap, {
+          replace: true
+        });
+      }
+    }
+  }, swapButtonState.title), React.createElement(BottomLogo, null)));
 }
 
 function LiquiditySourcePage(_ref) {
@@ -2745,24 +2712,6 @@ function WalletsPage(_ref) {
   }))))));
 }
 
-function useCopyToClipboard(resetInterval) {
-  const [isCopied, setCopied] = React.useState(false);
-  const handleCopy = React.useCallback(text => {
-    copy(text.toString());
-    setCopied(true);
-  }, []);
-  React.useEffect(() => {
-    let timeout;
-    if (isCopied && resetInterval) {
-      timeout = setTimeout(() => setCopied(false), resetInterval);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [isCopied, resetInterval]);
-  return [isCopied, handleCopy];
-}
-
 function timeSince(timeMillis) {
   const seconds = Math.floor((new Date().getTime() - timeMillis) / 1000);
   let intervalType;
@@ -2942,50 +2891,50 @@ function AppRoutes(props) {
     config
   } = props;
   return useRoutes([{
-    path: getAbsolutePath(navigationRoutes.home),
+    path: navigationRoutes.home,
     element: React.createElement(Home, null)
   }, {
-    path: getAbsolutePath(navigationRoutes.fromChain),
+    path: navigationRoutes.fromChain,
     element: React.createElement(SelectChainPage, {
       type: "from",
       supportedChains: config?.from?.blockchains
     })
   }, {
-    path: getAbsolutePath(navigationRoutes.toChain),
+    path: navigationRoutes.toChain,
     element: React.createElement(SelectChainPage, {
       type: "to",
       supportedChains: config?.to?.blockchains
     })
   }, {
-    path: getAbsolutePath(navigationRoutes.fromToken),
+    path: navigationRoutes.fromToken,
     element: React.createElement(SelectTokenPage, {
       type: "from",
       supportedTokens: config?.from?.tokens
     })
   }, {
-    path: getAbsolutePath(navigationRoutes.toToken),
+    path: navigationRoutes.toToken,
     element: React.createElement(SelectTokenPage, {
       type: "to",
       supportedTokens: config?.to?.tokens
     })
   }, {
-    path: getAbsolutePath(navigationRoutes.settings),
+    path: navigationRoutes.settings,
     element: React.createElement(SettingsPage, {
       supportedSwappers: config?.liquiditySources
     })
   }, {
-    path: getAbsolutePath(navigationRoutes.liquiditySources),
+    path: navigationRoutes.liquiditySources,
     element: React.createElement(LiquiditySourcePage, {
       supportedSwappers: config?.liquiditySources
     })
   }, {
-    path: getAbsolutePath(navigationRoutes.swaps),
+    path: navigationRoutes.swaps,
     element: React.createElement(HistoryPage, null)
   }, {
     path: navigationRoutes.swapDetails,
     element: React.createElement(SwapDetailsPage, null)
   }, {
-    path: getAbsolutePath(navigationRoutes.wallets),
+    path: navigationRoutes.wallets,
     element: React.createElement(WalletsPage, {
       supportedWallets: config?.wallets,
       multiWallets: typeof config?.multiWallets === 'undefined' ? true : config.multiWallets
@@ -3007,7 +2956,9 @@ const Header = /*#__PURE__*/styled('div', {
 const WalletImageContainer = /*#__PURE__*/styled('div', {
   marginLeft: -15,
   marginRight: '$6',
-  borderRadius: '99999px'
+  '& img': {
+    borderRadius: '50%'
+  }
 });
 function Layout(_ref) {
   let {
@@ -3084,28 +3035,6 @@ function Layout(_ref) {
   }));
 }
 
-const globalStyles = /*#__PURE__*/globalCss({
-  '*': {
-    boxSizing: 'border-box',
-    margin: 0,
-    padding: 0,
-    listStyleType: 'none',
-    '&::-webkit-scrollbar': {
-      width: '$8',
-      height: '$8'
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400',
-      borderRadius: '$10'
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '$neutrals500'
-    },
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: '$neutrals300'
-    }
-  }
-});
 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')"],
   body: {
@@ -3336,6 +3265,8 @@ function QueueManager(props) {
       API_KEY: getConfig('API_KEY')
     });
   }, []);
+  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
+  const accounts = useWalletsStore.use.accounts();
   const {
     blockchains
   } = useMetaStore.use.meta();
@@ -3362,6 +3293,17 @@ function QueueManager(props) {
     return walletAndSupportedChainsNames(supportedChains);
   };
   const allProviders = providers();
+  const notifier = data => {
+    const lastStep = data.swap?.steps[data.swap.steps.length - 1];
+    const outputAmount = data.step?.outputAmount || '';
+    const step = data.step || lastStep;
+    if (data.eventType === 'task_completed' || data.eventType === 'step_completed_with_output' && lastStep?.id !== data.step?.id || !!outputAmount) {
+      const fromAccount = accounts.find(account => account.chain === step?.fromBlockchain);
+      const toAccount = step?.fromBlockchain !== step?.toBlockchain && accounts.find(account => account.chain === step?.toBlockchain);
+      fromAccount && getOneOfWalletsDetails(fromAccount);
+      toAccount && getOneOfWalletsDetails(toAccount);
+    }
+  };
   const context = {
     meta: {
       blockchains: allBlockchains,
@@ -3377,9 +3319,7 @@ function QueueManager(props) {
     switchNetwork,
     connect,
     state,
-    notifier: message => {
-      console.log('[notifier]', message);
-    }
+    notifier
   };
   return React.createElement(Provider
   //@ts-ignore
@@ -3398,7 +3338,6 @@ const Widget = _ref => {
   let {
     config
   } = _ref;
-  globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
   const {
     activeTheme
@@ -3463,7 +3402,6 @@ const Widget = _ref => {
     providers: providers,
     onUpdateState: onUpdateState
   }, React.createElement("div", {
-    id: "pageContainer",
     className: activeTheme
   }, React.createElement(QueueManager, null, React.createElement(SwapContainer, {
     fixedHeight: currentPage !== navigationRoutes.home