Merge branch 'development' into 141-mainnet-compatibility

package.json

@@ -38,7 +38,7 @@
     "axios": "0.19.0",
     "bignumber.js": "9.0.0",
     "connected-react-router": "6.5.2",
-    "date-fns": "2.2.1",
+    "date-fns": "2.3.0",
     "ethereum-ens": "0.7.8",
     "final-form": "4.18.5",
     "history": "4.10.1",
@@ -55,7 +55,7 @@
     "react-infinite-scroll-component": "4.5.3",
     "react-qr-reader": "^2.2.1",
     "react-redux": "7.1.1",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "5.1.0",
     "recompose": "^0.30.0",
     "redux": "4.0.4",
     "redux-actions": "^2.3.0",
@@ -137,10 +137,10 @@
     "truffle-solidity-loader": "0.1.32",
     "uglifyjs-webpack-plugin": "2.2.0",
     "url-loader": "^2.1.0",
-    "webpack": "4.40.2",
+    "webpack": "4.41.0",
     "webpack-bundle-analyzer": "3.5.1",
     "webpack-cli": "3.3.9",
     "webpack-dev-server": "3.8.1",
-    "webpack-manifest-plugin": "2.1.0"
+    "webpack-manifest-plugin": "2.1.1"
   }
 }

src/components/Modal/index.jsx

