improve user qrcode modal

.changeset/chilled-crabs-relate.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add copy button to user QrCode modal

src/app.tsx

@@ -119,7 +119,7 @@ const router = createBrowserRouter([
       { path: "dm", element: <DirectMessagesView /> },
       { path: "dm/:key", element: <DirectMessageChatView /> },
       { path: "profile", element: <ProfileView /> },
-      { path: "nostr-link", element: <NostrLinkView /> },
+      { path: "l/:link", element: <NostrLinkView /> },
       {
         path: "",
         element: <HomeView />,

src/index.tsx

@@ -5,7 +5,7 @@ import { Providers } from "./providers";
 
 // register nostr: protocol handler
 try {
-  navigator.registerProtocolHandler("web+nostr", new URL("/nostr-link?q=%s", location.origin).toString());
+  navigator.registerProtocolHandler("web+nostr", new URL("/l/%s", location.origin).toString());
 } catch (e) {
   console.log("Failed to register handler");
   console.log(e);

src/views/link/index.tsx

@@ -1,5 +1,5 @@
 import { Alert, AlertIcon, AlertTitle, Spinner } from "@chakra-ui/react";
-import { Navigate, useSearchParams } from "react-router-dom";
+import { Navigate, useParams } from "react-router-dom";
 import { Kind, nip19 } from "nostr-tools";
 import { useUserMetadata } from "../../hooks/use-user-metadata";
 import useSingleEvent from "../../hooks/use-single-event";
@@ -26,7 +26,7 @@ export function NoteLinkHandler({ eventId, relays }: { eventId: string; relays?:
       </Alert>
     );
 
-  if (event.kind !== Kind.Text)
+  if (event.kind !== Kind.Text && event.kind !== 6)
     return (
       <Alert status="error">
         <AlertIcon />
@@ -38,10 +38,9 @@ export function NoteLinkHandler({ eventId, relays }: { eventId: string; relays?:
 }
 
 export default function NostrLinkView() {
-  const [searchParams] = useSearchParams();
-  const rawLink = searchParams.get("q");
+  const { link } = useParams() as { link?: string };
 
-  if (!rawLink)
+  if (!link)
     return (
       <Alert status="warning">
         <AlertIcon />
@@ -49,7 +48,7 @@ export default function NostrLinkView() {
       </Alert>
     );
 
-  const cleanLink = rawLink.replace(/(web\+)?nostr:/, "");
+  const cleanLink = link.replace(/(web\+)?nostr:/, "");
   const decoded = nip19.decode(cleanLink);
 
   if (decoded.type === "npub") return <NpubLinkHandler pubkey={decoded.data as string} />;

src/views/search/index.tsx

@@ -90,7 +90,11 @@ export default function SearchView() {
   // set the search when the form is submitted
   const handleSubmit = (e: React.SyntheticEvent) => {
     e.preventDefault();
-    setSearchParams({ q: search }, { replace: true });
+    if (search.startsWith("nostr:")) {
+      navigate({ pathname: "/l/" + search }, { replace: true });
+    } else {
+      setSearchParams({ q: search }, { replace: true });
+    }
   };
 
   // fetch search data from nostr.band
@@ -105,7 +109,7 @@ export default function SearchView() {
   const handleQrCodeData = (text: string) => {
     // if its a nostr: link pass it on the the link handler
     if (text.startsWith("nostr:")) {
-      navigate({ pathname: "/nostr-link", search: `q=${text}` }, { replace: true });
+      navigate({ pathname: "/l", search: `q=${text}` }, { replace: true });
     } else {
       setSearchParams({ q: text }, { replace: true });
     }

src/views/user/components/share-qr-button.tsx

@@ -12,6 +12,8 @@ import {
   Tab,
   TabPanels,
   TabPanel,
+  Input,
+  Flex,
 } from "@chakra-ui/react";
 import { useMemo } from "react";
 import { RelayMode } from "../../../classes/relay";
@@ -21,6 +23,7 @@ import { Bech32Prefix, normalizeToBech32 } from "../../../helpers/nip19";
 import useFallbackUserRelays from "../../../hooks/use-fallback-user-relays";
 import relayScoreboardService from "../../../services/relay-scoreboard";
 import { nip19 } from "nostr-tools";
+import { CopyIconButton } from "../../../components/copy-icon-button";
 
 function useUserShareLink(pubkey: string) {
   const userRelays = useFallbackUserRelays(pubkey);
@@ -50,16 +53,24 @@ export const QrIconButton = ({ pubkey, ...props }: { pubkey: string } & Omit<Ico
           <ModalBody p="2">
             <Tabs>
               <TabList>
-                <Tab>npub</Tab>
                 <Tab>nprofile</Tab>
+                <Tab>npub</Tab>
               </TabList>
 
               <TabPanels>
-                <TabPanel>
-                  <QrCodeSvg content={"nostr:" + npub} border={2} />
-                </TabPanel>
-                <TabPanel>
+                <TabPanel p="0" pt="2">
                   <QrCodeSvg content={"nostr:" + nprofile} border={2} />
+                  <Flex gap="2" mt="2">
+                    <Input readOnly value={"nostr:" + nprofile} />
+                    <CopyIconButton text={"nostr:" + nprofile} aria-label="copy nprofile" />
+                  </Flex>
+                </TabPanel>
+                <TabPanel p="0" pt="2">
+                  <QrCodeSvg content={"nostr:" + npub} border={2} />
+                  <Flex gap="2" mt="2">
+                    <Input readOnly value={"nostr:" + npub} />
+                    <CopyIconButton text={"nostr:" + npub} aria-label="copy npub" />
+                  </Flex>
                 </TabPanel>
               </TabPanels>
             </Tabs>