From 81897461e3020adb1c6bf7634f622dbccb840a0f Mon Sep 17 00:00:00 2001
From: k00b <k00b@stacker.news>
Date: Sat, 12 Oct 2024 18:01:00 -0500
Subject: [PATCH] fix qrcode display after upgrade

---
 components/qr.js          | 13 ++++++++++---
 components/user-header.js |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/qr.js b/components/qr.js
index a440220d..10cf5fcb 100644
--- a/components/qr.js
+++ b/components/qr.js
@@ -1,4 +1,4 @@
-import QRCode from 'qrcode.react'
+import { QRCodeSVG } from 'qrcode.react'
 import { CopyInput, InputSkeleton } from './form'
 import InvoiceStatus from './invoice-status'
 import { useEffect } from 'react'
@@ -25,8 +25,15 @@ export default function Qr ({ asIs, value, useWallet: automated, statusVariant,
   return (
     <>
       <a className='d-block p-3 mx-auto' style={{ background: 'white', maxWidth: '300px' }} href={qrValue}>
-        <QRCode
-          className='h-auto mw-100' value={qrValue} renderAs='svg' size={300}
+        <QRCodeSVG
+          className='h-auto mw-100' value={qrValue} size={300} imageSettings={{
+            src: 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 256 256\'%3E%3Cpath fill-rule=\'evenodd\' d=\'m46.7 96.4 37.858 53.837-71.787 62.934L117.5 155.4l-40.075-52.854 49.412-59.492Zm156.35 41.546-49.416-58.509-34.909 116.771 44.25-67.358 58.509 59.25L241.4 47.725Z\'/%3E%3C/svg%3E',
+            x: undefined,
+            y: undefined,
+            height: 60,
+            width: 60,
+            excavate: true
+          }}
         />
       </a>
       {description && <div className='mt-1 text-center text-muted'>{description}</div>}
diff --git a/components/user-header.js b/components/user-header.js
index 75409918..29bfa702 100644
--- a/components/user-header.js
+++ b/components/user-header.js
@@ -10,7 +10,7 @@ import { gql, useApolloClient, useMutation } from '@apollo/client'
 import styles from './user-header.module.css'
 import { useMe } from './me'
 import { NAME_MUTATION } from '@/fragments/users'
-import QRCode from 'qrcode.react'
+import { QRCodeSVG } from 'qrcode.react'
 import LightningIcon from '@/svgs/bolt.svg'
 import { encodeLNUrl } from '@/lib/lnurl'
 import Avatar from './avatar'
@@ -268,7 +268,7 @@ function HeaderHeader ({ user }) {
             showModal(({ onClose }) => (
               <>
                 <a className='d-flex m-auto p-3' style={{ background: 'white', maxWidth: 'fit-content' }} href={`lightning:${lnurlp}`}>
-                  <QRCode className='d-flex m-auto' value={lnurlp} renderAs='svg' size={300} />
+                  <QRCodeSVG className='d-flex m-auto' value={lnurlp} size={300} />
                 </a>
                 <div className='text-center fw-bold text-muted mt-3'>click or scan</div>
               </>