Merge pull request #264 from loeck/master

Rework Receive modal

src/components/DeviceConnect/index.js

@@ -197,8 +197,11 @@ class DeviceConnect extends PureComponent<Props> {
             </StepIcon>
             <Box grow shrink>
               <Trans i18nKey="deviceConnect:step1.connect" parent="div">
-                Connect your <strong>Ledger device</strong> to your computer and enter your{' '}
+                {'Connect your '}
-                <strong>PIN code</strong> on your device
+                <strong>Ledger device</strong>
+                {' to your computer and enter your '}
+                <strong>PIN code</strong>
+                {' on your device'}
               </Trans>
             </Box>
             <StepCheck checked={hasDevice} />
@@ -206,7 +209,7 @@ class DeviceConnect extends PureComponent<Props> {
           {hasMultipleDevices && (
             <ListDevices>
               <Box color="graphite" fontSize={3}>
-                {t('deviceConnect:step1.choose', { devicesCount: devices.length })}
+                {t('deviceConnect:step1.choose', { count: devices.length })}
               </Box>
               <Box flow={2}>
                 {devices.map(d => {
@@ -240,8 +243,9 @@ class DeviceConnect extends PureComponent<Props> {
             </StepIcon>
             <Box grow shrink>
               <Trans i18nKey="deviceConnect:step2.open" parent="div">
-                {/* $FlowFixMe */}
+                {'Open '}
-                Open <strong>{{ appName }} App</strong> on your device
+                <strong>{appName}</strong>
+                {' App on your device'}
               </Trans>
             </Box>
             <StepCheck checked={appState.success} hasErrors={appState.fail} />
@@ -254,8 +258,8 @@ class DeviceConnect extends PureComponent<Props> {
             </Box>
             <Box>
               <Trans i18nKey="deviceConnect:info" parent="div">
-                {/* $FlowFixMe */}
+                {'You must use the device associated to the account '}
-                You must use the device associated to the account <strong>{{ accountName }}</strong>
+                <strong>{accountName}</strong>
               </Trans>
             </Box>
           </Info>

src/components/DeviceConnect/stories.js

@@ -36,9 +36,9 @@ const devices = [
 stories.add('DeviceConnect', () => (
   <DeviceConnect
     accountName={boolean('withAccount', true) ? text('accountName', 'Test Account') : null}
-    coinType={select('coinType', [0, 1, 145, 156, 2, 3, 5], 0)}
+    coinType={Number(select('coinType', [0, 1, 145, 156, 2, 3, 5], '0'))}
     appOpened={select('appOpened', ['', 'success', 'fail'], '')}
-    devices={devices.slice(0, select('devices', [0, 1, 2, 3], 0))}
+    devices={devices.slice(0, Number(select('devices', [0, 1, 2, 3], '0')))}
     deviceSelected={devices[select('deviceSelected', ['', 0, 1, 2], '')] || null}
     onChangeDevice={action('onChangeDevice')}
   />

src/components/DeviceMonitNew/index.js

@@ -14,29 +14,28 @@ const mapStateToProps = state => ({
   devices: getDevices(state),
 })
 
-type DeviceStatus =
+type DeviceStatus = 'unconnected' | 'connected'
-  | 'unconnected'
+
-  | 'connected'
+type AppStatus = 'success' | 'fail' | 'progress'
-  | 'appOpened.success'
-  | 'appOpened.fail'
-  | 'appOpened.progress'
 
 type Props = {
   coinType: number,
   devices: Devices,
   deviceSelected: Device | null,
   account?: Account,
-  onStatusChange?: DeviceStatus => void,
+  onStatusChange?: (DeviceStatus, AppStatus) => void,
   render?: Function,
 }
 
 type State = {
-  status: DeviceStatus,
+  deviceStatus: DeviceStatus,
+  appStatus: AppStatus,
 }
 
 class DeviceMonit extends PureComponent<Props, State> {
   state = {
-    status: this.props.deviceSelected ? 'connected' : 'unconnected',
+    appStatus: 'progress',
+    deviceStatus: this.props.deviceSelected ? 'connected' : 'unconnected',
   }
 
   componentDidMount() {
@@ -47,19 +46,18 @@ class DeviceMonit extends PureComponent<Props, State> {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { status } = this.state
+    const { deviceStatus } = this.state
     const { deviceSelected, devices } = this.props
     const { devices: nextDevices, deviceSelected: nextDeviceSelected } = nextProps
 
-    if (status === 'unconnected' && !deviceSelected && nextDeviceSelected) {
+    if (deviceStatus === 'unconnected' && !deviceSelected && nextDeviceSelected) {
-      this.handleStatusChange('connected')
+      this.handleStatusChange('connected', 'progress')
     }
 
-    if (status !== 'unconnected' && devices !== nextDevices) {
+    if (deviceStatus !== 'unconnected' && devices !== nextDevices) {
       const isConnected = nextDevices.find(d => d === nextDeviceSelected)
       if (!isConnected) {
-        this.handleStatusChange('unconnected')
+        this.handleStatusChange('unconnected', 'progress')
-        clearTimeout(this._timeout)
       }
     }
   }
@@ -69,7 +67,7 @@ class DeviceMonit extends PureComponent<Props, State> {
     const { deviceSelected: prevDeviceSelected } = prevProps
 
     if (prevDeviceSelected !== deviceSelected) {
-      this.handleStatusChange('appOpened.progress')
+      this.handleStatusChange('connected', 'progress')
       this._timeout = setTimeout(this.checkAppOpened, 250)
     }
   }
@@ -88,7 +86,7 @@ class DeviceMonit extends PureComponent<Props, State> {
 
     let options = null
 
-    if (account && account.currency) {
+    if (account) {
       options = {
         accountPath: account.path,
         accountAddress: account.address,
@@ -109,13 +107,15 @@ class DeviceMonit extends PureComponent<Props, State> {
 
   _timeout: any = null
 
-  handleStatusChange = status => {
+  handleStatusChange = (deviceStatus, appStatus) => {
     const { onStatusChange } = this.props
-    this.setState({ status })
+    clearTimeout(this._timeout)
-    onStatusChange && onStatusChange(status)
+    this.setState({ deviceStatus, appStatus })
+    onStatusChange && onStatusChange(deviceStatus, appStatus)
   }
 
   handleMsgEvent = (e, { type, data }) => {
+    const { deviceStatus } = this.state
     const { deviceSelected } = this.props
 
     if (deviceSelected === null) {
@@ -123,25 +123,27 @@ class DeviceMonit extends PureComponent<Props, State> {
     }
 
     if (type === 'wallet.checkIfAppOpened.success' && deviceSelected.path === data.devicePath) {
-      clearTimeout(this._timeout)
+      this.handleStatusChange(deviceStatus, 'success')
-      this.handleStatusChange('appOpened.success')
+      this._timeout = setTimeout(this.checkAppOpened, 1e3)
     }
 
     if (type === 'wallet.checkIfAppOpened.fail' && deviceSelected.path === data.devicePath) {
-      this.handleStatusChange('appOpened.fail')
+      this.handleStatusChange(deviceStatus, 'fail')
       this._timeout = setTimeout(this.checkAppOpened, 1e3)
     }
   }
 
   render() {
-    const { status } = this.state
+    const { coinType, account, devices, deviceSelected, render } = this.props
-    const { devices, deviceSelected, render } = this.props
+    const { appStatus, deviceStatus } = this.state
 
     if (render) {
       return render({
-        status,
+        appStatus,
+        coinType: (account && account.coinType) || coinType,
         devices,
-        deviceSelected: status === 'connected' ? deviceSelected : null,
+        deviceSelected: deviceStatus === 'connected' ? deviceSelected : null,
+        deviceStatus,
       })
     }
 

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 => [
@@ -67,7 +67,7 @@ type State = {
   deviceSelected: Device | null,
   fetchingCounterValues: boolean,
   selectedAccounts: Array<number>,
-  status: null | string,
+  appStatus: null | string,
   stepIndex: number,
 }
 
@@ -77,7 +77,7 @@ const INITIAL_STATE = {
   deviceSelected: null,
   fetchingCounterValues: false,
   selectedAccounts: [],
-  status: null,
+  appStatus: null,
   stepIndex: 0,
 }
 
@@ -148,8 +148,8 @@ class AddAccountModal extends PureComponent<Props, State> {
     }
 
     if (stepIndex === 1) {
-      const { deviceSelected, status } = this.state
+      const { deviceSelected, appStatus } = this.state
-      return deviceSelected !== null && status === 'appOpened.success'
+      return deviceSelected !== null && appStatus === 'success'
     }
 
     if (stepIndex === 3) {
@@ -225,7 +225,7 @@ class AddAccountModal extends PureComponent<Props, State> {
 
   handleChangeCurrency = (currency: Currency) => this.setState({ currency })
 
-  handleChangeStatus = status => this.setState({ status })
+  handleChangeStatus = (deviceStatus, appStatus) => this.setState({ appStatus })
 
   handleImportAccount = () => {
     const { archivedAccounts, updateAccount } = this.props
@@ -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,151 @@
 // @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 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 = {
   t: T,
 }
 
 type State = {
-  account: AccountType | null,
+  account: Account | null,
-  amount: Object,
+  deviceSelected: Device | null,
+  appStatus: null | string,
+  stepIndex: number,
 }
 
-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: {
+  deviceSelected: null,
-    left: 0,
+  appStatus: null,
-    right: 0,
+  stepIndex: 0,
-  },
 }
 
 class ReceiveModal 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
+    }
+
+    if (stepIndex === 1) {
+      const { deviceSelected, appStatus } = this.state
+      return deviceSelected !== null && appStatus === 'success'
+    }
+
+    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,
+  handleChangeAccount = account => this.setState({ account })
-    })
 
-  handleHide = () =>
+  handleChangeStatus = (deviceStatus, appStatus) => this.setState({ appStatus })
-    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, {
+        accountName: acc ? acc.name : undefined,
+        deviceSelected,
+        onChangeDevice: this.handleChangeDevice,
+        onStatusChange: this.handleChangeStatus,
+      }),
+    }
+
+    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}>
+                <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>
-              <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>
             </ModalBody>
           )

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

@@ -2,31 +2,33 @@
 
 import React from 'react'
 
+import type { Account } from '@ledgerhq/wallet-common/lib/types'
 import type { 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,
+  accountName?: string,
+  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, appStatus, devices, deviceSelected }) => (
       <DeviceConnect
-        coinType={props.currency && props.currency.coinType}
+        accountName={props.accountName}
-        appOpened={
+        coinType={coinType}
-          status === 'appOpened.success' ? 'success' : status === 'appOpened.fail' ? 'fail' : null
+        appOpened={appStatus === 'success' ? 'success' : appStatus === 'fail' ? 'fail' : null}
-        }
         devices={devices}
         deviceSelected={deviceSelected}
         onChangeDevice={props.onChangeDevice}
@@ -34,3 +36,11 @@ export default (props: Props) => (
     )}
   />
 )
+
+StepConnectDevice.defaultProps = {
+  account: undefined,
+  accountName: undefined,
+  currency: undefined,
+}
+
+export default StepConnectDevice

src/renderer/i18n/electron.js

@@ -1,11 +1,21 @@
 // @flow
 
+import fs from 'fs'
 import path from 'path'
 import FSBackend from 'i18next-node-fs-backend'
 
 import staticPath from 'helpers/staticPath'
 import { createWithBackend } from './instanciate'
 
+const ns = p =>
+  fs
+    .readdirSync(p)
+    .filter(f => !fs.statSync(path.join(p, f)).isDirectory())
+    .map(file => file.split('.yml')[0])
+
 export default createWithBackend(FSBackend, {
-  loadPath: path.join(staticPath, '/i18n/{{lng}}/{{ns}}.yml'),
+  ns: ns(path.join(staticPath, '/i18n/en')),
+  backend: {
+    loadPath: path.join(staticPath, '/i18n/{{lng}}/{{ns}}.yml'),
+  },
 })

src/renderer/i18n/instanciate.js

@@ -1,22 +1,6 @@
 import i18n from 'i18next'
 
 const commonConfig = {
-  ns: [
-    'account',
-    'accountsOrder',
-    'addAccount',
-    'common',
-    'dashboard',
-    'device',
-    'language',
-    'receive',
-    'send',
-    'settings',
-    'sidebar',
-    'time',
-    'operationsList',
-    'update',
-  ],
   fallbackLng: 'en',
   debug: false,
   react: {
@@ -35,7 +19,7 @@ function addPluralRule(i18n) {
 export function createWithBackend(backend, backendOpts) {
   i18n.use(backend).init({
     ...commonConfig,
-    backend: backendOpts,
+    ...backendOpts,
   })
   return addPluralRule(i18n)
 }
@@ -43,7 +27,7 @@ export function createWithBackend(backend, backendOpts) {
 export function createWithResources(resources) {
   i18n.init({
     ...commonConfig,
-    resources,
+    ...resources,
   })
   return addPluralRule(i18n)
 }

src/renderer/i18n/storybook.js

@@ -1,20 +1,16 @@
 import { createWithResources } from './instanciate'
 
-const resources = {
+const req = require.context('../../../static/i18n/en', true, /.yml$/)
-  account: require('../../../static/i18n/en/account.yml'),
-  accountsOrder: require('../../../static/i18n/en/accountsOrder.yml'),
-  addAccount: require('../../../static/i18n/en/addAccount.yml'),
-  common: require('../../../static/i18n/en/common.yml'),
-  dashboard: require('../../../static/i18n/en/dashboard.yml'),
-  device: require('../../../static/i18n/en/device.yml'),
-  language: require('../../../static/i18n/en/language.yml'),
-  receive: require('../../../static/i18n/en/receive.yml'),
-  send: require('../../../static/i18n/en/send.yml'),
-  settings: require('../../../static/i18n/en/settings.yml'),
-  sidebar: require('../../../static/i18n/en/sidebar.yml'),
-  time: require('../../../static/i18n/en/time.yml'),
-  operationsList: require('../../../static/i18n/en/operationsList.yml'),
-  update: require('../../../static/i18n/en/update.yml'),
-}
 
-export default createWithResources({ en: resources })
+const resources = req.keys().reduce((result, file) => {
+  const [, fileName] = file.match(/\.\/(.*)\.yml/)
+  result[fileName] = req(file)
+  return result
+}, {})
+
+export default createWithResources({
+  ns: Object.keys(resources),
+  resources: {
+    en: resources,
+  },
+})

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/deviceConnect.yml

@@ -1,8 +1,8 @@
 step1:
-  connect: Connect your <0>Ledger device</0> to your computer and enter your <1>PIN code</1> on your device
+  connect: Connect your <1>Ledger device</1> to your computer and enter your <3>PIN code</3> on your device
-  choose: We detected {{devicesCount}} devices connected, please select one:
+  choose: "We detected {{count}} devices connected, please select one:"
 
 step2:
-  open: Open <0>{{appName}}</0> App on your device
+  open: Open <1><0>{{appName}}</0></1> App on your device
 
-info: You must use the device associated to the account <0>{{accountName}}</0>
+info: You must use the device associated to the account <1><0>{{accountName}}</0></1>

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