Token page -> add tooltip to supply (#3054)

* Token page -> add tooltip to supply

* fix

* fix test

ui/shared/TruncatedValue.tsx

@@ -3,30 +3,50 @@ import type { Placement } from '@floating-ui/dom';
 import React from 'react';
 
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import { TruncatedTextTooltip } from 'toolkit/components/truncation/TruncatedTextTooltip';
 
 interface Props {
   className?: string;
   isLoading?: boolean;
   value: string;
+  // tooltipContent is used to display the tooltip value different from the truncated value
+  tooltipContent?: string;
   tooltipPlacement?: Placement;
   tooltipInteractive?: boolean;
 }
 
-const TruncatedValue = ({ className, isLoading, value, tooltipPlacement, tooltipInteractive }: Props) => {
+const TruncatedValue = ({ className, isLoading, value, tooltipPlacement, tooltipInteractive, tooltipContent }: Props) => {
+  const valueElement = (
+    <Skeleton
+      className={ className }
+      loading={ isLoading }
+      display="inline-block"
+      whiteSpace="nowrap"
+      overflow="hidden"
+      textOverflow="ellipsis"
+      height="fit-content"
+    >
+      <span>{ value }</span>
+    </Skeleton>
+  );
+
+  // if tooltipContent is provided, we display the tooltip content no matter if the value is truncated or not
+  if (tooltipContent) {
+    return (
+      <Tooltip
+        content={ tooltipContent }
+        positioning={{ placement: tooltipPlacement }}
+        interactive={ tooltipInteractive }
+      >
+        { valueElement }
+      </Tooltip>
+    );
+  };
+
   return (
     <TruncatedTextTooltip label={ value } placement={ tooltipPlacement } interactive={ tooltipInteractive }>
-      <Skeleton
-        className={ className }
-        loading={ isLoading }
-        display="inline-block"
-        whiteSpace="nowrap"
-        overflow="hidden"
-        textOverflow="ellipsis"
-        height="fit-content"
-      >
-        <span>{ value }</span>
-      </Skeleton>
+      { valueElement }
     </TruncatedTextTooltip>
   );
 };

ui/token/TokenDetails.tsx

@@ -88,10 +88,13 @@ const TokenDetails = ({ tokenQuery }: Props) => {
   } = tokenQuery.data || {};
 
   let totalSupplyValue;
+  let totalSupplyValueFull;
 
   if (decimals) {
     const totalValue = totalSupply ? getCurrencyValue({ value: totalSupply, accuracy: 3, accuracyUsd: 2, exchangeRate, decimals }) : undefined;
+    const totalValueFull = totalSupply ? getCurrencyValue({ value: totalSupply, accuracyUsd: 2, exchangeRate, decimals }) : undefined;
     totalSupplyValue = totalValue?.valueStr;
+    totalSupplyValueFull = totalValueFull?.valueStr;
   } else {
     totalSupplyValue = Number(totalSupply).toLocaleString();
   }
@@ -142,7 +145,12 @@ const TokenDetails = ({ tokenQuery }: Props) => {
         whiteSpace="pre-wrap"
       >
         <Skeleton loading={ tokenQuery.isPlaceholderData } w="100%" display="flex">
-          <TruncatedValue value={ totalSupplyValue || '0' } maxW="80%" flexShrink={ 0 }/>
+          <TruncatedValue
+            value={ totalSupplyValue || '0' }
+            maxW="80%"
+            flexShrink={ 0 }
+            tooltipContent={ totalSupplyValueFull !== totalSupplyValue ? totalSupplyValueFull : undefined }
+          />
           <Box flexShrink={ 0 }> </Box>
           <TruncatedValue value={ symbol || '' }/>
         </Skeleton>

ui/tx/details/TxInfo.pw.tsx

@@ -182,5 +182,6 @@ test('with interop message out +@mobile', async({ page, render, mockEnvs, mockAs
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(pwConfig.adsBannerSelector) ],
     maskColor: pwConfig.maskColor,
+    maxDiffPixels: 20,
   });
 });