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

package/dist/widget-embedded.esm.js

@@ -1,4 +1,4 @@
-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 { WalletState, InfoCircleIcon, AngleDownIcon, Typography, Spacer, Button, TextField, styled, Tooltip, RetryIcon, HistoryIcon, SettingsIcon, Header as Header$1, VerticalSwapIcon, BestRoute, Alert, ChevronRightIcon, GasIcon, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Spinner, LoadingFailedAlert, Wallet, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
 import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
 import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
 import { PendingSwapNetworkStatus, useQueueManager, getCurrentStep, getCurrentBlockchainOfOrNull, getRelatedWalletOrNull, cancelSwap, swapQueueDef, checkWaitingForNetworkChange } from '@rango-dev/queue-manager-rango-preset';
@@ -16,6 +16,7 @@ import { styled as styled$1 } from '@rango-dev/ui/src/theme';
 import { allProviders } from '@rango-dev/provider-all';
 import i18n, { t } from 'i18next';
 import { useManager, Provider } from '@rango-dev/queue-manager-react';
+import dayjs from 'dayjs';
 import copy from 'copy-to-clipboard';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
@@ -585,6 +586,7 @@ function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, se
       addresses: [wallet.address]
     });
   });
+  const filteredBlockchains = selectedWallets.map(wallet => wallet.chain);
   const requestBody = {
     amount: inputAmount.toString(),
     checkPrerequisites,
@@ -602,8 +604,10 @@ function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, se
     selectedWallets: selectedWalletsMap,
     swapperGroups: disabledLiquiditySources,
     swappersGroupsExclude: true,
-    //@ts-ignore
-    slippage: slippage.toString()
+    slippage: slippage.toString(),
+    ...(checkPrerequisites && {
+      blockchains: filteredBlockchains
+    })
   };
   return requestBody;
 }
@@ -741,8 +745,13 @@ function getRequiredBalanceOfWallet(selectedWallet, fee) {
   return relatedFeeStatus.requiredAssets;
 }
 function isRouteParametersChanged(prevParams, currentParams) {
-  return prevParams.fromChain?.name !== currentParams.fromChain?.name || prevParams.toChain?.name !== currentParams.toChain?.name || prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol || prevParams.toToken?.symbol !== currentParams.toToken?.symbol || prevParams.fromToken?.blockchain !== currentParams.fromToken?.blockchain || prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain || prevParams.fromToken?.address !== currentParams.fromToken?.address || prevParams.toToken?.address !== currentParams.toToken?.address || prevParams.inputAmount !== currentParams.inputAmount || prevParams.slippage !== currentParams.slippage || prevParams.customSlippage !== currentParams.customSlippage || prevParams.disabledLiquiditySources?.length !== currentParams.disabledLiquiditySources?.length;
+  return !!currentParams.fromToken && !!currentParams.toToken && (prevParams.fromChain?.name !== currentParams.fromChain?.name || prevParams.toChain?.name !== currentParams.toChain?.name || prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol || prevParams.toToken?.symbol !== currentParams.toToken?.symbol || prevParams.fromToken?.blockchain !== currentParams.fromToken?.blockchain || prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain || prevParams.fromToken?.address !== currentParams.fromToken?.address || prevParams.toToken?.address !== currentParams.toToken?.address || prevParams.inputAmount !== currentParams.inputAmount || prevParams.slippage !== currentParams.slippage || prevParams.customSlippage !== currentParams.customSlippage || prevParams.disabledLiquiditySources?.length !== currentParams.disabledLiquiditySources?.length);
 }
