add RewardAuthIntro on the invites page

static/app-strings.json

@@ -911,4 +911,4 @@
   "%claimsInChannel% publish": "%claimsInChannel% publish",
   "Publishing": "Publishing",
   "Update published": "Update published"
-}
+}

ui/component/rewardAuthIntro/view.jsx

@@ -9,15 +9,16 @@ import I18nMessage from 'component/i18nMessage';
 type Props = {
   balance: number,
   totalRewardValue: number,
+  title?: string,
 };
 
 function RewardAuthIntro(props: Props) {
-  const { totalRewardValue } = props;
+  const { totalRewardValue, title } = props;
   const totalRewardRounded = Math.floor(totalRewardValue / 10) * 10;
 
   return (
     <Card
-      title={__('Sign In to lbry.tv to Earn Rewards')}
+      title={title || __('Sign In to lbry.tv to Earn Rewards')}
       subtitle={
         <I18nMessage
           tokens={{

ui/page/invite/index.js

@@ -1,6 +1,11 @@
 import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
-import { doFetchInviteStatus, selectUserInviteStatusFailed, selectUserInviteStatusIsPending } from 'lbryinc';
+import {
+  doFetchInviteStatus,
+  selectUserInviteStatusFailed,
+  selectUserInviteStatusIsPending,
+  selectUserVerifiedEmail,
+} from 'lbryinc';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { doSetClientSetting } from 'redux/actions/settings';
 import InvitePage from './view';
@@ -9,6 +14,7 @@ const select = state => ({
   isFailed: selectUserInviteStatusFailed(state),
   isPending: selectUserInviteStatusIsPending(state),
   inviteAcknowledged: makeSelectClientSetting(state)(SETTINGS.INVITE_ACKNOWLEDGED),
+  authenticated: selectUserVerifiedEmail(state),
 });
 
 const perform = dispatch => ({

ui/page/invite/view.jsx

@@ -4,11 +4,13 @@ import BusyIndicator from 'component/common/busy-indicator';
 import InviteNew from 'component/inviteNew';
 import InviteList from 'component/inviteList';
 import Page from 'component/page';
+import RewardAuthIntro from 'component/rewardAuthIntro';
 
 type Props = {
   isPending: boolean,
   isFailed: boolean,
   inviteAcknowledged: boolean,
+  authenticated: boolean,
   acknowledgeInivte: () => void,
   fetchInviteStatus: () => void,
 };
@@ -24,17 +26,23 @@ class InvitePage extends React.PureComponent<Props> {
   }
 
   render() {
-    const { isPending, isFailed } = this.props;
+    const { isPending, isFailed, authenticated } = this.props;
 
     return (
       <Page>
-        {isPending && <BusyIndicator message={__('Checking your invite status')} />}
-        {!isPending && isFailed && <span className="empty">{__('Failed to retrieve invite status.')}</span>}
-        {!isPending && !isFailed && (
+        {!authenticated ? (
+          <RewardAuthIntro title={__('Sign In to lbry.tv to Earn Rewards From Inviting Your Friends')} />
+        ) : (
           <React.Fragment>
-            {' '}
-            <InviteNew />
-            <InviteList />
+            {isPending && <BusyIndicator message={__('Checking your invite status')} />}
+            {!isPending && isFailed && <span className="empty">{__('Failed to retrieve invite status.')}</span>}
+            {!isPending && !isFailed && (
+              <React.Fragment>
+                {' '}
+                <InviteNew />
+                <InviteList />
+              </React.Fragment>
+            )}
           </React.Fragment>
         )}
       </Page>