feat: create ConfirmTitle component #22270

digiwand · 2023-12-13T16:30:31Z

Description

New component to display the confirmation title and subtitle

Notes:

storybook page created
I put the custom hooks directly in the confirm/title directory because it is not being used outside of this directory

Related issues

Fixes: #21282
Blocked By: #21970

Manual testing steps

Screenshots/Recordings

see blue box in below image:

Pre-merge author checklist

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.

todo: update to use hooks

github-actions · 2023-12-13T16:30:43Z

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.

jpuri

👍

ui/components/app/confirm/title/title.tsx

metamaskbot · 2023-12-19T15:57:20Z

Builds ready [d37e799]

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 (1231 ± 113 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	94	259	158	63	30
		domContentLoaded	10	175	63	69	33
		load	850	1686	1231	236	113
		domInteractive	10	175	63	69	33

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 180 Bytes (0.00%)

codecov · 2023-12-19T15:57:26Z

Codecov Report

Attention: 1 lines in your changes are missing coverage. Please review.

Comparison is base (cd38cdb) 68.08% compared to head (a688af3) 68.10%.

❗ Current head a688af3 differs from pull request most recent head 03a4f09. Consider uploading reports for the commit 03a4f09 to get more accurate results

Files	Patch %	Lines
ui/components/app/confirm/title/title.tsx	90.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #22270      +/-   ##
===========================================
+ Coverage    68.08%   68.10%   +0.01%     
===========================================
  Files         1091     1092       +1     
  Lines        42923    42927       +4     
  Branches     11415    11413       -2     
===========================================
+ Hits         29223    29232       +9     
+ Misses       13700    13695       -5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

app/_locales/en/messages.json

https://github.com/MetaMask/metamask-extension/pull/22270/files#r1446766872 Co-authored-by: George Marshall <[email protected]>

metamaskbot · 2024-01-18T00:12:11Z

Builds ready [8f0d4f9]

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 (1255 ± 96 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	92	276	143	59	29
		domContentLoaded	10	198	50	64	31
		load	847	1571	1255	200	96
		domInteractive	10	198	50	64	31

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 179 Bytes (0.00%)

segun

Would be nice to add storybook as well.

digiwand · 2024-01-20T02:19:50Z

hi @segun, thanks for the review!

I was holding off on creating storybook pages for this reason:

no storybook page created for this. We can display this within the confirm page storybook page(s) when we create them. see: https://storybook.js.org/docs/writing-stories/build-pages-with-storybook#args-composition-for-presentational-screens

however, I've added it now upon request since it could be useful. It's a simple storybook page for now, so it doesn't have controls yet we don't support other variants at this time

updated 5983f88

georgewrmarshall · 2024-01-20T03:03:31Z

hi @segun, thanks for the review!

I was holding off on creating storybook pages for this reason:

no storybook page created for this. We can display this within the confirm page storybook page(s) when we create them. see: https://storybook.js.org/docs/writing-stories/build-pages-with-storybook#args-composition-for-presentational-screens

however, I've added it now upon request since it could be useful. It's a simple storybook page for now, so it doesn't have controls yet we don't support other variants at this time

updated 5983f88

I also think a storybook file no matter how simple the component is can be helpful :)

digiwand · 2024-01-22T15:28:43Z

gotchya, thanks for the direction on storybook pages here @segun & @georgewrmarshall!

metamaskbot · 2024-01-22T20:30:49Z

Builds ready [a7b7d2b]

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 (1237 ± 149 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	81	335	147	72	35
		domContentLoaded	8	234	51	72	34
		load	758	1960	1237	310	149
		domInteractive	8	234	51	72	34

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 179 Bytes (0.00%)

metamaskbot · 2024-01-25T22:16:09Z

Builds ready [4033482]

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 (809 ± 34 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	88	148	114	16	8
		domContentLoaded	10	52	17	10	5
		load	733	1031	809	71	34
		domInteractive	10	52	17	10	5

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 179 Bytes (0.00%)

metamaskbot · 2024-01-29T16:05:41Z

Builds ready [a688af3]

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 (733 ± 10 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	84	118	101	7	3
		domContentLoaded	9	21	16	3	1
		load	682	766	733	22	10
		domInteractive	9	21	16	3	1

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 179 Bytes (0.00%)

digiwand · 2024-01-30T00:42:36Z

hi @segun,
not seeing a way to dismiss or mark the change request as complete. may I get a rereview please?

metamaskbot · 2024-01-30T01:12:40Z

Builds ready [03a4f09]

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 (779 ± 15 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	93	137	111	14	7
		domContentLoaded	9	29	15	5	2
		load	728	837	779	32	15
		domInteractive	9	29	15	5	2

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 179 Bytes (0.00%)

digiwand added 7 commits December 13, 2023 08:25

feat: create ConfirmTitle

ac7373e

todo: update to use hooks

refactor: rn ConfirmTitle subtitle -> description

e1652ec

feat: ConfirmTitle use hooks

ef72699

feat: ConfirmTitle use memo

8d7594b

refactor: rm hooks for ConfirmTitle

817f768

fix:lint: alphabetize

c7ebbde

refactor: reverse selector from ef72699

ff9855d

digiwand added team-confirmations-secure-ux-PR PRs from the confirmations team confirmation-redesign labels Dec 13, 2023

digiwand requested a review from a team as a code owner December 13, 2023 16:30

digiwand mentioned this pull request Dec 13, 2023

feat: create ConfirmTitle component #22098

Closed

13 tasks

digiwand requested a review from jpuri December 14, 2023 16:15

digiwand added 2 commits December 14, 2023 13:01

Merge branch 'develop' into feat-confirm-title-with-description-2

955d2ce

refactor: update type Confirmation; fix eslint

ebd581d

jpuri previously approved these changes Dec 15, 2023

View reviewed changes

digiwand requested review from blackdevelopa and segun December 15, 2023 16:17

digiwand commented Dec 18, 2023

View reviewed changes

ui/components/app/confirm/title/title.tsx Show resolved Hide resolved

Merge branch 'develop' into feat-confirm-title-with-description-2

d37e799

digiwand dismissed jpuri’s stale review via d37e799 December 19, 2023 15:22

digiwand requested a review from jpuri December 19, 2023 15:22

Merge branch 'develop' into feat-confirm-title-with-description-2

503d1c0

jpuri previously approved these changes Dec 19, 2023

View reviewed changes

georgewrmarshall reviewed Jan 10, 2024

View reviewed changes

app/_locales/en/messages.json Outdated Show resolved Hide resolved

digiwand and others added 2 commits January 11, 2024 06:57

Merge branch 'develop' into feat-confirm-title-with-description-2

e306688

fix: ConfirmTitle rm period in copy

d6f448e

https://github.com/MetaMask/metamask-extension/pull/22270/files#r1446766872 Co-authored-by: George Marshall <[email protected]>

digiwand dismissed jpuri’s stale review via d6f448e January 11, 2024 15:02

digiwand added 2 commits January 17, 2024 11:42

Merge branch 'develop' into feat-confirm-title-with-description-2

b1d51fa

Merge branch 'develop' into feat-confirm-title-with-description-2

8f0d4f9

segun suggested changes Jan 19, 2024

View reviewed changes

digiwand added 2 commits January 19, 2024 18:17

refactor: update ConfirmTitle import/export

be4e3db

feat: create ConfirmTitle storybook page

5983f88

digiwand dismissed georgewrmarshall’s stale review via 5983f88 January 20, 2024 02:17

digiwand requested a review from segun January 20, 2024 02:19

georgewrmarshall previously approved these changes Jan 20, 2024

View reviewed changes

Merge branch 'develop' into feat-confirm-title-with-description-2

6847544

fix: import default ConfirmTitle

a7b7d2b

digiwand dismissed georgewrmarshall’s stale review via a7b7d2b January 22, 2024 15:42

jpuri approved these changes Jan 22, 2024

View reviewed changes

Merge branch 'develop' into feat-confirm-title-with-description-2

4033482

Merge branch 'develop' into feat-confirm-title-with-description-2

a688af3

georgewrmarshall approved these changes Jan 29, 2024

View reviewed changes

Merge branch 'develop' into feat-confirm-title-with-description-2

03a4f09

segun approved these changes Jan 30, 2024

View reviewed changes

segun merged commit ea23260 into develop Jan 30, 2024

segun deleted the feat-confirm-title-with-description-2 branch January 30, 2024 20:09

github-actions bot locked and limited conversation to collaborators Jan 30, 2024

metamaskbot added the release-11.11.0 Issue or pull request that will be included in release 11.11.0 label Jan 30, 2024

feat: create ConfirmTitle component #22270

feat: create ConfirmTitle component #22270

Uh oh!

Conversation

digiwand commented Dec 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Dec 13, 2023

Uh oh!

jpuri left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

metamaskbot commented Dec 19, 2023

Uh oh!

codecov bot commented Dec 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

metamaskbot commented Jan 18, 2024

Uh oh!

segun left a comment

Choose a reason for hiding this comment

Uh oh!

digiwand commented Jan 20, 2024

Uh oh!

georgewrmarshall commented Jan 20, 2024

Uh oh!

digiwand commented Jan 22, 2024

Uh oh!

metamaskbot commented Jan 22, 2024

Uh oh!

metamaskbot commented Jan 25, 2024

Uh oh!

metamaskbot commented Jan 29, 2024

Uh oh!

digiwand commented Jan 30, 2024

Uh oh!

metamaskbot commented Jan 30, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

digiwand commented Dec 13, 2023 •

edited

Loading

codecov bot commented Dec 19, 2023 •

edited

Loading