@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

package/src/pages/ConfirmSwapPage.tsx

@@ -1,265 +1,529 @@
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useBestRouteStore } from '../store/bestRoute';
-import { useWalletsStore } from '../store/wallets';
-import { useWallets } from '@rango-dev/wallets-react';
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type {
+  ConfirmSwap,
+  ConfirmSwapFetchResult,
+} from '../hooks/useConfirmSwap';
+import type { WidgetConfig } from '../types';
+
 import { i18n } from '@lingui/core';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import {
-  getKeplrCompatibleConnectedWallets,
-  getRequiredChains,
-  getSelectableWallets,
-  isExperimentalChain,
-} from '../utils/wallets';
-import {
-  confirmSwapDisabled,
-  getPercentageChange,
-  getTotalFeeInUsd,
-  isValidCustomDestination,
-} from '../utils/swap';
-import { numberToString } from '../utils/numbers';
-import { useMetaStore } from '../store/meta';
-import { WalletType } from '@rango-dev/wallets-shared';
-import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useManager } from '@rango-dev/queue-manager-react';
 import {
+  Alert,
+  BestRoute,
+  BestRouteSkeleton,
+  Button,
   Divider,
-  ConfirmSwap,
-  LoadingFailedAlert,
-  HighSlippageWarning,
-  PercentageChange,
-  RoutesOverview,
-  TokenPreview,
+  IconButton,
+  MessageBox,
+  Modal,
+  RefreshIcon,
+  SettingsIcon,
+  styled,
+  Tooltip,
+  Typography,
+  WalletIcon,
 } from '@rango-dev/ui';