+//todo: refactor bestRoute store and add loadingStatus
+const getBestRouteStatus = (loading, error) => {
+  if (loading) return 'loading';
+  if (error) return 'failed';else return 'success';
+};
 
 const createSelectors = _store => {
   let store = _store;
@@ -893,7 +902,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#
       }
     });
     return {
-      selectedWallets: state.selectedWallets.concat(selectedWallets)
+      selectedWallets: selectedWallets
     };
   }),
   setSelectedWallet: wallet => set(state => ({
@@ -925,6 +934,7 @@ useWalletsStore.subscribe(state => state.balances, balances => {
 }, {
   equalityFn: shallow
 });
+const fetchingBalanceSelector = state => !!state.balances.find(wallet => wallet.loading);
 
 const getUsdValue = (token, amount) => new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
 const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /*#__PURE__*/subscribeWithSelector(set => ({
@@ -944,6 +954,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
   setBestRoute: bestRoute => set(state => {
     let outputAmount = null;
     let outputUsdValue = ZERO;
+    if (!state.inputAmount || state.inputAmount === '0') return {};
     if (!!bestRoute) {
       outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber(bestRoute.result?.outputAmount) : null;
       outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
@@ -1000,6 +1011,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
     toToken: token
   })),
   setInputAmount: amount => {
+    console.log(amount, typeof amount);
     set(state => ({
       inputAmount: amount,
       ...(!amount && {
@@ -1042,7 +1054,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
       fromToken,
       inputAmount,
       outputAmount: null,
-      inputUsdValue: new BigNumber(0),
+      inputUsdValue: getUsdValue(fromToken || null, inputAmount),
       outputUsdValue: new BigNumber(0),
       toChain,
       toToken,
@@ -1056,7 +1068,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
 }))));
 const bestRoute = (bestRouteStore, settingsStore) => {
   let abortController = null;
-  const fetchBestRoute = debounce(() => {
+  const fetchBestRoute = () => {
     const {
       fromToken,
       toToken,
@@ -1067,12 +1079,12 @@ const bestRoute = (bestRouteStore, settingsStore) => {
       customSlippage,
       disabledLiquiditySources
     } = settingsStore.getState();
-    if (!fromToken || !toToken || !inputAmount) return;
+    if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
     abortController?.abort();
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
     const requestBody = createBestRouteRequestBody(fromToken, toToken, inputAmount, [], [], disabledLiquiditySources, userSlippage, false);
-    bestRouteStore.setState({
+    if (!bestRouteStore.getState().loading) bestRouteStore.setState({
       loading: true,
       bestRoute: null,
       outputAmount: null,
@@ -1096,14 +1108,37 @@ const bestRoute = (bestRouteStore, settingsStore) => {
         loading: false
       });
     });
-  }, 600);
+  };
+  const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
+  const bestRouteParamsListener = () => {
+    const {
+      fromToken,
+      toToken,
+      inputAmount,
+      inputUsdValue
+    } = useBestRouteStore.getState();
+    if (!inputAmount || inputAmount === '0') return;
+    if (tokensAreEqual(fromToken, toToken)) return bestRouteStore.setState({
+      loading: false,
+      bestRoute: null,
+      outputAmount: new BigNumber(inputAmount),
+      outputUsdValue: inputUsdValue
+    });
+    if (!bestRouteStore.getState().loading) bestRouteStore.setState({
+      loading: true,
+      bestRoute: null,
+      outputAmount: null,
+      outputUsdValue: new BigNumber(0)
+    });
+    debouncedFetchBestRoute();
+  };
   useBestRouteStore.subscribe(state => ({
     fromChain: state.fromChain,
     fromToken: state.fromToken,
     toChain: state.toChain,
     toToken: state.toToken,
     inputAmount: state.inputAmount
-  }), fetchBestRoute.bind(null), {
+  }), bestRouteParamsListener, {
     equalityFn: (prevState, state) => {
       if (isRouteParametersChanged(prevState, state)) return false;else return true;
     }
@@ -1112,7 +1147,7 @@ const bestRoute = (bestRouteStore, settingsStore) => {
     slippage: state.slippage,
     customSlippage: state.customSlippage,
     disabledLiquiditySources: state.disabledLiquiditySources
-  }), fetchBestRoute.bind(null), {
+  }), bestRouteParamsListener, {
     equalityFn: (prevState, state) => {
       if (isRouteParametersChanged(prevState, state)) return false;else return true;
     }
@@ -1137,11 +1172,15 @@ var SearchParams;
 const useUiStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()(set => ({
   connectWalletsButtonDisabled: false,
   selectedSwapRequestId: null,
+  currentPage: '',
   toggleConnectWalletsButton: () => set(state => ({
     connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled
   })),
   setSelectedSwap: requestId => set({
     selectedSwapRequestId: requestId
+  }),
+  setCurrentPage: path => set({
+    currentPage: path
   })
 })));
 
@@ -1275,67 +1314,6 @@ function UpdateUrl() {
   return null;
 }
 
-const ButtonsContainer = /*#__PURE__*/styled('div', {
-  display: 'flex'
-});
-function HeaderButtons(props) {
-  const {
-    onClickRefresh
-  } = props;
-  const navigate = useNavigate();
-  return React.createElement(ButtonsContainer, null, React.createElement(Tooltip, {
-    content: "Refresh"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: onClickRefresh
-  }, React.createElement(RetryIcon, {
-    size: 24
-  }))), React.createElement(Tooltip, {
-    content: "Transactions History"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.swaps)
-  }, React.createElement(HistoryIcon, {
-    size: 24
-  }))), React.createElement(Tooltip, {
-    content: "Settings"
-  }, React.createElement(Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.settings)
-  }, React.createElement(SettingsIcon, {
-    size: 24
-  }))));
-}
-
-const HeaderContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%',
-  padding: '$16 0'
-});
-function Header(props) {
-  const {
-    onClickRefresh,
-    title,
-    titleSize,
-    titleWeight
-  } = props;
-  const {
-    t
-  } = useTranslation();
-  const titleStyle = css({
-    fontSize: `${titleSize}px !important`,
-    fontWeight: `${titleWeight} !important`
-  });
-  return React.createElement(HeaderContainer, null, React.createElement(Typography, {
-    variant: "h4",
-    className: titleStyle()
-  }, title ? t(title.toLocaleLowerCase()) : ''), React.createElement(HeaderButtons, {
-    onClickRefresh: onClickRefresh
-  }));
-}
-
 const Box = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -1623,6 +1601,39 @@ const errorMessages = {
   genericServerError: 'Error connecting server, please reload the app and try again'
 };
 
+const ButtonsContainer = /*#__PURE__*/styled('div', {
+  display: 'flex'
+});
+function HeaderButtons(props) {
+  const {
+    onClickRefresh
+  } = props;
+  const navigate = useNavigate();
+  return React.createElement(ButtonsContainer, null, React.createElement(Tooltip, {
+    content: "Refresh"
+  }, React.createElement(Button, {
+    variant: "ghost",
+    onClick: onClickRefresh,
+    disabled: !onClickRefresh
+  }, React.createElement(RetryIcon, {
+    size: 24
+  }))), React.createElement(Tooltip, {
+    content: "Transactions History"
+  }, React.createElement(Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.swaps)
+  }, React.createElement(HistoryIcon, {
+    size: 24
+  }))), React.createElement(Tooltip, {
+    content: "Settings"
+  }, React.createElement(Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.settings)
+  }, React.createElement(SettingsIcon, {
+    size: 24
+  }))));
+}
+
 const Container$2 = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column'
