fix: dismiss keyboard on MutiStepScreenContainer and BlurScreenContai…

…ner (#999) * fix: hiding keyboard on clicking on screen other than input, added focus on input function on click on seed adding section * fix: added keyboard vertical offset * fix: removed KeyboardAvoidingView and added ScrollView * fix: added scrollview wrapper in multistepscreen container and blurscreen container * refactor: removed view in blurscreen conttainer children wrapper * refactor: replaced height with flex 1 * removed unused code
TERITORI · Feb 28, 2024 · be65adf · be65adf
1 parent ccd37e0
commit be65adf
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 100 deletions.
diff --git a/packages/screens/Mini/layout/BlurScreenContainer.tsx b/packages/screens/Mini/layout/BlurScreenContainer.tsx
@@ -8,6 +8,7 @@ import {
   PanResponder,
   Animated,
   GestureResponderEvent,
+  ScrollView,
 } from "react-native";
 
 import chevronSVG from "../../../../assets/icons/chevron-left.svg";
@@ -165,7 +166,15 @@ export const BlurScreenContainer = ({
           </View>
         )}
 
-        <View style={{ flex: 1, backgroundColor: background }}>{children}</View>
+        <ScrollView
+          scrollEnabled={false}
+          contentContainerStyle={{
+            backgroundColor: background,
+            flex: 1,
+          }}
+        >
+          {children}
+        </ScrollView>
       </Animated.View>
     </SafeAreaView>
   );

diff --git a/packages/screens/Mini/layout/MultiStepScreenContainer.tsx b/packages/screens/Mini/layout/MultiStepScreenContainer.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import { SafeAreaView, View } from "react-native";
+import { SafeAreaView, ScrollView, View } from "react-native";
 
 import chevronLeftSVG from "../../../../assets/icons/chevron-left.svg";
 import teritoriSVG from "../../../../assets/icons/teritori-white.svg";
@@ -54,7 +54,9 @@ export default function MultiStepScreenContainer({
         <SpacerColumn size={2} />
         <ProgressLine percent={screenPercentage} />
       </View>
-      {children}
+      <ScrollView scrollEnabled={false} style={{ flex: 1 }}>
+        {children}
+      </ScrollView>
     </SafeAreaView>
   );
 }
diff --git a/packages/screens/Wallet/Screens/ImportWallet.tsx b/packages/screens/Wallet/Screens/ImportWallet.tsx
@@ -1,13 +1,14 @@
 import { Secp256k1HdWallet } from "@cosmjs/amino";
-import React, { useState } from "react";
-import { TextInput, View } from "react-native";
+import React, { useRef, useState } from "react";
+import { TextInput, View, useWindowDimensions } from "react-native";
 import { useSelector } from "react-redux";
 
 import { CustomButton } from "../../Mini/components/Button/CustomButton";
 import Checkbox from "../../Mini/components/Checkbox/Checkbox";
 import MultiStepScreenContainer from "../../Mini/layout/MultiStepScreenContainer";
 
 import { BrandText } from "@/components/BrandText";
+import { CustomPressable } from "@/components/buttons/CustomPressable";
 import { SpacerColumn } from "@/components/spacer";
 import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork";
 import { mustGetCosmosNetwork } from "@/networks";
