copy address clicking QR

package-lock.json

@@ -8330,6 +8330,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "copyfiles": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.3.0.tgz",
@@ -39120,6 +39128,11 @@
         }
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "adminlte-2-react": "^0.1.27",
+    "copy-to-clipboard": "^3.3.1",
     "gatsby": "^2.23.7",
     "gatsby-image": "^2.4.5",
     "gatsby-plugin-ipfs": "^2.0.2",

src/components/admin-lte/send-receive/receive.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Content, Row, Col, Box } from 'adminlte-2-react'
+import copy from 'copy-to-clipboard'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
@@ -12,7 +13,8 @@ class Receive extends React.Component {
     super(props)
     _this = this
     this.state = {
-      addr: _this.props.walletInfo.cashAddress
+      addr: _this.props.walletInfo.cashAddress,
+      copySuccess: false
     }
   }
 
@@ -37,11 +39,17 @@ class Receive extends React.Component {
                       </h1>
                     </Col>
                     <Col sm={12} className='text-center mt-2 mb-2'>
+                      {_this.state.copySuccess &&
+                        <div className='copied-message'>
+                          Copied!
+                        </div>}
                       <QRCode
+                        className='qr-code'
                         value={_this.state.addr}
                         size={256}
                         includeMargin
                         fgColor='#333'
+                        onClick={_this.handleCopyAddres}
                       />
                       <p>{_this.state.addr}</p>
                       <label className='switch-address' htmlFor='address-checkbox'>
@@ -78,6 +86,16 @@ class Receive extends React.Component {
       addr
     })
   }
+
+  handleCopyAddres () {
+    const address = _this.state.addr
+    copy(address)
+    _this.setState({ copySuccess: true })
+
+    setTimeout(function () {
+      _this.setState({ copySuccess: false })
+    }, 1500)
+  }
 }
 Receive.propTypes = {
   walletInfo: PropTypes.object.isRequired

src/components/admin-lte/send-receive/send-receive.css

@@ -56,4 +56,12 @@
   
   .slider.round:before {
     border-radius: 50%;
+  }
+
+  .qr-code {
+    cursor: pointer; 
+  }
+
+  .copied-message {
+    color: #00AA57; 
   }