Merge pull request #497 from brave/uphold-verification-ui

Uphold wallet verification UI

src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap

@@ -83,7 +83,6 @@ exports[`Button tests basic tests matches the snapshot 1`] = `
 >
   <div
     className="c2"
-    id="button"
     size="medium"
     type="default"
   >

src/components/buttonsIndicators/button/index.tsx

@@ -55,14 +55,14 @@ export default class ThemedButton extends React.PureComponent<Props, {}> {
 
   render () {
     // separate DOM-related props out of props we want to pass to all children
-    const { disabled, className, onClick, ...deepProps } = this.props
+    const { disabled, className, onClick, id, ...deepProps } = this.props
     const { icon, text } = deepProps
     if (!onClick && !disabled) {
       console.warn('Button component not provided an onClick handler as a prop')
     }
     let ButtonComponent = this.getButtonComponent()
     return (
-      <ButtonComponent className={className} onClick={onClick} disabled={disabled} {...deepProps}>
+      <ButtonComponent id={id} className={className} onClick={onClick} disabled={disabled} {...deepProps}>
         {
           text
           ? <StyledText {...deepProps}>

src/components/icons/fc-rewards-check.tsx

@@ -0,0 +1,22 @@
+// 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 viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
+    <g transform='translate(2 2)' fill='none' fillRule='evenodd'>
+        <circle fill='#FFF' cx='14' cy='14' r='14' />
+        <path fill='#A1A8F2' d='M5.818 14.512l1.02-1.627 5.704 3.37 8.764-7.381 1.143 1.548-9.907 11.511z'
+        />
+    </g>
+  </svg>
+)
+
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)

src/components/icons/fc-rewards-wallet-check.tsx

@@ -0,0 +1,36 @@
+// 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 viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
+    <defs>
+        <path id='rewards-a' d='M.003.032h23.21V23H.002z' />
+    </defs>
+    <g fill='none' fillRule='evenodd'>
+        <g transform='translate(6.755 4.5)'>
+            <mask id='rewards-b' fill='#fff'>
+                <use xlinkHref='#rewards-a' />
+            </mask>
+            <path d='M22.157 16.214a.525.525 0 0 1-.527.522h-3.693a2.1 2.1 0 0 1-2.11-2.088c0-1.151.946-2.088 2.11-2.088h3.693c.29 0 .527.234.527.522v3.132zm-2.11 5.742H2.11a1.051 1.051 0 0 1-1.055-1.044V8.384c0-.575.474-1.044 1.055-1.044h17.937c.582 0 1.055.469 1.055 1.044v3.132h-3.165c-1.746 0-3.166 1.405-3.166 3.132s1.42 3.132 3.166 3.132h3.165v3.132a1.05 1.05 0 0 1-1.055 1.044zm-5.195-20.74a1.03 1.03 0 0 1 .783-.105c.27.072.495.244.634.485l.001.002-8.156 4.698H6.031l8.82-5.08zm2.987 3.094l1.15 1.986H14.39l3.448-1.986zm-7.628 1.986l6.583-3.792.521.9-5.021 2.892H10.21zm11.946 5.316V8.384c0-1.094-.858-1.984-1.942-2.07l-3.03-5.237a2.082 2.082 0 0 0-1.277-.974 2.092 2.092 0 0 0-1.587.21L3.934 6.296H2.11C.946 6.296 0 7.233 0 8.384v12.528A2.1 2.1 0 0 0 2.11 23h17.937a2.1 2.1 0 0 0 2.11-2.088v-3.228a1.565 1.565 0 0 0 1.055-1.47v-3.132c0-.68-.442-1.253-1.055-1.47z'
+            fill='#A1A8F2' mask='url(#rewards-b)' />
+        </g>
+        <path d='M24.132 18.176a.939.939 0 0 0-.943.932c0 .514.423.933.943.933s.942-.419.942-.933a.939.939 0 0 0-.942-.932'
+        fill='#A1A8F2' />
+        <g transform='translate(2 8.682)'>
+            <ellipse fill='#1BBA6A' cx='6.34' cy='6.273' rx='6.34' ry='6.273' />
+            <path fill='#FFF' d='M2.635 6.502l.462-.729 2.583 1.51 3.968-3.307.517.694L5.68 9.827z'
+            />
+        </g>
+    </g>
+</svg>
+)
+
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)

src/components/icons/index.tsx

@@ -132,7 +132,9 @@ export { default as LoaderIcon } from './loader'
 export { default as PaperAirplaneIcon } from './paper-airplane'
 export { default as RedditColorIcon } from './fc-logo-reddit'
 export { default as RewardsActivateIcon } from './fc-rewards-activate'
+export { default as RewardsCheckIcon } from './fc-rewards-check'
 export { default as RewardsSendTipsIcon } from './fc-rewards-send-tips'
+export { default as RewardsWalletCheck } from './fc-rewards-wallet-check'
 export { default as TorLockIcon } from './tor-lock'
 export { default as TwitchColorIcon } from './fc-logo-twitch'
 export { default as TwitterColorIcon } from './fc-logo-twitter'

src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap

@@ -133,7 +133,6 @@ exports[`Grant complete tests basic tests matches the snapshot 1`] = `
     >
       <div
         className="c7"
