MetaMask / MetaMask/metamask-mobile

Convert TypedSign component into a functional component

Open
#5,564 0 comments 0 reactions 1 assignee Claimed by @blackdevelopa View on GitHub
area-signatures team-confirmations-planning type-tech-debt
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### **Description**

Convert TypedSign component into a functional component:


[https://github.com/MetaMask/metamask-mobile/blob/18dc20b8cc9f3f0707f5eb04f2ac88ee320c93bb/app/components/UI/TypedSign/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

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.