From 346c93e52e8b6fdaa26a22c1a3c501c68d84c116 Mon Sep 17 00:00:00 2001
From: mikasackermn <mikasa@rango.exchange>
Date: Wed, 13 Nov 2024 12:11:29 +0000
Subject: [PATCH] feat: display same source and destination token warning on
 widget

---
 .../components/NoResult/NoResult.helpers.ts    | 18 ++++++++++++------
 .../src/components/NoResult/NoResult.types.ts  |  8 ++++++--
 .../QuoteWarningsAndErrors.helpers.ts          |  6 ++++++
 .../QuoteWarningsAndErrors.tsx                 | 17 +++++++++++++----
 widget/embedded/src/hooks/useSwapInput.ts      | 13 ++++++++-----
 widget/embedded/src/types/quote.ts             |  8 +++++++-
 6 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/widget/embedded/src/components/NoResult/NoResult.helpers.ts b/widget/embedded/src/components/NoResult/NoResult.helpers.ts
index 679e117873..2415707114 100644
--- a/widget/embedded/src/components/NoResult/NoResult.helpers.ts
+++ b/widget/embedded/src/components/NoResult/NoResult.helpers.ts
@@ -1,19 +1,20 @@
 import type { Info } from './NoResult.types';
+import type {
+  NoResultError,
+  QuoteRequestFailed,
+  SameTokensWarning,
+} from '../../types';
 
 import { i18n } from '@lingui/core';
 
 import { errorMessages } from '../../constants/errors';
-import {
-  type NoResultError,
-  QuoteErrorType,
-  type QuoteRequestFailed,
-} from '../../types';
+import { QuoteErrorType, QuoteWarningType } from '../../types';
 
 const SMALL_NO_ROUTE__ICON_SIZE = 24;
 const LARGE_NO_ROUTE_ICON_SIZE = 60;
 
 export function makeInfo(
-  error: NoResultError | QuoteRequestFailed | null,
+  error: NoResultError | QuoteRequestFailed | SameTokensWarning | null,
   disabledLiquiditySources: string[],
   toggleAllLiquiditySources: (shouldReset: boolean) => void,
   refetchQuote: () => void
@@ -30,6 +31,11 @@ export function makeInfo(
       },
       description: '',
     };
+  } else if (error?.type === QuoteWarningType.SAME_TOKENS) {
+    return {
+      alert: null,
+      description: '',
+    };
   } else if (disabledLiquiditySources.length) {
     return {
       alert: {
diff --git a/widget/embedded/src/components/NoResult/NoResult.types.ts b/widget/embedded/src/components/NoResult/NoResult.types.ts
index 8821114652..7e12d0e43b 100644
--- a/widget/embedded/src/components/NoResult/NoResult.types.ts
+++ b/widget/embedded/src/components/NoResult/NoResult.types.ts
@@ -1,8 +1,12 @@
-import type { NoResultError, QuoteRequestFailed } from '../../types';
+import type {
+  NoResultError,
+  QuoteRequestFailed,
+  SameTokensWarning,
+} from '../../types';
 
 export interface PropTypes {
   fetch: () => void;
-  error: NoResultError | QuoteRequestFailed | null;
+  error: NoResultError | QuoteRequestFailed | SameTokensWarning | null;
   size?: 'small' | 'large';
 }
 
diff --git a/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts b/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts
index 367dc68149..d71610bb03 100644
--- a/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts
+++ b/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts
@@ -68,6 +68,12 @@ export function makeAlerts(
       alertInfo.title = i18n.t('Caution, your slippage is high.');
       alertInfo.action = 'change-settings';
     }
+    if (warning.type === QuoteWarningType.SAME_TOKENS) {
+      alertInfo.title = i18n.t(
+        'You cannot use the same token for From and To.'
+      );
+    }
+
     return alertInfo;
   }
   return null;
diff --git a/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx b/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx
index b1874144c7..f9007a3ec8 100644
--- a/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx
+++ b/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx
@@ -33,10 +33,18 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     onClose: onCloseWarningModal,
     onConfirm: onConfirmWarningModal,
   };
+  const isNoResultError = error?.type === QuoteErrorType.NO_RESULT;
+  const isRequestFailedError = error?.type === QuoteErrorType.REQUEST_FAILED;
+  const isSameTokensWarning = warning?.type === QuoteWarningType.SAME_TOKENS;
 
   const showNoResultMessage =
-    error?.type === QuoteErrorType.NO_RESULT ||
-    error?.type === QuoteErrorType.REQUEST_FAILED;
+    isNoResultError || isRequestFailedError || isSameTokensWarning;
+
+  const displayedError = isSameTokensWarning
+    ? warning
+    : isNoResultError || isRequestFailedError
+    ? error
+    : null;
 
   const alertInfo = makeAlerts(
     warning,
@@ -53,8 +61,9 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
 
   return (
     <>
-      {showNoResultMessage && <NoResult error={error} fetch={refetchQuote} />}
-
+      {showNoResultMessage && (
+        <NoResult error={displayedError} fetch={refetchQuote} />
+      )}
       {showAlerts && (
         <Alerts>
           <Alert
diff --git a/widget/embedded/src/hooks/useSwapInput.ts b/widget/embedded/src/hooks/useSwapInput.ts
index 5bca482537..ce74fb9226 100644
--- a/widget/embedded/src/hooks/useSwapInput.ts
+++ b/widget/embedded/src/hooks/useSwapInput.ts
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
-import { QuoteErrorType } from '../types';
+import { QuoteErrorType, QuoteWarningType } from '../types';
 import { debounce } from '../utils/common';
 import { isPositiveNumber } from '../utils/numbers';
 import {
@@ -86,9 +86,7 @@ export function useSwapInput({
   const userSlippage = customSlippage ?? slippage;
   const tokensValueInvalid = !fromToken || !toToken;
   const shouldSkipRequest =
-    tokensValueInvalid ||
-    areTokensEqual(fromToken, toToken) ||
-    !isPositiveNumber(inputAmount);
+    tokensValueInvalid || !isPositiveNumber(inputAmount);
 
   const resetState = (loading: boolean) => {
     setLoading(loading);
@@ -107,7 +105,12 @@ export function useSwapInput({
       affiliatePercent,
       affiliateWallets,
     } = params;
-
+    if (areTokensEqual(fromToken, toToken)) {
+      updateQuotePartialState('warning', {
+        type: QuoteWarningType.SAME_TOKENS,
+      });
+      return;
+    }
     if (!loading) {
       resetState(true);
     }
diff --git a/widget/embedded/src/types/quote.ts b/widget/embedded/src/types/quote.ts
index 7072c576c7..8e1ea43b79 100644
--- a/widget/embedded/src/types/quote.ts
+++ b/widget/embedded/src/types/quote.ts
@@ -51,6 +51,7 @@ export enum QuoteWarningType {
   UNKNOWN_PRICE,
   INSUFFICIENT_SLIPPAGE,
   HIGH_SLIPPAGE,
+  SAME_TOKENS,
 }
 
 export enum QuoteUpdateType {
@@ -100,11 +101,16 @@ export type UnknownPriceWarning = {
   type: QuoteWarningType.UNKNOWN_PRICE;
 };
 
+export type SameTokensWarning = {
+  type: QuoteWarningType.SAME_TOKENS;
+};
+
 export type QuoteWarning =
   | HighValueLossWarning
   | InsufficientSlippageWarning
   | HighSlippageWarning
-  | UnknownPriceWarning;
+  | UnknownPriceWarning
+  | SameTokensWarning;
 
 export type ConfirmSwapWarnings = {
   quote: QuoteWarning | null;