Merge branch 'main' into fix-e2e-screenshot-commit

src/components/simulator/input/BuySellBlockNew/Header.tsx

@@ -78,7 +78,7 @@ export const BuySellHeader: FC<Props> = (props) => {
           sendEventOnMount={{ buy }}
           iconClassName="text-white/60"
           element={
-            <>
+            <p>
               This section will define the order details in which you are
               willing to {buy ? 'buy' : 'sell'} {base.symbol} at.
               <br />
@@ -87,7 +87,7 @@ export const BuySellHeader: FC<Props> = (props) => {
               <br />
               <b>Range</b> will allow you to define a range of prices to{' '}
               {buy ? 'buy' : 'sell'} the token at.
-            </>
+            </p>
           }
         />
       </div>

src/components/strategies/common/InputLimit.tsx

@@ -89,7 +89,7 @@ export const InputLimit: FC<InputLimitProps> = (props) => {
 
   const setMarket = (e: MouseEvent<HTMLElement>) => {
     e.stopPropagation();
-    onChange(marketPrice?.toString() ?? '');
+    onChange(formatNumber(marketPrice?.toString() ?? ''));
   };
 
   return (

src/components/strategies/common/InputRange.tsx

@@ -112,7 +112,7 @@ export const InputRange: FC<InputRangeProps> = ({
 
   const setMinMarket = (e: MouseEvent<HTMLElement>) => {
     e.stopPropagation();
-    onMinChange(marketPrice?.toString() ?? '');
+    onMinChange(formatNumber(marketPrice?.toString() ?? ''));
   };
 
   const onMaxFocus = (e: FocusEvent<HTMLInputElement>) => {
@@ -134,7 +134,7 @@ export const InputRange: FC<InputRangeProps> = ({
 
   const setMaxMarket = (e: MouseEvent<HTMLElement>) => {
     e.stopPropagation();
-    onMaxChange(marketPrice?.toString() ?? '');
+    onMaxChange(formatNumber(marketPrice?.toString() ?? ''));
   };
 
   return (

src/components/strategies/common/OrderHeader.tsx

@@ -63,7 +63,7 @@ export const OrderHeader: FC<Props> = (props) => {
         sendEventOnMount={{ buy }}
         iconClassName="text-white/60"
         element={
-          <>
+          <p>
             This section will define the order details in which you are willing
             to {buy ? 'buy' : 'sell'} {base.symbol} at.
             <br />
@@ -72,7 +72,7 @@ export const OrderHeader: FC<Props> = (props) => {
             <br />
             <b>Range</b> will allow you to define a range of prices to{' '}
             {buy ? 'buy' : 'sell'} the token at.
-          </>
+          </p>
         }
       />
     </header>

src/libs/modals/modals/ModalTokenList/ModalTokenList.tsx

@@ -35,6 +35,7 @@ export const ModalTokenList: ModalFC<ModalTokenListData> = ({ id, data }) => {
     removeFavoriteToken,
     favoriteTokens,
     popularTokens,
+    duplicateSymbols,
   } = useModalTokenList({ id, data });
 
   const handleKeyDown = (e: KeyboardEvent) => {
@@ -71,6 +72,7 @@ export const ModalTokenList: ModalFC<ModalTokenListData> = ({ id, data }) => {
             favorites: favoriteTokens,
             popular: popularTokens,
           }}
+          duplicateSymbols={duplicateSymbols}
           onSelect={onSelect}
           search={search}
           onAddFavorite={addFavoriteToken}

src/libs/modals/modals/ModalTokenList/ModalTokenListContent.tsx

@@ -14,12 +14,14 @@ import { lsService } from 'services/localeStorage';
 import { ReactComponent as IconStar } from 'assets/icons/star.svg';
 import { WarningWithTooltip } from 'components/common/WarningWithTooltip/WarningWithTooltip';
 import { CategoryWithCounter } from 'libs/modals/modals/common/CategoryWithCounter';
+import { ModalTokenListDuplicateWarning } from 'libs/modals/modals/ModalTokenList/ModalTokenListDuplicateWarning';
 
 const categories = ['popular', 'favorites', 'all'] as const;
 export type ChooseTokenCategory = (typeof categories)[number];
 
 type Props = {
   tokens: { [k in ChooseTokenCategory]: Token[] };
+  duplicateSymbols: string[];
   onSelect: (token: Token) => void;
   search: string;
   onAddFavorite: (token: Token) => void;
@@ -28,6 +30,7 @@ type Props = {
 
 export const ModalTokenListContent: FC<Props> = ({
   tokens,
+  duplicateSymbols,
   onSelect,
   search,
   onAddFavorite,
@@ -47,7 +50,7 @@ export const ModalTokenListContent: FC<Props> = ({
   const rowVirtualizer = useVirtualizer({
     count: _tokens.length,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => 55,
+    estimateSize: () => 60,
     overscan: 10,
   });
 
@@ -68,7 +71,7 @@ export const ModalTokenListContent: FC<Props> = ({
   const suspiciousTokenTooltipMsg =
     'This token is not part of any known token list. Always conduct your own research before trading.';
 
-  const selectCatergory = (e: FormEvent<HTMLFieldSetElement>) => {
+  const selectCategory = (e: FormEvent<HTMLFieldSetElement>) => {
     if (e.target instanceof HTMLInputElement) {
       setSelectedList(e.target.value as ChooseTokenCategory);
     }
@@ -79,7 +82,7 @@ export const ModalTokenListContent: FC<Props> = ({
       <fieldset
         aria-label="Filter tokens"
         className="grid grid-cols-3 px-4"
-        onChange={selectCatergory}
+        onChange={selectCategory}
       >
         {categories.map((category) => (
           <CategoryWithCounter
@@ -130,6 +133,9 @@ export const ModalTokenListContent: FC<Props> = ({
                     <div className="text-12 max-w-full truncate text-white/60">
                       {token.name ?? token.symbol}
                     </div>
+                    {duplicateSymbols.includes(token.symbol) && (
+                      <ModalTokenListDuplicateWarning token={token} />
+                    )}
                   </div>
                 </button>
                 <button

src/libs/modals/modals/ModalTokenList/ModalTokenListDuplicateWarning.tsx

@@ -0,0 +1,48 @@
+import { Tooltip } from 'components/common/tooltip/Tooltip';
+import { NewTabLink } from 'libs/routing';
+import { Token } from 'libs/tokens';
+import { getExplorerLink } from 'utils/blockExplorer';
+import { shortenString } from 'utils/helpers';
+import { NATIVE_TOKEN_ADDRESS } from 'utils/tokens';
+import { ReactComponent as IconLink } from 'assets/icons/link.svg';
+import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
+import { FC } from 'react';
+
+type Props = {
+  token: Token;
+};
+
+export const ModalTokenListDuplicateWarning: FC<Props> = ({ token }) => {
+  const isNativeToken = token.address === NATIVE_TOKEN_ADDRESS;
+
+  const duplicatedTokenTooltipElement = (token: Token) => {
+    if (isNativeToken) return 'This is the native token of the chain.';
+
+    return (
+      <>
+        <p>
+          It appears there might be multiple tokens with the same symbol. Please
+          ensure you select the correct address.
+          <br /> {token.symbol}:<br />
+        </p>
+        <div className="flex items-center">
+          {token.address}
+          <NewTabLink to={getExplorerLink('token', token.address)}>
+            <IconLink className="ml-6 w-14 text-white/80" />
+          </NewTabLink>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className="text-12 flex max-w-full truncate py-2 text-white/60">
+      {isNativeToken ? 'Native Gas Token' : shortenString(token.address)}
+      <Tooltip maxWidth={450} element={duplicatedTokenTooltipElement(token)}>
+        <span>
+          <IconWarning className="ml-5 size-14 text-white/60" />
+        </span>
+      </Tooltip>
+    </div>
+  );
+};

src/libs/modals/modals/ModalTokenList/useModalTokenList.ts

@@ -75,6 +75,16 @@ export const useModalTokenList = ({ id, data }: Props) => {
     [tokens, excludedTokens, includedTokens]
   );
 
+  const duplicateSymbols = useMemo(() => {
+    const seenSymbol: Record<string, boolean> = {};
+    const duplicates = new Set<string>();
+    for (const token of tokens) {
+      if (seenSymbol[token.symbol]) duplicates.add(token.symbol);
+      seenSymbol[token.symbol] = true;
+    }
+    return Array.from(duplicates);
+  }, [tokens]);
+
   const _favoriteTokens = useMemo(
     () =>
       favoriteTokens.filter(
@@ -157,6 +167,7 @@ export const useModalTokenList = ({ id, data }: Props) => {
     showImportToken,
     showNoResults,
     filteredTokens,
+    duplicateSymbols,
     onSelect,
     isPending,
     isError,

src/utils/helpers/number.test.ts

@@ -417,5 +417,8 @@ describe('Test helpers', () => {
       expect(roundSearchParam('0.000000012345600001')).toBe('0.0000000123456');
       expect(roundSearchParam('0.100000012345678901234567890')).toBe('0.1');
     });
+    test('Should remove scientific number price', () => {
+      expect(roundSearchParam('1.1e-6')).toBe('0.0000011');
+    });
   });
 });

src/utils/helpers/number.ts

@@ -214,11 +214,12 @@ const lastZero = new RegExp(/0+$/);
 
 /** Round to 6 decimals after leading zeros */
 export const roundSearchParam = (param?: string | number) => {
-  if (!param || Number(param) === 0 || isNaN(Number(param))) return '';
-  const [radix, decimals] = param.toString().split('.');
+  const value = Number(param);
+  if (!param || value === 0 || isNaN(value)) return '';
+  const [radix, decimals] = value.toFixed(100).split('.');
   if (!decimals) return param.toString();
   let maxDecimals = 6;
-  if (Number(param) < 1) {
+  if (value < 1) {
     maxDecimals += decimals.match(firstZero)?.[0].length ?? 0;
   }
   const roundedDecimals = decimals.slice(0, maxDecimals).replace(lastZero, '');