chore: handle sharable links

examples/buddybook/src/App.tsx

@@ -41,13 +41,8 @@ function App() {
 
   useEffect(() => {
     if (isWakuLoading || !node || node.libp2p.getConnections().length === 0 || chainsData.length > 0 || isListening)  return;
-
-    setTimeout(() => {
       setIsListening(true);
       startMessageListening();
-    }, 3000);
-    
-    
   }, [node, isWakuLoading, wakuStatus])
 
   const handleTelemetryOptIn = (optIn: boolean) => {

examples/buddybook/src/components/Chain/SignChain.tsx

@@ -124,7 +124,7 @@ const SignChain: React.FC<SignChainProps> = ({ block, chainsData, onSuccess }) =
         {alreadySigned ? 'Already Signed' : 'Sign Chain'}
       </Button>
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent>
+        <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>Sign Chain</DialogTitle>
             <DialogDescription>
@@ -133,7 +133,14 @@ const SignChain: React.FC<SignChainProps> = ({ block, chainsData, onSuccess }) =
                 : 'Review the block details and sign to add your signature to the chain.'}
             </DialogDescription>
           </DialogHeader>
-          <QRCode data={block} />
+          <div className="flex flex-col space-y-4">
+            <div className="space-y-2">
+              <h4 className="font-medium">Block Details</h4>
+              <p className="text-sm text-muted-foreground">{block.title}</p>
+              <p className="text-sm text-muted-foreground">{block.description}</p>
+            </div>
+            <QRCode data={block} />
+          </div>
           {error && <p className="text-sm text-destructive">{error}</p>}
           <DialogFooter>
             <Button variant="secondary" onClick={() => setIsOpen(false)}>Cancel</Button>

examples/buddybook/src/components/Chain/View/ChainList.tsx

@@ -4,7 +4,7 @@ import { type BlockPayload } from '@/lib/waku';
 import SignChain from '@/components/Chain/SignChain';
 import { useEnsName } from 'wagmi';
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from "@/components/ui/dialog";
 import QRCode from '@/components/QRCode';
 import { Loader2 } from "lucide-react";
 
@@ -23,7 +23,7 @@ const ChainList: React.FC<ChainListProps> = ({ chainsData, onChainUpdate, isLoad
     const childBlocks = chainsData.filter(b => b.parentBlockUUID === block.blockUUID);
     const totalSignatures = block.signatures.length + childBlocks.reduce((acc, child) => acc + child.signatures.length, 0);
 
-    const shareUrl = `${window.location.origin}/sign/${block.chainUUID ?? block.blockUUID}/${block.blockUUID}`;
+    const shareUrl = `${window.location.origin}/sign/${block.chainUUID}/${block.blockUUID}`;
 
     return (
       <li key={`${block.blockUUID}-${depth}`} className="mb-4">
@@ -62,17 +62,11 @@ const ChainList: React.FC<ChainListProps> = ({ chainsData, onChainUpdate, isLoad
                     <DialogContent className="sm:max-w-md">
                       <DialogHeader>
                         <DialogTitle>Share this Chain</DialogTitle>
+                        <DialogDescription>
+                          Share this chain with others to collect their signatures.
+                        </DialogDescription>
                       </DialogHeader>
-                      <div className="flex flex-col items-center space-y-4">
-                        <QRCode text={shareUrl} width={200} height={200} />
-                        <p className="text-sm text-center break-all">{shareUrl}</p>
-                        <Button
-                          onClick={() => navigator.clipboard.writeText(shareUrl)}
-                          variant="outline"
-                        >
-                          Copy Link
-                        </Button>
-                      </div>
+                      <QRCode text={shareUrl} />
                     </DialogContent>
                   </Dialog>
                 </div>

examples/buddybook/src/components/QRCode.tsx

@@ -1,16 +1,43 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
+import { Button } from "@/components/ui/button";
+import { Check, Copy } from "lucide-react";
 
 interface QRCodeProps {
-  text: string;
+  data?: any;
+  text?: string;
   width?: number;
   height?: number;
 }
 
-const QRCode: React.FC<QRCodeProps> = ({ text, width = 256, height = 256 }) => {
+const QRCode: React.FC<QRCodeProps> = ({ data, text, width = 256, height = 256 }) => {
+  const [copied, setCopied] = useState(false);
+  const shareUrl = text || (data ? `${window.location.origin}/sign/${data.chainUUID}/${data.blockUUID}` : '');
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(shareUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
     <div className="flex flex-col items-center space-y-4">
-      <QRCodeSVG value={text} size={Math.min(width, height)} />
+      <QRCodeSVG value={shareUrl} size={Math.min(width, height)} />
+      <div className="flex items-center space-x-2">
+        <input 
+          type="text" 
+          value={shareUrl} 
+          readOnly 
+          className="flex-1 px-3 py-2 text-sm border rounded-md bg-muted"
+        />
+        <Button 
+          variant="outline" 
+          size="icon"
+          onClick={handleCopy}
+        >
+          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+        </Button>
+      </div>
     </div>
   );
 };