chore: add telemetry to buddy book and change text to use Book instea… (

#110)

examples/buddybook/package.json

@@ -50,6 +50,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.2",
+    "@waku/interfaces": "^0.0.29-5674b0e.0",
     "autoprefixer": "^10.4.20",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.56.0",

examples/buddybook/src/App.tsx

@@ -206,15 +206,15 @@ const Home: React.FC = () => (
     <div className="w-full max-w-sm mx-auto p-4 md:p-6 bg-card rounded-lg shadow-md">
       <Link to="create">
         <Button className="w-full mb-4">
-          Create New Chain
+          Create New Book
         </Button>
       </Link>
       <p className="text-sm md:text-base text-muted-foreground">
-        Click the button above to start creating a new chain.
+        Click the button above to start creating a new book.
       </p>
     </div>
     <p className="text-xs md:text-sm text-muted-foreground text-center">
-      Welcome to BuddyBook - Create and share your chains!
+      Welcome to BuddyBook - Create and share your books!
     </p>
   </div>
 )

examples/buddybook/src/components/Chain/Create/CreationPreview.tsx

@@ -13,6 +13,7 @@ import { useWaku } from '@waku/react';
 import { LightNode } from '@waku/sdk';
 import { createMessage, encoder } from '@/lib/waku';
 import { useWalletPrompt } from '@/hooks/useWalletPrompt';
+import { fromLightPush, Telemetry, TelemetryType, buildExtraData, toInt } from '@/lib/telemetry';
 
 interface FormData {
   title: string;
@@ -48,18 +49,49 @@ const ChainCreationForm: React.FC = () => {
       const blockUUID = uuidv4();
       setCreatedBlockUUID(blockUUID);
 
+      const timestamp = Date.now();
       const message = createMessage({
         chainUUID: formData.uuid,
         blockUUID: blockUUID,
         title: formData.title,
         description: formData.description,
         signedMessage: signature,
-        timestamp: Date.now(),
+        timestamp: timestamp,
         signatures: [{address, signature}],
         parentBlockUUID: null
       });
 
-      await node?.lightPush.send(encoder, message)
+      try {
+        const result = await node?.lightPush.send(encoder, message);
+        Telemetry.push(fromLightPush({
+          result,
+          wallet: address,
+          bookId: formData.uuid,
+          node,
+          encoder,
+          timestamp,
+        }));
+      } catch (e) {
+        Telemetry.push([{
+          type: TelemetryType.LIGHT_PUSH_FILTER,
+          protocol: "lightPush",
+          timestamp: toInt(timestamp),
+          createdAt: toInt(timestamp),
+          seenTimestamp: toInt(timestamp),
+          peerId: node.peerId.toString(),
+          contentTopic: encoder.contentTopic,
+          pubsubTopic: encoder.pubsubTopic,
+          ephemeral: encoder.ephemeral,
+          messageHash: uuidv4(),
+          errorMessage: (e as Error)?.message ?? "Error during LightPush",
+          extraData: buildExtraData({
+            wallet: address,
+            bookId: formData.uuid,
+          }),
+        }]);
+        throw e;
+      }
+
       setIsSuccess(true);
       setIsSigning(false);
     },
@@ -112,8 +144,8 @@ const ChainCreationForm: React.FC = () => {
   const handleSubmit = async () => {
     setIsSigning(true);
     setSendError(null);
-    const message = `Create Chain:
-                    Chain UUID: ${formData.uuid}
+    const message = `Create Book:
+                    Book UUID: ${formData.uuid}
                     Title: ${formData.title}
                     Description: ${formData.description}
                     Timestamp: ${new Date().getTime()}
@@ -132,12 +164,12 @@ const ChainCreationForm: React.FC = () => {
   return (
     <Card className="w-full max-w-2xl mx-auto">
       <CardHeader>
-        <CardTitle>Create a New Chain</CardTitle>
+        <CardTitle>Create a New Book</CardTitle>
       </CardHeader>
       <CardContent>
         <form onSubmit={handleCreateChain} className="space-y-6">
           <div className="space-y-2">
-            <Label htmlFor="title">Chain Title</Label>
+            <Label htmlFor="title">Book Title</Label>
             <Input
               type="text"
               id="title"
@@ -150,7 +182,7 @@ const ChainCreationForm: React.FC = () => {
             {errors.title && <p className="text-sm text-destructive">{errors.title}</p>}
           </div>
           <div className="space-y-2">
-            <Label htmlFor="description">Chain Description</Label>
+            <Label htmlFor="description">Book Description</Label>
             <Textarea
               id="description"
               name="description"
@@ -161,13 +193,13 @@ const ChainCreationForm: React.FC = () => {
             />
             {errors.description && <p className="text-sm text-destructive">{errors.description}</p>}
           </div>
-          <Button type="submit" className="w-full py-6 text-base sm:py-2 sm:text-sm">Create Chain</Button>
+          <Button type="submit" className="w-full py-6 text-base sm:py-2 sm:text-sm">Create Book</Button>
         </form>
       </CardContent>
       <Dialog open={showModal} onOpenChange={handleCloseModal}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>{isSuccess ? "Chain Created" : "Chain Preview"}</DialogTitle>
+            <DialogTitle>{isSuccess ? "Book Created" : "Book Preview"}</DialogTitle>
           </DialogHeader>
           {!isSuccess ? (
             <>

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

@@ -9,6 +9,7 @@ import { Loader2 } from "lucide-react";
 import QRCode from '@/components/QRCode';
 import { useWalletPrompt } from '@/hooks/useWalletPrompt';
 import { v4 as uuidv4 } from 'uuid';
+import { fromLightPush, Telemetry } from '@/lib/telemetry';
 
 interface SignChainProps {
   block: BlockPayload;
@@ -76,19 +77,31 @@ const SignChain: React.FC<SignChainProps> = ({ block, chainsData, onSuccess }) =
             return;
           }
 
+          const timestamp = Date.now();
           const newBlock: BlockPayload = {
             chainUUID: block.chainUUID,
             blockUUID: uuidv4(),
             title: block.title,
             description: block.description,
             signedMessage: signature,
-            timestamp: Date.now(),
+            timestamp,
             signatures: [{ address, signature }],
             parentBlockUUID: block.blockUUID
           };
 
           const wakuMessage = createMessage(newBlock);
-          const { failures, successes } = await node.lightPush.send(encoder, wakuMessage);
+          const result = await node.lightPush.send(encoder, wakuMessage);
+
+          Telemetry.push(fromLightPush({
+            result,
+            node,
+            encoder,
+            timestamp,
+            bookId: block.chainUUID,
+            wallet: address,
+          }));
+
+          const { failures, successes } = result;
 
           if (failures.length > 0 || successes.length === 0) {
             throw new Error('Failed to send message to Waku network');
@@ -168,16 +181,16 @@ const SignChain: React.FC<SignChainProps> = ({ block, chainsData, onSuccess }) =
   return (
     <>
       <Button onClick={() => setIsOpen(true)} disabled={alreadySigned}>
-        {alreadySigned ? 'Already Signed' : !address ? 'Connect Wallet' : 'Sign Chain'}
+        {alreadySigned ? 'Already Signed' : !address ? 'Connect Wallet' : 'Sign Book'}
       </Button>
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>Sign Chain</DialogTitle>
+            <DialogTitle>Sign Book</DialogTitle>
             <DialogDescription>
               {alreadySigned 
-                ? 'You have already signed this chain.'
-                : 'Review the block details and sign to add your signature to the chain.'}
+                ? 'You have already signed this book.'
+                : 'Review the block details and sign to add your signature to the book.'}
             </DialogDescription>
           </DialogHeader>
           <div className="flex flex-col space-y-4">

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

@@ -29,7 +29,7 @@ const SignSharedChain: React.FC<SignSharedChainProps> = ({ chainsData, onChainUp
       <Card className="w-full max-w-md mx-auto">
         <CardContent className="flex flex-col items-center justify-center py-8 space-y-4">
           <Loader2 className="h-8 w-8 animate-spin" />
-          <p className="text-sm text-muted-foreground">Looking for chain...</p>
+          <p className="text-sm text-muted-foreground">Looking for book...</p>
         </CardContent>
       </Card>
     );
@@ -39,11 +39,11 @@ const SignSharedChain: React.FC<SignSharedChainProps> = ({ chainsData, onChainUp
     return (
       <Card className="w-full max-w-md mx-auto">
         <CardHeader>
-          <CardTitle>Chain Not Found</CardTitle>
+          <CardTitle>Book Not Found</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="mb-4">The requested chain or block could not be found.</p>
-          <Button onClick={() => navigate('/view')}>View All Chains</Button>
+          <p className="mb-4">The requested book or block could not be found.</p>
+          <Button onClick={() => navigate('/view')}>View All Books</Button>
         </CardContent>
       </Card>
     );
@@ -52,7 +52,7 @@ const SignSharedChain: React.FC<SignSharedChainProps> = ({ chainsData, onChainUp
   return (
     <Card className="w-full max-w-2xl mx-auto">
       <CardHeader>
-        <CardTitle>Sign Shared Chain</CardTitle>
+        <CardTitle>Sign Shared Book</CardTitle>
       </CardHeader>
       <CardContent>
         <h2 className="text-xl font-semibold mb-2">{block.title}</h2>

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

@@ -66,9 +66,9 @@ const ChainList: React.FC<ChainListProps> = ({ chainsData, onChainUpdate, isLoad
                     </DialogTrigger>
                     <DialogContent className="flex flex-col gap-4">
                       <DialogHeader>
-                        <DialogTitle>Share Chain</DialogTitle>
+                        <DialogTitle>Share this Book</DialogTitle>
                         <DialogDescription>
-                          Share this chain with others to collect their signatures.
+                          Share this book with others to collect their signatures.
                         </DialogDescription>
                       </DialogHeader>
 
@@ -110,18 +110,18 @@ const ChainList: React.FC<ChainListProps> = ({ chainsData, onChainUpdate, isLoad
     <Card className="w-full max-w-4xl mx-auto">
       <CardHeader>
         <CardTitle>
-          Existing Chains
+          Existing Books
           {isLoading && (
             <span className="ml-2 inline-flex items-center text-muted-foreground text-sm font-normal">
               <Loader2 className="h-4 w-4 animate-spin mr-2" />
-              Loading more chains...
+              Loading more books...
             </span>
           )}
         </CardTitle>
       </CardHeader>
       <CardContent>
         {rootBlocks.length === 0 && !isLoading ? (
-          <p>No chains found.</p>
+          <p>No books found.</p>
         ) : (
           <ul className="space-y-4">
             {rootBlocks.map((block) => renderBlock(block, 0))}

examples/buddybook/src/components/ConnectionStatus.tsx

@@ -44,8 +44,8 @@ const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ filter, store }) =>
   return (
     <Card className="fixed bottom-4 left-4 right-4 md:static md:bottom-auto md:left-auto p-2 bg-background/80 backdrop-blur-sm border shadow-lg z-50 md:z-auto">
       <div className="flex flex-row justify-around md:justify-start md:gap-4">
-        <StatusIndicator status={filter} label="Filter" />
-        <StatusIndicator status={store} label="Store" />
+        <StatusIndicator status={filter} label="Connection" />
+        <StatusIndicator status={store} label="History" />
       </div>
     </Card>
   );

examples/buddybook/src/components/Header.tsx

@@ -86,14 +86,14 @@ const Header: React.FC<HeaderProps> = ({ wakuStatus }) => {
                 {!isWakuLoading && !wakuError && (
                   <>
                     <div className="flex items-center space-x-1">
-                      <span className="hidden md:inline text-muted-foreground">Filter:</span>
+                      <span className="hidden md:inline text-muted-foreground">Connection:</span>
                       <div className={`w-2 h-2 md:w-3 md:h-3 rounded-full ${getStatusColor(wakuStatus.filter)}`}></div>
                     </div>
                     <div className="flex items-center space-x-1">
-                      <span className="hidden md:inline text-muted-foreground">Store:</span>
+                      <span className="hidden md:inline text-muted-foreground">History:</span>
                       <div className={`w-2 h-2 md:w-3 md:h-3 rounded-full ${getStatusColor(wakuStatus.store)}`}></div>
                     </div>
-                    <div className="flex items-center space-x-1">
+                    <div className="flex items-center space-x-1 hidden">
                       <span className="hidden md:inline text-muted-foreground">Peers:</span>
                       {isWakuLoading ? (
                         <Loader2 className="h-4 w-4 animate-spin" />