From 45381fe311b0de36e72841b11b7d88254454d895 Mon Sep 17 00:00:00 2001 From: Gaurav Goel Date: Fri, 16 Jan 2026 14:14:58 +0700 Subject: [PATCH 1/3] import SRP continue button and keyboard changes added --- .../UI/SrpInputGrid/SrpInputGrid.types.ts | 6 + .../__snapshots__/index.test.tsx.snap | 34 ++++++ app/components/UI/SrpInputGrid/index.test.tsx | 2 +- app/components/UI/SrpInputGrid/index.tsx | 28 +++-- .../__snapshots__/index.test.tsx.snap | 107 ++++++++++-------- .../ImportFromSecretRecoveryPhrase/index.js | 34 ++++-- .../index.test.tsx | 21 ++-- .../ImportFromSecretRecoveryPhrase/styles.ts | 9 ++ .../index.test.tsx | 37 +++--- .../ImportNewSecretRecoveryPhrase/index.tsx | 36 +++--- .../ImportNewSecretRecoveryPhrase/styles.ts | 9 ++ 11 files changed, 205 insertions(+), 118 deletions(-) diff --git a/app/components/UI/SrpInputGrid/SrpInputGrid.types.ts b/app/components/UI/SrpInputGrid/SrpInputGrid.types.ts index cfd559604f0..985c6939459 100644 --- a/app/components/UI/SrpInputGrid/SrpInputGrid.types.ts +++ b/app/components/UI/SrpInputGrid/SrpInputGrid.types.ts @@ -48,4 +48,10 @@ export interface SrpInputGridProps { * Callback when the current input word changes */ onCurrentWordChange?: (word: string) => void; + + /** + * Whether to auto focus the first input on mount + * @default true + */ + autoFocus?: boolean; } diff --git a/app/components/UI/SrpInputGrid/__snapshots__/index.test.tsx.snap b/app/components/UI/SrpInputGrid/__snapshots__/index.test.tsx.snap index 193265368c2..f393bdfd389 100644 --- a/app/components/UI/SrpInputGrid/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/SrpInputGrid/__snapshots__/index.test.tsx.snap @@ -93,7 +93,9 @@ exports[`SrpInputGrid renders with custom uniqueId 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={false} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" onBlur={[Function]} @@ -104,6 +106,7 @@ exports[`SrpInputGrid renders with custom uniqueId 1`] = ` onSubmitEditing={[Function]} placeholder="" placeholderTextColor="#b7bbc8" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -187,7 +190,9 @@ exports[`SrpInputGrid renders with custom uniqueId 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={true} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" multiline={true} @@ -196,8 +201,10 @@ exports[`SrpInputGrid renders with custom uniqueId 1`] = ` onFocus={[Function]} onKeyPress={[Function]} onSelectionChange={[Function]} + onSubmitEditing={[Function]} placeholder="Enter your Secret Recovery Phrase" placeholderTextColor="#686e7d" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -345,7 +352,9 @@ exports[`SrpInputGrid renders with disabled state 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={false} + blurOnSubmit={false} editable={false} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" onBlur={[Function]} @@ -356,6 +365,7 @@ exports[`SrpInputGrid renders with disabled state 1`] = ` onSubmitEditing={[Function]} placeholder="" placeholderTextColor="#b7bbc8" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -439,7 +449,9 @@ exports[`SrpInputGrid renders with disabled state 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={true} + blurOnSubmit={false} editable={false} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" multiline={true} @@ -448,8 +460,10 @@ exports[`SrpInputGrid renders with disabled state 1`] = ` onFocus={[Function]} onKeyPress={[Function]} onSelectionChange={[Function]} + onSubmitEditing={[Function]} placeholder="Enter your Secret Recovery Phrase" placeholderTextColor="#686e7d" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -597,7 +611,9 @@ exports[`SrpInputGrid renders with empty seed phrase 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={false} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" onBlur={[Function]} @@ -608,6 +624,7 @@ exports[`SrpInputGrid renders with empty seed phrase 1`] = ` onSubmitEditing={[Function]} placeholder="" placeholderTextColor="#b7bbc8" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -691,7 +708,9 @@ exports[`SrpInputGrid renders with empty seed phrase 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={true} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" multiline={true} @@ -700,8 +719,10 @@ exports[`SrpInputGrid renders with empty seed phrase 1`] = ` onFocus={[Function]} onKeyPress={[Function]} onSelectionChange={[Function]} + onSubmitEditing={[Function]} placeholder="Enter your Secret Recovery Phrase" placeholderTextColor="#686e7d" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -884,7 +905,9 @@ exports[`SrpInputGrid renders with multiple words 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={false} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" onBlur={[Function]} @@ -895,6 +918,7 @@ exports[`SrpInputGrid renders with multiple words 1`] = ` onSubmitEditing={[Function]} placeholder="" placeholderTextColor="#b7bbc8" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -1014,7 +1038,9 @@ exports[`SrpInputGrid renders with multiple words 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={false} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" onBlur={[Function]} @@ -1025,6 +1051,7 @@ exports[`SrpInputGrid renders with multiple words 1`] = ` onSubmitEditing={[Function]} placeholder="" placeholderTextColor="#b7bbc8" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -1144,7 +1171,9 @@ exports[`SrpInputGrid renders with multiple words 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={false} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" onBlur={[Function]} @@ -1155,6 +1184,7 @@ exports[`SrpInputGrid renders with multiple words 1`] = ` onSubmitEditing={[Function]} placeholder="" placeholderTextColor="#b7bbc8" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -1239,7 +1269,9 @@ exports[`SrpInputGrid renders with multiple words 1`] = ` autoComplete="off" autoCorrect={false} autoFocus={false} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" multiline={true} @@ -1248,8 +1280,10 @@ exports[`SrpInputGrid renders with multiple words 1`] = ` onFocus={[Function]} onKeyPress={[Function]} onSelectionChange={[Function]} + onSubmitEditing={[Function]} placeholder="Enter your Secret Recovery Phrase" placeholderTextColor="#686e7d" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ diff --git a/app/components/UI/SrpInputGrid/index.test.tsx b/app/components/UI/SrpInputGrid/index.test.tsx index 253ef4356b5..78ba232baeb 100644 --- a/app/components/UI/SrpInputGrid/index.test.tsx +++ b/app/components/UI/SrpInputGrid/index.test.tsx @@ -133,7 +133,7 @@ describe('SrpInputGrid', () => { expect(mockOnSeedPhraseChange).toHaveBeenCalled(); }); - it('handles enter key press to move to next input', () => { + it('dismisses keyboard on submit editing', () => { const seedPhrase = ['wallet', '']; const { getByTestId } = renderWithProvider( , diff --git a/app/components/UI/SrpInputGrid/index.tsx b/app/components/UI/SrpInputGrid/index.tsx index bec3ed8f9a4..7901f066a7c 100644 --- a/app/components/UI/SrpInputGrid/index.tsx +++ b/app/components/UI/SrpInputGrid/index.tsx @@ -58,6 +58,7 @@ const SrpInputGrid = React.forwardRef( uniqueId = uuidv4(), disabled = false, onCurrentWordChange, + autoFocus: autoFocusProp = true, }, ref, ) => { @@ -279,16 +280,6 @@ const SrpInputGrid = React.forwardRef( [seedPhrase, onSeedPhraseChange], ); - const handleEnterKeyPress = useCallback( - (index: number) => { - handleSeedPhraseChangeAtIndexRef.current( - `${seedPhrase[index]}${SPACE_CHAR}`, - index, - ); - }, - [seedPhrase], - ); - // Validate seed phrase and show errors const error = useMemo(() => { const hasWordErrors = Object.values(errorWordIndexes).some(Boolean); @@ -406,9 +397,7 @@ const SrpInputGrid = React.forwardRef( ? handleSeedPhraseChange(text) : handleSeedPhraseChangeAtIndex(text, index); }} - onSubmitEditing={() => { - handleEnterKeyPress(index); - }} + onSubmitEditing={() => Keyboard.dismiss()} placeholder="" placeholderTextColor={colors.text.muted} size={TextFieldSize.Md} @@ -433,11 +422,16 @@ const SrpInputGrid = React.forwardRef( autoCapitalize="none" testID={`${testIdPrefix}_${index}`} keyboardType="visible-password" + returnKeyType="done" + blurOnSubmit={false} + enablesReturnKeyAutomatically={false} autoCorrect={false} textContentType="none" spellCheck={false} importantForAutofill="no" - autoFocus={index === nextSeedPhraseInputFocusedIndex} + autoFocus={ + autoFocusProp && index === nextSeedPhraseInputFocusedIndex + } onKeyPress={(e) => handleKeyPress(e, index)} isDisabled={disabled} /> @@ -472,11 +466,15 @@ const SrpInputGrid = React.forwardRef( autoCapitalize="none" testID={testIdPrefix} keyboardType="visible-password" + returnKeyType="done" + blurOnSubmit={false} + enablesReturnKeyAutomatically={false} + onSubmitEditing={() => Keyboard.dismiss()} autoCorrect={false} textContentType="none" spellCheck={false} importantForAutofill="no" - autoFocus={isFirstInput} + autoFocus={autoFocusProp && isFirstInput} multiline onKeyPress={(e) => handleKeyPress(e, 0)} isDisabled={disabled} diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap b/app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap index 12fb1631f36..ee5c1f0ed53 100644 --- a/app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap @@ -581,7 +581,9 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh autoComplete="off" autoCorrect={false} autoFocus={false} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" onBlur={[Function]} @@ -592,6 +594,7 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh onSubmitEditing={[Function]} placeholder="" placeholderTextColor="#b7bbc8" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -674,8 +677,10 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh autoCapitalize="none" autoComplete="off" autoCorrect={false} - autoFocus={true} + autoFocus={false} + blurOnSubmit={false} editable={true} + enablesReturnKeyAutomatically={false} importantForAutofill="no" keyboardType="visible-password" multiline={true} @@ -684,8 +689,10 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh onFocus={[Function]} onKeyPress={[Function]} onSelectionChange={[Function]} + onSubmitEditing={[Function]} placeholder="Add a space between each word and make sure no one is watching." placeholderTextColor="#686e7d" + returnKeyType="done" showSoftInputOnFocus={true} spellCheck={false} style={ @@ -738,59 +745,59 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh Paste - - - - Continue - - - + + + + Continue + + + diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js index 17d8c301c9e..c7df6c62a45 100644 --- a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js +++ b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js @@ -618,18 +618,8 @@ const ImportFromSecretRecoveryPhrase = ({ placeholderText={strings('import_from_seed.srp_placeholder')} uniqueId={uniqueId} onCurrentWordChange={setCurrentInputWord} + autoFocus={false} /> - -