@@ -1647,9 +1658,7 @@ const Alerts = /*#__PURE__*/styled('div', {
 });
 function Home(props) {
   const {
-    title = 'SWAP',
-    titleSize = 18,
-    titleWeight = 600
+    title = 'SWAP'
   } = props;
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
@@ -1673,6 +1682,7 @@ function Home(props) {
   const bestRouteError = useBestRouteStore.use.error();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
+  const setCurrentPage = useUiStore.use.setCurrentPage();
   const swithFromAndTo = () => {
     setFromChain(toChain);
     setFromToken(toToken);
@@ -1696,11 +1706,15 @@ function Home(props) {
   const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputIsZero);
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
   const highFee = hasHighFee(totalFeeInUsd);
-  return React.createElement(Container$2, null, React.createElement(Header, {
+  useEffect(() => {
+    setCurrentPage(navigationRoutes.home);
+    return setCurrentPage.bind(null, '');
+  }, []);
+  return React.createElement(Container$2, null, React.createElement(Header$1, {
     title: title,
-    titleSize: titleSize,
-    titleWeight: titleWeight,
-    onClickRefresh: fetchBestRoute
+    suffix: React.createElement(HeaderButtons, {
+      onClickRefresh: !!bestRoute ? fetchBestRoute : undefined
+    })
   }), React.createElement(FromContainer, null, React.createElement(TokenInfo, {
     type: "From",
     chain: fromChain,
@@ -1711,7 +1725,7 @@ function Home(props) {
     variant: "ghost",
     onClick: swithFromAndTo
   }, React.createElement(VerticalSwapIcon, {
-    size: 24
+    size: 32
   }), isRouterInContext && React.createElement(SwithFromAndTo, {
     count: count
   })))), React.createElement(TokenInfo, {
@@ -1906,7 +1920,7 @@ function TokenPreview(props) {
   }, React.createElement(Typography, {
     variant: "body2",
     color: "neutrals800"
-  }, props.label), React.createElement(Typography, {
+  }, props.label), props.usdValue && React.createElement(Typography, {
     variant: "caption",
     color: "neutrals600"
   }, `$${numberToString(props.usdValue)}`)), React.createElement("div", {
@@ -2276,6 +2290,7 @@ function ConfirmSwapPage() {
   } = useNavigateBack();
   const bestRoute = useBestRouteStore.use.bestRoute();
   const fetchingBestRoute = useBestRouteStore.use.loading();
+  const fetchingBestRouteError = useBestRouteStore.use.error();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const {
     blockchains,
@@ -2287,6 +2302,7 @@ function ConfirmSwapPage() {
   const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
+  const bestRouteloadingStatus = getBestRouteStatus(fetchingBestRoute, !!fetchingBestRouteError);
   const {
     manager
   } = useManager();
@@ -2351,7 +2367,7 @@ function ConfirmSwapPage() {
       usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
       amount: fromAmount,
       label: t('From'),
-      loadingStatus: 'success'
+      loadingStatus: bestRouteloadingStatus
     }), React.createElement(Spacer, {
       size: 12,
       direction: "vertical"
@@ -2367,7 +2383,7 @@ function ConfirmSwapPage() {
       usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
       amount: toAmount,
       label: t('To'),
-      loadingStatus: 'success'
+      loadingStatus: bestRouteloadingStatus
     })),
     previewRoutes: React.createElement(RoutesOverview, {
       routes: bestRoute,
@@ -2397,6 +2413,31 @@ const getPendingSwaps = manager => {
   return result.sort((a, b) => Number(b.swap.creationTime) - Number(a.swap.creationTime));
 };
 
+const groupSwapsByDate = swaps => {
+  const output = new Map([['today', {
+    title: 'Today',
+    swaps: []
+  }], ['week', {
+    title: 'This week',
+    swaps: []
+  }], ['month', {
+    title: 'This month',
+    swaps: []
+  }], ['year', {
+    title: 'This year',
+    swaps: []
+  }], ['history', {
+    title: 'History',
+    swaps: []
+  }]]);
+  const now = dayjs();
+  swaps.forEach(swap => {
+    const swapDate = dayjs(Number(swap.creationTime));
+    if (now.isSame(swapDate, 'day')) output.get('today')?.swaps.push(swap);else if (now.isSame(swapDate, 'week')) output.get('week')?.swaps.push(swap);else if (now.isSame(swapDate, 'month')) output.get('month')?.swaps.push(swap);else if (now.isSame(swapDate, 'year')) output.get('year')?.swaps.push(swap);else output.get('history')?.swaps.push(swap);
+  });
+  return Array.from(output.values());
+};
+
 function HistoryPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
@@ -2412,16 +2453,14 @@ function HistoryPage() {
     } = _ref;
     return swap;
   });
-  return React.createElement(History
-  //todo: move PendingSwap type to rango-types
-  //@ts-ignore
-  , {
-    //todo: move PendingSwap type to rango-types
-    //@ts-ignore
+  return React.createElement(History, {
     list: pendingSwaps,
+    groupBy: groupSwapsByDate,
     onSwapClick: requestId => {
       setSelectedSwap(requestId);
-      navigate(navigationRoutes.swaps + `/${requestId}`);
+      navigate(navigationRoutes.swaps + `/${requestId}`, {
+        replace: true
+      });
     },
     onBack: navigateBackFrom.bind(null, navigationRoutes.swaps)
   });
@@ -2432,6 +2471,7 @@ function LiquiditySourcePage(_ref) {
     supportedSwappers
   } = _ref;
   const swappers = useMetaStore.use.meta().swappers;
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
   const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
   const toggleAllLiquiditySources = useSettingsStore.use.toggleAllLiquiditySources();
@@ -2457,7 +2497,8 @@ function LiquiditySourcePage(_ref) {
     toggleAll: toggleAllLiquiditySources,
     list: supportedSwappers !== 'all' ? uniqueSwappersGroups.filter(item => supportedSwappers.filter(s => s.title === item.title && s.type === item.type).length > 0) : uniqueSwappersGroups,
     onChange: liquiditySource => toggleLiquiditySource(liquiditySource.title),
-    onBack: navigateBackFrom.bind(null, navigationRoutes.liquiditySources)
+    onBack: navigateBackFrom.bind(null, navigationRoutes.liquiditySources),
+    loadingStatus: loadingMetaStatus
   });
 }
 
@@ -2504,6 +2545,7 @@ function SelectTokenPage(props) {
   const toToken = useBestRouteStore.use.toToken();
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToToken = useBestRouteStore.use.setToToken();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   return React.createElement(TokenSelector, {
     type: type === 'from' ? 'Source' : 'Destination',
     list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
@@ -2512,7 +2554,8 @@ function SelectTokenPage(props) {
       if (type === 'from') setFromToken(token);else setToToken(token);
       navigateBackFrom(navigationRoutes.fromToken);
     },
-    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken)
+    onBack: navigateBackFrom.bind(null, navigationRoutes.fromToken),
+    loadingStatus: loadingMetaStatus
   });
 }
 
@@ -2534,6 +2577,7 @@ function SettingsPage(_ref) {
   } = useNavigateBack();
   const infiniteApprove = useSettingsStore.use.infiniteApprove();
   const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const uniqueSwappersGroups = [];
   removeDuplicateFrom(swappers.map(s => s.swapperGroup)).map(swapperGroup => {
     return swappers.find(s => s.swapperGroup === swapperGroup);
@@ -2566,7 +2610,8 @@ function SettingsPage(_ref) {
     selectedTheme: theme,
     onThemeChange: setTheme,
     infiniteApprove: infiniteApprove,
-    toggleInfiniteApprove: toggleInfiniteApprove
+    toggleInfiniteApprove: toggleInfiniteApprove,
+    loadingStatus: loadingMetaStatus
   });
 }
 
@@ -2574,9 +2619,16 @@ const ListContainer = /*#__PURE__*/styled('div', {
   display: 'grid',
   gap: '.5rem',
   gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
-  height: '450px',
   alignContent: 'baseline',
-  padding: '0.5rem'
+  padding: '0.5rem',
+  overflowY: 'auto'
+});
+const LoaderContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  position: 'absolute',
+  top: '50%'
 });
 const AlertContainer = /*#__PURE__*/styled('div', {
   paddingBottom: '$16'
@@ -2601,6 +2653,7 @@ function WalletsPage(_ref) {
   sortedWallets = sortWalletsBasedOnState(sortedWallets);
   const [walletErrorMessage, setWalletErrorMessage] = useState('');
   const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const {
     t
   } = useTranslation();
@@ -2642,7 +2695,11 @@ function WalletsPage(_ref) {
     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, {
+  }, walletErrorMessage)), loadingMetaStatus === 'loading' && React.createElement(LoaderContainer, {
+    className: "loader"
+  }, React.createElement(Spinner, {
+    size: 24
+  })), loadingMetaStatus === 'failed' && React.createElement(LoadingFailedAlert, null), React.createElement(ListContainer, null, loadingMetaStatus === 'success' && sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
     key: `${index}-${wallet.type}`,
     onClick: onSelectWallet
   }))))));
@@ -2705,6 +2762,27 @@ function getSwapDate(pendingSwap) {
   return pendingSwap.finishTime ? `Finished ${timeSince(parseInt(pendingSwap.finishTime))} ago @ ${new Date(parseInt(pendingSwap.finishTime)).toLocaleString()}` : `Started ${timeSince(parseInt(pendingSwap.creationTime))} ago @ ${new Date(parseInt(pendingSwap.creationTime)).toLocaleString()}`;
 }
 
+const PlaceholderContainer = /*#__PURE__*/styled('div', {
+  height: '450px'
+});
+function SwapDetailsPlaceholder(props) {
+  const {
+    requestId,
+    loading,
+    onBack
+  } = props;
+  return React.createElement(SecondaryPage, {
+    title: "Swap Details",
+    textField: false,
+    onBack: onBack
+  }, React.createElement(PlaceholderContainer, null, loading ? React.createElement(LoaderContainer, null, React.createElement(Spinner, {
+    size: 24
+  })) : React.createElement(Alert, {
+    type: "secondary",
+    title: `Swap with request ID = ${requestId} not found.`
+  })));
+}
+
 function SwapDetailsPage() {
   const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
   const {
@@ -2720,6 +2798,12 @@ function SwapDetailsPage() {
   const {
     manager
   } = useManager();
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+  }, []);
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(_ref => {
     let {
@@ -2732,7 +2816,15 @@ function SwapDetailsPage() {
     if (swap) cancelSwap(swap);
   };
   const swap = selectedSwap?.swap;
-  if (!swap) return null;
+  if (!swap) return React.createElement(SwapDetailsPlaceholder, {
+    requestId: selectedSwapRequestId || '',
+    loading: loading,
+    onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails)
+  });
+  const firstStep = swap.steps[0];
+  const lastStep = swap.steps[swap.steps.length - 1];
+  const fromAmount = numberToString(swap.inputAmount);
+  const toAmount = numberToString(swap.simulationResult.outputAmount);
   const currentStep = getCurrentStep(swap);
   const currentStepBlockchain = currentStep ? getCurrentBlockchainOfOrNull(swap, currentStep) : null;
   const currentStepWallet = currentStep ? getRelatedWalletOrNull(swap, currentStep) : null;
@@ -2745,6 +2837,36 @@ function SwapDetailsPage() {
   const lastConvertedTokenInFailedSwap = getLastConvertedTokenInFailedSwap(swap);
   return React.createElement(SwapHistory, Object.assign({
     onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+    previewInputs: React.createElement(React.Fragment, null, React.createElement(TokenPreview, {
+      chain: {
+        displayName: firstStep?.fromBlockchain || '',
+        // @ts-ignore
+        logo: firstStep?.fromBlockchainLogo || ''
+      },
+      token: {
+        symbol: firstStep?.fromSymbol || '',
+        image: firstStep?.fromLogo || ''
+      },
+      amount: fromAmount,
+      label: t('From'),
+      loadingStatus: 'success'
+    }), React.createElement(Spacer, {
+      size: 12,
+      direction: "vertical"
+    }), React.createElement(TokenPreview, {
+      chain: {
+        displayName: lastStep?.toBlockchain || '',
+        // @ts-ignore
+        logo: lastStep?.toBlockchainLogo || ''
+      },
+      token: {
+        symbol: lastStep?.toSymbol || '',
+        image: lastStep?.toLogo || ''
+      },
+      amount: toAmount,
+      label: t('To'),
+      loadingStatus: 'success'
+    })),
     //todo: move PendingSwap type to rango-types
     //@ts-ignore
     pendingSwap: swap,
@@ -2767,79 +2889,83 @@ function SwapDetailsPage() {
   }, lastConvertedTokenInFailedSwap && {
     lastConvertedTokenInFailedSwap: {
       blockchain: lastConvertedTokenInFailedSwap.blockchain,
-      outputAmount: lastConvertedTokenInFailedSwap.outputAmount,
+      outputAmount: lastConvertedTokenInFailedSwap.outputAmount || '',
       symbol: lastConvertedTokenInFailedSwap.symbol
     }
   }));
 }
 
+const getAbsolutePath = path => path.replace('/', '');
 function AppRoutes(props) {
   const {
     configs
   } = props;
   return useRoutes([{
-    path: navigationRoutes.home,
+    path: getAbsolutePath(navigationRoutes.home),
     element: React.createElement(Home, {
       title: configs?.title,
       titleSize: configs?.titleSize,
       titleWeight: configs?.titleWeight
     })
   }, {
-    path: navigationRoutes.fromChain,
+    path: getAbsolutePath(navigationRoutes.fromChain),
     element: React.createElement(SelectChainPage, {
       type: "from",
       supportedChains: configs?.fromChains || 'all'
     })
   }, {
-    path: navigationRoutes.toChain,
+    path: getAbsolutePath(navigationRoutes.toChain),
     element: React.createElement(SelectChainPage, {
       type: "to",
       supportedChains: configs?.toChains || 'all'
     })
   }, {
-    path: navigationRoutes.fromToken + '/*',
+    path: getAbsolutePath(navigationRoutes.fromToken),
     element: React.createElement(SelectTokenPage, {
       type: "from",
       supportedTokens: configs?.fromTokens || 'all'
     })
   }, {
-    path: navigationRoutes.toToken,
+    path: getAbsolutePath(navigationRoutes.toToken),
     element: React.createElement(SelectTokenPage, {
       type: "to",
       supportedTokens: configs?.toTokens || 'all'
     })
   }, {
-    path: navigationRoutes.settings,
+    path: getAbsolutePath(navigationRoutes.settings),
     element: React.createElement(SettingsPage, {
       supportedSwappers: configs?.liquiditySources || 'all'
     })
   }, {
-    path: navigationRoutes.liquiditySources,
+    path: getAbsolutePath(navigationRoutes.liquiditySources),
     element: React.createElement(LiquiditySourcePage, {
       supportedSwappers: configs?.liquiditySources || 'all'
     })
   }, {
-    path: navigationRoutes.swaps,
+    path: getAbsolutePath(navigationRoutes.swaps),
     element: React.createElement(HistoryPage, null)
   }, {
     path: navigationRoutes.swapDetails,
     element: React.createElement(SwapDetailsPage, null)
   }, {
-    path: navigationRoutes.wallets,
+    path: getAbsolutePath(navigationRoutes.wallets),
     element: React.createElement(WalletsPage, {
       supportedWallets: configs?.wallets || 'all',
       multiWallets: typeof configs?.multiWallets === 'undefined' ? true : configs.multiWallets
     })
   }, {
-    path: navigationRoutes.confirmSwap,
+    path: getAbsolutePath(navigationRoutes.confirmSwap),
     element: React.createElement(ConfirmSwapPage, null)
   }]);
 }
 
-const Header$1 = /*#__PURE__*/styled('div', {
+const Header = /*#__PURE__*/styled('div', {
   display: 'flex',
   width: '100%',
-  justifyContent: 'end'
+  justifyContent: 'end',
+  '.balance': {
+    display: 'flex'
+  }
 });
 const WalletImage = /*#__PURE__*/styled('img', {
   width: '$24',
@@ -2869,6 +2995,8 @@ function Layout(_ref) {
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const totalBalance = calculateWalletUsdValue(balances);
   const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
   const {
     t
   } = useTranslation();
@@ -2889,22 +3017,26 @@ function Layout(_ref) {
     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, {
+  return React.createElement(React.Fragment, null, React.createElement(Header, null, React.createElement(Button, {
     size: "small",
     suffix: React.createElement(AddWalletIcon, {
       size: 20
     }),
     variant: "ghost",
     flexContent: true,
+    loading: loadingMetaStatus === 'loading',
+    disabled: loadingMetaStatus === 'failed',
     onClick: () => {
       if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
     }
   }, connectedWalletsImages?.length ? connectedWalletsImages.map((walletImage, index) => React.createElement(WalletImage, {
     key: index,
     src: walletImage
-  })) : React.createElement(React.Fragment, null), React.createElement(Typography, {
+  })) : React.createElement(React.Fragment, null), React.createElement("div", {
+    className: "balance"
+  }, React.createElement(Typography, {
     variant: "body2"
-  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`))), React.createElement(AppRoutes, {
+  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React.createElement(Spinner, null)))), React.createElement(AppRoutes, {
     configs: configs
   }));
 }
@@ -2912,10 +3044,12 @@ function Layout(_ref) {
 const globalStyles = /*#__PURE__*/globalCss({
   '*': {
     '&::-webkit-scrollbar': {
-      width: '$8'
+      width: '$8',
+      height: '$8'
     },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400'
+      backgroundColor: '$neutrals400',
+      borderRadius: '$10'
     },
     '&::-webkit-scrollbar-thumb:hover': {
       backgroundColor: '$neutrals500'