-import { useManager } from '@rango-dev/queue-manager-react';
+import React, { useEffect, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  formatBestRoute,
+  getRequiredWallets,
+} from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
+import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
+import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
+import { Layout } from '../components/Layout';
+import { NoRoutes } from '../components/NoRoutes';
+import { getConfirmSwapErrorMessage } from '../constants/errors';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../constants/routing';
+import { getRouteWarningMessage } from '../constants/warnings';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 import { useUiStore } from '../store/ui';
-import { ConfirmSwapErrorTypes } from '../types';
-import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
-import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
-import { HIGH_SLIPPAGE } from '../constants/swapSettings';
-import { getBestRouteStatus } from '../utils/routing';
+import { useWalletsStore } from '../store/wallets';
+import {
+  ConfirmSwapErrorTypes,
+  RouteWarningType,
+  SlippageWarningType,
+} from '../types';
+import {
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../utils/numbers';
+import { getPriceImpactLevel } from '../utils/routing';
+import { getPercentageChange, getTotalFeeInUsd } from '../utils/swap';
+
+const Container = styled('div', {
+  position: 'relative',
+  width: '100%',
+  '& .description': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingBottom: '$10',
+  },
+  '& .icon': {
+    width: '$24',
+    height: '$24',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
 
-export function ConfirmSwapPage({
-  customDestinationEnabled,
-}: {
-  customDestinationEnabled?: boolean;
-}) {
+const Buttons = styled('div', {
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+  '& .confirm-button': {
+    flexGrow: 1,
+    paddingRight: '$10',
+  },
+  [`& ${IconButton}`]: {
+    width: '$48',
+    height: '$48',
+  },
+});
+
+type PropTypes = {
+  config?: WidgetConfig;
+};
+
+export function ConfirmSwapPage(props: PropTypes) {
+  //TODO: move component's logics to a custom hook
+  const { config } = props;
+  const {
+    bestRoute,
+    inputAmount,
+    outputAmount,
+    inputUsdValue,
+    outputUsdValue,
+    setInputAmount,
+    selectedWallets,
+    routeWalletsConfirmed,
+    setRouteWalletConfirmed,
+    customDestination,
+  } = useBestRouteStore();
   const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-  const fetchingBestRoute = useBestRouteStore.use.loading();
-  const fetchingBestRouteError = useBestRouteStore.use.error();
+  const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
+  const [showSlippageWarning, setShowSlippageWarning] = useState(false);
+
+  const { connectedWallets } = useWalletsStore();
+  const showWalletsOnInit = !routeWalletsConfirmed;
+  const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const { blockchains, tokens } = useMetaStore.use.meta();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const selectedWallets = useWalletsStore.use.selectedWallets();
-  const customDestination = useWalletsStore.use.customDestination();
-  const setCustomDestination = useWalletsStore.use.setCustomDestination();
-  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
-  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
+  const {
+    meta: { tokens },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
-  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
-  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
-  const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
-  const bestRouteloadingStatus = getBestRouteStatus(
-    fetchingBestRoute,
-    !!fetchingBestRouteError
-  );
-  const [destinationChain, setDestinationChain] = useState<string>('');
-
   const { manager } = useManager();
+  const selectedSlippage = customSlippage || slippage;
   const {
-    loading: fetchingConfirmedRoute,
-    errors,
-    warnings,
-    confirmSwap,
+    fetch: confirmSwap,
+    loading: fetchingConfirmationRoute,
+    cancelFetch,
   } = useConfirmSwap();
+  const [confirmSwapResult, setConfirmSwapResult] =
+    useState<ConfirmSwapFetchResult>({
+      swap: null,
+      error: null,
+      warnings: null,
+    });
+  const showSkeleton =
+    fetchingConfirmationRoute || loadingMetaStatus === 'loading';
+  const showNoRouteFound =
+    !fetchingConfirmationRoute &&
+    confirmSwapResult.error &&
+    [
+      ConfirmSwapErrorTypes.NO_ROUTE,
+      ConfirmSwapErrorTypes.REQUEST_FAILED,
+    ].includes(confirmSwapResult.error.type);
+  const showBestRoute =
+    !showNoRouteFound &&
+    !fetchingConfirmationRoute &&
+    bestRoute &&
+    bestRoute.result;
 
-  const selectedSlippage = customSlippage || slippage;
-
-  const showHighSlippageWarning = !errors.find(
-    (error) => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+  const percentageChange = numberToString(
+    getPercentageChange(
+      inputUsdValue?.toNumber() ?? 0,
+      outputUsdValue?.toNumber() ?? 0
+    ),
+    PERCENTAGE_CHANGE_MIN_DECIMALS,
+    PERCENTAGE_CHANGE_MAX_DECIMALS
   );
 
-  const { getWalletInfo, connect } = useWallets();
+  const warningLevel = getPriceImpactLevel(parseFloat(percentageChange));
+
+  const onConfirmSwap: ConfirmSwap['fetch'] = async ({
+    selectedWallets,
+    customDestination,
+  }) => {
+    const result = await confirmSwap?.({ selectedWallets, customDestination });
+    setConfirmSwapResult(result);
+    return result;
+  };
+
+  const addNewSwap = async () => {
+    if (confirmSwapResult.swap && routeWalletsConfirmed) {
+      try {
+        await manager?.create(
+          'swap',
+          { swapDetails: confirmSwapResult.swap },
+          { id: confirmSwapResult.swap.requestId }
+        );
+        setSelectedSwap(confirmSwapResult.swap.requestId);
+        navigate(
+          '/' + navigationRoutes.swaps + `/${confirmSwapResult.swap.requestId}`,
+          {
+            replace: true,
+          }
+        );
+        setTimeout(() => {
+          setInputAmount('');
+        }, 0);
+      } catch (e) {
+        setDbErrorMessage('Error: ' + (e as any)?.message);
+      }
+    }
+  };
+
+  const onConfirm = async () => {
+    await addNewSwap();
+  };
 
-  const firstStep = bestRoute?.result?.swaps[0];
-  const lastStep =
-    bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
+  const onStartConfirmSwap = async () => {
+    if (confirmSwapResult?.warnings?.slippage) {
+      setShowSlippageWarning(true);
+    } else {
+      await onConfirm();
+    }
+  };
+
+  const onRefresh = async () => {
+    setConfirmSwapResult({
+      error: null,
+      swap: null,
+      warnings: null,
+    });
+    confirmSwap({ selectedWallets })
+      .then((res) => {
+        setConfirmSwapResult(res);
+      })
+      .catch((error) => console.error(error));
+  };
 
-  const fromAmount = numberToString(firstStep?.fromAmount, 4, 6);
-  const toAmount = numberToString(lastStep?.toAmount, 4, 6);
   useEffect(() => {
-    initSelectedWallets();
-    if (customDestination) {
-      setCustomDestination('');
+    if (showWalletsOnInit) {
+      cancelFetch();
+    }
+  }, [showWalletsOnInit]);
+
+  useEffect(() => {
+    if (showWalletsOnInit) {
+      setShowWallets(showWalletsOnInit);
+    }
+  }, [showWalletsOnInit]);
+
+  useEffect(() => {
+    if (!showWalletsOnInit) {
+      confirmSwap({ selectedWallets, customDestination })
+        .then((result) => setConfirmSwapResult(result))
+        .catch((error) => console.error(error));
     }
   }, []);
-  const lastStepToBlockchain =
-    bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.blockchain;
-  const isWalletRequired = !!bestRoute?.result?.swaps.find(
-    (swap) => swap.from.blockchain === lastStepToBlockchain
-  );
 
-  const selectableWallets = getSelectableWallets(
-    connectedWallets,
-    selectedWallets,
-    getWalletInfo,
-    isWalletRequired ? '' : destinationChain
-  );
+  useEffect(() => {
+    const routeChanged =
+      confirmSwapResult.warnings?.route?.type &&
+      Object.values(RouteWarningType).includes(
+        confirmSwapResult.warnings?.route?.type
+      );
 
-  const handleConnectChain = (wallet: string) => {
-    const network = wallet;
-    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(
-      (compatibleWallet: WalletType) => connect?.(compatibleWallet, network)
-    );
-  };
+    const selectedWalletDisconnected =
+      selectedWallets.length < 1 ||
+      !selectedWallets.every((selectedWallet) =>
+        connectedWallets.find(
+          (connectedWallet) =>
+            selectedWallet.address === connectedWallet.address &&
+            selectedWallet.walletType === connectedWallet.walletType &&
+            selectedWallet.chain === connectedWallet.chain
+        )
+      );
 
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+    let routeWalletsChanged = false;
 
-  const percentageChange =
-    !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
-      ? null
-      : getPercentageChange(
-          inputUsdValue.toNumber(),
-          outputUsdValue.toNumber()
+    if (routeChanged) {
+      let requiredWallets = getRequiredWallets(bestRoute);
+
+      const lastStepToBlockchain =
+        bestRoute?.result?.swaps[bestRoute.result.swaps.length - 1].to
+          .blockchain;
+
+      const isLastWalletRequired = !!bestRoute?.result?.swaps.find(
+        (swap) => swap.from.blockchain === lastStepToBlockchain
+      );
+
+      if (!isLastWalletRequired) {
+        requiredWallets = requiredWallets.slice(
+          -requiredWallets.length,
+          requiredWallets.length - 1
         );
+      }
+
+      const allRequiredWalletsSelected = requiredWallets.every(
+        (requiredWallet) =>
+          selectedWallets.find(
+            (selectedWallet) => selectedWallet.chain === requiredWallet
+          )
+      );
+
+      if (!allRequiredWalletsSelected) {
+        routeWalletsChanged = true;
+      }
+    }
+
+    if (bestRoute && (selectedWalletDisconnected || routeWalletsChanged)) {
+      queueMicrotask(() => flushSync(setShowWallets.bind(null, true)));
+      setRouteWalletConfirmed(false);
+    }
+  }, [
+    confirmSwapResult.warnings?.route,
+    selectedWallets.length,
+    connectedWallets.length,
+  ]);
 
   return (
-    <ConfirmSwap
-      requiredWallets={getRequiredChains(bestRoute)}
-      selectableWallets={selectableWallets}
-      setCustomDestination={setCustomDestination}
-      customDestination={customDestination}
-      customDestinationEnabled={customDestinationEnabled}
-      isValidCustomDestination={isValidCustomDestination}
-      checkedDestination={!!destinationChain}
-      setDestinationChain={setDestinationChain}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
-      onConfirm={async () => {
-        confirmSwap?.().then(async (swap) => {
-          if (swap) {
-            try {
-              await manager?.create(
-                'swap',
-                { swapDetails: swap },
-                { id: swap.requestId }
-              );
-              setSelectedSwap(swap.requestId);
-              navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
-                replace: true,
-              });
-              setTimeout(() => {
-                setInputAmount('');
-              }, 0);
-            } catch (e) {
-              setDbErrorMessage('Error: ' + (e as any)?.message);
-            }
-          }
-        });
+    <Layout
+      header={{
+        title: 'Confirm Swap',
+        onBack: navigate.bind(null, -1),
+        hasConnectWallet: true,
+        suffix: (
+          <Tooltip side="bottom" content={i18n.t('Settings')}>
+            <HeaderButton
+              size="small"
+              variant="ghost"
+              onClick={() => navigate('/' + navigationRoutes.settings)}>
+              <SettingsIcon size={18} color="black" />
+            </HeaderButton>
+          </Tooltip>
+        ),
       }}
-      isWalletRequired={isWalletRequired}
-      onChange={(wallet) => setSelectedWallet(wallet)}
-      confirmDisabled={
-        loadingMetaStatus !== 'success' ||
-        confirmSwapDisabled(
-          fetchingBestRoute,
-          destinationChain,
-          customDestination,
-          bestRoute,
-          selectableWallets
-        )
-      }
-      handleConnectChain={(wallet) => handleConnectChain(wallet)}
-      isExperimentalChain={(wallet) =>
-        getKeplrCompatibleConnectedWallets(selectableWallets).length > 0
-          ? isExperimentalChain(blockchains, wallet)
-          : false
-      }
-      previewInputs={
-        <>
-          <TokenPreview
-            chain={{
-              displayName: firstStep?.from.blockchain || '',
-              logo: firstStep?.from.blockchainLogo || '',
-            }}
-            token={{
-              symbol: firstStep?.from.symbol || '',
-              image: firstStep?.from.logo || '',
-            }}
-            usdValue={inputUsdValue ? numberToString(inputUsdValue) : null}
-            amount={fromAmount}
-            label={i18n.t('From')}
-            loadingStatus={
-              loadingMetaStatus !== 'success'
-                ? loadingMetaStatus
-                : bestRouteloadingStatus
+      footer={
+        <Buttons>
+          <div className="confirm-button">
+            <Button
+              variant="contained"
+              type="primary"
+              size="large"
+              fullWidth
+              loading={fetchingConfirmationRoute}
+              disabled={!!confirmSwapResult.error}
+              onClick={onStartConfirmSwap}>
+              Start Swap
+            </Button>
+          </div>
+          <IconButton
+            variant="contained"
+            type="primary"
+            size="large"
+            loading={fetchingConfirmationRoute}
+            onClick={setShowWallets.bind(null, true)}>
+            <WalletIcon size={24} />
+          </IconButton>
+        </Buttons>
+      }>
+      <Modal
+        anchor="bottom"
+        open={showSlippageWarning}
+        prefix={
+          <Button
+            size="small"
+            variant="ghost"
+            onClick={() => navigate('/' + navigationRoutes.settings)}>
+            <Typography variant="label" size="medium" color="$neutral900">
+              Change settings
+            </Typography>
+          </Button>
+        }
+        container={document.querySelector('#swap-box') as HTMLDivElement}
+        onClose={setShowSlippageWarning.bind(null, (prevState) => !prevState)}>
+        {confirmSwapResult.warnings?.slippage && (
+          <MessageBox
+            type="warning"
+            title={
+              confirmSwapResult.warnings.slippage.type ===
+              SlippageWarningType.HIGH_SLIPPAGE
+                ? 'High slippage'
+                : 'Low slippage'
             }
-          />
-          <Divider size={12} />
-          <TokenPreview
-            chain={{
-              displayName: lastStep?.to.blockchain || '',
-              logo: lastStep?.to.blockchainLogo || '',
+            description={
+              confirmSwapResult.warnings.slippage.type ===
+              SlippageWarningType.HIGH_SLIPPAGE
+                ? i18n.t(
+                    'highSlippage',
+                    { selectedSlippage },
+                    {
+                      message:
+                        ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
+                    }
+                  )
+                : i18n.t(
+                    'increaseSlippage',
+
+                    {
+                      minRequiredSlippage:
+                        confirmSwapResult.warnings.slippage.slippage,
+                    },
+                    {
+                      message:
+                        'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+                    }
+                  )
+            }>
+            <Divider size={18} />
+            <Divider size={32} />
+            <Button
+              size="large"
+              type="primary"
+              variant="contained"
+              fullWidth
+              onClick={onConfirm}>
+              Confirm anyway
+            </Button>
+          </MessageBox>
+        )}
+      </Modal>
+      {showWallets && (
+        <ConfirmWalletsModal
+          open={showWallets}
+          onClose={() => setShowWallets(false)}
+          onCancel={cancelFetch}
+          loading={fetchingConfirmationRoute}
+          onCheckBalance={onConfirmSwap}
+          config={config}
+        />
+      )}
+
+      <Container>
+        <div className="description">
+          <Typography variant="title" size="small">
+            You get
+          </Typography>
+          <Button
+            style={{ padding: '0' }}
+            variant="ghost"
+            disabled={fetchingConfirmationRoute}
+            onClick={onRefresh}>
+            <div className="icon">
+              <RefreshIcon size={16} />
+            </div>
+          </Button>
+        </div>
+        {dbErrorMessage && (
+          <>
+            <Alert type="error" variant="alarm" title={dbErrorMessage} />
+            <Divider size={12} />
+          </>
+        )}
+        {confirmSwapResult.warnings?.route && (
+          <>
+            <Alert
+              variant="alarm"
+              type="warning"
+              title={getRouteWarningMessage(confirmSwapResult.warnings.route)}
+            />
+            <Divider size={12} />
+          </>
+        )}
+        {showSkeleton && <BestRouteSkeleton type="swap-preview" expanded />}
+        {showBestRoute && (
+          <BestRoute
+            expanded={true}
+            steps={formatBestRoute(bestRoute) ?? []}
+            input={{
+              value: numberToString(
+                inputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                inputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
             }}
-            token={{
-              symbol: lastStep?.to.symbol || '',
-              image: lastStep?.to.logo || '',
+            output={{
+              value: numberToString(
+                outputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                outputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
             }}
-            usdValue={outputUsdValue ? numberToString(outputUsdValue) : null}
-            amount={toAmount}
-            label={i18n.t('To')}
-            loadingStatus={
-              loadingMetaStatus !== 'success'
-                ? loadingMetaStatus
-                : bestRouteloadingStatus
-            }
-            percentageChange={
-              !percentageChange ? null : (
-                <PercentageChange
-                  percentageChange={numberToString(percentageChange, 0, 2)}
-                  showPercentageChange={!!percentageChange?.lt(0)}
-                />
-              )
-            }
-          />
-        </>
-      }
-      previewRoutes={
-        <RoutesOverview
-          routes={bestRoute}
-          totalFee={numberToString(totalFeeInUsd, 0, 2)}
-        />
-      }
-      loading={fetchingConfirmedRoute}
-      errors={
-        dbErrorMessage
-          ? [dbErrorMessage, ...ConfirmSwapErrors(errors)]
-          : ConfirmSwapErrors(errors)
-      }
-      warnings={ConfirmSwapWarnings(warnings)}
-      extraMessages={
-        <>
-          {loadingMetaStatus === 'failed' && <LoadingFailedAlert />}
-          {loadingMetaStatus === 'failed' && showHighSlippageWarning && (
-            <Divider />
-          )}
-          <HighSlippageWarning
-            selectedSlippage={selectedSlippage}
-            highSlippage={selectedSlippage >= HIGH_SLIPPAGE}
-            changeSlippage={() => navigate('/' + navigationRoutes.settings)}
+            totalFee={numberToString(
+              totalFeeInUsd,
+              GAS_FEE_MIN_DECIMALS,
+              GAS_FEE_MAX_DECIMALS
+            )}
+            totalTime={secondsToString(totalArrivalTime(bestRoute))}
+            recommended={true}
+            type="swap-preview"
+            percentageChange={percentageChange}
+            warningLevel={warningLevel}
           />
-        </>
-      }
-      confirmButtonTitle={
-        warnings.length > 0 || errors.length > 0
-          ? `${i18n.t('Proceed anyway!')}`
-          : `${i18n.t('Confirm swap!')}`
-      }
-    />
+        )}
+        {showNoRouteFound && (
+          <>
+            <Divider size={12} />
+            <NoRoutes
+              diagnosisMessage={
+                confirmSwapResult.error?.type === ConfirmSwapErrorTypes.NO_ROUTE
+                  ? confirmSwapResult.error.diagnosisMessage
+                  : undefined
+              }
+              error={
+                confirmSwapResult.error?.type ===
+                ConfirmSwapErrorTypes.REQUEST_FAILED
+              }
+              fetch={onRefresh}
+            />
+          </>
+        )}
+        {confirmSwapResult.error?.type ===
+          ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS && (
+          <>
+            <Alert
+              variant="alarm"
+              type="error"
+              title={getConfirmSwapErrorMessage(confirmSwapResult.error)}
+            />
+            <Divider size={12} />
+          </>
+        )}
+      </Container>
+    </Layout>
   );
 }