Add ImportAccounts component

package.json

@@ -65,7 +65,7 @@
     "raven-js": "^3.22.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-i18next": "^7.3.2",
+    "react-i18next": "^7.3.4",
     "react-mortal": "^3.0.1",
     "react-motion": "^0.5.2",
     "react-redux": "^5.0.6",

src/components/SelectAccount.js

@@ -2,22 +2,16 @@
 
 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'
 
-function renderItem(accounts) {
-  return item => <span>{(accounts.find(a => a.id === item) || {}).name}</span>
-}
-
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
-  accounts: values(getAccounts(state)),
+  accounts: Object.entries(getAccounts(state)).map(([, account]: [string, any]) => account),
 })
 
 type Props = {
@@ -28,18 +22,18 @@ type Props = {
 
 const SelectAccount = ({ accounts, value, onChange }: Props) => (
   <Select
-    itemToString={item => item}
     value={value}
+    renderSelected={item => item.name}
+    renderItem={item => (
+      <div key={item.id}>
+        {item.name} - {item.data.balance}
+      </div>
+    )}
+    keyProp="id"
+    items={accounts}
     placeholder="Choose an account"
-    items={accounts.map(a => a.id)}
     onChange={onChange}
-    renderItem={renderItem(accounts)}
-    renderSelected={renderItem(accounts)}
-    renderHighlight={(text, key) => (
-      <Text key={key} fontWeight="bold">
-        {text}
-      </Text>
-    )}
   />
 )
+
 export default connect(mapStateToProps)(SelectAccount)

src/components/base/Select/index.js

@@ -103,10 +103,7 @@ class Select extends PureComponent<Props> {
       <Dropdown>
         {items.length ? (
           items.map((item, i) => (
-            <ItemWrapper
-              key={keyProp ? item[keyProp] : item.key || item}
-              {...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/AddAccount/ImportAccounts.js

@@ -0,0 +1,73 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import { formatBTC } from 'helpers/format'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+
+type Props = {
+  accounts: Array<Object>,
+  onImportAccounts: Function,
+}
+
+type State = {
+  accountsSelected: Array<string>,
+}
+
+class ImportAccounts extends PureComponent<Props, State> {
+  state = {
+    accountsSelected: [],
+  }
+
+  handleSelectAccount = (id: string, selected: boolean) => () =>
+    this.setState(prev => ({
+      accountsSelected: selected
+        ? prev.accountsSelected.filter(v => v !== id)
+        : [...prev.accountsSelected, id],
+    }))
+
+  render() {
+    const { accounts, onImportAccounts } = this.props
+    const { accountsSelected } = this.state
+
+    const canImportAccounts = accountsSelected.length > 0
+
+    return (
+      <Box>
+        <Box>Import Accounts</Box>
+        <Box>
+          {accounts.map(account => {
+            const selected = accountsSelected.includes(account.id)
+            return (
+              <Box
+                key={account.id}
+                horizontal
+                flow={10}
+                onClick={this.handleSelectAccount(account.id, selected)}
+              >
+                <Box>{selected ? 'yes' : 'no'}</Box>
+                <Box>
+                  <Box>Balance: {formatBTC(account.balance)}</Box>
+                  <Box>Transactions: {account.transactions.length}</Box>
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+        <Box>
+          <Button
+            primary
+            disabled={!canImportAccounts}
+            onClick={onImportAccounts(accountsSelected)}
+          >
+            Import accounts
+          </Button>
+        </Box>
+      </Box>
+    )
+  }
+}
+
+export default ImportAccounts

src/components/modals/AddAccount.js → src/components/modals/AddAccount/index.js

@@ -22,6 +22,8 @@ import Label from 'components/base/Label'
 import Modal, { ModalBody } from 'components/base/Modal'
 import Select from 'components/base/Select'
 
+import ImportAccounts from './ImportAccounts'
+
 const Steps = {
   createAccount: (props: Object) => (
     <form onSubmit={props.onSubmit}>
@@ -69,41 +71,51 @@ const Steps = {
     </div>
   ),
   listAccounts: (props: Object) => {
-    const accounts = []
-
-    let newAccount = null
-
-    Object.entries(props.accounts).forEach(([, account]: [string, any]) => {
-      const hasTransactions = account.transactions.length > 0
-
-      if (hasTransactions) {
-        accounts.push(account)
-      } else {
-        newAccount = account
-      }
-    })
-
+    const accounts = Object.entries(props.accounts).map(([, account]: [string, any]) => account)
+    const existingAccounts = accounts.filter(account => account.transactions.length > 0)
+    // const newAccount = accounts.find(account => account.transactions.length === 0)
     return (
-      <div>
-        {accounts.map(account => (
-          <div key={account.id} style={{ marginBottom: 10 }}>
-            <div>Balance: {account.balance}</div>
-            <div>Transactions: {account.transactions.length}</div>
-            <div>
-              <Button onClick={props.onAddAccount(account)}>Import</Button>
-            </div>
-          </div>
-        ))}
-        {props.canCreateAccount && newAccount !== null ? (
-          <div>
-            <Button onClick={props.onAddAccount(newAccount)}>Create new account</Button>
-          </div>
-        ) : (
-          <div>You cannot create new account</div>
-        )}
-      </div>
+      <Box>
+        <ImportAccounts {...props} accounts={existingAccounts} />
+      </Box>
     )
   },
+  // listAccounts: (props: Object) => {
+  //   const accounts = []
+  //
+  //   let newAccount = null
+  //
+  //   Object.entries(props.accounts).forEach(([, account]: [string, any]) => {
+  //     const hasTransactions = account.transactions.length > 0
+  //
+  //     if (hasTransactions) {
+  //       accounts.push(account)
+  //     } else {
+  //       newAccount = account
+  //     }
+  //   })
+  //
+  //   return (
+  //     <div>
+  //       {accounts.map(account => (
+  //         <div key={account.id} style={{ marginBottom: 10 }}>
+  //           <div>Balance: {formatBTC(account.balance)}</div>
+  //           <div>Transactions: {account.transactions.length}</div>
+  //           <div>
+  //             <Button onClick={props.onAddAccount(account)}>Import</Button>
+  //           </div>
+  //         </div>
+  //       ))}
+  //       {props.canCreateAccount && newAccount !== null ? (
+  //         <div>
+  //           <Button onClick={props.onAddAccount(newAccount)}>Create new account</Button>
+  //         </div>
+  //       ) : (
+  //         <div>You cannot create new account</div>
+  //       )}
+  //     </div>
+  //   )
+  // },
 }
 
 type InputValue = {
@@ -211,6 +223,7 @@ class AddAccountModal extends PureComponent<Props, State> {
         accounts,
         canCreateAccount,
         onAddAccount: this.handleAddAccount,
+        onImportAccounts: this.handleImportAccounts,
       }),
     }
   }
@@ -237,7 +250,7 @@ class AddAccountModal extends PureComponent<Props, State> {
 
   handleAddAccount = account => () => {
     const { inputValue } = this.state
-    const { addAccount, closeModal } = this.props
+    const { addAccount } = this.props
 
     const { id, ...data } = account
 
@@ -247,10 +260,22 @@ class AddAccountModal extends PureComponent<Props, State> {
       type: inputValue.wallet,
       data,
     })
+  }
 
-    closeModal('add-account')
-
-    this.handleClose()
+  handleImportAccounts = accountsSelected => () => {
+    const { inputValue, accounts } = this.state
+    const { addAccount } = this.props
+
+    Object.entries(accounts).forEach(([, account]: [string, any], i) => {
+      if (accountsSelected.includes(account.id)) {
+        addAccount({
+          id: account.id,
+          name: `Account ${i + 1}`,
+          type: inputValue.wallet,
+          data: account,
+        })
+      }
+    })
   }
 
   handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>

src/components/modals/Send.js

@@ -2,17 +2,11 @@
 
 import React, { Fragment, 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, { ModalBody } from 'components/base/Modal'
-import Select from 'components/base/Select'
+import SelectAccount from 'components/SelectAccount'
 
 const Label = styled.label`
   display: block;
@@ -26,7 +20,7 @@ const Steps = {
         e.preventDefault()
 
         if (
-          props.value.account.trim() === '' ||
+          !props.value.account ||
           props.value.address.trim() === '' ||
           props.value.amount.trim() === ''
         ) {
@@ -39,14 +33,7 @@ const Steps = {
       <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,
-          }))}
-        />
+        <SelectAccount onChange={props.onChangeInput('account')} value={props.value.account} />
       </div>
       <div>
         <Label>Recipient address</Label>
@@ -64,59 +51,49 @@ const Steps = {
       <div>summary</div>
       <div>{props.value.amount}</div>
       <div>to {props.value.address}</div>
-      <div>from {props.account.name}</div>
+      <div>from {props.value.account.name}</div>
     </div>
   ),
 }
 
 type InputValue = {
-  account: string,
+  account: any,
   address: string,
   amount: string,
 }
 
 type Step = 'amount' | 'summary'
 
-type Props = {
-  accounts: Accounts,
-}
 type State = {
   inputValue: InputValue,
   step: Step,
 }
 
-const mapStateToProps: MapStateToProps<*, *, *> = state => ({
-  accounts: getAccounts(state),
-})
-
 const defaultState = {
   inputValue: {
-    account: '',
+    account: undefined,
     address: '',
     amount: '',
   },
   step: 'amount',
 }
 
-class Send extends PureComponent<Props, State> {
+class Send extends PureComponent<{}, 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,
@@ -131,7 +108,7 @@ class Send extends PureComponent<Props, State> {
       },
     }))
 
-  handleChangeStep = step =>
+  handleChangeStep = (step: Step) =>
     this.setState({
       step,
     })
@@ -163,4 +140,4 @@ class Send extends PureComponent<Props, State> {
   }
 }
 
-export default connect(mapStateToProps)(Send)
+export default Send

src/main/app.js

@@ -17,6 +17,7 @@ function createMainWindow() {
           vibrancy: 'ultra-dark', // https://github.com/electron/electron/issues/10521
         }
       : {}),
+    center: true,
     show: true,
     height: MIN_HEIGHT,
     width: MIN_WIDTH,

yarn.lock

@@ -7322,9 +7322,9 @@ react-html-attributes@^1.3.0:
   dependencies:
     html-element-attributes "^1.0.0"
 
-react-i18next@^7.3.2:
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-7.3.2.tgz#5036dc0371808bd8afe0c9a4a738ebd39721e33b"
+react-i18next@^7.3.4:
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-7.3.4.tgz#d5932d47ac7f0d723eecef492ea97b7232673706"
   dependencies:
     hoist-non-react-statics "2.3.1"
     html-parse-stringify2 "2.0.1"