@@ -26,7 +26,7 @@ const styles = () => ({
     top: '120px',
     width: '500px',
     height: '530px',
-    borderRadius: '3px',
+    borderRadius: '8px',
     backgroundColor: '#ffffff',
     boxShadow: '0 0 5px 0 rgba(74, 85, 121, 0.5)',
     '&:focus': {

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

@@ -3,9 +3,7 @@ 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 QRCode from 'qrcode.react'
-import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph'
 import Identicon from '~/components/Identicon'
 import Button from '~/components/layout/Button'
@@ -13,8 +11,10 @@ import Block from '~/components/layout/Block'
 import Row from '~/components/layout/Row'
 import Hairline from '~/components/layout/Hairline'
 import Col from '~/components/layout/Col'
+import EtherscanBtn from '~/components/EtherscanBtn'
+import CopyBtn from '~/components/CopyBtn'
 import {
-  lg, md, secondary, secondaryText,
+  sm, lg, md, secondaryText,
 } from '~/theme/variables'
 import { copyToClipboard } from '~/utils/clipboard'
 
@@ -25,12 +25,10 @@ const styles = () => ({
     maxHeight: '75px',
     boxSizing: 'border-box',
   },
-  manage: {
-    fontSize: '24px',
-  },
   close: {
-    height: '35px',
+    height: '24px',
-    width: '35px',
+    width: '24px',
+    fill: secondaryText,
   },
   qrContainer: {
     backgroundColor: '#fff',
@@ -38,8 +36,12 @@ const styles = () => ({
     borderRadius: '6px',
     border: `1px solid ${secondaryText}`,
   },
+  annotation: {
+    margin: lg,
+    marginBottom: 0,
+  },
   safeName: {
-    margin: `${lg} 0 ${lg}`,
+    margin: `${md} 0`,
   },
   buttonRow: {
     height: '84px',
@@ -51,42 +53,40 @@ const styles = () => ({
     },
   },
   addressContainer: {
-    marginTop: '25px',
+    margin: `${lg} 0`,
-    marginBottom: '25px',
   },
   address: {
-    marginLeft: '6px',
+    marginLeft: sm,
+    marginRight: sm,
   },
 })
 
-const openIconStyle = {
-  height: '16px',
-  color: secondary,
-}
-
 type Props = {
   onClose: () => void,
   classes: Object,
   safeName: string,
   safeAddress: string,
-  etherScanLink: string,
 }
 
 const Receive = ({
-  classes, onClose, safeAddress, safeName, etherScanLink,
+  classes, onClose, safeAddress, safeName,
 }: Props) => (
   <>
     <Row align="center" grow className={classes.heading}>
-      <Paragraph className={classes.manage} weight="bolder" noMargin>
+      <Paragraph className={classes.manage} size="xl" weight="bolder" noMargin>
         Receive funds
       </Paragraph>
       <IconButton onClick={onClose} disableRipple>
         <Close className={classes.close} />
       </IconButton>
     </Row>
-    <Col layout="column" middle="xs">
     <Hairline />
-      <Paragraph className={classes.safeName} weight="bolder" size="xl" noMargin>
+    <Paragraph className={classes.annotation} size="lg" noMargin>
+      This is the address of your Safe. Deposit funds by scanning the QR code or copying the address below. Only send
+      ETH and ERC-20 tokens to this address!
+    </Paragraph>
+    <Col layout="column" middle="xs">
+      <Paragraph className={classes.safeName} weight="bold" size="lg" noMargin>
         {safeName}
       </Paragraph>
       <Block className={classes.qrContainer}>
@@ -102,14 +102,13 @@ const Receive = ({
         >
           {safeAddress}
         </Paragraph>
-        <Link className={classes.open} to={etherScanLink} target="_blank">
+        <CopyBtn content={safeAddress} />
-          <OpenInNew style={openIconStyle} />
+        <EtherscanBtn type="address" value={safeAddress} />
-        </Link>
       </Block>
     </Col>
     <Hairline />
     <Row align="center" className={classes.buttonRow}>
-      <Button color="primary" minWidth={140} onClick={onClose} variant="contained">
+      <Button color="primary" minWidth={130} onClick={onClose} variant="contained">
         Done
       </Button>
     </Row>

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

@@ -213,12 +213,12 @@ class Balances extends React.Component<Props, State> {
           title="Receive Tokens"
           description="Receive Tokens Form"
           handleClose={this.onHide('Receive')}
+          paperClassName={classes.receiveModal}
           open={showReceive}
         >
           <Receive
             safeName={safeName}
             safeAddress={safeAddress}
-            etherScanLink={etherScanLink}
             onClose={this.onHide('Receive')}
           />
         </Modal>

src/routes/safe/components/Balances/style.js

@@ -15,6 +15,9 @@ export const styles = (theme: Object) => ({
   iconSmall: {
     fontSize: 16,
   },
+  receiveModal: {
+    height: '544px',
+  },
   hide: {
     '&:hover': {
       backgroundColor: '#fff3e2',

src/routes/safe/components/Layout.jsx

@@ -219,6 +219,7 @@ class Layout extends React.Component<Props, State> {
           description="Receive Tokens Form"
           handleClose={onHide('Receive')}
           open={showReceive}
+          paperClassName={classes.receiveModal}
         >
           <Receive
             safeName={name}

src/routes/safe/components/Settings/style.js

@@ -8,6 +8,7 @@ export const styles = () => ({
     backgroundColor: 'white',
     boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
     minHeight: '505px',
+    marginBottom: '54px',
     display: 'flex',
     borderRadius: '8px',
   },

src/routes/safe/components/style.js

@@ -17,6 +17,9 @@ export const styles = () => ({
   user: {
     justifyContent: 'left',
   },
+  receiveModal: {
+    height: '544px',
+  },
   open: {
     paddingLeft: sm,
     width: 'auto',

yarn.lock

@@ -6416,10 +6416,10 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-date-fns@2.2.1:
+date-fns@2.3.0:
-  version "2.2.1"
+  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.2.1.tgz#b3f79cf56760af106050c686f4c72586a3383ee9"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.3.0.tgz#017eae725d0c46173b572da025fb5e4e534270fd"
-  integrity sha512-4V1i5CnTinjBvJpXTq7sDHD4NY6JPcl15112IeSNNLUWQOQ+kIuCvRGOFZMQZNvkadw8F9QTyZxz59rIRU6K+w==
+  integrity sha512-A8o+iXBVqQayl9Z39BHgb7m/zLOfhF7LK82t+n9Fq1adds1vaUn8ByVoADqWLe4OTc6BZYc/FdbdTwufNYqkJw==
 
 date-now@^0.1.4:
   version "0.1.4"
@@ -14776,23 +14776,23 @@ react-redux@7.1.1:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
-react-router-dom@^5.0.1:
+react-router-dom@5.1.0:
-  version "5.0.1"
+  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.0.tgz#48ad018d71fb7835212587e4c90bd2e3d2417e31"
-  integrity sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==
+  integrity sha512-OkxKbMKjO7IkYqnoaZNX19MnwgjhxwZE871cPUTq0YU2wpIw7QwGxSnSoNRMOa7wO1TwvJJMFpgiEB4C/gVhTw==
   dependencies:
     "@babel/runtime" "^7.1.2"
     history "^4.9.0"
     loose-envify "^1.3.1"
     prop-types "^15.6.2"
-    react-router "5.0.1"
+    react-router "5.1.0"
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@5.0.1:
+react-router@5.1.0:
-  version "5.0.1"
+  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.0.tgz#739d0f3a57476363374e20d6e33e97f5ce2e00a3"
-  integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==
+  integrity sha512-n9HXxaL/6yRlig9XPfGyagI8+bUNdqcu7FUAx0/Z+Us22Z8iHsbkyJ21Inebn9HOxI5Nxlfc8GNabkNSeXfhqw==
   dependencies:
     "@babel/runtime" "^7.1.2"
     history "^4.9.0"
@@ -19662,13 +19662,14 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
-webpack-manifest-plugin@2.1.0:
+webpack-manifest-plugin@2.1.1:
-  version "2.1.0"
+  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.0.tgz#5c7c6b3bcfc28fa4a32bcd63c739a83a04eb41bf"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.1.tgz#6b3e280327815b83152c79f42d0ca13b665773c4"
-  integrity sha512-vQn/mY9okBQUim6fQo+8lYzn/MWcSMGbGpQyKIR6c6NF++lVxfzdlZBL0FGVQsb1RFL/rPdKwu6hkbtWv6CEYg==
+  integrity sha512-2zqJ6mvc3yoiqfDjghAIpljhLSDh/G7vqGrzYcYqqRCd/ZZZCAuc/YPE5xG0LGpLgDJRhUNV1H+znyyhIxahzA==
   dependencies:
     fs-extra "^7.0.0"
     lodash ">=3.5 <5"
+    object.entries "^1.1.0"
     tapable "^1.0.0"
 
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
@@ -19687,10 +19688,10 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@4.40.2, webpack@^4.38.0:
+webpack@4.41.0:
-  version "4.40.2"
+  version "4.41.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.40.2.tgz#d21433d250f900bf0facbabe8f50d585b2dc30a7"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.0.tgz#db6a254bde671769f7c14e90a1a55e73602fc70b"
-  integrity sha512-5nIvteTDCUws2DVvP9Qe+JPla7kWPPIDFZv55To7IycHWZ+Z5qBdaBYPyuXWdhggTufZkQwfIK+5rKQTVovm2A==
+  integrity sha512-yNV98U4r7wX1VJAj5kyMsu36T8RPPQntcb5fJLOsMz/pt/WrKC0Vp1bAlqPLkA1LegSwQwf6P+kAbyhRKVQ72g==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-module-context" "1.8.5"
@@ -19745,6 +19746,35 @@ webpack@^4.33.0:
     watchpack "^1.5.0"
     webpack-sources "^1.3.0"
 
+webpack@^4.38.0:
+  version "4.40.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.40.2.tgz#d21433d250f900bf0facbabe8f50d585b2dc30a7"
+  integrity sha512-5nIvteTDCUws2DVvP9Qe+JPla7kWPPIDFZv55To7IycHWZ+Z5qBdaBYPyuXWdhggTufZkQwfIK+5rKQTVovm2A==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/wasm-edit" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    acorn "^6.2.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.3"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.1"
+    watchpack "^1.6.0"
+    webpack-sources "^1.4.1"
+
 webrtc-adapter@^7.2.1:
   version "7.2.8"
   resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.2.8.tgz#1373fa874559c655aa713830c2836511588d77ab"