display lbry.tv sync custody message (#134)

* display lbry.tv sync custody message
* rephrase text

src/component/walletBalanceExtra/view.js

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

src/component/walletSyncDriver/view.js

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

src/styles/wallet.js

@@ -103,10 +103,12 @@ const walletStyle = StyleSheet.create({
     marginLeft: 16,
     marginRight: 16,
   },
-  balanceExtraCard: {
-    backgroundColor: Colors.White,
+  balanceExtra: {
     marginLeft: 16,
     marginRight: 16,
+  },
+  balanceExtraCard: {
+    backgroundColor: Colors.White,
     padding: 16,
   },
   balanceBackground: {
@@ -252,6 +254,22 @@ const walletStyle = StyleSheet.create({
     borderBottomWidth: 1,
     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: {
     color: Colors.LbryGreen,
     fontFamily: 'Inter-Regular',