@@ -27,6 +28,7 @@ import { getNativeWallet, setMnemonic } from "@/utils/wallet/getNativeWallet";
 import { correctMnemonic } from "@/utils/wallet/seed";
 
 export const ImportWallet: ScreenFC<"ImportWallet"> = ({ navigation }) => {
+  const { height: windowHeight } = useWindowDimensions();
   const [localPhrase, setLocalPhrase] = useState<string | undefined>(undefined);
   const wallets = useSelector(selectAllWallets);
   const networkId = useSelectedNetworkId();
@@ -38,112 +40,122 @@ export const ImportWallet: ScreenFC<"ImportWallet"> = ({ navigation }) => {
     0,
   );
   const [isChecked, setIsChecked] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const focusInput = () => {
+    if (inputRef?.current) {
+      inputRef?.current?.focus();
+    }
+  };
 
   return (
     <MultiStepScreenContainer screenPercentage={25} enableBack>
       <SpacerColumn size={8} />
-      <View style={{ flex: 1, paddingHorizontal: layout.spacing_x2 }}>
-        <View style={{ flex: 1 }}>
-          <BrandText style={[fontSemibold28]}>
-            Import with Seed Phrase
-          </BrandText>
-          <BrandText
-            style={[
-              fontSemibold16,
-              {
-                color: neutral77,
-                marginTop: layout.spacing_x1,
-              },
-            ]}
-          >
-            Import an existing wallet with a 12 or 24-word seed phrase.
-          </BrandText>
+      <View style={{ flex: 1 }}>
+        <BrandText style={[fontSemibold28]}>Import with Seed Phrase</BrandText>
+        <BrandText
+          style={[
+            fontSemibold16,
+            {
+              color: neutral77,
+              marginTop: layout.spacing_x1,
+            },
+          ]}
+        >
+          Import an existing wallet with a 12 or 24-word seed phrase.
+        </BrandText>
 
-          <SpacerColumn size={5} />
-          <View
-            style={{
-              backgroundColor: neutral15,
-              borderRadius: 8,
-              width: "100%",
-              height: 160,
+        <SpacerColumn size={5} />
+        <CustomPressable
+          onPress={focusInput}
+          style={{
+            backgroundColor: neutral15,
+            borderRadius: 8,
+            width: "100%",
+            height: 160,
 
-              padding: layout.spacing_x1,
-              alignItems: "center",
-              borderWidth: 1,
-              borderColor: neutralA3,
-            }}
-          >
-            <TextInput
-              editable
-              multiline
-              numberOfLines={4}
-              onChangeText={(text) => {
-                setLocalPhrase(correctMnemonic(text));
-              }}
-              style={[fontSemibold16, { color: secondaryColor, width: "100%" }]}
-            />
-          </View>
-        </View>
+            padding: layout.spacing_x1,
+            alignItems: "center",
+            borderWidth: 1,
+            borderColor: neutralA3,
 
-        <View>
-          <Checkbox
-            isChecked={isChecked}
-            onPress={() => setIsChecked(true)}
-            value="item"
-            label="This phrase will only be stored on this device. Teritori can’t recover it for you."
-            labelStyle={[{ color: neutralA3, lineHeight: 22, flex: 1 }]}
-            type="circle"
-            size="md"
-            wrapperStyle={{
-              alignItems: "center",
-              borderRadius: layout.borderRadius,
-              backgroundColor: neutral22,
-              paddingVertical: layout.spacing_x1,
-              paddingHorizontal: layout.spacing_x2,
+            marginBottom: layout.spacing_x3,
+          }}
+        >
+          <TextInput
+            ref={inputRef}
+            editable
+            multiline
+            numberOfLines={4}
+            onChangeText={(text) => {
+              setLocalPhrase(correctMnemonic(text));
             }}
+            style={[fontSemibold16, { color: secondaryColor, width: "100%" }]}
           />
-          <SpacerColumn size={2} />
-          <CustomButton
-            onPress={(_, navigation) => {
-              console.log(localPhrase);
-              if (!localPhrase) {
-                return;
-              }
-              (async () => {
-                await setMnemonic(localPhrase, maxIndex + 1);
-                const native = await getNativeWallet("TORI", maxIndex + 1);
+        </CustomPressable>
+      </View>
+      <View
+        style={{
+          position: "absolute",
+          top: windowHeight - 270,
+          left: 0,
+          right: 0,
+        }}
+      >
+        <Checkbox
+          isChecked={isChecked}
+          onPress={() => setIsChecked(true)}
+          value="item"
+          label="This phrase will only be stored on this device. Teritori can’t recover it for you."
+          labelStyle={[{ color: neutralA3, lineHeight: 22, flex: 1 }]}
+          type="circle"
+          size="md"
+          wrapperStyle={{
+            alignItems: "center",
+            borderRadius: layout.borderRadius,
+            backgroundColor: neutral22,
+            paddingVertical: layout.spacing_x1,
+            paddingHorizontal: layout.spacing_x2,
+          }}
+        />
+        <SpacerColumn size={2} />
+        <CustomButton
+          onPress={(_, navigation) => {
+            console.log(localPhrase);
+            if (!localPhrase) {
+              return;
+            }
+            (async () => {
+              await setMnemonic(localPhrase, maxIndex + 1);
+              const native = await getNativeWallet("TORI", maxIndex + 1);
 
-                if (
-                  (native as unknown as string) === "bad mnemonic" ||
-                  !native
-                ) {
-                  alert("Invalid mnemonic");
-                  return;
-                }
-                setWallet(native);
-              })();
-              if (wallet) {
-                wallet.getAccounts().then((accounts) => {
-                  dispatch(
-                    addSelected({
-                      address: accounts[0].address,
-                      network: network.kind,
-                      provider: "native",
-                      name: `Account ${maxIndex + 1}`,
-                      networkId: "teritori",
-                      index: maxIndex + 1,
-                      hdPath: "m/44'/118'/0'/0/0",
-                    }),
-                  );
-                });
-                navigation.navigate("CreatePasswordWallet");
+              if ((native as unknown as string) === "bad mnemonic" || !native) {
+                alert("Invalid mnemonic");
+                return;
               }
-            }}
-            textStyle={{ textTransform: "uppercase" }}
-            title="Next"
-            isDisabled={!isChecked}
-          />
-        </View>
+              setWallet(native);
+            })();
+            if (wallet) {
+              wallet.getAccounts().then((accounts) => {
+                dispatch(
+                  addSelected({
+                    address: accounts[0].address,
+                    network: network.kind,
+                    provider: "native",
+                    name: `Account ${maxIndex + 1}`,
+                    networkId: "teritori",
+                    index: maxIndex + 1,
+                    hdPath: "m/44'/118'/0'/0/0",
+                  }),
+                );
+              });
+              navigation.navigate("CreatePasswordWallet");
+            }
+          }}
+          textStyle={{ textTransform: "uppercase" }}
+          title="Next"
+          isDisabled={!isChecked}
+        />
       </View>
     </MultiStepScreenContainer>
   );