From 431226aa8f06bec18db2e27f7a23074c72a5eab1 Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Fri, 4 Oct 2019 08:13:16 -0700
Subject: [PATCH] fix: qr code encodes url of page

---
 src/v2/components/Applications/Detail/index.jsx |  3 ++-
 src/v2/components/QRPopup/index.jsx             | 10 ++++++++--
 src/v2/components/QRPopup/styles.js             |  4 ++++
 src/v2/components/Transactions/Detail/index.jsx |  3 ++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/v2/components/Applications/Detail/index.jsx b/src/v2/components/Applications/Detail/index.jsx
index d9942a27..eaf3d52e 100644
--- a/src/v2/components/Applications/Detail/index.jsx
+++ b/src/v2/components/Applications/Detail/index.jsx
@@ -101,6 +101,7 @@ const ApplicationDetail = ({match}: {match: Match}) => {
   const tabNav = ['Accounts', 'code/source'];
 
   const renderTabNav = label => <TabNav key={label} label={label} />;
+  const url = window.location.href;
 
   return (
     <Container>
@@ -109,7 +110,7 @@ const ApplicationDetail = ({match}: {match: Match}) => {
           <div className={classes.applicationTitle}>
             <span>{applicationId}</span>
             <CopyBtn text={applicationId} />
-            <QRPopup />
+            <QRPopup url={url} />
             <button>
               <StarIcon />
             </button>
diff --git a/src/v2/components/QRPopup/index.jsx b/src/v2/components/QRPopup/index.jsx
index 04476f77..4a085b44 100644
--- a/src/v2/components/QRPopup/index.jsx
+++ b/src/v2/components/QRPopup/index.jsx
@@ -1,9 +1,11 @@
+//@flow
 import {Popover} from '@material-ui/core';
+import QRCode from 'qrcode.react';
 import React, {useState} from 'react';
 
 import useStyles from './styles';
 
-const QRPopup = () => {
+const QRPopup = ({url = ''}: {url: string}) => {
   const classes = useStyles();
   const [qrEl, setQrEl] = useState(null);
   const handleQrOpen = event => setQrEl(event.currentTarget);
@@ -14,6 +16,7 @@ const QRPopup = () => {
         QR code
       </button>
       <Popover
+        classes={{paper: classes.popup}}
         open={Boolean(qrEl)}
         onClose={handleQrClose}
         anchorEl={qrEl}
@@ -26,7 +29,10 @@ const QRPopup = () => {
           horizontal: 'center',
         }}
       >
-        <img src="http://placehold.it/315" alt="" />
+        <QRCode
+          value={url}
+          style={{width: '120px', height: '120px', display: 'block'}}
+        />
       </Popover>
     </div>
   );
diff --git a/src/v2/components/QRPopup/styles.js b/src/v2/components/QRPopup/styles.js
index 082edabd..0825b8ea 100644
--- a/src/v2/components/QRPopup/styles.js
+++ b/src/v2/components/QRPopup/styles.js
@@ -12,4 +12,8 @@ export default makeStyles(theme => ({
     background: 'transparent',
     padding: 0,
   },
+  popup: {
+    padding: 10,
+    background: getColor('white')(theme),
+  },
 }));
diff --git a/src/v2/components/Transactions/Detail/index.jsx b/src/v2/components/Transactions/Detail/index.jsx
index 6f9fdd07..fd42eae5 100644
--- a/src/v2/components/Transactions/Detail/index.jsx
+++ b/src/v2/components/Transactions/Detail/index.jsx
@@ -106,6 +106,7 @@ const TransactionDetail = ({match}: {match: Match}) => {
   ];
 
   const renderTabNav = label => <TabNav key={label} label={label} />;
+  const url = window.location.href;
 
   return (
     <Container>
@@ -114,7 +115,7 @@ const TransactionDetail = ({match}: {match: Match}) => {
           <div className={classes.blockTitle}>
             <span>{transaction.id}</span>
             <CopyBtn text={transaction.id} />
-            <QRPopup />
+            <QRPopup url={url} />
           </div>
         </SectionHeader>
         <div className={classes.body}>