diff --git a/img/mshelp/mshelp-intro.png b/img/mshelp/mshelp-intro.png new file mode 100644 index 000000000..88c40f990 Binary files /dev/null and b/img/mshelp/mshelp-intro.png differ diff --git a/img/mshelp/mshelp-intro@2x.png b/img/mshelp/mshelp-intro@2x.png new file mode 100644 index 000000000..3705d7b75 Binary files /dev/null and b/img/mshelp/mshelp-intro@2x.png differ diff --git a/img/mshelp/mshelp-intro@3x.png b/img/mshelp/mshelp-intro@3x.png new file mode 100644 index 000000000..f8128d54d Binary files /dev/null and b/img/mshelp/mshelp-intro@3x.png differ diff --git a/img/mshelp/tip2.png b/img/mshelp/tip2.png new file mode 100644 index 000000000..02e95435d Binary files /dev/null and b/img/mshelp/tip2.png differ diff --git a/img/mshelp/tip2@2x.png b/img/mshelp/tip2@2x.png new file mode 100644 index 000000000..e6951fd06 Binary files /dev/null and b/img/mshelp/tip2@2x.png differ diff --git a/img/mshelp/tip2@3x.png b/img/mshelp/tip2@3x.png new file mode 100644 index 000000000..1ff9c239d Binary files /dev/null and b/img/mshelp/tip2@3x.png differ diff --git a/img/mshelp/tip3.png b/img/mshelp/tip3.png new file mode 100644 index 000000000..8a952f7a0 Binary files /dev/null and b/img/mshelp/tip3.png differ diff --git a/img/mshelp/tip3@2x.png b/img/mshelp/tip3@2x.png new file mode 100644 index 000000000..50d1cdc87 Binary files /dev/null and b/img/mshelp/tip3@2x.png differ diff --git a/img/mshelp/tip3@3x.png b/img/mshelp/tip3@3x.png new file mode 100644 index 000000000..0d21bf37b Binary files /dev/null and b/img/mshelp/tip3@3x.png differ diff --git a/img/mshelp/tip4.png b/img/mshelp/tip4.png new file mode 100644 index 000000000..f9744c9fd Binary files /dev/null and b/img/mshelp/tip4.png differ diff --git a/img/mshelp/tip4@2x.png b/img/mshelp/tip4@2x.png new file mode 100644 index 000000000..e402e11c7 Binary files /dev/null and b/img/mshelp/tip4@2x.png differ diff --git a/img/mshelp/tip4@3x.png b/img/mshelp/tip4@3x.png new file mode 100644 index 000000000..9964ff4f8 Binary files /dev/null and b/img/mshelp/tip4@3x.png differ diff --git a/img/mshelp/tip5.png b/img/mshelp/tip5.png new file mode 100644 index 000000000..7e2e1fa40 Binary files /dev/null and b/img/mshelp/tip5.png differ diff --git a/img/mshelp/tip5@2x.png b/img/mshelp/tip5@2x.png new file mode 100644 index 000000000..50d66de12 Binary files /dev/null and b/img/mshelp/tip5@2x.png differ diff --git a/img/mshelp/tip5@3x.png b/img/mshelp/tip5@3x.png new file mode 100644 index 000000000..046ebf19b Binary files /dev/null and b/img/mshelp/tip5@3x.png differ diff --git a/loc/en.json b/loc/en.json index 81b660a6f..cf0c97667 100644 --- a/loc/en.json +++ b/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", diff --git a/screen/wallets/addMultisigHelp.js b/screen/wallets/addMultisigHelp.js index b2bcfc17a..a0d850d7f 100644 --- a/screen/wallets/addMultisigHelp.js +++ b/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 ? ( ) : ( - + @@ -40,11 +48,56 @@ const WalletsAddMultisigHelp = () => { {loc.multisig.ms_help_text} + - + + + {loc.multisig.ms_help_title1} + + + {loc.multisig.ms_help_1} + + + + + + {loc.multisig.ms_help_title2} + + + {loc.multisig.ms_help_2} + + + + + + {loc.multisig.ms_help_title3} + + + {loc.multisig.ms_help_3} + + + + + + {loc.multisig.ms_help_title4} + + + {loc.multisig.ms_help_4} + + + + + + {loc.multisig.ms_help_title5} + + + {loc.multisig.ms_help_5} + + + ); @@ -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; diff --git a/screen/wallets/addMultisigStep2.js b/screen/wallets/addMultisigStep2.js index 8e1553655..c1097c817 100644 --- a/screen/wallets/addMultisigStep2.js +++ b/screen/wallets/addMultisigStep2.js @@ -646,7 +646,7 @@ const WalletsAddMultisigStep2 = () => { - {loc.multisig.ms_help} + {loc.multisig.ms_help} ); @@ -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;