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

app/src/component/fileRewardsDriver/view.js

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

app/src/component/walletRewardsDriver/view.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome5';
 import walletStyle from 'styles/wallet';
 
 class WalletRewardsDriver extends React.PureComponent<Props> {
@@ -8,7 +9,8 @@ class WalletRewardsDriver extends React.PureComponent<Props> {
 
     return (
       <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>
     );
   }

app/src/component/walletSyncDriver/index.js

@@ -1,13 +1,22 @@
 import { connect } from 'react-redux';
+import { doSetClientSetting } from 'redux/actions/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { doToast } from 'lbry-redux';
+import { selectUserEmail } from 'lbryinc';
 import Constants from 'constants';
 import WalletSyncDriver from './view';
 
 const select = 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(
   select,
-  null
+  perform
 )(WalletSyncDriver);

app/src/component/walletSyncDriver/view.js

@@ -1,45 +1,89 @@
 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 Constants from 'constants';
 import Link from 'component/link';
 import walletStyle from 'styles/wallet';
 
 class WalletSyncDriver extends React.PureComponent<Props> {
-  onEnableSyncPressed = () => {
-    const { navigation } = this.props;
+  handleSyncStatusChange = value => {
+    const { navigation, notify, setClientSetting } = this.props;
+    if (value) {
+      // enabling
       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() {
-    const { deviceWalletSynced } = this.props;
+    const { deviceWalletSynced, userEmail } = this.props;
 
     return (
       <View style={walletStyle.syncDriverCard}>
-        <View style={walletStyle.syncDriverRow}>
-          <Text style={walletStyle.syncDriverTitle}>Wallet sync is {deviceWalletSynced ? 'on' : 'off'}.</Text>
+        <Text style={walletStyle.syncDriverTitle}>Wallet Sync</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 && (
               <Link
                 text="Sync FAQ"
                 href="https://lbry.com/faq/how-to-backup-wallet#sync"
-              style={walletStyle.syncDriverText}
+                style={[walletStyle.syncDriverLink, walletStyle.rightLink]}
               />
             )}
           </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>
     );
   }

app/src/index.js

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

app/src/page/about/view.js

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

app/src/page/wallet/index.js

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

app/src/page/wallet/view.js

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

app/src/styles/wallet.js

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