implement receive funds modal

package.json

@@ -77,6 +77,7 @@
     "immutable": "^4.0.0-rc.9",
     "material-ui-search-bar": "^1.0.0-beta.13",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "qrcode.react": "^0.9.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-final-form": "^4.1.0",

src/components/layout/Col/index.jsx

@@ -31,10 +31,26 @@ type Props = {
 }
 
 const Col = ({
-  children, margin, layout = 'inherit', overflow,
+  children,
-  xs, sm, md, lg,
+  margin,
-  start, center, end, top, middle, bottom, around, between,
+  layout = 'inherit',
-  xsOffset, smOffset, mdOffset, lgOffset,
+  overflow,
+  xs,
+  sm,
+  md,
+  lg,
+  start,
+  center,
+  end,
+  top,
+  middle,
+  bottom,
+  around,
+  between,
+  xsOffset,
+  smOffset,
+  mdOffset,
+  lgOffset,
   className,
   ...props
 }: Props) => {
@@ -64,7 +80,7 @@ const Col = ({
 
   return (
     <div className={colClassNames} {...props}>
-      { children }
+      {children}
     </div>
   )
 }

src/routes/safe/components/Balances/Receive/index.jsx

@@ -3,14 +3,25 @@ import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import Link from '~/components/layout/Link'
+import QRCode from 'qrcode.react'
 import Paragraph from '~/components/layout/Paragraph'
+import Identicon from '~/components/Identicon'
+import Button from '~/components/layout/Button'
+import Block from '~/components/layout/Block'
 import Row from '~/components/layout/Row'
-import { lg, md } from '~/theme/variables'
+import Hairline from '~/components/layout/Hairline'
+import Col from '~/components/layout/Col'
+import {
+  xxl, lg, sm, md, background, secondary,
+} from '~/theme/variables'
 
 const styles = () => ({
   heading: {
-    padding: `${md} ${lg}`,
+    padding: `${sm} ${lg}`,
     justifyContent: 'space-between',
+    maxHeight: '75px',
   },
   manage: {
     fontSize: '24px',
@@ -19,22 +30,81 @@ const styles = () => ({
     height: '35px',
     width: '35px',
   },
+  detailsContainer: {
+    backgroundColor: background,
+  },
+  qrContainer: {
+    backgroundColor: '#fff',
+    padding: md,
+    borderRadius: '3px',
+    boxShadow: '0 0 5px 0 rgba(74, 85, 121, 0.5)',
+  },
+  safeName: {
+    margin: `${xxl} 0 20px`,
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+  },
+  button: {
+    height: '42px',
+  },
+  addressContainer: {
+    marginTop: '28px',
+  },
+  address: {
+    marginLeft: '6px',
+  },
 })
 
+const openIconStyle = {
+  height: '16px',
+  color: secondary,
+}
+
 type Props = {
   onClose: () => void,
   classes: Object,
+  safeName: string,
+  safeAddress: string,
+  etherScanLink: string,
 }
 
-const Send = ({ classes, onClose }: Props) => (
+const Receive = ({
+  classes, onClose, safeAddress, safeName, etherScanLink,
+}: Props) => (
   <React.Fragment>
     <Row align="center" grow className={classes.heading}>
-      <Paragraph className={classes.manage} noMargin>Receive Funds</Paragraph>
+      <Paragraph className={classes.manage} weight="bolder" noMargin>
+        Receive funds
+      </Paragraph>
       <IconButton onClick={onClose} disableRipple>
         <Close className={classes.close} />
       </IconButton>
     </Row>
+    <Col layout="column" middle="xs" className={classes.detailsContainer}>
+      <Hairline />
+      <Paragraph className={classes.safeName} weight="bolder" size="xl" noMargin>
+        {safeName}
+      </Paragraph>
+      <Block className={classes.qrContainer}>
+        <QRCode value={safeAddress} size={135} />
+      </Block>
+      <Block align="center" className={classes.addressContainer}>
+        <Identicon address={safeAddress} diameter={32} />
+        <Paragraph className={classes.address}>{safeAddress}</Paragraph>
+        <Link className={classes.open} to={etherScanLink} target="_blank">
+          <OpenInNew style={openIconStyle} />
+        </Link>
+      </Block>
+    </Col>
+    <Hairline />
+    <Row align="center" className={classes.buttonRow}>
+      <Button color="primary" className={classes.button} minWidth={140} onClick={onClose} variant="contained">
+        Done
+      </Button>
+    </Row>
   </React.Fragment>
 )
 
-export default withStyles(styles)(Send)
+export default withStyles(styles)(Receive)

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx

@@ -44,7 +44,15 @@ const INITIAL_FORM_STATE = {
 
 const AddCustomToken = (props: Props) => {
   const {
-    classes, setActiveScreen, onClose, addToken, updateActiveTokens, safeAddress, activeTokens, tokens, activateTokenForAllSafes,
+    classes,
+    setActiveScreen,
+    onClose,
+    addToken,
+    updateActiveTokens,
+    safeAddress,
+    activeTokens,
+    tokens,
+    activateTokenForAllSafes,
   } = props
   const [formValues, setFormValues] = useState(INITIAL_FORM_STATE)
 

src/routes/safe/components/Balances/index.jsx

@@ -38,6 +38,8 @@ type Props = {
   tokens: List<Token>,
   activeTokens: List<Token>,
   safeAddress: string,
+  safeName: string,
+  etherScanLink: string,
 }
 
 type Action = 'Token' | 'Send' | 'Receive'
@@ -69,7 +71,7 @@ class Balances extends React.Component<Props, State> {
       hideZero, showToken, showReceive, showSend,
     } = this.state
     const {
-      classes, granted, tokens, safeAddress, activeTokens,
+      classes, granted, tokens, safeAddress, activeTokens, safeName, etherScanLink,
     } = this.props
 
     const columns = generateColumns()
@@ -166,7 +168,12 @@ class Balances extends React.Component<Props, State> {
           handleClose={this.onHide('Receive')}
           open={showReceive}
         >
-          <Receive onClose={this.onHide('Receive')} />
+          <Receive
+            safeName={safeName}
+            safeAddress={safeAddress}
+            etherScanLink={etherScanLink}
+            onClose={this.onHide('Receive')}
+          />
         </Modal>
       </React.Fragment>
     )

src/routes/safe/components/Layout.jsx

@@ -96,7 +96,8 @@ class Layout extends React.Component<Props, State> {
       return <NoSafe provider={provider} text="Safe not found" />
     }
     
-    const { address, ethBalance } = safe
+    const { address, ethBalance, name } = safe
+    const etherScanLink = getEtherScanLink(address, network)
 
     return (
       <React.Fragment>
@@ -105,7 +106,7 @@ class Layout extends React.Component<Props, State> {
           <Block className={classes.name}>
             <Row>
               <Heading tag="h2" color="secondary">
-                {safe.get('name')}
+                {name}
               </Heading>
               {!granted && <Block className={classes.readonly}>Read Only</Block>}
             </Row>
@@ -113,7 +114,7 @@ class Layout extends React.Component<Props, State> {
               <Paragraph size="md" color="disabled" onClick={this.copyAddress} title="Click to copy" noMargin>
                 {address}
               </Paragraph>
-              <Link className={classes.open} to={getEtherScanLink(address, network)} target="_blank">
+              <Link className={classes.open} to={etherScanLink} target="_blank">
                 <OpenInNew style={openIconStyle} />
               </Link>
             </Block>
@@ -134,6 +135,8 @@ class Layout extends React.Component<Props, State> {
             activeTokens={activeTokens}
             granted={granted}
             safeAddress={address}
+            safeName={name}
+            etherScanLink={etherScanLink}
           />
         )}
       </React.Fragment>

yarn.lock

@@ -12895,6 +12895,19 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
+qrcode.react@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-0.9.3.tgz#91de1287912bdc5ccfb3b091737b828d6ced60c5"
+  integrity sha512-gGd30Ez7cmrKxyN2M3nueaNLk/f9J7NDRgaD5fVgxGpPLsYGWMn9UQ+XnDpv95cfszTQTdaf4QGLNMf3xU0hmw==
+  dependencies:
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 qs@6.5.2, qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -13230,6 +13243,14 @@ react-popper@^1.3.3:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-qr-svg@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-qr-svg/-/react-qr-svg-2.2.1.tgz#f6f25820fdb2c39ad0d66a14a758e2f575717c68"
+  integrity sha512-rLDCZI9pIqD5lbBIatrqUMhP1gqQ7glqubXO/m/X87ikEPhXuY0hMLhYMuKoH4834G36ap8Az0HI4bXEJUN//w==
+  dependencies:
+    prop-types "^15.5.8"
+    qr.js "0.0.0"
+
 react-redux@7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.0.2.tgz#34b280a3482aaf60e7d4a504b1295165cbe6b86a"