move QR functionality into own component

src/components/atoms/Qr.jsx

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { QRCode } from 'react-qr-svg'
+import Clipboard from 'react-clipboard.js'
+import { ReactComponent as IconClipboard } from '../../images/clipboard.svg'
+
+const Qr = ({ address, title }) => (
+  <Fragment>
+    {title && <h4>{title}</h4>}
+    <QRCode
+      bgColor="transparent"
+      fgColor="#6b7f88"
+      level="Q"
+      style={{ width: 120 }}
+      value={address}
+    />
+    <pre>
+      <code>{address}</code>
+      <Clipboard data-clipboard-text={address} button-title="Copy to clipboard">
+        <IconClipboard />
+      </Clipboard>
+    </pre>
+  </Fragment>
+)
+
+Qr.propTypes = {
+  address: PropTypes.string.isRequired,
+  title: PropTypes.string
+}
+
+export default Qr

src/components/molecules/ModalThanks.jsx

@@ -1,10 +1,9 @@
 import React, { PureComponent } from 'react'
 import { StaticQuery, graphql } from 'gatsby'
-import { QRCode } from 'react-qr-svg'
+
-import Clipboard from 'react-clipboard.js'
 import Web3Donation from '../atoms/Web3Donation'
+import Qr from '../atoms/Qr'
 import Modal from '../atoms/Modal'
-import { ReactComponent as IconClipboard } from '../../images/clipboard.svg'
 import styles from './ModalThanks.module.scss'
 
 const query = graphql`
@@ -39,23 +38,7 @@ class ModalThanks extends PureComponent {
 
                 {Object.keys(author).map((address, i) => (
                   <div key={i} className={styles.coin}>
-                    <h4>{address}</h4>
+                    <Qr title={address} address={author[address]} />
-                    <QRCode
-                      bgColor="transparent"
-                      fgColor="#6b7f88"
-                      level="Q"
-                      style={{ width: 120 }}
-                      value={author[address]}
-                    />
-                    <pre>
-                      <code>{author[address]}</code>
-                      <Clipboard
-                        data-clipboard-text={author[address]}
-                        button-title="Copy to clipboard"
-                      >
-                        <IconClipboard />
-                      </Clipboard>
-                    </pre>
                   </div>
                 ))}
               </div>