wallet sign in driver (#67)

src/component/rewardEnrolment/view.js

@@ -32,7 +32,7 @@ class RewardEnrolment extends React.Component {
     const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
 
     return (
-      <View style={rewardStyle.enrollContainer} onPress>
+      <View style={rewardStyle.enrollContainer}>
         <View style={rewardStyle.summaryRow}>
           <Icon name="award" size={36} color={Colors.White} />
           <Text style={rewardStyle.summaryText}>{unclaimedRewardAmount} available credits</Text>

src/component/walletSignIn/index.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import { doToast } from 'lbry-redux';
+import { doSetClientSetting } from 'redux/actions/settings';
+import { selectUser } from 'lbryinc';
+import WalletSignIn from './view';
+
+const select = state => ({
+  user: selectUser(state),
+});
+
+const perform = dispatch => ({
+  notify: data => dispatch(doToast(data)),
+  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
+});
+
+export default connect(
+  select,
+  perform
+)(WalletSignIn);

src/component/walletSignIn/view.js

@@ -0,0 +1,48 @@
+import React from 'react';
+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'; // 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';
+import walletStyle from 'styles/wallet';
+
+class WalletSignIn extends React.Component {
+  onContinuePressed = () => {
+    const { navigation, setClientSetting } = this.props;
+    setClientSetting(Constants.SETTING_ALPHA_UNDERSTANDS_RISKS, true);
+  };
+
+  onSignInPressed = () => {
+    const { navigation } = this.props;
+    navigation.navigate({ routeName: 'Verification', key: 'verification', params: { syncFlow: true } });
+  };
+
+  render() {
+    const { navigation, user } = this.props;
+
+    return (
+      <View style={walletStyle.signInContainer}>
+        <View style={walletStyle.signInSummaryRow}>
+          <Text style={walletStyle.signInTitle}>Account Recommended</Text>
+        </View>
+
+        <View style={walletStyle.onboarding}>
+          <Text style={walletStyle.onboardingText}>
+            An account with LBRY Inc. allows you to earn rewards, backup your wallet, and keep everything synced..
+            {'\n\n'}
+            Without an account, you assume all responsibility for securing your wallet and LBRY data.{'\n\n'}
+          </Text>
+        </View>
+
+        <View style={walletStyle.buttonRow}>
+          <Link style={walletStyle.continueLink} text={'Skip Account'} onPress={this.onContinuePressed} />
+          <Button style={walletStyle.signInButton} theme={'light'} text={'Sign Up'} onPress={this.onSignInPressed} />
+        </View>
+      </View>
+    );
+  }
+}
+
+export default WalletSignIn;

src/page/wallet/view.js

@@ -5,6 +5,7 @@ import WalletAddress from 'component/walletAddress';
 import WalletBalance from 'component/walletBalance';
 import WalletSend from 'component/walletSend';
 import WalletRewardsDriver from 'component/walletRewardsDriver';
+import WalletSignIn from 'component/walletSignIn';
 import WalletSyncDriver from 'component/walletSyncDriver';
 import Button from 'component/button';
 import Link from 'component/link';
@@ -66,33 +67,15 @@ class WalletPage extends React.PureComponent {
       understandsRisks,
       setClientSetting,
       navigation,
+      user,
     } = this.props;
 
-    if (!understandsRisks) {
+    const signedIn = user && user.has_verified_email;
+    if (!signedIn && !understandsRisks) {
       return (
-        <View>
+        <View style={walletStyle.container}>
           <UriBar navigation={navigation} />
-          <View style={walletStyle.warning}>
-            <Text style={walletStyle.warningParagraph}>
-              This is beta software. You may lose any credits that you send to your wallet due to software bugs, deleted
-              files, or malicious third-party software. You should not use this wallet as your primary wallet.
-            </Text>
-            {!hasSyncedWallet && (
-              <Text style={walletStyle.warningParagraph}>
-                Since you are not using the LBRY sync service, you will lose all of your credits if you uninstall this
-                application. Instructions on how to enroll as well as how to backup your wallet manually are available
-                on the next page.
-              </Text>
-            )}
-            <Text style={walletStyle.warningText}>
-              If you understand the risks and you wish to continue, please tap the button below.
-            </Text>
-          </View>
-          <Button
-            text={'I understand the risks'}
-            style={[walletStyle.button, walletStyle.understand]}
-            onPress={() => setClientSetting(Constants.SETTING_ALPHA_UNDERSTANDS_RISKS, true)}
-          />
+          <WalletSignIn navigation={navigation} />
         </View>
       );
     }

src/styles/wallet.js

@@ -305,6 +305,52 @@ const walletStyle = StyleSheet.create({
     fontSize: 16,
     marginLeft: 8,
   },
+  buttonRow: {
+    width: '100%',
+    position: 'absolute',
+    alignItems: 'center',
+    left: 24,
+    bottom: 24,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  continueLink: {
+    fontSize: 14,
+    fontFamily: 'Inter-UI-Regular',
+    color: Colors.White,
+  },
+  learnMoreLink: {
+    fontFamily: 'Inter-UI-Regular',
+    color: Colors.NextLbryGreen,
+  },
+  signInButton: {
+    backgroundColor: Colors.White,
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  signInContainer: {
+    flex: 1,
+    marginTop: 60,
+    padding: 24,
+    backgroundColor: Colors.LbryGreen,
+  },
+  onboarding: {
+    marginTop: 36,
+  },
+  onboardingText: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 18,
+    lineHeight: 28,
+    color: Colors.White,
+  },
+  signInSummaryRow: {
+    flexDirection: 'row',
+  },
+  signInTitle: {
+    color: Colors.White,
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 28,
+  },
 });
 
 export default walletStyle;