feat: Create Permit Simulation #12606

digiwand · 2024-12-09T08:20:16Z

Description

Creates Permit Simulation UI to be shown on V3 and V4 signTypedData confirmations. Signature Decoding logic to be added following this PR.

Add

create ButtonPill component
create PermitSimulation component
- add to TypedSignV3V4 component
create constants/signatures.ts file
create hooks/useGetTokenStandardAndDetails files
create hooks/useTrackERC20WithoutDecimalInformation.ts
file
create utils/signature.ts file
create utils/token.ts file

Update

add style param to UI/Name component
add style param to InfoRow Address component
add noBorder param to Box component
add TokenStandard enum
add canCloseOnBackdropClick param to confirmation BottomModal component
add skipCharacterInEnd param to shortenString common util. This mimics the same logic in extension

Designs

Simulations MVP https://www.figma.com/design/8DrinrQI4hs76Grm2F34xK/Simulations-MVP?node-id=1283-18713&node-type=canvas&t=FbRsIUjxMDxC3Get-0

Confirmations Redesign V5 https://www.figma.com/design/wcXUl6AH5KNFwKdAIv49kh/Confirmation-redesign-V5?node-id=4157-7776&node-type=canvas&m=dev

Related issues

Fixes: #12432

Manual testing steps

Test Permit test-dapp button

Screenshots/Recordings

Before

After

Pre-merge author checklist

I’ve followed MetaMask Contributor Docs and MetaMask Mobile 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.

todo: - metrics - precision tooltip - tests - styles: - right align row values - hide

github-actions · 2024-12-09T08:20:30Z

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.

todo: - fix rerender issue - fix removeEventListener detached console error

github-actions · 2025-01-07T06:04:06Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 79a4003
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/a2fd6019-42be-4009-a6d3-d309eb53d257

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

github-actions · 2025-01-07T14:57:38Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 8577591
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/6232f15b-7bac-4ed3-8a0f-db8b1147c79e

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

brianacnguyen

Since the ButtonPill is not an official DS component, can you move it to components-temp?
Also can you attach the design for this to the PR

app/component-library/components/Buttons/ButtonPill/ButtonPill.styles.ts

digiwand · 2025-01-07T16:42:17Z

got it, thanks @brianacnguyen! moved 2bdb950

copied designs from the related issue to this ticket

jpuri · 2025-01-08T06:31:31Z

app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.styles.ts

+  });
+};
+
+export default styleSheet;


It will be nicer to create separate PR for this component and also possibly addd storybook.

thanks for the review @jpuri!

yeah, I agree. In retrospect, having a tree trunk branch for this feature would have been nice since it requires much more than I anticipated initially. This PR is my first mobile feat PR, so I didn't expect to need all of these dependencies

good idea to add a storybook page. I created a separate issue ticket for this + related unit tests
#12910

jpuri · 2025-01-08T06:31:50Z

app/component-library/components-temp/Buttons/ButtonPill/__snapshots__/ButtonPill.test.tsx.snap

