From 2c9c8227847737a121a0bb761d82b6ac52a92070 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 9 May 2019 18:52:19 +0100
Subject: [PATCH 1/9] additional rewards page changes and new verification flow

---
 app/src/component/AppNavigator.js             |  10 +
 app/src/component/rewardEnrolment/index.js    |  17 ++
 app/src/component/rewardEnrolment/view.js     |  51 +++++
 app/src/constants.js                          |   6 +
 app/src/page/rewards/view.js                  |   8 +-
 app/src/page/verification/index.js            |  26 +++
 .../internal/email-verify-page.js             | 132 +++++++++++
 app/src/page/verification/view.js             | 206 ++++++++++++++++++
 app/src/styles/firstRun.js                    |  14 ++
 app/src/styles/reward.js                      |  64 +++++-
 .../browser/reactmodules/FirebaseModule.java  |   1 +
 11 files changed, 529 insertions(+), 6 deletions(-)
 create mode 100644 app/src/component/rewardEnrolment/index.js
 create mode 100644 app/src/component/rewardEnrolment/view.js
 create mode 100644 app/src/page/verification/index.js
 create mode 100644 app/src/page/verification/internal/email-verify-page.js
 create mode 100644 app/src/page/verification/view.js

diff --git a/app/src/component/AppNavigator.js b/app/src/component/AppNavigator.js
index e3185c0e..bac1441a 100644
--- a/app/src/component/AppNavigator.js
+++ b/app/src/component/AppNavigator.js
@@ -11,6 +11,7 @@ import SettingsPage from 'page/settings';
 import SplashScreen from 'page/splash';
 import SubscriptionsPage from 'page/subscriptions';
 import TransactionHistoryPage from 'page/transactionHistory';
+import VerificationScreen from 'page/verification';
 import WalletPage from 'page/wallet';
 import SearchInput from 'component/searchInput';
 import {
@@ -212,10 +213,19 @@ const mainStackNavigator = new createStackNavigator({
   },
   Main: {
     screen: drawer
+  },
+  Verification: {
+    screen: VerificationScreen,
+    navigationOptions: {
+      drawerLockMode: 'locked-closed'
+    }
   }
 }, {
   headerMode: 'none'
 });
