fix long recipient name and undo formatting

FuelLabs · Jan 7, 2025 · 66f6126 · 66f6126
1 parent 4c53007
commit 66f6126
Showing 1 changed file with 45 additions and 3 deletions.
diff --git a/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx b/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx
@@ -1,8 +1,17 @@
 import { cssObj } from '@fuel-ui/css';
-import { Avatar, Box, Card, Heading, Icon, Image, Text } from '@fuel-ui/react';
+import {
+  Avatar,
+  Box,
+  Card,
+  Heading,
+  Icon,
+  Image,
+  Text,
+  Tooltip,
+} from '@fuel-ui/react';
 import type { OperationTransactionAddress } from 'fuels';
 import { Address, AddressType, ChainName, isB256, isBech32 } from 'fuels';
-import { type FC, useMemo } from 'react';
+import { type FC, useEffect, useMemo, useRef, useState } from 'react';
 import { EthAddress, FuelAddress, useAccounts } from '~/systems/Account';
 
 import { useContractMetadata } from '~/systems/Contract/hooks/useContractMetadata';
@@ -33,6 +42,8 @@ export const TxRecipientCard: TxRecipientCardComponent = ({
   const isNetwork = address === 'Network';
 
   const contract = useContractMetadata(address);
+  const nameRef = useRef<HTMLHeadingElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
 
   const name = useMemo<string>(() => {
     if (isContract) {
@@ -42,6 +53,25 @@ export const TxRecipientCard: TxRecipientCardComponent = ({
     return accounts?.find((a) => a.address === fuelAddress)?.name || 'unknown';
   }, [isContract, contract, accounts, fuelAddress]);
 
+  useEffect(() => {
+    const checkIfTruncated = () => {
+      if (nameRef.current) {
+        const isNameTruncated =
+          nameRef.current.offsetWidth < nameRef.current.scrollWidth;
+        setIsTruncated(isNameTruncated);
+      }
+    };
+
+    checkIfTruncated();
+    window.addEventListener('resize', checkIfTruncated);
+
+    return () => {
+      window.removeEventListener('resize', checkIfTruncated);
+    };
+  }, [name]);
+
+  const truncatedName = name.length > 15 ? `${name.slice(0, 15)}...` : name;
+
   return (
     <Card
       css={styles.root}
@@ -97,7 +127,19 @@ export const TxRecipientCard: TxRecipientCardComponent = ({
                 isNetwork ? 'Address' : 'Name'
               }`}
             >
-              {isNetwork ? address : name}
+              <Tooltip content={name} isOpen={isTruncated}>
+                <div
+                  ref={nameRef}
+                  style={{
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    maxWidth: '200px',
+                  }}
+                >
+                  {truncatedName}
+                </div>
+              </Tooltip>
             </Heading>
             {!isNetwork && (
               <FuelAddress