Generate QR Code for badge claim on Badge Hub Dashboard > Execute

components/LinkTabs.data.ts

@@ -90,7 +90,7 @@ export const badgeHubLinkTabs: LinkTabProps[] = [
   },
   {
     title: 'Query',
-    description: `Dispatch queries with your Badge Hub contract`,
+    description: `Dispatch queries for your Badge Hub contract`,
     href: '/contracts/badgeHub/query',
   },
   {

package.json

@@ -31,10 +31,12 @@
     "clsx": "^1",
     "compare-versions": "^4",
     "daisyui": "^2.19.0",
+    "html-to-image": "1.11.11",
     "match-sorter": "^6",
     "next": "^12",
     "next-seo": "^4",
     "nft.storage": "^6.3.0",
+    "qrcode.react": "3.1.0",
     "react": "^18",
     "react-datetime-picker": "^3",
     "react-dom": "^18",

pages/contracts/badgeHub/execute.tsx

@@ -16,15 +16,18 @@ import { useWallet } from 'contexts/wallet'
 import type { DispatchExecuteArgs } from 'contracts/badgeHub/messages/execute'
 import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/badgeHub/messages/execute'
 import * as crypto from 'crypto'
+import { toPng } from 'html-to-image'
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
+import { QRCodeCanvas } from 'qrcode.react'
 import type { FormEvent } from 'react'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { FaArrowRight } from 'react-icons/fa'
 import { useMutation } from 'react-query'
 import * as secp256k1 from 'secp256k1'
+import { NETWORK } from 'utils/constants'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 
@@ -38,8 +41,10 @@ const BadgeHubExecutePage: NextPage = () => {
   const [lastTx, setLastTx] = useState('')
 
   const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
-  const [resolvedRecipientAddress, setResolvedRecipientAddress] = useState<string>('')
   const [transferrable, setTransferrable] = useState<boolean>(false)
+  const [createdBadgeId, setCreatedBadgeId] = useState<string | undefined>(undefined)
+  const [createdBadgeKey, setCreatedBadgeKey] = useState<string | undefined>(undefined)
+  const qrRef = useRef<HTMLDivElement>(null)
 
   const comboboxState = useExecuteComboboxState()
   const type = comboboxState.value?.id
@@ -267,6 +272,7 @@ const BadgeHubExecutePage: NextPage = () => {
       })
       if (txHash) {
         setLastTx(txHash.split(':')[0])
+        setCreatedBadgeId(txHash.split(':')[1])
         console.log(txHash.split(':')[1])
       }
     },
@@ -284,6 +290,7 @@ const BadgeHubExecutePage: NextPage = () => {
     } while (!secp256k1.privateKeyVerify(privKey))
 
     const privateKey = privKey.toString('hex')
+    setCreatedBadgeKey(privateKey)
     console.log('Private Key: ', privateKey)
 
     const publicKey = Buffer.from(secp256k1.publicKeyCreate(privKey)).toString('hex')
@@ -291,6 +298,16 @@ const BadgeHubExecutePage: NextPage = () => {
     keyState.onChange(publicKey)
   }
 
+  const handleDownloadQr = async () => {
+    const qrElement = qrRef.current
+    await toPng(qrElement as HTMLElement).then((dataUrl) => {
+      const link = document.createElement('a')
+      link.download = `badge-${createdBadgeId as string}.png`
+      link.href = dataUrl
+      link.click()
+    })
+  }
+
   const router = useRouter()
 
   useEffect(() => {
@@ -320,6 +337,21 @@ const BadgeHubExecutePage: NextPage = () => {
       />
       <LinkTabs activeIndex={2} data={badgeHubLinkTabs} />
 
+      {showBadgeField && createdBadgeId && createdBadgeKey && (
+        <div className="ml-4">
+          <div className="w-[384px] h-[384px]" ref={qrRef}>
+            <QRCodeCanvas
+              size={384}
+              value={`${
+                NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone'
+              }/?id=${createdBadgeId}&key=${createdBadgeKey}`}
+            />
+          </div>
+          <Button className="mt-2" onClick={() => void handleDownloadQr()}>
+            Download QR Code
+          </Button>
+        </div>
+      )}
       <form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
         <div className="space-y-8">
           <AddressInput {...contractState} />

yarn.lock

@@ -5026,6 +5026,11 @@ hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
+html-to-image@1.11.11:
+  version "1.11.11"
+  resolved "https://registry.yarnpkg.com/html-to-image/-/html-to-image-1.11.11.tgz#c0f8a34dc9e4b97b93ff7ea286eb8562642ebbea"
+  integrity sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
@@ -6717,6 +6722,11 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+qrcode.react@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"