Publisher status refresh now shows confirmation

src/components/icons/checkmark-circle-l.tsx

@@ -0,0 +1,16 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY MANUALLY
+/* tslint:disable */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+import * as React from 'react'
+import GenerateComponentForGraphic from './template'
+// Direct access to SVG
+export const Graphic = (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M12 21.75c-5.385 0-9.75-4.365-9.75-9.75S6.615 2.25 12 2.25s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75zm0-1.5a8.25 8.25 0 1 0 0-16.5 8.25 8.25 0 0 0 0 16.5zm-3.545-7.132l2.28 1.737 3.594-7.19a.75.75 0 1 1 1.342.67l-4 8a.75.75 0 0 1-1.126.262l-3-2.286a.75.75 0 1 1 .91-1.193z'
+        />
+    </svg>
+)
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)

src/components/icons/checkmark-circle-r.tsx

@@ -0,0 +1,16 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY MANUALLY
+/* tslint:disable */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+import * as React from 'react'
+import GenerateComponentForGraphic from './template'
+// Direct access to SVG
+export const Graphic = (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.394-7.081l2.04 1.554 3.46-6.92a1 1 0 0 1 1.788.894l-4 8a1 1 0 0 1-1.5.348l-3-2.285a1 1 0 1 1 1.212-1.591z'
+        />
+    </svg>
+)
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)

src/components/icons/checkmark-circle-s.tsx

@@ -0,0 +1,16 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY MANUALLY
+/* tslint:disable */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+import * as React from 'react'
+import GenerateComponentForGraphic from './template'
+// Direct access to SVG
+export const Graphic = (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-3.394-9.081a1 1 0 0 0-1.212 1.59l3 2.286a1 1 0 0 0 1.5-.348l4-8a1 1 0 0 0-1.788-.894l-3.46 6.92-2.04-1.554z'
+        />
+    </svg>
+)
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)

src/components/icons/index.tsx

@@ -43,6 +43,9 @@ export const CaratStrongUpIcon = RotatedIconComponent(CaratStrongIcon, 180)
 export const CaratStrongDownIcon = RotatedIconComponent(CaratStrongIcon, 0)
 export { default as CheckCircleIcon } from './check-circle'
 export { default as CheckIcon } from './check'
+export { default as CheckmarkCircleL } from './checkmark-circle-l'
+export { default as CheckmarkCircleS } from './checkmark-circle-s'
+export { default as CheckmarkCircleR } from './checkmark-circle-r'
 export { default as ClipboardOIcon } from './clipboard-o'
 export { default as CloseCircleOIcon } from './close-circle-o'
 export { default as CloseCircleIcon } from './close-circle'

src/features/rewards/profile/index.tsx

@@ -13,15 +13,23 @@ import {
   StyledTitle,
   StyledProvider,
   StyledProviderWrap,
+  StyledProviderWrapRefreshing,
+  StyledProviderWrapRefreshFinished,
   StyledInlineVerified,
   StyledVerifiedText,
   StyledInlineUnVerified,
   StyledVerifiedCheckLink,
+  StyledVerifiedCheckNoLink,
+  StyledRefreshCheckOverlayFinished,
   StyledRefresh,
+  StyledRefreshLoaderFinished,
+  StyledRefreshOverlay,
+  StyledRefreshOverlayFinished,
+  StyledRefreshFinished,
   StyledVerifiedDivider
 } from './style'
 import { getLocale } from '../../../helpers'
-import { VerifiedSIcon, UnVerifiedSIcon, LoaderIcon } from '../../../components/icons'
+import { VerifiedSIcon, UnVerifiedSIcon, LoaderIcon, CheckmarkCircleS } from '../../../components/icons'
 
 export type Provider = 'twitter' | 'youtube' | 'twitch'
 
@@ -63,6 +71,173 @@ export default class Profile extends React.PureComponent<Props, {}> {
     return src ? src : ''
   }
 