+
+
+
 export const AppNavigator = mainStackNavigator;
 export const reactNavigationMiddleware = createReactNavigationReduxMiddleware(
   state => state.nav,
diff --git a/app/src/component/rewardEnrolment/index.js b/app/src/component/rewardEnrolment/index.js
new file mode 100644
index 00000000..da361445
--- /dev/null
+++ b/app/src/component/rewardEnrolment/index.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { doToast } from 'lbry-redux';
+import { doRewardList, selectUnclaimedRewardValue, selectFetchingRewards, selectUser } from 'lbryinc';
+import RewardEnrolment from './view';
+
+const select = state => ({
+  unclaimedRewardAmount: selectUnclaimedRewardValue(state),
+  fetching: selectFetchingRewards(state),
+  user: selectUser(state)
+});
+
+const perform = dispatch => ({
+  fetchRewards: () => dispatch(doRewardList()),
+  notify: data => dispatch(doToast(data))
+});
+
+export default connect(select, perform)(RewardEnrolment);
diff --git a/app/src/component/rewardEnrolment/view.js b/app/src/component/rewardEnrolment/view.js
new file mode 100644
index 00000000..7978488f
--- /dev/null
+++ b/app/src/component/rewardEnrolment/view.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { NativeModules, Text, TouchableOpacity, View } from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
+import Button from 'component/button';
+import Link from 'component/link';
+import Colors from 'styles/colors';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import rewardStyle from 'styles/reward';
+
+class RewardEnrolment extends React.Component {
+  componentDidMount() {
+    this.props.fetchRewards();
+  }
+
+  onNotInterestedPressed = () => {
+    const { navigation } = this.props;
+    navigation.navigate({ routeName: 'DiscoverStack' })
+  }
+
+  onEnrollPressed = () => {
+    const { navigation } = this.props;
+    navigation.navigate({ routeName: 'Verification' })
+  }
+
+  render() {
+    const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
+
+    return (
+      <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>
+        </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.</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} />
+        </View>
+
+      </View>
+    );
+  }
+}
+
+export default RewardEnrolment;
diff --git a/app/src/constants.js b/app/src/constants.js
index 07ab3e5b..ade1d5bc 100644
--- a/app/src/constants.js
+++ b/app/src/constants.js
@@ -4,6 +4,12 @@ const Constants = {
   FIRST_RUN_PAGE_WALLET: "wallet",
   FIRST_RUN_PAGE_SKIP_ACCOUNT: "skip-account",
 
+  VERIFY_PAGE_EMAIL: "email-verify",
+  VERIFY_PAGE_PHONE_NUMBER: "phone-number-verify",
+
+  PHASE_COLLECTION: "collection",
+  PHASE_VERIFICATION: "verification",
+
   CONTENT_TAB: "content",
   ABOUT_TAB: "about",
 
diff --git a/app/src/page/rewards/view.js b/app/src/page/rewards/view.js
index 39beda43..f08a8b83 100644
--- a/app/src/page/rewards/view.js
+++ b/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 RewardEnrolment from 'component/rewardEnrolment';
 import RewardSummary from 'component/rewardSummary';
 import UriBar from 'component/uriBar';
 import rewardStyle from 'styles/reward';
@@ -153,7 +154,10 @@ class RewardsPage extends React.PureComponent {
     return (
       <View style={rewardStyle.container}>
         <UriBar navigation={navigation} />
-        <ScrollView
+        {!this.state.isRewardApproved && <RewardEnrolment navigation={navigation} />}
+
+
+        {this.state.isRewardApproved && <ScrollView
           ref={ref => this.scrollView = ref}
           keyboardShouldPersistTaps={'handled'}
           style={rewardStyle.scrollContainer}
@@ -162,7 +166,7 @@ class RewardsPage extends React.PureComponent {
           {this.state.revealVerification && this.renderVerification()}
           {this.renderUnclaimedRewards()}
           {this.renderClaimedRewards()}
-        </ScrollView>
+        </ScrollView>}
       </View>
     );
   }
diff --git a/app/src/page/verification/index.js b/app/src/page/verification/index.js
new file mode 100644
index 00000000..07a85b3b
--- /dev/null
+++ b/app/src/page/verification/index.js
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { doToast } from 'lbry-redux';
+import {
+  doUserEmailNew,
+  doUserEmailToVerify,
+  selectEmailNewErrorMessage,
+  selectEmailNewIsPending,
+  selectEmailToVerify,
+  doUserResendVerificationEmail,
+} from 'lbryinc';
+import Verification from './view';
+
+const select = (state) => ({
+  emailToVerify: selectEmailToVerify(state),
+  emailNewErrorMessage: selectEmailNewErrorMessage(state),
+  emailNewPending: selectEmailNewIsPending(state),
+});
+
+const perform = dispatch => ({
+  addUserEmail: email => dispatch(doUserEmailNew(email)),
+  notify: data => dispatch(doToast(data)),
+  setEmailToVerify: email => dispatch(doUserEmailToVerify(email)),
+  resendVerificationEmail: email => dispatch(doUserResendVerificationEmail(email))
+});
+
+export default connect(select, perform)(Verification);
diff --git a/app/src/page/verification/internal/email-verify-page.js b/app/src/page/verification/internal/email-verify-page.js
new file mode 100644
index 00000000..6adfd835
--- /dev/null
+++ b/app/src/page/verification/internal/email-verify-page.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import { Lbry } from 'lbry-redux';
+import { ActivityIndicator, View, Text, TextInput } from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
+import Button from 'component/button';
+import Link from 'component/link';
+import Colors from 'styles/colors';
+import Constants from 'constants';
+import firstRunStyle from 'styles/firstRun';
+import rewardStyle from 'styles/reward';
+
+class EmailVerifyPage extends React.PureComponent {
+  state = {
+    email: null,
+    phase: Constants.PHASE_COLLECTION,
+    placeholder: 'you@example.com',
+    verifyStarted: false,
+    previousEmail: null
+  }
+
+  handleChangeText = (text) => {
+    this.setState({ email: text });
+    AsyncStorage.setItem(Constants.KEY_FIRST_RUN_EMAIL, text);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { emailNewErrorMessage, emailNewPending, emailToVerify } = nextProps;
+    const { notify } = this.props;
+
+    if (this.state.verifyStarted && !emailNewPending) {
+      if (emailNewErrorMessage) {
+        notify({ message: String(emailNewErrorMessage), isError: true });
+        this.setState({ verifyStarted: false });
+      } else {
+        this.setState({ phase: Constants.PHASE_VERIFICATION });
+        //notify({ message: 'Please follow the instructions in the email sent to your address to continue.' });
+        AsyncStorage.setItem(Constants.KEY_EMAIL_VERIFY_PENDING, 'true');
+      }
+    }
+  }
+
+  onSendVerificationPressed = () => {
+    const { addUserEmail, emailNewPending, notify } = this.props;
+
+    if (emailNewPending) {
+      return;
+    }
+
+    const { email } = this.state;
+    if (!email || email.trim().length === 0 || email.indexOf('@') === -1) {
+      return notify({
+        message: 'Please provide a valid email address to continue.',
+      });
+    }
+
+    if (this.state.previousEmail === this.state.email) {
+      // resend
+      resendVerificationEmail(this.state.email);
+      AsyncStorage.setItem(Constants.KEY_EMAIL_VERIFY_PENDING, 'true');
+      this.setState({ verifyStarted: true, phase: Constants.PHASE_VERIFICATION });
+      return;
+    }
+
+    this.setState({ verifyStarted: true });
+    addUserEmail(email);
+  }
+
+  onResendPressed = () => {
+    const { resendVerificationEmail, notify } = this.props;
+    // resend verification email if there was one previously set (and it wasn't changed)
+    resendVerificationEmail(this.state.email);
+    AsyncStorage.setItem(Constants.KEY_EMAIL_VERIFY_PENDING, 'true');
+    notify({ message: 'Please follow the instructions in the email sent to your address to continue.' });
+  }
+
+  onEditPressed = () => {
+    this.setState({ verifyStarted: false, phase: Constants.PHASE_COLLECTION, previousEmail: this.state.email });
+  }
+
+  render() {
+    const { emailNewPending } = this.props;
+
+    return (
+      <View style={firstRunStyle.container}>
+        <Text style={rewardStyle.verificationTitle}>{(Constants.PHASE_COLLECTION === this.state.phase) ? 'Email' : 'Verify Email'}</Text>
+        {(Constants.PHASE_COLLECTION === this.state.phase) &&
+          <View>
+            <Text style={firstRunStyle.paragraph}>Please provide an email address.</Text>
+            <TextInput style={firstRunStyle.emailInput}
+              placeholder={this.state.placeholder}
+              underlineColorAndroid="transparent"
+              value={this.state.email}
+              onChangeText={text => this.handleChangeText(text)}
+              onFocus={() => {
+                if (!this.state.email || this.state.email.length === 0) {
+                  this.setState({ placeholder: '' });
+                }
+              }}
+              onBlur={() => {
+                if (!this.state.email || this.state.email.length === 0) {
+                  this.setState({ placeholder: 'you@example.com' });
+                }
+              }}
+              />
+            <View style={rewardStyle.buttonContainer}>
+              {!this.state.verifyStarted &&
+                <Button
+                  style={rewardStyle.verificationButton}
+                  theme={"light"}
+                  text={"Send verification email"}
+                  onPress={this.onSendVerificationPressed} />}
+              {this.state.verifyStarted && emailNewPending &&
+                <ActivityIndicator size={"small"} color={Colors.White} style={rewardStyle.loading} />}
+            </View>
+          </View>}
+
+        {(Constants.PHASE_VERIFICATION === this.state.phase) &&
+          <View>
+            <Text style={firstRunStyle.paragraph}>An email has been sent to {this.state.email}.</Text>
+
+            <View style={rewardStyle.buttonContainer}>
+              <Button style={rewardStyle.verificationButton} theme={"light"} text={"Resend"} onPress={this.onResendPressed} />
+              <Link style={rewardStyle.verificationLink} text={"Edit"} onPress={this.onEditPressed} />
+            </View>
+          </View>
+        }
+      </View>
+    );
+  }
+}
+
+export default EmailVerifyPage;
diff --git a/app/src/page/verification/view.js b/app/src/page/verification/view.js
new file mode 100644
index 00000000..3d9dc7b7
--- /dev/null
+++ b/app/src/page/verification/view.js
@@ -0,0 +1,206 @@
+import React from 'react';
+import { Lbry } from 'lbry-redux';
+import {
+  ActivityIndicator,
+  Linking,
+  NativeModules,
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native';
+import { NavigationActions, StackActions } from 'react-navigation';
+import AsyncStorage from '@react-native-community/async-storage';
+import Colors from 'styles/colors';
+import Constants from 'constants';
+import EmailVerifyPage from './internal/email-verify-page';
+import firstRunStyle from 'styles/firstRun';
+
+class VerificationScreen extends React.PureComponent {
+  state = {
+    currentPage: null,
+    emailSubmitted: false,
+    isFirstRun: false,
+    launchUrl: null,
+    showSkip: false,
+    skipAccountConfirmed: false,
+    showBottomContainer: true,
+    walletPassword: null
+  };
+
+  componentDidMount() {
+    const { navigation } = this.props;
+
+    this.setState({ currentPage: 'emailVerify' });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { emailNewErrorMessage, emailNewPending } = nextProps;
+    const { notify } = this.props;
+
+    /*if (this.state.emailSubmitted && !emailNewPending) {
+      this.setState({ emailSubmitted: false });
+      if (emailNewErrorMessage) {
+        notify ({ message: String(emailNewErrorMessage), isError: true });
+      } else {
+        // Request successful. Navigate to next page (wallet).
+        this.showNextPage();
+      }
+    }*/
+  }
+
+  handleLeftButtonPressed = () => {
+    /*// Go to setup account page when "Setup account" is pressed
+    if (Constants.FIRST_RUN_PAGE_SKIP_ACCOUNT === this.state.currentPage) {
+      return this.showPage(Constants.FIRST_RUN_PAGE_EMAIL_COLLECT);
+    }
+
+    // Go to skip account page when "No, thanks" is pressed
+    if (Constants.FIRST_RUN_PAGE_EMAIL_COLLECT === this.state.currentPage) {
+      this.showPage(Constants.FIRST_RUN_PAGE_SKIP_ACCOUNT);
+    }*/
+  }
+
+  handleContinuePressed = () => {
+    /*const { notify } = this.props;
+    const pageIndex = FirstRunScreen.pages.indexOf(this.state.currentPage);
+    if (Constants.FIRST_RUN_PAGE_WALLET === this.state.currentPage) {
+      if (!this.state.walletPassword || this.state.walletPassword.trim().length < 6) {
+        return notify({ message: 'Your wallet password should be at least 6 characters long' });
+      }
+
+      this.closeFinalPage();
+      return;
+    }
+
+    if (Constants.FIRST_RUN_PAGE_SKIP_ACCOUNT === this.state.currentPage && !this.state.skipAccountConfirmed) {
+      notify({ message: 'Please confirm that you want to use LBRY without creating an account.' });
+      return;
+    }
+
+    if (Constants.FIRST_RUN_PAGE_EMAIL_COLLECT !== this.state.currentPage && pageIndex === (FirstRunScreen.pages.length - 1)) {
+      this.closeFinalPage();
+    } else {
+      // TODO: Actions and page verification for specific pages
+      if (Constants.FIRST_RUN_PAGE_EMAIL_COLLECT === this.state.currentPage) {
+        // handle email collect
+        this.handleEmailCollectPageContinue();
+      } else {
+        this.showNextPage();
+      }
+    }*/
+  }
+
+  handleEmailCollectPageContinue() {
+    /*const { notify, addUserEmail } = this.props;
+
+    AsyncStorage.getItem(Constants.KEY_FIRST_RUN_EMAIL).then(email => {
+      // validate the email
+      if (!email || email.indexOf('@') === -1) {
+        return notify({
+          message: 'Please provide a valid email address to continue.',
+        });
+      }
+
+      addUserEmail(email);
+      this.setState({ emailSubmitted: true });
+    });*/
+  }
+
+  showNextPage() {
+    const pageIndex = FirstRunScreen.pages.indexOf(this.state.currentPage);
+    const nextPage = FirstRunScreen.pages[pageIndex + 1];
+    this.setState({ currentPage: nextPage });
+    if (nextPage === 'email-collect') {
+      // do not show the buttons (because we're waiting to get things ready)
+      this.setState({ showBottomContainer: false });
+    }
+  }
+
+  showPage(pageName) {
+    const pageIndex = FirstRunScreen.pages.indexOf(pageName);
+    if (pageIndex > -1) {
+      this.setState({ currentPage: pageName });
+    }
+  }
+
+  closeFinalPage() {
+    // Final page. Let the app know that first run experience is completed.
+    if (NativeModules.FirstRun) {
+      NativeModules.FirstRun.firstRunCompleted();
+    }
+
+    // Navigate to the splash screen
+    this.launchSplashScreen();
+  }
+
+  onEmailChanged = (email) => {
+    if (Constants.FIRST_RUN_PAGE_EMAIL_COLLECT == this.state.currentPage) {
+      this.setState({ showSkip: (!email || email.trim().length === 0) });
+    } else {
+      this.setState({ showSkip: false });
+    }
+  }
+
+  onEmailViewLayout = () => {
+    this.setState({ showBottomContainer: true });
+    AsyncStorage.getItem('firstRunEmail').then(email => {
+      this.setState({ showSkip: !email || email.trim().length === 0 });
+    });
+  }
+
+  onCloseButtonPressed = () => {
+    const { navigation } = this.props;
+    navigation.goBack();
+  }
+
+  onWalletPasswordChanged = (password) => {
+    this.setState({ walletPassword: password });
+  }
+
+  onWalletViewLayout = () => {
+    this.setState({ showBottomContainer: true });
+  }
+
+  onSkipSwitchChanged = (checked) => {
+    this.setState({ skipAccountConfirmed: checked });
+  }
+
+  render() {
+    const {
+      addUserEmail,
+      emailNewErrorMessage,
+      emailNewPending,
+      emailToVerify,
+      notify,
+      resendVerificationEmail
+    } = this.props;
+
+    let page = null;
+    switch (this.state.currentPage) {
+      case 'emailVerify':
+        page = (
+          <EmailVerifyPage
+            addUserEmail={addUserEmail}
+            emailNewErrorMessage={emailNewErrorMessage}
+            emailNewPending={emailNewPending}
+            emailToVerify={emailToVerify}
+            notify={notify}
+            resendVerificationEmail={resendVerificationEmail}
+          />
+        );
+        break;
+    }
+
+    return (
+      <View style={firstRunStyle.screenContainer}>
+        {page}
+
+        <TouchableOpacity style={firstRunStyle.closeButton} onPress={this.onCloseButtonPressed}>
+          <Text style={firstRunStyle.closeButtonText}>x</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+export default VerificationScreen;
diff --git a/app/src/styles/firstRun.js b/app/src/styles/firstRun.js
index bb17877a..45f2cec8 100644
--- a/app/src/styles/firstRun.js
+++ b/app/src/styles/firstRun.js
@@ -129,6 +129,20 @@ const firstRunStyle = StyleSheet.create({
   },
   titleIcon: {
     marginTop: 8
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 48,
+    height: 48,
+    borderRadius: 48,
+    justifyContent: 'center'
+  },
+  closeButtonText: {
+    alignSelf: 'center',
+    color: Colors.White,
+    fontSize: 16
   }
 });
 
diff --git a/app/src/styles/reward.js b/app/src/styles/reward.js
index 0ac26c18..f7ea57f8 100644
--- a/app/src/styles/reward.js
+++ b/app/src/styles/reward.js
@@ -27,6 +27,24 @@ const rewardStyle = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row'
   },
+  enrollContainer: {
+    flex: 1,
+    marginTop: 76,
+    marginLeft: 16,
+    marginRight: 16,
+    marginBottom: 16,
+    padding: 24,
+    backgroundColor: Colors.LbryGreen
+  },
+  onboarding: {
+    marginTop: 36
+  },
+  enrollDescText: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 18,
+    lineHeight: 28,
+    color: Colors.White
+  },
   rewardsContainer: {
     flex: 1
   },
@@ -202,12 +220,24 @@ const rewardStyle = StyleSheet.create({
   smsPermissionContainer: {
     marginBottom: 32
   },
-  dismissButton: {
-    alignSelf: 'flex-end',
+  buttonRow: {
+    width: '100%',
+    position: 'absolute',
+    alignItems: 'center',
+    left: 24,
+    bottom: 24,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  notInterestedLink: {
+    fontSize: 14,
+    fontFamily: 'Inter-UI-Regular',
+    color: Colors.White
+  },
+  enrollButton: {
     backgroundColor: Colors.White,
     paddingLeft: 16,
-    paddingRight: 16,
-    marginTop: 8,
+    paddingRight: 16
   },
   customCodeInput: {
     fontFamily: 'Inter-UI-Regular',
@@ -222,6 +252,32 @@ const rewardStyle = StyleSheet.create({
   },
   failureFootnote: {
     marginTop: 12
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingLeft: 32,
+    paddingRight: 32,
+    marginTop: 24
+  },
+  verificationTitle: {
+    fontSize: 32,
+    color: Colors.White,
+    fontFamily: 'Inter-UI-Regular',
+    marginLeft: 32,
+    marginRight: 32,
+    marginBottom: 24
+  },
+  verificationButton: {
+    backgroundColor: Colors.White,
+    paddingLeft: 16,
+    paddingRight: 16
+  },
+  verificationLink: {
+    color: Colors.White,
+    fontSize: 14
   }
 });
 
diff --git a/src/main/java/io/lbry/browser/reactmodules/FirebaseModule.java b/src/main/java/io/lbry/browser/reactmodules/FirebaseModule.java
index 7804091d..55910f3f 100644
--- a/src/main/java/io/lbry/browser/reactmodules/FirebaseModule.java
+++ b/src/main/java/io/lbry/browser/reactmodules/FirebaseModule.java
@@ -55,6 +55,7 @@ public class FirebaseModule extends ReactContextBaseJavaModule {
     @ReactMethod
     public void logException(boolean fatal, String message, ReadableMap payload) {
         Bundle bundle = new Bundle();
+        bundle.putString("message", message);
         if (payload != null) {
             HashMap<String, Object> payloadMap = payload.toHashMap();
             for (Map.Entry<String, Object> entry : payloadMap.entrySet()) {
-- 
2.45.3


From a3bbe8a419ec4b08b2b93d35a32957891009d95f Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 10 May 2019 09:14:50 +0100
Subject: [PATCH 2/9] finish phone number verification and styling

---
 app/src/page/rewards/view.js                  |  21 +-
 app/src/page/verification/index.js            |  18 +-
 .../internal/email-verify-page.js             |   2 +-
 .../internal/phone-verify-page.js             | 235 ++++++++++++++++++
 app/src/page/verification/view.js             | 177 ++++---------
 app/src/styles/reward.js                      |  28 ++-
 6 files changed, 331 insertions(+), 150 deletions(-)
 create mode 100644 app/src/page/verification/internal/phone-verify-page.js

diff --git a/app/src/page/rewards/view.js b/app/src/page/rewards/view.js
index f08a8b83..e13e5e1e 100644
--- a/app/src/page/rewards/view.js
+++ b/app/src/page/rewards/view.js
@@ -25,7 +25,7 @@ class RewardsPage extends React.PureComponent {
     isIdentityVerified: false,
     isRewardApproved: false,
     verifyRequestStarted: false,
-    revealVerification: false
+    revealVerification: true
   };
 
   scrollView = null;
@@ -71,23 +71,12 @@ class RewardsPage extends React.PureComponent {
       return null;
     }
 
-    if (!this.state.isEmailVerified || !this.state.isIdentityVerified) {
-      return (
-        <View style={[rewardStyle.card, rewardStyle.verification]}>
-          <Text style={rewardStyle.title}>Humans Only</Text>
-          <Text style={rewardStyle.text}>Rewards are for human beings only. You'll have to prove you're one of us before you can claim any rewards.</Text>
-          {!this.state.isEmailVerified && <EmailRewardSubcard />}
-          {this.state.isEmailVerified && !this.state.isIdentityVerified && <PhoneNumberRewardSubcard />}
-        </View>
-      );
-    }
-
     if (this.state.isEmailVerified && this.state.isIdentityVerified && !this.state.isRewardApproved) {
       return (
         <View style={[rewardStyle.card, rewardStyle.verification]}>
           <Text style={rewardStyle.title}>Manual Reward Verification</Text>
           <Text style={rewardStyle.text}>
-            You need to be manually verified before you can start claiming rewards. Please request to be verified on the <Link style={rewardStyle.textLink} href="https://discordapp.com/invite/Z3bERWA" text="LBRY Discord server" />.
+            You need to be manually verified before you can start claiming rewards. Please request to be verified on the <Link style={rewardStyle.greenLink} href="https://discordapp.com/invite/Z3bERWA" text="LBRY Discord server" />.
           </Text>
         </View>
       );
@@ -154,15 +143,13 @@ class RewardsPage extends React.PureComponent {
     return (
       <View style={rewardStyle.container}>
         <UriBar navigation={navigation} />
-        {!this.state.isRewardApproved && <RewardEnrolment navigation={navigation} />}
+        {(!this.state.isEmailVerified || !this.state.isIdentityVerified) && <RewardEnrolment navigation={navigation} />}
 
-
-        {this.state.isRewardApproved && <ScrollView
+        {(this.state.isEmailVerified && this.state.isIdentityVerified) && <ScrollView
           ref={ref => this.scrollView = ref}
           keyboardShouldPersistTaps={'handled'}
           style={rewardStyle.scrollContainer}
           contentContainerStyle={rewardStyle.scrollContentContainer}>
-          <RewardSummary navigation={navigation} showVerification={this.showVerification} />
           {this.state.revealVerification && this.renderVerification()}
           {this.renderUnclaimedRewards()}
           {this.renderClaimedRewards()}
diff --git a/app/src/page/verification/index.js b/app/src/page/verification/index.js
index 07a85b3b..427c188d 100644
--- a/app/src/page/verification/index.js
+++ b/app/src/page/verification/index.js
@@ -3,10 +3,18 @@ import { doToast } from 'lbry-redux';
 import {
   doUserEmailNew,
   doUserEmailToVerify,
+  doUserResendVerificationEmail,
+  doUserPhoneNew,
+  doUserPhoneVerify,
+  selectPhoneNewErrorMessage,
+  selectPhoneNewIsPending,
+  selectPhoneToVerify,
+  selectPhoneVerifyIsPending,
+  selectPhoneVerifyErrorMessage,
   selectEmailNewErrorMessage,
   selectEmailNewIsPending,
   selectEmailToVerify,
-  doUserResendVerificationEmail,
+  selectUser,
 } from 'lbryinc';
 import Verification from './view';
 
@@ -14,10 +22,18 @@ const select = (state) => ({
   emailToVerify: selectEmailToVerify(state),
   emailNewErrorMessage: selectEmailNewErrorMessage(state),
   emailNewPending: selectEmailNewIsPending(state),
+  user: selectUser(state),
+  phoneVerifyErrorMessage: selectPhoneVerifyErrorMessage(state),
+  phoneVerifyIsPending: selectPhoneVerifyIsPending(state),
+  phone: selectPhoneToVerify(state),
+  phoneNewErrorMessage: selectPhoneNewErrorMessage(state),
+  phoneNewIsPending: selectPhoneNewIsPending(state),
 });
 
 const perform = dispatch => ({
   addUserEmail: email => dispatch(doUserEmailNew(email)),
+  addUserPhone: (phone, country_code) => dispatch(doUserPhoneNew(phone, country_code)),
+  verifyPhone: (verificationCode) => dispatch(doUserPhoneVerify(verificationCode)),
   notify: data => dispatch(doToast(data)),
   setEmailToVerify: email => dispatch(doUserEmailToVerify(email)),
   resendVerificationEmail: email => dispatch(doUserResendVerificationEmail(email))
diff --git a/app/src/page/verification/internal/email-verify-page.js b/app/src/page/verification/internal/email-verify-page.js
index 6adfd835..1da92186 100644
--- a/app/src/page/verification/internal/email-verify-page.js
+++ b/app/src/page/verification/internal/email-verify-page.js
@@ -116,7 +116,7 @@ class EmailVerifyPage extends React.PureComponent {
 
         {(Constants.PHASE_VERIFICATION === this.state.phase) &&
           <View>
-            <Text style={firstRunStyle.paragraph}>An email has been sent to {this.state.email}.</Text>
+            <Text style={firstRunStyle.paragraph}>An email has been sent to {this.state.email}. Please follow the instructions in the message to verify your email address.</Text>
 
             <View style={rewardStyle.buttonContainer}>
               <Button style={rewardStyle.verificationButton} theme={"light"} text={"Resend"} onPress={this.onResendPressed} />
diff --git a/app/src/page/verification/internal/phone-verify-page.js b/app/src/page/verification/internal/phone-verify-page.js
new file mode 100644
index 00000000..e698ba5e
--- /dev/null
+++ b/app/src/page/verification/internal/phone-verify-page.js
@@ -0,0 +1,235 @@
+// @flow
+import React from 'react';
+import {
+  ActivityIndicator,
+  DeviceEventEmitter,
+  NativeModules,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View
+} from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
+import Button from 'component/button';
+import Colors from 'styles/colors';
+import Constants from 'constants';
+import CountryPicker from 'react-native-country-picker-modal';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import Link from 'component/link';
+import PhoneInput from 'react-native-phone-input';
+import firstRunStyle from 'styles/firstRun';
+import rewardStyle from 'styles/reward';
+
+class PhoneVerifyPage extends React.PureComponent {
+  phoneInput = null;
+
+  picker = null;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      canReceiveSms: false,
+      cca2: 'US',
+      codeVerifyStarted: false,
+      codeVerifySuccessful: false,
+      countryCode: null,
+      newPhoneAdded: false,
+      number: null,
+      phoneVerifyFailed: false,
+      verificationCode: null,
+      phase: Constants.PHASE_COLLECTION
+    };
+  }
+
+  componentDidMount() {
+    const { phone } = this.props;
+    if (phone && String(phone).trim().length > 0) {
+      this.setState({ newPhoneAdded: true, phase: Constants.PHASE_VERIFICATION });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      phoneVerifyIsPending,
+      phoneVerifyErrorMessage,
+      notify,
+      phoneNewErrorMessage,
+      phoneNewIsPending,
+      onPhoneVerifySuccessful
+    } = this.props;
+
+    if (!phoneNewIsPending && (phoneNewIsPending !== prevProps.phoneNewIsPending)) {
+      if (phoneNewErrorMessage) {
+        notify({ message: String(phoneNewErrorMessage) });
+        this.setState({ phoneVerifyFailed: true });
+      } else {
+        this.setState({ newPhoneAdded: true, phase: Constants.PHASE_VERIFICATION, phoneVerifyFailed: false });
+      }
+    }
+    if (!phoneVerifyIsPending && (phoneVerifyIsPending !== prevProps.phoneVerifyIsPending)) {
+      if (phoneVerifyErrorMessage) {
+        notify({ message: String(phoneVerifyErrorMessage) });
+        this.setState({ codeVerifyStarted: false, phoneVerifyFailed: true });
+      } else {
+        notify({ message: 'Your phone number was successfully verified.' });
+        this.setState({ codeVerifySuccessful: true, phoneVerifyFailed: false });
+        if (onPhoneVerifySuccessful) {
+          onPhoneVerifySuccessful();
+        }
+      }
+    }
+  }
+
+  onEditPressed = () => {
+    this.setState({ newPhoneAdded: false, phase: Constants.PHASE_COLLECTION, phoneVerifyFailed: false });
+  }
+
+  receiveVerificationCode = (evt) => {
+    if (!this.state.newPhoneAdded || this.state.codeVerifySuccessful) {
+      return;
+    }
+
+    const { verifyPhone } = this.props;
+    this.setState({ codeVerifyStarted: true });
+    verifyPhone(evt.code);
+  }
+
+  onSendTextPressed = () => {
+    const { addUserPhone, notify } = this.props;
+
+    if (!this.phoneInput.isValidNumber()) {
+      return notify({
+        message: 'Please provide a valid telephone number.',
+      });
+    }
+
+    this.setState({ phoneVerifyFailed: false });
+    const countryCode = this.phoneInput.getCountryCode();
+    const number = this.phoneInput.getValue().replace('+' + countryCode, '');
+    this.setState({ countryCode, number });
+    addUserPhone(number, countryCode);
+  }
+
+  onVerifyPressed = () => {
+    if (this.state.codeVerifyStarted) {
+      return;
+    }
+
+    const { verifyPhone } = this.props;
+    this.setState({ codeVerifyStarted: true, phoneVerifyFailed: false });
+    verifyPhone(this.state.verificationCode);
+  }
+
+  onPressFlag = () => {
+    if (this.picker) {
+      this.picker.openModal();
+    }
+  }
+
+  selectCountry(country) {
+    this.phoneInput.selectCountry(country.cca2.toLowerCase());
+    this.setState({ cca2: country.cca2 });
+  }
+
+  handleChangeText = (text) => {
+    this.setState({ verificationCode: text });
+  };
+
+  render() {
+    const {
+      phoneVerifyIsPending,
+      phoneVerifyErrorMessage,
+      phone,
+      phoneErrorMessage,
+      phoneNewIsPending
+    } = this.props;
+
+    return (
+      <View style={firstRunStyle.container}>
+        <Text style={rewardStyle.verificationTitle}>{this.state.phase === Constants.PHASE_VERIFICATION ? 'Verify ' : '' }Phone Number</Text>
+
+        <View style={rewardStyle.phoneVerificationContainer}>
+          {this.state.phase == Constants.PHASE_COLLECTION &&
+            <View>
+              <Text style={[rewardStyle.bottomMarginMedium, firstRunStyle.paragraph]}>Please provide a phone number to prevent fraud.</Text>
+              <PhoneInput
+                ref={(ref) => { this.phoneInput = ref; }}
+                style={StyleSheet.flatten(rewardStyle.phoneInput)}
+                textProps={{ placeholder: '(phone number)' }}
+                textStyle={StyleSheet.flatten(rewardStyle.phoneInputText)}
+                onPressFlag={this.onPressFlag} />
+
+              <View style={rewardStyle.buttonContainer}>
+                {!phoneNewIsPending &&
+                  <Button
+                    style={[rewardStyle.verificationButton, rewardStyle.topMarginMedium]}
+                    theme={"light"}
+                    text={"Send verification text"}
+                    onPress={this.onSendTextPressed} />}
+                {phoneNewIsPending &&
+                  <ActivityIndicator
+                    style={[rewardStyle.loading, rewardStyle.topMarginMedium]}
+                    size="small"
+                    color={Colors.White} />}
+              </View>
+            </View>}
+
+          {this.state.phase === Constants.PHASE_VERIFICATION &&
+            <View>
+              {!phoneVerifyIsPending && !this.codeVerifyStarted &&
+                <View>
+                  <Text style={[rewardStyle.bottomMarginSmall, firstRunStyle.paragraph]}>
+                    Please enter the verification code sent to {phone}.
+                  </Text>
+                  <TextInput
+                    style={rewardStyle.verificationCodeInput}
+                    keyboardType="numeric"
+                    placeholder="0000"
+                    underlineColorAndroid="transparent"
+                    value={this.state.verificationCode}
+                    onChangeText={text => this.handleChangeText(text)}
+                  />
+                  <View style={rewardStyle.buttonContainer}>
+                    <Button
+                      style={[rewardStyle.verificationButton, rewardStyle.topMarginSmall]}
+                      theme={"light"}
+                      text={"Verify"}
+                      onPress={this.onVerifyPressed} />
+                    <Link style={rewardStyle.verificationLink} text={"Edit"} onPress={this.onEditPressed} />
+                  </View>
+                </View>
+              }
+              {phoneVerifyIsPending &&
+                <View>
+                  <Text style={firstRunStyle.paragraph}>Verifying your phone number...</Text>
+                  <ActivityIndicator
+                    color={Colors.White}
+                    size="small"
+                    style={[rewardStyle.loading, rewardStyle.topMarginMedium, rewardStyle.leftRightMargin]} />
+                </View>}
+            </View>
+          }
+          {this.state.phoneVerifyFailed &&
+            <View style={rewardStyle.failureFootnote}>
+              <Text style={rewardStyle.paragraphText}>
+                Sorry, we were unable to verify your phone number. Please go to <Link style={rewardStyle.textLink} href="http://chat.lbry.com" text="chat.lbry.com" /> for manual verification if this keeps happening.
+              </Text>
+            </View>}
+        </View>
+
+        <CountryPicker
+          ref={(picker) => { this.picker = picker; }}
+          cca2={this.state.cca2}
+          filterable={true}
+          onChange={value => this.selectCountry(value)}
+          showCallingCode={true}
+          translation="eng">
+          <View />
+        </CountryPicker>
+      </View>
+    );
+  }
+};
+
+export default PhoneVerifyPage;
diff --git a/app/src/page/verification/view.js b/app/src/page/verification/view.js
index 3d9dc7b7..afbdc27f 100644
--- a/app/src/page/verification/view.js
+++ b/app/src/page/verification/view.js
@@ -13,6 +13,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import Colors from 'styles/colors';
 import Constants from 'constants';
 import EmailVerifyPage from './internal/email-verify-page';
+import PhoneVerifyPage from './internal/phone-verify-page';
 import firstRunStyle from 'styles/firstRun';
 
 class VerificationScreen extends React.PureComponent {
@@ -24,128 +25,41 @@ class VerificationScreen extends React.PureComponent {
     showSkip: false,
     skipAccountConfirmed: false,
     showBottomContainer: true,
-    walletPassword: null
+    walletPassword: null,
+    isEmailVerified: false,
+    isIdentityVerified: false
   };
 
   componentDidMount() {
+    const { user } = this.props;
+    this.checkVerificationStatus(user);
+  }
+
+  checkVerificationStatus = (user) => {
     const { navigation } = this.props;
 
-    this.setState({ currentPage: 'emailVerify' });
+    this.setState({
+      isEmailVerified: (user && user.primary_email && user.has_verified_email),
+      isIdentityVerified: (user && user.is_identity_verified)
+    }, () => {
+      if (!this.state.isEmailVerified) {
+        this.setState({ currentPage: 'emailVerify' });
+      }
+      if (this.state.isEmailVerified && !this.state.isIdentityVerified) {
+        this.setState({ currentPage: 'phoneVerify' });
+      }
+
+      if (this.state.isEmailVerified && this.state.isIdentityVerified) {
+        // verification steps already completed
+        // simply navigate back to the rewards page
+        navigation.goBack();
+      }
+    });
   }
 
   componentWillReceiveProps(nextProps) {
-    const { emailNewErrorMessage, emailNewPending } = nextProps;
-    const { notify } = this.props;
-
-    /*if (this.state.emailSubmitted && !emailNewPending) {
-      this.setState({ emailSubmitted: false });
-      if (emailNewErrorMessage) {
-        notify ({ message: String(emailNewErrorMessage), isError: true });
-      } else {
-        // Request successful. Navigate to next page (wallet).
-        this.showNextPage();
-      }
-    }*/
-  }
-
-  handleLeftButtonPressed = () => {
-    /*// Go to setup account page when "Setup account" is pressed
-    if (Constants.FIRST_RUN_PAGE_SKIP_ACCOUNT === this.state.currentPage) {
-      return this.showPage(Constants.FIRST_RUN_PAGE_EMAIL_COLLECT);
-    }
-
-    // Go to skip account page when "No, thanks" is pressed
-    if (Constants.FIRST_RUN_PAGE_EMAIL_COLLECT === this.state.currentPage) {
-      this.showPage(Constants.FIRST_RUN_PAGE_SKIP_ACCOUNT);
-    }*/
-  }
-
-  handleContinuePressed = () => {
-    /*const { notify } = this.props;
-    const pageIndex = FirstRunScreen.pages.indexOf(this.state.currentPage);
-    if (Constants.FIRST_RUN_PAGE_WALLET === this.state.currentPage) {
-      if (!this.state.walletPassword || this.state.walletPassword.trim().length < 6) {
-        return notify({ message: 'Your wallet password should be at least 6 characters long' });
-      }
-
-      this.closeFinalPage();
-      return;
-    }
-
-    if (Constants.FIRST_RUN_PAGE_SKIP_ACCOUNT === this.state.currentPage && !this.state.skipAccountConfirmed) {
-      notify({ message: 'Please confirm that you want to use LBRY without creating an account.' });
-      return;
-    }
-
-    if (Constants.FIRST_RUN_PAGE_EMAIL_COLLECT !== this.state.currentPage && pageIndex === (FirstRunScreen.pages.length - 1)) {
-      this.closeFinalPage();
-    } else {
-      // TODO: Actions and page verification for specific pages
-      if (Constants.FIRST_RUN_PAGE_EMAIL_COLLECT === this.state.currentPage) {
-        // handle email collect
-        this.handleEmailCollectPageContinue();
-      } else {
-        this.showNextPage();
-      }
-    }*/
-  }
-
-  handleEmailCollectPageContinue() {
-    /*const { notify, addUserEmail } = this.props;
-
-    AsyncStorage.getItem(Constants.KEY_FIRST_RUN_EMAIL).then(email => {
-      // validate the email
-      if (!email || email.indexOf('@') === -1) {
-        return notify({
-          message: 'Please provide a valid email address to continue.',
-        });
-      }
-
-      addUserEmail(email);
-      this.setState({ emailSubmitted: true });
-    });*/
-  }
-
-  showNextPage() {
-    const pageIndex = FirstRunScreen.pages.indexOf(this.state.currentPage);
-    const nextPage = FirstRunScreen.pages[pageIndex + 1];
-    this.setState({ currentPage: nextPage });
-    if (nextPage === 'email-collect') {
-      // do not show the buttons (because we're waiting to get things ready)
-      this.setState({ showBottomContainer: false });
-    }
-  }
-
-  showPage(pageName) {
-    const pageIndex = FirstRunScreen.pages.indexOf(pageName);
-    if (pageIndex > -1) {
-      this.setState({ currentPage: pageName });
-    }
-  }
-
-  closeFinalPage() {
-    // Final page. Let the app know that first run experience is completed.
-    if (NativeModules.FirstRun) {
-      NativeModules.FirstRun.firstRunCompleted();
-    }
-
-    // Navigate to the splash screen
-    this.launchSplashScreen();
-  }
-
-  onEmailChanged = (email) => {
-    if (Constants.FIRST_RUN_PAGE_EMAIL_COLLECT == this.state.currentPage) {
-      this.setState({ showSkip: (!email || email.trim().length === 0) });
-    } else {
-      this.setState({ showSkip: false });
-    }
-  }
-
-  onEmailViewLayout = () => {
-    this.setState({ showBottomContainer: true });
-    AsyncStorage.getItem('firstRunEmail').then(email => {
-      this.setState({ showSkip: !email || email.trim().length === 0 });
-    });
+    const { user } = nextProps;
+    this.checkVerificationStatus(user);
   }
 
   onCloseButtonPressed = () => {
@@ -153,18 +67,6 @@ class VerificationScreen extends React.PureComponent {
     navigation.goBack();
   }
 
-  onWalletPasswordChanged = (password) => {
-    this.setState({ walletPassword: password });
-  }
-
-  onWalletViewLayout = () => {
-    this.setState({ showBottomContainer: true });
-  }
-
-  onSkipSwitchChanged = (checked) => {
-    this.setState({ skipAccountConfirmed: checked });
-  }
-
   render() {
     const {
       addUserEmail,
@@ -172,7 +74,14 @@ class VerificationScreen extends React.PureComponent {
       emailNewPending,
       emailToVerify,
       notify,
-      resendVerificationEmail
+      addUserPhone,
+      phone,
+      phoneVerifyIsPending,
+      phoneVerifyErrorMessage,
+      phoneNewIsPending,
+      phoneNewErrorMessage,
+      resendVerificationEmail,
+      verifyPhone
     } = this.props;
 
     let page = null;
@@ -189,6 +98,20 @@ class VerificationScreen extends React.PureComponent {
           />
         );
         break;
+      case 'phoneVerify':
+        page = (
+          <PhoneVerifyPage
+            addUserPhone={addUserPhone}
+            phone={phone}
+            phoneVerifyIsPending={phoneVerifyIsPending}
+            phoneVerifyErrorMessage={phoneVerifyErrorMessage}
+            phoneNewIsPending={phoneNewIsPending}
+            phoneNewErrorMessage={phoneNewErrorMessage}
+            notify={notify}
+            verifyPhone={verifyPhone}
+          />
+        );
+        break;
     }
 
     return (
diff --git a/app/src/styles/reward.js b/app/src/styles/reward.js
index f7ea57f8..ba02aacc 100644
--- a/app/src/styles/reward.js
+++ b/app/src/styles/reward.js
@@ -119,12 +119,19 @@ const rewardStyle = StyleSheet.create({
   bottomMarginLarge: {
     marginBottom: 24
   },
+  leftRightMargin: {
+    marginLeft: 32,
+    marginRight: 32
+  },
   link: {
     color: Colors.LbryGreen,
     fontFamily: 'Inter-UI-Regular',
     fontSize: 14,
   },
   textLink: {
+    color: Colors.White
+  },
+  greenLink: {
     color: Colors.LbryGreen
   },
   leftCol: {
@@ -196,12 +203,14 @@ const rewardStyle = StyleSheet.create({
     paddingRight: 4
   },
   phoneInput: {
-    marginLeft: 8
+    marginLeft: 32,
+    marginRight: 32
   },
   phoneInputText: {
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
-    letterSpacing: 1.3
+    letterSpacing: 1.3,
+    color: Colors.White
   },
   verifyingText: {
     fontFamily: 'Inter-UI-Regular',
@@ -211,8 +220,11 @@ const rewardStyle = StyleSheet.create({
   },
   verificationCodeInput: {
     fontFamily: 'Inter-UI-Regular',
+    color: Colors.White,
     fontSize: 24,
-    letterSpacing: 12
+    letterSpacing: 12,
+    marginLeft: 32,
+    marginRight: 32
   },
   loading: {
     alignSelf: 'flex-start'
@@ -251,7 +263,9 @@ const rewardStyle = StyleSheet.create({
     backgroundColor: Colors.LbryGreen
   },
   failureFootnote: {
-    marginTop: 12
+    marginTop: 32,
+    marginLeft: 32,
+    marginRight: 32
   },
   buttonContainer: {
     flexDirection: 'row',
@@ -278,6 +292,12 @@ const rewardStyle = StyleSheet.create({
   verificationLink: {
     color: Colors.White,
     fontSize: 14
+  },
+  paragraphText: {
+    fontFamily: 'Inter-UI-Regular',
+    color: Colors.White,
+    fontSize: 12,
+    lineHeight: 16
   }
 });
 
-- 
2.45.3


From ca7e33765fb8928193432fd8340aa413fb6ddba4 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 10 May 2019 09:36:07 +0100
Subject: [PATCH 3/9] automatically claim new_user and new_mobile rewards after
 verification

---
 app/src/component/rewardCard/view.js | 21 +++++++++++----------
 app/src/page/rewards/index.js        |  2 ++
 app/src/page/rewards/view.js         | 17 +++++++++++++++--
 app/src/styles/reward.js             |  4 ++--
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/app/src/component/rewardCard/view.js b/app/src/component/rewardCard/view.js
index 4d96b099..10c14e00 100644
--- a/app/src/component/rewardCard/view.js
+++ b/app/src/component/rewardCard/view.js
@@ -72,16 +72,7 @@ class RewardCard extends React.PureComponent<Props> {
         }
       }}>
         <View style={rewardStyle.leftCol}>
-          {!isPending && <TouchableOpacity onPress={() => {
-              if (!claimed) {
-                this.onClaimPress();
-              }
-            }}>
-            <Icon name={claimed ? "check-circle" : "circle"}
-                  style={claimed ? rewardStyle.claimed : (canClaim ? rewardStyle.unclaimed : rewardStyle.disabled)}
-                  size={20} />
-          </TouchableOpacity>}
-          {isPending && <ActivityIndicator size="small" color={Colors.LbryGreen} />}
+
         </View>
         <View style={rewardStyle.midCol}>
           <Text style={rewardStyle.rewardTitle}>{reward.reward_title}</Text>
@@ -92,6 +83,16 @@ class RewardCard extends React.PureComponent<Props> {
                 error={'The transaction URL could not be opened'} />}
         </View>
         <View style={rewardStyle.rightCol}>
+          {!isPending && <TouchableOpacity onPress={() => {
+              if (!claimed) {
+                this.onClaimPress();
+              }
+            }}>
+            <Icon name={claimed ? "check-circle" : "circle"}
+                  style={claimed ? rewardStyle.claimed : (canClaim ? rewardStyle.unclaimed : rewardStyle.disabled)}
+                  size={20} />
+          </TouchableOpacity>}
+          {isPending && <ActivityIndicator size="small" color={Colors.LbryGreen} />}
           <Text style={rewardStyle.rewardAmount}>{reward.reward_amount}</Text>
           <Text style={rewardStyle.rewardCurrency}>LBC</Text>
         </View>
diff --git a/app/src/page/rewards/index.js b/app/src/page/rewards/index.js
index c45887d6..3f5d984a 100644
--- a/app/src/page/rewards/index.js
+++ b/app/src/page/rewards/index.js
@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import {
+  doClaimRewardType,
   doRewardList,
   selectEmailVerifyErrorMessage,
   selectEmailVerifyIsPending,
@@ -23,6 +24,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
+  claimReward: reward => dispatch(doClaimRewardType(reward.reward_type, true)),
   fetchRewards: () => dispatch(doRewardList()),
   notify: data => dispatch(doToast(data)),
   pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_REWARDS))
diff --git a/app/src/page/rewards/view.js b/app/src/page/rewards/view.js
index e13e5e1e..a55c3aba 100644
--- a/app/src/page/rewards/view.js
+++ b/app/src/page/rewards/view.js
@@ -25,7 +25,8 @@ class RewardsPage extends React.PureComponent {
     isIdentityVerified: false,
     isRewardApproved: false,
     verifyRequestStarted: false,
-    revealVerification: true
+    revealVerification: true,
+    firstRewardClaimed: false
   };
 
   scrollView = null;
@@ -44,7 +45,8 @@ class RewardsPage extends React.PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { emailVerifyErrorMessage, emailVerifyPending, user } = nextProps;
+    const { emailVerifyErrorMessage, emailVerifyPending, rewards, user } = nextProps;
+    const { claimReward } = this.props;
     if (emailVerifyPending) {
       this.setState({ verifyRequestStarted: true });
     }
@@ -64,6 +66,17 @@ class RewardsPage extends React.PureComponent {
         isRewardApproved: (user && user.is_reward_approved)
       });
     }
+
+    if (rewards && rewards.length && this.state.isRewardApproved && !this.state.firstRewardClaimed) {
+      // claim new_user and new_mobile rewards
+      for (let i = 0; i < rewards.length; i++) {
+        const { reward_type: type } = rewards[i];
+        if ('new_user' === type || 'new_mobile' === type) {
+          claimReward(rewards[i]);
+        }
+      }
+      this.setState({ firstRewardClaimed: true });
+    }
   }
 
   renderVerification() {
diff --git a/app/src/styles/reward.js b/app/src/styles/reward.js
index ba02aacc..20ebdb3b 100644
--- a/app/src/styles/reward.js
+++ b/app/src/styles/reward.js
@@ -135,12 +135,12 @@ const rewardStyle = StyleSheet.create({
     color: Colors.LbryGreen
   },
   leftCol: {
-    width: '15%',
+    width: '5%',
     alignItems: 'center',
     paddingLeft: 6
   },
   midCol: {
-    width: '65%'
+    width: '75%'
   },
   rightCol: {
     width: '18%',
-- 
2.45.3


From 945f2534c3138f1448f417b302d16121d6aa3630 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 10 May 2019 14:58:20 +0100
Subject: [PATCH 4/9] update wallet page with rewards driver. make backup
 notice dismissable.

---
 app/src/component/rewardEnrolment/index.js    |  4 +++-
 app/src/component/rewardEnrolment/view.js     |  6 +++--
 app/src/component/walletBalance/index.js      |  4 ++--
 .../component/walletRewardsDriver/index.js    |  6 +++++
 app/src/component/walletRewardsDriver/view.js | 17 +++++++++++++
 app/src/constants.js                          |  2 ++
 app/src/page/splash/index.js                  |  4 ++--
 app/src/page/splash/view.js                   |  4 ++--
 app/src/page/wallet/index.js                  |  4 ++++
 app/src/page/wallet/view.js                   | 24 +++++++++++++++----
 app/src/styles/wallet.js                      | 21 ++++++++++++++--
 11 files changed, 81 insertions(+), 15 deletions(-)
 create mode 100644 app/src/component/walletRewardsDriver/index.js
 create mode 100644 app/src/component/walletRewardsDriver/view.js

diff --git a/app/src/component/rewardEnrolment/index.js b/app/src/component/rewardEnrolment/index.js
index da361445..6a345c99 100644
--- a/app/src/component/rewardEnrolment/index.js
+++ b/app/src/component/rewardEnrolment/index.js
@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import { doToast } from 'lbry-redux';
+import { doSetClientSetting } from 'redux/actions/settings';
 import { doRewardList, selectUnclaimedRewardValue, selectFetchingRewards, selectUser } from 'lbryinc';
 import RewardEnrolment from './view';
 
@@ -11,7 +12,8 @@ const select = state => ({
 
 const perform = dispatch => ({
   fetchRewards: () => dispatch(doRewardList()),
-  notify: data => dispatch(doToast(data))
+  notify: data => dispatch(doToast(data)),
+  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
 });
 
 export default connect(select, perform)(RewardEnrolment);
diff --git a/app/src/component/rewardEnrolment/view.js b/app/src/component/rewardEnrolment/view.js
index 7978488f..d04133d8 100644
--- a/app/src/component/rewardEnrolment/view.js
+++ b/app/src/component/rewardEnrolment/view.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { 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 Link from 'component/link';
 import Colors from 'styles/colors';
 import Icon from 'react-native-vector-icons/FontAwesome5';
@@ -13,8 +14,9 @@ class RewardEnrolment extends React.Component {
   }
 
   onNotInterestedPressed = () => {
-    const { navigation } = this.props;
-    navigation.navigate({ routeName: 'DiscoverStack' })
+    const { navigation, setClientSetting } = this.props;
+    setClientSetting(Constants.SETTING_REWARDS_NOT_INTERESTED, true);
+    navigation.navigate({ routeName: 'DiscoverStack' });
   }
 
   onEnrollPressed = () => {
diff --git a/app/src/component/walletBalance/index.js b/app/src/component/walletBalance/index.js
index 1d205a52..9f69e655 100644
--- a/app/src/component/walletBalance/index.js
+++ b/app/src/component/walletBalance/index.js
@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { selectTotalBalance } from 'lbry-redux';
+import { selectBalance } from 'lbry-redux';
 import WalletBalance from './view';
 
 const select = state => ({
-  balance: selectTotalBalance(state),
+  balance: selectBalance(state),
 });
 
 export default connect(select, null)(WalletBalance);
diff --git a/app/src/component/walletRewardsDriver/index.js b/app/src/component/walletRewardsDriver/index.js
new file mode 100644
index 00000000..b328bf3b
--- /dev/null
+++ b/app/src/component/walletRewardsDriver/index.js
@@ -0,0 +1,6 @@
+import { connect } from 'react-redux';
+import WalletRewardsDriver from './view';
+
+const select = state => ({});
+
+export default connect(select, null)(WalletRewardsDriver);
diff --git a/app/src/component/walletRewardsDriver/view.js b/app/src/component/walletRewardsDriver/view.js
new file mode 100644
index 00000000..7463fce3
--- /dev/null
+++ b/app/src/component/walletRewardsDriver/view.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import walletStyle from 'styles/wallet';
+
+class WalletRewardsDriver extends React.PureComponent<Props> {
+  render() {
+    const { navigation } = this.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>
+      </TouchableOpacity>
+    );
+  }
+}
+
+export default WalletRewardsDriver;
diff --git a/app/src/constants.js b/app/src/constants.js
index ade1d5bc..d50fdfc7 100644
--- a/app/src/constants.js
+++ b/app/src/constants.js
@@ -22,6 +22,8 @@ const Constants = {
   SETTING_SUBSCRIPTIONS_VIEW_MODE: "subscriptionsViewMode",
   SETTING_RATING_REMINDER_LAST_SHOWN: "ratingReminderLastShown",
   SETTING_RATING_REMINDER_DISABLED: "ratingReminderDisabled",
+  SETTING_BACKUP_DISMISSED: "backupDismissed",
+  SETTING_REWARDS_NOT_INTERESTED: "rewardsNotInterested",
 
   ACTION_DELETE_COMPLETED_BLOBS: "DELETE_COMPLETED_BLOBS",
   ACTION_FIRST_RUN_PAGE_CHANGED: "FIRST_RUN_PAGE_CHANGED",
diff --git a/app/src/page/splash/index.js b/app/src/page/splash/index.js
index b3c5adf0..58d72be4 100644
--- a/app/src/page/splash/index.js
+++ b/app/src/page/splash/index.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doTotalBalanceSubscribe, doUpdateBlockHeight, doToast } from 'lbry-redux';
+import { doBalanceSubscribe, doUpdateBlockHeight, doToast } from 'lbry-redux';
 import {
   doAuthenticate,
   doBlackListedOutpointsSubscribe,
@@ -23,7 +23,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   authenticate: (appVersion, os) => dispatch(doAuthenticate(appVersion, os)),
-  totalBalanceSubscribe: () => dispatch(doTotalBalanceSubscribe()),
+  balanceSubscribe: () => dispatch(doBalanceSubscribe()),
   blacklistedOutpointsSubscribe: () => dispatch(doBlackListedOutpointsSubscribe()),
   checkSubscriptionsInit: () => dispatch(doCheckSubscriptionsInit()),
   deleteCompleteBlobs: () => dispatch(doDeleteCompleteBlobs()),
diff --git a/app/src/page/splash/view.js b/app/src/page/splash/view.js
index 1df1e394..b9a4b7e3 100644
--- a/app/src/page/splash/view.js
+++ b/app/src/page/splash/view.js
@@ -137,7 +137,7 @@ class SplashScreen extends React.PureComponent {
   finishSplashScreen = () => {
     const {
       authenticate,
-      totalBalanceSubscribe,
+      balanceSubscribe,
       blacklistedOutpointsSubscribe,
       checkSubscriptionsInit,
       updateBlockHeight,
@@ -147,7 +147,7 @@ class SplashScreen extends React.PureComponent {
 
     Lbry.resolve({ urls: 'lbry://one' }).then(() => {
       // Leave the splash screen
-      totalBalanceSubscribe();
+      balanceSubscribe();
       blacklistedOutpointsSubscribe();
       checkSubscriptionsInit();
       updateBlockHeight();
diff --git a/app/src/page/wallet/index.js b/app/src/page/wallet/index.js
index 028f990e..7ab4eef6 100644
--- a/app/src/page/wallet/index.js
+++ b/app/src/page/wallet/index.js
@@ -2,13 +2,17 @@ import { connect } from 'react-redux';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { doPushDrawerStack } from 'redux/actions/drawer';
+import { selectBalance } from 'lbry-redux';
 import { doGetSync, selectUser } from 'lbryinc';
 import Constants from 'constants';
 import WalletPage from './view';
 
 const select = state => ({
   user: selectUser(state),
+  balance: selectBalance(state),
   understandsRisks: makeSelectClientSetting(Constants.SETTING_ALPHA_UNDERSTANDS_RISKS)(state),
+  backupDismissed: makeSelectClientSetting(Constants.SETTING_BACKUP_DISMISSED)(state),
+  rewardsNotInterested: makeSelectClientSetting(Constants.SETTING_REWARDS_NOT_INTERESTED)(state),
 });
 
 const perform = dispatch => ({
diff --git a/app/src/page/wallet/view.js b/app/src/page/wallet/view.js
index 3e094d64..37d39214 100644
--- a/app/src/page/wallet/view.js
+++ b/app/src/page/wallet/view.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { NativeModules, ScrollView, Text, View } from 'react-native';
 import TransactionListRecent from 'component/transactionListRecent';
+import WalletRewardsDriver from 'component/walletRewardsDriver';
 import WalletAddress from 'component/walletAddress';
 import WalletBalance from 'component/walletBalance';
 import WalletSend from 'component/walletSend';
@@ -20,8 +21,20 @@ class WalletPage extends React.PureComponent {
     }
   }
 
+  onDismissBackupPressed = () => {
+    const { setClientSetting } = this.props;
+    setClientSetting(Constants.SETTING_BACKUP_DISMISSED, true);
+  }
+
   render() {
-    const { understandsRisks, setClientSetting, navigation } = this.props;
+    const {
+      balance,
+      backupDismissed,
+      rewardsNotInterested,
+      understandsRisks,
+      setClientSetting,
+      navigation
+    } = this.props;
 
     if (!understandsRisks) {
       return (
@@ -41,17 +54,20 @@ class WalletPage extends React.PureComponent {
     return (
       <View style={walletStyle.container}>
         <UriBar navigation={navigation} />
-        <ScrollView keyboardShouldPersistTaps={'handled'}>
+        <ScrollView style={walletStyle.scrollContainer} keyboardShouldPersistTaps={'handled'}>
+          {!backupDismissed &&
           <View style={walletStyle.warningCard}>
             <Text style={walletStyle.warningText}>
               Please backup your wallet file using the instructions at <Link style={walletStyle.warningText} text="https://lbry.com/faq/how-to-backup-wallet#android" href="https://lbry.com/faq/how-to-backup-wallet#android" />.
             </Text>
-          </View>
+            <Button text={'Dismiss'} style={walletStyle.button} onPress={this.onDismissBackupPressed} />
+          </View>}
 
+          {(!rewardsNotInterested) && (!balance || balance === 0) && <WalletRewardsDriver navigation={navigation} />}
           <WalletBalance />
           <WalletAddress />
           <WalletSend />
-          <TransactionListRecent navigation={this.props.navigation} />
+          <TransactionListRecent navigation={navigation} />
         </ScrollView>
       </View>
     );
diff --git a/app/src/styles/wallet.js b/app/src/styles/wallet.js
index b33da227..c9f0b4a9 100644
--- a/app/src/styles/wallet.js
+++ b/app/src/styles/wallet.js
@@ -5,6 +5,9 @@ const walletStyle = StyleSheet.create({
   container: {
     backgroundColor: Colors.PageBackground
   },
+  scrollContainer: {
+    marginTop: 60
+  },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -40,7 +43,7 @@ const walletStyle = StyleSheet.create({
     backgroundColor: Colors.Orange,
     padding: 16,
     marginLeft: 16,
-    marginTop: 76,
+    marginTop: 16,
     marginRight: 16
   },
   transactionsCard: {
@@ -142,7 +145,8 @@ const walletStyle = StyleSheet.create({
     color: Colors.White,
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
-    lineHeight: 24
+    lineHeight: 24,
+    marginBottom: 8
   },
   understand: {
     marginLeft: 16,
@@ -168,6 +172,19 @@ const walletStyle = StyleSheet.create({
   },
   transactionHistoryScroll: {
     marginTop: 60
+  },
+  rewardDriverCard: {
+    padding: 16,
+    backgroundColor: Colors.LbryGreen,
+    marginLeft: 16,
+    marginTop: 16,
+    marginRight: 16
+  },
+  rewardDriverText: {
+    color: Colors.White,
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 14,
+    lineHeight: 16
   }
 });
 
-- 
2.45.3


From 0d6b6c1035a81fdbe3f6571cb8dd67c4da16ddd5 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 10 May 2019 14:59:58 +0100
Subject: [PATCH 5/9] fix floating wallet balance

---
 app/src/component/floatingWalletBalance/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/component/floatingWalletBalance/index.js b/app/src/component/floatingWalletBalance/index.js
index 11cc3fb5..10f2b3a7 100644
--- a/app/src/component/floatingWalletBalance/index.js
+++ b/app/src/component/floatingWalletBalance/index.js
@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
-import { selectTotalBalance } from 'lbry-redux';
+import { selectBalance } from 'lbry-redux';
 import { selectUnclaimedRewardValue } from 'lbryinc';
 import FloatingWalletBalance from './view';
 
 const select = state => ({
-  balance: selectTotalBalance(state),
+  balance: selectBalance(state),
   unclaimedRewardAmount: selectUnclaimedRewardValue(state),
 });
 
-- 
2.45.3


From b7e60f6ca5d273fa1b90e02cd0632ad028429463 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 10 May 2019 16:00:39 +0100
Subject: [PATCH 6/9] do not show unclaimed rewards amount if user is not
 interested in rewards

---
 app/src/component/floatingWalletBalance/index.js | 2 ++
 app/src/component/floatingWalletBalance/view.js  | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/src/component/floatingWalletBalance/index.js b/app/src/component/floatingWalletBalance/index.js
index 10f2b3a7..5b3d2bc0 100644
--- a/app/src/component/floatingWalletBalance/index.js
+++ b/app/src/component/floatingWalletBalance/index.js
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { selectBalance } from 'lbry-redux';
 import { selectUnclaimedRewardValue } from 'lbryinc';
 import FloatingWalletBalance from './view';
@@ -6,6 +7,7 @@ import FloatingWalletBalance from './view';
 const select = state => ({
   balance: selectBalance(state),
   unclaimedRewardAmount: selectUnclaimedRewardValue(state),
+  rewardsNotInterested: makeSelectClientSetting(Constants.SETTING_REWARDS_NOT_INTERESTED)(state),
 });
 
 export default connect(select, null)(FloatingWalletBalance);
diff --git a/app/src/component/floatingWalletBalance/view.js b/app/src/component/floatingWalletBalance/view.js
index cb20b441..49a1e185 100644
--- a/app/src/component/floatingWalletBalance/view.js
+++ b/app/src/component/floatingWalletBalance/view.js
@@ -14,11 +14,11 @@ type Props = {
 
 class FloatingWalletBalance extends React.PureComponent<Props> {
   render() {
-    const { balance, navigation, unclaimedRewardAmount } = this.props;
+    const { balance, navigation, rewardsNotInterested, unclaimedRewardAmount } = this.props;
 
     return (
       <View style={[floatingButtonStyle.view, floatingButtonStyle.bottomRight]}>
-        {unclaimedRewardAmount > 0 &&
+        {(!rewardsNotInterested && unclaimedRewardAmount > 0) &&
         <TouchableOpacity style={floatingButtonStyle.pendingContainer}
           onPress={() => navigation && navigation.navigate({ routeName: 'Rewards' })} >
           <Icon name="award" size={18} style={floatingButtonStyle.rewardIcon} />
-- 
2.45.3


From bef671be6c8fa6b9befa765c5a6cf85ed5398d30 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 10 May 2019 16:21:15 +0100
Subject: [PATCH 7/9] fix missing import

---
 app/src/component/floatingWalletBalance/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/component/floatingWalletBalance/index.js b/app/src/component/floatingWalletBalance/index.js
index 5b3d2bc0..8282e503 100644
--- a/app/src/component/floatingWalletBalance/index.js
+++ b/app/src/component/floatingWalletBalance/index.js
@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { selectBalance } from 'lbry-redux';
 import { selectUnclaimedRewardValue } from 'lbryinc';
+import Constants from 'constants';
 import FloatingWalletBalance from './view';
 
 const select = state => ({
-- 
2.45.3


From b6d4fecb0664ca8baf474eb77e46cd818eb2be05 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 10 May 2019 17:30:44 +0100
Subject: [PATCH 8/9] replace makeSelectBlockDate with makeSelectDateForUri

---
 app/src/component/dateTime/index.js    | 4 ++--
 app/src/component/fileItem/view.js     | 2 +-
 app/src/component/fileListItem/view.js | 2 +-
 app/src/page/file/view.js              | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/component/dateTime/index.js b/app/src/component/dateTime/index.js
index 3e1ad14a..fd771c83 100644
--- a/app/src/component/dateTime/index.js
+++ b/app/src/component/dateTime/index.js
@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { doFetchBlock, makeSelectBlockDate } from 'lbry-redux';
+import { makeSelectDateForUri } from 'lbry-redux';
 import DateTime from './view';
 
 const select = (state, props) => ({
-  date: !props.date && props.block ? makeSelectBlockDate(props.block)(state) : props.date,
+  date: props.date || makeSelectDateForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({
diff --git a/app/src/component/fileItem/view.js b/app/src/component/fileItem/view.js
index c4b60f9b..28085740 100644
--- a/app/src/component/fileItem/view.js
+++ b/app/src/component/fileItem/view.js
@@ -90,7 +90,7 @@ class FileItem extends React.PureComponent {
               <Link style={discoverStyle.channelName} text={channelName} onPress={() => {
                 navigateToUri(navigation, normalizeURI(fullChannelUri));
               }} />}
-            <DateTime style={discoverStyle.dateTime} textStyle={discoverStyle.dateTimeText} timeAgo block={height} />
+            <DateTime style={discoverStyle.dateTime} textStyle={discoverStyle.dateTimeText} timeAgo uri={uri} />
           </View>}
         </TouchableOpacity>
         {obscureNsfw && <NsfwOverlay onPress={() => navigation.navigate({ routeName: 'Settings', key: 'settingsPage' })} />}
diff --git a/app/src/component/fileListItem/view.js b/app/src/component/fileListItem/view.js
index 65f2c3eb..953a0b56 100644
--- a/app/src/component/fileListItem/view.js
+++ b/app/src/component/fileListItem/view.js
@@ -107,7 +107,7 @@ class FileListItem extends React.PureComponent {
 
             <View style={fileListStyle.info}>
               {fileInfo && <Text style={fileListStyle.infoText}>{this.getStorageForFileInfo(fileInfo)}</Text>}
-              <DateTime style={fileListStyle.publishInfo} textStyle={fileListStyle.infoText} timeAgo block={height} />
+              <DateTime style={fileListStyle.publishInfo} textStyle={fileListStyle.infoText} timeAgo uri={uri} />
             </View>
 
             {fileInfo &&
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index 1b1bc2f7..5dcce737 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -601,7 +601,7 @@ class FilePage extends React.PureComponent {
                         <DateTime
                           style={filePageStyle.publishDate}
                           textStyle={filePageStyle.publishDateText}
-                          block={height}
+                          uri={uri}
                           formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}
                           show={DateTime.SHOW_DATE} />
                       </View>
-- 
2.45.3


From 9c6f85b944ecbb8e64de53ff1e3eacceb9036d11 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 14 May 2019 14:54:36 +0100
Subject: [PATCH 9/9] add manual verification screen. style tweaks.

---
 app/src/page/rewards/view.js                  | 21 +++++++++--------
 .../internal/email-verify-page.js             |  2 +-
 .../internal/manual-verify-page.js            | 23 +++++++++++++++++++
 app/src/page/verification/view.js             | 17 +++++++++++---
 app/src/styles/reward.js                      |  6 ++++-
 5 files changed, 54 insertions(+), 15 deletions(-)
 create mode 100644 app/src/page/verification/internal/manual-verify-page.js

diff --git a/app/src/page/rewards/view.js b/app/src/page/rewards/view.js
index a55c3aba..800d86fd 100644
--- a/app/src/page/rewards/view.js
+++ b/app/src/page/rewards/view.js
@@ -156,17 +156,18 @@ class RewardsPage extends React.PureComponent {
     return (
       <View style={rewardStyle.container}>
         <UriBar navigation={navigation} />
-        {(!this.state.isEmailVerified || !this.state.isIdentityVerified) && <RewardEnrolment navigation={navigation} />}
+        {(!this.state.isEmailVerified || !this.state.isIdentityVerified || !this.state.isRewardApproved) &&
+          <RewardEnrolment navigation={navigation} />}
 
-        {(this.state.isEmailVerified && this.state.isIdentityVerified) && <ScrollView
-          ref={ref => this.scrollView = ref}
-          keyboardShouldPersistTaps={'handled'}
-          style={rewardStyle.scrollContainer}
-          contentContainerStyle={rewardStyle.scrollContentContainer}>
-          {this.state.revealVerification && this.renderVerification()}
-          {this.renderUnclaimedRewards()}
-          {this.renderClaimedRewards()}
-        </ScrollView>}
+        {(this.state.isEmailVerified && this.state.isIdentityVerified && this.state.isRewardApproved) &&
+          <ScrollView
+            ref={ref => this.scrollView = ref}
+            keyboardShouldPersistTaps={'handled'}
+            style={rewardStyle.scrollContainer}
+            contentContainerStyle={rewardStyle.scrollContentContainer}>
+            {this.renderUnclaimedRewards()}
+            {this.renderClaimedRewards()}
+          </ScrollView>}
       </View>
     );
   }
diff --git a/app/src/page/verification/internal/email-verify-page.js b/app/src/page/verification/internal/email-verify-page.js
index 1da92186..f958b609 100644
--- a/app/src/page/verification/internal/email-verify-page.js
+++ b/app/src/page/verification/internal/email-verify-page.js
@@ -40,7 +40,7 @@ class EmailVerifyPage extends React.PureComponent {
   }
 
   onSendVerificationPressed = () => {
-    const { addUserEmail, emailNewPending, notify } = this.props;
+    const { addUserEmail, emailNewPending, notify, resendVerificationEmail } = this.props;
 
     if (emailNewPending) {
       return;
diff --git a/app/src/page/verification/internal/manual-verify-page.js b/app/src/page/verification/internal/manual-verify-page.js
new file mode 100644
index 00000000..250b9c2c
--- /dev/null
+++ b/app/src/page/verification/internal/manual-verify-page.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Lbry } from 'lbry-redux';
+import { ActivityIndicator, View, Text, TextInput } from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
+import Button from 'component/button';
+import Link from 'component/link';
+import Colors from 'styles/colors';
+import Constants from 'constants';
+import firstRunStyle from 'styles/firstRun';
+import rewardStyle from 'styles/reward';
+
+class ManualVerifyPage extends React.PureComponent {
+  render() {
+    return (
+      <View style={firstRunStyle.container}>
+        <Text style={rewardStyle.verificationTitle}>Manual Reward Verification</Text>
+        <Text style={firstRunStyle.paragraph}>You need to be manually verified before you can start claiming rewards. Please request to be verified on the <Link style={rewardStyle.underlinedTextLink} href="https://discordapp.com/invite/Z3bERWA" text="LBRY Discord server" />.</Text>
+      </View>
+    );
+  }
+}
+
+export default ManualVerifyPage;
diff --git a/app/src/page/verification/view.js b/app/src/page/verification/view.js
index afbdc27f..c0312ed2 100644
--- a/app/src/page/verification/view.js
+++ b/app/src/page/verification/view.js
@@ -13,6 +13,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import Colors from 'styles/colors';
 import Constants from 'constants';
 import EmailVerifyPage from './internal/email-verify-page';
+import ManualVerifyPage from './internal/manual-verify-page';
 import PhoneVerifyPage from './internal/phone-verify-page';
 import firstRunStyle from 'styles/firstRun';
 
@@ -27,7 +28,8 @@ class VerificationScreen extends React.PureComponent {
     showBottomContainer: true,
     walletPassword: null,
     isEmailVerified: false,
-    isIdentityVerified: false
+    isIdentityVerified: false,
+    isRewardApproved: false
   };
 
   componentDidMount() {
@@ -40,7 +42,8 @@ class VerificationScreen extends React.PureComponent {
 
     this.setState({
       isEmailVerified: (user && user.primary_email && user.has_verified_email),
-      isIdentityVerified: (user && user.is_identity_verified)
+      isIdentityVerified: (user && user.is_identity_verified),
+      isRewardApproved: (user && user.is_reward_approved)
     }, () => {
       if (!this.state.isEmailVerified) {
         this.setState({ currentPage: 'emailVerify' });
@@ -48,8 +51,11 @@ class VerificationScreen extends React.PureComponent {
       if (this.state.isEmailVerified && !this.state.isIdentityVerified) {
         this.setState({ currentPage: 'phoneVerify' });
       }
+      if (this.state.isEmailVerified && this.state.isIdentityVerified && !this.state.isRewardApproved) {
+        this.setState({ currentPage: 'manualVerify' });
+      }
 
-      if (this.state.isEmailVerified && this.state.isIdentityVerified) {
+      if (this.state.isEmailVerified && this.state.isIdentityVerified && this.state.isRewardApproved) {
         // verification steps already completed
         // simply navigate back to the rewards page
         navigation.goBack();
@@ -73,6 +79,7 @@ class VerificationScreen extends React.PureComponent {
       emailNewErrorMessage,
       emailNewPending,
       emailToVerify,
+      navigation,
       notify,
       addUserPhone,
       phone,
@@ -112,6 +119,10 @@ class VerificationScreen extends React.PureComponent {
           />
         );
         break;
+      case 'manualVerify':
+        page = (
+          <ManualVerifyPage />
+        );
     }
 
     return (
diff --git a/app/src/styles/reward.js b/app/src/styles/reward.js
index 20ebdb3b..3a17fbb9 100644
--- a/app/src/styles/reward.js
+++ b/app/src/styles/reward.js
@@ -131,6 +131,10 @@ const rewardStyle = StyleSheet.create({
   textLink: {
     color: Colors.White
   },
+  underlinedTextLink: {
+    color: Colors.White,
+    textDecorationLine: 'underline'
+  },
   greenLink: {
     color: Colors.LbryGreen
   },
@@ -274,7 +278,7 @@ const rewardStyle = StyleSheet.create({
     width: '100%',
     paddingLeft: 32,
     paddingRight: 32,
-    marginTop: 24
+    marginTop: 16
   },
   verificationTitle: {
     fontSize: 32,
-- 
2.45.3