Merge pull request #2300 from BlueWallet/helpms

ADD: Multisig Vaults Help Section

Navigation.js

@@ -24,6 +24,7 @@ import WalletTransactions from './screen/wallets/transactions';
 import AddWallet from './screen/wallets/add';
 import WalletsAddMultisig from './screen/wallets/addMultisig';
 import WalletsAddMultisigStep2 from './screen/wallets/addMultisigStep2';
+import WalletsAddMultisigHelp from './screen/wallets/addMultisigHelp';
 import PleaseBackup from './screen/wallets/pleaseBackup';
 import PleaseBackupLNDHub from './screen/wallets/pleaseBackupLNDHub';
 import ImportWallet from './screen/wallets/import';
@@ -177,6 +178,11 @@ const AddWalletRoot = () => (
       component={WalletsAddMultisigStep2}
       options={WalletsAddMultisigStep2.navigationOptions}
     />
+    <AddWalletStack.Screen
+      name="WalletsAddMultisigHelp"
+      component={WalletsAddMultisigHelp}
+      options={WalletsAddMultisigHelp.navigationOptions}
+    />
   </AddWalletStack.Navigator>
 );
 

loc/en.json

@@ -453,7 +453,7 @@
     "this_is_cosigners_xpub": "This is the cosigner's xpub, ready to be imported into another wallet. It is safe to share it.",
     "wallet_key_created": "Your vault key was created. Take a moment to safely backup your mnemonic seed",
     "are_you_sure_seed_will_be_lost": "Are you sure? Your mnemonic seed will be lost if you dont have a backup",
-    "forget_this_seed": "Forget this seed and use xpub instead",
+    "forget_this_seed": "Forget this seed and use xpub",
     "invalid_fingerprint": "Fingerprint for this seed doesnt match this cosigners fingerprint",
     "view_edit_cosigners": "View/edit cosigners",
     "this_cosigner_is_already_imported": "This cosigner is already imported",
@@ -462,7 +462,20 @@
     "input_fp_explain": "skip to use default one (00000000)",
     "input_path": "Input derivation path",
     "input_path_explain": "skip to use default one ({default})",
-    "view_edit_cosigners_title": "Edit Cosigners"
+    "view_edit_cosigners_title": "Edit Cosigners",
+    "ms_help": "Help",
+    "ms_help_title": "How Multisig Vaults work. Tips and tricks",
+    "ms_help_text": "A wallet with multiple keys, to exponentially increase security or for shared custody.",
+    "ms_help_title1": "Multiple devices are advised",
+    "ms_help_1": "The Vault will work with other BlueWallet apps and PSBT compatible wallets, like Electrum, Specter, Coldcard, Cobo vault, etc.",
+    "ms_help_title2": "Editing Keys",
+    "ms_help_2": "You can create all Vault keys in this device, and remove or edit these keys later. Having all keys on the same device has the equivalent security of a regular Bitcoin wallet.",
+    "ms_help_title3": "Vault Backups",
+    "ms_help_3": "On the wallet options you will find your Vault backup and watch-only backup. This backup is like a map to your wallet. It is essential for wallet recovery in case you lose one of your seeds.",
+    "ms_help_title4": "Importing Vaults",
+    "ms_help_4": "To import a Multisig, use your multisig backup file and use the import feature. If you only have extended keys and seeds, you can use the individual import fields on the Add Vault flow.",
+    "ms_help_title5": "Advanced options",
+    "ms_help_5": "By default BlueWallet will generate a 2of3 Vault. To create a different quorum or to change the address type, activate the advanced options in the Settings."
   },
   "is_it_my_address": {
     "title": "Is it my address?",

screen/wallets/addMultisigHelp.js

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import { Image, View, Text, ScrollView, StyleSheet } from 'react-native';
+import { useTheme } from '@react-navigation/native';
+import { SafeBlueArea, BlueNavigationStyle, BlueLoading } from '../../BlueComponents';
+/** @type {AppStorage} */
+import loc from '../../loc';
+
+const WalletsAddMultisigHelp = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const { colors } = useTheme();
+
+  const stylesHook = StyleSheet.create({
+    root: {
+      backgroundColor: colors.elevated,
+    },
+    intro: {
+      backgroundColor: colors.newBlue,
+      borderBottomColor: colors.inputBorderColor,
+    },
+    introTitle: {
+      color: colors.inverseForegroundColor,
+    },
+    introText: {
+      color: colors.inverseForegroundColor,
+    },
+    tipsTitle: {
+      color: colors.foregroundColor,
+    },
+    tipsText: {
+      color: colors.alternativeTextColor,
+    },
+  });
+
+  useEffect(() => {
+    setIsLoading(false);
+  }, []);
+
+  return isLoading ? (
+    <BlueLoading />
+  ) : (
+    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={stylesHook.root}>
+      <ScrollView>
+        <View style={[styles.intro, stylesHook.intro]}>
+          <Text style={[styles.introTitle, stylesHook.introTitle]}>{loc.multisig.ms_help_title}</Text>
+          <Text style={[styles.introText, stylesHook.introText]}>{loc.multisig.ms_help_text}</Text>
+          <Image style={[styles.introImage]} source={require('../../img/mshelp/mshelp-intro.png')} />
+        </View>
+        <View style={[styles.tip, stylesHook.tip]}>
+          <Text style={[styles.introTip, stylesHook.introTip]} />
+        </View>
+        <View style={[styles.tips, stylesHook.tips]}>
+          <Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title1}</Text>
+          <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_1}</Text>
+        </View>
+        <View style={[styles.tips, stylesHook.tips]}>
+          <Image style={[styles.imageTip]} source={require('../../img/mshelp/tip2.png')} />
+          <Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title2}</Text>
+          <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_2}</Text>
+        </View>
+        <View style={[styles.tips, stylesHook.tips]}>
+          <Image style={[styles.imageTip]} source={require('../../img/mshelp/tip3.png')} />
+          <Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title3}</Text>
+          <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_3}</Text>
+        </View>
+        <View style={[styles.tips, stylesHook.tips]}>
+          <Image style={[styles.imageTip]} source={require('../../img/mshelp/tip4.png')} />
+          <Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title4}</Text>
+          <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_4}</Text>
+        </View>
+        <View style={[styles.tips, stylesHook.tips]}>
+          <Image style={[styles.imageTip]} source={require('../../img/mshelp/tip5.png')} />
+          <Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title5}</Text>
+          <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_5}</Text>
+        </View>
+      </ScrollView>
+    </SafeBlueArea>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  intro: {
+    paddingHorizontal: 32,
+    borderBottomWidth: 1,
+  },
+  introTitle: {
+    fontSize: 32,
+    fontWeight: '700',
+    marginTop: 24,
+  },
+  introText: {
+    fontSize: 15,
+    marginVertical: 24,
+  },
+  introImage: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    justifyContent: 'flex-end',
+  },
+  tips: {
+    paddingHorizontal: 24,
+    paddingVertical: 24,
+  },
+  tipsTitle: {
+    fontSize: 22,
+    fontWeight: 'bold',
+  },
+  tipsText: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginTop: 16,
+  },
+  imageTip: {
+    marginBottom: 24,
+    width: '100%',
+    maxWidth: 390,
+  },
+});
+
+WalletsAddMultisigHelp.navigationOptions = () => ({
+  ...BlueNavigationStyle(),
+  title: '',
+  gestureEnabled: false,
+  swipeEnabled: false,
+  headerStyle: {
+    backgroundColor: '#0070FF',
+    borderBottomWidth: 0,
+    borderBottomColor: '#0070FF',
+    elevation: 0,
+    shadowOffset: { height: 0, width: 0 },
+  },
+  headerTintColor: '#FFFFFF',
+  headerBackTitleVisible: false,
+});
+
+export default WalletsAddMultisigHelp;

