chore: refactor header for tokens

[brianacnguyen]

Description

This PR updates the Header for the Token details view, based on this design update by @amandaye0h . Specifically

• Left and right button icons are now using the ButtonIcon component with the large size
• Overflow icon is updated to vertical version
• Alignment of header is now top aligned

Related issues

Fixes: #11854

Manual testing steps

1. Go to Wallet
2. Click on a token

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-10-17.at.15.48.18.mp4

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 started on Bitrise...🔄🔄🔄

Commit hash: 51ff159
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/d2622345-500a-4fa4-8aa4-2f4db063b5db

Note

• This comment will auto-update when build completes
• 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

[georgewrmarshall]

Nice work 🚀 LGTM!

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 81e980e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/4ac5b890-5d15-4de9-a01f-5bc7b74b2349

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

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: c824377
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/558854b7-7a10-4cae-aabb-59ebb5e2f924

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

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 94228f0
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/4fe7a204-15d2-4d57-a276-14bbbe38ceb0

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

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[gambinish]

Pulled down, and looks good! The snapshot updates also look reasonable to me.

It looks like for certain networks, the left icon ... is non-functional. I wonder what the lift would be to not show that icon if it doesn't pop the BottomSheet when pressed?

Screen.Recording.2024-10-18.at.12.00.55.PM.mov

[vinnyhoward]

Pulled down, and looks good! The snapshot updates also look reasonable to me.

It looks like for certain networks, the left icon ... is non-functional. I wonder what the lift would be to not show that icon if it doesn't pop the BottomSheet when pressed?

Screen.Recording.2024-10-18.at.12.00.55.PM.mov

Everything looks good to me except this issue. I was able to reproduce it as well

[brianacnguyen]

Pulled down, and looks good! The snapshot updates also look reasonable to me.

It looks like for certain networks, the left icon ... is non-functional. I wonder what the lift would be to not show that icon if it doesn't pop the BottomSheet when pressed?

Screen.Recording.2024-10-18.at.12.00.55.PM.mov

does this behavior currently exist in prod?

[gambinish]

Pulled down, and looks good! The snapshot updates also look reasonable to me.
It looks like for certain networks, the left icon ... is non-functional. I wonder what the lift would be to not show that icon if it doesn't pop the BottomSheet when pressed?
Screen.Recording.2024-10-18.at.12.00.55.PM.mov

does this behavior currently exist in prod?

Technically idt no, because the previous header wouldn't display the overflow icon in the header at all, so it couldn't be pressed. I have a feeling that this might eventually come up as a regression. Any idea why the end accessory is being rendered here and not on main?