|
|
@ -1,6 +1,7 @@ |
|
|
|
// @flow
|
|
|
|
|
|
|
|
import React, { Fragment, PureComponent } from 'react' |
|
|
|
import styled from 'styled-components' |
|
|
|
import { translate } from 'react-i18next' |
|
|
|
import get from 'lodash/get' |
|
|
|
import type { Account } from '@ledgerhq/wallet-common/lib/types' |
|
|
@ -15,8 +16,19 @@ import Breadcrumb from 'components/Breadcrumb' |
|
|
|
import Modal, { ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal' |
|
|
|
import StepConnectDevice from 'components/modals/StepConnectDevice' |
|
|
|
|
|
|
|
import IconAngleLeft from 'icons/AngleLeft' |
|
|
|
|
|
|
|
import StepAccount from './01-step-account' |
|
|
|
import StepConfirmAddress from './03-step-confirm-address' |
|
|
|
import StepReceiveFunds from './04-step-receive-funds' |
|
|
|
|
|
|
|
const PrevButton = styled(Button).attrs({ |
|
|
|
fontSize: 4, |
|
|
|
ml: 4, |
|
|
|
})` |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
` |
|
|
|
|
|
|
|
type Props = { |
|
|
|
t: T, |
|
|
@ -24,8 +36,10 @@ type Props = { |
|
|
|
|
|
|
|
type State = { |
|
|
|
account: Account | null, |
|
|
|
deviceSelected: Device | null, |
|
|
|
amount: string | number, |
|
|
|
addressVerified: null | boolean, |
|
|
|
appStatus: null | string, |
|
|
|
deviceSelected: Device | null, |
|
|
|
stepIndex: number, |
|
|
|
} |
|
|
|
|
|
|
@ -33,12 +47,15 @@ const GET_STEPS = t => [ |
|
|
|
{ label: t('receive:steps.chooseAccount.title'), Comp: StepAccount }, |
|
|
|
{ label: t('receive:steps.connectDevice.title'), Comp: StepConnectDevice }, |
|
|
|
{ label: t('receive:steps.confirmAddress.title'), Comp: StepConfirmAddress }, |
|
|
|
{ label: t('receive:steps.receiveFunds.title'), Comp: StepReceiveFunds }, |
|
|
|
] |
|
|
|
|
|
|
|
const INITIAL_STATE = { |
|
|
|
account: null, |
|
|
|
deviceSelected: null, |
|
|
|
addressVerified: null, |
|
|
|
amount: '', |
|
|
|
appStatus: null, |
|
|
|
deviceSelected: null, |
|
|
|
stepIndex: 0, |
|
|
|
} |
|
|
|
|
|
|
@ -63,15 +80,33 @@ class ReceiveModal extends PureComponent<Props, State> { |
|
|
|
} |
|
|
|
|
|
|
|
canClose = () => { |
|
|
|
const { stepIndex } = this.state |
|
|
|
const { stepIndex, addressVerified } = this.state |
|
|
|
|
|
|
|
if (stepIndex === 2) { |
|
|
|
return false |
|
|
|
return addressVerified === false |
|
|
|
} |
|
|
|
|
|
|
|
return true |
|
|
|
} |
|
|
|
|
|
|
|
canPrev = () => { |
|
|
|
const { addressVerified, stepIndex } = this.state |
|
|
|
|
|
|
|
if (stepIndex === 1) { |
|
|
|
return true |
|
|
|
} |
|
|
|
|
|
|
|
if (stepIndex === 2) { |
|
|
|
return addressVerified === false |
|
|
|
} |
|
|
|
|
|
|
|
if (stepIndex === 3) { |
|
|
|
return true |
|
|
|
} |
|
|
|
|
|
|
|
return false |
|
|
|
} |
|
|
|
|
|
|
|
handleReset = () => this.setState(INITIAL_STATE) |
|
|
|
|
|
|
|
handleNextStep = () => { |
|
|
@ -82,14 +117,57 @@ class ReceiveModal extends PureComponent<Props, State> { |
|
|
|
this.setState({ stepIndex: stepIndex + 1 }) |
|
|
|
} |
|
|
|
|
|
|
|
handlePrevStep = () => { |
|
|
|
const { stepIndex } = this.state |
|
|
|
|
|
|
|
let newStepIndex |
|
|
|
|
|
|
|
switch (stepIndex) { |
|
|
|
default: |
|
|
|
case 1: |
|
|
|
newStepIndex = 0 |
|
|
|
break |
|
|
|
|
|
|
|
case 2: |
|
|
|
case 3: |
|
|
|
newStepIndex = 1 |
|
|
|
break |
|
|
|
} |
|
|
|
|
|
|
|
this.setState({ |
|
|
|
deviceSelected: null, |
|
|
|
appStatus: null, |
|
|
|
addressVerified: null, |
|
|
|
stepIndex: newStepIndex, |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
handleChangeDevice = d => this.setState({ deviceSelected: d }) |
|
|
|
|
|
|
|
handleChangeAccount = account => this.setState({ account }) |
|
|
|
|
|
|
|
handleChangeStatus = (deviceStatus, appStatus) => this.setState({ appStatus }) |
|
|
|
|
|
|
|
handleCheckAddress = isVerified => { |
|
|
|
this.setState({ |
|
|
|
addressVerified: isVerified, |
|
|
|
}) |
|
|
|
|
|
|
|
if (isVerified === true) { |
|
|
|
this.handleNextStep() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
handleChangeAmount = amount => this.setState({ amount }) |
|
|
|
|
|
|
|
handleSkipStep = () => |
|
|
|
this.setState({ |
|
|
|
addressVerified: false, |
|
|
|
stepIndex: this._steps.length - 1, // last step
|
|
|
|
}) |
|
|
|
|
|
|
|
renderStep = acc => { |
|
|
|
const { deviceSelected, stepIndex } = this.state |
|
|
|
const { amount, addressVerified, deviceSelected, stepIndex } = this.state |
|
|
|
const { t } = this.props |
|
|
|
const step = this._steps[stepIndex] |
|
|
|
if (!step) { |
|
|
@ -111,6 +189,16 @@ class ReceiveModal extends PureComponent<Props, State> { |
|
|
|
onChangeDevice: this.handleChangeDevice, |
|
|
|
onStatusChange: this.handleChangeStatus, |
|
|
|
}), |
|
|
|
...props(stepIndex === 2, { |
|
|
|
addressVerified, |
|
|
|
onCheck: this.handleCheckAddress, |
|
|
|
device: deviceSelected, |
|
|
|
}), |
|
|
|
...props(stepIndex === 3, { |
|
|
|
addressVerified, |
|
|
|
amount, |
|
|
|
onChangeAmount: this.handleChangeAmount, |
|
|
|
}), |
|
|
|
} |
|
|
|
|
|
|
|
return <Comp {...stepProps} /> |
|
|
@ -121,23 +209,31 @@ class ReceiveModal extends PureComponent<Props, State> { |
|
|
|
const { stepIndex } = this.state |
|
|
|
|
|
|
|
let onClick |
|
|
|
let props |
|
|
|
|
|
|
|
switch (stepIndex) { |
|
|
|
case 2: |
|
|
|
props = { |
|
|
|
primary: true, |
|
|
|
children: 'Contact Support', |
|
|
|
} |
|
|
|
break |
|
|
|
default: |
|
|
|
onClick = this.handleNextStep |
|
|
|
} |
|
|
|
|
|
|
|
const props = { |
|
|
|
primary: true, |
|
|
|
disabled: !this.canNext(acc), |
|
|
|
onClick, |
|
|
|
children: t('common:next'), |
|
|
|
props = { |
|
|
|
primary: true, |
|
|
|
disabled: !this.canNext(acc), |
|
|
|
onClick, |
|
|
|
children: t('common:next'), |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
<Fragment> |
|
|
|
{stepIndex === 1 && ( |
|
|
|
<Button fontSize={4}>{t('receive:steps.connectDevice.withoutDevice')}</Button> |
|
|
|
<Button onClick={this.handleSkipStep} fontSize={4}> |
|
|
|
{t('receive:steps.connectDevice.withoutDevice')} |
|
|
|
</Button> |
|
|
|
)} |
|
|
|
<Button {...props} /> |
|
|
|
</Fragment> |
|
|
@ -149,6 +245,7 @@ class ReceiveModal extends PureComponent<Props, State> { |
|
|
|
const { stepIndex, account } = this.state |
|
|
|
|
|
|
|
const canClose = this.canClose() |
|
|
|
const canPrev = this.canPrev() |
|
|
|
|
|
|
|
return ( |
|
|
|
<Modal |
|
|
@ -159,18 +256,29 @@ class ReceiveModal extends PureComponent<Props, State> { |
|
|
|
const acc = account || get(data, 'account', null) |
|
|
|
return ( |
|
|
|
<ModalBody onClose={canClose ? onClose : undefined} deferHeight={330}> |
|
|
|
<ModalTitle>{t('receive:title')}</ModalTitle> |
|
|
|
<ModalTitle> |
|
|
|
{canPrev && ( |
|
|
|
<PrevButton onClick={this.handlePrevStep}> |
|
|
|
<Box horizontal alignItems="center"> |
|
|
|
<IconAngleLeft size={16} /> |
|
|
|
{t('common:back')} |
|
|
|
</Box> |
|
|
|
</PrevButton> |
|
|
|
)} |
|
|
|
{t('receive:title')} |
|
|
|
</ModalTitle> |
|
|
|
<ModalContent> |
|
|
|
<Breadcrumb mb={6} currentStep={stepIndex} items={this._steps} /> |
|
|
|
<Breadcrumb mb={5} currentStep={stepIndex} items={this._steps} /> |
|
|
|
{this.renderStep(acc)} |
|
|
|
</ModalContent> |
|
|
|
{canClose && ( |
|
|
|
<ModalFooter> |
|
|
|
<Box horizontal alignItems="center" justifyContent="flex-end" flow={2}> |
|
|
|
{this.renderButton(acc)} |
|
|
|
</Box> |
|
|
|
</ModalFooter> |
|
|
|
)} |
|
|
|
{stepIndex !== 3 && |
|
|
|
canClose && ( |
|
|
|
<ModalFooter> |
|
|
|
<Box horizontal alignItems="center" justifyContent="flex-end" flow={2}> |
|
|
|
{this.renderButton(acc)} |
|
|
|
</Box> |
|
|
|
</ModalFooter> |
|
|
|
)} |
|
|
|
</ModalBody> |
|
|
|
) |
|
|
|
}} |
|
|
|