+    }
+  }
+/>
+`;


We are avoiding snapshot testing now in mobile re-design effort.

Sgtm! I was mimicking the existing DS ButtonIcon component. It isn't too bad at this lower-level component, unlike a parent component to have the snapshot.

I created a separate issue to handle this suggestion #12910

jpuri · 2025-01-08T07:22:29Z

app/util/notifications/methods/common.ts

    truncatedCharLimit: TRUNCATED_NAME_CHAR_LIMIT,
    truncatedStartChars: TRUNCATED_ADDRESS_START_CHARS,
    truncatedEndChars: TRUNCATED_ADDRESS_END_CHARS,
+    skipCharacterInEnd: false,


NIT: unit test coverage for new added condition.

added tests for shortenString with new param 5852d87

jpuri · 2025-01-08T07:24:02Z

app/components/Views/confirmations/utils/signature.ts

@@ -0,0 +1,55 @@
+import { ApprovalRequest } from '@metamask/approval-controller';


Unit test coverage for new util methods will be very useful.

updated 1ffe22e

github-actions · 2025-01-09T08:36:23Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 5852d87
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/57d2a231-250d-444a-a615-afba71e7f846

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

sonarqubecloud · 2025-01-11T02:24:45Z

Quality Gate passed

Issues
10 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

digiwand added 2 commits December 6, 2024 21:53

feat: Permit Simulation

87b746e

todo: - metrics - precision tooltip - tests - styles: - right align row values - hide

refactor: PermitSimulation const name

60086e1

digiwand requested review from a team as code owners December 9, 2024 08:20

digiwand marked this pull request as draft December 9, 2024 08:20

metamaskbot added the team-confirmations Push issues to confirmations team label Dec 9, 2024

digiwand added 14 commits December 9, 2024 17:55

fix: label_change_type i18n

ae2a2cb

feat: add PermitSimulation metrics

5b5d094

feat: create ButtonPill component

dfc086f

feat: PermitSimulation token value BottomModal

d96f9aa

Merge branch 'main' into feat-permit-simulation

a665679

feat: Add Permit Simulation to TypedSignV3V4 redesign

518e51d

refactor: cleanup

f069e37

chore: update todo ValueDisplay shorten comment

fe15f12

refactor: update useGetTokenStandardAndDetails import

6777319

fix: PermitSimulation changeType

4bc90e0

test: PermitSimulation

b65adf3

fix: useTrackERC20WithoutDecimalInformation should run once

a79f2cd

fix: include typedSignV4ConfirmationState for PermitSimulation test

a5d96ec

test: create PermitSimulationValueDisplay test

05669d3

todo: - fix rerender issue - fix removeEventListener detached console error

digiwand changed the title ~~Feat: Create Permit Simulation~~ feat: Create Permit Simulation Dec 18, 2024

digiwand added 5 commits December 19, 2024 23:27

fix: TS lint signature util

bcccb06

Merge branch 'main' into feat-permit-simulation

22f754f

fix: readd dep to useTrackERC20WithoutDecimalInformation

567fc66

chore: update useTrackERC20WithoutDecimalInformation TS metricLocation

0c215c4

test: ValueDisplay test

1683123

digiwand added the Run Smoke E2E Triggers smoke e2e on Bitrise label Jan 7, 2025

digiwand requested a review from a team as a code owner January 7, 2025 06:01

digiwand added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Jan 7, 2025

digiwand added 2 commits January 6, 2025 22:05

test:fix: OrderDetails allow undefined style param

aa43eb9

test:fix: include InfoAddress undefined style param

8577591

digiwand added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Jan 7, 2025

brianacnguyen requested changes Jan 7, 2025

View reviewed changes

brianacnguyen reviewed Jan 7, 2025

View reviewed changes

app/component-library/components/Buttons/ButtonPill/ButtonPill.styles.ts Outdated Show resolved Hide resolved

digiwand added 2 commits January 7, 2025 08:35

chore: ButtonPill pressed -> isPressed

d53035f

build: mv ButtonPill files -> components-temp

2bdb950

jpuri reviewed Jan 8, 2025

View reviewed changes

digiwand requested a review from brianacnguyen January 8, 2025 16:42

digiwand added 3 commits January 8, 2025 21:57

test: create confirmations/utils/signature test

1ffe22e

test: add parseTypedDataMessage tests

779f36f

test: add shortenString tests for skipCharacterInEnd + update TS

5852d87

digiwand added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Jan 9, 2025

digiwand requested a review from jpuri January 10, 2025 15:10

Merge branch 'main' into feat-permit-simulation

fce5367

digiwand added 2 commits January 10, 2025 19:15

build: mv permit simulation files

f0cc923

build: rn path Simulation/Permit -> Simulation/TypedSignPermit

98d89c7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Create Permit Simulation #12606

feat: Create Permit Simulation #12606

digiwand commented Dec 9, 2024 •

edited

Loading

github-actions bot commented Dec 9, 2024

github-actions bot commented Jan 7, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 7, 2025 •

edited by metamaskbot

Loading

brianacnguyen left a comment

digiwand commented Jan 7, 2025

jpuri Jan 8, 2025

digiwand Jan 8, 2025

jpuri Jan 8, 2025 •

edited

Loading

digiwand Jan 8, 2025 •

edited

Loading

jpuri Jan 8, 2025

digiwand Jan 9, 2025

jpuri Jan 8, 2025

digiwand Jan 9, 2025

github-actions bot commented Jan 9, 2025 •

edited by metamaskbot

Loading

sonarqubecloud bot commented Jan 11, 2025

		@@ -0,0 +1,55 @@
		import { ApprovalRequest } from '@metamask/approval-controller';

feat: Create Permit Simulation #12606

Are you sure you want to change the base?

feat: Create Permit Simulation #12606

Conversation

digiwand commented Dec 9, 2024 • edited Loading

Description

Add

Update

Designs

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Dec 9, 2024

github-actions bot commented Jan 7, 2025 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Jan 7, 2025 • edited by metamaskbot Loading

Bitrise

brianacnguyen left a comment

Choose a reason for hiding this comment

digiwand commented Jan 7, 2025

jpuri Jan 8, 2025

Choose a reason for hiding this comment

digiwand Jan 8, 2025

Choose a reason for hiding this comment

jpuri Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

digiwand Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

jpuri Jan 8, 2025

Choose a reason for hiding this comment

digiwand Jan 9, 2025

Choose a reason for hiding this comment

jpuri Jan 8, 2025

Choose a reason for hiding this comment

digiwand Jan 9, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 9, 2025 • edited by metamaskbot Loading

Bitrise

sonarqubecloud bot commented Jan 11, 2025

Quality Gate passed

digiwand commented Dec 9, 2024 •

edited

Loading

github-actions bot commented Jan 7, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 7, 2025 •

edited by metamaskbot

Loading

jpuri Jan 8, 2025 •

edited

Loading

digiwand Jan 8, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited by metamaskbot

Loading