MetaMask / MetaMask/metamask-mobile
React Compiler full power
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 1.7k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
### What is this about?
To take full benefit in all components of the React Compiler, we need to address the disablements of react rules on eslint.
The rule `react-compiler/react-compiler` must be an error and not a warning on our eslint configuration
Currently, we have 76 errors
Advantages of addressing this:
* Performance overall for the components that are not benefiting from react compiler
* Avoid regressions easily
**Approach Suggestion**
Split errors between teams for them to easy address those.
Components:
app/component-library/components/Avatars/Avatar/variants/AvatarToken/AvatarToken.tsx
app/component-library/providers/ThemeProvider/ThemeProvider.test.tsx
app/components/Base/RemoteImage/index.js
app/components/Nav/Main/RootRPCMethodsUI.js
app/components/Nav/Main/index.js
app/components/Snaps/SnapUIAssetSelector/useSnapAssetDisplay.tsx
app/components/UI/AssetSearch/index.tsx
app/components/UI/CaipAccountSelectorList/CaipAccountSelectorList.test.tsx
app/components/UI/CollectibleModal/CollectibleModal.tsx
app/components/UI/Confetti/index.js
app/components/UI/Earn/Views/EarnInputView/EarnInputView.tsx
app/components/UI/Earn/Views/EarnLendingDepositConfirmationView/index.tsx
app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/index.tsx
app/components/UI/Earn/Views/EarnWithdrawInputView/EarnWithdrawInputView.tsx
app/components/UI/EvmAccountSelectorList/EvmAccountSelectorList.test.tsx
app/components/UI/HardwareWallet/AccountSelector/hooks.tsx
app/components/UI/LedgerModals/LedgerConfirmationModal.tsx
app/components/UI/LedgerModals/LedgerTransactionModal.tsx
app/components/UI/Ramp/Aggregator/Views/OrderDetails/OrderDetails.tsx
app/components/UI/Ramp/Aggregator/components/ErrorView.tsx
app/components/UI/Ramp/Aggregator/hooks/useSDKMethod.ts
app/components/UI/Ramp/Deposit/Views/BankDetails/BankDetails.tsx
app/components/UI/Ramp/Deposit/Views/DepositOrderDetails/DepositOrderDetails.tsx
app/components/UI/Ramp/Deposit/hooks/useDepositSdkMethod.ts
app/components/UI/Ramp/Deposit/sdk/index.test.tsx
app/components/UI/Ramp/Deposit/sdk/index.tsx
app/components/UI/SimulationDetails/useSimulationMetrics.ts
app/components/UI/Stake/hooks/usePoolStakedDeposit/index.ts
app/components/UI/Stake/sdk/stakeSdkProvider.test.tsx
app/components/UI/Swaps/QuotesView.js
app/components/UI/Swaps/components/ApprovalTransactionEditionModal.js
app/components/UI/Swaps/index.js
app/components/UI/Tokens/TokenList/TokenListItem/index.tsx
app/components/Views/AddAsset/AddAsset.tsx
app/components/Views/ConnectHardware/SelectHardware/index.tsx
app/components/Views/ImportFromSecretRecoveryPhrase/index.js
app/components/Views/LedgerConnect/Scan.tsx
app/components/Views/LedgerConnect/index.tsx
app/components/Views/Login/index.tsx
app/components/Views/ManualBackupStep1/index.js
app/components/Views/NftDetails/NftDetails.tsx
app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
app/components/Views/Settings/DeveloperOptions/index.tsx
app/components/Views/Settings/ExperimentalSettings/index.tsx
app/components/Views/Wallet/index.tsx
app/components/Views/confirmations/hooks/metrics/useConfirmationLocation.ts
app/components/Views/confirmations/hooks/useGetTokenStandardAndDetails.ts
app/components/hooks/Ledger/useBluetoothDevices.ts
app/components/hooks/useAccounts/useAccounts.ts
app/components/hooks/useAddressBalance/useAddressBalance.ts
app/components/hooks/useAsyncResult.ts
app/components/hooks/useBluetoothPermissions.ts
app/components/hooks/useEndTraceOnMount.ts
app/components/hooks/usePolling.ts
app/components/hooks/useTokenBalance.tsx
### Scenario
_No response_
### Design
_No response_
### Technical Details
_No response_
### Threat Modeling Framework
_No response_
### Acceptance Criteria
_No response_
### Stakeholder review needed before the work gets merged
- [ ] Engineering (needed in most cases)
- [ ] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)
### References
_No response_
Contributor guide
Research direction
Start with the listed TypeScript and JavaScript components and the ESLint configuration, then inspect the 76 reported react-compiler/react-compiler errors. Resolve the disablements across the listed files and make the rule an error rather than a warning; done means the affected lint errors are addressed and the checks pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- eslint, javascript, react, typescript
- Domain
- frontend, tooling
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100