Images and styles

loc/en.json

@@ -465,7 +465,17 @@
     "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_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."
   },
   "cc": {
     "change": "change",

screen/wallets/addMultisigHelp.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { Image, View, Text, ScrollView, StyleSheet } from 'react-native';
 import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
 import { SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle, BlueSpacing20, BlueLoading } from '../../BlueComponents';
 /** @type {AppStorage} */
@@ -15,6 +15,7 @@ const WalletsAddMultisigHelp = () => {
     },
     intro: {
       backgroundColor: colors.newBlue,
+      borderBottomColor: colors.inputBorderColor,
     },
     introTitle:{
       color: colors.inverseForegroundColor,
@@ -22,6 +23,13 @@ const WalletsAddMultisigHelp = () => {
     introText:{
       color: colors.inverseForegroundColor,
     },
+    tipsTitle: {
+      color: colors.foregroundColor,
+    },
+    tipsText: {
+      color: colors.alternativeTextColor,
+    },
+
   });
 
   useEffect(() => {
@@ -31,7 +39,7 @@ const WalletsAddMultisigHelp = () => {
   return isLoading ? (
     <BlueLoading />
   ) : (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={stylesHook.root}>
       <ScrollView>
         <View style={[styles.intro, stylesHook.intro]}>
           <Text style={[styles.introTitle, stylesHook.introTitle]}>
@@ -40,11 +48,56 @@ const WalletsAddMultisigHelp = () => {
           <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]}></Text>
         </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>
   );
@@ -54,14 +107,59 @@ const WalletsAddMultisigHelp = () => {
     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: '#000000',
-    },
+    backgroundColor: '#0070FF',
+    borderBottomWidth: 0,
+    borderBottomColor: '#0070FF',
+    elevation: 0,
+    // shadowRadius: 0,
+    shadowOffset: { height: 0, width: 0 },
+  },
+  headerTintColor: '#FFFFFF',
+  headerBackTitleVisible: false,
 });
 
 export default WalletsAddMultisigHelp;

screen/wallets/addMultisigStep2.js

@@ -646,7 +646,7 @@ const WalletsAddMultisigStep2 = () => {
       <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.helpButtonTex, stylesHook.helpButtonTex]}>{loc.multisig.ms_help}</Text>
+          <Text style={[styles.helpButtonText, stylesHook.helpButtonText]}>{loc.multisig.ms_help}</Text>
         </TouchableOpacity>
       </View>
     );
@@ -802,7 +802,7 @@ const styles = StyleSheet.create({
     borderRadius: 50,
     flexDirection: 'row', 
   },
-  helpButtonTex: {
+  helpButtonText: {
     fontSize: 16,
     fontWeight: 'bold',
     marginLeft: 8,
@@ -812,6 +812,8 @@ const styles = StyleSheet.create({
 WalletsAddMultisigStep2.navigationOptions = () => ({
   ...BlueNavigationStyle(),
   headerTitle: null,
+  gestureEnabled: false,
+  swipeEnabled: false,
 });
 
 export default WalletsAddMultisigStep2;