Restructure CurrencyDisplay to use Design System

[darkwing]

Explanation

The CurrencyDisplay component has legacy CSS and is unfriendly to the new design system. This is essentially a structural rewrite using the new design system components.

Screenshots/Screencaps

There should be no visible changes.

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • How reviewers can test my changes
• Sufficient automated test coverage has been added

Pre-merge reviewer checklist

• Manual testing (e.g. pull and build branch, run in browser, test code being changed)
• PR is linked to the appropriate GitHub issue
• IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

[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.

[metamaskbot]

Builds ready [8026ab9]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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, 5
  • common: 0, 1, 2, 3, 4
  • 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 (1786 ± 101 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	110	194	142	19	9
		domContentLoaded	1482	2129	1756	189	91
		load	1482	2231	1786	211	101
		domInteractive	1482	2129	1755	189	91

Bundle size diffs

• background: 0 bytes
• ui: 986 bytes
• common: 0 bytes

[georgewrmarshall]

Looking great! I like the inversion of control pattern you are implementing here! Less a-prop-calypses and more maintainable components for the win! Made some small suggestions for updating deprecated code and storybook. Checked the component on my local build

[georgewrmarshall]

Code LGTM. Just need pesky e2e tests to pass

[metamaskbot]

Builds ready [987d548]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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, 5
  • common: 0, 1, 2, 3, 4, 5
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1500 ± 40 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	98	278	135	38	18
		domContentLoaded	1388	1689	1500	84	40
		load	1388	1689	1500	84	40
		domInteractive	1388	1689	1500	84	40

Bundle size diffs

• background: 0 bytes
• ui: 890 bytes
• common: 0 bytes

[metamaskbot]

Builds ready [48ded7b]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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, 5
  • common: 0, 1, 2, 3, 4, 5
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1636 ± 65 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	97	182	141	25	12
		domContentLoaded	1494	1981	1635	135	65
		load	1494	1981	1636	135	65
		domInteractive	1494	1981	1635	135	65

Bundle size diffs

• background: 0 bytes
• ui: 890 bytes
• common: 0 bytes

[codecov]

Codecov Report

Merging #19171 (5d055d7) into develop (5d17f86) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff            @@
##           develop   #19171   +/-   ##
========================================
  Coverage    69.42%   69.43%           
========================================
  Files          990      990           
  Lines        37418    37423    +5     
  Branches     10039    10044    +5     
========================================
+ Hits         25976    25981    +5     
  Misses       11442    11442           

Impacted Files	Coverage Δ
.../ui/currency-display/currency-display.component.js	100.00% <100.00%> (ø)

[metamaskbot]

Builds ready [dc2497a]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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, 5
  • common: 0, 1, 2, 3, 4, 5
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1615 ± 86 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	104	273	147	40	19
		domContentLoaded	1426	2084	1615	180	86
		load	1427	2084	1615	180	86
		domInteractive	1426	2084	1615	180	86

Bundle size diffs

• background: 0 bytes
• ui: 980 bytes
• common: 0 bytes

[garrettbear]

Aside from the comment about boxProps this looks good to me

[metamaskbot]

Builds ready [5d055d7]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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, 5
  • common: 0, 1, 2, 3, 4, 5
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1509 ± 37 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	101	159	124	12	6
		domContentLoaded	1403	1645	1509	78	37
		load	1403	1645	1509	78	37
		domInteractive	1403	1645	1509	78	37

Bundle size diffs

• background: 0 bytes
• ui: 945 bytes
• common: 0 bytes

[georgewrmarshall]

I think the code looks good and I know this PR has been open for a while so this is non-blocking but could we update the story slightly more so it adds more value to the viewer? The default story has 7.3b but it's not reflected in the component. The second story seems to add more value. Can we consolidate them possibly?