feat: New nft details page

[sahar-fehri]

Description

This PR modifies the design of the NFT details page.
Designs: https://www.figma.com/design/TfVzSMJA8KwpWX8TTWQ2iO/Asset-list-and-details?node-id=1242-143952&m=dev

Related issues

Fixes:
Related: MetaMask/core#4522
Related: MetaMask/core#4443

Manual testing steps

1. Go to this NFT tab
2. Click and browse through your NFTs
3. You should be able to see basic things like tokenId, contract address, description. Other fields will be displayed if they exist.
4. Click on the contract address and you should be redirected to etherscan.
5. Click on the image in the NFT details page and you should see the image in a new page without any of the details.
6. Try clicking on the navbar and go to "See on opensea"
7. Removing NFT flow and Sending NFT flow should not be affected

Screenshots/Recordings

Before

Screen.Recording.2024-07-18.at.16.29.09.mov

After

after.mov

Also we added a new bottom sheet when token ID is too long

Screen.Recording.2024-07-27.at.22.03.22.mov

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 650b520
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/aa0421b0-d916-4207-9f80-eede91049062

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 63719f9
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/519c1b0c-1f10-4573-9fd7-655185c35bb1

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[tommasini]

This work is awesome, left some questions!

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 7acd85c
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/c15b433f-7442-4170-81c8-59949d975bd0

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[tommasini]

LGTM! Let's re run the E2E and only merge when they are all green!

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 5075db2
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/2798aa4c-ec8f-4117-99ec-5e278145f856

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarqubecloud]

Quality Gate passed

Issues
10 New issues
0 Accepted issues

Measures
0 Security Hotspots
55.6% Coverage on New Code
2.8% Duplication on New Code

See analysis details on SonarCloud