fix: display same tokens warning

rango-exchange · Nov 13, 2024 · de5524d · de5524d
1 parent 346c93e
commit de5524d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git 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, QuoteWarningType } from '../types';
+import { QuoteErrorType } from '../types';
 import { debounce } from '../utils/common';
 import { isPositiveNumber } from '../utils/numbers';
 import {
@@ -86,7 +86,9 @@ export function useSwapInput({
   const userSlippage = customSlippage ?? slippage;
   const tokensValueInvalid = !fromToken || !toToken;
   const shouldSkipRequest =
-    tokensValueInvalid || !isPositiveNumber(inputAmount);
+    tokensValueInvalid ||
+    areTokensEqual(fromToken, toToken) ||
+    !isPositiveNumber(inputAmount);
 
   const resetState = (loading: boolean) => {
     setLoading(loading);
@@ -105,12 +107,6 @@ 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/pages/Home.tsx b/widget/embedded/src/pages/Home.tsx
@@ -1,4 +1,4 @@
-import type { SelectedQuote } from '../types';
+import type { SameTokensWarning, SelectedQuote } from '../types';
 
 import { i18n } from '@lingui/core';
 import { Button, Divider, styled, WarningIcon } from '@rango-dev/ui';
@@ -19,10 +19,11 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { UiEventTypes } from '../types';
+import { QuoteWarningType, UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
 import { emitPreventableEvent } from '../utils/events';
 import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
+import { areTokensEqual } from '../utils/wallets';
 
 const MainContainer = styled('div', {
   display: 'flex',
@@ -88,9 +89,16 @@ export function Home() {
 
   const fetchingQuote = hasInputs && fetchMetaStatus === 'success' && loading;
 
+  const sameTokensWarning: SameTokensWarning | null =
+    areTokensEqual(fromToken, toToken) && fetchMetaStatus === 'success'
+      ? {
+          type: QuoteWarningType.SAME_TOKENS,
+        }
+      : null;
+
   const hasValidQuotes =
     !isExpandable || (isExpandable && quotes?.results.length);
-  const hasWarningOrError = quoteWarning || quoteError;
+  const hasWarningOrError = quoteWarning || quoteError || sameTokensWarning;
   const showMessages = hasValidQuotes && hasWarningOrError;
 
   useEffect(() => {
@@ -123,6 +131,7 @@ export function Home() {
       setSelectedQuote(quote);
     }
   };
+
   return (
     <MainContainer>
       <Layout
@@ -207,7 +216,7 @@ export function Home() {
             <>
               <Divider size="10" />
               <QuoteWarningsAndErrors
-                warning={quoteWarning}
+                warning={quoteWarning || sameTokensWarning}
                 error={quoteError}
                 couldChangeSettings={true}
                 refetchQuote={fetchQuote}