Put sharing qr code in modal

web/pages/challenges/index.tsx

@@ -27,6 +27,8 @@ import { Button } from 'web/components/button'
 import { ClipboardCopyIcon, QrcodeIcon } from '@heroicons/react/outline'
 import { copyToClipboard } from 'web/lib/util/copy'
 import toast from 'react-hot-toast'
+import { Modal } from 'web/components/layout/modal'
+import { QRCode } from 'web/components/qr-code'
 
 dayjs.extend(customParseFormat)
 const columnClass = 'sm:px-5 px-2 py-3.5 max-w-[100px] truncate'
@@ -107,11 +109,24 @@ function YourChallengesTable(props: { links: Challenge[] }) {
 function YourLinkSummaryRow(props: { challenge: Challenge }) {
   const { challenge } = props
   const { acceptances } = challenge
-
+  const [open, setOpen] = React.useState(false)
   const className = clsx(
     'whitespace-nowrap text-sm hover:cursor-pointer text-gray-500 hover:bg-sky-50 bg-white'
   )
   return (
+    <>
+      <Modal open={open} setOpen={setOpen} size={'sm'}>
+        <Col
+          className={
+            'items-center justify-center gap-4 rounded-md bg-white p-8 py-8 '
+          }
+        >
+          <span className={'mb-4  text-center text-xl text-indigo-700'}>
+            Have your friend scan this to accept the challenge!
+          </span>
+          <QRCode url={getChallengeUrl(challenge)} />
+        </Col>
+      </Modal>
       <tr id={challenge.slug} key={challenge.slug} className={className}>
         <td className={amountClass}>
           <SiteLink href={getChallengeUrl(challenge)}>
@@ -124,7 +139,7 @@ function YourLinkSummaryRow(props: { challenge: Challenge }) {
             'text-center sm:max-w-[200px] sm:text-start'
           )}
         >
-        <Row className="items-center">
+          <Row className="items-center gap-2">
             <Button
               color="gray-white"
               size="xs"
@@ -139,10 +154,7 @@ function YourLinkSummaryRow(props: { challenge: Challenge }) {
               color="gray-white"
               size="xs"
               onClick={() => {
-              const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${200}x${200}&data=${getChallengeUrl(
-                challenge
-              )}`
-              window.location.href = qrUrl
+                setOpen(true)
               }}
             >
               <QrcodeIcon className="h-5 w-5 sm:h-4 sm:w-4" />
@@ -180,6 +192,7 @@ function YourLinkSummaryRow(props: { challenge: Challenge }) {
           </Row>
         </td>
       </tr>
+    </>
   )
 }