display lbry.tv sync custody message #134

Merged
akinwale merged 2 commits from wallet-custody into master 2020-03-24 16:17:33 +01:00
4 changed files with 65 additions and 27 deletions

@ -1 +1 @@
Subproject commit 4d1f142f9cf4f221a2110b7d7aa77b9f42731253 Subproject commit cbc4a662e670941b1c82aa6846ac56923c30af2f

View file

@ -6,6 +6,7 @@ import Address from 'component/address';
import Button from 'component/button'; import Button from 'component/button';
import Colors from 'styles/colors'; import Colors from 'styles/colors';
import Icon from 'react-native-vector-icons/FontAwesome5'; import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from 'component/link';
import walletStyle from 'styles/wallet'; import walletStyle from 'styles/wallet';
type Props = { type Props = {
@ -16,34 +17,53 @@ type Props = {
class WalletBalanceExtra extends React.PureComponent<Props> { class WalletBalanceExtra extends React.PureComponent<Props> {
render() { render() {
const { claimsBalance, supportsBalance, tipsBalance } = this.props; const { claimsBalance, deviceWalletSynced, supportsBalance, tipsBalance } = this.props;
return ( return (
<View style={walletStyle.balanceExtraCard}> <View style={walletStyle.balanceExtra}>
<View style={walletStyle.walletExtraRow}> <View style={walletStyle.syncDriverCustody}>
<View style={walletStyle.walletExtraCol}> <Text style={walletStyle.syncInfoText}>
<Icon style={walletStyle.walletExtraIcon} color={Colors.LbryGreen} name={'gift'} size={16} /> {deviceWalletSynced
<Text style={walletStyle.walletExtraCaption}>{__('You also have')}</Text> ? __('A backup of your wallet is synced with lbry.tv')
<View style={walletStyle.balanceRow}> : __('Your wallet is not currently synced with lbry.tv. You are responsible for backing up your wallet.')}
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(tipsBalance), 2)}</Text> </Text>
<Text style={walletStyle.walletExtraCurrency}>LBC</Text> <Link
</View> text={__('What does this mean?')}
<Text style={walletStyle.text}>{__('in tips')}</Text> href={
</View> deviceWalletSynced
? 'https://lbry.com/faq/account-sync'
: 'https://lbry.com/faq/how-to-backup-wallet#android'
}
style={walletStyle.syncInfoLink}
/>
</View>
<View style={walletStyle.walletExtraCol}> <View style={walletStyle.balanceExtraCard}>
<Icon style={walletStyle.walletExtraIcon} color={Colors.LbryGreen} name={'lock'} size={16} /> <View style={walletStyle.walletExtraRow}>
<Text style={walletStyle.walletExtraCaption}>{__('You staked')}</Text> <View style={walletStyle.walletExtraCol}>
<View style={walletStyle.balanceRow}> <Icon style={walletStyle.walletExtraIcon} color={Colors.LbryGreen} name={'gift'} size={16} />
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(claimsBalance), 2)}</Text> <Text style={walletStyle.walletExtraCaption}>{__('You also have')}</Text>
<Text style={walletStyle.walletExtraCurrency}>LBC</Text> <View style={walletStyle.balanceRow}>
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(tipsBalance), 2)}</Text>
<Text style={walletStyle.walletExtraCurrency}>LBC</Text>
</View>
<Text style={walletStyle.text}>{__('in tips')}</Text>
</View> </View>
<Text style={walletStyle.text}>{__('in your publishes')}</Text>
<View style={[walletStyle.balanceRow, walletStyle.walletExtraTopMargin]}> <View style={walletStyle.walletExtraCol}>
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(supportsBalance), 2)}</Text> <Icon style={walletStyle.walletExtraIcon} color={Colors.LbryGreen} name={'lock'} size={16} />
<Text style={walletStyle.walletExtraCurrency}>LBC</Text> <Text style={walletStyle.walletExtraCaption}>{__('You staked')}</Text>
<View style={walletStyle.balanceRow}>
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(claimsBalance), 2)}</Text>
<Text style={walletStyle.walletExtraCurrency}>LBC</Text>
</View>
<Text style={walletStyle.text}>{__('in your publishes')}</Text>
<View style={[walletStyle.balanceRow, walletStyle.walletExtraTopMargin]}>
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(supportsBalance), 2)}</Text>
<Text style={walletStyle.walletExtraCurrency}>LBC</Text>
</View>
<Text style={walletStyle.text}>{__('in your supports')}</Text>
</View> </View>
<Text style={walletStyle.text}>{__('in your supports')}</Text>
</View> </View>
</View> </View>
</View> </View>

View file

@ -27,7 +27,7 @@ class WalletSyncDriver extends React.PureComponent<Props> {
}, },
}, },
], ],
{ cancelable: true } { cancelable: true },
); );
} }
}; };

View file

@ -103,10 +103,12 @@ const walletStyle = StyleSheet.create({
marginLeft: 16, marginLeft: 16,
marginRight: 16, marginRight: 16,
}, },
balanceExtraCard: { balanceExtra: {
backgroundColor: Colors.White,
marginLeft: 16, marginLeft: 16,
marginRight: 16, marginRight: 16,
},
balanceExtraCard: {
backgroundColor: Colors.White,
padding: 16, padding: 16,
}, },
balanceBackground: { balanceBackground: {
@ -252,6 +254,22 @@ const walletStyle = StyleSheet.create({
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: Colors.PageBackground, borderBottomColor: Colors.PageBackground,
}, },
syncDriverCustody: {
backgroundColor: Colors.LbryGreen,
padding: 16,
},
syncInfoText: {
color: Colors.White,
fontFamily: 'Inter-Regular',
fontSize: 16,
marginBottom: 8,
},
syncInfoLink: {
color: Colors.White,
fontFamily: 'Inter-Regular',
fontSize: 14,
textDecorationLine: 'underline',
},
syncDriverLink: { syncDriverLink: {
color: Colors.LbryGreen, color: Colors.LbryGreen,
fontFamily: 'Inter-Regular', fontFamily: 'Inter-Regular',