Fix flow in storybook, start Send modal

src/components/IsUnlocked/index.js

@@ -78,16 +78,26 @@ class IsUnlocked extends PureComponent<Props, State> {
     }
   }
 
+  handleFocusInput = () => {
+    if (this._input && this._input !== null) {
+      this._input.focus()
+    }
+  }
+
+  _input: ?HTMLInputElement
+
   render() {
     const { inputValue } = this.state
     const { isLocked, render } = this.props
 
     if (isLocked) {
       return (
-        <Box sticky align="center" justify="center">
+        <Box sticky align="center" justify="center" onClick={this.handleFocusInput}>
           <form onSubmit={this.handleSubmit}>
             <Box>
               <Input
+                autoFocus
+                innerRef={(n: any) => (this._input = n)}
                 placeholder="Password"
                 type="password"
                 onChange={this.handleChangeInput('password')}

src/components/SettingsPage.js

@@ -110,7 +110,7 @@ class SettingsPage extends PureComponent<Props, State> {
             <Box>
               <Label>Password</Label>
               <Input
-                value={get(inputValue, 'password.value', 'My secure password')}
+                value={get(inputValue, 'password.value', '')}
                 onChange={this.handleChangeInput('password.value')}
                 type="password"
               />

src/components/base/Select/Triangles.js

@@ -21,9 +21,13 @@ const DownTriangle = styled.div`
   border-top: ${p => p.size}px solid ${p => p.theme.colors[p.color]};
 `
 
-export default ({ size = 5, color = 'mouse' }: { size: number, color: string }) => (
+const Triangles = ({ size, color }: { size?: number, color?: string }) => (
   <Box flow={1}>
     <UpTriangle size={size} color={color} />
     <DownTriangle size={size} color={color} />
   </Box>
 )
+
+Triangles.defaultProps = { size: 5, color: 'mouse' }
+
+export default Triangles

src/components/base/Select/index.js

@@ -16,14 +16,14 @@ import Triangles from './Triangles'
 
 type Props = {
   items: Array<Object>,
-  itemToString: Function,
-  onChange: Function,
+  itemToString?: Function,
+  onChange?: Function,
   fuseOptions?: Object,
   highlight?: boolean,
   searchable?: boolean,
   placeholder?: string,
   renderHighlight?: string => Element<*>,
-  renderSelected?: string => Element<*>,
+  renderSelected?: Object => Element<*>,
   renderItem?: (*) => Element<*>,
 }
 
@@ -87,6 +87,10 @@ const FloatingTriangles = styled(Box).attrs({
 `
 
 class Select extends PureComponent<Props> {
+  static defaultProps = {
+    itemToString: (item: Object) => item.name,
+  }
+
   renderItems = (items: Array<Object>, downshiftProps: Object) => {
     const { renderItem } = this.props
     const { getItemProps, highlightedIndex } = downshiftProps
@@ -147,7 +151,7 @@ class Select extends PureComponent<Props> {
             ) : (
               <TriggerBtn {...getButtonProps()} tabIndex={0} horizontal align="center" flow={2}>
                 <Box grow>
-                  {selectedItem ? (
+                  {selectedItem && renderSelected ? (
                     renderSelected(selectedItem)
                   ) : (
                     <Text color="mouse">{placeholder}</Text>

src/components/base/Select/stories.js

@@ -1,5 +1,6 @@
+// @flow
+
 import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
 import { storiesOf } from '@storybook/react'
 
 import Box from 'components/base/Box'
@@ -22,11 +23,11 @@ const itemsChessPlayers = [
   { key: 'vladimir-kramnik', name: 'Vladimir Kramnik' },
 ]
 
-class Wrapper extends PureComponent {
-  static propTypes = {
-    children: PropTypes.func.isRequired,
-  }
+type State = {
+  item: Object | null,
+}
 
+class Wrapper extends PureComponent<any, State> {
   state = {
     item: null,
   }

src/components/modals/AddAccount.js

@@ -16,6 +16,7 @@ import { addAccount } from 'actions/accounts'
 import Button from 'components/base/Button'
 import Input from 'components/base/Input'
 import Modal from 'components/base/Modal'
+import Select from 'components/base/Select'
 
 const Label = styled.label`
   display: block;
@@ -27,13 +28,17 @@ const Steps = {
     <form onSubmit={props.onSubmit}>
       <div>
         <Label>Currency</Label>
-        <select
-          onChange={e => props.onChangeInput('wallet')(e.target.value)}
-          value={props.value.wallet}
-        >
-          <option value="">---</option>
-          <option value="btc">Bitcoin</option>
-        </select>
+        <Select
+          placeholder="Choose a wallet..."
+          onChange={item => props.onChangeInput('wallet')(item.key)}
+          renderSelected={item => item.name}
+          items={[
+            {
+              key: 'btc',
+              name: 'Bitcoin',
+            },
+          ]}
+        />
       </div>
       <div>
         <Label>Account name</Label>

src/components/modals/Send.js

@@ -1,15 +1,157 @@
 // @flow
 
 import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+import { connect } from 'react-redux'
 
+import type { MapStateToProps } from 'react-redux'
+import type { Accounts } from 'types/common'
+
+import { getAccounts } from 'reducers/accounts'
+
+import Button from 'components/base/Button'
+import Input from 'components/base/Input'
 import Modal from 'components/base/Modal'
+import Select from 'components/base/Select'
+
+const Label = styled.label`
+  display: block;
+  text-transform: uppercase;
+`
+
+const Steps = {
+  amount: (props: Object) => (
+    <form
+      onSubmit={(e: SyntheticEvent<HTMLFormElement>) => {
+        e.preventDefault()
+
+        if (
+          props.value.account.trim() === '' ||
+          props.value.address.trim() === '' ||
+          props.value.amount.trim() === ''
+        ) {
+          return
+        }
+
+        props.onChangeStep('summary')
+      }}
+    >
+      <div>amount</div>
+      <div>
+        <Label>Account to debit</Label>
+        <Select
+          onChange={item => props.onChangeInput('account')(item.key)}
+          renderSelected={item => item.name}
+          items={Object.entries(props.accounts).map(([id, account]: [string, any]) => ({
+            key: id,
+            name: account.name,
+          }))}
+        />
+      </div>
+      <div>
+        <Label>Recipient address</Label>
+        <Input onChange={props.onChangeInput('address')} value={props.value.address} />
+      </div>
+      <div>
+        <Label>Amount</Label>
+        <Input onChange={props.onChangeInput('amount')} value={props.value.amount} />
+      </div>
+      <Button type="submit">Next</Button>
+    </form>
+  ),
+  summary: (props: Object) => (
+    <div>
+      <div>summary</div>
+      <div>{props.value.amount}</div>
+      <div>to {props.value.address}</div>
+      <div>from {props.account.name}</div>
+    </div>
+  ),
+}
+
+type InputValue = {
+  account: string,
+  address: string,
+  amount: string,
+}
+
+type Step = 'amount' | 'summary'
+
+type Props = {
+  accounts: Accounts,
+}
+type State = {
+  inputValue: InputValue,
+  step: Step,
+}
 
-type Props = {}
+const mapStateToProps: MapStateToProps<*, *, *> = state => ({
+  accounts: getAccounts(state),
+})
+
+const defaultState = {
+  inputValue: {
+    account: '',
+    address: '',
+    amount: '',
+  },
+  step: 'amount',
+}
+
+class Send extends PureComponent<Props, State> {
+  state = {
+    ...defaultState,
+  }
+
+  getStepProps() {
+    const { accounts } = this.props
+    const { inputValue, step } = this.state
+
+    const props = (predicate, props) => (predicate ? props : {})
+
+    return {
+      ...props(step === 'amount', {
+        accounts,
+        onChangeInput: this.handleChangeInput,
+        value: inputValue,
+      }),
+      ...props(step === 'summary', {
+        account: accounts[inputValue.account],
+        value: inputValue,
+      }),
+      onChangeStep: this.handleChangeStep,
+    }
+  }
+
+  handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
+    this.setState(prev => ({
+      inputValue: {
+        ...prev.inputValue,
+        [key]: value,
+      },
+    }))
+
+  handleChangeStep = step =>
+    this.setState({
+      step,
+    })
+
+  handleClose = () =>
+    this.setState({
+      ...defaultState,
+    })
 
-class SendModal extends PureComponent<Props> {
   render() {
-    return <Modal name="send">send modal</Modal>
+    const { step } = this.state
+
+    const Step = Steps[step]
+
+    return (
+      <Modal name="send" onClose={this.handleClose}>
+        <Step {...this.getStepProps()} />
+      </Modal>
+    )
   }
 }
 
-export default SendModal
+export default connect(mapStateToProps)(Send)