diff --git a/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap b/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap index 41dda2343..275a7156a 100644 --- a/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap +++ b/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap @@ -83,7 +83,6 @@ exports[`Button tests basic tests matches the snapshot 1`] = ` >
diff --git a/src/components/buttonsIndicators/button/index.tsx b/src/components/buttonsIndicators/button/index.tsx index 0c17a2752..8adeb43cb 100644 --- a/src/components/buttonsIndicators/button/index.tsx +++ b/src/components/buttonsIndicators/button/index.tsx @@ -55,14 +55,14 @@ export default class ThemedButton extends React.PureComponent { 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 ( - + { text ? diff --git a/src/components/icons/fc-rewards-check.tsx b/src/components/icons/fc-rewards-check.tsx new file mode 100644 index 000000000..e0af88ee2 --- /dev/null +++ b/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 = ( + + + + + + +) + +// Styled Component for SVG +export default GenerateComponentForGraphic(Graphic) diff --git a/src/components/icons/fc-rewards-wallet-check.tsx b/src/components/icons/fc-rewards-wallet-check.tsx new file mode 100644 index 000000000..38f89b962 --- /dev/null +++ b/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 = ( + + + + + + + + + + + + + + + + + + +) + +// Styled Component for SVG +export default GenerateComponentForGraphic(Graphic) diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 65bdc1581..240c84730 100644 --- a/src/components/icons/index.tsx +++ b/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' diff --git a/src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap b/src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap index 553b8b993..df3d6e4c8 100644 --- a/src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap +++ b/src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap @@ -133,7 +133,6 @@ exports[`Grant complete tests basic tests matches the snapshot 1`] = ` >
diff --git a/src/features/rewards/index.ts b/src/features/rewards/index.ts index 165575b79..ab8cf9659 100644 --- a/src/features/rewards/index.ts +++ b/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, diff --git a/src/features/rewards/modalRedirect/__snapshots__/spec.tsx.snap b/src/features/rewards/modalRedirect/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000..c3b834f5f --- /dev/null +++ b/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; +} + + +`; diff --git a/src/features/rewards/modalRedirect/index.tsx b/src/features/rewards/modalRedirect/index.tsx new file mode 100644 index 000000000..43abf5956 --- /dev/null +++ b/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 { + + getButton = () => { + const { onClick } = this.props + if (!onClick) { + return null + } + + return ( + + +
+ MISSING: walletVerificationFooter + + + Uphold + +
+ +
+
+
+`; diff --git a/src/features/rewards/panelVerify/index.tsx b/src/features/rewards/panelVerify/index.tsx new file mode 100644 index 000000000..49137962d --- /dev/null +++ b/src/features/rewards/panelVerify/index.tsx @@ -0,0 +1,113 @@ +/* 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 { getLocale } from '../../../helpers' + +import { + StyledWrapper, + StyledClose, + StyledHeader, + StyledBatIcon, + StyledHeaderText, + StyledTitle, + StyledSubtitle, + StyledListTitle, + StyledListItem, + StyledListIcon, + StyledListItemText, + StyledIDNotice, + StyledButton, + StyledFooter, + StyledFooterIcon +} from './style' + +import { + CloseStrokeIcon, + UpholdColorIcon, + RewardsWalletCheck, + RewardsCheckIcon +} from '../../../components/icons' + +export interface Props { + onVerifyClick: () => void + onClose: () => void + compact?: boolean + id?: string +} + +export default class PanelWelcome extends React.PureComponent { + getListItem = (text: string, compact?: boolean) => ( + + + + + + {text} + + + ) + + getHeader = (onClose: () => void, compact?: boolean) => ( + <> + + + + + + + + + + {getLocale('walletVerificationTitle1')} + + + {getLocale('walletVerificationTitle2')} + + + + + ) + + getFooter = (compact?: boolean) => ( + + {getLocale('walletVerificationFooter')} Uphold + + + + + ) + + render () { + const { + onVerifyClick, + onClose, + compact, + id + } = this.props + + return ( + + {this.getHeader(onClose, compact)} + + {getLocale('walletVerificationListHeader')} + + {this.getListItem(getLocale(compact ? 'walletVerificationListCompact1' : 'walletVerificationList1'), compact)} + {this.getListItem(getLocale(compact ? 'walletVerificationListCompact2' : 'walletVerificationList2'), compact)} + {this.getListItem(getLocale(compact ? 'walletVerificationListCompact3' : 'walletVerificationList3'), compact)} + + {getLocale('walletVerificationID')} + + + {this.getFooter(compact)} + + ) + } +} diff --git a/src/features/rewards/panelVerify/spec.tsx b/src/features/rewards/panelVerify/spec.tsx new file mode 100644 index 000000000..396eab30d --- /dev/null +++ b/src/features/rewards/panelVerify/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 PanelVerify from './index' +import { TestThemeProvider } from '../../../theme' + +describe('PanelVerify tests', () => { + const baseComponent = (props?: object) => + + 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('#panel-verify').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/src/features/rewards/panelVerify/style.ts b/src/features/rewards/panelVerify/style.ts new file mode 100644 index 000000000..c8694f193 --- /dev/null +++ b/src/features/rewards/panelVerify/style.ts @@ -0,0 +1,130 @@ +/* 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' +import Heading from '../../../components/text/heading' +import Button, { Props as ButtonProps } from '../../../components/buttonsIndicators/button' +import { ComponentType } from 'react' + +interface StyleProps { + compact?: boolean +} + +export const StyledWrapper = styled<{}, 'div'>('div')` + position: absolute; + text-align: center; + font-family: ${p => p.theme.fontFamily.heading}; + background-image: linear-gradient(180deg, ${p => p.theme.palette.blurple500} 0%, #563195 100%); + padding: 42px 42px 30px; + top: 0; + left: 0; + width: 100%; + z-index: 10; + height: 100%; + overflow-y: auto; +` + +export const StyledClose = styled<{}, 'div'>('div')` + position: absolute; + top: 20px; + right: 20px; + cursor: pointer; + width: 11px; + height: 11px; + color: ${p => p.theme.palette.white}; +` + +export const StyledHeader = styled('div')` + margin-bottom: ${p => p.compact ? '15px' : '42px'}; +` + +export const StyledBatIcon = styled<{}, 'div'>('div')` + display: inline-block; + vertical-align: middle; + width: 50px; + height: 50px; +` + +export const StyledHeaderText = styled<{}, 'div'>('div')` + width: calc(100% - 50px); + vertical-align: middle; + display: inline-block; + padding-left: 22px; +` + +export const StyledTitle = styled(Heading)` + color: ${p => p.theme.palette.white}; + text-align: left; + font-size: 22px; + line-height: 24px; + font-weight: 600; +` + +export const StyledSubtitle = styled(Heading)` + color: ${p => p.theme.palette.white}; + text-align: left; + font-family: ${p => p.theme.fontFamily.body}; + font-size: 14px; + line-height: 24px; +` + +export const StyledListTitle = styled(Heading)` + font-weight: 600; + font-size: 14px; + text-align: left; + line-height: 25px; + padding-bottom: 4px; + color: ${p => p.theme.palette.white}; +` + +export const StyledListItem = styled('div')` + color: ${p => p.theme.palette.white}; + margin: ${p => p.compact ? '10px' : '15px'} 0; +` + +export const StyledListIcon = styled<{}, 'div'>('div')` + display: inline-block; + width: 24px; + height: 24px; + vertical-align: middle; +` + +export const StyledListItemText = styled<{}, 'div'>('div')` + vertical-align: middle; + text-align: left; + font-family: ${p => p.theme.fontFamily.body}; + font-size: 15px; + line-height: 20px; + display: inline-block; + width: calc(100% - 30px); + padding-left: 12px; +` + +export const StyledIDNotice = styled('div')` + font-size: 14px; + line-height: 20px; + font-weight: 600; + color: ${p => p.theme.palette.white}; + padding: ${p => p.compact ? '20px' : '30px'} 24px 20px; + border-top: 1px solid rgba(255, 255, 255, 0.5433); + margin: ${p => p.compact ? '25px' : '44px'} 0 0; +` + +export const StyledButton = styled(Button as ComponentType)` + padding: 11px 15px; +` + +export const StyledFooter = styled('div')` +font-family: ${p => p.theme.fontFamily.body}; + font-size: 12px; + color: ${p => p.theme.palette.white}; + margin-top: ${p => p.compact ? '28px' : '32px'}; +` + +export const StyledFooterIcon = styled<{}, 'div'>('div')` + display: inline-block; + vertical-align: middle; + width: 20px; + height: 20px; +` diff --git a/src/features/rewards/walletPopup/__snapshots__/spec.tsx.snap b/src/features/rewards/walletPopup/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000..c06fcc932 --- /dev/null +++ b/src/features/rewards/walletPopup/__snapshots__/spec.tsx.snap @@ -0,0 +1,168 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`WalletSummary tests basic tests matches the snapshot 1`] = ` +.c0 { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background: rgba(0,0,0,0); + z-index: 99; + padding: 0 20px; + overflow: hidden; +} + +.c1 { + margin: 52px auto; + background: #FFFFFF; + border-radius: 6px; + overflow: hidden; + position: relative; + box-shadow: 0 0 12px 0 rgba(12,13,33,0.44); +} + +.c2 { + padding: 20px; +} + +.c3 { + font-weight: bold; + border-bottom: 1px solid #c2c4cf; + padding-bottom: 5px; + margin-bottom: 10px; +} + +.c6 { + font-weight: normal; + float: right; + color: #39a84c; +} + +.c4 { + vertical-align: middle; + display: inline-block; + width: 24px; + height: 24px; + margin-left: -5px; +} + +.c5 { + width: 100%; + height: 100%; + fill: currentColor; +} + +
+
+
+
+ + + + tester +
+ MISSING: walletVerified +
+
+

+ hi +

+
+
+
+`; diff --git a/src/features/rewards/walletPopup/index.tsx b/src/features/rewards/walletPopup/index.tsx new file mode 100644 index 000000000..9f382d7c9 --- /dev/null +++ b/src/features/rewards/walletPopup/index.tsx @@ -0,0 +1,62 @@ +/* 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' + +// Helpers +import { getLocale } from '../../../helpers' + +// Styled Components +import { + StyledContent, + StyledDialog, + StyledHeader, + StyledIcon, + StyledStatus, + StyledWrapper +} from './style' +import { + UpholdColorIcon +} from '../../../components/icons' + +export interface Props { + children: React.ReactNode + onClose: () => void + userName: string + id?: string +} + +export default class WalletPopup extends React.PureComponent { + insideClick = (e: React.SyntheticEvent) => { + // Don't propogate click to container, which will close it + e.stopPropagation() + } + + render () { + const { + children, + onClose, + userName, + id + } = this.props + return ( + + + + + + + + {userName} + + {getLocale('walletVerified')} + + + {children} + + + + ) + } +} diff --git a/src/features/rewards/walletPopup/spec.tsx b/src/features/rewards/walletPopup/spec.tsx new file mode 100644 index 000000000..42d5a1025 --- /dev/null +++ b/src/features/rewards/walletPopup/spec.tsx @@ -0,0 +1,34 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import WalletPopup, { Props } from './index' +import { TestThemeProvider } from '../../../theme' + +const props = { + onClose: () => null, + userName: 'tester', +} + +describe('WalletSummary tests', () => { + const baseComponent = (props: Props) => + + +

hi

+ + + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent(props) + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent(props)) + const assertion = wrapper.find('#wallet-popup').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/src/features/rewards/walletPopup/style.ts b/src/features/rewards/walletPopup/style.ts new file mode 100644 index 000000000..5a06abb68 --- /dev/null +++ b/src/features/rewards/walletPopup/style.ts @@ -0,0 +1,51 @@ +/* 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')` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background: rgba(0, 0, 0, 0); + z-index: 99; + padding: 0 20px; + overflow: hidden; +` + +export const StyledDialog = styled<{}, 'div'>('div')` + margin: 52px auto; + background: ${p => p.theme.palette.white}; + border-radius: 6px; + overflow: hidden; + position: relative; + box-shadow: 0 0 12px 0 rgba(12, 13, 33, 0.44); +` + +export const StyledContent = styled<{}, 'div'>('div')` + padding: 20px; +` + +export const StyledHeader = styled<{}, 'div'>('div')` + font-weight: bold; + border-bottom: 1px solid ${p => p.theme.palette.grey400}; + padding-bottom: 5px; + margin-bottom: 10px; +` + +export const StyledStatus = styled<{}, 'div'>('div')` + font-weight: normal; + float: right; + color: ${p => p.theme.palette.green600}; +` + +export const StyledIcon = styled<{}, 'span'>('span')` + vertical-align: middle; + display: inline-block; + width: 24px; + height: 24px; + margin-left: -5px; +` diff --git a/src/features/rewards/walletSummarySlider/style.ts b/src/features/rewards/walletSummarySlider/style.ts index 06ad67f2b..85e96b348 100644 --- a/src/features/rewards/walletSummarySlider/style.ts +++ b/src/features/rewards/walletSummarySlider/style.ts @@ -19,6 +19,7 @@ export const StyledTransitionWrapper = styled('div')` height: ${p => p.show ? '100%' : '0'}; opacity: ${p => p.show ? '1' : '0'}; overflow: ${p => p.show ? 'unset' : 'hidden'}; + position: relative; ` as any export const StyledToggleWrapper = styled('div')` diff --git a/src/features/rewards/walletWrapper/__snapshots__/spec.tsx.snap b/src/features/rewards/walletWrapper/__snapshots__/spec.tsx.snap index 72efd098e..fab507e47 100644 --- a/src/features/rewards/walletWrapper/__snapshots__/spec.tsx.snap +++ b/src/features/rewards/walletWrapper/__snapshots__/spec.tsx.snap @@ -18,11 +18,13 @@ exports[`WalletWrapper tests basic tests matches the snapshot 1`] = ` flex-direction: column; max-width: 415px; margin: 0 auto; + position: relative; } .c1 { padding: 16px 21px 0 19px; position: relative; + z-index: 2; } .c2 { @@ -54,7 +56,6 @@ exports[`WalletWrapper tests basic tests matches the snapshot 1`] = ` .c8 { padding: 0px; - position: relative; background: #fff; -webkit-flex: 1; -ms-flex: 1; diff --git a/src/features/rewards/walletWrapper/index.tsx b/src/features/rewards/walletWrapper/index.tsx index 7b44adedc..b97d8b2b2 100644 --- a/src/features/rewards/walletWrapper/index.tsx +++ b/src/features/rewards/walletWrapper/index.tsx @@ -16,6 +16,7 @@ import { StyledCopyImage, StyledIconAction, StyledBalanceConverted, + StyledBalanceUnavailable, StyledGrantWrapper, StyledGrant, StyledActionWrapper, @@ -35,12 +36,19 @@ import { StyledButtonWrapper, StyledButton, StyledNotificationMessage, - StyledPipe + StyledPipe, + StyledWalletButton, + StyledVerifiedButton, + StyledVerifiedButtonIcon, + StyledVerifiedButtonText, + StyledTextIcon, + StyledDialogList, + StyledLink } from './style' import { getLocale } from '../../../helpers' -import { GrantCaptcha, GrantComplete, GrantError, GrantWrapper } from '../' +import { GrantCaptcha, GrantComplete, GrantError, GrantWrapper, WalletPopup } from '../' import Alert, { Type as AlertType } from '../alert' -import { Button } from '../../../components' +import Button, { Props as ButtonProps } from '../../../components/buttonsIndicators/button' import { CaratDownIcon, CaratUpIcon, @@ -96,8 +104,15 @@ export type NotificationType = 'tipsProcessed' | 'error' | 'pendingContribution' | + 'verifyWallet' | '' +export type WalletState = + 'unverified' | + 'verified' | + 'disconnected_unverified' | + 'disconnected_verified' + export interface Notification { id: string date?: string @@ -110,7 +125,7 @@ export interface Props { balance: string converted: string | null actions: ActionWallet[] - connectedWallet?: boolean + walletState?: WalletState compact?: boolean contentPadding?: boolean showCopy?: boolean @@ -130,19 +145,25 @@ export interface Props { onFinish?: () => void onSolution?: (x: number, y: number) => void convertProbiToFixed?: (probi: string, place: number) => string + onVerifyClick?: () => void + onDisconnectClick?: () => void + goToUphold?: () => void + userName?: string } export type Step = '' | 'captcha' | 'complete' interface State { - grantDetails: boolean + grantDetails: boolean, + verificationDetails: boolean } export default class WalletWrapper extends React.PureComponent { constructor (props: Props) { super(props) this.state = { - grantDetails: false + grantDetails: false, + verificationDetails: false } } @@ -281,6 +302,10 @@ export default class WalletWrapper extends React.PureComponent { buttonText = getLocale('addFunds') buttonAction = this.onNotificationClick break + case 'verifyWallet': + buttonText = getLocale('whyHow').toUpperCase() + buttonAction = this.onNotificationClick + break default: buttonText = getLocale('ok').toUpperCase() break @@ -321,6 +346,102 @@ export default class WalletWrapper extends React.PureComponent { ) } + generateWalletButton = (walletState: WalletState) => { + const buttonProps: Partial = { + size: 'small', + level: 'primary', + brand: 'rewards', + onClick: this.props.onVerifyClick + } + + switch (walletState) { + case 'unverified': + return ( + !, + position: 'after' + }} + text={getLocale('walletButtonUnverified')} + {...buttonProps} + id={'verify-wallet-button'} + /> + ) + + case 'verified': + return ( + + + + + + {getLocale('walletButtonVerified')} + + + + + + ) + + case 'disconnected_unverified': + case 'disconnected_verified': + return ( +
) }) + .add('Panel Verification', () => { + const onVerifyClick = () => + console.log('onVerifyClick') + + const onClose = () => + console.log('onClose') + + const compact = boolean('compact panel', false) + + return ( +
+ +
+ ) + }) .add('Toggle Tips', withState({ tipsEnabled: true }, (store) => { const onToggle = () => { store.set({ tipsEnabled: !store.state.tipsEnabled }) diff --git a/stories/features/rewards/settings/pageWallet.tsx b/stories/features/rewards/settings/pageWallet.tsx index 4c1560b41..a2225591e 100644 --- a/stories/features/rewards/settings/pageWallet.tsx +++ b/stories/features/rewards/settings/pageWallet.tsx @@ -3,7 +3,6 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react' -import { boolean, object, select } from '@storybook/addon-knobs' // Components import { DetailRow as ContributeDetailRow } from '../../../../src/features/rewards/tableContribute' @@ -17,6 +16,7 @@ import { WalletSummary, WalletWrapper } from '../../../../src/features/rewards' +import { WalletState } from '../../../../src/features/rewards/walletWrapper' import { WalletAddIcon, WalletWithdrawIcon } from '../../../../src/components/icons' // Assets @@ -26,6 +26,16 @@ const ddgo = require('../../../assets/img/ddgo.jpg') const guardian = require('../../../assets/img/guardian.jpg') const wiki = require('../../../assets/img/wiki.jpg') +export interface Props { + grants: { + tokens: string, + expireDate: string, + type: string + }[] + content: 'empty' | 'summary' | 'off' + walletState: WalletState +} + interface State { activeTabId: number modalBackup: boolean @@ -36,8 +46,8 @@ const doNothing = () => { console.log('nothing') } -class PageWallet extends React.Component<{}, State> { - constructor (props: {}) { +class PageWallet extends React.Component { + constructor (props: Props) { super(props) this.state = { activeTabId: 0, @@ -232,15 +242,7 @@ class PageWallet extends React.Component<{}, State> { } render () { - const content = select( - 'Content', - { - empty: 'empty', - summary: 'summary', - off: 'off' - }, - 'empty' as 'empty' | 'summary' | 'off' - ) + const { content, walletState, grants } = this.props const self = this return ( @@ -267,24 +269,8 @@ class PageWallet extends React.Component<{}, State> { onActivityClick={doNothing} showCopy={true} showSecActions={true} - grants={object('Claimed grants', [ - { - tokens: '8.0', - expireDate: '7/15/2018', - type: 'ugp' - }, - { - tokens: '10.0', - expireDate: '9/10/2018', - type: 'ugp' - }, - { - tokens: '10.0', - expireDate: '10/10/2018', - type: 'ads' - } - ])} - connectedWallet={boolean('Connected wallet', false)} + grants={grants} + walletState={walletState} > { content === 'empty' ? : null diff --git a/stories/features/rewards/settings/settings.tsx b/stories/features/rewards/settings/settings.tsx index 987fd7220..18db85fff 100644 --- a/stories/features/rewards/settings/settings.tsx +++ b/stories/features/rewards/settings/settings.tsx @@ -9,7 +9,7 @@ import AdsBox from './adsBox' import ContributeBox from './contributeBox' import DonationsBox from './donationsBox' import Grant from './grant' -import PageWallet from './pageWallet' +import PageWallet, { Props as WalletProps } from './pageWallet' import { Grid, Column } from '../../../../src/components' import { DisabledBox, MainToggle, SettingsPage } from '../../../../src/features/rewards' @@ -17,12 +17,16 @@ import { DisabledBox, MainToggle, SettingsPage } from '../../../../src/features/ import '../../../assets/fonts/muli.css' import '../../../assets/fonts/poppins.css' +export interface Props { + walletProps: WalletProps +} + interface State { mainToggle: boolean } -class Settings extends React.PureComponent<{}, State> { - constructor (props: {}) { +class Settings extends React.PureComponent { + constructor (props: Props) { super(props) this.state = { mainToggle: true @@ -38,6 +42,7 @@ class Settings extends React.PureComponent<{}, State> { } render () { + const { walletProps } = this.props return ( @@ -60,7 +65,7 @@ class Settings extends React.PureComponent<{}, State> { - + diff --git a/stories/features/rewards/settingsMobile/mobileWalletPanel.tsx b/stories/features/rewards/settingsMobile/mobileWalletPanel.tsx index 4fa8902c4..071d9555d 100644 --- a/stories/features/rewards/settingsMobile/mobileWalletPanel.tsx +++ b/stories/features/rewards/settingsMobile/mobileWalletPanel.tsx @@ -3,7 +3,7 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react' -import { boolean, object } from '@storybook/addon-knobs' +import { object } from '@storybook/addon-knobs' import { WalletEmpty, WalletWrapper } from '../../../../src/features/rewards' import { StyledWalletClose, StyledWalletOverlay, StyledWalletWrapper } from './style' @@ -111,7 +111,6 @@ class MobileWalletPanel extends React.Component { type: 'ads' } ])} - connectedWallet={boolean('Connected wallet', false)} > diff --git a/stories/features/rewards/wallet.tsx b/stories/features/rewards/wallet.tsx index 578f2cd49..3f513895b 100644 --- a/stories/features/rewards/wallet.tsx +++ b/stories/features/rewards/wallet.tsx @@ -9,7 +9,7 @@ import centered from '@storybook/addon-centered' // Components import { WalletSummary, WalletEmpty, WalletOff, WalletPanel, WalletSummarySlider, WalletWrapper } from '../../../src/features/rewards' -import { AlertWallet, Notification } from '../../../src/features/rewards/walletWrapper' +import { AlertWallet, Notification, WalletState } from '../../../src/features/rewards/walletWrapper' import { WalletAddIcon, WalletImportIcon } from '../../../src/components/icons' import { WalletInfoHeader } from '../../../src/features/rewards/mobile' @@ -45,8 +45,7 @@ storiesOf('Feature Components/Rewards/Wallet/Desktop', module) compact={false} contentPadding={false} onNotificationClick={onEnableAds} - notification={adsLaunchNotification} - connectedWallet={boolean('Connected wallet', false)} + notification={boolean('Show notification', true) ? adsLaunchNotification : undefined} showCopy={boolean('Show Uphold', false)} showSecActions={boolean('Show secondary actions', true)} balance={text('Balance', '25.0')} @@ -81,6 +80,12 @@ storiesOf('Feature Components/Rewards/Wallet/Desktop', module) } ] : []} alert={showAlert ? alert : undefined} + walletState={select('wallet status', { + unverified: 'unverified', + verified: 'verified', + 'disconnected unverified': 'disconnected_unverified', + 'disconnected verified': 'disconnected_verified' + }, 'unverified') as WalletState} > Some content