feat: improve QR code for easier scanning

src/components/NpubQrCode/index.tsx

@@ -24,9 +24,9 @@ export default function NpubQrCode({ pubkey }: { pubkey: string }) {
   const content = (
     <div className="w-full flex flex-col items-center gap-4 p-8">
       <div className="flex items-center w-full gap-2 pointer-events-none px-1">
-        <UserAvatar size="semiBig" userId={pubkey} />
+        <UserAvatar size="big" userId={pubkey} />
         <div className="flex-1 w-0">
-          <Username userId={pubkey} className="text-xl font-semibold truncate" />
+          <Username userId={pubkey} className="text-2xl font-semibold truncate" />
           <Nip05 pubkey={pubkey} />
         </div>
       </div>

src/components/QrCode/index.tsx

@@ -1,44 +1,30 @@
-import { useTheme } from '@/providers/ThemeProvider'
 import QRCodeStyling from 'qr-code-styling'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
+import iconSvg from '../../../public/favicon.svg'
 
 export default function QrCode({ value, size = 180 }: { value: string; size?: number }) {
-  const { theme } = useTheme()
   const ref = useRef<HTMLDivElement>(null)
-  const [foregroundColor, setForegroundColor] = useState<string | undefined>()
-  const [backgroundColor, setBackgroundColor] = useState<string | undefined>()
-
-  useEffect(() => {
-    setTimeout(() => {
-      const fgColor = `hsl(${getColor('foreground')})`
-      const bgColor = `hsl(${getColor('background')})`
-      setForegroundColor(fgColor)
-      setBackgroundColor(bgColor)
-    }, 0)
-  }, [theme])
 
   useEffect(() => {
     setTimeout(() => {
       const pixelRatio = window.devicePixelRatio || 2
 
       const qrCode = new QRCodeStyling({
+        qrOptions: {
+          errorCorrectionLevel: 'M'
+        },
+        image: iconSvg,
         width: size * pixelRatio,
         height: size * pixelRatio,
         data: value,
         dotsOptions: {
-          type: 'dots',
+          type: 'extra-rounded'
-          color: foregroundColor
         },
         cornersDotOptions: {
-          type: 'extra-rounded',
+          type: 'extra-rounded'
-          color: foregroundColor
         },
         cornersSquareOptions: {
-          type: 'extra-rounded',
+          type: 'extra-rounded'
-          color: foregroundColor
-        },
-        backgroundOptions: {
-          color: backgroundColor
         }
       })
 
@@ -58,13 +44,11 @@ export default function QrCode({ value, size = 180 }: { value: string; size?: nu
     return () => {
       if (ref.current) ref.current.innerHTML = ''
     }
-  }, [value, size, foregroundColor, backgroundColor])
+  }, [value, size])
 
-  return <div ref={ref} />
+  return (
-}
+    <div className="rounded-2xl overflow-hidden p-2 bg-white">
-
+      <div ref={ref} />
-function getColor(name: string) {
+    </div>
-  if (typeof window !== 'undefined') {
+  )
-    return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim()
-  }
 }