fix(mobile): Copy/paste mnemonic improvements

packages/mobile/android/app/build.gradle

@@ -92,7 +92,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 433
-        versionName "4.3.1"
+        versionName "4.4.0"
         missingDimensionStrategy 'react-native-camera', 'general'
         missingDimensionStrategy 'store', 'play'
     }

packages/mobile/ios/ton_keeper.xcodeproj/project.pbxproj

@@ -1298,7 +1298,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 4.3.1;
+				MARKETING_VERSION = 4.4.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -1332,7 +1332,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 4.3.1;
+				MARKETING_VERSION = 4.4.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

packages/mobile/src/screens/BackupPhraseScreen/BackupPhraseScreen.tsx

@@ -1,12 +1,59 @@
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Button, Screen, Spacer, Text, copyText } from '@tonkeeper/uikit';
+import { Button, Screen, Spacer, Text, copyText, Steezy } from '@tonkeeper/uikit';
 import { useParams } from '@tonkeeper/router/src/imperative';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ViewStyle } from 'react-native';
 import { memo, useCallback, useMemo } from 'react';
 import { useNavigation } from '@tonkeeper/router';
 import { t } from '@tonkeeper/shared/i18n';
 import { useWalletSetup } from '@tonkeeper/shared/hooks';
 import { MainStackRouteNames } from '$navigation';
