diff --git a/src/components/DeviceMonitNew/index.js b/src/components/DeviceMonitNew/index.js index 1a3bec92..56fa2d1f 100644 --- a/src/components/DeviceMonitNew/index.js +++ b/src/components/DeviceMonitNew/index.js @@ -88,7 +88,7 @@ class DeviceMonit extends PureComponent { let options = null - if (account && account.currency) { + if (account) { options = { accountPath: account.path, accountAddress: account.address, @@ -134,11 +134,12 @@ class DeviceMonit extends PureComponent { } render() { + const { coinType, account, devices, deviceSelected, render } = this.props const { status } = this.state - const { devices, deviceSelected, render } = this.props if (render) { return render({ + coinType: (account && account.coinType) || coinType, status, devices, deviceSelected: status === 'connected' ? deviceSelected : null, diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js index 47436049..7d5670cd 100644 --- a/src/components/base/Button/index.js +++ b/src/components/base/Button/index.js @@ -12,7 +12,7 @@ import fontFamily from 'styles/styled/fontFamily' const Base = styled.button.attrs({ ff: 'Museo Sans|Regular', fontSize: 3, - px: p => (p.primary ? (p.small ? 2 : 4) : 1), + px: p => (p.primary ? (p.small ? 2 : 3) : 1), })` ${space}; ${color}; @@ -22,7 +22,7 @@ const Base = styled.button.attrs({ border-radius: ${p => p.theme.radii[1]}px; border: none; cursor: ${p => (p.disabled ? 'default' : 'pointer')}; - height: ${p => (p.small ? 30 : 40)}px; + height: ${p => (p.small ? 30 : 36)}px; outline: none; &:hover { diff --git a/src/components/modals/AddAccount/index.js b/src/components/modals/AddAccount/index.js index 9fee169e..1f415e06 100644 --- a/src/components/modals/AddAccount/index.js +++ b/src/components/modals/AddAccount/index.js @@ -22,12 +22,12 @@ import { addAccount, updateAccount } from 'actions/accounts' import { fetchCounterValues } from 'actions/counterValues' import Box from 'components/base/Box' -import Button from 'components/base/Button' import Breadcrumb from 'components/Breadcrumb' +import Button from 'components/base/Button' import Modal, { ModalContent, ModalTitle, ModalFooter, ModalBody } from 'components/base/Modal' +import StepConnectDevice from 'components/modals/StepConnectDevice' import StepCurrency from './01-step-currency' -import StepConnectDevice from './02-step-connect-device' import StepImport from './03-step-import' const GET_STEPS = t => [ @@ -362,7 +362,7 @@ class AddAccountModal extends PureComponent { {t('addAccount:title')} - + {this.renderStep()} {stepIndex !== 2 && ( diff --git a/src/components/modals/Receive/01-step-account.js b/src/components/modals/Receive/01-step-account.js new file mode 100644 index 00000000..4413d06b --- /dev/null +++ b/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) => ( + + + + +) diff --git a/src/components/modals/Receive/index.js b/src/components/modals/Receive/index.js index 1a16aca3..3622d83c 100644 --- a/src/components/modals/Receive/index.js +++ b/src/components/modals/Receive/index.js @@ -1,105 +1,140 @@ // @flow -import React, { PureComponent, Fragment } from 'react' +import React, { PureComponent } from 'react' import { translate } from 'react-i18next' -import type { Account as AccountType } from '@ledgerhq/wallet-common/lib/types' - 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 Box from 'components/base/Box' -import Label from 'components/base/Label' import Button from 'components/base/Button' -import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal' -import ReceiveBox from 'components/ReceiveBox' -import RequestAmount from 'components/RequestAmount' -import SelectAccount from 'components/SelectAccount' +import Breadcrumb from 'components/Breadcrumb' +import Modal, { ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal' +import StepConnectDevice from 'components/modals/StepConnectDevice' -import type { T } from 'types/common' +import StepAccount from './01-step-account' type Props = { t: T, } type State = { - account: AccountType | null, - amount: Object, + deviceSelected: Device | null, + 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, - amount: { - left: 0, - right: 0, - }, + deviceSelected: null, + stepIndex: 0, } -class ReceiveModal extends PureComponent { - state = { - ...defaultState, +class SendModal extends PureComponent { + state = INITIAL_STATE + + _steps = GET_STEPS(this.props.t) + + canNext = acc => { + const { stepIndex } = this.state + + if (stepIndex === 0) { + return acc !== null + } + + return false } - getAccount(data) { - const { account } = this.state + handleReset = () => this.setState(INITIAL_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 => - this.setState({ - [key]: value, - }) + handleChangeDevice = d => this.setState({ deviceSelected: d }) - handleHide = () => - this.setState({ - ...defaultState, - }) + handleChangeAccount = account => this.setState({ account }) - _steps = [ - 'receiveModal:Infos', - 'receiveModal:ConnectDevice', - 'receiveModal:SecureValidation', - 'receiveModal:Confirmation', - ].map(v => ({ label: this.props.t(v) })) + renderStep = acc => { + const { deviceSelected, stepIndex } = this.state + const { t } = this.props + const step = this._steps[stepIndex] + if (!step) { + 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 + } + + 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 + + + {this.renderButton(acc)} + ) @@ -109,4 +144,4 @@ class ReceiveModal extends PureComponent { } } -export default translate()(ReceiveModal) +export default translate()(SendModal) diff --git a/src/components/modals/AddAccount/02-step-connect-device.js b/src/components/modals/StepConnectDevice.js similarity index 64% rename from src/components/modals/AddAccount/02-step-connect-device.js rename to src/components/modals/StepConnectDevice.js index fed49b45..61e8756e 100644 --- a/src/components/modals/AddAccount/02-step-connect-device.js +++ b/src/components/modals/StepConnectDevice.js @@ -2,28 +2,29 @@ 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 DeviceConnect from 'components/DeviceConnect' import DeviceMonit from 'components/DeviceMonitNew' type Props = { - currency: Currency | null, + account?: Account, + currency?: Currency | null, deviceSelected: Device | null, onChangeDevice: Function, onStatusChange: Function, } -export default (props: Props) => ( +const StepConnectDevice = (props: Props) => ( ( + render={({ coinType, status, devices, deviceSelected }) => ( ( )} /> ) + +StepConnectDevice.defaultProps = { + account: undefined, + currency: undefined, +} + +export default StepConnectDevice diff --git a/src/styles/theme.js b/src/styles/theme.js index 8dc6e5c7..ddc0b732 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -77,7 +77,7 @@ export const colors = { lightGrey: '#f9f9f9', positiveGreen: '#66be54', smoke: '#666666', - wallet: '#4b84ff', + wallet: '#6490f1', white: '#ffffff', } diff --git a/static/i18n/en/receive.yml b/static/i18n/en/receive.yml index f12a73f0..e24c60f8 100644 --- a/static/i18n/en/receive.yml +++ b/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