skip rewards validation on future sign ins if user clicks 'skip' button

ui/component/userSignIn/view.jsx

@@ -62,6 +62,7 @@ function UserSignIn(props: Props) {
   const shouldRedirectImmediately = urlParams.get('immediate');
   const [initialSignInStep, setInitialSignInStep] = React.useState();
   const [hasSeenFollowList, setHasSeenFollowList] = usePersistedState('channel-follow-intro', false);
+  const [hasSkippedRewards, setHasSkippedRewards] = usePersistedState('skip-rewards-intro', false);
   const hasVerifiedEmail = user && user.has_verified_email;
   const rewardsApproved = user && user.is_reward_approved;
   const isIdentityVerified = user && user.is_identity_verified;
@@ -81,7 +82,7 @@ function UserSignIn(props: Props) {
   // The possible screens for the sign in flow
   const showEmail = !emailToVerify && !hasVerifiedEmail;
   const showEmailVerification = emailToVerify && !hasVerifiedEmail;
-  const showUserVerification = hasVerifiedEmail && !rewardsApproved && !isIdentityVerified;
+  const showUserVerification = hasVerifiedEmail && !rewardsApproved && !isIdentityVerified && !hasSkippedRewards;
   const showSyncPassword = syncEnabled && getSyncError;
   const showChannelCreation =
     hasVerifiedEmail &&
@@ -119,7 +120,7 @@ function UserSignIn(props: Props) {
   const SIGN_IN_FLOW = [
     showEmail && <UserEmailNew />,
     showEmailVerification && <UserEmailVerify />,
-    showUserVerification && <UserVerify skipLink={redirect} />,
+    showUserVerification && <UserVerify skipLink={redirect} onSkip={() => setHasSkippedRewards(true)} />,
     showChannelCreation && <UserFirstChannel />,
     showFollowIntro && (
       <UserChannelFollowIntro

ui/component/userVerify/view.jsx

@@ -14,6 +14,7 @@ type Props = {
   verifyPhone: () => void,
   fetchUser: () => void,
   skipLink?: string,
+  onSkip: () => void,
 };
 
 class UserVerify extends React.PureComponent<Props> {
@@ -28,7 +29,12 @@ class UserVerify extends React.PureComponent<Props> {
   }
 
   render() {
-    const { errorMessage, isPending, verifyPhone, fetchUser, skipLink } = this.props;
+    const { errorMessage, isPending, verifyPhone, fetchUser, skipLink, onSkip } = this.props;
+    const skipButtonProps = {
+      onClick: onSkip,
+      navigate: skipLink || '/',
+    };
+
     return (
       <React.Fragment>
         <section className="section__header">
@@ -45,7 +51,7 @@ class UserVerify extends React.PureComponent<Props> {
               to be validated.
             </I18nMessage>{' '}
             <Button onClick={() => fetchUser()} button="link" label={__('Refresh')} /> {'or'}{' '}
-            <Button navigate={skipLink || '/'} button="link" label={__('Skip')} />.
+            <Button {...skipButtonProps} button="link" label={__('Skip')} />.
           </p>
           <p>{__('This step is not required to use LBRY, and not all users or regions may qualify.')}</p>
         </section>
@@ -132,7 +138,7 @@ class UserVerify extends React.PureComponent<Props> {
             subtitle={__('Rewards validation is optional.')}
             actions={
               <Fragment>
-                <Button navigate={skipLink || '/'} button="primary" label={__('Continue Without Rewards')} />
+                <Button {...skipButtonProps} button="primary" label={__('Continue Without Rewards')} />
               </Fragment>
             }
           />

ui/effects/use-persisted-state.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 export default function usePersistedState(key, firstTimeDefault) {
   // If no key is passed in, act as a normal `useState`
@@ -32,11 +32,13 @@ export default function usePersistedState(key, firstTimeDefault) {
 
   const [value, setValue] = useState(defaultValue);
 
-  useEffect(() => {
-    if (key && localStorageAvailable) {
-      localStorage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : value);
+  function setValueAndLocalStorage(newValue) {
+    if (key && localStorageAvailable && value !== newValue) {
+      localStorage.setItem(key, typeof newValue === 'object' ? JSON.stringify(newValue) : newValue);
     }
-  }, [key, value]);
 
-  return [value, setValue];
+    setValue(newValue);
+  }
+
+  return [value, setValueAndLocalStorage];
 }