Pending Rewards (#467)

* show unclaimed rewards amount beside floating wallet balance

app/src/component/floatingWalletBalance/index.js

@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
 import { selectBalance } from 'lbry-redux';
 import FloatingWalletBalance from './view';
+import { doRewardList, selectUnclaimedRewardValue, selectFetchingRewards, selectUser } from 'lbryinc';
 
 const select = state => ({
   balance: selectBalance(state),
+  unclaimedRewardAmount: selectUnclaimedRewardValue(state),
 });
 
 export default connect(select, null)(FloatingWalletBalance);

app/src/component/floatingWalletBalance/view.js

@@ -13,16 +13,23 @@ type Props = {
 
 class FloatingWalletBalance extends React.PureComponent<Props> {
   render() {
-    const { balance, navigation } = this.props;
+    const { balance, navigation, unclaimedRewardAmount } = this.props;
 
     return (
-      <TouchableOpacity style={[floatingButtonStyle.container, floatingButtonStyle.bottomRight]}
-                        onPress={() => navigation && navigation.navigate({ routeName: 'WalletStack' })}>
-        {isNaN(balance) && <ActivityIndicator size="small" color={Colors.White} />}
-        <Text style={floatingButtonStyle.text}>
-          {(balance || balance === 0) && (formatCredits(parseFloat(balance), 2) + ' LBC')}
-        </Text>
-      </TouchableOpacity>
+      <View style={[floatingButtonStyle.view, floatingButtonStyle.bottomRight]}>
+        <TouchableOpacity style={floatingButtonStyle.container}
+                          onPress={() => navigation && navigation.navigate({ routeName: 'WalletStack' })}>
+          {isNaN(balance) && <ActivityIndicator size="small" color={Colors.White} />}
+          <Text style={floatingButtonStyle.text}>
+            {(balance || balance === 0) && (formatCredits(parseFloat(balance), 2) + ' LBC')}
+          </Text>
+        </TouchableOpacity>
+        {unclaimedRewardAmount > 0 &&
+        <TouchableOpacity style={floatingButtonStyle.pendingContainer}
+          onPress={() => navigation && navigation.navigate({ routeName: 'Rewards' })} >
+          <Text style={floatingButtonStyle.text}>claim {unclaimedRewardAmount}</Text>
+        </TouchableOpacity>}
+      </View>
     );
   }
 }

app/src/component/rewardSummary/view.js

@@ -56,14 +56,12 @@ class RewardSummary extends React.Component {
     }
 
     return (
-      <TouchableOpacity style={rewardStyle.summaryContainer} onPress={() => {
-        navigation.navigate('Rewards');
-      }}>
+      <View style={rewardStyle.summaryContainer}>
         <Text style={rewardStyle.summaryText}>
-          You have {unclaimedRewardAmount} LBC in unclaimed rewards. You have {this.state.actionsLeft} action{this.state.actionsLeft === 1 ? '' : 's'} left to claim your first reward. Tap here to continue.
+          You have {unclaimedRewardAmount} LBC in unclaimed rewards. LBC stands for LBRY Credits which are tokens that you can use in the digital marketplace. You have {this.state.actionsLeft} action{this.state.actionsLeft === 1 ? '' : 's'} left to claim your first reward.
         </Text>
         <Button style={rewardStyle.dismissButton} theme={"light"} text={"Dismiss"} onPress={this.onDismissPressed} />
-      </TouchableOpacity>
+      </View>
     );
   }
 }

app/src/page/discover/view.js

@@ -17,7 +17,6 @@ import Colors from 'styles/colors';
 import discoverStyle from 'styles/discover';
 import FloatingWalletBalance from 'component/floatingWalletBalance';
 import FileItem from 'component/fileItem';
-import RewardSummary from 'component/rewardSummary';
 import UriBar from 'component/uriBar';
 
 class DiscoverPage extends React.PureComponent {
@@ -159,7 +158,6 @@ class DiscoverPage extends React.PureComponent {
     return (
       <View style={discoverStyle.container}>
         <UriBar navigation={navigation} />
-        <RewardSummary navigation={navigation} />
         {!hasContent && fetchingFeaturedUris && (
           <View style={discoverStyle.busyContainer}>
             <ActivityIndicator size="large" color={Colors.LbryGreen} />

app/src/page/rewards/view.js

@@ -14,6 +14,7 @@ import PhoneNumberRewardSubcard from 'component/phoneNumberRewardSubcard';
 import EmailRewardSubcard from 'component/emailRewardSubcard';
 import PageHeader from 'component/pageHeader';
 import RewardCard from 'component/rewardCard';
+import RewardSummary from 'component/rewardSummary';
 import UriBar from 'component/uriBar';
 import rewardStyle from 'styles/reward';
 
@@ -144,6 +145,7 @@ class RewardsPage extends React.PureComponent {
           keyboardShouldPersistTaps={'handled'}
           style={rewardStyle.scrollContainer}
           contentContainerStyle={rewardStyle.scrollContentContainer}>
+          <RewardSummary navigation={navigation} />
           {this.renderVerification()}
           {this.renderUnclaimedRewards()}
           {this.renderClaimedRewards()}

app/src/styles/floatingButton.js

@@ -2,8 +2,15 @@ import { StyleSheet } from 'react-native';
 import Colors from './colors';
 
 const floatingButtonStyle = StyleSheet.create({
-  container: {
+  view: {
     position: 'absolute',
+    zIndex: 100,
+    borderRadius: 24,
+    padding: 14,
+    justifyContent: 'flex-end',
+    flexDirection: 'row'
+  },
+  container: {
     zIndex: 100,
     borderRadius: 24,
     padding: 14,
@@ -11,7 +18,7 @@ const floatingButtonStyle = StyleSheet.create({
     paddingRight: 20,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: Colors.BrighterLbryGreen,
+    backgroundColor: Colors.LbryGreen,
     shadowColor: 'black',
     shadowOpacity: 0.1,
     shadowRadius: StyleSheet.hairlineWidth,
@@ -20,6 +27,17 @@ const floatingButtonStyle = StyleSheet.create({
     },
     elevation: 4
   },
+  pendingContainer: {
+    borderRadius: 24,
+    padding: 14,
+    paddingLeft: 70,
+    paddingRight: 20,
+    marginLeft: -60,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Colors.BrighterLbryGreen,
+    elevation: 3
+  },
   text: {
     color: Colors.White,
     fontFamily: 'Inter-UI-Bold',

app/src/styles/reward.js

@@ -159,17 +159,15 @@ const rewardStyle = StyleSheet.create({
   summaryContainer: {
     backgroundColor: Colors.LbryGreen,
     padding: 12,
-    marginTop: 60,
-    marginBottom: -60,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
+    marginTop: 16,
+    marginLeft: 16,
+    marginRight: 16,
   },
   summaryText: {
     color: Colors.White,
     fontFamily: 'Inter-UI-Regular',
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: 16,
+    lineHeight: 24,
     flex: 0.7
   },
   phoneVerificationContainer: {
@@ -202,11 +200,11 @@ const rewardStyle = StyleSheet.create({
     marginBottom: 32
   },
   dismissButton: {
-    alignSelf: 'center',
+    alignSelf: 'flex-end',
     backgroundColor: Colors.White,
-    paddingLeft: 4,
-    paddingRight: 4,
-    flex: 0.2
+    paddingLeft: 16,
+    paddingRight: 16,
+    marginTop: 8,
   },
   customCodeInput: {
     fontFamily: 'Inter-UI-Regular',