From 076fa31e5e88371279bed33d181fc1bd2768b708 Mon Sep 17 00:00:00 2001 From: Kylan Hurt Date: Fri, 18 Oct 2024 14:54:15 -0400 Subject: [PATCH] fix: Migrate Login view to use design system components (and fix blur error) (#11551) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** The purpose of this task is to fix an error that keeps occurring where a `TextField` ref is `null` when the `blur` method on it is executed. ## **Related issues** Fixes: https://github.com/MetaMask/metamask-mobile/issues/10805 ## **Manual testing steps** The best way to make sure this bug is fixed will be to check the error logs in Sentry. ## **Screenshots/Recordings** n/a ## **Pre-merge author checklist** - [X] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [X] I've completed the PR template to the best of my ability - [X] I’ve included tests if applicable - [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [X] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../Form/TextField/foundation/Input/Input.tsx | 4 +- .../Input/__snapshots__/Input.test.tsx.snap | 2 +- .../Ramp/Views/Settings/ActivationKeyForm.tsx | 1 + .../ActivationKeyForm.test.tsx.snap | 2 +- .../Views/EditAccountName/EditAccountName.tsx | 2 + .../EditAccountName.test.tsx.snap | 4 +- .../Login/__snapshots__/index.test.tsx.snap | 422 +++++++++++++++++- app/components/Views/Login/index.js | 53 ++- app/components/Views/Login/index.test.tsx | 22 +- 9 files changed, 435 insertions(+), 77 deletions(-) diff --git a/app/component-library/components/Form/TextField/foundation/Input/Input.tsx b/app/component-library/components/Form/TextField/foundation/Input/Input.tsx index facc8e6e6fd..0a9054e2a11 100644 --- a/app/component-library/components/Form/TextField/foundation/Input/Input.tsx +++ b/app/component-library/components/Form/TextField/foundation/Input/Input.tsx @@ -21,7 +21,7 @@ const Input: React.FC = ({ isReadonly = false, onBlur, onFocus, - autoFocus = false, + autoFocus = true, ...props }) => { const [isFocused, setIsFocused] = useState(autoFocus); @@ -64,7 +64,7 @@ const Input: React.FC = ({ {...props} style={styles.base} editable={!isDisabled && !isReadonly} - autoFocus + autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler} /> diff --git a/app/component-library/components/Form/TextField/foundation/Input/__snapshots__/Input.test.tsx.snap b/app/component-library/components/Form/TextField/foundation/Input/__snapshots__/Input.test.tsx.snap index 99a88ffc241..fd6fedfeaa4 100644 --- a/app/component-library/components/Form/TextField/foundation/Input/__snapshots__/Input.test.tsx.snap +++ b/app/component-library/components/Form/TextField/foundation/Input/__snapshots__/Input.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Input should render correctly 1`] = ` style={ { "backgroundColor": "#ffffff", - "borderColor": "transparent", + "borderColor": "#0376c9", "borderWidth": 1, "color": "#141618", "fontFamily": "Euclid Circular B", diff --git a/app/components/UI/Ramp/Views/Settings/ActivationKeyForm.tsx b/app/components/UI/Ramp/Views/Settings/ActivationKeyForm.tsx index 4ae7ad7fe15..e5969b0f072 100644 --- a/app/components/UI/Ramp/Views/Settings/ActivationKeyForm.tsx +++ b/app/components/UI/Ramp/Views/Settings/ActivationKeyForm.tsx @@ -116,6 +116,7 @@ function ActivationKeyForm() { returnKeyType={'done'} onSubmitEditing={handleSubmit} isReadonly={Boolean(key)} + autoFocus /> diff --git a/app/components/UI/Ramp/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap b/app/components/UI/Ramp/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap index bd9145f787a..0d6c3a48b2c 100644 --- a/app/components/UI/Ramp/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap +++ b/app/components/UI/Ramp/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap @@ -536,7 +536,7 @@ exports[`AddActivationKey renders correctly 1`] = ` { "alignItems": "center", "backgroundColor": "#ffffff", - "borderColor": "#bbc0c5", + "borderColor": "#0376c9", "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", diff --git a/app/components/Views/EditAccountName/EditAccountName.tsx b/app/components/Views/EditAccountName/EditAccountName.tsx index 8ec063648a7..d6b4a043e95 100644 --- a/app/components/Views/EditAccountName/EditAccountName.tsx +++ b/app/components/Views/EditAccountName/EditAccountName.tsx @@ -124,6 +124,7 @@ const EditAccountName = () => { value={accountName} onChangeText={onChangeName} testID={EditAccountNameSelectorIDs.ACCOUNT_NAME_INPUT} + autoFocus /> @@ -137,6 +138,7 @@ const EditAccountName = () => { selectedInternalAccount?.address, 'mid', )} + autoFocus /> ) : null} diff --git a/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap b/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap index b2dc81d174f..5de9ca67544 100644 --- a/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap +++ b/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap @@ -47,7 +47,7 @@ exports[`EditAccountName should render correctly 1`] = ` { "alignItems": "center", "backgroundColor": "#ffffff", - "borderColor": "#bbc0c5", + "borderColor": "#0376c9", "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", @@ -120,7 +120,7 @@ exports[`EditAccountName should render correctly 1`] = ` { "alignItems": "center", "backgroundColor": "#ffffff", - "borderColor": "#bbc0c5", + "borderColor": "#0376c9", "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", diff --git a/app/components/Views/Login/__snapshots__/index.test.tsx.snap b/app/components/Views/Login/__snapshots__/index.test.tsx.snap index 94ce77ff11d..df38946a89c 100644 --- a/app/components/Views/Login/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/Login/__snapshots__/index.test.tsx.snap @@ -1,32 +1,406 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Login should render correctly 1`] = ` - - - + + + + + + An error occurred + + + Your information can't be shown. Don’t worry, your wallet and funds are safe. + + + + + View: Login +TypeError: (0 , _reactNativeDeviceInfo.getTotalMemorySync) is not a function + + + + + + +  + + + Try again + + + + + + + Please report this issue so we can fix it: + + + + + +  + + + Take a screenshot of this screen. + + + +  + + + + Copy + + + the error message to clipboard. + + + +  + + + Submit a ticket + + + here. + + + Please include the error message and the screenshot. + + + +  + + + Send us a bug report + + + here. + + + Please include details about what happened. + + + + If this error persists, + + + save your Secret Recovery Phrase + + + & re-install the app. Note: you can NOT restore your wallet without your Secret Recovery Phrase. + + + + + `; diff --git a/app/components/Views/Login/index.js b/app/components/Views/Login/index.js index 488804f7a36..59fae180dfd 100644 --- a/app/components/Views/Login/index.js +++ b/app/components/Views/Login/index.js @@ -13,13 +13,11 @@ import { TouchableOpacity, } from 'react-native'; import Text, { - TextColor, TextVariant, } from '../../../component-library/components/Texts/Text'; import StorageWrapper from '../../../store/storage-wrapper'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; -import Button from '@metamask/react-native-button'; -import StyledButton from '../../UI/StyledButton'; +import Button, { ButtonSize, ButtonVariants, ButtonWidthTypes } from '../../../component-library/components/Buttons/Button'; import { fontStyles } from '../../../styles/common'; import { strings } from '../../../../locales/i18n'; import FadeOutOverlay from '../../UI/FadeOutOverlay'; @@ -31,7 +29,6 @@ import { passcodeType, updateAuthTypeStorageFlags, } from '../../../util/authentication'; -import { OutlinedTextField } from 'react-native-material-textfield'; import { BiometryButton } from '../../UI/BiometryButton'; import Logger from '../../../util/Logger'; import { @@ -58,6 +55,9 @@ import { LoginViewSelectors } from '../../../../e2e/selectors/LoginView.selector import { withMetricsAwareness } from '../../../components/hooks/useMetrics'; import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics'; import { downloadStateLogs } from '../../../util/logs'; +import TextField, { TextFieldSize } from '../../../component-library/components/Form/TextField'; +import Label from '../../../component-library/components/Form/Label'; +import HelpText, { HelpTextSeverity } from '../../../component-library/components/Form/HelpText'; const deviceHeight = Device.getDeviceHeight(); const breakPoint = deviceHeight < 700; @@ -107,11 +107,10 @@ const createStyles = (colors) => }, footer: { marginVertical: 40, + alignItems: 'center' }, goBack: { marginVertical: 14, - color: colors.primary.default, - ...fontStyles.normal, }, biometrics: { flexDirection: 'row', @@ -128,12 +127,6 @@ const createStyles = (colors) => biometrySwitch: { flex: 0, }, - input: { - ...fontStyles.normal, - fontSize: 16, - paddingTop: 2, - color: colors.text.default, - }, cant: { width: 280, alignSelf: 'center', @@ -543,14 +536,14 @@ class Login extends PureComponent { {strings('login.title')} - {strings('login.password')} - - + ( + endAccessory={ @@ -577,27 +570,31 @@ class Login extends PureComponent { {this.renderSwitch()} {!!this.state.error && ( - {this.state.error} - + )} - - {this.state.loading ? ( + + + label={strings('login.reset_wallet')} + /> diff --git a/app/components/Views/Login/index.test.tsx b/app/components/Views/Login/index.test.tsx index 07938c54984..7d6b922eb7c 100644 --- a/app/components/Views/Login/index.test.tsx +++ b/app/components/Views/Login/index.test.tsx @@ -1,28 +1,12 @@ import React from 'react'; -import { shallow } from 'enzyme'; import Login from './'; -import configureMockStore from 'redux-mock-store'; -import { Provider } from 'react-redux'; -import { backgroundState } from '../../../util/test/initial-root-state'; - -const mockStore = configureMockStore(); -const initialState = { - engine: { - backgroundState, - }, - user: { - passwordSet: true, - }, -}; -const store = mockStore(initialState); +import renderWithProvider from '../../../util/test/renderWithProvider'; describe('Login', () => { it('should render correctly', () => { - const wrapper = shallow( - + const { toJSON } = renderWithProvider( - , ); - expect(wrapper).toMatchSnapshot(); + expect(toJSON()).toMatchSnapshot(); }); });