Merge pull request #66 from lbryio/ux-updates

rewards page and rewards driver changes

src/component/channelRewardsDriver/view.js

@@ -11,7 +11,9 @@ class ChannelRewardsDriver extends React.PureComponent<Props> {
     return (
       <TouchableOpacity style={publishStyle.rewardDriverCard} onPress={() => navigation.navigate('Rewards')}>
         <Icon name="award" size={16} style={publishStyle.rewardIcon} />
-        <Text style={publishStyle.rewardDriverText}>Earn some credits to be able to create your channel.</Text>
+        <Text style={publishStyle.rewardDriverText}>
+          Channel creation requires credits.{'\n'}Tap here to get some for free.
+        </Text>
       </TouchableOpacity>
     );
   }

src/component/publishRewardsDriver/view.js

@@ -11,7 +11,9 @@ class PublishRewardsDriver extends React.PureComponent<Props> {
     return (
       <TouchableOpacity style={publishStyle.rewardDriverCard} onPress={() => navigation.navigate('Rewards')}>
         <Icon name="award" size={16} style={publishStyle.rewardIcon} />
-        <Text style={publishStyle.rewardDriverText}>Earn some credits to be able to publish your content.</Text>
+        <Text style={publishStyle.rewardDriverText}>
+          Publishing requires credits.{'\n'}Tap here to get some for free.
+        </Text>
       </TouchableOpacity>
     );
   }

src/component/rewardEnrolment/view.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { NativeModules, Text, TouchableOpacity, View } from 'react-native';
+import { Linking, NativeModules, Text, TouchableOpacity, View } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import Button from 'component/button';
-import Constants from 'constants';
+import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import Link from 'component/link';
 import Colors from 'styles/colors';
 import Icon from 'react-native-vector-icons/FontAwesome5';
@@ -24,6 +24,10 @@ class RewardEnrolment extends React.Component {
     navigation.navigate({ routeName: 'Verification', key: 'verification', params: { syncFlow: false } });
   };
 
+  onLearnMorePressed = () => {
+    Linking.openURL('https://lbry.com/faq/earn-credits');
+  };
+
   render() {
     const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
 
@@ -31,19 +35,25 @@ class RewardEnrolment extends React.Component {
       <View style={rewardStyle.enrollContainer} onPress>
         <View style={rewardStyle.summaryRow}>
           <Icon name="award" size={36} color={Colors.White} />
-          <Text style={rewardStyle.summaryText}>{unclaimedRewardAmount} unclaimed credits</Text>
+          <Text style={rewardStyle.summaryText}>{unclaimedRewardAmount} available credits</Text>
         </View>
 
         <View style={rewardStyle.onboarding}>
           <Text style={rewardStyle.enrollDescText}>
-            LBRY credits allow you to purchase content, publish content, and influence the network. You can start
-            earning credits by watching videos on LBRY.
+            LBRY credits allow you to purchase content, publish content, and influence the network.{'\n\n'}
+            You get credits for free for providing an email address and taking other basic actions.{'\n\n'}
+            <Link style={rewardStyle.learnMoreLink} text={'Learn more'} onPress={this.onLearnMorePressed} />.
           </Text>
         </View>
 
         <View style={rewardStyle.buttonRow}>
           <Link style={rewardStyle.notInterestedLink} text={'Not interested'} onPress={this.onNotInterestedPressed} />
-          <Button style={rewardStyle.enrollButton} theme={'light'} text={'Enroll'} onPress={this.onEnrollPressed} />
+          <Button
+            style={rewardStyle.enrollButton}
+            theme={'light'}
+            text={'Get started'}
+            onPress={this.onEnrollPressed}
+          />
         </View>
       </View>
     );

src/component/rewardSummary/view.js

@@ -18,7 +18,7 @@ class RewardSummary extends React.Component {
     this.props.fetchRewards();
 
     AsyncStorage.getItem(RewardSummary.itemKey).then(isDismissed => {
-      if ('true' === isDismissed) {
+      if (isDismissed === 'true') {
         this.setState({ dismissed: true });
       }
 
@@ -71,7 +71,7 @@ class RewardSummary extends React.Component {
       <TouchableOpacity style={rewardStyle.summaryContainer} onPress={this.handleSummaryPressed}>
         <View style={rewardStyle.summaryRow}>
           <Icon name="award" size={36} color={Colors.White} />
-          <Text style={rewardStyle.summaryText}>{unclaimedRewardAmount} unclaimed credits</Text>
+          <Text style={rewardStyle.summaryText}>{unclaimedRewardAmount} available credits</Text>
         </View>
         <Button style={rewardStyle.dismissButton} theme={'light'} text={'Dismiss'} onPress={this.onDismissPressed} />
       </TouchableOpacity>

src/component/walletRewardsDriver/index.js

@@ -1,4 +1,9 @@
 import { connect } from 'react-redux';
+import { selectUnclaimedRewardValue } from 'lbryinc';
 import WalletRewardsDriver from './view';
 
-export default connect()(WalletRewardsDriver);
+const select = state => ({
+  unclaimedRewardAmount: selectUnclaimedRewardValue(state),
+});
+
+export default connect(select)(WalletRewardsDriver);

src/component/walletRewardsDriver/view.js

@@ -5,12 +5,15 @@ import walletStyle from 'styles/wallet';
 
 class WalletRewardsDriver extends React.PureComponent<Props> {
   render() {
-    const { navigation } = this.props;
+    const { navigation, unclaimedRewardAmount } = this.props;
 
     return (
       <TouchableOpacity style={walletStyle.rewardDriverCard} onPress={() => navigation.navigate('Rewards')}>
         <Icon name="award" size={16} style={walletStyle.rewardIcon} />
-        <Text style={walletStyle.rewardDriverText}>Earn credits while using the LBRY app.</Text>
+        <Text style={walletStyle.rewardDriverText}>
+          Get {unclaimedRewardAmount > 0 ? unclaimedRewardAmount : ''} free credit
+          {unclaimedRewardAmount === 1 ? '' : 's'} after creating an account.
+        </Text>
       </TouchableOpacity>
     );
   }

src/styles/reward.js

@@ -29,10 +29,7 @@ const rewardStyle = StyleSheet.create({
   },
   enrollContainer: {
     flex: 1,
-    marginTop: 76,
-    marginLeft: 16,
-    marginRight: 16,
-    marginBottom: 16,
+    marginTop: 60,
     padding: 24,
     backgroundColor: Colors.LbryGreen,
   },
@@ -250,6 +247,10 @@ const rewardStyle = StyleSheet.create({
     fontFamily: 'Inter-UI-Regular',
     color: Colors.White,
   },
+  learnMoreLink: {
+    fontFamily: 'Inter-UI-Regular',
+    color: Colors.NextLbryGreen,
+  },
   enrollButton: {
     backgroundColor: Colors.White,
     paddingLeft: 16,