fix: Ellipsis displayed for petname even though the full name is visi…

…ble (#29282)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->


Previously, if a pet name with 12 characters would be set, the
truncation would be triggered with the 12 chars plus the three ellipsis
dots. This would result in a elongated pill component that would be too
long.

To fix this, we now truncate at 12 characters, but showing 9 characters
only plus the three dots, totalling the same maximum 12 chars.

Examples:
- Very large account name (23 characters) -> Very larg... (9 + 3
characters)
- My DeFi Account (15 characters) -> My DeFi A... (9 + 3 characters)
- DeFi Account (12 characters) -> DeFi Acco... (9 + 3 characters)
- Own Account (11 characters) -> Own Account (11 characters)


[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29282?quickstart=1)

## **Related issues**

Fixes: MetaMask/MetaMask-planning#3775

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

<img width="356" alt="Screenshot 2024-12-17 at 14 50 02"
src="https://github.com/user-attachments/assets/c266b8e4-05c3-4017-912d-7cef7713f9e6"
/>
<img width="360" alt="Screenshot 2024-12-17 at 14 49 33"
src="https://github.com/user-attachments/assets/53fa1783-8ffb-4b06-a281-98c2fc396d85"
/>


## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

test/e2e/tests/petnames/petnames-signatures.spec.js

@@ -169,7 +169,7 @@ describe('Petnames - Signatures', function () {
           await createSignatureRequest(driver, SIGNATURE_TYPE.TYPED_V4);
           await switchToNotificationWindow(driver, 3);
           await expectName(driver, 'test.lens', true);
-          await expectName(driver, 'Test Token 2', true);
+          await expectName(driver, 'Test Toke...', true);
           await showThirdPartyDetails(driver);
           await expectName(driver, 'Custom Name', true);
         },
@@ -269,7 +269,7 @@ describe('Petnames - Signatures', function () {
           await createSignatureRequest(driver, SIGNATURE_TYPE.TYPED_V4);
           await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
           await expectName(driver, 'test.lens', true);
-          await expectName(driver, 'Test Token 2', true);
+          await expectName(driver, 'Test Toke...', true);
           await expectName(driver, 'Custom Name', true);
         },
       );

ui/components/app/name/__snapshots__/name.test.tsx.snap

@@ -79,7 +79,7 @@ exports[`Name renders address with long saved name 1`] = `
       <p
         class="mm-box mm-text name__name mm-text--body-md mm-box--color-text-default"
       >
-        Very long an...
+        Very long...
       </p>
     </div>
   </div>

ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap

@@ -753,7 +753,7 @@ exports[`NameDetails renders with recognized name 1`] = `
                   <p
                     class="mm-box mm-text name__name mm-text--body-md mm-box--color-text-default"
                   >
-                    iZUMi Bond U...
+                    iZUMi Bon...
                   </p>
                 </div>
               </div>

ui/components/app/name/name.tsx

@@ -106,7 +106,7 @@ const Name = memo(
     const MAX_PET_NAME_LENGTH = 12;
     const formattedName = shortenString(name || undefined, {
       truncatedCharLimit: MAX_PET_NAME_LENGTH,
-      truncatedStartChars: MAX_PET_NAME_LENGTH,
+      truncatedStartChars: MAX_PET_NAME_LENGTH - 3,
       truncatedEndChars: 0,
       skipCharacterInEnd: true,
     });