@rango-dev/widget-embedded 0.1.10-next.100 → 0.1.10-next.106

package/dist/widget-embedded.esm.js

@@ -1,22 +1,22 @@
-import { WalletState, Tooltip, Button, RetryIcon, HistoryIcon, SettingsIcon, styled, css, Typography, InfoCircleIcon, AngleDownIcon, Spacer, TextField, VerticalSwapIcon, BestRoute, Alert, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Wallet, ChevronRightIcon, GasIcon, ConfirmWallets, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
+import { WalletState, Tooltip, Button, RetryIcon, HistoryIcon, SettingsIcon, styled, css, Typography, InfoCircleIcon, AngleDownIcon, Spacer, TextField, VerticalSwapIcon, BestRoute, Alert, ChevronRightIcon, GasIcon, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Wallet, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
 import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
 import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
+import { PendingSwapNetworkStatus, useQueueManager, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, swapQueueDef, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
+import { isCosmosBlockchain, isEvmBlockchain } from 'rango-types';
 import { useSearchParams, useLocation, createSearchParams, useNavigate, useInRouterContext, useRoutes } from 'react-router-dom';
 import { create } from 'zustand';
 import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
-import { Network, isEvmAddress, detectInstallLink, KEPLR_COMPATIBLE_WALLETS, WalletType, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
-import { isCosmosBlockchain } from 'rango-types';
+import { Network, isEvmAddress, KEPLR_COMPATIBLE_WALLETS, detectInstallLink, WalletType, getCosmosExperimentalChainInfo, detectMobileScreens, convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
 import { readAccountAddress, useWallets, Provider as Provider$1, Events } from '@rango-dev/wallets-core';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
-import { RangoClient, isEvmBlockchain } from 'rango-sdk';
+import { RangoClient, isEvmBlockchain as isEvmBlockchain$1 } from 'rango-sdk';
 import { shallow } from 'zustand/shallow';
 import { useTranslation, initReactI18next } from 'react-i18next';
 import { styled as styled$1 } from '@rango-dev/ui/src/theme';
 import { allProviders } from '@rango-dev/provider-all';
-import { useManager, Provider } from '@rango-dev/queue-manager-react';
 import i18n, { t } from 'i18next';
+import { useManager, Provider } from '@rango-dev/queue-manager-react';
 import copy from 'copy-to-clipboard';
-import { cancelSwap, swapQueueDef } from '@rango-dev/queue-manager-rango-preset';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
@@ -31,7 +31,6 @@ const navigationRoutes = {
   swaps: '/swaps',
   wallets: '/wallets',
   confirmSwap: '/confirm-swap',
-  confirmWallets: '/confirm-wallets',
   swapDetails: '/swaps/:requestId'
 };
 
@@ -61,6 +60,22 @@ function shadeColor(color, percent) {
   var BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);
   return '#' + RR + GG + BB;
 }
+function debounce(fn, time) {
+  let timeoutId;
+  return wrapper;
+  function wrapper() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      fn(...args);
+    }, time);
+  }
+}
 
 const secondsToString = s => {
   const seconds = (s % 60).toString().padStart(2, '0');
@@ -327,7 +342,7 @@ function getSortedTokens(chain, tokens, balances, otherChainTokens) {
   return sortTokens(getTokensWithBalance(filteredTokens, balances));
 }
 function tokensAreEqual(tokenA, tokenB) {
-  return tokenA?.blockchain === tokenB?.blockchain && tokenA?.name === tokenB?.name && tokenA?.address === tokenB?.address;
+  return tokenA?.blockchain === tokenB?.blockchain && tokenA?.symbol === tokenB?.symbol && tokenA?.address === tokenB?.address;
 }
 function getDefaultToken(sortedTokens, otherToken) {
   let selectedToken;
@@ -453,6 +468,7 @@ function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validat
     finishTime: null,
     requestId: bestRoute.requestId || '',
     inputAmount: inputAmount,
+    //@ts-ignore
     wallets,
     status: 'running',
     isPaused: false,
@@ -467,6 +483,7 @@ function calculatePendingSwap(inputAmount, bestRoute, wallets, settings, validat
     settings: settings,
     simulationResult: simulationResult,
     validateBalanceOrFee,
+    //@ts-ignore
     steps: bestRoute.result?.swaps?.map((swap, index) => {
       const swapper = meta.swappers.find(swapper => swapper.id === swap.swapperId);
       const swapperType = swapper?.types[0];
@@ -552,11 +569,10 @@ function hasHighFee(totalFeeInUsd) {
 }
 function getMinRequiredSlippage(route) {
   const slippages = route.result?.swaps.map(slippage => slippage.recommendedSlippage);
-  return slippages?.map(s => parseFloat(s?.slippage || '0'))?.filter(s => s > 0)?.sort((a, b) => b - a)?.find(() => true) || null;
+  return slippages?.map(s => s?.slippage || '0')?.filter(s => parseFloat(s) > 0)?.sort((a, b) => parseFloat(b) - parseFloat(a))?.find(() => true) || null;
 }
 function hasProperSlippage(userSlippage, minRequiredSlippage) {
   if (!minRequiredSlippage) return true;
-  //@ts-ignore
   return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
 }
 function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, selectedWallets, disabledLiquiditySources, slippage, checkPrerequisites) {
@@ -633,6 +649,61 @@ function calcOutputUsdValue(outputAmount, tokenPrice) {
   const amount = !!outputAmount ? new BigNumber(outputAmount) : ZERO;
   return amount.multipliedBy(tokenPrice || 0);
 }
+function isNetworkStatusInWarningState(pendingSwapStep) {
+  return !!pendingSwapStep && pendingSwapStep.networkStatus !== null && pendingSwapStep.networkStatus !== PendingSwapNetworkStatus.NetworkChanged;
+}
+function getSwapMessages(pendingSwap, currentStep) {
+  const textForRemove = 'bellow button or';
+  let message = pendingSwap.extraMessage;
+  let detailedMessage = pendingSwap.extraMessageDetail;
+  if (pendingSwap.networkStatusExtraMessageDetail?.includes(textForRemove)) {
+    pendingSwap.networkStatusExtraMessageDetail = pendingSwap.networkStatusExtraMessageDetail.replace(textForRemove, '');
+  }
+  const networkWarningState = isNetworkStatusInWarningState(currentStep);
+  if (networkWarningState) {
+    message = pendingSwap.networkStatusExtraMessage || '';
+    detailedMessage = pendingSwap.networkStatusExtraMessageDetail || '';
+    switch (currentStep?.networkStatus) {
+      case PendingSwapNetworkStatus.WaitingForConnectingWallet:
+        message = message || 'Waiting for connecting wallet';
+        break;
+      case PendingSwapNetworkStatus.WaitingForQueue:
+        message = message || 'Waiting for other running tasks to be finished';
+        break;
+      case PendingSwapNetworkStatus.WaitingForNetworkChange:
+        message = message || 'Waiting for changing wallet network';
+        break;
+    }
+  }
+  detailedMessage = detailedMessage || '';
+  message = message || '';
+  const isRpc = message?.indexOf('code') !== -1 && message?.indexOf('reason') !== -1;
+  return {
+    shortMessage: message,
+    detailedMessage: {
+      content: detailedMessage,
+      long: isRpc
+    }
+  };
+}
+function getLastConvertedTokenInFailedSwap(pendingSwap) {
+  let resultToken = null;
+  if (pendingSwap.status === 'failed') {
+    const lastSuccessStep = pendingSwap.steps.slice().reverse().filter(step => step.status === 'success')[0];
+    if (lastSuccessStep) {
+      resultToken = {
+        blockchain: lastSuccessStep.toBlockchain,
+        symbol: lastSuccessStep.toSymbol,
+        outputAmount: lastSuccessStep.outputAmount,
+        address: lastSuccessStep.toSymbolAddress
+      };
+    }
+  }
+  return resultToken;
+}
+function shouldRetrySwap(pendingSwap) {
+  return pendingSwap.status === 'failed' && !!pendingSwap.finishTime && new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000;
+}
 
 function searchParamsToToken(tokens, searchParams, chain) {
   if (!chain) return null;
@@ -672,20 +743,6 @@ function getRequiredBalanceOfWallet(selectedWallet, fee) {
 function isRouteParametersChanged(prevParams, currentParams) {
   return prevParams.fromChain?.name !== currentParams.fromChain?.name || prevParams.toChain?.name !== currentParams.toChain?.name || prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol || prevParams.toToken?.symbol !== currentParams.toToken?.symbol || prevParams.fromToken?.blockchain !== currentParams.fromToken?.blockchain || prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain || prevParams.fromToken?.address !== currentParams.fromToken?.address || prevParams.toToken?.address !== currentParams.toToken?.address || prevParams.inputAmount !== currentParams.inputAmount || prevParams.slippage !== currentParams.slippage || prevParams.customSlippage !== currentParams.customSlippage || prevParams.disabledLiquiditySources?.length !== currentParams.disabledLiquiditySources?.length;
 }
-function getBestRouteWithCalculatedFees(bestRoute, tokens) {
-  if (!bestRoute || !bestRoute.result) return null;
-  const swapsWithFee = (bestRoute?.result?.swaps || []).map(swap => ({
-    ...swap,
-    feeInUsd: numberToString(getUsdFeeOfStep(swap, tokens), 0, 2)
-  }));
-  return {
-    ...bestRoute,
-    result: {
-      ...bestRoute.result,
-      swaps: swapsWithFee
-    }
-  };
-}
 
 const createSelectors = _store => {
   let store = _store;
@@ -954,11 +1011,52 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
         inputUsdValue: getUsdValue(state.fromToken, amount)
       })
     }));
+  },
+  retry: pendingSwap => {
+    const {
+      tokens,
+      blockchains
+    } = useMetaStore.getState().meta;
+    const balances = useWalletsStore.getState().balances;
+    const failedIndex = pendingSwap.status === 'failed' ? pendingSwap.steps.findIndex(s => s.status === 'failed') : null;
+    if (failedIndex === null || failedIndex < 0) return;
+    const firstStep = pendingSwap.steps[0];
+    const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
+    const fromChain = blockchains.find(blockchain => blockchain.name === firstStep.fromBlockchain) || null;
+    const toChain = blockchains.find(blockchain => blockchain.name === lastStep.toBlockchain) || null;
+    const fromToken = tokens.find(token => tokensAreEqual(token, {
+      blockchain: firstStep.fromBlockchain,
+      symbol: firstStep.fromSymbol,
+      address: firstStep.fromSymbolAddress
+    }));
+    const toToken = tokens.find(token => tokensAreEqual(token, {
+      blockchain: lastStep.toBlockchain,
+      symbol: lastStep.toSymbol,
+      address: lastStep.toSymbolAddress
+    }));
+    const sortedSourceTokens = getSortedTokens(fromChain, tokens, balances, []);
+    const sortedDestinationTokens = getSortedTokens(toChain, tokens, balances, []);
+    const inputAmount = pendingSwap.inputAmount;
+    set({
+      fromChain,
+      fromToken,
+      inputAmount,
+      outputAmount: null,
+      inputUsdValue: new BigNumber(0),
+      outputUsdValue: new BigNumber(0),
+      toChain,
+      toToken,
+      bestRoute: null,
+      loading: false,
+      error: '',
+      sourceTokens: sortedSourceTokens,
+      destinationTokens: sortedDestinationTokens
+    });
   }
 }))));
 const bestRoute = (bestRouteStore, settingsStore) => {
   let abortController = null;
-  const fetchBestRoute = () => {
+  const fetchBestRoute = debounce(() => {
     const {
       fromToken,
       toToken,
@@ -998,7 +1096,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
         loading: false
       });
     });
-  };
+  }, 600);
   useBestRouteStore.subscribe(state => ({
     fromChain: state.fromChain,
     fromToken: state.fromToken,
@@ -1084,7 +1182,7 @@ function UpdateUrl() {
       toChainString = '',
       toTokenString = '',
       fromAmount = '';
-    if (loadingStatus !== 'success' && ![navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname)) {
+    if (loadingStatus !== 'success' && location.pathname != navigationRoutes.confirmSwap) {
       fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
       fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
       toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
@@ -1647,7 +1745,7 @@ function Home(props) {
     disabled: swapButtonState.disabled,
     onClick: () => {
       if (swapButtonState.title === 'Connect Wallet') navigate(navigationRoutes.wallets);else {
-        navigate(navigationRoutes.confirmWallets, {
+        navigate(navigationRoutes.confirmSwap, {
           replace: true
         });
       }
@@ -1664,12 +1762,12 @@ const Route = _ref => {
   const navigate = useNavigate$1();
   const ref = useRef(true);
   useEffect(() => {
-    if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) navigate(navigationRoutes.home + location.search, {
+    if (location.pathname === navigationRoutes.confirmSwap && ref.current) navigate(navigationRoutes.home + location.search, {
       state: 'redirect'
     });
     ref.current = false;
   }, []);
-  if ([navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(location.pathname) && ref.current) return React.createElement(Home, Object.assign({}, props));
+  if (location.pathname === navigationRoutes.confirmSwap && ref.current) return React.createElement(Home, Object.assign({}, props));
   return React.createElement(React.Fragment, null, " ", children);
 };
 function AppRouter(_ref2) {
@@ -1679,52 +1777,34 @@ function AppRouter(_ref2) {
   } = _ref2;
   const isRouterInContext = useInRouterContext$1();
   const Router = isRouterInContext ? Route : MemoryRouter;
-  return React.createElement(React.Fragment, null, React.createElement(Router, Object.assign({}, props), children), isRouterInContext && React.createElement(UpdateUrl, null));
-}
-
-function ChangeSlippageButton() {
-  const navigate = useNavigate();
-  return React.createElement(Button, {
-    type: "primary",
-    variant: "outlined",
-    size: "small",
-    onClick: () => navigate(navigationRoutes.settings)
-  }, "Change Slippage");
-}
-
-function HighSlippageWarning(props) {
-  const {
-    selectedSlippage
-  } = props;
-  return React.createElement(Alert, {
-    type: "warning",
-    footer: React.createElement(ChangeSlippageButton, null)
-  }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.");
-}
-
-function ConfirmSwapExtraMessages(props) {
   const {
-    selectedSlippage
-  } = props;
-  const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
-  return React.createElement(React.Fragment, null, highSlippage && React.createElement(HighSlippageWarning, {
-    selectedSlippage: selectedSlippage
-  }));
+    blockchains
+  } = useMetaStore.use.meta();
+  const evmChains = blockchains.filter(isEvmBlockchain);
+  useQueueManager({
+    lastConnectedWallet: props.lastConnectedWallet,
+    clearDisconnectedWallet: props.clearDisconnectedWallet,
+    disconnectedWallet: props.disconnectedWallet,
+    evmChains,
+    notifier: () => {}
+  });
+  return React.createElement(React.Fragment, null, React.createElement(Router, Object.assign({}, props), children), isRouterInContext && React.createElement(UpdateUrl, null));
 }
 
 function useNavigateBack() {
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
   const navigateBackFrom = currentRoute => {
+    if (currentRoute === navigationRoutes.swapDetails) return navigate(navigationRoutes.swaps, {
+      replace: true
+    });
     if (!isRouterInContext || window.history.state && window.history.state.idx > 0) navigate(-1);else {
-      if ([navigationRoutes.fromChain, navigationRoutes.fromToken, navigationRoutes.toChain, navigationRoutes.toToken, navigationRoutes.settings, navigationRoutes.wallets, navigationRoutes.swaps, navigationRoutes.confirmWallets].includes(currentRoute)) navigate(navigationRoutes.home, {
+      if ([navigationRoutes.fromChain, navigationRoutes.fromToken, navigationRoutes.toChain, navigationRoutes.toToken, navigationRoutes.settings, navigationRoutes.wallets, navigationRoutes.swaps, navigationRoutes.confirmSwap].includes(currentRoute)) navigate(navigationRoutes.home, {
         replace: true
       });else if (currentRoute === navigationRoutes.liquiditySources) navigate(navigationRoutes.settings, {
         replace: true
       });else if (currentRoute === navigationRoutes.swapDetails) navigate(navigationRoutes.swaps, {
         replace: true
-      });else if (currentRoute === navigationRoutes.confirmSwap) navigate(navigationRoutes.confirmWallets, {
-        replace: true
       });
     }
   };
@@ -1733,6 +1813,176 @@ function useNavigateBack() {
   };
 }
 
+const Box$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%'
+});
+const Container$3 = /*#__PURE__*/styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300'
+      },
+      outlined: {
+        border: '1px solid $neutrals300'
+      }
+    }
+  },
+  defaultVariants: {
+    type: 'filled'
+  },
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px'
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    },
+    '.amount': {
+      width: '30%'
+    }
+  }
+});
+const StyledImage$1 = /*#__PURE__*/styled('img', {
+  width: '$24',
+  maxHeight: '$24'
+});
+const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px'
+});
+const OutputContainer$1 = /*#__PURE__*/styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$background',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8'
+});
+function TokenPreview(props) {
+  const {
+    chain,
+    token,
+    loadingStatus
+  } = props;
+  const {
+    t
+  } = useTranslation();
+  const ItemSuffix = React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
+    color: "error",
+    size: 24
+  }));
+  return React.createElement(Box$1, null, React.createElement(Container$3, {
+    type: 'outlined'
+  }, React.createElement("div", {
+    className: "head"
+  }, React.createElement(Typography, {
+    variant: "body2",
+    color: "neutrals800"
+  }, props.label), React.createElement(Typography, {
+    variant: "caption",
+    color: "neutrals600"
+  }, `$${numberToString(props.usdValue)}`)), React.createElement("div", {
+    className: "form"
+  }, React.createElement(Button, {
+    className: "selectors",
+    variant: "outlined",
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage$1, {
+      src: chain.logo
+    }) : React.createElement(ImagePlaceholder$1, null),
+    suffix: ItemSuffix,
+    align: "start",
+    size: "large"
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement(Button, {
+    className: "selectors",
+    variant: "outlined",
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && token ? React.createElement(StyledImage$1, {
+      src: token.image
+    }) : React.createElement(ImagePlaceholder$1, null),
+    suffix: ItemSuffix,
+    size: "large",
+    align: "start"
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement("div", {
+    className: "amount"
+  }, React.createElement(OutputContainer$1, null, React.createElement(Typography, {
+    variant: "h4"
+  }, props.amount))))));
+}
+
+const Container$4 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  fontSize: '$12',
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+function RoutesOverview(props) {
+  if (!props.routes) return null;
+  const swaps = props.routes.result?.swaps;
+  return React.createElement(Container$4, null, React.createElement("div", {
+    className: "routes"
+  }, swaps?.map((swap, idx) => {
+    const isLast = idx + 1 == swaps.length;
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+      className: "route"
+    }, swap.from.symbol), React.createElement(ChevronRightIcon, {
+      size: 12
+    }), isLast ? React.createElement("div", {
+      className: "route"
+    }, swap.to.symbol) : null);
+  })), props.totalFee ? React.createElement("div", {
+    className: "fee"
+  }, React.createElement(GasIcon, {
+    size: 12
+  }), React.createElement(Spacer, {
+    size: 4
+  }), "$", props.totalFee) : null);
+}
+
 var ConfirmSwapErrorTypes;
 (function (ConfirmSwapErrorTypes) {
   ConfirmSwapErrorTypes[ConfirmSwapErrorTypes["NO_ROUTE"] = 0] = "NO_ROUTE";
@@ -1749,106 +1999,6 @@ var ConfirmSwapWarningTypes;
   ConfirmSwapWarningTypes[ConfirmSwapWarningTypes["INSUFFICIENT_BALANCE"] = 4] = "INSUFFICIENT_BALANCE";
 })(ConfirmSwapWarningTypes || (ConfirmSwapWarningTypes = {}));
 