-        id="grant-completed-ok"
         size="call-to-action"
         type="accent"
       >

src/features/rewards/index.ts

@@ -27,8 +27,10 @@ import ModalBackupRestore from './modalBackupRestore'
 import ModalContribute from './modalContribute'
 import ModalDonation from './modalDonation'
 import ModalPending from './modalPending'
+import ModalRedirect from './modalRedirect'
 import NextContribution from './nextContribution'
 import PanelWelcome from './panelWelcome'
+import PanelVerify from './panelVerify'
 import Profile from './profile'
 import RestoreSites from './restoreSites'
 import RewardsButton from './rewardsButton'
@@ -47,6 +49,7 @@ import WalletEmpty from './walletEmpty'
 import WalletOff from './walletOff'
 import WalletPanel from './walletPanel'
 import WalletPanelDisabled from './walletPanelDisabled'
+import WalletPopup from './walletPopup'
 import WalletSummary from './walletSummary'
 import WalletSummarySlider from './walletSummarySlider'
 import WalletWrapper from './walletWrapper'
@@ -78,8 +81,10 @@ export {
   ModalContribute,
   ModalDonation,
   ModalPending,
+  ModalRedirect,
   NextContribution,
   PanelWelcome,
+  PanelVerify,
   Profile,
   RestoreSites,
   RewardsButton,
@@ -98,6 +103,7 @@ export {
   WalletOff,
   WalletPanel,
   WalletPanelDisabled,
+  WalletPopup,
   WalletSummary,
   WalletSummarySlider,
   WalletWrapper,

src/features/rewards/modalRedirect/__snapshots__/spec.tsx.snap

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalRedirect tests basic tests matches the snapshot 1`] = `
+.c3 {
+  font-family: Poppins,sans-serif;
+}
+
+.c4 {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 2;
+  color: #3b3e4f;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.c5 {
+  margin: 0 auto;
+  width: 30px;
+  height: 30px;
+}
+
+.c0 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(12,13,33,0.85);
+  z-index: 99;
+  padding: 0 20px;
+  overflow: hidden;
+}
+
+.c1 {
+  max-width: 920px;
+  margin: 52px auto;
+  background: #fff;
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+}
+
+.c2 {
+  padding: 48px 48px;
+  overflow-y: auto;
+  max-height: calc(100vh - 100px);
+}
+
+.c6 {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+<div
+  className="c0"
+  id="modal"
+  onClick={[Function]}
+>
+  <div
+    className="c1"
+    size="normal"
+  >
+    <div
+      className="c2"
+    >
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          MISSING: processingRequest
+        </div>
+        <div
+          className="c5"
+        >
+          <svg
+            aria-hidden="true"
+            className="c6"
+            focusable="false"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M6.5 23.5c-.7 0-1.4-.4-1.7-1C3.6 20.5 3 18.3 3 16 3 8.8 8.8 3 16 3s13 5.8 13 13c0 1.1-.9 2-2 2s-2-.9-2-2c0-5-4-9-9-9s-9 4-9 9c0 1.6.4 3.1 1.2 4.5.6 1 .2 2.2-.7 2.7-.4.2-.7.3-1 .3z"
+            >
+               
+              <animateTransform
+                attributeName="transform"
+                attributeType="xml"
+                dur=".5s"
+                from="0 16 16"
+                repeatCount="indefinite"
+                to="360 16 16"
+                type="rotate"
+              />
+            </path>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/features/rewards/modalRedirect/index.tsx

@@ -0,0 +1,63 @@
+/* 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 {
+  StyledWrapper,
+  StyledTitle,
+  StyledLoader,
+  StyledError,
+  StyledButton
+} from './style'
+import Modal from '../../../components/popupModals/modal/index'
+import { getLocale } from '../../../helpers'
+import { LoaderIcon } from '../../../components/icons'
+import { Button } from '../../../components'
+
+export interface Props {
+  id?: string
+  errorText?: string
+  onClick?: () => void
+}
+
+export default class ModalRedirect extends React.PureComponent<Props, {}> {
+
+  getButton = () => {
+    const { onClick } = this.props
+    if (!onClick) {
+      return null
+    }
+
+    return (
+      <StyledButton>
+        <Button onClick={onClick} text={getLocale('processingRequestButton')} type={'accent'} />
+      </StyledButton>
+    )
+  }
+
+  render () {
+    const { id, errorText } = this.props
+
+    return (
+      <Modal id={id} displayCloseButton={false}>
+        <StyledWrapper>
+          <StyledTitle>
+            {getLocale('processingRequest')}
+          </StyledTitle>
+          {
+            errorText
+            ? <StyledError>
+                {errorText}
+                {this.getButton()}
+            </StyledError>
+            : <StyledLoader>
+              <LoaderIcon />
+            </StyledLoader>
+          }
+
+        </StyledWrapper>
+      </Modal>
+    )
+  }
+}

src/features/rewards/modalRedirect/spec.tsx

@@ -0,0 +1,24 @@
+/* global jest, expect, describe, it, afterEach */
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { create } from 'react-test-renderer'
+import ModalRedirect from './index'
+import { TestThemeProvider } from '../../../theme'
+
+describe('ModalRedirect tests', () => {
+  const baseComponent = (props?: object) => <TestThemeProvider><ModalRedirect id='modal' {...props} /></TestThemeProvider>
+
+  describe('basic tests', () => {
+    it('matches the snapshot', () => {
+      const component = baseComponent()
+      const tree = create(component).toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('renders the component', () => {
+      const wrapper = shallow(baseComponent())
+      const assertion = wrapper.find('#modal').length
+      expect(assertion).toBe(1)
+    })
+  })
+})

src/features/rewards/modalRedirect/style.ts

@@ -0,0 +1,35 @@
+/* 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 styled from 'styled-components'
+
+export const StyledWrapper = styled<{}, 'div'>('div')`
+  font-family: ${p => p.theme.fontFamily.heading};
+`
+
+export const StyledTitle = styled<{}, 'div'>('div')`
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 2;
+  color: ${p => p.theme.palette.grey800};
+  margin-bottom: 20px;
+  text-align: center;
+`
+
+export const StyledLoader = styled<{}, 'div'>('div')`
+  margin: 0 auto;
+  width: 30px;
+  height: 30px;
+`
+
+export const StyledError = styled<{}, 'div'>('div')`
+  text-align: center;
+`
+
+export const StyledButton = styled<{}, 'div'>('div')`
+  display: flex;
+  margin-top: 20px;
+  flex-direction: column;
+  align-items: center;
+`