@rango-dev/widget-embedded 0.17.1-next.2 → 0.17.1-next.3

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -0,0 +1,107 @@
+import type { HighValueLossWarning } from '../../types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  MessageBox,
+  Modal,
+  Typography,
+  WarningIcon,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getContainer } from '../../utils/common';
+import { numberToString } from '../../utils/numbers';
+
+import { QuoteErrorsModalItem } from './QuoteErrorsModalItem';
+import { Flex } from './QuoteWarningsAndErrors.styles';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: HighValueLossWarning;
+};
+
+export function HighValueLossWarningModal(props: Props) {
+  const { open, onClose, onConfirm, warning } = props;
+  const type = warning.warningLevel === 'high' ? 'error' : 'warning';
+  const highValueLossData = [
+    {
+      title: i18n.t('Swapping'),
+      value: numberToString(
+        warning.inputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Gas cost'),
+      value: numberToString(
+        warning.totalFee,
+        GAS_FEE_MIN_DECIMALS,
+        GAS_FEE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Receiving'),
+      value: numberToString(
+        warning.outputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Price impact'),
+      value: numberToString(
+        warning.priceImpact,
+        PERCENTAGE_CHANGE_MIN_DECIMALS,
+        PERCENTAGE_CHANGE_MAX_DECIMALS
+      ),
+      valueColor: `${type}500`,
+    },
+  ];
+
+  return (
+    <Modal open={open} onClose={onClose} container={getContainer()}>
+      <MessageBox
+        type={type}
+        title={errorMessages().highValueLossError.impactTitle}
+        description={errorMessages().highValueLossError.description}
+      />
+
+      <Flex>
+        <Divider size={20} />
+        <Typography size="small" variant="title">
+          {i18n.t('Details')}
+        </Typography>
+        <Flex>
+          {highValueLossData.map((item, index) => {
+            const key = index;
+            return <QuoteErrorsModalItem key={key} {...item} />;
+          })}
+        </Flex>
+      </Flex>
+
+      <Divider size={32} />
+      <Button
+        type="primary"
+        size="large"
+        prefix={<WarningIcon />}
+        fullWidth
+        onClick={onConfirm}>
+        {errorMessages().highValueLossError.confirmMessage}
+      </Button>
+    </Modal>
+  );
+}

package/src/components/{RouteErrors/RouteErrorsModalItem.tsx → QuoteWarningsAndErrors/QuoteErrorsModalItem.tsx}

@@ -1,11 +1,11 @@
-import type { ModalContentData } from './RouteErrors.types';
+import type { ModalContentData } from './QuoteWarningsAndErrors.types';
 
 import { Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { Item } from './RouteErrors.styles';
+import { Item } from './QuoteWarningsAndErrors.styles';
 
-export function RouteErrorsModalItem(props: ModalContentData) {
+export function QuoteErrorsModalItem(props: ModalContentData) {
   const { title, value, valueColor } = props;
 
   return (

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -0,0 +1,67 @@
+import type {
+  BridgeLimitError,
+  InsufficientSlippageError,
+  QuoteWarning,
+} from '../../types';
+
+import { i18n } from '@lingui/core';
+
+import { errorMessages } from '../../constants/errors';
+import { QuoteErrorType, QuoteWarningType } from '../../types';
+import { getPriceImpactLevel } from '../../utils/quote';
+
+type AlertInfo = {
+  alertType: 'error' | 'warning';
+  title: string;
+  action: 'show-info' | 'change-settings' | null;
+};
+
+export function makeAlerts(
+  warning: QuoteWarning | null,
+  error: BridgeLimitError | InsufficientSlippageError | null
+): AlertInfo | null {
+  const alertInfo: AlertInfo = {
+    alertType: 'warning',
+    title: '',
+    action: 'show-info',
+  };
+  if (warning) {
+    if (warning.type === QuoteWarningType.HIGH_VALUE_LOSS) {
+      const warningLevel = getPriceImpactLevel(warning.priceImpact);
+      if (warningLevel === 'high') {
+        alertInfo.alertType = 'error';
+      }
+      alertInfo.title = errorMessages().highValueLossError.title;
+    }
+    if (warning.type === QuoteWarningType.UNKNOWN_PRICE) {
+      alertInfo.title = errorMessages().unknownPriceError.title;
+    }
+    if (warning.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) {
+      alertInfo.title = i18n.t({
+        id: 'minimum required slippage for this route: {minRequiredSlippage}',
+        values: {
+          minRequiredSlippage: warning.minRequiredSlippage,
+        },
+      });
+    }
+    if (warning.type === QuoteWarningType.HIGH_SLIPPAGE) {
+      alertInfo.title = i18n.t('Caution, your slippage is high');
+    }
+    return alertInfo;
+  }
+  if (error) {
+    alertInfo.alertType = 'error';
+    if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
+      alertInfo.title = error.recommendation;
+      alertInfo.action = null;
+    }
+
+    if (error.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
+      alertInfo.title = '';
+      alertInfo.action = 'change-settings';
+    }
+
+    return alertInfo;
+  }
+  return null;
+}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -0,0 +1,103 @@
+import type { PropTypes } from './QuoteWarningsAndErrors.types';
+
+import { i18n } from '@lingui/core';
+import { Alert, Button, InfoIcon } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { QuoteErrorType, QuoteWarningType } from '../../types';
+import { NoResult } from '../NoResult';
+
+import { HighValueLossWarningModal } from './HighValueLossWarningModal';
+import { makeAlerts } from './QuoteWarningsAndErrors.helpers';
+import { Action, Alerts } from './QuoteWarningsAndErrors.styles';
+import { SlippageWarningModal } from './SlippageWariningModal';
+import { UnknownPriceWarningModal } from './UnknownPriceWarningModal';
+
+export function QuoteWarningsAndErrors(props: PropTypes) {
+  const {
+    warning,
+    error,
+    refetchQuote,
+    showWarningModal,
+    onOpenWarningModal,
+    onCloseWarningModal,
+    onConfirmWarningModal,
+  } = props;
+
+  const navigate = useNavigate();
+
+  const warningModalHandlers = {
+    open: showWarningModal,
+    onClose: onCloseWarningModal,
+    onConfirm: onConfirmWarningModal,
+  };
+
+  const showNoResultMessage =
+    error?.type === QuoteErrorType.NO_RESULT ||
+    error?.type === QuoteErrorType.REQUEST_FAILED;
+
+  const alertInfo = makeAlerts(
+    warning,
+    error?.type === QuoteErrorType.BRIDGE_LIMIT ||
+      error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE
+      ? error
+      : null
+  );
+
+  const showAlerts = !!alertInfo;
+
+  return (
+    <>
+      {showNoResultMessage && <NoResult error={error} fetch={refetchQuote} />}
+
+      {showAlerts && (
+        <Alerts>
+          <Alert
+            title={alertInfo.title}
+            type={alertInfo.alertType}
+            variant="alarm"
+            action={
+              alertInfo.action === 'show-info' ? (
+                <Action onClick={onOpenWarningModal}>
+                  <InfoIcon size={12} color="gray" />
+                </Action>
+              ) : (
+                <Button
+                  size="xsmall"
+                  type={'error'}
+                  onClick={() => navigate(navigationRoutes.settings)}>
+                  {i18n.t('Change Settings')}
+                </Button>
+              )
+            }
+          />
+        </Alerts>
+      )}
+
+      {warning && (
+        <>
+          {warning.type === QuoteWarningType.HIGH_VALUE_LOSS && (
+            <HighValueLossWarningModal
+              {...warningModalHandlers}
+              warning={warning}
+            />
+          )}
+
+          {(warning.type === QuoteWarningType.HIGH_SLIPPAGE ||
+            warning.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) && (
+            <SlippageWarningModal {...warningModalHandlers} warning={warning} />
+          )}
+
+          {warning.type === QuoteWarningType.UNKNOWN_PRICE && (
+            <UnknownPriceWarningModal
+              {...warningModalHandlers}
+              warning={warning}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.types.ts

@@ -0,0 +1,24 @@
+import type { QuoteError, QuoteWarning } from '../../types';
+
+export interface PropTypes {
+  loading: boolean;
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
+  showWarningModal: boolean;
+  refetchQuote: () => void;
+  onOpenWarningModal: () => void;
+  onCloseWarningModal: () => void;
+  onConfirmWarningModal: () => void;
+}
+
+type ModalPropTypesKeys = keyof Omit<PropTypes, 'extraSpace' | 'loading'>;
+
+export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {
+  open: boolean;
+};
+
+export interface ModalContentData {
+  title: string;
+  value: string;
+  valueColor?: string;
+}

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -0,0 +1,77 @@
+import type {
+  HighSlippageWarning,
+  InsufficientSlippageWarning,
+} from '../../types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox, Modal, Typography } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useSettingsStore } from '../../store/settings';
+import { QuoteWarningType } from '../../types';
+import { getContainer } from '../../utils/common';
+
+type PropsTypes = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: InsufficientSlippageWarning | HighSlippageWarning;
+};
+
+export function SlippageWarningModal(props: PropsTypes) {
+  const { customSlippage, slippage } = useSettingsStore();
+  const { open, onClose, onConfirm, warning } = props;
+  const navigate = useNavigate();
+  const userSlippage = customSlippage ?? slippage;
+  return (
+    <Modal
+      anchor="bottom"
+      open={open}
+      prefix={
+        <Button
+          size="small"
+          variant="ghost"
+          onClick={() => navigate('/' + navigationRoutes.settings)}>
+          <Typography variant="label" size="medium" color="$neutral900">
+            {i18n.t('Change settings')}
+          </Typography>
+        </Button>
+      }
+      container={getContainer()}
+      onClose={onClose}>
+      <MessageBox
+        type="warning"
+        title={
+          warning.type === QuoteWarningType.HIGH_SLIPPAGE
+            ? i18n.t('High slippage')
+            : i18n.t('Low slippage')
+        }
+        description={
+          warning.type === QuoteWarningType.HIGH_SLIPPAGE
+            ? i18n.t({
+                id: ' Caution, your slippage is high (={userSlippage}). Your trade may be front run.',
+                values: { userSlippage },
+              })
+            : i18n.t({
+                id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+                values: {
+                  minRequiredSlippage: warning.minRequiredSlippage,
+                },
+              })
+        }>
+        <Divider size={18} />
+        <Divider size={32} />
+        <Button
+          size="large"
+          type="primary"
+          variant="contained"
+          fullWidth
+          onClick={onConfirm}>
+          {i18n.t('Confirm anyway')}
+        </Button>
+      </MessageBox>
+    </Modal>
+  );
+}

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -0,0 +1,38 @@
+import type { UnknownPriceWarning } from '../../types';
+
+import { Button, Divider, MessageBox, Modal, WarningIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { getContainer } from '../../utils/common';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: UnknownPriceWarning;
+};
+
+export function UnknownPriceWarningModal(props: Props) {
+  const { open, onClose, onConfirm } = props;
+
+  return (
+    <Modal open={open} onClose={onClose} container={getContainer()}>
+      <MessageBox
+        type="warning"
+        title={errorMessages().unknownPriceError.impactTitle}
+        description={errorMessages().unknownPriceError.description}
+      />
+
+      <Divider size={32} />
+      <Button
+        type="primary"
+        size="large"
+        prefix={<WarningIcon />}
+        fullWidth
+        onClick={onConfirm}>
+        {errorMessages().unknownPriceError.confirmMessage}
+      </Button>
+    </Modal>
+  );
+}

package/src/components/QuoteWarningsAndErrors/index.ts

@@ -0,0 +1 @@
+export { QuoteWarningsAndErrors } from './QuoteWarningsAndErrors';

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -31,7 +31,7 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+        onBack: () => navigateBackFrom(navigationRoutes.swapDetails),
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (

package/src/components/SwapDetails/SwapDetails.tsx

@@ -13,8 +13,7 @@ import {
   CopyIcon,
   Divider,
   IconButton,
-  RouteCost,
-  RouteSummary,
+  QuoteCost,
   StepDetails,
   Typography,
   useCopyToClipboard,
@@ -35,18 +34,17 @@ import {
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
-import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
 import { useNotificationStore } from '../../store/notification';
+import { useQuoteStore } from '../../store/quote';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../../utils/numbers';
-import { getPriceImpactLevel } from '../../utils/routing';
+import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import {
   getLastConvertedTokenInFailedSwap,
-  getPercentageChange,
   getSwapMessages,
   shouldRetrySwap,
 } from '../../utils/swap';
@@ -54,6 +52,7 @@ import { getSwapDate } from '../../utils/time';
 import { getConciseAddress, getUsdPrice } from '../../utils/wallets';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../Layout';
+import { QuoteSummary } from '../Quote';
 import {
   SwapDetailsCompleteModal,
   SwapDetailsModal,
@@ -65,7 +64,7 @@ import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
-  const retry = useBestRouteStore.use.retry();
+  const retry = useQuoteStore.use.retry();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
@@ -201,7 +200,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     USD_VALUE_MAX_DECIMALS
   );
 
-  const percentageChange = getPercentageChange(inputUsdValue, outputUsdValue);
+  const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
 
   const completeModalDesc =
     swap.status === 'success'
@@ -239,7 +238,7 @@ export function SwapDetails(props: SwapDetailsProps) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
+        onBack: () => navigateBackFrom(navigationRoutes.swapDetails),
         onCancel:
           swap.status === 'running' ? () => setModalState('cancel') : undefined,
         suffix: swap.status !== 'running' && (
@@ -302,7 +301,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         </HeaderDetails>
 
         <div className="output">
-          <RouteCost
+          <QuoteCost
             fee={numberToString(
               String(totalFee),
               GAS_FEE_MIN_DECIMALS,
@@ -311,7 +310,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             time={secondsToString(totalArrivalTime(swap.steps))}
             steps={numberOfSteps}
           />
-          <RouteSummary
+          <QuoteSummary
             from={{
               price: {
                 value: numberToString(
@@ -349,13 +348,11 @@ export function SwapDetails(props: SwapDetailsProps) {
               },
             }}
             percentageChange={numberToString(
-              percentageChange,
+              String(percentageChange),
               PERCENTAGE_CHANGE_MIN_DECIMALS,
               PERCENTAGE_CHANGE_MAX_DECIMALS
             )}
-            warningLevel={getPriceImpactLevel(
-              percentageChange?.toNumber() ?? 0
-            )}
+            warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
           />
         </div>
         <div className="title-steps">
@@ -377,7 +374,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               <StepDetails
                 key={key}
                 step={step}
-                type="route-progress"
+                type="swap-progress"
                 ref={listRef}
                 state={state}
                 hasSeparator={index !== 0}
@@ -409,7 +406,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         )}
         usdValue={outputUsdValue}
         percentageChange={numberToString(
-          percentageChange,
+          String(percentageChange),
           PERCENTAGE_CHANGE_MIN_DECIMALS,
           PERCENTAGE_CHANGE_MAX_DECIMALS
         )}

package/src/components/SwitchFromAndTo.tsx

@@ -1,7 +1,7 @@
 import { ReverseIcon, styled } from '@rango-dev/ui';
 import React from 'react';
 
-import { useBestRouteStore } from '../store/bestRoute';
+import { useQuoteStore } from '../store/quote';
 
 const SwitchButtonContainer = styled('div', {
   position: 'absolute',
@@ -27,7 +27,7 @@ const StyledButton = styled('div', {
 });
 
 export function SwitchFromAndToButton() {
-  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
+  const switchFromAndTo = useQuoteStore.use.switchFromAndTo();
 
   return (
     <SwitchButtonContainer>

package/src/components/UpdateUrl.tsx

@@ -10,10 +10,10 @@ import {
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
 import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
-import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
+import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
-import { searchParamsToToken } from '../utils/routing';
+import { searchParamsToToken } from '../utils/quote';
 
 type Props = { config: WidgetConfig | undefined };
 
@@ -23,16 +23,16 @@ export function UpdateUrl(props: Props) {
   const location = useLocation();
   const firstRenderSearchParams = useRef(location.search);
   const searchParamsRef = useRef<Record<string, string>>({});
-  const fromBlockchain = useBestRouteStore.use.fromBlockchain();
-  const toBlockchain = useBestRouteStore.use.toBlockchain();
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toToken = useBestRouteStore.use.toToken();
-  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
-  const setToToken = useBestRouteStore.use.setToToken();
-  const inputAmount = useBestRouteStore.use.inputAmount();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const fromBlockchain = useQuoteStore.use.fromBlockchain();
+  const toBlockchain = useQuoteStore.use.toBlockchain();
+  const fromToken = useQuoteStore.use.fromToken();
+  const toToken = useQuoteStore.use.toToken();
+  const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
+  const setFromToken = useQuoteStore.use.setFromToken();
+  const setToBlockchain = useQuoteStore.use.setToBlockchain();
+  const setToToken = useQuoteStore.use.setToToken();
+  const inputAmount = useQuoteStore.use.inputAmount();
+  const setInputAmount = useQuoteStore.use.setInputAmount();
   const loadingStatus = useMetaStore.use.loadingStatus();
   const { blockchains, tokens } = useMetaStore.use.meta();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();

package/src/constants/errors.ts

@@ -1,8 +1,8 @@
-import type { ConfirmSwapError } from '../types';
+import type { QuoteError } from '../types';
 
 import { i18n } from '@lingui/core';
 
-import { ConfirmSwapErrorTypes } from '../types';
+import { QuoteErrorType } from '../types';
 
 export const errorMessages = () => {
   return {
@@ -13,7 +13,7 @@ export const errorMessages = () => {
         'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
       ),
     },
-    noRoutesError: {
+    noResultError: {
       title: i18n.t('No Routes Found'),
       description: i18n.t(
         "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination."
@@ -31,7 +31,7 @@ export const errorMessages = () => {
       ),
       confirmMessage: i18n.t('Confirm High price impact'),
     },
-    routeUpdatedWithHighValueLoss: {
+    quoteUpdatedWithHighValueLoss: {
       title: i18n.t(
         'Route updated and price impact is too high, try again later!'
       ),
@@ -47,14 +47,12 @@ export const errorMessages = () => {
   };
 };
 
-export function getConfirmSwapErrorMessage(error: ConfirmSwapError) {
+export function getQuoteErrorMessage(error: QuoteError) {
   switch (error.type) {
-    case ConfirmSwapErrorTypes.NO_ROUTE:
-      return error.diagnosisMessage ?? errorMessages().noRoutesError.title;
-    case ConfirmSwapErrorTypes.REQUEST_FAILED:
+    case QuoteErrorType.NO_RESULT:
+      return error.diagnosisMessage ?? errorMessages().noResultError.title;
+    case QuoteErrorType.REQUEST_FAILED:
       return errorMessages().genericServerError;
-    case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-      return errorMessages().routeUpdatedWithHighValueLoss.title;
     default:
       return '';
   }

package/src/constants/messages.ts

@@ -5,6 +5,6 @@ export const swapButtonTitles = () => {
     connectWallet: i18n.t('Connect Wallet'),
     swap: i18n.t('Swap'),
     swapAnyway: i18n.t('Swap anyway'),
-    ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'),
+    ethWarning: i18n.t('The route goes through Ethereum. Continue?'),
   };
 };