fix: long recipient name breaking line on Account

.changeset/README.md

@@ -1,8 +1,8 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -1,33 +1,33 @@
-{
-  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "privatePackages": {
-    "version": true,
-    "tag": true
-  },
-  "changelog": [
-    "@changesets/changelog-github",
-    {
-      "repo": "FuelLabs/fuels-wallet"
-    }
-  ],
-  "commit": false,
-  "fixed": [
-    [
-      "@fuel-wallet/*",
-      "fuels-wallet",
-      "@fuels/playwright-utils"
-    ]
-  ],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "master",
-  "updateInternalDependencies": "patch",
-  "ignore": [
-    "docs",
-    "@fuel-wallet/e2e-contract-tests"
-  ],
-  "snapshot": {
-    "useCalculatedVersion": true,
-    "prereleaseTemplate": "{tag}-{commit}"
-  }
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "privatePackages": {
+    "version": true,
+    "tag": true
+  },
+  "changelog": [
+    "@changesets/changelog-github",
+    {
+      "repo": "FuelLabs/fuels-wallet"
+    }
+  ],
+  "commit": false,
+  "fixed": [
+    [
+      "@fuel-wallet/*",
+      "fuels-wallet",
+      "@fuels/playwright-utils"
+    ]
+  ],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": [
+    "docs",
+    "@fuel-wallet/e2e-contract-tests"
+  ],
+  "snapshot": {
+    "useCalculatedVersion": true,
+    "prereleaseTemplate": "{tag}-{commit}"
+  }
 }

.changeset/old-jars-battle.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fixing display of long recipient names

.changeset/plenty-grapes-itch.md

@@ -1,5 +1,5 @@
----
-"fuels-wallet": minor
----
-
-Improve handling of custom assets.
+---
+"fuels-wallet": minor
+---
+
+Improve handling of custom assets.

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,23 @@ 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]);
+
   return (
     <Card
       css={styles.root}
@@ -97,7 +125,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: '100px',
+                  }}
+                >
+                  {name}
+                </div>
+              </Tooltip>
             </Heading>
             {!isNetwork && (
               <FuelAddress