-function MinRequiredSlippage(_ref) {
-  let {
-    minRequiredSlippage
-  } = _ref;
-  return React.createElement(Typography, {
-    variant: "body2"
-  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React.createElement(ChangeSlippageButton, null));
-}
-
-function ConfirmSwapErrors(errors) {
-  return errors.flatMap(error => {
-    switch (error.type) {
-      case ConfirmSwapErrorTypes.NO_ROUTE:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "No routes found. Please try again later.");
-      case ConfirmSwapErrorTypes.REQUEST_FAILED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`);
-      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route updated and price impact is too high, try again later!");
-      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
-        return React.createElement(MinRequiredSlippage, {
-          minRequiredSlippage: error.minRequiredSlippage
-        });
-      default:
-        return [];
-    }
-  });
-}
-
-const List = /*#__PURE__*/styled('ul', {
-  variants: {
-    showListStyle: {
-      true: {
-        paddingLeft: '$24'
-      }
-    }
-  }
-});
-const ListItem = /*#__PURE__*/styled('li', {
-  variants: {
-    showListStyle: {
-      true: {
-        listStyleType: 'disc',
-        listStylePosition: 'outside'
-      }
-    }
-  }
-});
-const Message = /*#__PURE__*/styled(Typography, {
-  display: 'block'
-});
-function BalanceWarnings(_ref) {
-  let {
-    messages
-  } = _ref;
-  const showListStyle = messages.length > 1;
-  return React.createElement(List, {
-    showListStyle: showListStyle
-  }, messages.map(warning => React.createElement(ListItem, {
-    showListStyle: showListStyle
-  }, React.createElement(Message, {
-    variant: "body2"
-  }, warning))));
-}
-
-function ConfirmSwapWarnings(warnings) {
-  return warnings.flatMap(warning => {
-    switch (warning.type) {
-      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route has been updated.");
-      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, `Output amount changed to ${warning.newOutputAmount} 
-      (${warning.percentageChange}% change).`);
-      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route swappers has been updated.");
-      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
-        return React.createElement(Typography, {
-          variant: "body2"
-        }, "Route internal coins has been updated.");
-      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
-        return React.createElement(BalanceWarnings, {
-          messages: warning.messages
-        });
-      default:
-        return [];
-    }
-  });
-}
-
 function useConfirmSwap() {
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();
@@ -1889,6 +2039,7 @@ function useConfirmSwap() {
       proceedAnywayRef.current = false;
       if (confiremedRouteRef.current) {
         const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRouteRef.current, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        //@ts-ignore
         return newSwap;
       }
       return;
@@ -1951,6 +2102,7 @@ function useConfirmSwap() {
           disabledSwappersGroups: disabledLiquiditySources
         };
         const newSwap = calculatePendingSwap(inputAmount.toString(), confiremedRoute, getWalletsForNewSwap(selectedWallets), swapSettings, false, meta);
+        //@ts-ignore
         return newSwap;
       } else if (!proceedAnywayRef.current) {
         proceedAnywayRef.current = true;
@@ -1980,31 +2132,194 @@ function useConfirmSwap() {
   };
 }
 
+function ChangeSlippageButton() {
+  const navigate = useNavigate();
+  return React.createElement(Button, {
+    type: "primary",
+    variant: "outlined",
+    size: "small",
+    onClick: () => navigate(navigationRoutes.settings)
+  }, "Change Slippage");
+}
+
+const StyledMessage = /*#__PURE__*/styled(Typography, {
+  color: '$error500 !important'
+});
+function MinRequiredSlippage(_ref) {
+  let {
+    minRequiredSlippage
+  } = _ref;
+  return React.createElement(StyledMessage, {
+    variant: "body2"
+  }, "We recommend you to increase slippage to at least \u00A0", minRequiredSlippage, "\u00A0 for this route.", React.createElement(Spacer, {
+    size: 8,
+    direction: "vertical"
+  }), React.createElement(ChangeSlippageButton, null));
+}
+
+function ConfirmSwapErrors(errors) {
+  return errors.flatMap(error => {
+    switch (error.type) {
+      case ConfirmSwapErrorTypes.NO_ROUTE:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, "No routes found. Please try again later.");
+      case ConfirmSwapErrorTypes.REQUEST_FAILED:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, `Failed to confirm swap ${error.status ? `'status': ${error.status})` : ''}, please try again.`);
+      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, "Route updated and price impact is too high, try again later!");
+      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
+        return React.createElement(MinRequiredSlippage, {
+          minRequiredSlippage: error.minRequiredSlippage
+        });
+      default:
+        return [];
+    }
+  });
+}
+
+const List = /*#__PURE__*/styled('ul', {
+  variants: {
+    showListStyle: {
+      true: {
+        paddingLeft: '$24'
+      }
+    }
+  }
+});
+const ListItem = /*#__PURE__*/styled('li', {
+  variants: {
+    showListStyle: {
+      true: {
+        listStyleType: 'disc',
+        listStylePosition: 'outside'
+      }
+    }
+  }
+});
+const Message = /*#__PURE__*/styled(Typography, {
+  display: 'block',
+  color: '$warning500 !important'
+});
+function BalanceWarnings(_ref) {
+  let {
+    messages
+  } = _ref;
+  const showListStyle = messages.length > 1;
+  return React.createElement(List, {
+    showListStyle: showListStyle
+  }, messages.map(warning => React.createElement(ListItem, {
+    showListStyle: showListStyle
+  }, React.createElement(Message, {
+    variant: "body2"
+  }, warning))));
+}
+
+function ConfirmSwapWarnings(warnings) {
+  return warnings.flatMap(warning => {
+    switch (warning.type) {
+      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, "Route has been updated.");
+      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, `Output amount changed to ${warning.newOutputAmount} 
+      (${warning.percentageChange}% change).`);
+      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, "Route swappers has been updated.");
+      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
+        return React.createElement(Typography, {
+          variant: "body2"
+        }, "Route internal coins has been updated.");
+      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
+        return React.createElement(BalanceWarnings, {
+          messages: warning.messages
+        });
+      default:
+        return [];
+    }
+  });
+}
+
+function HighSlippageWarning(props) {
+  const {
+    selectedSlippage
+  } = props;
+  return React.createElement(Alert, {
+    type: "warning",
+    footer: React.createElement(ChangeSlippageButton, null)
+  }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.");
+}
+
+function ConfirmSwapExtraMessages(props) {
+  const {
+    selectedSlippage
+  } = props;
+  const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
+  return React.createElement(React.Fragment, null, highSlippage && React.createElement(HighSlippageWarning, {
+    selectedSlippage: selectedSlippage
+  }));
+}
+
 function ConfirmSwapPage() {
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  const navigate = useNavigate();
   const {
     navigateBackFrom
   } = useNavigateBack();
-  const {
-    manager
-  } = useManager();
-  const navigate = useNavigate();
   const bestRoute = useBestRouteStore.use.bestRoute();
   const fetchingBestRoute = useBestRouteStore.use.loading();
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const {
+    blockchains,
     tokens
   } = useMetaStore.use.meta();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
+  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
-  const selectedSlippage = customSlippage || slippage;
+  const {
+    manager
+  } = useManager();
   const {
     loading,
     errors,
     warnings,
     confirmSwap
   } = useConfirmSwap();
+  const selectedSlippage = customSlippage || slippage;
   const showHighSlippageWarning = !errors.find(error => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE);
+  const {
+    getWalletInfo,
+    connect
+  } = useWallets();
+  const confirmDisabled = fetchingBestRoute || !requiredWallets(bestRoute).every(chain => selectedWallets.map(wallet => wallet.chain).includes(chain));
+  const firstStep = bestRoute?.result?.swaps[0];
+  const lastStep = bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
+  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
+  const toAmount = decimalNumber(lastStep?.toAmount, 3);
+  useEffect(() => {
+    initSelectedWallets();
+  }, []);
+  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
+  const handleConnectChain = wallet => {
+    const network = wallet;
+    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
+  };
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
   return React.createElement(ConfirmSwap, {
+    requiredWallets: getRequiredChains(bestRoute),
+    selectableWallets: selectableWallets,
+    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
     onConfirm: () => {
       confirmSwap?.().then(swap => {
         if (swap) {
@@ -2020,16 +2335,51 @@ function ConfirmSwapPage() {
         }
       });
     },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmSwap),
-    bestRoute: getBestRouteWithCalculatedFees(bestRoute, tokens),
-    loading: loading,
-    errors: ConfirmSwapErrors(errors),
-    warnings: ConfirmSwapWarnings(warnings),
-    extraMessages: showHighSlippageWarning && React.createElement(ConfirmSwapExtraMessages, {
+    onChange: wallet => setSelectedWallet(wallet),
+    confirmDisabled: confirmDisabled,
+    handleConnectChain: wallet => handleConnectChain(wallet),
+    isExperimentalChain: wallet => getKeplrCompatibleConnectedWallets(selectableWallets).length > 0 ? isExperimentalChain(blockchains, wallet) : false,
+    previewInputs: React.createElement(React.Fragment, null, React.createElement(TokenPreview, {
+      chain: {
+        displayName: firstStep?.from.blockchain || '',
+        logo: firstStep?.from.blockchainLogo || ''
+      },
+      token: {
+        symbol: firstStep?.from.symbol || '',
+        image: firstStep?.from.logo || ''
+      },
+      usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
+      amount: fromAmount,
+      label: t('From'),
+      loadingStatus: 'success'
+    }), React.createElement(Spacer, {
+      size: 12,
+      direction: "vertical"
+    }), React.createElement(TokenPreview, {
+      chain: {
+        displayName: lastStep?.to.blockchain || '',
+        logo: lastStep?.to.blockchainLogo || ''
+      },
+      token: {
+        symbol: lastStep?.to.symbol || '',
+        image: lastStep?.to.logo || ''
+      },
+      usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
+      amount: toAmount,
+      label: t('To'),
+      loadingStatus: 'success'
+    })),
+    previewRoutes: React.createElement(RoutesOverview, {
+      routes: bestRoute,
+      totalFee: numberToString(totalFeeInUsd, 0, 2)
+    }),
+    loading: loading,
+    errors: ConfirmSwapErrors(errors),
+    warnings: ConfirmSwapWarnings(warnings),
+    extraMessages: showHighSlippageWarning && React.createElement(ConfirmSwapExtraMessages, {
       selectedSlippage: selectedSlippage
     }),
-    confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!',
-    confirmButtonDisabled: fetchingBestRoute
+    confirmButtonTitle: warnings.length > 0 || errors.length > 0 ? 'Proceed anyway!' : 'Confirm swap!'
   });
 }
 
@@ -2117,436 +2467,185 @@ function SelectChainPage(props) {
     supportedChains
   } = props;
   const blockchains = supportedChains === 'all' ? useMetaStore.use.meta().blockchains : supportedChains;
-  const loadingStatus = useMetaStore.use.loadingStatus();
-  const fromChain = useBestRouteStore.use.fromChain();
-  const toChain = useBestRouteStore.use.toChain();
-  const setFromChain = useBestRouteStore.use.setFromChain();
-  const setToChain = useBestRouteStore.use.setToChain();
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  return React.createElement(BlockchainSelector, {
-    type: type === 'from' ? 'Source' : 'Destination',
-    list: blockchains,
-    selected: type === 'from' ? fromChain : toChain,
-    loadingStatus: loadingStatus,
-    onChange: chain => {
-      if (type === 'from') setFromChain(chain, true);else setToChain(chain, true);
-      navigateBackFrom(navigationRoutes.fromChain);
-    },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.fromChain)
-  });
-}
-
-function SelectTokenPage(props) {
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const {
-    type,
-    supportedTokens
-  } = props;
-  const sourceTokens = useBestRouteStore.use.sourceTokens();
-  const destinationTokens = useBestRouteStore.use.destinationTokens();
-  const supportedSourceTokens = supportedTokens === 'all' ? sourceTokens : sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
-  const supportedDestinationTokens = supportedTokens === 'all' ? destinationTokens : destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
-  console.log(supportedSourceTokens);
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toToken = useBestRouteStore.use.toToken();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToToken = useBestRouteStore.use.setToToken();
-  return React.createElement(TokenSelector, {
-    type: type === 'from' ? 'Source' : 'Destination',
-    list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
-    selected: type === 'from' ? fromToken : toToken,
-    onChange: token => {
-      if (type === 'from') setFromToken(token);else setToToken(token);
-      navigateBackFrom(navigationRoutes.fromToken);
-    },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken)
-  });
-}
-
-function SettingsPage(_ref) {
-  let {
-    supportedSwappers
-  } = _ref;
-  const slippage = useSettingsStore.use.slippage();
-  const setSlippage = useSettingsStore.use.setSlippage();
-  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
-  const customSlippage = useSettingsStore.use.customSlippage();
-  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
-  const theme = useSettingsStore.use.theme();
-  const setTheme = useSettingsStore.use.setTheme();
-  const swappers = useMetaStore.use.meta().swappers;
-  const navigate = useNavigate();
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const infiniteApprove = useSettingsStore.use.infiniteApprove();
-  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
-  const uniqueSwappersGroups = [];
-  removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
-    return swappers.find(s => s.swapperGroup === swapperGroup);
-  }).find(s => {
-    if (s) {
-      for (const type of s.types) {
-        uniqueSwappersGroups.push({
-          title: s.swapperGroup,
-          logo: s.logo,
-          type,
-          selected: !disabledLiquiditySources.includes(s.swapperGroup)
-        });
-      }
-    }
-  });
-  supportedSwappers !== 'all' && uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0);
-  const supportedUniqueSwappersGroups = supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups;
-  return React.createElement(Settings, {
-    slippages: SLIPPAGES,
-    selectedSlippage: slippage,
-    onSlippageChange: slippage => setSlippage(slippage),
-    onLiquiditySourcesClick: () => navigate(navigationRoutes.liquiditySources),
-    onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
-    liquiditySources: supportedUniqueSwappersGroups,
-    selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
-    customSlippage: customSlippage || NaN,
-    onCustomSlippageChange: setCustomSlippage,
-    minSlippage: MIN_SLIPPGAE,
-    maxSlippage: MAX_SLIPPAGE,
-    selectedTheme: theme,
-    onThemeChange: setTheme,
-    infiniteApprove: infiniteApprove,
-    toggleInfiniteApprove: toggleInfiniteApprove
-  });
-}
-
-const ListContainer = /*#__PURE__*/styled('div', {
-  display: 'grid',
-  gap: '.5rem',
-  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
-  height: '450px',
-  alignContent: 'baseline',
-  padding: '0.5rem'
-});
-const AlertContainer = /*#__PURE__*/styled('div', {
-  paddingBottom: '$16'
-});
-function WalletsPage(_ref) {
-  let {
-    supportedWallets,
-    multiWallets
-  } = _ref;
-  const {
-    navigateBackFrom
-  } = useNavigateBack();
-  const {
-    state,
-    disconnect,
-    getWalletInfo,
-    connect
-  } = useWallets();
-  const wallets = getlistWallet(state, getWalletInfo, supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets);
-  const walletsRef = useRef();
-  let sortedWallets = detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
-  sortedWallets = sortWalletsBasedOnState(sortedWallets);
-  const [walletErrorMessage, setWalletErrorMessage] = useState('');
-  const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
-  const {
-    t
-  } = useTranslation();
-  const onSelectWallet = async type => {
-    const wallet = state(type);
-    try {
-      if (walletErrorMessage) setWalletErrorMessage('');
-      if (wallet.connected) {
-        await disconnect(type);
-      } else {
-        if (!multiWallets && !!wallets.find(w => w.state === WalletState.CONNECTED)) {
-          return;
-        }
-        await connect(type);
-      }
-    } catch (e) {
-      setWalletErrorMessage('Error: ' + e?.message);
-    }
-  };
-  const disconnectConnectingWallets = () => {
-    const connectingWallets = walletsRef.current?.filter(wallet => wallet.state === WalletState.CONNECTING) || [];
-    for (const wallet of connectingWallets) {
-      disconnect(wallet.type);
-    }
-  };
-  useEffect(() => {
-    toggleConnectWalletsButton();
-    return () => {
-      disconnectConnectingWallets();
-      toggleConnectWalletsButton();
-    };
-  }, []);
-  useEffect(() => {
-    walletsRef.current = wallets;
-  }, [wallets]);
-  return React.createElement(SecondaryPage, {
-    title: t('Select Wallet') || '',
-    textField: false,
-    onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
-  }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
-    type: "error"
-  }, walletErrorMessage)), React.createElement(ListContainer, null, sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
-    key: `${index}-${wallet.type}`,
-    onClick: onSelectWallet
-  }))))));
-}
-
-const Box$1 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%'
-});
-const Container$3 = /*#__PURE__*/styled('div', {
-  boxSizing: 'border-box',
-  borderRadius: '$5',
-  padding: '$8 $16 $16 $16',
-  variants: {
-    type: {
-      filled: {
-        backgroundColor: '$neutrals300'
-      },
-      outlined: {
-        border: '1px solid $neutrals300'
-      }
-    }
-  },
-  defaultVariants: {
-    type: 'filled'
-  },
-  '.head': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: '32px'
-  },
-  '.form': {
-    display: 'flex',
-    width: '100%',
-    padding: '$2 0',
-    '.selectors': {
-      width: '35%',
-      '._text': {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-      }
-    },
-    '.amount': {
-      width: '30%'
-    }
-  }
-});
-const StyledImage$1 = /*#__PURE__*/styled('img', {
-  width: '$24',
-  maxHeight: '$24'
-});
-const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
-  width: '24px',
-  height: '24px',
-  backgroundColor: '$neutrals300',
-  borderRadius: '99999px'
-});
-const OutputContainer$1 = /*#__PURE__*/styled('div', {
-  windth: '100%',
-  height: '$48',
-  borderRadius: '$5',
-  backgroundColor: '$background',
-  border: '1px solid transparent',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '$8',
-  paddingRight: '$8'
-});
-function TokenPreview(props) {
-  const {
-    chain,
-    token,
-    loadingStatus
-  } = props;
-  const {
-    t
-  } = useTranslation();
-  const ItemSuffix = React.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
-    color: "error",
-    size: 24
-  }));
-  return React.createElement(Box$1, null, React.createElement(Container$3, {
-    type: 'outlined'
-  }, React.createElement("div", {
-    className: "head"
-  }, React.createElement(Typography, {
-    variant: "body2",
-    color: "neutrals800"
-  }, props.label), React.createElement(Typography, {
-    variant: "caption",
-    color: "neutrals600"
-  }, `$${numberToString(props.usdValue)}`)), React.createElement("div", {
-    className: "form"
-  }, React.createElement(Button, {
-    className: "selectors",
-    variant: "outlined",
-    loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage$1, {
-      src: chain.logo
-    }) : React.createElement(ImagePlaceholder$1, null),
-    suffix: ItemSuffix,
-    align: "start",
-    size: "large"
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
-    size: 12
-  }), React.createElement(Button, {
-    className: "selectors",
-    variant: "outlined",
-    loading: loadingStatus === 'loading',
-    prefix: loadingStatus === 'success' && token ? React.createElement(StyledImage$1, {
-      src: token.image
-    }) : React.createElement(ImagePlaceholder$1, null),
-    suffix: ItemSuffix,
-    size: "large",
-    align: "start"
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
-    size: 12
-  }), React.createElement("div", {
-    className: "amount"
-  }, React.createElement(OutputContainer$1, null, React.createElement(Typography, {
-    variant: "h4"
-  }, props.amount))))));
-}
-
-const Container$4 = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '$8',
-  borderRadius: '$5',
-  backgroundColor: '$neutrals300',
-  color: '$neutrals800',
-  fontSize: '$12',
-  '.routes': {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  '.fee': {
-    display: 'flex',
-    alignItems: 'center'
-  }
-});
-function RoutesOverview(props) {
-  if (!props.routes) return null;
-  const swaps = props.routes.result?.swaps;
-  return React.createElement(Container$4, null, React.createElement("div", {
-    className: "routes"
-  }, swaps?.map((swap, idx) => {
-    const isLast = idx + 1 == swaps.length;
-    return React.createElement(React.Fragment, null, React.createElement("div", {
-      className: "route"
-    }, swap.from.symbol), React.createElement(ChevronRightIcon, {
-      size: 12
-    }), isLast ? React.createElement("div", {
-      className: "route"
-    }, swap.to.symbol) : null);
-  })), props.totalFee ? React.createElement("div", {
-    className: "fee"
-  }, React.createElement(GasIcon, {
-    size: 12
-  }), React.createElement(Spacer, {
-    size: 4
-  }), "$", props.totalFee) : null);
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  return React.createElement(BlockchainSelector, {
+    type: type === 'from' ? 'Source' : 'Destination',
+    list: blockchains,
+    selected: type === 'from' ? fromChain : toChain,
+    loadingStatus: loadingStatus,
+    onChange: chain => {
+      if (type === 'from') setFromChain(chain, true);else setToChain(chain, true);
+      navigateBackFrom(navigationRoutes.fromChain);
+    },
+    onBack: navigateBackFrom.bind(null, navigationRoutes.fromChain)
+  });
+}
+
+function SelectTokenPage(props) {
+  const {
+    navigateBackFrom
+  } = useNavigateBack();
+  const {
+    type,
+    supportedTokens
+  } = props;
+  const sourceTokens = useBestRouteStore.use.sourceTokens();
+  const destinationTokens = useBestRouteStore.use.destinationTokens();
+  const supportedSourceTokens = supportedTokens === 'all' ? sourceTokens : sourceTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
+  const supportedDestinationTokens = supportedTokens === 'all' ? destinationTokens : destinationTokens.filter(token => supportedTokens.some(supportedToken => tokensAreEqual(supportedToken, token)));
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToToken = useBestRouteStore.use.setToToken();
+  return React.createElement(TokenSelector, {
+    type: type === 'from' ? 'Source' : 'Destination',
+    list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
+    selected: type === 'from' ? fromToken : toToken,
+    onChange: token => {
+      if (type === 'from') setFromToken(token);else setToToken(token);
+      navigateBackFrom(navigationRoutes.fromToken);
+    },
+    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken)
+  });
 }
 
-function ConfirmWalletsPage() {
+function SettingsPage(_ref) {
+  let {
+    supportedSwappers
+  } = _ref;
+  const slippage = useSettingsStore.use.slippage();
+  const setSlippage = useSettingsStore.use.setSlippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
+  const theme = useSettingsStore.use.theme();
+  const setTheme = useSettingsStore.use.setTheme();
+  const swappers = useMetaStore.use.meta().swappers;
   const navigate = useNavigate();
   const {
     navigateBackFrom
   } = useNavigateBack();
-  const bestRoute = useBestRouteStore.use.bestRoute();
+  const infiniteApprove = useSettingsStore.use.infiniteApprove();
+  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const uniqueSwappersGroups = [];
+  removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
+    return swappers.find(s => s.swapperGroup === swapperGroup);
+  }).find(s => {
+    if (s) {
+      for (const type of s.types) {
+        uniqueSwappersGroups.push({
+          title: s.swapperGroup,
+          logo: s.logo,
+          type,
+          selected: !disabledLiquiditySources.includes(s.swapperGroup)
+        });
+      }
+    }
+  });
+  supportedSwappers !== 'all' && uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0);
+  const supportedUniqueSwappersGroups = supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups;
+  return React.createElement(Settings, {
+    slippages: SLIPPAGES,
+    selectedSlippage: slippage,
+    onSlippageChange: slippage => setSlippage(slippage),
+    onLiquiditySourcesClick: () => navigate(navigationRoutes.liquiditySources),
+    onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
+    liquiditySources: supportedUniqueSwappersGroups,
+    selectedLiquiditySources: supportedUniqueSwappersGroups.filter(s => s.selected),
+    customSlippage: customSlippage || NaN,
+    onCustomSlippageChange: setCustomSlippage,
+    minSlippage: MIN_SLIPPGAE,
+    maxSlippage: MAX_SLIPPAGE,
+    selectedTheme: theme,
+    onThemeChange: setTheme,
+    infiniteApprove: infiniteApprove,
+    toggleInfiniteApprove: toggleInfiniteApprove
+  });
+}
+
+const ListContainer = /*#__PURE__*/styled('div', {
+  display: 'grid',
+  gap: '.5rem',
+  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
+  height: '450px',
+  alignContent: 'baseline',
+  padding: '0.5rem'
+});
+const AlertContainer = /*#__PURE__*/styled('div', {
+  paddingBottom: '$16'
+});
+function WalletsPage(_ref) {
+  let {
+    supportedWallets,
+    multiWallets
+  } = _ref;
   const {
-    blockchains,
-    tokens
-  } = useMetaStore.use.meta();
-  const accounts = useWalletsStore.use.accounts();
-  const selectedWallets = useWalletsStore.use.selectedWallets();
-  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
-  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
+    navigateBackFrom
+  } = useNavigateBack();
   const {
+    state,
+    disconnect,
     getWalletInfo,
     connect
   } = useWallets();
-  const confirmDisabled = !requiredWallets(bestRoute).every(chain => selectedWallets.map(wallet => wallet.chain).includes(chain));
-  const firstStep = bestRoute?.result?.swaps[0];
-  const lastStep = bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
-  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
-  const toAmount = decimalNumber(lastStep?.toAmount, 3);
+  const wallets = getlistWallet(state, getWalletInfo, supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets);
+  const walletsRef = useRef();
+  let sortedWallets = detectMobileScreens() ? wallets.filter(wallet => wallet.showOnMobile) : wallets;
+  sortedWallets = sortWalletsBasedOnState(sortedWallets);
+  const [walletErrorMessage, setWalletErrorMessage] = useState('');
+  const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
+  const {
+    t
+  } = useTranslation();
+  const onSelectWallet = async type => {
+    const wallet = state(type);
+    try {
+      if (walletErrorMessage) setWalletErrorMessage('');
+      if (wallet.connected) {
+        await disconnect(type);
+      } else {
+        if (!multiWallets && !!wallets.find(w => w.state === WalletState.CONNECTED)) {
+          return;
+        }
+        await connect(type);
+      }
+    } catch (e) {
+      setWalletErrorMessage('Error: ' + e?.message);
+    }
+  };
+  const disconnectConnectingWallets = () => {
+    const connectingWallets = walletsRef.current?.filter(wallet => wallet.state === WalletState.CONNECTING) || [];
+    for (const wallet of connectingWallets) {
+      disconnect(wallet.type);
+    }
+  };
   useEffect(() => {
-    initSelectedWallets();
+    toggleConnectWalletsButton();
+    return () => {
+      disconnectConnectingWallets();
+      toggleConnectWalletsButton();
+    };
   }, []);
-  const selectableWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
-  const handleConnectChain = wallet => {
-    const network = wallet;
-    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
-  };
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-  return React.createElement(ConfirmWallets, {
-    requiredWallets: getRequiredChains(bestRoute),
-    selectableWallets: selectableWallets,
-    onBack: navigateBackFrom.bind(null, navigationRoutes.confirmWallets),
-    onConfirm: () => navigate(navigationRoutes.confirmSwap, {
-      replace: true
-    }),
-    onChange: wallet => setSelectedWallet(wallet),
-    confirmDisabled: confirmDisabled,
-    handleConnectChain: wallet => handleConnectChain(wallet),
-    isExperimentalChain: wallet => getKeplrCompatibleConnectedWallets(selectableWallets).length > 0 ? isExperimentalChain(blockchains, wallet) : false,
-    previewInputs: React.createElement(React.Fragment, null, React.createElement(TokenPreview, {
-      chain: {
-        displayName: firstStep?.from.blockchain || '',
-        logo: firstStep?.from.blockchainLogo || ''
-      },
-      token: {
-        symbol: firstStep?.from.symbol || '',
-        image: firstStep?.from.logo || ''
-      },
-      usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
-      amount: fromAmount,
-      label: t('From'),
-      loadingStatus: 'success'
-    }), React.createElement(Spacer, {
-      size: 12,
-      direction: "vertical"
-    }), React.createElement(TokenPreview, {
-      chain: {
-        displayName: lastStep?.to.blockchain || '',
-        logo: lastStep?.to.blockchainLogo || ''
-      },
-      token: {
-        symbol: lastStep?.to.symbol || '',
-        image: lastStep?.to.logo || ''
-      },
-      usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
-      amount: toAmount,
-      label: t('To'),
-      loadingStatus: 'success'
-    })),
-    previewRoutes: React.createElement(RoutesOverview, {
-      routes: bestRoute,
-      totalFee: numberToString(totalFeeInUsd, 0, 2)
-    })
-  });
+  useEffect(() => {
+    walletsRef.current = wallets;
+  }, [wallets]);
+  return React.createElement(SecondaryPage, {
+    title: t('Select Wallet') || '',
+    textField: false,
+    onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
+  }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
+    type: "error"
+  }, walletErrorMessage)), React.createElement(ListContainer, null, sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
+    key: `${index}-${wallet.type}`,
+    onClick: onSelectWallet
+  }))))));
 }
 
 function useCopyToClipboard(resetInterval) {
@@ -2567,15 +2666,60 @@ function useCopyToClipboard(resetInterval) {
   return [isCopied, handleCopy];
 }
 
+function timeSince(timeMillis) {
+  const seconds = Math.floor((new Date().getTime() - timeMillis) / 1000);
+  let intervalType;
+  let interval = Math.floor(seconds / 31536000);
+  if (interval >= 1) {
+    intervalType = 'year';
+  } else {
+    interval = Math.floor(seconds / 2592000);
+    if (interval >= 1) {
+      intervalType = 'month';
+    } else {
+      interval = Math.floor(seconds / 86400);
+      if (interval >= 1) {
+        intervalType = 'day';
+      } else {
+        interval = Math.floor(seconds / 3600);
+        if (interval >= 1) {
+          intervalType = 'hour';
+        } else {
+          interval = Math.floor(seconds / 60);
+          if (interval >= 1) {
+            intervalType = 'minute';
+          } else {
+            interval = seconds;
+            intervalType = 'second';
+          }
+        }
+      }
+    }
+  }
+  if (interval > 1 || interval === 0) {
+    intervalType += 's';
+  }
+  return interval + ' ' + intervalType;
+}
+function getSwapDate(pendingSwap) {
+  return pendingSwap.finishTime ? `Finished ${timeSince(parseInt(pendingSwap.finishTime))} ago @ ${new Date(parseInt(pendingSwap.finishTime)).toLocaleString()}` : `Started ${timeSince(parseInt(pendingSwap.creationTime))} ago @ ${new Date(parseInt(pendingSwap.creationTime)).toLocaleString()}`;
+}
+
 function SwapDetailsPage() {
   const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
+  const {
+    canSwitchNetworkTo,
+    connect
+  } = useWallets();
+  const retry = useBestRouteStore.use.retry();
+  const navigate = useNavigate();
   const {
     navigateBackFrom
   } = useNavigateBack();
+  const [isCopied, handleCopy] = useCopyToClipboard(2000);
   const {
     manager
   } = useManager();
-  const [isCopied, handleCopy] = useCopyToClipboard(2000);
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(_ref => {
     let {
@@ -2583,20 +2727,50 @@ function SwapDetailsPage() {
     } = _ref;
     return swap.requestId === selectedSwapRequestId;
   });
-  //TODO: implement swap cancellation (move queueManager logic to queueManager/rango-preset)
   const onCancel = () => {
-    const swap = selectedSwap ? manager?.get(selectedSwap.id) : undefined;
+    const swap = manager?.get(selectedSwap?.id);
     if (swap) cancelSwap(swap);
   };
-  return React.createElement(SwapHistory, {
+  const swap = selectedSwap?.swap;
+  if (!swap) return null;
+  const currentStep = getCurrentStep(swap);
+  const currentStepBlockchain = currentStep ? getCurrentBlockchainOfOrNull(swap, currentStep) : null;
+  const currentStepWallet = currentStep ? getRelatedWalletOrNull(swap, currentStep) : null;
+  const currentStepNetworkStatus = currentStep?.networkStatus;
+  const swapMessages = getSwapMessages(swap, currentStep);
+  const networkWarningState = isNetworkStatusInWarningState(currentStep);
+  const swapDate = getSwapDate(swap);
+  const shouldRetry = shouldRetrySwap(swap);
+  const switchNetwork = !!currentStepBlockchain && !!currentStepWallet?.walletType && currentStepNetworkStatus === PendingSwapNetworkStatus.WaitingForNetworkChange && canSwitchNetworkTo(currentStepWallet?.walletType, currentStepBlockchain) ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain) : undefined;
+  const lastConvertedTokenInFailedSwap = getLastConvertedTokenInFailedSwap(swap);
+  return React.createElement(SwapHistory, Object.assign({
     onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
     //todo: move PendingSwap type to rango-types
     //@ts-ignore
-    pendingSwap: selectedSwap?.swap,
+    pendingSwap: swap,
     onCopy: handleCopy,
     isCopied: isCopied,
-    onCancel: onCancel
-  });
+    onCancel: onCancel,
+    shortMessage: swapMessages.shortMessage,
+    detailedMessage: swapMessages.detailedMessage,
+    currentStepBlockchain: currentStepBlockchain || '',
+    switchNetwork: switchNetwork,
+    type: networkWarningState ? 'warning' : swap.extraMessageSeverity || undefined,
+    date: swapDate
+  }, shouldRetry && {
+    onRetry: () => {
+      retry(swap);
+      setTimeout(() => {
+        navigate(navigationRoutes.home);
+      }, 0);
+    }
+  }, lastConvertedTokenInFailedSwap && {
+    lastConvertedTokenInFailedSwap: {
+      blockchain: lastConvertedTokenInFailedSwap.blockchain,
+      outputAmount: lastConvertedTokenInFailedSwap.outputAmount,
+      symbol: lastConvertedTokenInFailedSwap.symbol
+    }
+  }));
 }
 
 function AppRoutes(props) {
@@ -2659,9 +2833,6 @@ function AppRoutes(props) {
   }, {
     path: navigationRoutes.confirmSwap,
     element: React.createElement(ConfirmSwapPage, null)
-  }, {
-    path: navigationRoutes.confirmWallets,
-    element: React.createElement(ConfirmWalletsPage, null)
   }]);
 }
 
@@ -2712,6 +2883,12 @@ function Layout(_ref) {
     setFromToken(configs?.fromToken || null);
     setFromChain(configs?.fromChain || null);
   }, [configs?.fromToken, configs?.fromChain]);
+  useEffect(() => {
+    setToChain(null);
+    setFromChain(null);
+    setFromToken(null);
+    setToToken(null);
+  }, [configs?.fromChains, configs?.toChains, configs?.fromTokens, configs?.toTokens]);
   return React.createElement(React.Fragment, null, React.createElement(Header$1, null, React.createElement(Button, {
     size: "small",
     suffix: React.createElement(AddWalletIcon, {
@@ -2979,7 +3156,7 @@ function QueueManager(props) {
   };
   // TODO: this code copy & pasted from rango, should be refactored.
   const allBlockchains = blockchains.filter(blockchain => blockchain.enabled).reduce((blockchainsObj, blockchain) => (blockchainsObj[blockchain.name] = blockchain, blockchainsObj), {});
-  const evmBasedChains = blockchains.filter(isEvmBlockchain);
+  const evmBasedChains = blockchains.filter(isEvmBlockchain$1);
   const getSupportedChainNames = type => {
     const {
       supportedChains
@@ -3012,7 +3189,9 @@ function QueueManager(props) {
     //@ts-ignore
     queuesDefs: [swapQueueDef],
     context: context,
-    onPersistedDataLoaded: _manager => {},
+    onPersistedDataLoaded: manager => {
+      checkWaitingForNetworkChange(manager);
+    },
     isPaused: false
   }, props.children);
 }
@@ -3040,8 +3219,10 @@ const SwapBox = _ref => {
     changeLanguage
   } = useSelectLanguage();
   const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
-  const evmBasedChainNames = blockchains.filter(isEvmBlockchain).map(chain => chain.name);
-  const onUpdateState = (type, event, value, _, supportedChains) => {
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] = useState('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState();
+  const evmBasedChainNames = blockchains.filter(isEvmBlockchain$1).map(chain => chain.name);
+  const onUpdateState = (type, event, value, state, supportedChains) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
         const supportedChainNames = walletAndSupportedChainsNames(supportedChains);
@@ -3051,6 +3232,16 @@ const SwapBox = _ref => {
         disconnectWallet(type);
       }
     }
+    if (event === Events.ACCOUNTS && state.connected) {
+      const key = `${type}-${state.network}-${value}`;
+      if (state.connected) {
+        setLastConnectedWalletWithNetwork(key);
+      }
+    }
+    if (event === Events.NETWORK && state.network) {
+      const key = `${type}-${state.network}`;
+      setLastConnectedWalletWithNetwork(key);
+    }
   };
   let providers = allProviders();
   useEffect(() => {
@@ -3082,7 +3273,12 @@ const SwapBox = _ref => {
   }, React.createElement(AppRouter, {
     title: configs.title,
     titleSize: configs.titleSize,
-    titleWeight: configs.titleWeight
+    titleWeight: configs.titleWeight,
+    lastConnectedWallet: lastConnectedWalletWithNetwork,
+    disconnectedWallet: disconnectedWallet,
+    clearDisconnectedWallet: () => {
+      setDisconnectedWallet(undefined);
+    }
   }, React.createElement(Layout, {
     configs: configs
   }))))));