feat: Add eth_sign friction

[NicolasMassart]

Development & PR Process

1. Follow MetaMask Mobile Coding Standards
2. Add release-xx label to identify the PR slated for a upcoming release (will be used in release discussion)
3. Add needs-dev-review label when work is completed
4. Add needs-qa label when dev review is completed
5. Add QA Passed label when QA has signed off

Description

1. What is the reason for the change?

Add friction when enabling the eth_sign RPC endpoint

2. What is the improvement/solution?

• Update the setting switch to clarify the risk
• Add a bottom sheet that pops when attempting to switch the value to on
• have a two steps friction on the bottom sheet: 1 - checkbox, 2 - text field to fill (case insensitive, like for "delete wallet" and prevent pasting)
• Enable setting only after all friction steps completed
• add tracking events for analytics

QA builds

• iOS install page
• Android install page

Other QA Artifacts are available on Bitrise Pipeline build #8122

Screenshots/Recordings

Light / Dark modes (on iOS)

Mode	Advanced setting (off)	CheckBox step	TextInput step (matching)	Advanced setting (on)
Light Mode
Dark Mode

Screen recording (Light mode on iOS)

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2023-05-30.at.17.37.07.mp4

Metrics

metrics event log look like this:

 LOG  [MetaMask DEBUG]: Analytics 'trackEvent' - {"category": "Settings Viewed", "properties": {"action": "eth_sign_checkbox_seen"}} {} undefined undefined
 LOG  [MetaMask DEBUG]: Analytics 'trackEvent' - {"category": "Settings Viewed", "properties": {"action": "eth_sign_input_seen"}} {} undefined undefined
 LOG  [MetaMask DEBUG]: Analytics 'trackEvent' - {"category": "Settings Updated", "properties": {"action": "eth_sign_enabled"}} {} undefined undefined
 LOG  [MetaMask DEBUG]: Analytics 'trackEvent' - {"category": "Settings Updated", "properties": {"action": "eth_sign_disabled"}} {} undefined undefined

Lines meaning:

1. switch was off and I clicked on i, popping the bottom sheet, viewing the checkbox
2. clicked on continue and moved to second sheet step with text input
3. clicked enabled, it sets the eth_sign setting value to true and closes the bottom sheet
4. then clicked switch off again in the advanced settings without the bottom sheet shown.

looks like the following on MixPanel:

Issue

fixes MetaMask/mobile-planning#918

Checklist

• There is a related GitHub issue
• Tests are included if applicable
• Any added code is fully documented

[github-actions]

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.

[socket-security]

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No dependency changes detected in pull request

[Cal-L]

LGTM

[Cal-L]

Lgtm

[seaona]

A couple of findings/comments from QA, the rest looks good 💯

Sending ENTER twice triggers other functionalities (i.e. Reset Account function, IPFS Gateway..)

Whenever I input the text and I submit ENTER key, I see that the the first one validates the text, but the second one, instead of Enabling the function it triggers another action, depending on where I am on the background screen. This could be Reset Account, Show Hex Data, IPFS Gateway etc..

eth_sign_enter.mp4

Enable button is not enabled unless I submit the text

This I am not sure if it's an issue, but commenting just in case. Whenever I enter the correct text, I can see how the button is not enabled, unless I submit (ENTER)

eth-sign-friction.mp4

Bold text

I can see how the ON/OFF text is not in bold in Android. Not sure if this is expected

[NicolasMassart]

thanks @seaona, I will investigate the first issue "Sending ENTER twice triggers".

For the second one, I'm going to confirm with design team what the expected behaviour is as this is what I understood from their Figma design (link in the issue)

For the third one, it doesn't look very bold but it is 😅 this is the sBodyLGMedium style as indicated in the design.

[seaona]

thank you for your comments @NicolasMassart @hesterbruikman ! A summary of our discussions and outcomes:

• Issue 1: would be tackled in a separate PR. The issue is here BottomSheet doesn't prevent background elements to be interacted with when navigating using a connected keyboard #6613
• Issue 2: seems that input validation behavior is different in several places, so this is not a blocker and can be consolidated on a separate PR
• Issue 3: not an issue as per @NicolasMassart 's comment

Given all that, PR looks good from QA side

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

87.2% Coverage
0.0% Duplication