BlueWallet/screen/wallets/addMultisigHelp.js

138 lines
4.3 KiB
JavaScript
Raw Normal View History

2020-12-07 17:48:56 +01:00
import React, { useState, useEffect } from 'react';
2020-12-09 15:55:23 +01:00
import { Image, View, Text, ScrollView, StyleSheet } from 'react-native';
2020-12-09 16:00:07 +01:00
import { useTheme } from '@react-navigation/native';
2020-12-25 19:09:53 +03:00
import { SafeBlueArea, BlueLoading } from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
2020-12-09 13:13:20 +01:00
import loc from '../../loc';
2020-12-07 17:48:56 +01:00
const WalletsAddMultisigHelp = () => {
const [isLoading, setIsLoading] = useState(true);
2020-12-09 13:13:20 +01:00
const { colors } = useTheme();
const stylesHook = StyleSheet.create({
root: {
backgroundColor: colors.elevated,
},
intro: {
backgroundColor: colors.newBlue,
2020-12-09 15:55:23 +01:00
borderBottomColor: colors.inputBorderColor,
2020-12-09 13:13:20 +01:00
},
2020-12-09 10:08:02 -05:00
introTitle: {
2020-12-09 13:13:20 +01:00
color: colors.inverseForegroundColor,
},
2020-12-09 10:08:02 -05:00
introText: {
2020-12-09 13:13:20 +01:00
color: colors.inverseForegroundColor,
},
2020-12-09 15:55:23 +01:00
tipsTitle: {
color: colors.foregroundColor,
},
tipsText: {
color: colors.alternativeTextColor,
},
2020-12-09 13:13:20 +01:00
});
2020-12-07 17:48:56 +01:00
useEffect(() => {
setIsLoading(false);
}, []);
return isLoading ? (
<BlueLoading />
) : (
<SafeBlueArea style={stylesHook.root}>
2020-12-07 17:48:56 +01:00
<ScrollView>
2020-12-09 13:13:20 +01:00
<View style={[styles.intro, stylesHook.intro]}>
2020-12-09 10:08:02 -05:00
<Text style={[styles.introTitle, stylesHook.introTitle]}>{loc.multisig.ms_help_title}</Text>
<Text style={[styles.introText, stylesHook.introText]}>{loc.multisig.ms_help_text}</Text>
2020-12-09 15:55:23 +01:00
<Image style={[styles.introImage]} source={require('../../img/mshelp/mshelp-intro.png')} />
2020-12-09 13:13:20 +01:00
</View>
<View style={[styles.tip, stylesHook.tip]}>
2020-12-09 10:08:02 -05:00
<Text style={[styles.introTip, stylesHook.introTip]} />
2020-12-09 13:13:20 +01:00
</View>
2020-12-09 15:55:23 +01:00
<View style={[styles.tips, stylesHook.tips]}>
2020-12-09 10:08:02 -05:00
<Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title1}</Text>
<Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_1}</Text>
2020-12-09 15:55:23 +01:00
</View>
<View style={[styles.tips, stylesHook.tips]}>
<Image style={[styles.imageTip]} source={require('../../img/mshelp/tip2.png')} />
2020-12-09 10:08:02 -05:00
<Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title2}</Text>
<Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_2}</Text>
2020-12-09 15:55:23 +01:00
</View>
2020-12-09 10:08:02 -05:00
<View style={[styles.tips, stylesHook.tips]}>
2020-12-09 15:55:23 +01:00
<Image style={[styles.imageTip]} source={require('../../img/mshelp/tip3.png')} />
2020-12-09 10:08:02 -05:00
<Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title3}</Text>
<Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_3}</Text>
2020-12-09 15:55:23 +01:00
</View>
<View style={[styles.tips, stylesHook.tips]}>
<Image style={[styles.imageTip]} source={require('../../img/mshelp/tip4.png')} />
2020-12-09 10:08:02 -05:00
<Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title4}</Text>
<Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_4}</Text>
2020-12-09 15:55:23 +01:00
</View>
<View style={[styles.tips, stylesHook.tips]}>
<Image style={[styles.imageTip]} source={require('../../img/mshelp/tip5.png')} />
2020-12-09 10:08:02 -05:00
<Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title5}</Text>
<Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_5}</Text>
2020-12-09 15:55:23 +01:00
</View>
2020-12-07 17:48:56 +01:00
</ScrollView>
</SafeBlueArea>
);
};
2020-12-09 10:08:02 -05:00
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,
},
});
2020-12-09 13:13:20 +01:00
2020-12-25 19:09:53 +03:00
WalletsAddMultisigHelp.navigationOptions = navigationStyle({
2020-12-09 13:13:20 +01:00
title: '',
2020-12-09 15:55:23 +01:00
gestureEnabled: false,
swipeEnabled: false,
2020-12-09 13:13:20 +01:00
headerStyle: {
2020-12-09 15:55:23 +01:00
backgroundColor: '#0070FF',
borderBottomWidth: 0,
borderBottomColor: '#0070FF',
elevation: 0,
shadowOffset: { height: 0, width: 0 },
},
headerTintColor: '#FFFFFF',
headerBackTitleVisible: false,
2020-12-07 17:48:56 +01:00
});
export default WalletsAddMultisigHelp;