MetaMask / MetaMask/metamask-mobile
Convert MessageSign component into a functional component
- 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
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