Merge next to main

package.json

@@ -11,6 +11,9 @@
     "prepare": "husky install",
     "build:icons": "svgr svgs/resources/ --config-file svgs/configs/.svgrrc.default.cjs && prettier -w ./components/icons"
   },
+  "engines": {
+    "node": "20.x"
+  },
   "dependencies": {
     "@artsy/fresnel": "^7.1.3",
     "@lingui/react": "^4.11.4",

src/components/common/Footer/Footer.constants.ts

@@ -53,6 +53,12 @@ export const documentation: ListItemProps[] = [
     title: 'Widget Playground',
     openInNewTab: true,
   },
+  {
+    location: '',
+    title: 'Cookie Setting',
+    className: 'cky-banner-element',
+    openInNewTab: false,
+  },
 ];
 
 export const socialMedia: ListItemProps[] = [

src/components/common/Footer/Footer.type.ts

@@ -5,4 +5,5 @@ export interface ListItemProps {
   openInNewTab: boolean;
   title: string;
   icon?: React.ComponentType<SvgIconProps>;
+  className?: string;
 }

src/components/common/Footer/ListItem.tsx

@@ -2,14 +2,14 @@ import Link from 'next/link';
 import { ListItemProps } from './Footer.type';
 
 function ListItem(props: ListItemProps) {
-  const { title, openInNewTab, location, icon: Icon } = props;
+  const { title, openInNewTab, location, className, icon: Icon } = props;
   return (
     <li className="item-center flex pb-2.5 text-12 md:text-16 md:font-medium	leading-[0.8rem] text-neutral-200 md:text-16 md:leading-5	">
       {Icon && <Icon className="text-neutral-200" />}
       <Link
         target={openInNewTab ? '_blank' : '_self'}
         rel={openInNewTab ? 'noreferrer' : 'none'}
-        className={Icon ? 'ml-1' : ''}
+        className={`${className || ''} ${Icon ? 'ml-1' : ''}`}
         href={location}>
         {title}
       </Link>

src/components/common/Table/cells/TokenCell.tsx

@@ -1,10 +1,22 @@
 /* eslint-disable @next/next/no-img-element */
+'use client';
+
 import { DEFAULT_TOKEN_LOGO } from 'src/constant';
 import { CellProps } from '../Table.type';
+import { InfoIcon } from 'src/components/icons';
+import Tooltip from '../../Tooltip';
+import { useRef } from 'react';
+import useIsTruncated from 'src/hooks/useIsTruncated';
 
 function TokenCell(props: CellProps) {
   const { swapItem, column } = props;
   const { stepsSummary } = swapItem;
+  const amountRef = useRef<HTMLSpanElement>(null);
+  const tokenNameRef = useRef<HTMLSpanElement>(null);
+
+  const showAmountTooltip = useIsTruncated(amountRef);
+  const showTokenNameTooltip = useIsTruncated(tokenNameRef);
+
   const firstStep = stepsSummary.length ? stepsSummary[0] : null;
   const lastStep = stepsSummary.length
     ? stepsSummary[stepsSummary.length - 1]
@@ -19,14 +31,21 @@ function TokenCell(props: CellProps) {
   const { shortName: blockchainShortName, logo: blockchainLogo } =
     blockchainData || {};
 
+  const amount = token?.realAmount || token?.expectedAmount;
+
+  const roundedAmount = parseFloat(
+    Number(token?.realAmount || token?.expectedAmount).toFixed(3),
+  );
+  const tokenName = symbol || name;
+
   return (
     <>
       {column.tokenType === 'source' ? (
         <div className="md:hidden mt-10"></div>
       ) : (
         <div className="md:hidden ml-[0.875rem] h-[10px] border-l border-neutral-400"></div>
       )}
-      <div className="overflow-hidden flex md:col-span-2 items-start md:items-center md:p-15 lg:p-20">
+      <div className="flex md:col-span-2 items-start md:max-w-48 md:items-center md:py-15 lg:py-20">
         <div className="relative mr-10 shrink-0">
           <img
             src={logo || DEFAULT_TOKEN_LOGO}
@@ -39,22 +58,36 @@ function TokenCell(props: CellProps) {
             className="absolute rounded-full w-[12px] md:w-[15px] h-[12px] md:h-[15px] right-[-2px] bottom-[-2px] md:right-[-3px] md:bottom-[-3px]"
           />
         </div>
-        <div className="flex flex-col items-start justify-center">
-          <div className="text-14 leading-14 md:leading-16 md:text-16 flex items-center">
-            <span
-              className={`mr-5 ${
-                token?.realAmount ? 'text-primary-500' : 'text-neutral-400'
-              }`}>
-              {`${!token?.realAmount ? '~' : ''}${parseFloat(
-                Number(token?.realAmount || token?.expectedAmount).toFixed(3),
-              )}`}
-            </span>
-            <span
-              className={`${
-                token?.realAmount ? 'text-primary-500' : 'text-neutral-400'
-              }`}>
-              {symbol || name}
-            </span>
+        <div className="flex flex-col items-start justify-center w-full min-w-0">
+          <div className="text-14 leading-14 md:leading-16 md:text-16 flex items-center gap-1 w-full min-w-0">
+            <div className="flex items-center gap-0.5 min-w-0">
+              <span
+                ref={amountRef}
+                className={`truncate ${
+                  token?.realAmount ? 'text-primary-500' : 'text-neutral-400'
+                }`}>
+                {`${!token?.realAmount ? '~' : ''}${roundedAmount}`}
+              </span>
+              {amount && showAmountTooltip && (
+                <Tooltip label={amount.toString()}>
+                  <InfoIcon color="gray" size="12" />
+                </Tooltip>
+              )}
+            </div>
+            <div className="flex items-center gap-0.5 min-w-0">
+              <span
+                ref={tokenNameRef}
+                className={`lg:max-w-14 truncate ${
+                  token?.realAmount ? 'text-primary-500' : 'text-neutral-400'
+                }`}>
+                {tokenName}
+              </span>
+              {tokenName && showTokenNameTooltip && (
+                <Tooltip label={tokenName}>
+                  <InfoIcon color="gray" size="12" />
+                </Tooltip>
+              )}
+            </div>
           </div>
           <div className="text-12 leading-12 md:leading-14 md:mt-5 md:text-14 text-neutral-400">
             {blockchainShortName}

src/hooks/useIsTruncated.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState, RefObject } from 'react';
+
+function useIsTruncated(ref: RefObject<HTMLElement>): boolean {
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      setIsTruncated(element.scrollWidth > element.clientWidth);
+    });
+
+    resizeObserver.observe(element);
+
+    return () => resizeObserver.disconnect();
+  }, [ref]);
+
+  return isTruncated;
+}
+
+export default useIsTruncated;