Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: ellipsify long NFT IDs (#25479)
<!-- 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.
- Loading branch information