mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: QR code not scannable in dark mode

Browse Source
This commit is contained in:
codytseng
2025-06-09 21:55:42 +08:00
parent 0d42f8687f
commit f7dccde746
2 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/AccountManager/NostrConnectionLogin.tsx
View File

@@ -48,12 +48,12 @@ export default function NostrConnectLogin({
relays: DEFAULT_NOSTRCONNECT_RELAY, relays: DEFAULT_NOSTRCONNECT_RELAY,
secret: Math.random().toString(36).substring(7), secret: Math.random().toString(36).substring(7),
name: document.location.host, name: document.location.host,
url: document.location.origin, url: document.location.origin
} }
const newConnectionString = createNostrConnectURI(newMeta) const newConnectionString = createNostrConnectURI(newMeta)
return { return {
privKey: newPrivKey, privKey: newPrivKey,
connectionString: newConnectionString, connectionString: newConnectionString
} }
}) })
@@ -83,17 +83,18 @@ export default function NostrConnectLogin({
}, []) }, [])
useEffect(() => { useEffect(() => {
if (!loginDetails.privKey || !loginDetails.connectionString) return; if (!loginDetails.privKey || !loginDetails.connectionString) return
setNostrConnectionErrMsg(null) setNostrConnectionErrMsg(null)
nostrConnectionLogin(loginDetails.privKey, loginDetails.connectionString) nostrConnectionLogin(loginDetails.privKey, loginDetails.connectionString)
.then(() => onLoginSuccess()) .then(() => onLoginSuccess())
.catch((err) => { .catch((err) => {
console.error("NostrConnectionLogin Error:", err) console.error('NostrConnectionLogin Error:', err)
setNostrConnectionErrMsg(err.message ? `${err.message}. Please reload.` : 'Connection failed. Please reload.') setNostrConnectionErrMsg(
err.message ? `${err.message}. Please reload.` : 'Connection failed. Please reload.'
)
}) })
}, [loginDetails, nostrConnectionLogin, onLoginSuccess]) }, [loginDetails, nostrConnectionLogin, onLoginSuccess])
const copyConnectionString = async () => { const copyConnectionString = async () => {
if (!loginDetails.connectionString) return if (!loginDetails.connectionString) return
@@ -106,19 +107,22 @@ export default function NostrConnectLogin({
<> <>
<div ref={qrContainerRef} className="flex flex-col items-center w-full space-y-3 mb-3"> <div ref={qrContainerRef} className="flex flex-col items-center w-full space-y-3 mb-3">
<a href={loginDetails.connectionString} aria-label="Open with Nostr signer app"> <a href={loginDetails.connectionString} aria-label="Open with Nostr signer app">
<QRCodeSVG size={qrCodeSize} value={loginDetails.connectionString} marginSize={1} /> <QRCodeSVG
size={qrCodeSize}
value={loginDetails.connectionString}
bgColor="hsl(var(--background))"
fgColor="hsl(var(--foreground))"
/>
</a> </a>
{nostrConnectionErrMsg && ( {nostrConnectionErrMsg && (
<div className="text-xs text-destructive text-center pt-1"> <div className="text-xs text-destructive text-center pt-1">{nostrConnectionErrMsg}</div>
{nostrConnectionErrMsg}
</div>
)} )}
</div> </div>
<div className="flex justify-center w-full mb-3"> <div className="flex justify-center w-full mb-3">
<div <div
className="flex items-center gap-2 text-sm text-muted-foreground bg-muted px-3 py-2 rounded-full cursor-pointer transition-all hover:bg-muted/80" className="flex items-center gap-2 text-sm text-muted-foreground bg-muted px-3 py-2 rounded-full cursor-pointer transition-all hover:bg-muted/80"
style={{ style={{
width: qrCodeSize > 0 ? `${Math.max(150, Math.min(qrCodeSize, 320))}px` : 'auto', width: qrCodeSize > 0 ? `${Math.max(150, Math.min(qrCodeSize, 320))}px` : 'auto'
}} }}
onClick={copyConnectionString} onClick={copyConnectionString}
role="button" role="button"
@@ -127,9 +131,7 @@ export default function NostrConnectLogin({
<div className="flex-grow min-w-0 truncate select-none"> <div className="flex-grow min-w-0 truncate select-none">
{loginDetails.connectionString} {loginDetails.connectionString}
</div> </div>
<div className="flex-shrink-0"> <div className="flex-shrink-0">{copied ? <Check size={14} /> : <Copy size={14} />}</div>
{copied ? <Check size={14} /> : <Copy size={14} />}
</div>
</div> </div>
</div> </div>

13
src/components/QrCodePopover/index.tsx
View File

@@ -21,7 +21,12 @@ export default function QrCodePopover({ pubkey }: { pubkey: string }) {
</DrawerTrigger> </DrawerTrigger>
<DrawerContent className="h-1/2"> <DrawerContent className="h-1/2">
<div className="flex justify-center items-center h-full"> <div className="flex justify-center items-center h-full">
<QRCodeSVG size={300} value={`nostr:${npub}`} /> <QRCodeSVG
size={300}
value={`nostr:${npub}`}
bgColor="hsl(var(--background))"
fgColor="hsl(var(--foreground))"
/>
</div> </div>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
@@ -36,7 +41,11 @@ export default function QrCodePopover({ pubkey }: { pubkey: string }) {
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-fit h-fit"> <PopoverContent className="w-fit h-fit">
<QRCodeSVG value={`nostr:${npub}`} /> <QRCodeSVG
value={`nostr:${npub}`}
bgColor="hsl(var(--background))"
fgColor="hsl(var(--foreground))"
/>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
) )