fix: Permit value decimal & refactor: Create reusable ConfirmInfoRowTextTokenUnits component by digiwand · Pull Request #26105 · MetaMask/metamask-extension

digiwand · 2024-07-24T20:48:01Z

Description

No UI/UX changes

Create reusable ConfirmInfoRowTextTokenUnits

This also fixes the missing token decimals we had on the Permit value

notes:

there is an outstanding bug ticket to redesign the display length of the amount to max 15 characters. This will be handled separately
there's also a precision issue being handle separately

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2888

Manual testing steps

Create a redesign Permit transaction
Observe amount displays as expected

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension 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-07-24T20:48:15Z

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.

greptile-apps

PR Summary

The refactor and redesign of the confirmation token amount feature introduces new components and updates existing ones to improve functionality and maintainability.

New Component: Added ui/components/app/confirm/info/row/text-token.tsx to format and display token amounts with precision.
Storybook Addition: Introduced ui/components/app/confirm/info/row/text-token.stories.tsx for visual testing of the ConfirmInfoRowTextToken component.
Unit Tests: Added ui/components/app/confirm/info/row/text-token.test.tsx to ensure correct rendering and formatting of token values.
Refactor: Updated ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx to use calcTokenAmount for consistent token calculations.
Code Simplification: Modified ui/pages/confirmations/components/confirm/row/dataTree.tsx to replace custom formatting with the new ConfirmInfoRowTextToken component.

_{6 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

The refactor and redesign of the confirmation token amount feature primarily involve renaming components and updating their usage to improve clarity and maintainability.

Component Renaming: ui/components/app/confirm/info/row/text-token.tsx renamed to text-token-units.tsx to better reflect its functionality.
Export Update: Modified ui/components/app/confirm/info/row/index.ts to export text-token-units instead of text-token.
Story and Test Updates: Renamed text-token.stories.tsx and text-token.test.tsx to text-token-units.stories.tsx and text-token-units.test.tsx respectively, aligning with the new component name.
DataTree Component Update: Adjusted ui/pages/confirmations/components/confirm/row/dataTree.tsx to use ConfirmInfoRowTextTokenUnits for better naming consistency.

_{5 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

sonarqubecloud · 2024-07-25T08:17:12Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

greptile-apps

PR Summary

(updates since last review)

The refactor introduces a reusable ConfirmInfoRowTextTokenUnits component to streamline token amount display across the application.

New Component: Added ConfirmInfoRowTextTokenUnits in ui/components/app/confirm/info/row/text-token-units.tsx.
Test Enhancements: Updated shared/lib/transaction-controller-utils.test.js to include precision handling tests.
Storybook Addition: Created invalid-custom-network-alert.stories.tsx for visual testing of InvalidCustomNetworkAlert.
E2E Test Reliability: Improved test/e2e/accounts/create-snap-account.spec.ts by adding wait conditions for popup handling.
UI Consistency: Modified ui/pages/onboarding-flow/metametrics/index.scss to maintain consistent button width across screen sizes.

_{12 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

metamaskbot · 2024-07-25T08:43:57Z

Builds ready [d1f422d]

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

Page Load Metrics (171 ± 196 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	304	113	48	23
		domContentLoaded	10	97	29	23	11
		load	43	1945	171	409	196
		domInteractive	10	97	29	23	11

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 1.17 KiB (0.02%)
common: 0 Bytes (0.00%)

codecov · 2024-07-25T08:44:03Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.67%. Comparing base (d6b7829) to head (d1f422d).

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #26105      +/-   ##
===========================================
- Coverage    69.67%   69.67%   -0.00%     
===========================================
  Files         1405     1406       +1     
  Lines        49733    49731       -2     
  Branches     13751    13751              
===========================================
- Hits         34651    34649       -2     
  Misses       15082    15082

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

digiwand · 2024-08-20T13:29:12Z

ui/pages/confirmations/components/confirm/row/dataTree.tsx

-      // FIXME - Precision may be lost for large values when using formatAmount
-      /** @see {@link https://github.com/MetaMask/metamask-extension/issues/25755} */
-      const tokenValue = formatAmount('en-US', resultBn);
-      const tokenValueMaxPrecision = formatAmountMaxPrecision('en-US', valueBN);


valueBn should have been resultBn here. This caused the token decimal issue.

digiwand added 2 commits July 24, 2024 22:27

refactor: use calcTokenAmount for permit logic

4e48540

refactor: create ConfirmInfoRowTextToken

b548433

digiwand requested review from a team as code owners July 24, 2024 20:48

metamaskbot added the team-confirmations Push issues to confirmations team label Jul 24, 2024

greptile-apps bot reviewed Jul 24, 2024

View reviewed changes

digiwand added 2 commits July 25, 2024 02:30

refactor: rn text-token -> text-token-units

873aaae

refactor: rn ConfirmInfoRowTextToken -> ConfirmInfoRowTextTokenUnits

a1ac6cd

greptile-apps bot reviewed Jul 24, 2024

View reviewed changes

digiwand changed the title ~~Refactor redesign conf token amount~~ refactor: Create reusable ConfirmInfoRowTextTokenUnits component Jul 24, 2024

digiwand mentioned this pull request Jul 24, 2024

feat: Support Permit variants: PermitSingle, PermitBatch, PermitTransferFrom, PermitBatchTransferFrom, TradeOrder, Seaport #26107

Merged

7 tasks

Merge branch 'develop' into refactor-redesign-conf-token-amount

d1f422d

greptile-apps bot reviewed Jul 25, 2024

View reviewed changes

pedronfigueiredo approved these changes Jul 25, 2024

View reviewed changes

jpuri approved these changes Jul 25, 2024

View reviewed changes

digiwand merged commit c204377 into develop Jul 25, 2024

digiwand deleted the refactor-redesign-conf-token-amount branch July 25, 2024 10:44

github-actions bot locked and limited conversation to collaborators Jul 25, 2024

metamaskbot added the release-12.3.0 Issue or pull request that will be included in release 12.3.0 label Jul 25, 2024

digiwand added release-12.1.0 Issue or pull request that will be included in release 12.1.0 rc-cherry-picked and removed release-12.3.0 Issue or pull request that will be included in release 12.3.0 labels Aug 19, 2024

digiwand changed the title ~~refactor: Create reusable ConfirmInfoRowTextTokenUnits component~~ fix: Permit value decimal & refactor: Create reusable ConfirmInfoRowTextTokenUnits component Aug 20, 2024

digiwand commented Aug 20, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Permit value decimal & refactor: Create reusable ConfirmInfoRowTextTokenUnits component#26105

fix: Permit value decimal & refactor: Create reusable ConfirmInfoRowTextTokenUnits component#26105
digiwand merged 5 commits intodevelopfrom
refactor-redesign-conf-token-amount

digiwand commented Jul 24, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Jul 24, 2024

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot left a comment

Uh oh!

sonarqubecloud bot commented Jul 25, 2024

Uh oh!

greptile-apps bot left a comment

Uh oh!

metamaskbot commented Jul 25, 2024

Uh oh!

codecov bot commented Jul 25, 2024

Uh oh!

digiwand Aug 20, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

digiwand commented Jul 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Jul 24, 2024

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

sonarqubecloud bot commented Jul 25, 2024

Quality Gate passed

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

metamaskbot commented Jul 25, 2024

Uh oh!

codecov bot commented Jul 25, 2024

Codecov Report

Uh oh!

digiwand Aug 20, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

digiwand commented Jul 24, 2024 •

edited

Loading