feat: display same source and destination token warning on widget

widget/embedded/src/components/NoResult/NoResult.helpers.ts

@@ -1,13 +1,10 @@
 import type { Info } from './NoResult.types';
+import type { NoResultError, QuoteRequestFailed } from '../../types';
 
 import { i18n } from '@lingui/core';
 
 import { errorMessages } from '../../constants/errors';
-import {
-  type NoResultError,
-  QuoteErrorType,
-  type QuoteRequestFailed,
-} from '../../types';
+import { QuoteErrorType } from '../../types';
 
 const SMALL_NO_ROUTE__ICON_SIZE = 24;
 const LARGE_NO_ROUTE_ICON_SIZE = 60;

widget/embedded/src/components/SameTokensWarning/SameTokensWarning.styles.ts

@@ -0,0 +1,7 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});

widget/embedded/src/components/SameTokensWarning/SameTokensWarning.tsx

@@ -0,0 +1,30 @@
+import { i18n } from '@lingui/core';
+import { Alert, Divider, NoRouteIcon, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { useQuoteStore } from '../../store/quote';
+import { areTokensEqual } from '../../utils/wallets';
+
+import { Container } from './SameTokensWarning.styles';
+
+export function SameTokensWarning() {
+  const { fromToken, toToken } = useQuoteStore();
+  const showWarningMessage =
+    fromToken && toToken && areTokensEqual(fromToken, toToken);
+
+  return showWarningMessage ? (
+    <Container>
+      <NoRouteIcon size={24} color="gray" />
+      <Divider size={4} />
+      <Typography variant="title" size={'small'}>
+        {i18n.t('No Routes Found')}
+      </Typography>
+      <Divider size={4} />
+      <Alert
+        title={i18n.t('You cannot use the same token for From and To.')}
+        type={'warning'}
+        variant="alarm"
+      />
+    </Container>
+  ) : null;
+}

widget/embedded/src/components/SameTokensWarning/index.ts

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

widget/embedded/src/pages/Home.tsx

@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router-dom';
 import { HeaderButtons } from '../components/HeaderButtons';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
+import { SameTokensWarning } from '../components/SameTokensWarning';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { ExpandedQuotes } from '../containers/ExpandedQuotes';
 import { Inputs } from '../containers/Inputs';
@@ -123,6 +124,7 @@ export function Home() {
       setSelectedQuote(quote);
     }
   };
+
   return (
     <MainContainer>
       <Layout
@@ -226,6 +228,7 @@ export function Home() {
               />
             </>
           ) : null}
+          <SameTokensWarning />
         </PageContainer>
       </Layout>
       {isExpandable ? (