Header component for transaction confirmation screens by filipsekulic · Pull Request #15614 · MetaMask/metamask-extension

filipsekulic · 2022-08-17T07:27:22Z

Explanation

Created a header component for transaction confirmation screens (network + account + balance). The component will be implemented and used in the future. However, it can be seen now within the storybook. This component has following properties:

networkName (type: string)
accountName (type: string)
accountBalance (type: number)
tokenName (type: string)
accountAddress (type: string)

More Information

Fixes Create a new network + account + balance header component for transaction confirmation screens #15222

Screenshots/Screencaps

Manual Testing Steps

The component can be seen and tested from the storybook (yarn storybook). Then go to the COMPONENTS tab and open it from the APP tab - NetworkAccountBalanceHeader.

github-actions · 2022-08-17T07:27:35Z

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 · 2022-08-17T16:37:44Z

Builds ready [490485b]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7
- 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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1749 ± 31 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	91	121	106	9	4
		domContentLoaded	1637	1867	1738	64	31
		load	1637	1867	1749	64	31
		domInteractive	1637	1867	1738	64	31

highlights:

storybook

mirjanaKukic · 2022-08-18T08:30:42Z

Verified by QA

metamaskbot · 2022-08-18T10:39:53Z

Builds ready [3f9e72a]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7
- 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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1854 ± 70 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	90	2144	213	443	213
		domContentLoaded	1654	2190	1841	147	71
		load	1654	2190	1854	146	70
		domInteractive	1654	2190	1841	147	71

highlights:

storybook

NidhiKJha

LGTM! Just a minor change suggestion

NidhiKJha · 2022-08-18T18:16:56Z

+import NetworkAccountBalanceHeader from './network-account-balance-header';
+
+export default {
+  title: 'Components/APP/NetworkAccountBalanceHeader',


Suggested change

title: 'Components/APP/NetworkAccountBalanceHeader',

title: 'Components/App/NetworkAccountBalanceHeader',

Fixed here: 0ee04f3

metamaskbot · 2022-08-19T09:20:02Z

Builds ready [0ee04f3]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7
- 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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1864 ± 52 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	87	163	115	21	10
		domContentLoaded	1658	2047	1828	110	53
		load	1668	2047	1864	108	52
		domInteractive	1658	2047	1828	110	53

highlights:

storybook

…tion-screens

Requested changes were applied

metamaskbot · 2022-08-23T15:05:10Z

Builds ready [7c769d1]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7
- 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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1760 ± 46 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	91	179	115	18	8
		domContentLoaded	1615	1912	1745	95	46
		load	1615	1912	1760	96	46
		domInteractive	1615	1912	1745	95	46

highlights:

storybook

SaraCheikh · 2022-09-09T12:30:14Z

Hello, some details to adapt this to our existing components and tokens:

The badge seems to have a grey border that the component Avatar with Badge in the Figma file doesn't have.
The font of the title (network and balance) seems to be 12px in medium which doesn't exist in our text tokens. for 12px we have the token S-Body-SM in regular. For this type of title I would advice to use at least the baseline token (14px) since 12px is quite small.

filipsekulic · 2022-09-12T13:07:57Z

Hello, some details to adapt this to our existing components and tokens:

The badge seems to have a grey border that the component Avatar with Badge in the Figma file doesn't have.

The font of the title (network and balance) seems to be 12px in medium which doesn't exist in our text tokens. for 12px we have the token S-Body-SM in regular. For this type of title I would advice to use at least the baseline token (14px) since 12px is quite small.

Hey @SaraCheikh!
Good catch! Thank you for pointing this out.
I made these changes in this PR: #15727

filipsekulic self-assigned this Aug 17, 2022

Filip Sekulic added 2 commits August 17, 2022 17:39

Created new header component

b21e88f

Refactored design

490485b

filipsekulic force-pushed the header-component-for-transaction-confirmation-screens branch from 31ecc15 to 490485b Compare August 17, 2022 15:39

Removed widths

3f9e72a

filipsekulic marked this pull request as ready for review August 18, 2022 11:31

filipsekulic requested a review from a team as a code owner August 18, 2022 11:31

filipsekulic requested a review from garrettbear August 18, 2022 11:31

NidhiKJha previously requested changes Aug 18, 2022

View reviewed changes

Changed component's title in storybook

0ee04f3

brad-decker approved these changes Aug 19, 2022

View reviewed changes

filipsekulic requested a review from NidhiKJha August 23, 2022 07:52

darkwing approved these changes Aug 23, 2022

View reviewed changes

Merge branch 'develop' into header-component-for-transaction-confirma…

7c769d1

…tion-screens

brad-decker merged commit 6185cc6 into develop Aug 23, 2022

brad-decker deleted the header-component-for-transaction-confirmation-screens branch August 23, 2022 15:52

github-actions Bot locked and limited conversation to collaborators Aug 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Header component for transaction confirmation screens#15614

Header component for transaction confirmation screens#15614
brad-decker merged 5 commits intodevelopfrom
header-component-for-transaction-confirmation-screens

filipsekulic commented Aug 17, 2022 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 17, 2022

Uh oh!

metamaskbot commented Aug 17, 2022

Uh oh!

mirjanaKukic commented Aug 18, 2022

Uh oh!

metamaskbot commented Aug 18, 2022

Uh oh!

NidhiKJha left a comment

Uh oh!

NidhiKJha Aug 18, 2022

Uh oh!

filipsekulic Aug 19, 2022 •

edited

Loading

Uh oh!

metamaskbot commented Aug 19, 2022

Uh oh!

metamaskbot commented Aug 23, 2022

Uh oh!

SaraCheikh commented Sep 9, 2022

Uh oh!

filipsekulic commented Sep 12, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

	title: 'Components/APP/NetworkAccountBalanceHeader',
	title: 'Components/App/NetworkAccountBalanceHeader',

Conversation

filipsekulic commented Aug 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation

More Information

Screenshots/Screencaps

Manual Testing Steps

Uh oh!

github-actions Bot commented Aug 17, 2022

Uh oh!

metamaskbot commented Aug 17, 2022

highlights:

Uh oh!

mirjanaKukic commented Aug 18, 2022

Uh oh!

metamaskbot commented Aug 18, 2022

highlights:

Uh oh!

NidhiKJha left a comment

Choose a reason for hiding this comment

Uh oh!

NidhiKJha Aug 18, 2022

Choose a reason for hiding this comment

Uh oh!

filipsekulic Aug 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

metamaskbot commented Aug 19, 2022

highlights:

Uh oh!

metamaskbot commented Aug 23, 2022

highlights:

Uh oh!

SaraCheikh commented Sep 9, 2022

Uh oh!

filipsekulic commented Sep 12, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

filipsekulic commented Aug 17, 2022 •

edited

Loading

filipsekulic Aug 19, 2022 •

edited

Loading