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,79 +109,90 @@ 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 (
-    <tr id={challenge.slug} key={challenge.slug} className={className}>
+    <>
-      <td className={amountClass}>
+      <Modal open={open} setOpen={setOpen} size={'sm'}>
-        <SiteLink href={getChallengeUrl(challenge)}>
+        <Col
-          {formatMoney(challenge.creatorAmount)}
+          className={
-        </SiteLink>
+            'items-center justify-center gap-4 rounded-md bg-white p-8 py-8 '
-      </td>
+          }
-      <td
+        >
-        className={clsx(
+          <span className={'mb-4  text-center text-xl text-indigo-700'}>
-          columnClass,
+            Have your friend scan this to accept the challenge!
-          'text-center sm:max-w-[200px] sm:text-start'
+          </span>
-        )}
+          <QRCode url={getChallengeUrl(challenge)} />
-      >
+        </Col>
-        <Row className="items-center">
+      </Modal>
-          <Button
+      <tr id={challenge.slug} key={challenge.slug} className={className}>
-            color="gray-white"
+        <td className={amountClass}>
-            size="xs"
+          <SiteLink href={getChallengeUrl(challenge)}>
-            onClick={() => {
+            {formatMoney(challenge.creatorAmount)}
-              copyToClipboard(getChallengeUrl(challenge))
-              toast('Link copied to clipboard!')
-            }}
-          >
-            <ClipboardCopyIcon className={'h-5 w-5 sm:h-4 sm:w-4'} />
-          </Button>
-          <Button
-            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
-            }}
-          >
-            <QrcodeIcon className="h-5 w-5 sm:h-4 sm:w-4" />
-          </Button>
-          <SiteLink
-            href={getChallengeUrl(challenge)}
-            className={'mx-1 mb-1 hidden sm:inline-block'}
-          >
-            {`...${challenge.contractSlug}/${challenge.slug}`}
           </SiteLink>
-        </Row>
+        </td>
-      </td>
+        <td
-
+          className={clsx(
-      <td className={columnClass}>
+            columnClass,
-        <Row className={'items-center justify-start gap-1'}>
+            'text-center sm:max-w-[200px] sm:text-start'
-          {acceptances.length > 0 ? (
-            <>
-              <Avatar
-                username={acceptances[0].userUsername}
-                avatarUrl={acceptances[0].userAvatarUrl}
-                size={'sm'}
-              />
-              <UserLink
-                name={acceptances[0].userName}
-                username={acceptances[0].userUsername}
-              />
-            </>
-          ) : (
-            <span>
-              No one -
-              {challenge.expiresTime &&
-                ` (expires ${fromNow(challenge.expiresTime)})`}
-            </span>
           )}
-        </Row>
+        >
-      </td>
+          <Row className="items-center gap-2">
-    </tr>
+            <Button
+              color="gray-white"
+              size="xs"
+              onClick={() => {
+                copyToClipboard(getChallengeUrl(challenge))
+                toast('Link copied to clipboard!')
+              }}
+            >
+              <ClipboardCopyIcon className={'h-5 w-5 sm:h-4 sm:w-4'} />
+            </Button>
+            <Button
+              color="gray-white"
+              size="xs"
+              onClick={() => {
+                setOpen(true)
+              }}
+            >
+              <QrcodeIcon className="h-5 w-5 sm:h-4 sm:w-4" />
+            </Button>
+            <SiteLink
+              href={getChallengeUrl(challenge)}
+              className={'mx-1 mb-1 hidden sm:inline-block'}
+            >
+              {`...${challenge.contractSlug}/${challenge.slug}`}
+            </SiteLink>
+          </Row>
+        </td>
+
+        <td className={columnClass}>
+          <Row className={'items-center justify-start gap-1'}>
+            {acceptances.length > 0 ? (
+              <>
+                <Avatar
+                  username={acceptances[0].userUsername}
+                  avatarUrl={acceptances[0].userAvatarUrl}
+                  size={'sm'}
+                />
+                <UserLink
+                  name={acceptances[0].userName}
+                  username={acceptances[0].userUsername}
+                />
+              </>
+            ) : (
+              <span>
+                No one -
+                {challenge.expiresTime &&
+                  ` (expires ${fromNow(challenge.expiresTime)})`}
+              </span>
+            )}
+          </Row>
+        </td>
+      </tr>
+    </>
   )
 }