manalink qr code

web/components/manalink-card.tsx

@@ -10,6 +10,7 @@ import { DotsHorizontalIcon } from '@heroicons/react/solid'
 import { contractDetailsButtonClassName } from './contract/contract-info-dialog'
 import { useUserById } from 'web/hooks/use-user'
 import getManalinkUrl from 'web/get-manalink-url'
+import { QrcodeIcon } from '@heroicons/react/outline'
 export type ManalinkInfo = {
   expiresTime: number | null
   maxUses: number | null
@@ -78,7 +79,9 @@ export function ManalinkCardFromView(props: {
   const { className, link, highlightedSlug } = props
   const { message, amount, expiresTime, maxUses, claims } = link
   const [showDetails, setShowDetails] = useState(false)
-
+  const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${200}x${200}&data=${getManalinkUrl(
+    link.slug
+  )}`
   return (
     <Col>
       <Col
@@ -127,6 +130,19 @@ export function ManalinkCardFromView(props: {
           >
             {formatMoney(amount)}
           </div>
+
+          <button
+            onClick={() => (window.location.href = qrUrl)}
+            className={clsx(
+              contractDetailsButtonClassName,
+              showDetails
+                ? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
+                : ''
+            )}
+          >
+            <QrcodeIcon className="h-6 w-6" />
+          </button>
+
           <ShareIconButton
             toastClassName={'-left-48 min-w-[250%]'}
             buttonClassName={'transition-colors'}

web/components/manalinks/create-links-button.tsx

@@ -12,6 +12,7 @@ import dayjs from 'dayjs'
 import { Button } from '../button'
 import { getManalinkUrl } from 'web/pages/links'
 import { DuplicateIcon } from '@heroicons/react/outline'
+import { QRCode } from '../qr-code'
 
 export function CreateLinksButton(props: {
   user: User
@@ -98,6 +99,8 @@ function CreateManalinkForm(props: {
     })
   }
 
+  const url = getManalinkUrl(highlightedSlug)
+
   return (
     <>
       {!finishedCreating && (
@@ -199,17 +202,17 @@ function CreateManalinkForm(props: {
               copyPressed ? 'bg-indigo-50 text-indigo-500 transition-none' : ''
             )}
           >
-            <div className="w-full select-text truncate">
-              {getManalinkUrl(highlightedSlug)}
-            </div>
+            <div className="w-full select-text truncate">{url}</div>
             <DuplicateIcon
               onClick={() => {
-                navigator.clipboard.writeText(getManalinkUrl(highlightedSlug))
+                navigator.clipboard.writeText(url)
                 setCopyPressed(true)
               }}
               className="my-auto ml-2 h-5 w-5 cursor-pointer transition hover:opacity-50"
             />
           </Row>
+
+          <QRCode url={url} className="self-center" />
         </>
       )}
     </>

web/components/qr-code.tsx

@@ -0,0 +1,16 @@
+export function QRCode(props: {
+  url: string
+  className?: string
+  width?: number
+  height?: number
+}) {
+  const { url, className, width, height } = {
+    width: 200,
+    height: 200,
+    ...props,
+  }
+
+  const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${width}x${height}&data=${url}`
+
+  return <img src={qrUrl} width={width} height={height} className={className} />
+}