Update wallet sync status display (#597)

* update wallet sync status display
* add disable wallet sync confirmation
* add wallet sync title
* use python 3.7 venv
This commit is contained in:
Akinwale Ariwodola 2019-07-09 01:39:10 +01:00 committed by GitHub
parent 20cd4affee
commit 60836ec5ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 160 additions and 44 deletions

View file

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { Text, TouchableOpacity } from 'react-native'; import { Text, TouchableOpacity } from 'react-native';
import Colors from 'styles/colors';
import Icon from 'react-native-vector-icons/FontAwesome5'; import Icon from 'react-native-vector-icons/FontAwesome5';
import filePageStyle from 'styles/filePage'; import filePageStyle from 'styles/filePage';

View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Text, TouchableOpacity } from 'react-native'; import { Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import walletStyle from 'styles/wallet'; import walletStyle from 'styles/wallet';
class WalletRewardsDriver extends React.PureComponent<Props> { class WalletRewardsDriver extends React.PureComponent<Props> {
@ -8,7 +9,8 @@ class WalletRewardsDriver extends React.PureComponent<Props> {
return ( return (
<TouchableOpacity style={walletStyle.rewardDriverCard} onPress={() => navigation.navigate('Rewards')}> <TouchableOpacity style={walletStyle.rewardDriverCard} onPress={() => navigation.navigate('Rewards')}>
<Text style={walletStyle.rewardDriverText}>Earn credits while using the LBRY app. Tap to get started.</Text> <Icon name="award" size={16} style={walletStyle.rewardIcon} />
<Text style={walletStyle.rewardDriverText}>Earn credits while using the LBRY app.</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }

View file

@ -1,13 +1,22 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { doSetClientSetting } from 'redux/actions/settings';
import { makeSelectClientSetting } from 'redux/selectors/settings'; import { makeSelectClientSetting } from 'redux/selectors/settings';
import { doToast } from 'lbry-redux';
import { selectUserEmail } from 'lbryinc';
import Constants from 'constants'; import Constants from 'constants';
import WalletSyncDriver from './view'; import WalletSyncDriver from './view';
const select = state => ({ const select = state => ({
deviceWalletSynced: makeSelectClientSetting(Constants.SETTING_DEVICE_WALLET_SYNCED)(state), deviceWalletSynced: makeSelectClientSetting(Constants.SETTING_DEVICE_WALLET_SYNCED)(state),
userEmail: selectUserEmail(state),
});
const perform = dispatch => ({
notify: data => dispatch(doToast(data)),
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
}); });
export default connect( export default connect(
select, select,
null perform
)(WalletSyncDriver); )(WalletSyncDriver);

View file

@ -1,45 +1,89 @@
import React from 'react'; import React from 'react';
import { Text, View } from 'react-native'; import { Alert, NativeModules, Switch, Text, View } from 'react-native';
import Button from 'component/button'; import Button from 'component/button';
import Constants from 'constants';
import Link from 'component/link'; import Link from 'component/link';
import walletStyle from 'styles/wallet'; import walletStyle from 'styles/wallet';
class WalletSyncDriver extends React.PureComponent<Props> { class WalletSyncDriver extends React.PureComponent<Props> {
onEnableSyncPressed = () => { handleSyncStatusChange = value => {
const { navigation } = this.props; const { navigation, notify, setClientSetting } = this.props;
if (value) {
// enabling
navigation.navigate({ routeName: 'Verification', key: 'verification', params: { syncFlow: true } }); navigation.navigate({ routeName: 'Verification', key: 'verification', params: { syncFlow: true } });
} else {
// turning off
// set deviceWalletSynced to false (if confirmed)
Alert.alert(
'Disable wallet sync',
'Are you sure you want to turn off wallet sync?',
[
{ text: 'No' },
{
text: 'Yes',
onPress: () => {
setClientSetting(Constants.SETTING_DEVICE_WALLET_SYNCED, false);
notify({ message: 'Wallet sync was successfully disabled.' });
},
},
],
{ cancelable: true }
);
}
}; };
render() { render() {
const { deviceWalletSynced } = this.props; const { deviceWalletSynced, userEmail } = this.props;
return ( return (
<View style={walletStyle.syncDriverCard}> <View style={walletStyle.syncDriverCard}>
<View style={walletStyle.syncDriverRow}> <Text style={walletStyle.syncDriverTitle}>Wallet Sync</Text>
<Text style={walletStyle.syncDriverTitle}>Wallet sync is {deviceWalletSynced ? 'on' : 'off'}.</Text> <View style={walletStyle.switchRow}>
<View style={walletStyle.tableCol}>
<Text style={walletStyle.labelText}>Sync status</Text>
</View>
<View style={walletStyle.tableColRow}>
<Text selectable={true} style={walletStyle.valueText}>
{deviceWalletSynced ? 'On' : 'Off'}
</Text>
<Switch
style={walletStyle.syncSwitch}
value={deviceWalletSynced}
onValueChange={this.handleSyncStatusChange}
/>
</View>
</View>
{deviceWalletSynced && (
<View style={walletStyle.tableRow}>
<View style={walletStyle.tableCol}>
<Text style={walletStyle.labelText}>Connected email</Text>
</View>
<View style={walletStyle.tableCol}>
<Text selectable={true} style={walletStyle.valueText}>
{userEmail ? userEmail : 'No connected email'}
</Text>
</View>
</View>
)}
<View style={walletStyle.linkRow}>
<View style={walletStyle.tableCol}>
<Link
text="Manual backup"
href="https://lbry.com/faq/how-to-backup-wallet#android"
style={walletStyle.syncDriverLink}
/>
</View>
<View style={walletStyle.rightTableCol}>
{!deviceWalletSynced && ( {!deviceWalletSynced && (
<Link <Link
text="Sync FAQ" text="Sync FAQ"
href="https://lbry.com/faq/how-to-backup-wallet#sync" href="https://lbry.com/faq/how-to-backup-wallet#sync"
style={walletStyle.syncDriverText} style={[walletStyle.syncDriverLink, walletStyle.rightLink]}
/> />
)} )}
</View> </View>
{!deviceWalletSynced && (
<View style={walletStyle.actionRow}>
<Button
style={walletStyle.enrollButton}
theme={'light'}
text={'Enable'}
onPress={this.onEnableSyncPressed}
/>
<Link
text="Manual backup"
href="https://lbry.com/faq/how-to-backup-wallet#android"
style={walletStyle.syncDriverText}
/>
</View> </View>
)}
</View> </View>
); );
} }

View file

@ -40,6 +40,7 @@ import thunk from 'redux-thunk';
const globalExceptionHandler = (error, isFatal) => { const globalExceptionHandler = (error, isFatal) => {
if (error && NativeModules.Firebase) { if (error && NativeModules.Firebase) {
console.log(error);
NativeModules.Firebase.logException(isFatal, error.message ? error.message : 'No message', JSON.stringify(error)); NativeModules.Firebase.logException(isFatal, error.message ? error.message : 'No message', JSON.stringify(error));
} }
}; };

View file

@ -102,7 +102,7 @@ class AboutPage extends React.PureComponent {
<View style={aboutStyle.verticalRow}> <View style={aboutStyle.verticalRow}>
<View style={aboutStyle.innerRow}> <View style={aboutStyle.innerRow}>
<View style={aboutStyle.col}> <View style={aboutStyle.col}>
<Text style={aboutStyle.text}>Connected Email</Text> <Text style={aboutStyle.text}>Connected email</Text>
</View> </View>
<View style={aboutStyle.col}> <View style={aboutStyle.col}>
<Text selectable={true} style={aboutStyle.valueText}> <Text selectable={true} style={aboutStyle.valueText}>

View file

@ -12,6 +12,7 @@ const select = state => ({
currentRoute: selectCurrentRoute(state), currentRoute: selectCurrentRoute(state),
backupDismissed: makeSelectClientSetting(Constants.SETTING_BACKUP_DISMISSED)(state), backupDismissed: makeSelectClientSetting(Constants.SETTING_BACKUP_DISMISSED)(state),
balance: selectBalance(state), balance: selectBalance(state),
deviceWalletSynced: makeSelectClientSetting(Constants.SETTING_DEVICE_WALLET_SYNCED)(state),
hasSyncedWallet: selectHasSyncedWallet(state), hasSyncedWallet: selectHasSyncedWallet(state),
rewardsNotInterested: makeSelectClientSetting(Constants.SETTING_REWARDS_NOT_INTERESTED)(state), rewardsNotInterested: makeSelectClientSetting(Constants.SETTING_REWARDS_NOT_INTERESTED)(state),
understandsRisks: makeSelectClientSetting(Constants.SETTING_ALPHA_UNDERSTANDS_RISKS)(state), understandsRisks: makeSelectClientSetting(Constants.SETTING_ALPHA_UNDERSTANDS_RISKS)(state),

View file

@ -43,8 +43,8 @@ class WalletPage extends React.PureComponent {
pushDrawerStack(); pushDrawerStack();
setPlayerVisible(); setPlayerVisible();
const { getSync, user } = this.props; const { deviceWalletSynced, getSync, user } = this.props;
if (user && user.has_verified_email) { if (deviceWalletSynced && user && user.has_verified_email) {
NativeModules.UtilityModule.getSecureValue(Constants.KEY_FIRST_RUN_PASSWORD).then(walletPassword => { NativeModules.UtilityModule.getSecureValue(Constants.KEY_FIRST_RUN_PASSWORD).then(walletPassword => {
if (walletPassword && walletPassword.trim().length > 0) { if (walletPassword && walletPassword.trim().length > 0) {
getSync(walletPassword); getSync(walletPassword);
@ -106,12 +106,12 @@ class WalletPage extends React.PureComponent {
keyboardShouldPersistTaps={'handled'} keyboardShouldPersistTaps={'handled'}
removeClippedSubviews={false} removeClippedSubviews={false}
> >
<WalletSyncDriver navigation={navigation} />
{!rewardsNotInterested && (!balance || balance === 0) && <WalletRewardsDriver navigation={navigation} />} {!rewardsNotInterested && (!balance || balance === 0) && <WalletRewardsDriver navigation={navigation} />}
<WalletBalance /> <WalletBalance />
<WalletAddress /> <WalletAddress />
<WalletSend /> <WalletSend />
<TransactionListRecent navigation={navigation} /> <TransactionListRecent navigation={navigation} />
<WalletSyncDriver navigation={navigation} />
</ScrollView> </ScrollView>
</View> </View>
); );

View file

@ -13,6 +13,14 @@ const walletStyle = StyleSheet.create({
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
}, },
linkRow: {
flexDirection: 'row',
alignItems: 'center',
paddingTop: 12,
paddingBottom: 12,
paddingLeft: 16,
paddingRight: 16,
},
amountRow: { amountRow: {
flexDirection: 'row', flexDirection: 'row',
}, },
@ -30,14 +38,14 @@ const walletStyle = StyleSheet.create({
alignSelf: 'flex-start', alignSelf: 'flex-start',
}, },
enrollButton: { enrollButton: {
backgroundColor: Colors.White, backgroundColor: Colors.LbryGreen,
alignSelf: 'flex-start', marginLeft: 12,
}, },
historyList: { historyList: {
backgroundColor: '#ffffff', backgroundColor: Colors.White,
}, },
card: { card: {
backgroundColor: '#ffffff', backgroundColor: Colors.White,
marginTop: 16, marginTop: 16,
marginLeft: 16, marginLeft: 16,
marginRight: 16, marginRight: 16,
@ -51,7 +59,7 @@ const walletStyle = StyleSheet.create({
marginRight: 16, marginRight: 16,
}, },
transactionsCard: { transactionsCard: {
backgroundColor: '#ffffff', backgroundColor: Colors.White,
margin: 16, margin: 16,
}, },
title: { title: {
@ -96,7 +104,7 @@ const walletStyle = StyleSheet.create({
height: '100%', height: '100%',
}, },
balanceTitle: { balanceTitle: {
color: '#ffffff', color: Colors.White,
fontFamily: 'Inter-UI-SemiBold', fontFamily: 'Inter-UI-SemiBold',
fontSize: 20, fontSize: 20,
marginLeft: 16, marginLeft: 16,
@ -111,7 +119,7 @@ const walletStyle = StyleSheet.create({
marginBottom: 96, marginBottom: 96,
}, },
balance: { balance: {
color: '#ffffff', color: Colors.White,
fontFamily: 'Inter-UI-Bold', fontFamily: 'Inter-UI-Bold',
fontSize: 36, fontSize: 36,
marginLeft: 16, marginLeft: 16,
@ -188,8 +196,10 @@ const walletStyle = StyleSheet.create({
marginTop: 60, marginTop: 60,
}, },
rewardDriverCard: { rewardDriverCard: {
alignItems: 'center',
backgroundColor: Colors.BrighterLbryGreen,
flexDirection: 'row',
padding: 16, padding: 16,
backgroundColor: Colors.LbryGreen,
marginLeft: 16, marginLeft: 16,
marginTop: 16, marginTop: 16,
marginRight: 16, marginRight: 16,
@ -200,20 +210,27 @@ const walletStyle = StyleSheet.create({
fontSize: 14, fontSize: 14,
lineHeight: 16, lineHeight: 16,
}, },
rewardIcon: {
color: Colors.White,
marginRight: 8,
},
syncDriverCard: { syncDriverCard: {
padding: 16, backgroundColor: Colors.White,
backgroundColor: Colors.LbryGreen,
marginLeft: 16, marginLeft: 16,
marginTop: 16, marginBottom: 16,
marginRight: 16, marginRight: 16,
}, },
syncDriverTitle: { syncDriverTitle: {
color: Colors.White,
fontFamily: 'Inter-UI-SemiBold', fontFamily: 'Inter-UI-SemiBold',
fontSize: 20, fontSize: 20,
paddingLeft: 16,
marginTop: 16,
paddingBottom: 14,
borderBottomWidth: 1,
borderBottomColor: Colors.PageBackground
}, },
syncDriverText: { syncDriverLink: {
color: Colors.White, color: Colors.LbryGreen,
fontFamily: 'Inter-UI-Regular', fontFamily: 'Inter-UI-Regular',
fontSize: 14, fontSize: 14,
}, },
@ -228,6 +245,49 @@ const walletStyle = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
}, },
switchRow: {
paddingLeft: 16,
paddingRight: 16,
paddingTop: 14,
paddingBottom: 14,
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.PageBackground,
},
tableRow: {
padding: 16,
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.PageBackground,
},
tableCol: {
flex: 0.5,
},
tableColRow: {
flex: 0.5,
alignItems: 'center',
flexDirection: 'row',
},
rightTableCol: {
flex: 0.5,
justifyContent: 'flex-end',
},
labelText: {
fontFamily: 'Inter-UI-SemiBold',
fontSize: 16,
},
valueText: {
fontFamily: 'Inter-UI-Regular',
fontSize: 16,
},
rightLink: {
alignSelf: 'flex-end',
},
syncSwitch: {
marginLeft: 8,
},
}); });
export default walletStyle; export default walletStyle;