From 8a9127d22e2d281085fde88c951c7f132c72fa2c Mon Sep 17 00:00:00 2001
From: Marcos Rodriguez Velez <marcospr@pm.me>
Date: Sun, 4 Aug 2024 18:08:01 -0400
Subject: [PATCH] wip

---
 .../PromptPasswordConfirmationModal.tsx       | 186 +++++++++++-------
 loc/en.json                                   |   4 +
 2 files changed, 119 insertions(+), 71 deletions(-)

diff --git a/components/PromptPasswordConfirmationModal.tsx b/components/PromptPasswordConfirmationModal.tsx
index f01e5d65a..fc59859e8 100644
--- a/components/PromptPasswordConfirmationModal.tsx
+++ b/components/PromptPasswordConfirmationModal.tsx
@@ -18,7 +18,6 @@ interface PromptPasswordConfirmationModalProps {
   modalType: ModalType;
   onConfirmationSuccess: (password: string) => Promise<boolean>;
   onConfirmationFailure: () => void;
-  onDismiss?: () => void;
 }
 
 export interface PromptPasswordConfirmationModalHandle {
@@ -27,16 +26,18 @@ export interface PromptPasswordConfirmationModalHandle {
 }
 
 const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationModalHandle, PromptPasswordConfirmationModalProps>(
-  ({ modalType, onConfirmationSuccess, onConfirmationFailure, onDismiss }, ref) => {
+  ({ modalType, onConfirmationSuccess, onConfirmationFailure }, ref) => {
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const [isSuccess, setIsSuccess] = useState(false);
+    const [showExplanation, setShowExplanation] = useState(true); // State to toggle between explanation and password input for CREATE_PASSWORD
     const modalRef = useRef<BottomModalHandle>(null);
     const fadeOutAnimation = useRef(new Animated.Value(1)).current;
     const fadeInAnimation = useRef(new Animated.Value(0)).current;
     const scaleAnimation = useRef(new Animated.Value(1)).current;
     const shakeAnimation = useRef(new Animated.Value(0)).current;
+    const explanationOpacity = useRef(new Animated.Value(1)).current; // New animated value for opacity
     const { colors } = useTheme();
     const passwordInputRef = useRef<TextInput>(null);
     const confirmPasswordInputRef = useRef<TextInput>(null);
@@ -64,7 +65,7 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
       present: async () => {
         resetState();
         modalRef.current?.present();
-        if (modalType === MODAL_TYPES.CREATE_PASSWORD) {
+        if (modalType === MODAL_TYPES.CREATE_PASSWORD && !showExplanation) {
           passwordInputRef.current?.focus();
         } else if (modalType === MODAL_TYPES.ENTER_PASSWORD) {
           passwordInputRef.current?.focus();
@@ -72,7 +73,7 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
       },
       dismiss: async () => {
         await modalRef.current?.dismiss();
-        onDismiss?.(); // Call onDismiss if provided after modal dismisses
+        resetState();
       },
     }));
 
@@ -85,26 +86,46 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
       fadeInAnimation.setValue(0);
       scaleAnimation.setValue(1);
       shakeAnimation.setValue(0);
+      explanationOpacity.setValue(1);
+      if (modalType === MODAL_TYPES.CREATE_PASSWORD) {
+        setShowExplanation(true);
+      }
     };
 
+    useEffect(() => {
+      resetState();
+    }, [modalType]);
+
     const handleShakeAnimation = () => {
       Animated.sequence([
         Animated.timing(shakeAnimation, {
           toValue: 10,
-          duration: 100,
-          easing: Easing.bounce,
+          duration: 150,
+          easing: Easing.inOut(Easing.ease),
           useNativeDriver: true,
         }),
         Animated.timing(shakeAnimation, {
           toValue: -10,
+          duration: 150,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(shakeAnimation, {
+          toValue: 5,
           duration: 100,
-          easing: Easing.bounce,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(shakeAnimation, {
+          toValue: -5,
+          duration: 100,
+          easing: Easing.inOut(Easing.ease),
           useNativeDriver: true,
         }),
         Animated.timing(shakeAnimation, {
           toValue: 0,
           duration: 100,
-          easing: Easing.bounce,
+          easing: Easing.inOut(Easing.ease),
           useNativeDriver: true,
         }),
       ]).start(() => {
@@ -175,22 +196,23 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
       }
     };
 
+    const handleTransitionToCreatePassword = () => {
+      Animated.timing(explanationOpacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start(() => {
+        setShowExplanation(false);
+        explanationOpacity.setValue(1); // Reset opacity for when transitioning back
+        passwordInputRef.current?.focus();
+      });
+    };
+
     const handleCancel = async () => {
-      resetState();
       onConfirmationFailure();
       await modalRef.current?.dismiss();
     };
 
-    useEffect(() => {
-      resetState();
-      if (modalType === MODAL_TYPES.CREATE_PASSWORD) {
-        passwordInputRef.current?.focus();
-      } else if (modalType === MODAL_TYPES.ENTER_PASSWORD) {
-        passwordInputRef.current?.focus();
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [modalType]);
-
     const animatedViewStyle: Animated.WithAnimatedObject<ViewStyle> = {
       opacity: fadeOutAnimation,
       transform: [{ scale: scaleAnimation }],
@@ -201,65 +223,82 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
       <BottomModal
         ref={modalRef}
         showCloseButton={false}
-        onDismiss={onDismiss || handleCancel}
+        onDismiss={resetState}
         grabber={false}
-        sizes={[350]}
+        sizes={[370]}
         backgroundColor={colors.modal}
         contentContainerStyle={styles.modalContent}
         footer={
-          !isSuccess && (
-            <Animated.View style={{ opacity: fadeOutAnimation, transform: [{ scale: scaleAnimation }] }}>
-              <View style={styles.feeModalFooter}>
-                <SecondButton testID="CancelButton" title={loc._.cancel} onPress={handleCancel} disabled={isLoading} />
-                <View style={styles.feeModalFooterSpacing} />
-                <SecondButton
-                  title={isLoading ? '' : loc._.ok}
-                  onPress={handleSubmit}
-                  testID="OKButton"
-                  loading={isLoading}
-                  disabled={isLoading || !password || (modalType === MODAL_TYPES.CREATE_PASSWORD && !confirmPassword)}
-                />
-              </View>
-            </Animated.View>
-          ) || undefined
+          !isSuccess ? (
+            showExplanation && modalType === MODAL_TYPES.CREATE_PASSWORD ? null : (
+              <Animated.View style={{ opacity: fadeOutAnimation, transform: [{ scale: scaleAnimation }] }}>
+                <View style={styles.feeModalFooter}>
+                  <SecondButton testID="CancelButton" title={loc._.cancel} onPress={handleCancel} disabled={isLoading} />
+                  <View style={styles.feeModalFooterSpacing} />
+                  <SecondButton
+                    title={isLoading ? '' : loc._.ok}
+                    onPress={handleSubmit}
+                    testID="OKButton"
+                    loading={isLoading}
+                    disabled={isLoading || !password || (modalType === MODAL_TYPES.CREATE_PASSWORD && !confirmPassword)}
+                  />
+                </View>
+              </Animated.View>
+            )
+          ) : null
         }
       >
-        {!isSuccess && modalType !== MODAL_TYPES.SUCCESS && (
+        {!isSuccess && (
           <Animated.View style={animatedViewStyle}>
-            <Text style={[styles.textLabel, stylesHook.feeModalLabel]}>
-              {modalType === MODAL_TYPES.CREATE_PASSWORD ? loc.settings.password_explain : loc._.enter_password}
-            </Text>
-            <View style={styles.inputContainer}>
-              <Animated.View style={{ transform: [{ translateX: shakeAnimation }] }}>
-                <TextInput
-                  testID="PasswordInput"
-                  ref={passwordInputRef}
-                  secureTextEntry
-                  placeholder="Password"
-                  value={password}
-                  selectTextOnFocus
-                  onChangeText={setPassword}
-                  style={[styles.input, stylesHook.input]}
-                  autoFocus
-                  onSubmitEditing={handleSubmit} // Handle Enter key as OK
-                />
+            {modalType === MODAL_TYPES.CREATE_PASSWORD && showExplanation && (
+              <Animated.View style={{ opacity: explanationOpacity }}>
+                <Text style={[styles.textLabel, stylesHook.feeModalLabel]}>{loc.settings.encrypt_storage_explanation_headline}</Text>
+                <Text style={[styles.description, stylesHook.feeModalCustomText]}>
+                  {loc.settings.encrypt_storage_explanation_description_line1}
+                </Text>
+                <Text style={[styles.description, stylesHook.feeModalCustomText]}>
+                  {loc.settings.encrypt_storage_explanation_description_line2}
+                </Text>
+                <View style={styles.feeModalFooter} />
+                <SecondButton title={loc.settings.i_understand} onPress={handleTransitionToCreatePassword} disabled={isLoading} />
               </Animated.View>
-              {modalType === MODAL_TYPES.CREATE_PASSWORD && (
-                <Animated.View style={{ transform: [{ translateX: shakeAnimation }] }}>
-                  <TextInput
-                    testID="ConfirmPasswordInput"
-                    ref={confirmPasswordInputRef}
-                    secureTextEntry
-                    placeholder="Confirm Password"
-                    value={confirmPassword}
-                    selectTextOnFocus
-                    onChangeText={setConfirmPassword}
-                    style={[styles.input, stylesHook.input]}
-                    onSubmitEditing={handleSubmit} // Handle Enter key as OK
-                  />
-                </Animated.View>
-              )}
-            </View>
+            )}
+            {(modalType === MODAL_TYPES.ENTER_PASSWORD || (modalType === MODAL_TYPES.CREATE_PASSWORD && !showExplanation)) && (
+              <>
+                <Text style={[styles.textLabel, stylesHook.feeModalLabel]}>
+                  {modalType === MODAL_TYPES.CREATE_PASSWORD ? loc.settings.password_explain : loc._.enter_password}
+                </Text>
+                <View style={styles.inputContainer}>
+                  <Animated.View style={{ transform: [{ translateX: shakeAnimation }] }}>
+                    <TextInput
+                      testID="PasswordInput"
+                      ref={passwordInputRef}
+                      secureTextEntry
+                      placeholder="Password"
+                      value={password}
+                      onChangeText={setPassword}
+                      style={[styles.input, stylesHook.input]}
+                      autoFocus
+                      onSubmitEditing={handleSubmit} // Handle Enter key as OK
+                    />
+                  </Animated.View>
+                  {modalType === MODAL_TYPES.CREATE_PASSWORD && (
+                    <Animated.View style={{ transform: [{ translateX: shakeAnimation }] }}>
+                      <TextInput
+                        testID="ConfirmPasswordInput"
+                        ref={confirmPasswordInputRef}
+                        secureTextEntry
+                        placeholder="Confirm Password"
+                        value={confirmPassword}
+                        onChangeText={setConfirmPassword}
+                        style={[styles.input, stylesHook.input]}
+                        onSubmitEditing={handleSubmit} // Handle Enter key as OK
+                      />
+                    </Animated.View>
+                  )}
+                </View>
+              </>
+            )}
           </Animated.View>
         )}
         {isSuccess && (
@@ -278,7 +317,7 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
                       transform: [
                         {
                           scale: scaleAnimation.interpolate({
-                            inputRange: [0, 1],
+                            inputRange: [0.8, 1],
                             outputRange: [0.8, 1],
                           }),
                         },
@@ -333,6 +372,11 @@ const styles = StyleSheet.create({
     marginBottom: 16,
     textAlign: 'center',
   },
+  description: {
+    fontSize: 16,
+    marginBottom: 12,
+    textAlign: 'center',
+  },
   successContainer: {
     justifyContent: 'center',
     alignItems: 'center',
diff --git a/loc/en.json b/loc/en.json
index 60b215fba..3fa2c68a1 100644
--- a/loc/en.json
+++ b/loc/en.json
@@ -264,6 +264,10 @@
     "encrypt_decrypt": "Decrypt Storage",
     "encrypt_decrypt_q": "Are you sure you want to decrypt your storage? This will allow your wallets to be accessed without a password.",
     "encrypt_enc_and_pass": "Encrypted and Password Protected",
+    "encrypt_storage_explanation_headline": "Enable Storage Encryption",
+    "encrypt_storage_explanation_description_line1": "Enabling Storage Encryption adds an extra layer of protection to your app by securing the way your data is stored on your device. This makes it harder for anyone to access your information without permission.",
+    "encrypt_storage_explanation_description_line2": "However, it's important to know that this encryption only protects the access to your wallets stored on the device's keychain. It doesn't put a password or any extra protection on the wallets themselves.",
+    "i_understand": "I understand",
     "encrypt_title": "Security",
     "encrypt_tstorage": "Storage",
     "encrypt_use": "Use {type}",