screen/wallets/addMultisigStep2.js

@@ -71,6 +71,10 @@ const WalletsAddMultisigStep2 = () => {
   const tooltip = useRef();
   const data = useRef(new Array(n));
 
+  const handleOnHelpPress = () => {
+    navigation.navigate('WalletsAddMultisigHelp');
+  };
+
   const stylesHook = StyleSheet.create({
     root: {
       backgroundColor: colors.elevated,
@@ -129,6 +133,12 @@ const WalletsAddMultisigStep2 = () => {
     headerText: {
       color: colors.foregroundColor,
     },
+    helpButton: {
+      backgroundColor: colors.buttonDisabledBackgroundColor,
+    },
+    helpButtonText: {
+      color: colors.foregroundColor,
+    },
   });
 
   const onCreate = () => {
@@ -633,6 +643,18 @@ const WalletsAddMultisigStep2 = () => {
       </BottomModal>
     );
   };
+
+  const renderHelp = () => {
+    return (
+      <View style={styles.helpButtonWrapper}>
+        <TouchableOpacity style={[styles.helpButton, stylesHook.helpButton]} onPress={handleOnHelpPress}>
+          <Icon size={20} name="help" type="octaicon" color={colors.foregroundColor} />
+          <Text style={[styles.helpButtonText, stylesHook.helpButtonText]}>{loc.multisig.ms_help}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
   const footer = isLoading ? (
     <BlueLoading />
   ) : (
@@ -644,8 +666,11 @@ const WalletsAddMultisigStep2 = () => {
   return (
     <View style={[styles.root, stylesHook.root]}>
       <StatusBar barStyle="light-content" />
-      <FlatList data={data.current} renderItem={_renderKeyItem} keyExtractor={(_item, index) => `${index}`} />
 
+      {renderHelp()}
+      <View style={[styles.wrapBox]}>
+        <FlatList data={data.current} renderItem={_renderKeyItem} keyExtractor={(_item, index) => `${index}`} />
+      </View>
       {renderMnemonicsModal()}
 
       {renderProvideMnemonicsModal()}
@@ -666,6 +691,10 @@ const styles = StyleSheet.create({
     marginHorizontal: 20,
     marginVertical: 24,
   },
+  wrapBox: {
+    flex: 1,
+    marginVertical: 24,
+  },
   buttonBottom: {
     marginHorizontal: 20,
     flex: 0.12,
@@ -766,11 +795,28 @@ const styles = StyleSheet.create({
   alignItemsCenter: { alignItems: 'center' },
   squareButtonWrapper: { height: 50, width: 250 },
   qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
+
+  helpButtonWrapper: {
+    alignItems: 'flex-end',
+  },
+  helpButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 50,
+    flexDirection: 'row',
+  },
+  helpButtonText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginLeft: 8,
+  },
 });
 
 WalletsAddMultisigStep2.navigationOptions = () => ({
   ...BlueNavigationStyle(),
   headerTitle: null,
+  gestureEnabled: false,
+  swipeEnabled: false,
 });
 
 export default WalletsAddMultisigStep2;