change to a more generic QR code style

src/components/QrCode/index.tsx

@@ -1,54 +1,62 @@
-import { publicAssetUrl } from '@/constants'
 import QRCodeStyling from 'qr-code-styling'
 import { useEffect, useRef } from 'react'
 
+/** Standard black-on-white QR (square modules, no logo) for broad wallet/scanner compatibility. */
 export default function QrCode({ value, size = 180 }: { value: string; size?: number }) {
   const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    setTimeout(() => {
+    if (!value.trim()) return
-      const pixelRatio = window.devicePixelRatio || 2
 
+    const pixelRatio = window.devicePixelRatio || 2
     const qrCode = new QRCodeStyling({
-        qrOptions: {
-          errorCorrectionLevel: 'M'
-        },
-        image: publicAssetUrl('favicon.svg'),
       width: size * pixelRatio,
       height: size * pixelRatio,
       data: value,
+      margin: 8,
+      qrOptions: {
+        errorCorrectionLevel: 'M'
+      },
       dotsOptions: {
-          type: 'extra-rounded'
+        type: 'square',
+        color: '#000000'
       },
-        cornersDotOptions: {
+      backgroundOptions: {
-          type: 'extra-rounded'
+        color: '#ffffff'
       },
       cornersSquareOptions: {
-          type: 'extra-rounded'
+        type: 'square',
+        color: '#000000'
+      },
+      cornersDotOptions: {
+        type: 'square',
+        color: '#000000'
       }
     })
 
-      if (ref.current) {
+    const container = ref.current
-        ref.current.innerHTML = ''
+    if (!container) return
-        qrCode.append(ref.current)
+
-        const canvas = ref.current.querySelector('canvas')
+    container.innerHTML = ''
+    qrCode.append(container)
+    const canvas = container.querySelector('canvas')
     if (canvas) {
       canvas.style.width = `${size}px`
       canvas.style.height = `${size}px`
       canvas.style.maxWidth = '100%'
-          canvas.style.height = 'auto'
+      canvas.style.display = 'block'
-        }
     }
-    }, 0)
 
     return () => {
-      if (ref.current) ref.current.innerHTML = ''
+      container.innerHTML = ''
     }
   }, [value, size])
 
+  if (!value.trim()) return null
+
   return (
-    <div className="rounded-2xl overflow-hidden p-2 bg-white">
+    <div className="rounded-lg border border-border/40 bg-white p-3">
-      <div ref={ref} />
+      <div ref={ref} className="mx-auto w-fit" />
     </div>
   )
 }