Updates

package.json

@@ -7,14 +7,16 @@
     "dev": "vite",
     "build": "tsc && vite build --base=/xmtp-react-playground/",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
   },
   "homepage": "https://xmtp.github.io/xmtp-react-playground",
   "dependencies": {
     "@animxyz/core": "^0.6.6",
     "@animxyz/react": "^0.6.7",
     "@heroicons/react": "^2.0.18",
     "@rainbow-me/rainbowkit": "^0.10.0",
+    "@xmtp/content-type-reaction": "^1.0.0",
     "@xmtp/content-type-remote-attachment": "^1.0.7",
     "@xmtp/content-type-reply": "^1.0.0",
     "@xmtp/xmtp-js": "^9.4.0-beta.1",

src/contexts/ClientContext.tsx

@@ -6,7 +6,7 @@ import {
   RemoteAttachmentCodec,
 } from "@xmtp/content-type-remote-attachment";
 import { ReplyCodec } from "@xmtp/content-type-reply";
-import { ReactionCodec } from "../model/reactions";
+import { ReactionCodec } from "@xmtp/content-type-reaction";
 
 type ClientContextValue = {
   client: Client | null;

src/hooks/useClient.tsx

@@ -6,7 +6,7 @@ import {
   RemoteAttachmentCodec,
 } from "@xmtp/content-type-remote-attachment";
 import { ReplyCodec } from "@xmtp/content-type-reply";
-import { ReactionCodec } from "../model/reactions";
+import { ReactionCodec } from "@xmtp/content-type-reaction";
 
 export function useClient() {
   return useContext(ClientContext).client;

src/hooks/useMessages.tsx

@@ -10,7 +10,7 @@ export function useMessages(conversation: Conversation): Message[] | undefined {
   useEffect(() => {
     if (!client) return;
     loadMessages(conversation, client);
-  });
+  }, [client, conversation]);
 
   return useLiveQuery(async () => {
     return await db.messages

src/model/db.ts

@@ -73,6 +73,7 @@ class DB extends Dexie {
         `,
       messages: `
         ++id,
+        [conversationTopic+inReplyToID],
         inReplyToID,
         conversationTopic,
         xmtpID,
@@ -91,6 +92,7 @@ class DB extends Dexie {
       `,
       reactions: `
         ++id,
+        [messageXMTPID+reactor+name],
         messageXMTPID,
         reactor,
         name

src/model/message-processor.ts

@@ -8,7 +8,8 @@ import {
   RemoteAttachmentCodec,
 } from "@xmtp/content-type-remote-attachment";
 import { ContentTypeReply, Reply } from "@xmtp/content-type-reply";
-import { ContentTypeReaction, Reaction, persistReaction } from "./reactions";
+import { deleteReaction, persistReaction } from "./reactions";
+import { ContentTypeReaction, Reaction } from "@xmtp/content-type-reaction";
 
 export async function process(
   client: XMTP.Client,
@@ -17,6 +18,7 @@ export async function process(
     id: number;
     content: any;
     contentType: XMTP.ContentTypeId;
+    senderAddress: string;
   }
 ) {
   const { content, contentType, id: messageID } = message;

src/model/messages.ts

@@ -40,6 +40,7 @@ export async function sendMessage(
     id: message.id,
     content,
     contentType,
+    senderAddress: message.senderAddress,
   });
 
   // process reply content as message
@@ -49,6 +50,7 @@ export async function sendMessage(
       id: message.id,
       content: replyContent.content,
       contentType: replyContent.contentType,
+      senderAddress: message.senderAddress,
     });
   }
 
@@ -127,6 +129,7 @@ export async function saveMessage(
       id: message.id,
       content: decodedMessage.content,
       contentType: decodedMessage.contentType,
+      senderAddress: message.senderAddress,
     });
 
     // process reply content as message
@@ -136,6 +139,7 @@ export async function saveMessage(
         id: message.id,
         content: replyContent.content,
         contentType: replyContent.contentType,
+        senderAddress: message.senderAddress,
       });
     }
 

src/model/reactions.ts

@@ -1,85 +1,20 @@
-// xmtp.org/text
-//
-
-import {
-  Client,
-  ContentCodec,
-  ContentTypeId,
-  EncodedContent,
-} from "@xmtp/xmtp-js";
+import { Client } from "@xmtp/xmtp-js";
 import db, { Message, MessageReaction } from "./db";
 import { findConversation, getXMTPConversation } from "./conversations";
 import { Mutex } from "async-mutex";
+import { ContentTypeReaction, Reaction } from "@xmtp/content-type-reaction";
 
 const reactionMutex = new Mutex();
 
-// This content type is used for a plain text content represented by a simple string
-export const ContentTypeReaction = new ContentTypeId({
-  authorityId: "xmtp.org",
-  typeId: "reaction",
-  versionMajor: 1,
-  versionMinor: 0,
-});
-
-export type Reaction = {
-  /**
-   * The message ID for the message that is being reacted to
-   */
-  reference: string;
-  /**
-   * The action of the reaction
-   */
-  action: "added" | "removed";
-  /**
-   * The content of the reaction
-   */
-  content: string;
-};
-
-export type ReactionParameters = Pick<Reaction, "action" | "reference"> & {
-  encoding: "UTF-8";
-};
-
-export class ReactionCodec implements ContentCodec<Reaction> {
-  get contentType(): ContentTypeId {
-    return ContentTypeReaction;
-  }
-
-  encode(content: Reaction): EncodedContent {
-    return {
-      type: ContentTypeReaction,
-      parameters: {
-        encoding: "UTF-8",
-        action: content.action,
-        reference: content.reference,
-      },
-      content: new TextEncoder().encode(content.content),
-    };
-  }
-
-  decode(content: EncodedContent): Reaction {
-    const encoding = content.parameters.encoding;
-    if (encoding && encoding !== "UTF-8") {
-      throw new Error(`unrecognized encoding ${encoding}`);
-    }
-
-    if (!["added", "removed"].includes(content.parameters.action)) {
-      throw new Error("invalid action");
-    }
-
-    return {
-      action: content.parameters.action as "added" | "removed",
-      reference: content.parameters.reference,
-      content: new TextDecoder().decode(content.content),
-    };
-  }
-}
-
 export async function addReaction(
   reactionName: string,
   message: Message,
-  client: Client
+  client: Client | null
 ) {
+  if (!client) {
+    return;
+  }
+
   const conversation = await findConversation(message.conversationTopic);
   if (!conversation) {
     return;
@@ -106,8 +41,12 @@ export async function addReaction(
 export async function removeReaction(
   reactionName: string,
   message: Message,
-  client: Client
+  client: Client | null
 ) {
+  if (!client) {
+    return;
+  }
+
   const conversation = await findConversation(message.conversationTopic);
 
   if (!conversation) {

src/views/ConversationView.tsx

@@ -8,8 +8,8 @@ import Header from "../components/Header";
 import { Cog6ToothIcon } from "@heroicons/react/24/solid";
 import { useLiveConversation } from "../hooks/useLiveConversation";
 import ConversationSettingsView from "./ConversationSettingsView";
-import { ContentTypeReaction } from "../model/reactions";
 import { ContentTypeId } from "@xmtp/xmtp-js";
+import { ContentTypeReaction } from "@xmtp/content-type-reaction";
 
 const appearsInMessageList = (message: Message): boolean => {
   if (ContentTypeReaction.sameAs(message.contentType as ContentTypeId)) {

src/views/MessageRepliesView.tsx

@@ -19,7 +19,7 @@ export default function MessageRepliesView({
       {replies.length > 0 && (
         <div className="mb-2">
           {replies.map((message) => (
-            <div className="flex text-xs space-x-1">
+            <div className="flex text-xs space-x-1" key={message.id}>
               <span>{shortAddress(message.senderAddress)}:</span>
               <MessageContent message={message} />
             </div>