+import { deviceHeight } from '@tonkeeper/uikit';
+import { TTextTypes } from '@tonkeeper/uikit/src/components/Text/TextStyles';
+import {
+  CreatedStyles,
+  ExtractMediaVars,
+} from '@bogoslavskiy/react-native-steezy/dist/types';
+
+export interface Sizes {
+  title: TTextTypes;
+  caption: TTextTypes;
+  index: TTextTypes;
+  word: TTextTypes;
+  styles: CreatedStyles<
+    StyleSheet.NamedStyles<{ line: ViewStyle }> & ExtractMediaVars<{ isTablet: unknown }>
+  >;
+}
+
+const defaultSizes: Sizes = {
+  title: 'h2',
+  caption: 'body1',
+  index: 'body2',
+  word: 'body1',
+  styles: Steezy.create({
+    line: {
+      width: 151,
+      flexDirection: 'row',
+      marginBottom: 8,
+      height: 24,
+    },
+  }),
+};
+
+const smallSizes: Sizes = {
+  title: 'h3',
+  caption: 'body2',
+  index: 'body3',
+  word: 'body2',
+  styles: Steezy.create({
+    line: {
+      width: 151,
+      flexDirection: 'row',
+      marginBottom: 4,
+      height: 18,
+    },
+  }),
+};
+
+const sizesConfig = deviceHeight >= 650 ? defaultSizes : smallSizes;
 
 function getRandIndexes(length: number, indexes: number[] = []) {
   if (indexes.length === length) {
@@ -23,7 +70,6 @@ function getRandIndexes(length: number, indexes: number[] = []) {
 
 export const BackupPhraseScreen = memo(() => {
   const params = useParams<{ mnemonic: string; isBackupAgain?: boolean }>();
-  const safeArea = useSafeAreaInsets();
   const nav = useNavigation();
 
   const mnemonic = params.mnemonic!;
@@ -43,11 +89,11 @@ export const BackupPhraseScreen = memo(() => {
       <Screen.Header />
       <Screen.ScrollView>
         <View style={styles.container}>
-          <Text type="h2" textAlign="center">
+          <Text type={sizesConfig.title} textAlign="center">
             {t('recovery_phrase.title')}
           </Text>
           <Spacer y={4} />
-          <Text type="body1" color="textSecondary" textAlign="center">
+          <Text type={sizesConfig.caption} color="textSecondary" textAlign="center">
             {t('recovery_phrase.caption')}
           </Text>
           <Spacer y={16} />
@@ -56,21 +102,32 @@ export const BackupPhraseScreen = memo(() => {
             <View style={styles.columns}>
               <View style={styles.leftColumn}>
                 {leftColumn.map((word, index) => (
-                  <View style={styles.line} key={`${word}-${index}`}>
-                    <Text type="body2" color="textSecondary" style={styles.num}>
+                  <View style={sizesConfig.styles.line.static} key={`${word}-${index}`}>
+                    <Text
+                      type={sizesConfig.index}
+                      color="textSecondary"
+                      style={styles.num}
+                    >
                       {index + 1}.
                     </Text>
-                    <Text type="body1">{word}</Text>
+                    <Text type={sizesConfig.word}>{word}</Text>
                   </View>
                 ))}
               </View>
               <View>
                 {rightColumn.map((word, index) => (
-                  <View style={styles.line} key={`${word}-${index + 1 + 12}`}>
-                    <Text type="body2" color="textSecondary" style={styles.num}>
+                  <View
+                    style={sizesConfig.styles.line.static}
+                    key={`${word}-${index + 1 + 12}`}
+                  >
+                    <Text
+                      type={sizesConfig.index}
+                      color="textSecondary"
+                      style={styles.num}
+                    >
                       {index + 1 + 12}.
                     </Text>
-                    <Text type="body1">{word}</Text>
+                    <Text type={sizesConfig.word}>{word}</Text>
                   </View>
                 ))}
               </View>

packages/mobile/src/shared/components/ImportWalletForm/ImportWalletForm.tsx

@@ -1,29 +1,33 @@
 import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
 import Animated, {
+  FadeOut,
   useAnimatedScrollHandler,
+  useAnimatedStyle,
   useSharedValue,
+  withTiming,
 } from 'react-native-reanimated';
 import { TapGestureHandler } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch } from 'react-redux';
 
 import { deviceHeight, isAndroid, ns, parseLockupConfig } from '$utils';
 import { InputItem } from './InputItem';
-import { Button, Input, NavBarHelper, Text } from '$uikit';
+import { Input, NavBarHelper, Text, Button } from '$uikit';
 import * as S from './ImportWalletForm.style';
 import { useReanimatedKeyboardHeight } from '$hooks/useKeyboardHeight';
 import { ImportWalletFormProps } from './ImportWalletForm.interface';
 import { useInputsRegistry } from './useInputRegistry';
 import { WordHintsPopup, WordHintsPopupRef } from './WordHintsPopup';
-import { Keyboard } from 'react-native';
+import { Keyboard, KeyboardAvoidingView } from 'react-native';
 import { wordlist } from '$libs/Ton/mnemonic/wordlist';
 import { Toast } from '$store';
 import { t } from '@tonkeeper/shared/i18n';
+import { Steezy, Button as ButtonNew, View } from '@tonkeeper/uikit';
+import Clipboard from '@react-native-community/clipboard';
 
 export const ImportWalletForm: FC<ImportWalletFormProps> = (props) => {
   const { onWordsFilled } = props;
 
-
   const { bottom: bottomInset } = useSafeAreaInsets();
   const dispatch = useDispatch();
   const inputsRegistry = useInputsRegistry();
@@ -36,6 +40,7 @@ export const ImportWalletForm: FC<ImportWalletFormProps> = (props) => {
   const [isConfigInputShown, setConfigInputShown] = useState(false);
   const [config, setConfig] = useState('');
   const [isRestoring, setRestoring] = useState(false);
+  const [hasTouchedInputs, setHasTouchedInputs] = useState(false);
 
   const deferredScrollToInput = useRef<((offset: number) => void) | null>(null);
   const { keyboardHeight } = useReanimatedKeyboardHeight({
@@ -57,25 +62,42 @@ export const ImportWalletForm: FC<ImportWalletFormProps> = (props) => {
     setConfig(text);
   }, []);
 
-  const handleMultipleWords = useCallback((index: number, text: string) => {
-    const words = text
-      .split(' ')
-      .map((word) => word.trim())
-      .filter((word) => word.length > 0);
+  const handleMultipleWords = useCallback(
+    (index: number, text: string) => {
+      if (!hasTouchedInputs) {
+        setHasTouchedInputs(true);
+      }
+      const words = text
+        .replace(/\r\n|\r|\n/g, ' ')
+        .split(' ')
+        .map((word) => word.trim())
+        .filter((word) => word.length > 0);
 
-    let cursor = index;
-    for (const word of words) {
-      inputsRegistry.getRef(cursor)?.setValue(word);
-      cursor += 1;
-      if (cursor === 24) {
-        break;
+      let cursor = index;
+      for (const word of words) {
+        inputsRegistry.getRef(cursor)?.setValue(word);
+        cursor += 1;
+        if (cursor === 24) {
+          break;
+        }
       }
-    }
 
-    if (cursor > 0) {
-      inputsRegistry.getRef(cursor - 1)?.focus();
+      if (cursor > 0) {
+        inputsRegistry.getRef(cursor - 1)?.focus();
+      }
+    },
+    [hasTouchedInputs, inputsRegistry],
+  );
+
+  const handlePasteButton = useCallback(async () => {
+    if (!hasTouchedInputs) {
+      setHasTouchedInputs(true);
     }
-  }, []);
+    const maybePhrase = await Clipboard.getString();
+    if (maybePhrase.replace(/\r\n|\r|\n/g, ' ').split(' ').length === 24) {
+      handleMultipleWords(0, maybePhrase);
+    }
+  }, [hasTouchedInputs, handleMultipleWords]);
 
   const handleSpace = useCallback((index: number) => {
     if (index === 24) {
@@ -185,6 +207,9 @@ export const ImportWalletForm: FC<ImportWalletFormProps> = (props) => {
 
   const handleChangeText = useCallback(
     (index: number) => (text: string) => {
+      if (!hasTouchedInputs) {
+        setHasTouchedInputs(true);
+      }
       const overlap = 10;
       const offsetTop = inputsRegistry.getPosition(index) + S.INPUT_HEIGHT - overlap;
       const contentWidth = isAndroid ? 0 : inputsRegistry.getContentWidth(index);
@@ -201,7 +226,7 @@ export const ImportWalletForm: FC<ImportWalletFormProps> = (props) => {
         },
       });
     },
-    [],
+    [hasTouchedInputs],
   );
 
   const scrollHandler = useAnimatedScrollHandler({
@@ -269,6 +294,29 @@ export const ImportWalletForm: FC<ImportWalletFormProps> = (props) => {
           </Button>
         </S.ButtonWrap>
       </Animated.ScrollView>
+      <KeyboardAvoidingView>
+        <View style={[styles.pasteButtonContainer, { bottom: bottomInset + 16 }]}>
+          {!hasTouchedInputs && (
+            <Animated.View exiting={FadeOut.duration(200)}>
+              <ButtonNew
+                onPress={handlePasteButton}
+                color="tertiary"
+                size="medium"
+                title={t('paste')}
+              />
+            </Animated.View>
+          )}
+        </View>
+      </KeyboardAvoidingView>
     </>
   );
 };
+
+const styles = Steezy.create({
+  pasteButtonContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+});

packages/mobile/src/shared/components/ImportWalletForm/InputItem.tsx

@@ -52,6 +52,8 @@ export const InputItem = forwardRef<InputItemRef, InputItemProps>((props, ref) =
   const handleChangeText = useCallback(
     (text) => {
       let newText = text.trim();
+      newText = newText.replace(/\r\n|\r|\n/g, ' ');
+
       if (newText.split(' ').length > 1) {
         onMultipleWords(index, newText);
       } else if (text.slice(-1) === ' ') {