+  getVerifiedInfo = () => {
+    return (
+      <>
+        <StyledInlineVerified>
+          <VerifiedSIcon />
+        </StyledInlineVerified>{' '}
+        <StyledVerifiedText>
+          {getLocale('verifiedPublisher')}
+        </StyledVerifiedText>
+      </>
+    )
+  }
+
+  getDefaultVerifiedPanelWrap = () => {
+    return (
+      <StyledProviderWrap>
+        {
+          this.getVerifiedInfo()
+        }
+      </StyledProviderWrap>
+    )
+  }
+
+  getVerifiedPanelWrapRefreshing = () => {
+    return (
+      <>
+        <StyledProviderWrapRefreshing>
+          {
+            this.getVerifiedInfo()
+          }
+        </StyledProviderWrapRefreshing>
+        <StyledRefreshOverlay>
+          <StyledRefresh>
+            <LoaderIcon />
+          </StyledRefresh>
+        </StyledRefreshOverlay>
+      </>
+    )
+  }
+
+  getVerifiedPanelWrapRefreshFinished = () => {
+    return (
+      <>
+        <StyledProviderWrapRefreshFinished>
+          {
+            this.getVerifiedInfo()
+          }
+        </StyledProviderWrapRefreshFinished>
+        <StyledRefreshOverlayFinished>
+          <StyledRefreshLoaderFinished>
+            <LoaderIcon />
+          </StyledRefreshLoaderFinished>
+        </StyledRefreshOverlayFinished>
+        <StyledRefreshCheckOverlayFinished>
+          <StyledRefreshFinished>
+            <CheckmarkCircleS />
+          </StyledRefreshFinished>
+        </StyledRefreshCheckOverlayFinished>
+      </>
+    )
+  }
+
+  getVerifiedPanelWrapping = () => {
+    const {
+      refreshingPublisher,
+      publisherRefreshed
+    } = this.props
+
+    return (
+      !refreshingPublisher && !publisherRefreshed ?
+        this.getDefaultVerifiedPanelWrap()
+    : !publisherRefreshed && refreshingPublisher ?
+        this.getVerifiedPanelWrapRefreshing()
+    :
+      this.getVerifiedPanelWrapRefreshFinished()
+    )
+  }
+
+  getUnverifiedInfo = () => {
+    return (
+      <>
+        <StyledInlineUnVerified>
+          <UnVerifiedSIcon />
+        </StyledInlineUnVerified>{' '}
+        <StyledVerifiedText>
+          {getLocale('unVerifiedPublisher')}
+        </StyledVerifiedText>
+        <StyledVerifiedDivider />
+      </>
+    )
+  }
+
+  getDefaultUnverifiedPanelWrap = () => {
+    const { onRefreshPublisher } = this.props
+    return (
+      <StyledProviderWrap>
+        {
+          this.getUnverifiedInfo()
+        }
+        <StyledVerifiedCheckLink onClick={onRefreshPublisher}>
+          {getLocale('unVerifiedCheck')}
+        </StyledVerifiedCheckLink>
+      </StyledProviderWrap>
+    )
+  }
+
+  getUnverifiedPanelWrapRefreshing = () => {
+    return (
+      <>
+        <StyledProviderWrapRefreshing>
+          {
+            this.getUnverifiedInfo()
+          }
+          <StyledVerifiedCheckLink>
+            {getLocale('unVerifiedCheck')}
+          </StyledVerifiedCheckLink>
+        </StyledProviderWrapRefreshing>
+        <StyledRefreshOverlay>
+          <StyledRefresh>
+            <LoaderIcon />
+          </StyledRefresh>
+        </StyledRefreshOverlay>
+      </>
+    )
+  }
+
+  getUnverifiedPanelWrapRefreshFinished = () => {
+    return (
+      <>
+        <StyledProviderWrapRefreshFinished>
+          {
+            this.getUnverifiedInfo()
+          }
+          <StyledVerifiedCheckNoLink>
+            {getLocale('unVerifiedCheck')}
+          </StyledVerifiedCheckNoLink>
+        </StyledProviderWrapRefreshFinished>
+        <StyledRefreshOverlayFinished>
+          <StyledRefreshLoaderFinished>
+            <LoaderIcon />
+          </StyledRefreshLoaderFinished>
+        </StyledRefreshOverlayFinished>
+        <StyledRefreshCheckOverlayFinished>
+          <StyledRefreshFinished>
+            <CheckmarkCircleS />
+          </StyledRefreshFinished>
+        </StyledRefreshCheckOverlayFinished>
+      </>
+    )
+  }
+
+  getUnverifiedPanelWrapping = () => {
+    const {
+      refreshingPublisher,
+      publisherRefreshed
+    } = this.props
+
+    return (
+      !publisherRefreshed && !refreshingPublisher ?
+        this.getDefaultUnverifiedPanelWrap()
+      : !publisherRefreshed && refreshingPublisher ?
+        this.getUnverifiedPanelWrapRefreshing()
+      :
+        this.getUnverifiedPanelWrapRefreshFinished()
+    )
+  }
+
   render () {
     const {
       id,
@@ -71,10 +246,7 @@ export default class Profile extends React.PureComponent<Props, {}> {
       src,
       title,
       verified,
-      showUnVerifiedHelpIcon,
-      onRefreshPublisher,
-      refreshingPublisher,
-      publisherRefreshed
+      showUnVerifiedHelpIcon
     } = this.props
 
     return (
@@ -96,38 +268,9 @@ export default class Profile extends React.PureComponent<Props, {}> {
               </StyledProvider>
             ) : null}
           </StyledTitleWrap>
-          {verified && type === 'big' ? (
-            <StyledProviderWrap>
-              <StyledInlineVerified>
-                <VerifiedSIcon />
-              </StyledInlineVerified>{' '}
-              <StyledVerifiedText>
-                {getLocale('verifiedPublisher')}
-              </StyledVerifiedText>
-            </StyledProviderWrap>
-          ) : showUnVerifiedHelpIcon ? (
-            <StyledProviderWrap>
-              <StyledInlineUnVerified>
-                <UnVerifiedSIcon />
-              </StyledInlineUnVerified>{' '}
-              <StyledVerifiedText>
-                {getLocale('unVerifiedPublisher')}
-              </StyledVerifiedText>
-              <StyledVerifiedDivider />
-              {
-                !publisherRefreshed ?
-                  refreshingPublisher ?
-                    <StyledRefresh>
-                      <LoaderIcon />
-                    </StyledRefresh>
-                    : <StyledVerifiedCheckLink onClick={onRefreshPublisher}>
-                      {getLocale('unVerifiedCheck')}
-                    </StyledVerifiedCheckLink>
-                  :
-                  null
-              }
-            </StyledProviderWrap>
-          ) : null}
+          {verified && type === 'big' ? this.getVerifiedPanelWrapping()
+          : showUnVerifiedHelpIcon ? this.getUnverifiedPanelWrapping()
+          : null}
         </StyledContent>
       </StyledWrapper>
     )