Adding Refresh Status action to connected pubs

Fixes brave/brave-browser#5964

Author: ryanml

components/brave_rewards/resources/ui/components/profile/index.tsx

@@ -44,6 +44,7 @@ export interface Props {
   showUnVerifiedHelpIcon?: boolean
   refreshingPublisher?: boolean
   publisherRefreshed?: boolean
+  showUnVerified?: boolean
   onRefreshPublisher?: () => void
 }
 
@@ -91,11 +92,21 @@ export default class Profile extends React.PureComponent<Props, {}> {
   }
 
   getDefaultVerifiedPanelWrap = () => {
+    const { showUnVerified } = this.props
+
     return (
       <StyledProviderWrap>
         {
           this.getVerifiedInfo()
         }
+        {
+          showUnVerified
+          ? <>
+              <StyledVerifiedDivider />
+              {this.getUnverifiedAction()}
+            </>
+          : null
+        }
       </StyledProviderWrap>
     )
   }
@@ -118,12 +129,24 @@ export default class Profile extends React.PureComponent<Props, {}> {
   }
 
   getVerifiedPanelWrapRefreshFinished = () => {
+    const { showUnVerified } = this.props
+
     return (
       <>
         <StyledProviderWrapRefreshFinished>
           {
             this.getVerifiedInfo()
           }
+          {
+            showUnVerified
+            ? <>
+                <StyledVerifiedDivider />
+                <StyledVerifiedCheckNoLink>
+                  {getLocale('unVerifiedCheck')}
+                </StyledVerifiedCheckNoLink>
+              </>
+            : null
+          }
         </StyledProviderWrapRefreshFinished>
         <StyledRefreshOverlayFinished>
           <StyledRefreshLoaderFinished>
@@ -170,15 +193,14 @@ export default class Profile extends React.PureComponent<Props, {}> {
   }
 
   getDefaultUnverifiedPanelWrap = () => {
-    const { onRefreshPublisher } = this.props
     return (
       <StyledProviderWrap>
         {
           this.getUnverifiedInfo()
         }
-        <StyledVerifiedCheckLink onClick={onRefreshPublisher} data-test-id={'unverified-check-button'}>
-          {getLocale('unVerifiedCheck')}
-        </StyledVerifiedCheckLink>
+        {
+          this.getUnverifiedAction()
+        }
       </StyledProviderWrap>
     )
   }
@@ -228,6 +250,16 @@ export default class Profile extends React.PureComponent<Props, {}> {
     )
   }
 
+  getUnverifiedAction = () => {
+    const { onRefreshPublisher } = this.props
+
+    return (
+      <StyledVerifiedCheckLink onClick={onRefreshPublisher} data-test-id={'unverified-check-button'}>
+        {getLocale('unVerifiedCheck')}
+      </StyledVerifiedCheckLink>
+    )
+  }
+
   getUnverifiedPanelWrapping = () => {
     const {
       refreshingPublisher,

components/brave_rewards/resources/ui/components/walletPanel/index.tsx

@@ -84,6 +84,7 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
           showUnVerifiedHelpIcon={
             !this.props.isVerified && this.props.showUnVerified
           }
+          showUnVerified={this.props.showUnVerified}
           refreshingPublisher={this.props.refreshingPublisher}
           onRefreshPublisher={this.props.onRefreshPublisher}
           publisherRefreshed={this.props.publisherRefreshed}