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 { render() { const { account, accountData } = this.props @@ -66,32 +38,14 @@ class AccountPage extends PureComponent { - + {formatBTC(accountData.balance)} - - - - - {'Current address'} - {accountData.address} - - - ( - - {'Copy'} - - )} - /> - {'Print'} - {'Share'} - + 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) => ( + + + + + + {'Current address'} + {address} + + + ( + + + {'Copy'} + + )} + /> + + + {'Print'} + + + + {'Share'} + + + +) + +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, + onChange: () => Account | void, + value: Account | null, +} + +const SelectAccount = ({ accounts, value, onChange }: Props) => ( +