From 980f240884ec3fc3cf69d2df45bd0f96a5c7147f Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 26 Jan 2018 10:06:17 +0100
Subject: [PATCH 1/3] Update TopBar style

---
 src/components/TopBar.js | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index beb0f983..761d0941 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { PureComponent, Fragment } from 'react'
+import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import { ipcRenderer } from 'electron'
 
@@ -97,25 +97,23 @@ class TopBar extends PureComponent<Props, State> {
     const { sync } = this.state
 
     return (
-      <Fragment>
-        <Box bg="white" noShrink style={{ height: 60, zIndex: 20 }} align="center" horizontal>
-          <Box grow>
-            {sync.progress === true
-              ? 'sync...'
-              : sync.fail === true ? 'sync fail :(' : 'sync finish!'}
-          </Box>
-          <Box justify="flex-end" horizontal>
-            {hasPassword && <LockApplication onLock={this.handleLock} />}
-            <CountDevices count={devices.length} />
-          </Box>
+      <Box bg="white" px={2} noShrink style={{ height: 60, zIndex: 20 }} align="center" horizontal>
+        <Box grow>
+          {sync.progress === true
+            ? 'Synchronizing...'
+            : sync.fail === true ? 'Synchronization fail :(' : 'Synchronisation finished!'}
         </Box>
-      </Fragment>
+        <Box justify="flex-end" horizontal>
+          {hasPassword && <LockApplication onLock={this.handleLock} />}
+          <CountDevices count={devices.length} />
+        </Box>
+      </Box>
     )
   }
 }
 
 const CountDevices = ({ count } = { count: Number }) => (
-  <Box color="night" mr={20} horizontal flow={10}>
+  <Box color="night" horizontal flow={10}>
     <Box>
       <DeviceIcon height={20} width={20} />
     </Box>

From 8a080ff4dde1cc5e16daed26ce77acb08e16a042 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 26 Jan 2018 10:17:57 +0100
Subject: [PATCH 2/3] Update display of account in Dashboard page

---
 src/components/DashboardPage.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/DashboardPage.js b/src/components/DashboardPage.js
index cc3be0d4..16d3f9b0 100644
--- a/src/components/DashboardPage.js
+++ b/src/components/DashboardPage.js
@@ -135,8 +135,12 @@ class DashboardPage extends PureComponent<Props, State> {
                       style={{ cursor: 'pointer', height: 200 }}
                       onClick={() => push(`/account/${key}`)}
                     >
-                      <div>{accounts[key].name}</div>
-                      <div>{accounts[key].data && formatBTC(accounts[key].data.balance)}</div>
+                      <Box>
+                        <Text fontWeight="bold">{accounts[key].name}</Text>
+                      </Box>
+                      <Box grow align="center" justify="center">
+                        {accounts[key].data && formatBTC(accounts[key].data.balance)}
+                      </Box>
                     </Card>
                   ),
               )}

From 0643bd24e71d67b512159115f4c64290bf50f852 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 26 Jan 2018 11:23:16 +0100
Subject: [PATCH 3/3] Start splitting SelectAccount and ReceiveBox

---
 src/components/AccountPage.js       | 52 ++------------------
 src/components/ReceiveBox.js        | 75 +++++++++++++++++++++++++++++
 src/components/SelectAccount.js     | 41 ++++++++++++++++
 src/components/base/Select/index.js |  8 +--
 src/components/modals/Receive.js    | 36 ++++++++++++--
 static/i18n/en/translation.yml      |  1 +
 static/i18n/fr/translation.yml      |  1 +
 7 files changed, 158 insertions(+), 56 deletions(-)
 create mode 100644 src/components/ReceiveBox.js
 create mode 100644 src/components/SelectAccount.js

diff --git a/src/components/AccountPage.js b/src/components/AccountPage.js
index 9fccecba..0ace4d77 100644
--- a/src/components/AccountPage.js
+++ b/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>
diff --git a/src/components/ReceiveBox.js b/src/components/ReceiveBox.js
new file mode 100644
index 00000000..7e708658
--- /dev/null
+++ b/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
diff --git a/src/components/SelectAccount.js b/src/components/SelectAccount.js
new file mode 100644
index 00000000..e187f9aa
--- /dev/null
+++ b/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)
diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index 5e0ab01d..a8e4a4ff 100644
--- a/src/components/base/Select/index.js
+++ b/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>
diff --git a/src/components/modals/Receive.js b/src/components/modals/Receive.js
index 23e9dbb0..157a6863 100644
--- a/src/components/modals/Receive.js
+++ b/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)
diff --git a/static/i18n/en/translation.yml b/static/i18n/en/translation.yml
index d25ad819..58ca606a 100644
--- a/static/i18n/en/translation.yml
+++ b/static/i18n/en/translation.yml
@@ -21,6 +21,7 @@ send:
 
 receive:
   title: Receive
+  modalTitle: Receive funds
 
 addAccount:
   title: Add account
diff --git a/static/i18n/fr/translation.yml b/static/i18n/fr/translation.yml
index 23dca7dc..1b7db075 100644
--- a/static/i18n/fr/translation.yml
+++ b/static/i18n/fr/translation.yml
@@ -21,6 +21,7 @@ send:
 
 receive:
   title: Recevoir
+  modalTitle: Recevoir des fonds
 
 addAccount:
   title: Ajouter un compte