-
+
{nostrConnectionErrMsg && (
{nostrConnectionErrMsg}
diff --git a/src/components/NpubQrCode/index.tsx b/src/components/NpubQrCode/index.tsx
new file mode 100644
index 00000000..f55c97d2
--- /dev/null
+++ b/src/components/NpubQrCode/index.tsx
@@ -0,0 +1,57 @@
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { QrCodeIcon } from 'lucide-react'
+import { nip19 } from 'nostr-tools'
+import { useMemo } from 'react'
+import Nip05 from '../Nip05'
+import PubkeyCopy from '../PubkeyCopy'
+import QrCode from '../QrCode'
+import UserAvatar from '../UserAvatar'
+import Username from '../Username'
+
+export default function NpubQrCode({ pubkey }: { pubkey: string }) {
+ const { isSmallScreen } = useScreenSize()
+ const npub = useMemo(() => (pubkey ? nip19.npubEncode(pubkey) : ''), [pubkey])
+ if (!npub) return null
+
+ const trigger = (
+
+
+
+ )
+
+ const content = (
+
+ )
+
+ if (isSmallScreen) {
+ return (
+
+ {trigger}
+ {content}
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/QrCode/index.tsx b/src/components/QrCode/index.tsx
new file mode 100644
index 00000000..c8a87a21
--- /dev/null
+++ b/src/components/QrCode/index.tsx
@@ -0,0 +1,70 @@
+import { useTheme } from '@/providers/ThemeProvider'
+import QRCodeStyling from 'qr-code-styling'
+import { useEffect, useRef, useState } from 'react'
+
+export default function QrCode({ value, size = 180 }: { value: string; size?: number }) {
+ const { theme } = useTheme()
+ const ref = useRef
(null)
+ const [foregroundColor, setForegroundColor] = useState()
+ const [backgroundColor, setBackgroundColor] = useState()
+
+ 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({
+ width: size * pixelRatio,
+ height: size * pixelRatio,
+ data: value,
+ dotsOptions: {
+ type: 'dots',
+ color: foregroundColor
+ },
+ cornersDotOptions: {
+ type: 'extra-rounded',
+ color: foregroundColor
+ },
+ cornersSquareOptions: {
+ type: 'extra-rounded',
+ color: foregroundColor
+ },
+ backgroundOptions: {
+ color: backgroundColor
+ }
+ })
+
+ if (ref.current) {
+ ref.current.innerHTML = ''
+ qrCode.append(ref.current)
+ const canvas = ref.current.querySelector('canvas')
+ if (canvas) {
+ canvas.style.width = `${size}px`
+ canvas.style.height = `${size}px`
+ canvas.style.maxWidth = '100%'
+ canvas.style.height = 'auto'
+ }
+ }
+ }, 0)
+
+ return () => {
+ if (ref.current) ref.current.innerHTML = ''
+ }
+ }, [value, size, foregroundColor, backgroundColor])
+
+ return
+}
+
+function getColor(name: string) {
+ if (typeof window !== 'undefined') {
+ return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim()
+ }
+}
diff --git a/src/components/QrCodePopover/index.tsx b/src/components/QrCodePopover/index.tsx
deleted file mode 100644
index a3886935..00000000
--- a/src/components/QrCodePopover/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { useScreenSize } from '@/providers/ScreenSizeProvider'
-import { QrCode } from 'lucide-react'
-import { nip19 } from 'nostr-tools'
-import { QRCodeSVG } from 'qrcode.react'
-import { useMemo } from 'react'
-
-export default function QrCodePopover({ pubkey }: { pubkey: string }) {
- const { isSmallScreen } = useScreenSize()
- const npub = useMemo(() => (pubkey ? nip19.npubEncode(pubkey) : ''), [pubkey])
- if (!npub) return null
-
- if (isSmallScreen) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
-
- return (
-
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/src/components/UserAvatar/index.tsx b/src/components/UserAvatar/index.tsx
index ad9c4f0e..a8658f45 100644
--- a/src/components/UserAvatar/index.tsx
+++ b/src/components/UserAvatar/index.tsx
@@ -12,6 +12,7 @@ import { useMemo } from 'react'
const UserAvatarSizeCnMap = {
large: 'w-24 h-24',
big: 'w-16 h-16',
+ semiBig: 'w-12 h-12',
normal: 'w-10 h-10',
medium: 'w-8 h-8',
small: 'w-7 h-7',
@@ -26,7 +27,7 @@ export default function UserAvatar({
}: {
userId: string
className?: string
- size?: 'large' | 'big' | 'normal' | 'medium' | 'small' | 'xSmall' | 'tiny'
+ size?: 'large' | 'big' | 'semiBig' | 'normal' | 'medium' | 'small' | 'xSmall' | 'tiny'
}) {
const { profile } = useFetchProfile(userId)
const defaultAvatar = useMemo(
diff --git a/src/pages/primary/MePage/index.tsx b/src/pages/primary/MePage/index.tsx
index 9f6cbb39..1a0ab01f 100644
--- a/src/pages/primary/MePage/index.tsx
+++ b/src/pages/primary/MePage/index.tsx
@@ -2,7 +2,7 @@ import AccountManager from '@/components/AccountManager'
import LoginDialog from '@/components/LoginDialog'
import LogoutDialog from '@/components/LogoutDialog'
import PubkeyCopy from '@/components/PubkeyCopy'
-import QrCodePopover from '@/components/QrCodePopover'
+import NpubQrCode from '@/components/NpubQrCode'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { SimpleUserAvatar } from '@/components/UserAvatar'
@@ -53,7 +53,7 @@ const MePage = forwardRef((_, ref) => {
/>
diff --git a/src/pages/secondary/ProfilePage/index.tsx b/src/pages/secondary/ProfilePage/index.tsx
index 76ea8e4b..4bc35f9f 100644
--- a/src/pages/secondary/ProfilePage/index.tsx
+++ b/src/pages/secondary/ProfilePage/index.tsx
@@ -7,7 +7,7 @@ import ProfileBanner from '@/components/ProfileBanner'
import ProfileOptions from '@/components/ProfileOptions'
import ProfileZapButton from '@/components/ProfileZapButton'
import PubkeyCopy from '@/components/PubkeyCopy'
-import QrCodePopover from '@/components/QrCodePopover'
+import NpubQrCode from '@/components/NpubQrCode'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
@@ -157,7 +157,7 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
)}