Add ReceiveBox in Receive modal, and add posibility to set amount for QRCode

src/components/ReceiveBox.js

@@ -10,6 +10,7 @@ import CopyToClipboard from 'components/base/CopyToClipboard'
 import Text from 'components/base/Text'
 
 type Props = {
+  amount?: string,
   address: string,
 }
 
@@ -41,10 +42,10 @@ const Action = styled(Box).attrs({
   }
 `
 
-const ReceiveBox = ({ address }: Props) => (
+const ReceiveBox = ({ amount, address }: Props) => (
   <Box flow={3}>
     <Box align="center">
-      <QRCode size={150} data={address} />
+      <QRCode size={150} data={`bitcoin:${address}${amount ? `?amount=${amount}` : ''}`} />
     </Box>
     <Box align="center" flow={2}>
       <Text fontSize={1}>{'Current address'}</Text>
@@ -72,4 +73,8 @@ const ReceiveBox = ({ address }: Props) => (
   </Box>
 )
 
+ReceiveBox.defaultProps = {
+  amount: undefined,
+}
+
 export default ReceiveBox

src/components/modals/Receive.js

@@ -1,14 +1,19 @@
 // @flow
 
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import { translate } from 'react-i18next'
 import get from 'lodash/get'
 
 import { MODAL_RECEIVE } from 'constants'
 
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import Input from 'components/base/Input'
+import Label from 'components/base/Label'
 import Modal, { ModalBody } from 'components/base/Modal'
-import Text from 'components/base/Text'
+import ReceiveBox from 'components/ReceiveBox'
 import SelectAccount from 'components/SelectAccount'
+import Text from 'components/base/Text'
 
 import type { Account as AccountType, T } from 'types/common'
 
@@ -18,10 +23,12 @@ type Props = {
 
 type State = {
   account: AccountType | null,
+  amount: string,
 }
 
 const defaultState = {
   account: null,
+  amount: '',
 }
 
 class ReceiveModal extends PureComponent<Props, State> {
@@ -29,34 +36,64 @@ class ReceiveModal extends PureComponent<Props, State> {
     ...defaultState,
   }
 
-  handleChangeAccount = account => {
-    this.setState({ account })
+  getAccount(data) {
+    const { account } = this.state
+
+    return account || get(data, 'account')
   }
 
+  handleChangeInput = key => value =>
+    this.setState({
+      [key]: value,
+    })
+
   handleClose = () =>
     this.setState({
       ...defaultState,
     })
 
   render() {
-    const { account } = this.state
+    const { amount } = this.state
     const { t } = this.props
 
     return (
       <Modal
         name={MODAL_RECEIVE}
         onClose={this.handleClose}
-        render={({ data, onClose }) => (
-          <ModalBody onClose={onClose} flow={3}>
-            <Text fontSize={4} color="steel">
-              {t('receive.modalTitle')}
-            </Text>
-            <SelectAccount
-              value={account || get(data, 'account')}
-              onChange={this.handleChangeAccount}
-            />
-          </ModalBody>
-        )}
+        render={({ data, onClose }) => {
+          const account = this.getAccount(data)
+          return (
+            <ModalBody onClose={onClose} flow={3}>
+              <Text fontSize={4} color="steel">
+                {t('receive.modalTitle')}
+              </Text>
+              <Box flow={1}>
+                <Label>Account</Label>
+                <SelectAccount value={account} onChange={this.handleChangeInput('account')} />
+              </Box>
+              {account &&
+                account.data && (
+                  <Fragment>
+                    <Box flow={1}>
+                      <Label>Request amount</Label>
+                      <Input
+                        type="number"
+                        min={0}
+                        max={account.data.balance / 1e8}
+                        onChange={this.handleChangeInput('amount')}
+                      />
+                    </Box>
+                    <ReceiveBox amount={amount} address={get(account, 'data.address', '')} />
+                  </Fragment>
+                )}
+              <Box horizontal justify="center">
+                <Button primary onClick={onClose}>
+                  Close
+                </Button>
+              </Box>
+            </ModalBody>
+          )
+        }}
       />
     )
   }