diff --git a/src/components/icons/checkmark-circle-l.tsx b/src/components/icons/checkmark-circle-l.tsx
new file mode 100644
index 000000000..b6157f964
--- /dev/null
+++ b/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 = (
+
+)
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)
diff --git a/src/components/icons/checkmark-circle-r.tsx b/src/components/icons/checkmark-circle-r.tsx
new file mode 100644
index 000000000..65b9acbf7
--- /dev/null
+++ b/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 = (
+
+)
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)
diff --git a/src/components/icons/checkmark-circle-s.tsx b/src/components/icons/checkmark-circle-s.tsx
new file mode 100644
index 000000000..5e399b4f6
--- /dev/null
+++ b/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 = (
+
+)
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
index ee18d815e..226f655b0 100644
--- a/src/components/icons/index.tsx
+++ b/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'
diff --git a/src/features/rewards/profile/index.tsx b/src/features/rewards/profile/index.tsx
index 72ce350d9..147774971 100644
--- a/src/features/rewards/profile/index.tsx
+++ b/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 {
return src ? src : ''
}
+ getVerifiedInfo = () => {
+ return (
+ <>
+
+
+ {' '}
+
+ {getLocale('verifiedPublisher')}
+
+
+ )
+ }
+
+ getDefaultVerifiedPanelWrap = () => {
+ return (
+
+ {
+ this.getVerifiedInfo()
+ }
+
+ )
+ }
+
+ getVerifiedPanelWrapRefreshing = () => {
+ return (
+ <>
+
+ {
+ this.getVerifiedInfo()
+ }
+
+
+
+
+
+
+
+ )
+ }
+
+ getVerifiedPanelWrapRefreshFinished = () => {
+ return (
+ <>
+
+ {
+ this.getVerifiedInfo()
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ getVerifiedPanelWrapping = () => {
+ const {
+ refreshingPublisher,
+ publisherRefreshed
+ } = this.props
+
+ return (
+ !refreshingPublisher && !publisherRefreshed ?
+ this.getDefaultVerifiedPanelWrap()
+ : !publisherRefreshed && refreshingPublisher ?
+ this.getVerifiedPanelWrapRefreshing()
+ :
+ this.getVerifiedPanelWrapRefreshFinished()
+ )
+ }
+
+ getUnverifiedInfo = () => {
+ return (
+ <>
+
+
+ {' '}
+
+ {getLocale('unVerifiedPublisher')}
+
+
+
+ )
+ }
+
+ getDefaultUnverifiedPanelWrap = () => {
+ const { onRefreshPublisher } = this.props
+ return (
+
+ {
+ this.getUnverifiedInfo()
+ }
+
+ {getLocale('unVerifiedCheck')}
+
+
+ )
+ }
+
+ getUnverifiedPanelWrapRefreshing = () => {
+ return (
+ <>
+
+ {
+ this.getUnverifiedInfo()
+ }
+
+ {getLocale('unVerifiedCheck')}
+
+
+
+
+
+
+
+
+ )
+ }
+
+ getUnverifiedPanelWrapRefreshFinished = () => {
+ return (
+ <>
+
+ {
+ this.getUnverifiedInfo()
+ }
+
+ {getLocale('unVerifiedCheck')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ 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 {
src,
title,
verified,
- showUnVerifiedHelpIcon,
- onRefreshPublisher,
- refreshingPublisher,
- publisherRefreshed
+ showUnVerifiedHelpIcon
} = this.props
return (
@@ -96,38 +268,9 @@ export default class Profile extends React.PureComponent {
) : null}
- {verified && type === 'big' ? (
-
-
-
- {' '}
-
- {getLocale('verifiedPublisher')}
-
-
- ) : showUnVerifiedHelpIcon ? (
-
-
-
- {' '}
-
- {getLocale('unVerifiedPublisher')}
-
-
- {
- !publisherRefreshed ?
- refreshingPublisher ?
-
-
-
- :
- {getLocale('unVerifiedCheck')}
-
- :
- null
- }
-
- ) : null}
+ {verified && type === 'big' ? this.getVerifiedPanelWrapping()
+ : showUnVerifiedHelpIcon ? this.getUnverifiedPanelWrapping()
+ : null}
)
diff --git a/src/features/rewards/profile/style.ts b/src/features/rewards/profile/style.ts
index 75753e44a..0e895314b 100644
--- a/src/features/rewards/profile/style.ts
+++ b/src/features/rewards/profile/style.ts
@@ -4,6 +4,58 @@
import styled, { css } from '../../../theme'
import { Props } from './index'
+import { keyframes } from 'styled-components'
+
+const fadeInOut = keyframes`
+ 0% {
+ opacity: 0;
+ }
+ 20% {
+ opacity: 1;
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+`
+
+const fadeIn = keyframes`
+ from {
+ opacity: 0.2;
+ }
+ to {
+ opacity: 1;
+ }
+`
+
+const fadeOutWrap = keyframes`
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0.2;
+ }
+`
+
+const fadeInFromNull = keyframes`
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+`
+
+const fadeOutToNull = keyframes`
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+`
export const StyledWrapper = styled<{}, 'div'>('div')`
position: relative;
@@ -73,6 +125,31 @@ export const StyledProviderWrap = styled<{}, 'div'>('div')`
margin: 4px 0;
`
+export const StyledProviderWrapRefreshing = styled<{}, 'div'>('div')`
+ display: flex;
+ align-items: center;
+ font-size: 13px;
+ margin: 4px 0;
+ opacity: 0.2;
+ animation-name: ${fadeOutWrap};
+ animation-duration: 500ms;
+ animation-timing-function: ease-out;
+ animation-fill-mode: forwards;
+`
+
+export const StyledProviderWrapRefreshFinished = styled<{}, 'div'>('div')`
+ display: flex;
+ align-items: center;
+ font-size: 13px;
+ margin: 4px 0;
+ opacity: 0.2;
+ animation-name: ${fadeIn};
+ animation-duration: 500ms;
+ animation-timing-function: ease-in;
+ animation-fill-mode: forwards;
+ animation-delay: 2250ms;
+`
+
export const StyledVerifiedText = styled<{}, 'span'>('span')`
color: ${p => p.theme.palette.grey800};
`
@@ -88,6 +165,11 @@ export const StyledVerifiedCheckLink = styled<{}, 'span'>('span')`
color: ${p => p.theme.palette.blurple400};
}
`
+export const StyledVerifiedCheckNoLink = styled<{}, 'span'>('span')`
+ color: ${p => p.theme.palette.grey400};
+ text-decoration: none;
+ z-index: 1;
+`
export const StyledVerifiedDivider = styled.span`
margin: 0 8px;
@@ -107,8 +189,78 @@ export const StyledInlineUnVerified = styled(StyledInlineVerified)`
color: ${p => p.theme.palette.grey500};
`
+export const StyledRefreshOverlay = styled<{}, 'div'>('div')`
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ color: ${p => p.theme.palette.blurple500};
+ top: 0;
+ left: 0;
+ margin-top: 25px;
+`
+
+export const StyledRefreshOverlayFinished = styled<{}, 'div'>('div')`
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ color: ${p => p.theme.palette.blurple500};
+ top: 0;
+ left: 0;
+ margin-top: 25px;
+ opacity: 1;
+ animation-name: ${fadeOutToNull};
+ animation-duration: 500ms;
+ animation-timing-function: ease-out;
+ animation-fill-mode: forwards;
+`
+
+export const StyledRefreshCheckOverlayFinished = styled<{}, 'div'>('div')`
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ color: ${p => p.theme.palette.blurple500};
+ top: 0;
+ left: 0;
+ margin-top: 25px;
+ opacity: 0;
+ animation-name: ${fadeInOut};
+ animation-delay: 1000ms;
+ animation-duration: 1250ms;
+ animation-timing-function: ease-in-out;
+ animation-fill-mode: forwards;
+`
+
export const StyledRefresh = styled(StyledInlineVerified)`
+ position: absolute;
+ text-align: center;
display: flex;
+ opacity: 0;
+ animation-name: ${fadeInFromNull};
+ animation-duration: 500ms;
+ animation-timing-function: ease-in;
+ animation-fill-mode: forwards;
+`
+
+export const StyledRefreshLoaderFinished = styled(StyledInlineVerified)`
+ position: absolute;
+ text-align: center;
+ display: flex;
+`
+
+export const StyledRefreshFinished = styled<{}, 'span'>('span')`
+ position: absolute;
+ height: 24px;
+ width: 24px;
+ color: ${p => p.theme.palette.blurple500};
`
export const StyledSubTitle = styled.span`
diff --git a/stories/features/rewards/concepts.tsx b/stories/features/rewards/concepts.tsx
index ca8f82b74..2a4226947 100644
--- a/stories/features/rewards/concepts.tsx
+++ b/stories/features/rewards/concepts.tsx
@@ -286,7 +286,7 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
)
})
- .add('Wallet Panel', withState({ grant: defaultGrant, notification: grantNotification, showSummary: false, tipsEnabled: true, includeInAuto: true, refreshingPublisher: false }, (store) => {
+ .add('Wallet Panel', withState({ grant: defaultGrant, notification: grantNotification, showSummary: false, tipsEnabled: true, includeInAuto: true, refreshingPublisher: false, publisherRefreshed: false, verified: false }, (store) => {
const curveRgb = '233,235,255'
const panelRgb = '249,251,252'
@@ -312,6 +312,13 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
const onRefreshPublisher = () => {
store.set({ refreshingPublisher: !store.state.refreshingPublisher })
+ setTimeout(() => {
+ store.set({
+ refreshingPublisher: !store.state.refreshingPublisher,
+ publisherRefreshed: !store.state.publisherRefreshed,
+ verified: true
+ })
+ }, 3000)
}
const onToggleTips = () => {
@@ -433,6 +440,7 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
donationAmounts={donationAmounts}
onIncludeInAuto={onIncludeInAuto}
refreshingPublisher={store.state.refreshingPublisher}
+ publisherRefreshed={store.state.publisherRefreshed}
onRefreshPublisher={onRefreshPublisher}
/>