feat: Implement transaction details component #24228

pedronfigueiredo · 2024-04-24T16:17:58Z

Description

Implement transaction details component with 4byte method name resolution
Restyle the component conditionally

Related issues

Fixes: #23945

Manual testing steps

Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

I’ve followed MetaMask Coding Standards.
I've completed the PR template to the best of my ability
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.

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.

github-actions · 2024-04-24T16:18:10Z

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/pages/confirmations/components/simulation-details/simulation-details.tsx

ui/pages/confirmations/components/confirm/hooks.ts

ui/pages/confirmations/hooks/useConfirmationRecipientInfo.ts

ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx

The base branch was changed.

metamaskbot · 2024-05-01T15:39:22Z

Builds ready [8d26e10]

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, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (360 ± 433 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	59	114	78	14	7
		domContentLoaded	9	58	14	11	5
		load	47	3490	360	903	433
		domInteractive	9	58	14	11	5

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

background: 0 Bytes (0.00%)
ui: 3.9 KiB (0.06%)
common: 442 Bytes (0.01%)

codecov · 2024-05-01T15:39:31Z

Codecov Report

Attention: Patch coverage is 97.43590% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 67.36%. Comparing base (4a1853c) to head (8d26e10).

❗ Current head 8d26e10 differs from pull request most recent head 4012ddf. Consider uploading reports for the commit 4012ddf to get more accurate results

Files	Patch %	Lines
...onents/confirm/info/shared/transaction-details.tsx	95.45%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #24228      +/-   ##
===========================================
- Coverage    67.37%   67.36%   -0.01%     
===========================================
  Files         1278     1278              
  Lines        49881    49766     -115     
  Branches     12944    12936       -8     
===========================================
- Hits         33605    33524      -81     
+ Misses       16276    16242      -34

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

jpuri · 2024-05-01T17:30:12Z

...ges/confirmations/components/confirm/info/contract-interaction/contract-interaction.test.tsx

 import configureMockStore from 'redux-mock-store';
 import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../test/data/confirmations/contract-interaction';
 import mockState from '../../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../../test/lib/render-helpers';
 import ContractInteractionInfo from './contract-interaction';

 describe('<ContractInteractionInfo />', () => {
+  const middleware = [thunk];
+


just curious - why is thunk middleware required here ?

Because useKnownMethodDataInTransaction, which is further down the component chain needs to be able to dispatch actions.

ui/pages/confirmations/components/confirm/info/hooks/known-method-data-in-transaction.ts

jpuri · 2024-05-01T17:33:36Z

ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx

+      <OriginRow />
+      <RecipientRow />
+      <MethodDataRow />
+    </>


Later, it might be useful to extract these into their own components for re-use across confirmations

Agreed, although I haven't seen a use case for them outside transaction details on the designs yet.

ui/pages/confirmations/components/confirm/info/hooks/known-method-data-in-transaction.ts

ui/pages/confirmations/components/confirm/info/shared/transaction-details.tsx

ui/pages/confirmations/components/simulation-details/simulation-details.tsx

jpuri

LGTM

metamaskbot · 2024-05-03T11:46:21Z

Builds ready [cbdf3d5]

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, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1050 ± 654 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	61	174	92	32	15
		domContentLoaded	8	54	15	11	5
		load	49	3633	1050	1361	654
		domInteractive	8	54	14	11	5

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

background: 0 Bytes (0.00%)
ui: 3.93 KiB (0.06%)
common: 442 Bytes (0.01%)

metamaskbot · 2024-05-03T16:34:41Z

Builds ready [b00c938]

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, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1520 ± 704 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	63	149	96	26	13
		domContentLoaded	10	43	15	8	4
		load	51	3465	1520	1467	704
		domInteractive	10	43	15	8	4

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

background: 0 Bytes (0.00%)
ui: 3.93 KiB (0.06%)
common: 442 Bytes (0.01%)

pedronfigueiredo added team-confirmations-secure-ux DEPRECATED: please use "team-confirmations" label instead team-confirmations-secure-ux-PR PRs from the confirmations team confirmation-redesign confirmation-re-design team-confirmations Push issues to confirmations team labels Apr 24, 2024

pedronfigueiredo self-assigned this Apr 24, 2024

pedronfigueiredo requested review from a team as code owners April 24, 2024 16:17

jpuri previously approved these changes Apr 24, 2024

View reviewed changes

matthewwalsh0 reviewed Apr 24, 2024

View reviewed changes

pedronfigueiredo force-pushed the pnf/23944 branch 2 times, most recently from f9f4b7b to a21b7ab Compare April 26, 2024 11:19

pedronfigueiredo mentioned this pull request Apr 26, 2024

feat: Create info component for contract interactions #24131

Merged

7 tasks

Base automatically changed from pnf/23944 to develop April 26, 2024 13:03

pedronfigueiredo force-pushed the pnf/23945 branch 10 times, most recently from 0ba1c4b to 8d26e10 Compare May 1, 2024 14:32

jpuri reviewed May 1, 2024

View reviewed changes

ui/pages/confirmations/components/confirm/info/hooks/known-method-data-in-transaction.ts Show resolved Hide resolved

jpuri reviewed May 1, 2024

View reviewed changes

jpuri previously approved these changes May 1, 2024

View reviewed changes

ustad56 approved these changes May 1, 2024

View reviewed changes

matthewwalsh0 previously approved these changes May 2, 2024

View reviewed changes

pedronfigueiredo dismissed stale reviews from matthewwalsh0 and jpuri via b9dc87e May 2, 2024 13:47

pedronfigueiredo force-pushed the pnf/23945 branch 2 times, most recently from b9dc87e to 6c84c02 Compare May 2, 2024 13:49

matthewwalsh0 previously approved these changes May 2, 2024

View reviewed changes

pedronfigueiredo dismissed matthewwalsh0’s stale review via 6ca7c44 May 3, 2024 09:59

pedronfigueiredo force-pushed the pnf/23945 branch from 6ca7c44 to 2b1487c Compare May 3, 2024 09:59

jpuri approved these changes May 3, 2024

View reviewed changes

pedronfigueiredo added 9 commits May 3, 2024 14:36

Create info component for contract interactions

756c57d

fix tests

2262643

fix linting

4cc8bd5

feat: Implement transaction details component

6b5321f

addressed PR feedback

ff6a8f0

address feedback

e2cd550

fix test failure

7a86ed1

fix tests

dadcb26

fix linting

b00c938

pedronfigueiredo force-pushed the pnf/23945 branch from cbdf3d5 to b00c938 Compare May 3, 2024 13:36

matthewwalsh0 approved these changes May 3, 2024

View reviewed changes

pedronfigueiredo merged commit 011b772 into develop May 3, 2024
70 of 72 checks passed

pedronfigueiredo deleted the pnf/23945 branch May 3, 2024 16:21

github-actions bot locked and limited conversation to collaborators May 3, 2024

metamaskbot added the release-11.18.0 Issue or pull request that will be included in release 11.18.0 label May 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement transaction details component #24228

feat: Implement transaction details component #24228

pedronfigueiredo commented Apr 24, 2024 •

edited

github-actions bot commented Apr 24, 2024

jpuri left a comment

metamaskbot commented May 1, 2024

codecov bot commented May 1, 2024 •

edited

jpuri May 1, 2024

pedronfigueiredo May 2, 2024

jpuri May 1, 2024

pedronfigueiredo May 2, 2024

jpuri left a comment

metamaskbot commented May 3, 2024

metamaskbot commented May 3, 2024

feat: Implement transaction details component #24228

feat: Implement transaction details component #24228

Conversation

pedronfigueiredo commented Apr 24, 2024 • edited

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Apr 24, 2024

jpuri left a comment

Choose a reason for hiding this comment

metamaskbot commented May 1, 2024

codecov bot commented May 1, 2024 • edited

Codecov Report

jpuri May 1, 2024

Choose a reason for hiding this comment

pedronfigueiredo May 2, 2024

Choose a reason for hiding this comment

jpuri May 1, 2024

Choose a reason for hiding this comment

pedronfigueiredo May 2, 2024

Choose a reason for hiding this comment

jpuri left a comment

Choose a reason for hiding this comment

metamaskbot commented May 3, 2024

metamaskbot commented May 3, 2024

pedronfigueiredo commented Apr 24, 2024 •

edited

codecov bot commented May 1, 2024 •

edited