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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.13-next.0",
+  "version": "0.1.13-next.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -30,9 +30,9 @@
   "dependencies": {
     "@rango-dev/provider-all": "^0.1.12",
     "@rango-dev/queue-manager-core": "^0.1.12-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.1.11",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.12-next.4",
     "@rango-dev/queue-manager-react": "^0.1.11-next.0",
-    "@rango-dev/ui": "^0.1.12",
+    "@rango-dev/ui": "^0.1.13-next.2",
     "@rango-dev/wallets-core": "^0.1.12",
     "@rango-dev/wallets-shared": "^0.1.11",
     "bignumber.js": "^9.1.1",

package/src/App.tsx

@@ -13,7 +13,7 @@ import {
 } from './utils/wallets';
 import { useWalletsStore } from './store/wallets';
 import { Layout } from './components/Layout';
-import { globalFont, globalStyles } from './globalStyles';
+import { globalFont } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import QueueManager from './QueueManager';
 import { isEvmBlockchain } from 'rango-sdk';
@@ -30,7 +30,6 @@ export type WidgetProps = {
 };
 
 export function App({ config }: WidgetProps) {
-  globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
   const { activeTheme } = useTheme({ ...config?.theme });
   useMemo(() => {

package/src/QueueManager.tsx

@@ -4,6 +4,7 @@ import {
   makeQueueDefinition,
   SwapQueueContext,
   checkWaitingForNetworkChange,
+  SwapProgressNotification,
 } from '@rango-dev/queue-manager-rango-preset';
 import { useWallets } from '@rango-dev/wallets-core';
 import {
@@ -32,6 +33,9 @@ function QueueManager(props: PropsWithChildren<{}>) {
       API_KEY: getConfig('API_KEY'),
     });
   }, []);
+  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
+  const accounts = useWalletsStore.use.accounts();
+
   const { blockchains } = useMetaStore.use.meta();
   const balances = useWalletsStore.use.balances();
 
@@ -64,6 +68,29 @@ function QueueManager(props: PropsWithChildren<{}>) {
     return walletAndSupportedChainsNames(supportedChains);
   };
   const allProviders = providers();
+  const notifier = (data: SwapProgressNotification) => {
+    const lastStep = data.swap?.steps[data.swap.steps.length - 1];
+    const outputAmount = data.step?.outputAmount || '';
+    const step = data.step || lastStep;
+
+    if (
+      data.eventType === 'task_completed' ||
+      (data.eventType === 'step_completed_with_output' &&
+        lastStep?.id !== data.step?.id) ||
+      !!outputAmount
+    ) {
+      const fromAccount = accounts.find(
+        (account) => account.chain === step?.fromBlockchain
+      );
+      const toAccount =
+        step?.fromBlockchain !== step?.toBlockchain &&
+        accounts.find((account) => account.chain === step?.toBlockchain);
+
+      fromAccount && getOneOfWalletsDetails(fromAccount);
+      toAccount && getOneOfWalletsDetails(toAccount);
+    }
+  };
+
   const context: SwapQueueContext = {
     meta: {
       blockchains: allBlockchains,
@@ -80,9 +107,7 @@ function QueueManager(props: PropsWithChildren<{}>) {
     switchNetwork,
     connect,
     state,
-    notifier: (message) => {
-      console.log('[notifier]', message);
-    },
+    notifier,
   };
 
   return (

package/src/components/AppRouter.tsx

@@ -1,36 +1,11 @@
-import React, { PropsWithChildren, useEffect, useRef } from 'react';
-import {
-  MemoryRouter,
-  useInRouterContext,
-  useLocation,
-  useNavigate,
-} from 'react-router';
+import React, { Fragment, PropsWithChildren } from 'react';
+import { MemoryRouter, useInRouterContext } from 'react-router';
 import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-types';
 import { UpdateUrl } from './UpdateUrl';
-import { Home } from '../pages/Home';
 import { useMetaStore } from '../store/meta';
 
-const Route: React.FC = ({ children }: PropsWithChildren) => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const ref = useRef(true);
-
-  useEffect(() => {
-    if (location.pathname === navigationRoutes.confirmSwap && ref.current)
-      navigate(navigationRoutes.home + location.search, { state: 'redirect' });
-
-    ref.current = false;
-  }, []);
-
-  if (location.pathname === navigationRoutes.confirmSwap && ref.current)
-    return <Home />;
-
-  return <> {children}</>;
-};
-
 export function AppRouter({
   children,
   ...props
@@ -40,7 +15,7 @@ export function AppRouter({
   clearDisconnectedWallet: () => void;
 }) {
   const isRouterInContext = useInRouterContext();
-  const Router = isRouterInContext ? Route : MemoryRouter;
+  const Router = isRouterInContext ? Fragment : MemoryRouter;
   const { blockchains } = useMetaStore.use.meta();
 
   const evmChains = blockchains.filter(isEvmBlockchain);
@@ -55,7 +30,7 @@ export function AppRouter({
 
   return (
     <>
-      <Router {...props}>{children}</Router>
+      <Router>{children}</Router>
       {isRouterInContext && <UpdateUrl />}
     </>
   );

package/src/components/AppRoutes.tsx

@@ -23,11 +23,11 @@ export function AppRoutes(props: PropTypes) {
 
   return useRoutes([
     {
-      path: getAbsolutePath(navigationRoutes.home),
+      path: navigationRoutes.home,
       element: <Home />,
     },
     {
-      path: getAbsolutePath(navigationRoutes.fromChain),
+      path: navigationRoutes.fromChain,
       element: (
         <SelectChainPage
           type="from"
@@ -36,40 +36,40 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: getAbsolutePath(navigationRoutes.toChain),
+      path: navigationRoutes.toChain,
       element: (
         <SelectChainPage type="to" supportedChains={config?.to?.blockchains} />
       ),
     },
     {
-      path: getAbsolutePath(navigationRoutes.fromToken),
+      path: navigationRoutes.fromToken,
       element: (
         <SelectTokenPage type="from" supportedTokens={config?.from?.tokens} />
       ),
     },
     {
-      path: getAbsolutePath(navigationRoutes.toToken),
+      path: navigationRoutes.toToken,
       element: (
         <SelectTokenPage type="to" supportedTokens={config?.to?.tokens} />
       ),
     },
     {
-      path: getAbsolutePath(navigationRoutes.settings),
+      path: navigationRoutes.settings,
       element: <SettingsPage supportedSwappers={config?.liquiditySources} />,
     },
     {
-      path: getAbsolutePath(navigationRoutes.liquiditySources),
+      path: navigationRoutes.liquiditySources,
       element: (
         <LiquiditySourcePage supportedSwappers={config?.liquiditySources} />
       ),
     },
-    { path: getAbsolutePath(navigationRoutes.swaps), element: <HistoryPage /> },
+    { path: navigationRoutes.swaps, element: <HistoryPage /> },
     {
       path: navigationRoutes.swapDetails,
       element: <SwapDetailsPage />,
     },
     {
-      path: getAbsolutePath(navigationRoutes.wallets),
+      path: navigationRoutes.wallets,
       element: (
         <WalletsPage
           supportedWallets={config?.wallets}

package/src/components/BottomLogo.tsx

@@ -29,7 +29,7 @@ export function BottomLogo() {
 
   return (
     <Container>
-      <Typography variant="caption">{t('Powered By')}</Typography>
+      <Typography variant="caption" color='$neutrals600'>{t('Powered By')}</Typography>
       <StyledAnchor href="https://rango.exchange" target="_blank">
         <Logo xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.68 29">
           <defs></defs>

package/src/components/ChangeSlippageButton.tsx

@@ -11,7 +11,7 @@ export function ChangeSlippageButton() {
       type="primary"
       variant="outlined"
       size="small"
-      onClick={() => navigate(navigationRoutes.settings)}
+      onClick={() => navigate('/' + navigationRoutes.settings)}
     >
       Change Slippage
     </Button>

package/src/components/Layout.tsx

@@ -37,7 +37,9 @@ const Header = styled('div', {
 const WalletImageContainer = styled('div', {
   marginLeft: -15,
   marginRight: '$6',
-  borderRadius: '99999px',
+  '& img': {
+    borderRadius: '50%',
+  }
 });
 
 export type LayoutProps = {

package/src/components/RoutesOverview.tsx

@@ -39,11 +39,11 @@ function RoutesOverview(props: PropTypes) {
         {swaps?.map((swap, idx) => {
           const isLast = idx + 1 == swaps.length;
           return (
-            <>
+            <React.Fragment key={idx}>
               <div className="route">{swap.from.symbol}</div>
               <ChevronRightIcon size={12} />
               {isLast ? <div className="route">{swap.to.symbol}</div> : null}
-            </>
+            </React.Fragment>
           );
         })}
       </div>

package/src/components/TokenInfo.tsx

@@ -37,6 +37,7 @@ const Box = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
+  overflow: 'hidden'
 });
 
 const Container = styled('div', {
@@ -224,7 +225,7 @@ export function TokenInfo(props: PropTypes) {
           <Button
             className="selectors"
             onClick={() => {
-              navigate(`/${props.type.toLowerCase()}-chain`);
+              navigate(`${props.type.toLowerCase()}-chain`);
             }}
             variant="outlined"
             disabled={loadingStatus === 'failed'}
@@ -248,7 +249,7 @@ export function TokenInfo(props: PropTypes) {
           <Button
             className="selectors"
             onClick={() => {
-              navigate(`/${props.type.toLowerCase()}-token`);
+              navigate(`${props.type.toLowerCase()}-token`);
             }}
             variant="outlined"
             disabled={

package/src/components/TokenPreview.tsx

@@ -11,6 +11,7 @@ const Box = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
+  overflow: 'hidden',
 });
 
 const Container = styled('div', {

package/src/components/UpdateUrl.tsx

@@ -45,37 +45,6 @@ export function UpdateUrl() {
   }, []);
 
   useEffect(() => {
-    let fromChainString = '',
-      fromTokenString = '',
-      toChainString = '',
-      toTokenString = '',
-      fromAmount = '';
-    if (
-      loadingStatus !== 'success' &&
-      location.pathname != navigationRoutes.confirmSwap
-    ) {
-      fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
-      fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
-      toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
-      toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
-      fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
-      setSearchParams(
-        {
-          ...(fromChainString && {
-            [SearchParams.FROM_CHAIN]: fromChainString,
-          }),
-          ...(fromTokenString && {
-            [SearchParams.FROM_TOKEN]: fromTokenString,
-          }),
-          ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
-          ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
-          ...(fromAmount && {
-            [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
-          }),
-        },
-        { replace: true }
-      );
-    }
     if (!firstRender.current) {
       let fromChainString = '',
         fromTokenString = '',
@@ -87,7 +56,8 @@ export function UpdateUrl() {
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
         toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
         toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
-        fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
+        fromAmount =
+          searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
       } else {
         if (location.state === 'redirect') return;
         fromChainString = fromChain?.name || '';
@@ -99,27 +69,26 @@ export function UpdateUrl() {
           (toToken?.symbol || '') +
           (toToken?.address ? `--${toToken?.address}` : '');
         fromAmount = inputAmount;
-
-        setSearchParams(
-          {
-            ...(fromChainString && {
-              [SearchParams.FROM_CHAIN]: fromChainString,
-            }),
-            ...(fromTokenString && {
-              [SearchParams.FROM_TOKEN]: fromTokenString,
-            }),
-            ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
-            ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
-            ...(fromAmount && {
-              [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
-            }),
-          },
-          { replace: true }
-        );
       }
+      setSearchParams(
+        {
+          ...(fromChainString && {
+            [SearchParams.FROM_CHAIN]: fromChainString,
+          }),
+          ...(fromTokenString && {
+            [SearchParams.FROM_TOKEN]: fromTokenString,
+          }),
+          ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
+          ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
+          ...(fromAmount && {
+            [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
+          }),
+        },
+        { replace: true }
+      );
     }
     firstRender.current = false;
-  }, [location.pathname, inputAmount]);
+  }, [location.pathname, inputAmount, fromChain, fromToken, toChain, toToken]);
 
   useEffect(() => {
     if (loadingStatus === 'success') {

package/src/components/warnings/BalanceErrors.tsx

@@ -6,6 +6,8 @@ interface PropTypes {
 }
 
 const List = styled('ul', {
+  padding: 0,
+  margin: 0,
   variants: {
     showListStyle: {
       true: { paddingLeft: '$24' },
@@ -34,8 +36,8 @@ export function BalanceErrors({ messages }: PropTypes) {
       </Typography>
       <Spacer size={8} direction="vertical" />
       <List showListStyle={showListStyle}>
-        {messages.map((warning) => (
-          <ListItem showListStyle={showListStyle}>
+        {messages.map((warning, index) => (
+          <ListItem showListStyle={showListStyle} key={index}>
             <Message variant="body2">{warning}</Message>
           </ListItem>
         ))}

package/src/constants/navigationRoutes.ts

@@ -1,13 +1,13 @@
 export const navigationRoutes = {
   home: '/',
-  fromChain: '/from-chain',
-  fromToken: '/from-token',
-  toChain: '/to-chain',
-  toToken: '/to-token',
-  settings: '/settings',
+  fromChain: 'from-chain',
+  fromToken: 'from-token',
+  toChain: 'to-chain',
+  toToken: 'to-token',
+  settings: 'settings',
   liquiditySources: '/settings/liquidity-sources',
-  swaps: '/swaps',
-  wallets: '/wallets',
-  confirmSwap: '/confirm-swap',
-  swapDetails: '/swaps/:requestId',
+  swaps: 'swaps',
+  wallets: 'wallets',
+  confirmSwap: 'confirm-swap',
+  swapDetails: 'swaps/:requestId',
 };

package/src/globalStyles.ts

@@ -1,24 +1,5 @@
 import { globalCss } from '@rango-dev/ui';
 
-export const globalStyles = globalCss({
-  '*': {
-    boxSizing: 'border-box',
-    margin: 0,
-    padding: 0,
-    listStyleType: 'none',
-    '&::-webkit-scrollbar': { width: '$8', height: '$8' },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400',
-      borderRadius: '$10',
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '$neutrals500',
-    },
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: '$neutrals300',
-    },
-  },
-});
 export const globalFont = (fontFamily: string) =>
   globalCss({
     '@import': [

package/src/hooks/useNavigateBack.ts

@@ -9,7 +9,8 @@ export function useNavigateBack() {
 
   const navigateBackFrom = (currentRoute: string) => {
     if (currentRoute === navigationRoutes.swapDetails)
-      return navigate(navigationRoutes.swaps, { replace: true });
+      return navigate('/' + navigationRoutes.swaps, { replace: true });
+
     if (
       !isRouterInContext ||
       (window.history.state && window.history.state.idx > 0)
@@ -30,9 +31,7 @@ export function useNavigateBack() {
       )
         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 });
+        navigate('/' + navigationRoutes.settings, { replace: true });
     }
   };
 

package/src/index.tsx

@@ -11,4 +11,4 @@ root.render(
   </BrowserRouter>
 );
 
-export { Widget } from './lib';
+export { Widget } from './lib';

package/src/lib.tsx

@@ -12,10 +12,15 @@ import {
 } from './utils/wallets';
 import { useWalletsStore } from './store/wallets';
 import { Layout } from './components/Layout';
-import { globalFont, globalStyles } from './globalStyles';
+import { globalFont } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import { isEvmBlockchain } from 'rango-sdk';
-import { WidgetTheme, WidgetConfig, WidgetColors, BlockchainAndTokenConfig } from './types';
+import {
+  WidgetTheme,
+  WidgetConfig,
+  WidgetColors,
+  BlockchainAndTokenConfig,
+} from './types';
 import useSelectLanguage from './hooks/useSelectLanguage';
 import './i18n';
 import QueueManager from './QueueManager';
@@ -23,15 +28,19 @@ import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
 import { initConfig } from './utils/configs';
 
-
-export {WidgetConfig, WalletType, WidgetTheme, WidgetColors,  BlockchainAndTokenConfig}
+export {
+  WidgetConfig,
+  WalletType,
+  WidgetTheme,
+  WidgetColors,
+  BlockchainAndTokenConfig,
+};
 
 export type WidgetProps = {
   config?: WidgetConfig;
 };
 
 export const Widget: React.FC<WidgetProps> = ({ config }) => {
-  globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
 
   const { activeTheme } = useTheme({ ...config?.theme });
@@ -115,10 +124,9 @@ export const Widget: React.FC<WidgetProps> = ({ config }) => {
       providers={providers}
       onUpdateState={onUpdateState}
     >
-      <div id="pageContainer" className={activeTheme}>
+      <div className={activeTheme}>
         <QueueManager>
-          <SwapContainer
-            fixedHeight={currentPage !== navigationRoutes.home}>
+          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
             <AppRouter
               lastConnectedWallet={lastConnectedWalletWithNetwork}
               disconnectedWallet={disconnectedWallet}

package/src/pages/ConfirmSwapPage.tsx

@@ -11,14 +11,14 @@ import {
   isExperimentalChain,
 } from '../utils/wallets';
 import { getTotalFeeInUsd, requiredWallets } from '../utils/swap';
-import { decimalNumber, numberToString } from '../utils/numbers';
+import { numberToString } from '../utils/numbers';
 import { useMetaStore } from '../store/meta';
 import { Network, WalletType } from '@rango-dev/wallets-shared';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { TokenPreview } from '../components/TokenPreview';
 // @ts-ignore // TODO: fix error in tsc build
 import { t } from 'i18next';
-import { Spacer, ConfirmSwap } from '@rango-dev/ui';
+import { Spacer, ConfirmSwap, LoadingFailedAlert } from '@rango-dev/ui';
 import RoutesOverview from '../components/RoutesOverview';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
@@ -39,6 +39,7 @@ export function ConfirmSwapPage() {
   const fetchingBestRouteError = useBestRouteStore.use.error();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const { blockchains, tokens } = useMetaStore.use.meta();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
@@ -55,7 +56,12 @@ export function ConfirmSwapPage() {
   );
 
   const { manager } = useManager();
-  const { loading, errors, warnings, confirmSwap } = useConfirmSwap();
+  const {
+    loading: fetchingConfirmedRoute,
+    errors,
+    warnings,
+    confirmSwap,
+  } = useConfirmSwap();
 
   const selectedSlippage = customSlippage || slippage;
 
@@ -74,8 +80,8 @@ export function ConfirmSwapPage() {
   const lastStep =
     bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
 
-  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
-  const toAmount = decimalNumber(lastStep?.toAmount, 3);
+  const fromAmount = numberToString(firstStep?.fromAmount, 4, 6);
+  const toAmount = numberToString(lastStep?.toAmount, 4, 6);
   useEffect(() => {
     initSelectedWallets();
   }, []);
@@ -109,7 +115,7 @@ export function ConfirmSwapPage() {
               { id: swap.requestId }
             );
             setSelectedSwap(swap.requestId);
-            navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
+            navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
               replace: true,
             });
             setTimeout(() => {
@@ -119,7 +125,7 @@ export function ConfirmSwapPage() {
         });
       }}
       onChange={(wallet) => setSelectedWallet(wallet)}
-      confirmDisabled={confirmDisabled}
+      confirmDisabled={loadingMetaStatus !== 'success' || confirmDisabled}
       handleConnectChain={(wallet) => handleConnectChain(wallet)}
       isExperimentalChain={(wallet) =>
         getKeplrCompatibleConnectedWallets(selectableWallets).length > 0
@@ -140,7 +146,11 @@ export function ConfirmSwapPage() {
             usdValue={inputUsdValue}
             amount={fromAmount}
             label={t('From')}
-            loadingStatus={bestRouteloadingStatus}
+            loadingStatus={
+              loadingMetaStatus !== 'success'
+                ? loadingMetaStatus
+                : bestRouteloadingStatus
+            }
           />
           <Spacer size={12} direction="vertical" />
           <TokenPreview
@@ -155,7 +165,11 @@ export function ConfirmSwapPage() {
             usdValue={outputUsdValue}
             amount={toAmount}
             label={t('To')}
-            loadingStatus={bestRouteloadingStatus}
+            loadingStatus={
+              loadingMetaStatus !== 'success'
+                ? loadingMetaStatus
+                : bestRouteloadingStatus
+            }
             percentageChange={
               <PercentageChange
                 inputUsdValue={inputUsdValue}
@@ -171,13 +185,19 @@ export function ConfirmSwapPage() {
           totalFee={numberToString(totalFeeInUsd, 0, 2)}
         />
       }
-      loading={loading}
+      loading={fetchingConfirmedRoute}
       errors={ConfirmSwapErrors(errors)}
       warnings={ConfirmSwapWarnings(warnings)}
       extraMessages={
-        showHighSlippageWarning && (
-          <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
-        )
+        <>
+          {loadingMetaStatus === 'failed' && <LoadingFailedAlert />}
+          {loadingMetaStatus === 'failed' && showHighSlippageWarning && (
+            <Spacer direction="vertical" />
+          )}
+          {showHighSlippageWarning && (
+            <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
+          )}
+        </>
       }
       confirmButtonTitle={
         warnings.length > 0 || errors.length > 0

package/src/pages/HistoryPage.tsx

@@ -24,7 +24,7 @@ export function HistoryPage() {
       loading={loading}
       onSwapClick={(requestId) => {
         setSelectedSwap(requestId);
-        navigate(navigationRoutes.swaps + `/${requestId}`, { replace: true });
+        navigate(`${requestId}`, { replace: true });
       }}
       onBack={navigateBackFrom.bind(null, navigationRoutes.swaps)}
     />