From 3ddc5fd006d6dec4d5709b4c6e1ce6791a8c3d59 Mon Sep 17 00:00:00 2001
From: Bilal <44588480+BZahory@users.noreply.github.com>
Date: Fri, 21 Jun 2024 18:48:21 -0400
Subject: [PATCH] fix: ellipsify long NFT IDs (#25479)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
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**

Long token IDs will overflow the padding and breaking the styling. This
PR truncates long token IDs from the middle.

<!--
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?
-->

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

## **Related issues**

Fixes: #25370

## **Manual testing steps**

1. Go to the send flow
2. Select an NFT (721 or 1155) with a token ID long enough to overflow
the component
3. Ensure that it is truncated with and ellipsis in the middle

## **Screenshots/Recordings**

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

### **Before**

<img width="405" alt="Screenshot 2024-06-21 at 6 00 32 PM"
src="https://github.com/MetaMask/metamask-extension/assets/44588480/4c491710-f636-4980-8f9a-a22001e1380f">

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

### **After**

<img width="405" alt="Screenshot 2024-06-21 at 6 01 51 PM"
src="https://github.com/MetaMask/metamask-extension/assets/44588480/911e494a-e940-49a6-9855-412babfc0557">

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

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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.
---
 .../asset-picker/asset-picker.test.tsx        | 40 +++++++++++++++++++
 .../asset-picker/asset-picker.tsx             |  8 +++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx
index 08864f10edf8..208395b2228b 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx
@@ -157,6 +157,46 @@ describe('AssetPicker', () => {
     expect(getByText('?')).toBeInTheDocument();
   });
 
+  it('nft: does not truncates if token ID is under length 13', () => {
+    const asset = {
+      type: AssetType.NFT,
+      details: {
+        address: 'token address',
+        decimals: 2,
+        tokenId: 1234567890,
+      },
+      balance: '100',
+    };
+    const mockAssetChange = jest.fn();
+
+    const { getByText } = render(
+      <Provider store={store()}>
+        <AssetPicker asset={asset} onAssetChange={() => mockAssetChange()} />
+      </Provider>,
+    );
+    expect(getByText('#1234567890')).toBeInTheDocument();
+  });
+
+  it('nft: truncates if token ID is too long', () => {
+    const asset = {
+      type: AssetType.NFT,
+      details: {
+        address: 'token address',
+        decimals: 2,
+        tokenId: 1234567890123456,
+      },
+      balance: '100',
+    };
+    const mockAssetChange = jest.fn();
+
+    const { getByText } = render(
+      <Provider store={store()}>
+        <AssetPicker asset={asset} onAssetChange={() => mockAssetChange()} />
+      </Provider>,
+    );
+    expect(getByText('#123456...3456')).toBeInTheDocument();
+  });
+
   it('render if disabled', () => {
     const asset = {
       type: AssetType.token,
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
index 5867fc86b870..a3b1f965cb34 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
@@ -36,6 +36,9 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../../shared/constants/metametrics';
+import { ellipsify } from '../../../../pages/confirmations/send/send.utils';
+
+const ELLIPSIFY_LENGTH = 13; // 6 (start) + 4 (end) + 3 (...)
 
 export type AssetPickerProps = {
   asset: Asset;
@@ -168,7 +171,10 @@ export function AssetPicker({
                 variant={TextVariant.bodySm}
                 color={TextColor.textAlternative}
               >
-                #{asset.details.tokenId}
+                #
+                {String(asset.details.tokenId).length < ELLIPSIFY_LENGTH
+                  ? asset.details.tokenId
+                  : ellipsify(String(asset.details.tokenId), 6, 4)}
               </Text>
             )}
           </Tooltip>