Rework Receive modal

src/components/DeviceMonitNew/index.js

@@ -88,7 +88,7 @@ class DeviceMonit extends PureComponent<Props, State> {
 
     let options = null
 
-    if (account && account.currency) {
+    if (account) {
       options = {
         accountPath: account.path,
         accountAddress: account.address,
@@ -134,11 +134,12 @@ class DeviceMonit extends PureComponent<Props, State> {
   }
 
   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,

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 {

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<Props, State> {
           <ModalBody onClose={onClose}>
             <ModalTitle>{t('addAccount:title')}</ModalTitle>
             <ModalContent>
-              <Breadcrumb mb={6} mt={2} currentStep={stepIndex} items={this._steps} />
+              <Breadcrumb mb={6} currentStep={stepIndex} items={this._steps} />
               {this.renderStep()}
             </ModalContent>
             {stepIndex !== 2 && (

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>
+)

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<Props, State> {
-  state = {
-    ...defaultState,
+class SendModal extends PureComponent<Props, State> {
+  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 <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() {
     const { t } = this.props
-    const { amount } = this.state
+    const { stepIndex, account } = this.state
 
     return (
       <Modal
         name={MODAL_RECEIVE}
-        onHide={this.handleHide}
+        onHide={this.handleReset}
         render={({ data, onClose }) => {
-          const account = this.getAccount(data)
-
+          const acc = account || get(data, 'account', null)
           return (
-            <ModalBody onClose={onClose} flow={3} deferHeight={282}>
+            <ModalBody onClose={onClose} deferHeight={344}>
               <ModalTitle>{t('receive:title')}</ModalTitle>
               <ModalContent>
-                <Box flow={1}>
-                  <Label>Account</Label>
-                  <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>
-                )}
+                <Breadcrumb mb={6} currentStep={stepIndex} items={this._steps} />
+                {this.renderStep(acc)}
               </ModalContent>
-              <ModalFooter horizontal align="center" justify="flex-end">
-                <Button primary onClick={onClose}>
-                  {'Close'}
-                </Button>
+              <ModalFooter>
+                <Box horizontal alignItems="center" justifyContent="flex-end">
+                  {this.renderButton(acc)}
+                </Box>
               </ModalFooter>
             </ModalBody>
           )
@@ -109,4 +144,4 @@ class ReceiveModal extends PureComponent<Props, State> {
   }
 }
 
-export default translate()(ReceiveModal)
+export default translate()(SendModal)

src/components/modals/AddAccount/02-step-connect-device.js → 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) => (
   <DeviceMonit
+    account={props.account}
     coinType={props.currency && props.currency.coinType}
     deviceSelected={props.deviceSelected}
     onStatusChange={props.onStatusChange}
-    render={({ status, devices, deviceSelected }) => (
+    render={({ coinType, status, devices, deviceSelected }) => (
       <DeviceConnect
-        coinType={props.currency && props.currency.coinType}
+        coinType={coinType}
         appOpened={
           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

src/styles/theme.js

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

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