fix: qr code encodes url of page

solana-labs · Oct 4, 2019 · 431226a · 431226a
1 parent da9e8fd
commit 431226a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}>