From 51178c7352b9507c4a8bd220e4e660f54ed7d665 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 11 Oct 2018 21:14:09 +0200
Subject: [PATCH] move QR functionality into own component

---
 src/components/atoms/Qr.jsx              | 31 ++++++++++++++++++++++++
 src/components/molecules/ModalThanks.jsx | 23 +++---------------
 2 files changed, 34 insertions(+), 20 deletions(-)
 create mode 100644 src/components/atoms/Qr.jsx

diff --git a/src/components/atoms/Qr.jsx b/src/components/atoms/Qr.jsx
new file mode 100644
index 00000000..6f3b0202
--- /dev/null
+++ b/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
diff --git a/src/components/molecules/ModalThanks.jsx b/src/components/molecules/ModalThanks.jsx
index 87fbc5ce..0e86656e 100644
--- a/src/components/molecules/ModalThanks.jsx
+++ b/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>
-                    <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>
+                    <Qr title={address} address={author[address]} />
                   </div>
                 ))}
               </div>