Update Text import paths: /multichain by georgewrmarshall · Pull Request #20061 · MetaMask/metamask-extension

georgewrmarshall · 2023-07-17T21:42:06Z

Explanation

Currently, there are deprecated instances of the Text component that use the JavaScript version of the Box component. This PR updates those deprecated import paths to the new component in the ui/components/multichain folder as well as snapshots

Part of Update deprecated Text import paths #19986

Dependency: Updating Text component to use TS Box #19949

Screenshots/Screencaps

I have added Before/After screencasts to ensure no visual regressions have occurred to components with some significant updates other than snapshot updates in the code comments

Manual Testing Steps

Go to the latest build of storybook in this PR
Check all components don't have visual regressions against the hosted storybook GitHub page

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 · 2023-07-17T21:42:20Z

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.

georgewrmarshall · 2023-07-17T21:49:32Z

+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
          data-testid="multichain-token-list-item-value"
        >
          5.000


No visual regressions

Before

After

metamaskbot · 2023-07-17T22:10:06Z

Builds ready [e8028e5]

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 (1592 ± 36 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	114	177	143	19	9
		domContentLoaded	1450	1767	1591	74	35
		load	1451	1767	1592	74	36
		domInteractive	1450	1767	1591	74	35

Bundle size diffs

background: 0 bytes
ui: -2052 bytes
common: 0 bytes

codecov · 2023-07-17T22:10:48Z

Codecov Report

Merging #20061 (70f5a8e) into develop (5d17f86) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop   #20061   +/-   ##
========================================
  Coverage    69.42%   69.42%           
========================================
  Files          990      990           
  Lines        37418    37418           
  Branches     10039    10039           
========================================
  Hits         25976    25976           
  Misses       11442    11442

Impacted Files	Coverage Δ
...in/account-details/account-details-authenticate.js	`93.75% <ø> (ø)`
.../multichain/account-details/account-details-key.js	`85.71% <ø> (ø)`
...ents/multichain/account-details/account-details.js	`78.57% <ø> (ø)`
...n/account-list-item-menu/account-list-item-menu.js	`65.33% <ø> (ø)`
.../multichain/account-list-item/account-list-item.js	`81.97% <ø> (ø)`
.../multichain/account-list-menu/account-list-menu.js	`77.50% <ø> (ø)`
...onents/multichain/account-picker/account-picker.js	`100.00% <ø> (ø)`
...i/components/multichain/global-menu/global-menu.js	`68.97% <ø> (ø)`
...onents/multichain/import-account/import-account.js	`21.74% <ø> (ø)`
ui/components/multichain/import-account/json.js	`75.00% <ø> (ø)`
... and 3 more

georgewrmarshall · 2023-07-17T23:31:42Z

+
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { exportAccount, hideWarning } from '../../../store/actions';



Updating to use BannerAlert description prop. This will keep the font size at 14px on popup view but 16px on expanded

Before

before.mov

After

after.mov

georgewrmarshall · 2023-07-17T23:43:57Z

+          class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
        >
          <div
            class="currency-display-component"


No visual regressions

Before

account.list.item.before.mov

After

account.list.item.after.mov

georgewrmarshall · 2023-07-17T23:46:31Z

+        class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--ellipsis mm-box--color-text-default"
      >
        Account 1
      </span>


No visual regressions

Before

accountpicker.before.mov

After

accountpicker.after.mov

georgewrmarshall · 2023-07-17T23:48:55Z

+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--ellipsis mm-box--color-text-default"
          >
            Test Account
          </span>


no visual regressions

georgewrmarshall · 2023-07-17T23:51:23Z

+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
          data-testid="multichain-token-list-item-value"
        >



No visual regressions

Before

tokenlistitem.before.mov

After

tokenlistitem.after.mov

metamaskbot · 2023-07-18T00:34:20Z

Builds ready [70f5a8e]

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 (1902 ± 68 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	130	336	171	43	21
		domContentLoaded	1659	2232	1901	140	67
		load	1659	2232	1902	141	68
		domInteractive	1659	2232	1901	140	67

Bundle size diffs

background: 0 bytes
ui: -2103 bytes
common: 0 bytes

georgewrmarshall added 2 commits July 17, 2023 14:27

Updating import paths for Text component

a063959

Updating snapshots

e8028e5

georgewrmarshall mentioned this pull request Jul 14, 2023

Update deprecated Text import paths #19986

Closed

Adding story for TokenCell

57ec4e0

georgewrmarshall commented Jul 17, 2023

View reviewed changes

Updating banner in account details

b7a5af5

georgewrmarshall commented Jul 17, 2023

View reviewed changes

georgewrmarshall self-assigned this Jul 17, 2023

georgewrmarshall added team-design-system All issues relating to design system in Extension needs-ux-ds-review labels Jul 17, 2023

georgewrmarshall requested review from darkwing and garrettbear July 17, 2023 23:52

georgewrmarshall marked this pull request as ready for review July 17, 2023 23:56

georgewrmarshall requested a review from a team as a code owner July 17, 2023 23:56

Fixing lint issue by removing unused import

70f5a8e

darkwing approved these changes Jul 18, 2023

View reviewed changes

garrettbear approved these changes Jul 18, 2023

View reviewed changes

georgewrmarshall merged commit 36be38e into develop Jul 18, 2023

georgewrmarshall deleted the part/19986/update-text-import-paths-multi-chain branch July 18, 2023 05:02

github-actions Bot locked and limited conversation to collaborators Jul 18, 2023

metamaskbot added the release-10.35.0 Issue or pull request that will be included in release 10.35.0 label Jul 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Text import paths: /multichain#20061

Update Text import paths: /multichain#20061
georgewrmarshall merged 5 commits intodevelopfrom
part/19986/update-text-import-paths-multi-chain

georgewrmarshall commented Jul 17, 2023

Uh oh!

github-actions Bot commented Jul 17, 2023

Uh oh!

georgewrmarshall Jul 17, 2023

Uh oh!

metamaskbot commented Jul 17, 2023

Uh oh!

codecov Bot commented Jul 17, 2023 •

edited

Loading

Uh oh!

georgewrmarshall Jul 17, 2023

Uh oh!

georgewrmarshall Jul 17, 2023

Uh oh!

georgewrmarshall Jul 17, 2023

Uh oh!

georgewrmarshall Jul 17, 2023

Uh oh!

georgewrmarshall Jul 17, 2023

Uh oh!

metamaskbot commented Jul 18, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants


		import { useI18nContext } from '../../../hooks/useI18nContext';
		import { exportAccount, hideWarning } from '../../../store/actions';

Conversation

georgewrmarshall commented Jul 17, 2023

Explanation

Screenshots/Screencaps

Manual Testing Steps

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Jul 17, 2023

Uh oh!

georgewrmarshall Jul 17, 2023

Choose a reason for hiding this comment

Before

After

Uh oh!

metamaskbot commented Jul 17, 2023

Uh oh!

codecov Bot commented Jul 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

georgewrmarshall Jul 17, 2023

Choose a reason for hiding this comment

Before

After

Uh oh!

georgewrmarshall Jul 17, 2023

Choose a reason for hiding this comment

Before

After

Uh oh!

georgewrmarshall Jul 17, 2023

Choose a reason for hiding this comment

Before

After

Uh oh!

georgewrmarshall Jul 17, 2023

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 17, 2023

Choose a reason for hiding this comment

Before

After

Uh oh!

metamaskbot commented Jul 18, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov Bot commented Jul 17, 2023 •

edited

Loading