Start splitting SelectAccount and ReceiveBox

src/components/AccountPage.js

@@ -2,7 +2,6 @@
 
 import React, { PureComponent, Fragment } from 'react'
 import { connect } from 'react-redux'
-import styled from 'styled-components'
 
 import type { MapStateToProps } from 'react-redux'
 import type { Account, AccountData } from 'types/common'
@@ -14,8 +13,7 @@ import { getAccountById, getAccountData } from 'reducers/accounts'
 import TransactionsList from 'components/TransactionsList'
 import Box, { Card } from 'components/base/Box'
 import Text from 'components/base/Text'
-import QRCode from 'components/base/QRCode'
-import CopyToClipboard from 'components/base/CopyToClipboard'
+import ReceiveBox from 'components/ReceiveBox'
 
 type Props = {
   account: Account,
@@ -27,32 +25,6 @@ const mapStateToProps: MapStateToProps<*, *, *> = (state, props) => ({
   accountData: getAccountData(state, props.match.params.id),
 })
 
-const AddressBox = styled(Box).attrs({
-  borderWidth: 1,
-  borderColor: 'mouse',
-  bg: 'cream',
-  p: 2,
-})`
-  text-align: center;
-  word-break: break-all;
-  border-radius: 3px;
-  user-select: text;
-`
-
-const Action = styled(Box).attrs({
-  color: 'mouse',
-  fontSize: 0,
-})`
-  font-weight: bold;
-  text-align: center;
-  cursor: pointer;
-  text-transform: uppercase;
-
-  &:hover {
-    color: ${p => p.theme.colors.grey};
-  }
-`
-
 class AccountPage extends PureComponent<Props> {
   render() {
     const { account, accountData } = this.props
@@ -66,32 +38,14 @@ class AccountPage extends PureComponent<Props> {
           <Fragment>
             <Box horizontal flow={3}>
               <Box grow>
-                <Card title="Balance" style={{ height: 415 }} align="center" justify="center">
+                <Card title="Balance" style={{ height: 435 }} align="center" justify="center">
                   <Text fontSize={6}>{formatBTC(accountData.balance)}</Text>
                 </Card>
               </Box>
 
               <Box style={{ width: 300 }}>
                 <Card title="Receive" flow={3}>
-                  <Box align="center">
-                    <QRCode size={150} data={accountData.address} />
-                  </Box>
-                  <Box align="center" flow={2}>
-                    <Text fontSize={1}>{'Current address'}</Text>
-                    <AddressBox>{accountData.address}</AddressBox>
-                  </Box>
-                  <Box horizontal>
-                    <CopyToClipboard
-                      data={accountData.address}
-                      render={copy => (
-                        <Action flex={1} onClick={copy}>
-                          {'Copy'}
-                        </Action>
-                      )}
-                    />
-                    <Action flex={1}>{'Print'}</Action>
-                    <Action flex={1}>{'Share'}</Action>
-                  </Box>
+                  <ReceiveBox address={accountData.address} />
                 </Card>
               </Box>
             </Box>

src/components/ReceiveBox.js

@@ -0,0 +1,75 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import QRCode from 'components/base/QRCode'
+import Icon from 'components/base/Icon'
+import CopyToClipboard from 'components/base/CopyToClipboard'
+import Text from 'components/base/Text'
+
+type Props = {
+  address: string,
+}
+
+const AddressBox = styled(Box).attrs({
+  borderWidth: 1,
+  borderColor: 'mouse',
+  bg: 'cream',
+  p: 2,
+})`
+  text-align: center;
+  word-break: break-all;
+  border-radius: 3px;
+  user-select: text;
+`
+
+const Action = styled(Box).attrs({
+  flow: 1,
+  flex: 1,
+  color: 'mouse',
+  fontSize: 0,
+})`
+  font-weight: bold;
+  text-align: center;
+  cursor: pointer;
+  text-transform: uppercase;
+
+  &:hover {
+    color: ${p => p.theme.colors.grey};
+  }
+`
+
+const ReceiveBox = ({ address }: Props) => (
+  <Box flow={3}>
+    <Box align="center">
+      <QRCode size={150} data={address} />
+    </Box>
+    <Box align="center" flow={2}>
+      <Text fontSize={1}>{'Current address'}</Text>
+      <AddressBox>{address}</AddressBox>
+    </Box>
+    <Box horizontal>
+      <CopyToClipboard
+        data={address}
+        render={copy => (
+          <Action onClick={copy}>
+            <Icon name="clone" />
+            <span>{'Copy'}</span>
+          </Action>
+        )}
+      />
+      <Action>
+        <Icon name="print" />
+        <span>{'Print'}</span>
+      </Action>
+      <Action>
+        <Icon name="share-square-o" />
+        <span>{'Share'}</span>
+      </Action>
+    </Box>
+  </Box>
+)
+
+export default ReceiveBox

src/components/SelectAccount.js

@@ -0,0 +1,41 @@
+// @flow
+
+import React from 'react'
+import { connect } from 'react-redux'
+import values from 'lodash/values'
+
+import type { MapStateToProps } from 'react-redux'
+
+import { getAccounts } from 'reducers/accounts'
+import Select from 'components/base/Select'
+import Text from 'components/base/Text'
+
+import type { Account } from 'types/common'
+
+const mapStateToProps: MapStateToProps<*, *, *> = state => ({
+  accounts: values(getAccounts(state)),
+})
+
+type Props = {
+  accounts: Array<Account>,
+  onChange: () => Account | void,
+  value: Account | null,
+}
+
+const SelectAccount = ({ accounts, value, onChange }: Props) => (
+  <Select
+    value={value}
+    placeholder="Choose an account"
+    items={accounts}
+    keyProp="id"
+    onChange={onChange}
+    itemToString={item => (item ? item.name : '')}
+    renderHighlight={(text, key) => (
+      <Text key={key} fontWeight="bold">
+        {text}
+      </Text>
+    )}
+  />
+)
+
+export default connect(mapStateToProps)(SelectAccount)

src/components/base/Select/index.js

@@ -16,7 +16,7 @@ import Triangles from './Triangles'
 
 type Props = {
   items: Array<Object>,
-  value?: Object,
+  value?: Object | null,
   itemToString?: Function,
   onChange?: Function,
   fuseOptions?: Object,
@@ -26,6 +26,7 @@ type Props = {
   renderHighlight?: string => Element<*>,
   renderSelected?: Object => Element<*>,
   renderItem?: (*) => Element<*>,
+  keyProp?: string,
 }
 
 const Container = styled(Box).attrs({ relative: true, color: 'steel' })``
@@ -91,16 +92,17 @@ const FloatingTriangles = styled(Box).attrs({
 class Select extends PureComponent<Props> {
   static defaultProps = {
     itemToString: (item: Object) => item.name,
+    keyProp: undefined,
   }
 
   renderItems = (items: Array<Object>, downshiftProps: Object) => {
-    const { renderItem } = this.props
+    const { renderItem, keyProp } = this.props
     const { getItemProps, highlightedIndex } = downshiftProps
     return (
       <Dropdown>
         {items.length ? (
           items.map((item, i) => (
-            <ItemWrapper key={item.key} {...getItemProps({ item })}>
+            <ItemWrapper key={keyProp ? item[keyProp] : item.key} {...getItemProps({ item })}>
               <Item highlighted={i === highlightedIndex}>
                 {renderItem ? renderItem(item) : <span>{item.name_highlight || item.name}</span>}
               </Item>

src/components/modals/Receive.js

@@ -1,20 +1,48 @@
 // @flow
 
 import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
 
 import Modal, { ModalBody } from 'components/base/Modal'
+import Text from 'components/base/Text'
+import SelectAccount from 'components/SelectAccount'
 
-type Props = {}
+import type { Account as AccountType, T } from 'types/common'
+
+type Props = {
+  t: T,
+}
+
+type State = {
+  account: AccountType | null,
+}
+
+class ReceiveModal extends PureComponent<Props, State> {
+  state = {
+    account: null,
+  }
+
+  handleChangeAccount = account => {
+    this.setState({ account })
+  }
 
-class ReceiveModal extends PureComponent<Props> {
   render() {
+    const { account } = this.state
+    const { t } = this.props
     return (
       <Modal
         name="receive"
-        render={({ onClose }) => <ModalBody onClose={onClose}>receive modal</ModalBody>}
+        render={({ onClose }) => (
+          <ModalBody onClose={onClose} flow={3}>
+            <Text fontSize={4} color="steel">
+              {t('receive.modalTitle')}
+            </Text>
+            <SelectAccount value={account} onChange={this.handleChangeAccount} />
+          </ModalBody>
+        )}
       />
     )
   }
 }
 
-export default ReceiveModal
+export default translate()(ReceiveModal)

static/i18n/en/translation.yml

@@ -21,6 +21,7 @@ send:
 
 receive:
   title: Receive
+  modalTitle: Receive funds
 
 addAccount:
   title: Add account

static/i18n/fr/translation.yml

@@ -21,6 +21,7 @@ send:
 
 receive:
   title: Recevoir
+  modalTitle: Recevoir des fonds
 
 addAccount:
   title: Ajouter un compte