Enhanced InfoModal and Security UX

ZeusLN · Nov 22, 2024 · e66d9d3 · e66d9d3
1 parent 09136c9
commit e66d9d3
Show file tree

Hide file tree

Showing 17 changed files with 240 additions and 113 deletions.
diff --git a/components/FeeBreakdown.tsx b/components/FeeBreakdown.tsx
@@ -431,7 +431,7 @@ export default class FeeBreakdown extends React.Component<
                                 value={`${csv_delay} ${localeString(
                                     'general.blocks'
                                 )}`}
-                                infoText={[
+                                infoModalText={[
                                     localeString(
                                         'views.Channel.csvDelay.info1'
                                     ),

diff --git a/components/KeyValue.tsx b/components/KeyValue.tsx
@@ -24,9 +24,12 @@ interface KeyValueProps {
     color?: string;
     indicatorColor?: string;
     sensitive?: boolean;
-    infoText?: string | Array<string>;
-    infoLink?: string;
-    infoNav?: string;
+    infoModalText?: string | Array<string>;
+    infoModalLink?: string;
+    infoModalAdditionalButtons?: Array<{
+        title: string;
+        callback?: () => void;
+    }>;
     mempoolLink?: () => void;
     disableCopy?: boolean;
     ModalStore?: ModalStore;
@@ -43,9 +46,9 @@ export default class KeyValue extends React.Component<KeyValueProps, {}> {
             color,
             indicatorColor,
             sensitive,
-            infoText,
-            infoLink,
-            infoNav,
+            infoModalText,
+            infoModalLink,
+            infoModalAdditionalButtons,
             mempoolLink,
             disableCopy,
             ModalStore,
@@ -86,7 +89,7 @@ export default class KeyValue extends React.Component<KeyValueProps, {}> {
                 >
                     {keyValue}
                 </Text>
-                {infoText && (
+                {infoModalText && (
                     <Text
                         style={{
                             color:
@@ -103,10 +106,16 @@ export default class KeyValue extends React.Component<KeyValueProps, {}> {
         );
 
         let Key: any;
-        if (infoText) {
+        if (infoModalText) {
             Key = (
                 <TouchableOpacity
-                    onPress={() => toggleInfoModal(infoText, infoLink, infoNav)}
+                    onPress={() =>
+                        toggleInfoModal(
+                            infoModalText,
+                            infoModalLink,
+                            infoModalAdditionalButtons
+                        )
+                    }
                 >
                     {KeyBase}
                 </TouchableOpacity>

diff --git a/components/Modals/AlertModal.tsx b/components/Modals/AlertModal.tsx
@@ -110,12 +110,7 @@ export default class AlertModal extends React.Component<AlertModalProps, {}> {
                                     )}
                                 </Text>
 
-                                <View
-                                    style={{
-                                        ...styles.button,
-                                        marginBottom: 25
-                                    }}
-                                >
+                                <View style={styles.button}>
                                     <Button
                                         title={localeString(
                                             'components.AlertModal.resetEGS'
@@ -129,7 +124,7 @@ export default class AlertModal extends React.Component<AlertModalProps, {}> {
                                             restartNeeded();
                                         }}
                                         tertiary
-                                    ></Button>
+                                    />
                                 </View>
                             </>
                         )}
@@ -170,12 +165,7 @@ export default class AlertModal extends React.Component<AlertModalProps, {}> {
                                     {peers.join(', ')}
                                 </Text>
 
-                                <View
-                                    style={{
-                                        ...styles.button,
-                                        marginBottom: 25
-                                    }}
-                                >
+                                <View style={styles.button}>
                                     <Button
                                         title={localeString(
                                             'components.AlertModal.reviewPeers'
@@ -187,7 +177,7 @@ export default class AlertModal extends React.Component<AlertModalProps, {}> {
                                             );
                                         }}
                                         tertiary
-                                    ></Button>
+                                    />
                                 </View>
                             </>
                         )}
@@ -196,7 +186,7 @@ export default class AlertModal extends React.Component<AlertModalProps, {}> {
                             title={localeString('general.close')}
                             onPress={() => toggleAlertModal(false)}
                             secondary
-                        ></Button>
+                        />
                     </View>
                 </View>
             </ModalBox>
@@ -216,11 +206,9 @@ const styles = StyleSheet.create({
         fontSize: 20,
         marginBottom: 10
     },
-    buttons: {
-        width: '100%'
-    },
     button: {
-        marginTop: 20,
-        width: 350
+        width: '100%',
+        alignItems: 'center',
+        marginVertical: 20
     }
 });
diff --git a/components/Modals/InfoModal.tsx b/components/Modals/InfoModal.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import { inject, observer } from 'mobx-react';
 
-import NavigationService from '../../NavigationService';
-
 import Button from '../Button';
 import ModalBox from '../ModalBox';
 
@@ -26,7 +24,7 @@ export default class InfoModal extends React.Component<InfoModalProps, {}> {
             showInfoModal,
             infoModalText,
             infoModalLink,
-            infoModalNav,
+            infoModalAdditionalButtons,
             toggleInfoModal
         } = ModalStore;
 
@@ -88,7 +86,27 @@ export default class InfoModal extends React.Component<InfoModalProps, {}> {
                             ))}
 
                         <View style={styles.buttons}>
-                            {(infoModalLink || infoModalNav) && (
+                            {infoModalAdditionalButtons?.map(
+                                ({ title, callback }, index) => (
+                                    <View
+                                        key={index}
+                                        style={{
+                                            ...styles.button,
+                                            marginBottom: 25
+                                        }}
+                                    >
+                                        <Button
+                                            title={title}
+                                            onPress={() => {
+                                                toggleInfoModal();
+                                                if (callback) callback();
+                                            }}
+                                            tertiary
+                                        />
+                                    </View>
+                                )
+                            )}
+                            {infoModalLink && (
                                 <View
                                     style={{
                                         ...styles.button,
@@ -101,23 +119,18 @@ export default class InfoModal extends React.Component<InfoModalProps, {}> {
                                         )}
                                         onPress={() => {
                                             toggleInfoModal();
-                                            if (infoModalLink)
-                                                UrlUtils.goToUrl(infoModalLink);
-                                            if (infoModalNav)
-                                                NavigationService.navigate(
-                                                    infoModalNav
-                                                );
+                                            UrlUtils.goToUrl(infoModalLink);
                                         }}
                                         tertiary
-                                    ></Button>
+                                    />
                                 </View>
                             )}
                             <View style={styles.button}>
                                 <Button
                                     title={localeString('general.close')}
                                     onPress={() => toggleInfoModal()}
                                     secondary
-                                ></Button>
+                                />
                             </View>
                         </View>
                     </View>
@@ -129,7 +142,8 @@ export default class InfoModal extends React.Component<InfoModalProps, {}> {
 
 const styles = StyleSheet.create({
     buttons: {
-        width: '100%'
+        width: '100%',
+        alignItems: 'center'
     },
     button: {
         width: 350

diff --git a/components/Text.tsx b/components/Text.tsx
@@ -11,17 +11,26 @@ interface TextProps {
     ModalStore?: ModalStore;
     style?: TextStyle;
     children?: string;
-    infoText?: string | Array<string>;
-    infoLink?: string;
-    infoNav?: string;
+    infoModalText?: string | Array<string>;
+    infoModalLink?: string;
+    infoModalAdditionalButtons?: Array<{
+        title: string;
+        callback?: () => void;
+    }>;
 }
 
 @inject('ModalStore')
 @observer
 export default class ZeusText extends React.Component<TextProps, {}> {
     render() {
-        const { children, style, infoText, infoLink, infoNav, ModalStore } =
-            this.props;
+        const {
+            children,
+            style,
+            infoModalText,
+            infoModalLink,
+            infoModalAdditionalButtons,
+            ModalStore
+        } = this.props;
         const { toggleInfoModal } = ModalStore!;
 
         const CoreText = () => (
@@ -35,7 +44,7 @@ export default class ZeusText extends React.Component<TextProps, {}> {
                 >
                     {children}
                 </Text>
-                {infoText && (
+                {infoModalText && (
                     <Text
                         style={{
                             color: themeColor('text'),
@@ -49,10 +58,16 @@ export default class ZeusText extends React.Component<TextProps, {}> {
             </Row>
         );
 
-        if (infoText) {
+        if (infoModalText) {
             return (
                 <TouchableOpacity
-                    onPress={() => toggleInfoModal(infoText, infoLink, infoNav)}
+                    onPress={() =>
+                        toggleInfoModal(
+                            infoModalText,
+                            infoModalLink,
+                            infoModalAdditionalButtons
+                        )
+                    }
                 >
                     <CoreText />
                 </TouchableOpacity>

diff --git a/locales/en.json b/locales/en.json
@@ -684,6 +684,7 @@
     "views.Settings.enabled": "Enabled",
     "views.Settings.disabled": "Disabled",
     "views.Settings.newPassword": "New Password",
+    "views.Settings.createYourPassword": "Create your Password",
     "views.Settings.confirmPassword": "Confirm New Password",
     "views.Settings.newDuressPassword": "New Duress Password",
     "views.Settings.confirmDuressPassword": "Confirm Duress Password",
@@ -777,10 +778,12 @@
     "views.Settings.SetDuressPassword.deletePassword": "Delete Duress Password",
     "views.Settings.SetDuressPassword.duressPasswordExplanation": "Once set, you can enter your duress password on the login screen to delete all of your wallet configurations.",
     "views.Settings.SetPin.title": "Set / Change PIN",
+    "views.Settings.Security.BiometryRequiresPinOrPassword": "To enable biometric authentication, you need to set up a PIN or Password first as a backup method.",
     "views.Settings.Security.FaceID.title": "FaceID",
     "views.Settings.Security.TouchID.title": "TouchID",
     "views.Settings.Security.Biometrics.title": "Biometrics",
     "views.Settings.Security.Biometrics.prompt": "Unlock",
+    "views.Settings.Security.biometricsWillBeDisabled": "Deleting your PIN or Password will also disable biometric authentication. Continue?",
     "views.Lockscreen.Biometrics.prompt": "Unlock Zeus",
     "views.Settings.SetPin.noMatch": "PINs do not match. Please resubmit.",
     "views.Settings.SetPin.invalid": "PIN and Duress PIN cannot be equal.",

diff --git a/stores/ModalStore.ts b/stores/ModalStore.ts
@@ -9,7 +9,10 @@ export default class ModalStore {
     @observable public clipboardValue: string;
     @observable public infoModalText: string | Array<string> | undefined;
     @observable public infoModalLink: string | undefined;
-    @observable public infoModalNav: string | undefined;
+    @observable public infoModalAdditionalButtons?: Array<{
+        title: string;
+        callback?: () => void;
+    }>;
     @observable public alertModalText: string | Array<string> | undefined;
     @observable public alertModalLink: string | undefined;
     @observable public alertModalNav: string | undefined;
@@ -25,12 +28,12 @@ export default class ModalStore {
     public toggleInfoModal = (
         text?: string | Array<string>,
         link?: string,
-        nav?: string
+        buttons?: Array<{ title: string; callback?: () => void }>
     ) => {
         this.showInfoModal = text ? true : false;
         this.infoModalText = text;
         this.infoModalLink = link;
-        this.infoModalNav = nav;
+        this.infoModalAdditionalButtons = buttons;
     };
 
     @action
@@ -73,7 +76,7 @@ export default class ModalStore {
             this.showInfoModal = false;
             this.infoModalText = '';
             this.infoModalLink = '';
-            this.infoModalNav = '';
+            this.infoModalAdditionalButtons = undefined;
             return true;
         }
         return false;

diff --git a/views/Channels/Channel.tsx b/views/Channels/Channel.tsx
@@ -666,10 +666,10 @@ export default class ChannelView extends React.Component<
                                     }
                                 />
                             }
-                            infoText={localeString(
+                            infoModalText={localeString(
                                 'views.Channel.localReserve.info'
                             )}
-                            infoLink="https://bitcoin.design/guide/how-it-works/liquidity/#what-is-a-channel-reserve"
+                            infoModalLink="https://bitcoin.design/guide/how-it-works/liquidity/#what-is-a-channel-reserve"
                             indicatorColor={themeColor('outboundReserve')}
                         />
                     )}
@@ -685,10 +685,10 @@ export default class ChannelView extends React.Component<
                                     toggleable
                                 />
                             }
-                            infoText={localeString(
+                            infoModalText={localeString(
                                 'views.Channel.remoteReserve.info'
                             )}
-                            infoLink="https://bitcoin.design/guide/how-it-works/liquidity/#what-is-a-channel-reserve"
+                            infoModalLink="https://bitcoin.design/guide/how-it-works/liquidity/#what-is-a-channel-reserve"
                             indicatorColor={themeColor('inboundReserve')}
                         />
                     )}
@@ -824,7 +824,7 @@ export default class ChannelView extends React.Component<
                                                 ...styles.text,
                                                 color: themeColor('text')
                                             }}
-                                            infoText={localeString(
+                                            infoModalText={localeString(
                                                 'views.Channel.externalAddress.info'
                                             )}
                                         >

diff --git a/views/Lockscreen.tsx b/views/Lockscreen.tsx
@@ -313,12 +313,14 @@ export default class Lockscreen extends React.Component<
         const { updateSettings } = SettingsStore;
 
         // duress pin is also deleted when pin is deleted
+        // biometry is also disabled when pin is deleted
         updateSettings({
             pin: '',
             duressPin: '',
-            authenticationAttempts: 0
+            authenticationAttempts: 0,
+            isBiometryEnabled: false
         }).then(() => {
-            navigation.pop(2);
+            navigation.popTo('Security');
         });
     };
 
@@ -330,7 +332,7 @@ export default class Lockscreen extends React.Component<
             duressPin: '',
             authenticationAttempts: 0
         }).then(() => {
-            navigation.pop(2);
+            navigation.popTo('Security');
         });
     };