Browse Source

Rework Receive modal

master
Loëck Vézien 7 years ago
parent
commit
d946abf82c
No known key found for this signature in database GPG Key ID: CBCDCE384E853AC4
  1. 5
      src/components/DeviceMonitNew/index.js
  2. 4
      src/components/base/Button/index.js
  3. 6
      src/components/modals/AddAccount/index.js
  4. 23
      src/components/modals/Receive/01-step-account.js
  5. 161
      src/components/modals/Receive/index.js
  6. 20
      src/components/modals/StepConnectDevice.js
  7. 2
      src/styles/theme.js
  8. 13
      static/i18n/en/receive.yml

5
src/components/DeviceMonitNew/index.js

@ -88,7 +88,7 @@ class DeviceMonit extends PureComponent<Props, State> {
let options = null let options = null
if (account && account.currency) { if (account) {
options = { options = {
accountPath: account.path, accountPath: account.path,
accountAddress: account.address, accountAddress: account.address,
@ -134,11 +134,12 @@ class DeviceMonit extends PureComponent<Props, State> {
} }
render() { render() {
const { coinType, account, devices, deviceSelected, render } = this.props
const { status } = this.state const { status } = this.state
const { devices, deviceSelected, render } = this.props
if (render) { if (render) {
return render({ return render({
coinType: (account && account.coinType) || coinType,
status, status,
devices, devices,
deviceSelected: status === 'connected' ? deviceSelected : null, deviceSelected: status === 'connected' ? deviceSelected : null,

4
src/components/base/Button/index.js

@ -12,7 +12,7 @@ import fontFamily from 'styles/styled/fontFamily'
const Base = styled.button.attrs({ const Base = styled.button.attrs({
ff: 'Museo Sans|Regular', ff: 'Museo Sans|Regular',
fontSize: 3, fontSize: 3,
px: p => (p.primary ? (p.small ? 2 : 4) : 1), px: p => (p.primary ? (p.small ? 2 : 3) : 1),
})` })`
${space}; ${space};
${color}; ${color};
@ -22,7 +22,7 @@ const Base = styled.button.attrs({
border-radius: ${p => p.theme.radii[1]}px; border-radius: ${p => p.theme.radii[1]}px;
border: none; border: none;
cursor: ${p => (p.disabled ? 'default' : 'pointer')}; cursor: ${p => (p.disabled ? 'default' : 'pointer')};
height: ${p => (p.small ? 30 : 40)}px; height: ${p => (p.small ? 30 : 36)}px;
outline: none; outline: none;
&:hover { &:hover {

6
src/components/modals/AddAccount/index.js

@ -22,12 +22,12 @@ import { addAccount, updateAccount } from 'actions/accounts'
import { fetchCounterValues } from 'actions/counterValues' import { fetchCounterValues } from 'actions/counterValues'
import Box from 'components/base/Box' import Box from 'components/base/Box'
import Button from 'components/base/Button'
import Breadcrumb from 'components/Breadcrumb' import Breadcrumb from 'components/Breadcrumb'
import Button from 'components/base/Button'
import Modal, { ModalContent, ModalTitle, ModalFooter, ModalBody } from 'components/base/Modal' import Modal, { ModalContent, ModalTitle, ModalFooter, ModalBody } from 'components/base/Modal'
import StepConnectDevice from 'components/modals/StepConnectDevice'
import StepCurrency from './01-step-currency' import StepCurrency from './01-step-currency'
import StepConnectDevice from './02-step-connect-device'
import StepImport from './03-step-import' import StepImport from './03-step-import'
const GET_STEPS = t => [ const GET_STEPS = t => [
@ -362,7 +362,7 @@ class AddAccountModal extends PureComponent<Props, State> {
<ModalBody onClose={onClose}> <ModalBody onClose={onClose}>
<ModalTitle>{t('addAccount:title')}</ModalTitle> <ModalTitle>{t('addAccount:title')}</ModalTitle>
<ModalContent> <ModalContent>
<Breadcrumb mb={6} mt={2} currentStep={stepIndex} items={this._steps} /> <Breadcrumb mb={6} currentStep={stepIndex} items={this._steps} />
{this.renderStep()} {this.renderStep()}
</ModalContent> </ModalContent>
{stepIndex !== 2 && ( {stepIndex !== 2 && (

23
src/components/modals/Receive/01-step-account.js

@ -0,0 +1,23 @@
// @flow
import React from 'react'
import type { Account } from '@ledgerhq/wallet-common/lib/types'
import type { T } from 'types/common'
import Box from 'components/base/Box'
import Label from 'components/base/Label'
import SelectAccount from 'components/SelectAccount'
type Props = {
account: Account | null,
onChangeAccount: Function,
t: T,
}
export default (props: Props) => (
<Box flow={1}>
<Label>{props.t('receive:steps.chooseAccount.label')}</Label>
<SelectAccount onChange={props.onChangeAccount} value={props.account} />
</Box>
)

161
src/components/modals/Receive/index.js

@ -1,105 +1,140 @@
// @flow // @flow
import React, { PureComponent, Fragment } from 'react' import React, { PureComponent } from 'react'
import { translate } from 'react-i18next' import { translate } from 'react-i18next'
import type { Account as AccountType } from '@ledgerhq/wallet-common/lib/types'
import get from 'lodash/get' import get from 'lodash/get'
import type { Account } from '@ledgerhq/wallet-common/lib/types'
import type { T, Device } from 'types/common'
import { MODAL_RECEIVE } from 'config/constants' import { MODAL_RECEIVE } from 'config/constants'
import Box from 'components/base/Box' import Box from 'components/base/Box'
import Label from 'components/base/Label'
import Button from 'components/base/Button' import Button from 'components/base/Button'
import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal' import Breadcrumb from 'components/Breadcrumb'
import ReceiveBox from 'components/ReceiveBox' import Modal, { ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal'
import RequestAmount from 'components/RequestAmount' import StepConnectDevice from 'components/modals/StepConnectDevice'
import SelectAccount from 'components/SelectAccount'
import type { T } from 'types/common' import StepAccount from './01-step-account'
type Props = { type Props = {
t: T, t: T,
} }
type State = { type State = {
account: AccountType | null, deviceSelected: Device | null,
amount: Object, stepIndex: number,
account: Account | null,
} }
const defaultState = { const GET_STEPS = t => [
{ label: t('receive:steps.chooseAccount.title'), Comp: StepAccount },
{ label: t('receive:steps.connectDevice.title'), Comp: StepConnectDevice },
]
const INITIAL_STATE = {
account: null, account: null,
amount: { deviceSelected: null,
left: 0, stepIndex: 0,
right: 0,
},
} }
class ReceiveModal extends PureComponent<Props, State> { class SendModal extends PureComponent<Props, State> {
state = { state = INITIAL_STATE
...defaultState,
_steps = GET_STEPS(this.props.t)
canNext = acc => {
const { stepIndex } = this.state
if (stepIndex === 0) {
return acc !== null
}
return false
} }
getAccount(data) { handleReset = () => this.setState(INITIAL_STATE)
const { account } = this.state
return account || get(data, 'account') handleNextStep = () => {
const { stepIndex } = this.state
if (stepIndex >= this._steps.length - 1) {
return
}
this.setState({ stepIndex: stepIndex + 1 })
} }
handleChangeInput = key => value => handleChangeDevice = d => this.setState({ deviceSelected: d })
this.setState({
[key]: value,
})
handleHide = () => handleChangeAccount = account => this.setState({ account })
this.setState({
...defaultState,
})
_steps = [ renderStep = acc => {
'receiveModal:Infos', const { deviceSelected, stepIndex } = this.state
'receiveModal:ConnectDevice', const { t } = this.props
'receiveModal:SecureValidation', const step = this._steps[stepIndex]
'receiveModal:Confirmation', if (!step) {
].map(v => ({ label: this.props.t(v) })) return null
}
const { Comp } = step
const props = (predicate, props) => (predicate ? props : {})
const stepProps = {
t,
account: acc,
...props(stepIndex === 0, {
onChangeAccount: this.handleChangeAccount,
}),
...props(stepIndex === 1, {
deviceSelected,
onChangeDevice: this.handleChangeDevice,
}),
}
return <Comp {...stepProps} />
}
renderButton = acc => {
const { t } = this.props
const { stepIndex } = this.state
let onClick
switch (stepIndex) {
default:
onClick = this.handleNextStep
}
const props = {
primary: true,
disabled: !this.canNext(acc),
onClick,
children: t('common:next'),
}
return <Button {...props} />
}
render() { render() {
const { t } = this.props const { t } = this.props
const { amount } = this.state const { stepIndex, account } = this.state
return ( return (
<Modal <Modal
name={MODAL_RECEIVE} name={MODAL_RECEIVE}
onHide={this.handleHide} onHide={this.handleReset}
render={({ data, onClose }) => { render={({ data, onClose }) => {
const account = this.getAccount(data) const acc = account || get(data, 'account', null)
return ( return (
<ModalBody onClose={onClose} flow={3} deferHeight={282}> <ModalBody onClose={onClose} deferHeight={344}>
<ModalTitle>{t('receive:title')}</ModalTitle> <ModalTitle>{t('receive:title')}</ModalTitle>
<ModalContent> <ModalContent>
<Box flow={1}> <Breadcrumb mb={6} currentStep={stepIndex} items={this._steps} />
<Label>Account</Label> {this.renderStep(acc)}
<SelectAccount value={account} onChange={this.handleChangeInput('account')} />
</Box>
{account && (
<Fragment>
<Box flow={1}>
<Label>Request amount</Label>
<RequestAmount
account={account}
value={amount}
onChange={v => this.handleChangeInput('amount')(v.values)}
/>
</Box>
<ReceiveBox account={account} amount={amount.left} />
</Fragment>
)}
</ModalContent> </ModalContent>
<ModalFooter horizontal align="center" justify="flex-end"> <ModalFooter>
<Button primary onClick={onClose}> <Box horizontal alignItems="center" justifyContent="flex-end">
{'Close'} {this.renderButton(acc)}
</Button> </Box>
</ModalFooter> </ModalFooter>
</ModalBody> </ModalBody>
) )
@ -109,4 +144,4 @@ class ReceiveModal extends PureComponent<Props, State> {
} }
} }
export default translate()(ReceiveModal) export default translate()(SendModal)

20
src/components/modals/AddAccount/02-step-connect-device.js → src/components/modals/StepConnectDevice.js

@ -2,28 +2,29 @@
import React from 'react' import React from 'react'
import type { Currency } from '@ledgerhq/currencies/lib/types' import type { Account, Currency } from '@ledgerhq/currencies/lib/types'
import type { Device } from 'types/common' import type { Device } from 'types/common'
import DeviceConnect from 'components/DeviceConnect' import DeviceConnect from 'components/DeviceConnect'
import DeviceMonit from 'components/DeviceMonitNew' import DeviceMonit from 'components/DeviceMonitNew'
type Props = { type Props = {
currency: Currency | null, account?: Account,
currency?: Currency | null,
deviceSelected: Device | null, deviceSelected: Device | null,
onChangeDevice: Function, onChangeDevice: Function,
onStatusChange: Function, onStatusChange: Function,
} }
export default (props: Props) => ( const StepConnectDevice = (props: Props) => (
<DeviceMonit <DeviceMonit
account={props.account}
coinType={props.currency && props.currency.coinType} coinType={props.currency && props.currency.coinType}
deviceSelected={props.deviceSelected} deviceSelected={props.deviceSelected}
onStatusChange={props.onStatusChange} onStatusChange={props.onStatusChange}
render={({ status, devices, deviceSelected }) => ( render={({ coinType, status, devices, deviceSelected }) => (
<DeviceConnect <DeviceConnect
coinType={props.currency && props.currency.coinType} coinType={coinType}
appOpened={ appOpened={
status === 'appOpened.success' ? 'success' : status === 'appOpened.fail' ? 'fail' : null status === 'appOpened.success' ? 'success' : status === 'appOpened.fail' ? 'fail' : null
} }
@ -34,3 +35,10 @@ export default (props: Props) => (
)} )}
/> />
) )
StepConnectDevice.defaultProps = {
account: undefined,
currency: undefined,
}
export default StepConnectDevice

2
src/styles/theme.js

@ -77,7 +77,7 @@ export const colors = {
lightGrey: '#f9f9f9', lightGrey: '#f9f9f9',
positiveGreen: '#66be54', positiveGreen: '#66be54',
smoke: '#666666', smoke: '#666666',
wallet: '#4b84ff', wallet: '#6490f1',
white: '#ffffff', white: '#ffffff',
} }

13
static/i18n/en/receive.yml

@ -1 +1,12 @@
title: Receive title: Receive funds
steps:
chooseAccount:
title: Choose Account
label: Account
connectDevice:
title: Connect Device
confirmAddress:
title: Confirm Address
receiveFunds:
title: Receive Funds

Loading…
Cancel
Save