MetaMask / MetaMask/metamask-mobile

Convert MessageSign component into a functional component

Open
#5,562 1 comment 0 reactions 0 assignees View on GitHub
area-signatures team-confirmations-planning type-pinned type-tech-debt
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### **Description**

Convert MessageSign component into a functional component:


[https://github.com/MetaMask/metamask-mobile/blob/18dc20b8cc9f3f0707f5eb04f2ac88ee320c93bb/app/components/UI/MessageSign/index.js](https://github.com/MetaMask/metamask-mobile/blob/44fd8450a84ebde8510a244ee1eda4b2e12a1df1/app/components/PersonalSign/index.js)

----------------------------------------------------------
A lot of code is duplicated in the 3 Signature components: [MessageSign](https://github.com/MetaMask/metamask-mobile/blob/18dc20b8cc9f3f0707f5eb04f2ac88ee320c93bb/app/components/UI/MessageSign/index.js), [PersonalSign](https://github.com/MetaMask/metamask-mobile/blob/44fd8450a84ebde8510a244ee1eda4b2e12a1df1/app/components/PersonalSign/index.js), [TypedSign](https://github.com/MetaMask/metamask-mobile/blob/18dc20b8cc9f3f0707f5eb04f2ac88ee320c93bb/app/components/UI/TypedSign/index.js)

As the components are converted to functional components, we can get rid of duplicate code also.

1. These functions can be moved to utility class - `walletConnectNotificationTitle`, `showWalletConnectNotification`.
2. Following 4 functions can be move to [SignatureRequest](https://github.com/MetaMask/metamask-mobile/blob/18dc20b8cc9f3f0707f5eb04f2ac88ee320c93bb/app/components/UI/SignatureRequest/index.js) component by passing `getAnalyticsParams` as prop to it
- `componentDidMount`
- `rejectMessage`
- `cancelSignature`
- `confirmSignature`
3. Toggling between Expanded View and Signature request logic can also be moved to SignatureRequest component.
----------------------------------------------------------

### **Acceptance Criteria**
- Signature request functionality continues to work as it is currently
- Use of deprecated react api is removed
- Code duplication between the components [MessageSign](https://github.com/MetaMask/metamask-mobile/blob/18dc20b8cc9f3f0707f5eb04f2ac88ee320c93bb/app/components/UI/MessageSign/index.js), [PersonalSign](https://github.com/MetaMask/metamask-mobile/blob/44fd8450a84ebde8510a244ee1eda4b2e12a1df1/app/components/PersonalSign/index.js), [TypedSign](https://github.com/MetaMask/metamask-mobile/blob/18dc20b8cc9f3f0707f5eb04f2ac88ee320c93bb/app/components/UI/TypedSign/index.js) is minimised

### **References**
https://docs.google.com/document/d/19xKY4e07UThOa1jsDQA8pjsNLUBRn39EdUbaFpz3OR0/edit?usp=sharing

Contributor guide

Open the contributing guide

Research direction

Compare app/components/UI/MessageSign/index.js with app/components/PersonalSign/index.js and app/components/UI/TypedSign/index.js, then read app/components/UI/SignatureRequest/index.js. Trace the listed lifecycle and signature actions, including the WalletConnect notification helpers, before deciding what can be shared. Done means signature requests still work, deprecated React APIs are removed, and duplication is minimized.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, react-native
Domain
frontend, mobile
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.