UX Multichain: Updated app header account picker and address button

[NidhiKJha]

This PR is to update the following changes in App-Header:

1. In the Account Picker,

• Updated the AvatarSize
• Removed address since address now has a copy button

2. Updated Adress text and copy button
3. I have also removed the copy button which was earlier introduced to remove connections icon for Multichain.

Related issues

Fixes: 1816

Manual testing steps

1. Run extension with MULTICHAIN=1 yarn start
2. Check for copy button under the account picker

Screenshots/Recordings

Before

After

Full Screen

Extension View

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• 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.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

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.

[darkwing]

A few requests/suggestions:

1. Can we make the entire address a button so that I can click the shorten address and get the copy functionality as well?
2. I think I added a showAddress prop to the AccountPicker; is that still needed with these changes? (I guess maybe send flow?)
3. Is there a way we can better center the address? The 0x pops out on the left, but the buttons line up on the right. Just a thought.

[metamaskbot]

Builds ready [0c20608]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4
  • common: 0, 1, 2, 3, 4, 5, 6, 7
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (757 ± 19 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	86	148	106	14	7
		domContentLoaded	9	25	14	4	2
		load	685	848	757	39	19
		domInteractive	9	25	14	4	2

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: -248 Bytes (-0.00%)
• common: 0 Bytes (0.00%)

[NidhiKJha]

1. Can we make the entire address a button so that I can click the shorten address and get the copy functionality as well?

Updated here cbaef93

[darkwing]

As part of these changes, we need to remove the blue address button:

Also, should we add a hover background to the address that looks like the Account Picker's?

[NidhiKJha]

As part of these changes, we need to remove the blue address button:

Updated here a7497f8

Also, should we add a hover background to the address that looks like the Account Picker's?

Updated here a8a53b1

[metamaskbot]

Builds ready [e0bce92]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4
  • common: 0, 1, 2, 3, 4, 5, 6, 7
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (815 ± 25 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	102	215	123	25	12
		domContentLoaded	10	54	19	9	4
		load	746	936	815	52	25
		domInteractive	10	54	19	9	4

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: -108 Bytes (-0.00%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [f480ce1]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4
  • common: 0, 1, 2, 3, 4, 5, 6, 7
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (825 ± 33 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	94	210	120	24	12
		domContentLoaded	10	46	17	7	4
		load	717	1034	825	69	33
		domInteractive	10	46	17	7	4

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: -108 Bytes (-0.00%)
• common: 0 Bytes (0.00%)