diff --git a/src/components/Breadcrumb/Step.js b/src/components/Breadcrumb/Step.js index ab0fddcd..54521260 100644 --- a/src/components/Breadcrumb/Step.js +++ b/src/components/Breadcrumb/Step.js @@ -5,11 +5,15 @@ import styled from 'styled-components' import Box from 'components/base/Box' -const RADIUS = 17 +import IconCheck from 'icons/Check' +import IconCross from 'icons/Cross' + +const RADIUS = 18 const Wrapper = styled(Box).attrs({ alignItems: 'center', - color: p => (p.isActive ? 'wallet' : 'grey'), + color: p => + ['active', 'valid'].includes(p.status) ? 'wallet' : p.status === 'error' ? 'alertRed' : 'grey', grow: true, justifyContent: 'center', })` @@ -19,18 +23,19 @@ const Wrapper = styled(Box).attrs({ font-size: 9px; ` -const Number = styled(Box).attrs({ +const StepNumber = styled(Box).attrs({ alignItems: 'center', justifyContent: 'center', color: 'white', - bg: p => (p.isActive ? 'wallet' : 'fog'), + bg: p => + ['active', 'valid'].includes(p.status) ? 'wallet' : p.status === 'error' ? 'alertRed' : 'fog', ff: 'Rubik|Regular', })` border-radius: 50%; font-size: 10px; height: ${RADIUS}px; line-height: 10px; - transition: all ease-in-out 0.1s ${p => (p.isActive ? 0.4 : 0)}s; + transition: all ease-in-out 0.1s ${p => (['active', 'valid'].includes(p.status) ? 0.4 : 0)}s; width: ${RADIUS}px; ` @@ -40,21 +45,29 @@ const Label = styled(Box).attrs({ })` position: absolute; margin-top: 23px; - transition: color ease-in-out 0.1s ${p => (p.isActive ? 0.4 : 0)}s; + transition: color ease-in-out 0.1s ${p => (['active', 'valid'].includes(p.status) ? 0.4 : 0)}s; ` type Props = { number: number, - isActive: boolean, + status: 'next' | 'active' | 'valid' | 'error' | 'disable', children: any, } function Step(props: Props) { - const { number, isActive, children } = props + const { number, status, children } = props return ( - - {number} - + + + {status === 'active' || status === 'next' ? ( + number + ) : status === 'valid' ? ( + + ) : ( + + )} + + ) } diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js index d92b3278..597c6672 100644 --- a/src/components/Breadcrumb/index.js +++ b/src/components/Breadcrumb/index.js @@ -8,11 +8,6 @@ import styled from 'styled-components' import Box from 'components/base/Box' import Step from './Step' -type Props = { - items: Array, - currentStep: number | string, -} - const Wrapper = styled(Box).attrs({ horizontal: true, alignItems: 'center', @@ -46,24 +41,53 @@ const Bar = styled.div` } ` +type Props = { + currentStep: number | string, + items: Array, + stepsDisabled: Array, + stepsErrors: Array, +} + class Breadcrumb extends PureComponent { + static defaultProps = { + stepsDisabled: [], + stepsErrors: [], + } + render() { - const { items, currentStep, ...props } = this.props + const { items, stepsDisabled, stepsErrors, currentStep, ...props } = this.props const itemsLength = items.length const start = 100 / itemsLength / 2 return ( - {items.map((item, i) => ( - - {item.label} - - ))} + {items.map((item, i) => { + let status = 'next' + + const stepIndex = parseInt(currentStep, 10) + + if (i === stepIndex) { + status = 'active' + } + + if (i < stepIndex) { + status = 'valid' + } + + if (stepsErrors.includes(i)) { + status = 'error' + } + + if (stepsDisabled.includes(i)) { + status = 'disable' + } + + return ( + + {item.label} + + ) + })} ( > Number(a))} + stepsErrors={array('stepsErrors', []).map(a => Number(a))} items={[ { label: 'Amount' }, { label: 'Summary' }, diff --git a/src/components/CurrentAddress/index.js b/src/components/CurrentAddress/index.js index eb3347fd..977029d5 100644 --- a/src/components/CurrentAddress/index.js +++ b/src/components/CurrentAddress/index.js @@ -6,7 +6,6 @@ import styled from 'styled-components' import noop from 'lodash/noop' -import type { Account } from '@ledgerhq/wallet-common/lib/types' import type { T } from 'types/common' import { rgba } from 'styles/helpers' @@ -101,9 +100,9 @@ const FooterButton = ({ ) type Props = { - account: Account, - addressVerified: null | boolean, - amount: null | string, + address: string, + addressVerified?: boolean, + amount?: string, onCopy: Function, onPrint: Function, onShare: Function, @@ -131,7 +130,7 @@ class CurrentAddress extends PureComponent { render() { const { - account, + address, addressVerified, amount, onCopy, @@ -153,10 +152,7 @@ class CurrentAddress extends PureComponent { {withQRCode && ( - + )}
- {account.address} + {address}
{withBadge && ( @@ -184,13 +180,13 @@ class CurrentAddress extends PureComponent { } label="Verify" onClick={onVerify} /> )} ( } label="Copy" onClick={copy} /> )} /> ( } diff --git a/src/components/CurrentAddress/stories.js b/src/components/CurrentAddress/stories.js index 5504bc4a..188b4c00 100644 --- a/src/components/CurrentAddress/stories.js +++ b/src/components/CurrentAddress/stories.js @@ -12,7 +12,7 @@ const stories = storiesOf('Components', module) stories.add('CurrentAddress', () => ( (p.notValid ? 0 : 30)}px; - transition: all ease-in-out 0.1s; + transition: color ease-in-out 0.1s; ` const WrapperIcon = styled(Box)` color: ${p => (p.notValid ? p.theme.colors.alertRed : p.theme.colors.positiveGreen)}; position: absolute; - left: 193px; + left: ${p => (p.notValid ? 152 : 193)}px; bottom: 16px; svg { - transition: all ease-in-out 0.1s; + transition: color ease-in-out 0.1s; } ` const Check = ({ notValid }: { notValid: boolean }) => ( - {notValid ? : } + {notValid ? : } ) @@ -77,99 +77,97 @@ type Props = { notValid: boolean, } -const DeviceConfirm = (props: Props) => ( - - {!props.notValid && } - - - - +const SVG = ( + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + - + - + + + + + +) + +const DeviceConfirm = (props: Props) => ( + + {!props.notValid && } + + {SVG} ) diff --git a/src/components/layout/Print.js b/src/components/layout/Print.js index 1a92646e..bc760816 100644 --- a/src/components/layout/Print.js +++ b/src/components/layout/Print.js @@ -31,12 +31,12 @@ class Print extends PureComponent { if (!data) { return null } - const { account, amount } = data + const { address, amount } = data return ( (this._node = n)} amount={amount} - account={account} + address={address} withQRCode /> ) diff --git a/src/components/modals/Receive/03-step-confirm-address.js b/src/components/modals/Receive/03-step-confirm-address.js index 8aecfbc3..bae05d3d 100644 --- a/src/components/modals/Receive/03-step-confirm-address.js +++ b/src/components/modals/Receive/03-step-confirm-address.js @@ -42,7 +42,7 @@ export default (props: Props) => ( {props.t('receive:steps.confirmAddress.action')} {props.t('receive:steps.confirmAddress.text')} {props.account && ( - + )} {props.device && props.account && ( diff --git a/src/components/modals/Receive/04-step-receive-funds.js b/src/components/modals/Receive/04-step-receive-funds.js index fed9282c..5a981dba 100644 --- a/src/components/modals/Receive/04-step-receive-funds.js +++ b/src/components/modals/Receive/04-step-receive-funds.js @@ -36,7 +36,7 @@ export default (props: Props) => ( />
, + stepsErrors: Array, } const GET_STEPS = t => [ @@ -56,6 +58,8 @@ const INITIAL_STATE = { appStatus: null, deviceSelected: null, stepIndex: 0, + stepsDisabled: [], + stepsErrors: [], } class ReceiveModal extends PureComponent { @@ -137,6 +141,7 @@ class ReceiveModal extends PureComponent { deviceSelected: null, appStatus: null, addressVerified: null, + stepsErrors: [], stepIndex: newStepIndex, }) } @@ -150,6 +155,7 @@ class ReceiveModal extends PureComponent { handleCheckAddress = isVerified => { this.setState({ addressVerified: isVerified, + stepsErrors: isVerified === false ? [2] : [], }) if (isVerified === true) { @@ -172,6 +178,7 @@ class ReceiveModal extends PureComponent { handleSkipStep = () => this.setState({ addressVerified: false, + stepsErrors: [], stepIndex: this._steps.length - 1, // last step }) @@ -252,7 +259,7 @@ class ReceiveModal extends PureComponent { render() { const { t } = this.props - const { stepIndex } = this.state + const { stepsErrors, stepIndex } = this.state const canClose = this.canClose() const canPrev = this.canPrev() @@ -277,7 +284,12 @@ class ReceiveModal extends PureComponent { {t('receive:title')} - + {this.renderStep()} {stepIndex !== 3 && diff --git a/src/styles/theme.js b/src/styles/theme.js index 3ea40888..2c5422d1 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -66,7 +66,7 @@ export const colors = { pearl: '#ff0000', // new colors - alertRed: '#fa4352', + alertRed: '#ea2e49', black: '#000000', dark: '#142533', fog: '#d8d8d8',