diff --git a/app/src/component/rewardSummary/index.js b/app/src/component/rewardSummary/index.js
index 54dd41ef..5c2a7077 100644
--- a/app/src/component/rewardSummary/index.js
+++ b/app/src/component/rewardSummary/index.js
@@ -1,4 +1,5 @@
import { connect } from 'react-redux';
+import { doNotify } from 'lbry-redux';
import { doRewardList, selectUnclaimedRewardValue, selectFetchingRewards, selectUser } from 'lbryinc';
import RewardSummary from './view';
@@ -10,6 +11,7 @@ const select = state => ({
const perform = dispatch => ({
fetchRewards: () => dispatch(doRewardList()),
+ notify: data => dispatch(doNotify(data))
});
export default connect(select, perform)(RewardSummary);
diff --git a/app/src/component/rewardSummary/view.js b/app/src/component/rewardSummary/view.js
index 17c156a7..cbdf50d2 100644
--- a/app/src/component/rewardSummary/view.js
+++ b/app/src/component/rewardSummary/view.js
@@ -1,32 +1,54 @@
import React from 'react';
-import { NativeModules, Text, TouchableOpacity } from 'react-native';
+import { AsyncStorage, NativeModules, Text, TouchableOpacity } from 'react-native';
+import Button from '../../component/button';
import rewardStyle from '../../styles/reward';
class RewardSummary extends React.Component {
+ static itemKey = 'rewardSummaryDismissed';
+
state = {
- actionsLeft: 0
+ actionsLeft: 0,
+ dismissed: false
};
componentDidMount() {
this.props.fetchRewards();
- const { user } = this.props;
- let actionsLeft = 0;
- if (!user || !user.has_verified_email) {
- actionsLeft++;
- }
+ AsyncStorage.getItem(RewardSummary.itemKey).then(isDismissed => {
+ if ('true' === isDismissed) {
+ this.setState({ dismissed: true });
+ }
- if (!user || !user.is_identity_verified) {
- actionsLeft++;
- }
+ const { user } = this.props;
+ let actionsLeft = 0;
+ if (!user || !user.has_verified_email) {
+ actionsLeft++;
+ }
- this.setState({ actionsLeft });
+ if (!user || !user.is_identity_verified) {
+ actionsLeft++;
+ }
+
+ this.setState({ actionsLeft });
+ });
+ }
+
+ onDismissPressed = () => {
+ AsyncStorage.setItem(RewardSummary.itemKey, 'true');
+ this.setState({ dismissed: true });
+ this.props.notify({
+ message: 'You can always claim your rewards from the Rewards page.',
+ displayType: ['toast']
+ });
}
render() {
const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
- if ((user && user.is_reward_approved) || this.state.actionsLeft === 0 || unclaimedRewardAmount === 0) {
+ if (this.state.dismissed ||
+ (user && user.is_reward_approved) ||
+ this.state.actionsLeft === 0 ||
+ unclaimedRewardAmount === 0) {
return null;
}
@@ -37,6 +59,7 @@ class RewardSummary extends React.Component {
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.
+
);
}
diff --git a/app/src/styles/discover.js b/app/src/styles/discover.js
index a7316f56..ba977195 100644
--- a/app/src/styles/discover.js
+++ b/app/src/styles/discover.js
@@ -53,7 +53,9 @@ const discoverStyle = StyleSheet.create({
},
fileItemMedia: {
width: mediaWidth,
- height: mediaHeight
+ height: mediaHeight,
+ alignItems: 'center',
+ justifyContent: 'center'
},
fileItemName: {
fontFamily: 'Metropolis-Bold',
diff --git a/app/src/styles/fileItemMedia.js b/app/src/styles/fileItemMedia.js
index c379f3b3..9cd35d9a 100644
--- a/app/src/styles/fileItemMedia.js
+++ b/app/src/styles/fileItemMedia.js
@@ -1,4 +1,5 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Colors from './colors';
const fileItemMediaStyle = StyleSheet.create({
autothumb: {
@@ -11,7 +12,7 @@ const fileItemMediaStyle = StyleSheet.create({
autothumbText: {
fontFamily: 'Metropolis-SemiBold',
textAlign: 'center',
- color: '#ffffff',
+ color: Colors.White,
fontSize: 40
},
autothumbPurple: {
diff --git a/app/src/styles/fileList.js b/app/src/styles/fileList.js
index bc684a03..6eda3b23 100644
--- a/app/src/styles/fileList.js
+++ b/app/src/styles/fileList.js
@@ -24,7 +24,8 @@ const fileListStyle = StyleSheet.create({
width: thumbnailWidth,
height: thumbnailHeight,
marginRight: (screenWidthPixels <= 720) ? 10 : 12,
- justifyContent: 'center'
+ alignItems: 'center',
+ justifyContent: 'center',
},
title: {
fontFamily: 'Metropolis-SemiBold',
diff --git a/app/src/styles/reward.js b/app/src/styles/reward.js
index 66443fcf..51ec5206 100644
--- a/app/src/styles/reward.js
+++ b/app/src/styles/reward.js
@@ -155,13 +155,17 @@ const rewardStyle = StyleSheet.create({
},
summaryContainer: {
backgroundColor: Colors.LbryGreen,
- padding: 12
+ padding: 12,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center'
},
summaryText: {
color: Colors.White,
fontFamily: 'Metropolis-Regular',
fontSize: 14,
- lineHeight: 22
+ lineHeight: 20,
+ flex: 0.7
},
phoneVerificationContainer: {
paddingLeft: 4,
@@ -191,6 +195,13 @@ const rewardStyle = StyleSheet.create({
},
smsPermissionContainer: {
marginBottom: 32
+ },
+ dismissButton: {
+ alignSelf: 'center',
+ backgroundColor: Colors.White,
+ paddingLeft: 4,
+ paddingRight: 4,
+ flex: 0.2
}
});