added enter pin screen

src/components/Dialpad.tsx

@@ -1,8 +1,9 @@
-import { SafeAreaView, StyleSheet, Text, View, Dimensions } from "react-native";
+import { SafeAreaView, StyleSheet, Text, View, Dimensions, useColorScheme } from "react-native";
 import React, {FC,  useState } from "react";
 import DialpadKeypad from "./DialpadKeypad";
 import Button from "./Button";
 import DialpadPin from "./DialpadPin";
+import { Colors } from "react-native/Libraries/NewAppScreen";
 
  const { width, height } = Dimensions.get("window");
 
@@ -13,6 +14,7 @@ import DialpadPin from "./DialpadPin";
 };
 
 const Dialpad: FC<DialpadProps> = props => {
+  const isDarkMode = useColorScheme() === 'dark';
   const {prompt, onNextFunc, onCancelFunc} = props;
   const dialPadContent = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, "X"];
   const dialPadSize = width * 0.2;
@@ -20,7 +22,7 @@ const Dialpad: FC<DialpadProps> = props => {
   const [code, setCode] = useState([]);
   const pinLength = 6;
   const pinContainerSize = width / 2;
-  const pinSize = pinContainerSize / pinLength;
+  const pinSize = (pinContainerSize / pinLength) + 8;
 
   const updateCode = (item: never) => {
     if (item === "X") {
@@ -40,7 +42,7 @@ const Dialpad: FC<DialpadProps> = props => {
   }
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={[styles.container, {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter}]}>
      <View style={styles.textContainer}>
        <Text style={styles.pinText}>{prompt}</Text>
        <Text style={styles.pinSubText}>Enter your secure six-digit code</Text>
@@ -48,8 +50,8 @@ const Dialpad: FC<DialpadProps> = props => {
        <DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/>
      </View>
      <View style={styles.btnContainer}>
-     <Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
+     <Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='flex-start'></Button>
-     <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onNext} btnJustifyContent='center'></Button>
+     <Button label="Next" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={onNext} btnJustifyContent='flex-end'></Button>
      </View>
    </SafeAreaView>
   )};
@@ -62,23 +64,25 @@ const styles = StyleSheet.create({
   textContainer: {
     justifyContent: "center",
     alignItems: "center",
-    marginTop: 40,
+    marginTop: 30,
     position: "relative",
   },
   pinText: {
-    fontSize: 30,
+    fontSize: 28,
-    fontWeight: "medium",
+    fontFamily: 'Inconsolata Medium',
     color: "white",
   },
   pinSubText: {
     fontSize: 18,
-    fontWeight: "medium",
+    fontFamily: 'Inconsolata Regular',
     color: "white",
     marginVertical: 30,
   },
   btnContainer: {
     flexDirection: 'row',
-    width: '100%',
+    width: '74%',
+    marginLeft: '13%',
+    marginRight: '13%',
     alignItems: 'center'
   }
   });

src/components/DialpadKeypad.tsx

@@ -19,7 +19,7 @@ const  DialpadKeypad: FC<DialpadKeypadProps> = props => {
          <TouchableOpacity  disabled={item === ""} onPress={() => updateCodeFunc(item as never)}>
            <View style={[
                {
-                 backgroundColor: item === "" ? "transparent" : "#fff",
+                 borderWidth: item === "" ? 0 : 1,
                  width: dialPadSize,
                  height: dialPadSize,
                },
@@ -27,7 +27,7 @@ const  DialpadKeypad: FC<DialpadKeypadProps> = props => {
              ]}
            >
              {item === "X" ? (
-               <Icon name="delete" size={24} color="#3F1D38" />
+               <Icon name="delete" size={24} color="white" />
              ) : (
                <Text
                  style={[{ fontSize: dialPadTextSize }, styles.dialPadText]}
@@ -49,10 +49,11 @@ const styles = StyleSheet.create({
     margin: 15,
     borderRadius: 45,
     padding: 0,
-    borderColor: "transparent",
+    borderColor: "#199515",
   },
   dialPadText: {
-    color: "#3F1D38",
+    color: "white",
+    fontFamily: 'Inconsolata Regular'
   }
   });
 

src/components/DialpadPin.tsx

@@ -27,7 +27,7 @@ const  DialpadPin: FC<DialpadPinProps> = props => {
   useEffect(() => {
     Animated.timing(animatedValue, {
       toValue: code.length,
-      duration: 300,
+      duration: 400,
       useNativeDriver: true,
     }).start();
   }, [code]);
@@ -53,16 +53,16 @@ const  DialpadPin: FC<DialpadPinProps> = props => {
              <View
                style={[
                  {
-                   borderRadius: pinSize / 2,
+                   borderColor: 'transparent',
-                   borderColor: !isSelected ? "lightgrey" : "#3F1D38",
+                   borderRadius: pinSize / 2
                  },
                  styles.pinContentContainer,
                ]}
              >
               {isSelected && (<Animated.View style={[
             {
-           width: pinSize * 0.5,
+           width: pinSize * 0.28,
-           height: pinSize * 0.5,
+           height: pinSize * 0.28,
            borderRadius: pinSize * 0.35,
             },
             animatedStyle,
@@ -81,18 +81,18 @@ const  DialpadPin: FC<DialpadPinProps> = props => {
 const styles = StyleSheet.create({
   dialPadPinContainer: {
     flexDirection: "row",
-    marginBottom: 30,
+    marginBottom: 25,
     alignItems: "flex-end",
   },
   pinContentContainer: {
     flex: 1,
-    backgroundColor: "#fff",
+    backgroundColor: "#ffffff11",
     borderWidth: 1,
     justifyContent: "center",
     alignItems: "center",
   },
   pinContent: {
-    backgroundColor: "#5E454B",
+    backgroundColor: "#199515",
   }
   });
 

src/components/steps/InitializationScreen.tsx

@@ -39,16 +39,12 @@ const  InitializationScreen: FC<InitializationScreenProps> = props => {
 
   return (
     <View>
-      { step == PinSteps.InsertPin && <Dialpad prompt={"Insert Pin"} onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
+      { step == PinSteps.InsertPin && <Dialpad prompt={"Choose PIN"} onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
-      { step == PinSteps.RepeatPin && <Dialpad prompt={"Repeat Pin"} onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
+      { step == PinSteps.RepeatPin && <Dialpad prompt={"Repeat PIN"} onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
     </View>
   )};
 
 const styles = StyleSheet.create({
-  heading: {
-    textAlign: 'center',
-    fontSize: 16
-  }
 });
 
 export default InitializationScreen;

src/components/steps/MnemonicScreen.tsx

@@ -2,6 +2,7 @@ import {FC, useState } from "react";
 import { StyleSheet, Text, TextInput, View } from "react-native";
 import Button from "../Button";
 import { MNEMONIC } from "../../MnemonicList";
+import Dialpad from "../Dialpad";
 
 enum LoadMnemonicSteps {
   InsertMnemonic,
@@ -43,6 +44,11 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
     }
   }
 
+  const submitPin = (p: string) => {
+    onPressFunc(mnemonic, p);
+    return true;
+  }
+
   return (
     <View>
       { step == LoadMnemonicSteps.InsertMnemonic &&
@@ -54,14 +60,7 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
         <Text>{errMessage}</Text>
         </View>
       }
-      { step == LoadMnemonicSteps.InsertPin &&
+      { step == LoadMnemonicSteps.InsertPin && <Dialpad prompt={"Enter PIN"} onCancelFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} onNextFunc={submitPin}></Dialpad>}
-      <View>
-        <Text style={styles.heading}> Insert pin</Text>
-        <TextInput onChangeText={setPin} value={pin} keyboardType="number-pad" maxLength={6}/>
-        <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => {onPressFunc(mnemonic, pin)}} btnJustifyContent='center'></Button>
-        <Button label="Back" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} btnJustifyContent='center'></Button>
-      </View>
-      }
     </View>
   )};