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

package/dist/widget-embedded.cjs.development.js

@@ -25,6 +25,7 @@ var providerAll = require('@rango-dev/provider-all');
 var i18n = require('i18next');
 var i18n__default = _interopDefault(i18n);
 var queueManagerReact = require('@rango-dev/queue-manager-react');
+var dayjs = _interopDefault(require('dayjs'));
 var copy = _interopDefault(require('copy-to-clipboard'));
 var Backend = _interopDefault(require('i18next-http-backend'));
 var LanguageDetector = _interopDefault(require('i18next-browser-languagedetector'));
@@ -594,6 +595,7 @@ function createBestRouteRequestBody(fromToken, toToken, inputAmount, wallets, se
       addresses: [wallet.address]
     });
   });
+  const filteredBlockchains = selectedWallets.map(wallet => wallet.chain);
   const requestBody = {
     amount: inputAmount.toString(),
     checkPrerequisites,
@@ -611,8 +613,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;
 }
@@ -750,8 +754,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;
@@ -902,7 +911,7 @@ const useWalletsStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.creat
       }
     });
     return {
-      selectedWallets: state.selectedWallets.concat(selectedWallets)
+      selectedWallets: selectedWallets
     };
   }),
   setSelectedWallet: wallet => set(state => ({
@@ -934,6 +943,7 @@ useWalletsStore.subscribe(state => state.balances, balances => {
 }, {
   equalityFn: shallow.shallow
 });
+const fetchingBalanceSelector = state => !!state.balances.find(wallet => wallet.loading);
 
 const getUsdValue = (token, amount) => new BigNumber__default(amount || ZERO).multipliedBy(token?.usdPrice || 0);
 const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()( /*#__PURE__*/middleware.subscribeWithSelector(set => ({
@@ -953,6 +963,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
   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__default(bestRoute.result?.outputAmount) : null;
       outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
@@ -1009,6 +1020,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
     toToken: token
   })),
   setInputAmount: amount => {
+    console.log(amount, typeof amount);
     set(state => ({
       inputAmount: amount,
       ...(!amount && {
@@ -1051,7 +1063,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
       fromToken,
       inputAmount,
       outputAmount: null,
-      inputUsdValue: new BigNumber__default(0),
+      inputUsdValue: getUsdValue(fromToken || null, inputAmount),
       outputUsdValue: new BigNumber__default(0),
       toChain,
       toToken,
@@ -1065,7 +1077,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.cre
 }))));
 const bestRoute = (bestRouteStore, settingsStore) => {
   let abortController = null;
-  const fetchBestRoute = debounce(() => {
+  const fetchBestRoute = () => {
     const {
       fromToken,
       toToken,
@@ -1076,12 +1088,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,
@@ -1105,14 +1117,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__default(inputAmount),
+      outputUsdValue: inputUsdValue
+    });
+    if (!bestRouteStore.getState().loading) bestRouteStore.setState({
+      loading: true,
+      bestRoute: null,
+      outputAmount: null,
+      outputUsdValue: new BigNumber__default(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;
     }
@@ -1121,7 +1156,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;
     }
@@ -1146,11 +1181,15 @@ var SearchParams;
 const useUiStore = /*#__PURE__*/createSelectors( /*#__PURE__*/zustand.create()(set => ({
   connectWalletsButtonDisabled: false,
   selectedSwapRequestId: null,
+  currentPage: '',
   toggleConnectWalletsButton: () => set(state => ({
     connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled
   })),
   setSelectedSwap: requestId => set({
     selectedSwapRequestId: requestId
+  }),
+  setCurrentPage: path => set({
+    currentPage: path
   })
 })));
 
@@ -1284,67 +1323,6 @@ function UpdateUrl() {
   return null;
 }
 
-const ButtonsContainer = /*#__PURE__*/ui.styled('div', {
-  display: 'flex'
-});
-function HeaderButtons(props) {
-  const {
-    onClickRefresh
-  } = props;
-  const navigate = reactRouterDom.useNavigate();
-  return React__default.createElement(ButtonsContainer, null, React__default.createElement(ui.Tooltip, {
-    content: "Refresh"
-  }, React__default.createElement(ui.Button, {
-    variant: "ghost",
-    onClick: onClickRefresh
-  }, React__default.createElement(ui.RetryIcon, {
-    size: 24
-  }))), React__default.createElement(ui.Tooltip, {
-    content: "Transactions History"
-  }, React__default.createElement(ui.Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.swaps)
-  }, React__default.createElement(ui.HistoryIcon, {
-    size: 24
-  }))), React__default.createElement(ui.Tooltip, {
-    content: "Settings"
-  }, React__default.createElement(ui.Button, {
-    variant: "ghost",
-    onClick: () => navigate(navigationRoutes.settings)
-  }, React__default.createElement(ui.SettingsIcon, {
-    size: 24
-  }))));
-}
-
-const HeaderContainer = /*#__PURE__*/ui.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
-  } = reactI18next.useTranslation();
-  const titleStyle = ui.css({
-    fontSize: `${titleSize}px !important`,
-    fontWeight: `${titleWeight} !important`
-  });
-  return React__default.createElement(HeaderContainer, null, React__default.createElement(ui.Typography, {
-    variant: "h4",
-    className: titleStyle()
-  }, title ? t(title.toLocaleLowerCase()) : ''), React__default.createElement(HeaderButtons, {
-    onClickRefresh: onClickRefresh
-  }));
-}
-
 const Box = /*#__PURE__*/ui.styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -1632,6 +1610,39 @@ const errorMessages = {
   genericServerError: 'Error connecting server, please reload the app and try again'
 };
 
+const ButtonsContainer = /*#__PURE__*/ui.styled('div', {
+  display: 'flex'
+});
+function HeaderButtons(props) {
+  const {
+    onClickRefresh
+  } = props;
+  const navigate = reactRouterDom.useNavigate();
+  return React__default.createElement(ButtonsContainer, null, React__default.createElement(ui.Tooltip, {
+    content: "Refresh"
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: onClickRefresh,
+    disabled: !onClickRefresh
+  }, React__default.createElement(ui.RetryIcon, {
+    size: 24
+  }))), React__default.createElement(ui.Tooltip, {
+    content: "Transactions History"
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.swaps)
+  }, React__default.createElement(ui.HistoryIcon, {
+    size: 24
+  }))), React__default.createElement(ui.Tooltip, {
+    content: "Settings"
+  }, React__default.createElement(ui.Button, {
+    variant: "ghost",
+    onClick: () => navigate(navigationRoutes.settings)
+  }, React__default.createElement(ui.SettingsIcon, {
+    size: 24
+  }))));
+}
+
 const Container$2 = /*#__PURE__*/ui.styled('div', {
   display: 'flex',
   flexDirection: 'column'
@@ -1656,9 +1667,7 @@ const Alerts = /*#__PURE__*/ui.styled('div', {
 });
 function Home(props) {
   const {
-    title = 'SWAP',
-    titleSize = 18,
-    titleWeight = 600
+    title = 'SWAP'
   } = props;
   const isRouterInContext = reactRouterDom.useInRouterContext();
   const navigate = reactRouterDom.useNavigate();
@@ -1682,6 +1691,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);
@@ -1705,11 +1715,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__default.createElement(Container$2, null, React__default.createElement(Header, {
+  React.useEffect(() => {
+    setCurrentPage(navigationRoutes.home);
+    return setCurrentPage.bind(null, '');
+  }, []);
+  return React__default.createElement(Container$2, null, React__default.createElement(ui.Header, {
     title: title,
-    titleSize: titleSize,
-    titleWeight: titleWeight,
-    onClickRefresh: fetchBestRoute
+    suffix: React__default.createElement(HeaderButtons, {
+      onClickRefresh: !!bestRoute ? fetchBestRoute : undefined
+    })
   }), React__default.createElement(FromContainer, null, React__default.createElement(TokenInfo, {
     type: "From",
     chain: fromChain,
@@ -1720,7 +1734,7 @@ function Home(props) {
     variant: "ghost",
     onClick: swithFromAndTo
   }, React__default.createElement(ui.VerticalSwapIcon, {
-    size: 24
+    size: 32
   }), isRouterInContext && React__default.createElement(SwithFromAndTo, {
     count: count
   })))), React__default.createElement(TokenInfo, {
@@ -1915,7 +1929,7 @@ function TokenPreview(props) {
   }, React__default.createElement(ui.Typography, {
     variant: "body2",
     color: "neutrals800"
-  }, props.label), React__default.createElement(ui.Typography, {
+  }, props.label), props.usdValue && React__default.createElement(ui.Typography, {
     variant: "caption",
     color: "neutrals600"
   }, `$${numberToString(props.usdValue)}`)), React__default.createElement("div", {
@@ -2285,6 +2299,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,
@@ -2296,6 +2311,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
   } = queueManagerReact.useManager();
@@ -2360,7 +2376,7 @@ function ConfirmSwapPage() {
       usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
       amount: fromAmount,
       label: i18n.t('From'),
-      loadingStatus: 'success'
+      loadingStatus: bestRouteloadingStatus
     }), React__default.createElement(ui.Spacer, {
       size: 12,
       direction: "vertical"
@@ -2376,7 +2392,7 @@ function ConfirmSwapPage() {
       usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
       amount: toAmount,
       label: i18n.t('To'),
-      loadingStatus: 'success'
+      loadingStatus: bestRouteloadingStatus
     })),
     previewRoutes: React__default.createElement(RoutesOverview, {
       routes: bestRoute,
@@ -2406,6 +2422,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 = reactRouterDom.useNavigate();
@@ -2421,16 +2462,14 @@ function HistoryPage() {
     } = _ref;
     return swap;
   });
-  return React__default.createElement(ui.History
-  //todo: move PendingSwap type to rango-types
-  //@ts-ignore
-  , {
-    //todo: move PendingSwap type to rango-types
-    //@ts-ignore
+  return React__default.createElement(ui.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)
   });
@@ -2441,6 +2480,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();
@@ -2466,7 +2506,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
   });
 }
 
@@ -2513,6 +2554,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__default.createElement(ui.TokenSelector, {
     type: type === 'from' ? 'Source' : 'Destination',
     list: type == 'from' ? supportedSourceTokens : supportedDestinationTokens,
@@ -2521,7 +2563,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
   });
 }
 
@@ -2543,6 +2586,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);
@@ -2575,7 +2619,8 @@ function SettingsPage(_ref) {
     selectedTheme: theme,
     onThemeChange: setTheme,
     infiniteApprove: infiniteApprove,
-    toggleInfiniteApprove: toggleInfiniteApprove
+    toggleInfiniteApprove: toggleInfiniteApprove,
+    loadingStatus: loadingMetaStatus
   });
 }
 
@@ -2583,9 +2628,16 @@ const ListContainer = /*#__PURE__*/ui.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__*/ui.styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  position: 'absolute',
+  top: '50%'
 });
 const AlertContainer = /*#__PURE__*/ui.styled('div', {
   paddingBottom: '$16'
@@ -2610,6 +2662,7 @@ function WalletsPage(_ref) {
   sortedWallets = sortWalletsBasedOnState(sortedWallets);
   const [walletErrorMessage, setWalletErrorMessage] = React.useState('');
   const toggleConnectWalletsButton = useUiStore.use.toggleConnectWalletsButton();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const {
     t
   } = reactI18next.useTranslation();
@@ -2651,7 +2704,11 @@ function WalletsPage(_ref) {
     onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
   }, React__default.createElement(React__default.Fragment, null, walletErrorMessage && React__default.createElement(AlertContainer, null, React__default.createElement(ui.Alert, {
     type: "error"
-  }, walletErrorMessage)), React__default.createElement(ListContainer, null, sortedWallets.map((wallet, index) => React__default.createElement(ui.Wallet, Object.assign({}, wallet, {
+  }, walletErrorMessage)), loadingMetaStatus === 'loading' && React__default.createElement(LoaderContainer, {
+    className: "loader"
+  }, React__default.createElement(ui.Spinner, {
+    size: 24
+  })), loadingMetaStatus === 'failed' && React__default.createElement(ui.LoadingFailedAlert, null), React__default.createElement(ListContainer, null, loadingMetaStatus === 'success' && sortedWallets.map((wallet, index) => React__default.createElement(ui.Wallet, Object.assign({}, wallet, {
     key: `${index}-${wallet.type}`,
     onClick: onSelectWallet
   }))))));
@@ -2714,6 +2771,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__*/ui.styled('div', {
+  height: '450px'
+});
+function SwapDetailsPlaceholder(props) {
+  const {
+    requestId,
+    loading,
+    onBack
+  } = props;
+  return React__default.createElement(ui.SecondaryPage, {
+    title: "Swap Details",
+    textField: false,
+    onBack: onBack
+  }, React__default.createElement(PlaceholderContainer, null, loading ? React__default.createElement(LoaderContainer, null, React__default.createElement(ui.Spinner, {
+    size: 24
+  })) : React__default.createElement(ui.Alert, {
+    type: "secondary",
+    title: `Swap with request ID = ${requestId} not found.`
+  })));
+}
+
 function SwapDetailsPage() {
   const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
   const {
@@ -2729,6 +2807,12 @@ function SwapDetailsPage() {
   const {
     manager
   } = queueManagerReact.useManager();
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+  }, []);
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(_ref => {
     let {
@@ -2741,7 +2825,15 @@ function SwapDetailsPage() {
     if (swap) queueManagerRangoPreset.cancelSwap(swap);
   };
   const swap = selectedSwap?.swap;
-  if (!swap) return null;
+  if (!swap) return React__default.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 = queueManagerRangoPreset.getCurrentStep(swap);
   const currentStepBlockchain = currentStep ? queueManagerRangoPreset.getCurrentBlockchainOfOrNull(swap, currentStep) : null;
   const currentStepWallet = currentStep ? queueManagerRangoPreset.getRelatedWalletOrNull(swap, currentStep) : null;
@@ -2754,6 +2846,36 @@ function SwapDetailsPage() {
   const lastConvertedTokenInFailedSwap = getLastConvertedTokenInFailedSwap(swap);
   return React__default.createElement(ui.SwapHistory, Object.assign({
     onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+    previewInputs: React__default.createElement(React__default.Fragment, null, React__default.createElement(TokenPreview, {
+      chain: {
+        displayName: firstStep?.fromBlockchain || '',
+        // @ts-ignore
+        logo: firstStep?.fromBlockchainLogo || ''
+      },
+      token: {
+        symbol: firstStep?.fromSymbol || '',
+        image: firstStep?.fromLogo || ''
+      },
+      amount: fromAmount,
+      label: i18n.t('From'),
+      loadingStatus: 'success'
+    }), React__default.createElement(ui.Spacer, {
+      size: 12,
+      direction: "vertical"
+    }), React__default.createElement(TokenPreview, {
+      chain: {
+        displayName: lastStep?.toBlockchain || '',
+        // @ts-ignore
+        logo: lastStep?.toBlockchainLogo || ''
+      },
+      token: {
+        symbol: lastStep?.toSymbol || '',
+        image: lastStep?.toLogo || ''
+      },
+      amount: toAmount,
+      label: i18n.t('To'),
+      loadingStatus: 'success'
+    })),
     //todo: move PendingSwap type to rango-types
     //@ts-ignore
     pendingSwap: swap,
@@ -2776,79 +2898,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 reactRouterDom.useRoutes([{
-    path: navigationRoutes.home,
+    path: getAbsolutePath(navigationRoutes.home),
     element: React__default.createElement(Home, {
       title: configs?.title,
       titleSize: configs?.titleSize,
       titleWeight: configs?.titleWeight
     })
   }, {
-    path: navigationRoutes.fromChain,
+    path: getAbsolutePath(navigationRoutes.fromChain),
     element: React__default.createElement(SelectChainPage, {
       type: "from",
       supportedChains: configs?.fromChains || 'all'
     })
   }, {
-    path: navigationRoutes.toChain,
+    path: getAbsolutePath(navigationRoutes.toChain),
     element: React__default.createElement(SelectChainPage, {
       type: "to",
       supportedChains: configs?.toChains || 'all'
     })
   }, {
-    path: navigationRoutes.fromToken + '/*',
+    path: getAbsolutePath(navigationRoutes.fromToken),
     element: React__default.createElement(SelectTokenPage, {
       type: "from",
       supportedTokens: configs?.fromTokens || 'all'
     })
   }, {
-    path: navigationRoutes.toToken,
+    path: getAbsolutePath(navigationRoutes.toToken),
     element: React__default.createElement(SelectTokenPage, {
       type: "to",
       supportedTokens: configs?.toTokens || 'all'
     })
   }, {
-    path: navigationRoutes.settings,
+    path: getAbsolutePath(navigationRoutes.settings),
     element: React__default.createElement(SettingsPage, {
       supportedSwappers: configs?.liquiditySources || 'all'
     })
   }, {
-    path: navigationRoutes.liquiditySources,
+    path: getAbsolutePath(navigationRoutes.liquiditySources),
     element: React__default.createElement(LiquiditySourcePage, {
       supportedSwappers: configs?.liquiditySources || 'all'
     })
   }, {
-    path: navigationRoutes.swaps,
+    path: getAbsolutePath(navigationRoutes.swaps),
     element: React__default.createElement(HistoryPage, null)
   }, {
     path: navigationRoutes.swapDetails,
     element: React__default.createElement(SwapDetailsPage, null)
   }, {
-    path: navigationRoutes.wallets,
+    path: getAbsolutePath(navigationRoutes.wallets),
     element: React__default.createElement(WalletsPage, {
       supportedWallets: configs?.wallets || 'all',
       multiWallets: typeof configs?.multiWallets === 'undefined' ? true : configs.multiWallets
     })
   }, {
-    path: navigationRoutes.confirmSwap,
+    path: getAbsolutePath(navigationRoutes.confirmSwap),
     element: React__default.createElement(ConfirmSwapPage, null)
   }]);
 }
 
-const Header$1 = /*#__PURE__*/ui.styled('div', {
+const Header = /*#__PURE__*/ui.styled('div', {
   display: 'flex',
   width: '100%',
-  justifyContent: 'end'
+  justifyContent: 'end',
+  '.balance': {
+    display: 'flex'
+  }
 });
 const WalletImage = /*#__PURE__*/ui.styled('img', {
   width: '$24',
@@ -2878,6 +3004,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
   } = reactI18next.useTranslation();
@@ -2898,22 +3026,26 @@ function Layout(_ref) {
     setFromToken(null);
     setToToken(null);
   }, [configs?.fromChains, configs?.toChains, configs?.fromTokens, configs?.toTokens]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Header$1, null, React__default.createElement(ui.Button, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Header, null, React__default.createElement(ui.Button, {
     size: "small",
     suffix: React__default.createElement(ui.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__default.createElement(WalletImage, {
     key: index,
     src: walletImage
-  })) : React__default.createElement(React__default.Fragment, null), React__default.createElement(ui.Typography, {
+  })) : React__default.createElement(React__default.Fragment, null), React__default.createElement("div", {
+    className: "balance"
+  }, React__default.createElement(ui.Typography, {
     variant: "body2"
-  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`))), React__default.createElement(AppRoutes, {
+  }, !accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`), fetchingBalance && React__default.createElement(ui.Spinner, null)))), React__default.createElement(AppRoutes, {
     configs: configs
   }));
 }
@@ -2921,10 +3053,12 @@ function Layout(_ref) {
 const globalStyles = /*#__PURE__*/ui.globalCss({
   '*': {
     '&::-webkit-scrollbar': {
-      width: '$8'
+      width: '$8',
+      height: '$8'
     },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400'
+      backgroundColor: '$neutrals400',
+      borderRadius: '$10'
     },
     '&::-webkit-scrollbar-thumb:hover': {
       backgroundColor: '$neutrals500'