Merge pull request #291 from xmtp/rygine/upgrade-js-sdk

Upgrade JS SDK, refactor `useConsent` hook

.changeset/beige-taxis-cry.md

@@ -0,0 +1,5 @@
+---
+"@xmtp/react-sdk": major
+---
+
+Upgrade JS SDK, refactor `useConsent` hook

apps/react/package.json

@@ -26,7 +26,7 @@
     "@xmtp/content-type-reply": "^1.1.11",
     "@xmtp/content-type-text": "^1.0.0",
     "@xmtp/react-sdk": "workspace:*",
-    "@xmtp/xmtp-js": "^12.1.0",
+    "@xmtp/xmtp-js": "^13.0.0",
     "date-fns": "^3.6.0",
     "react": "^18.3.1",
     "react-18-blockies": "^1.0.6",

dev/down

@@ -1,4 +1,4 @@
 #!/bin/bash
 set -e
 
-docker-compose -p xmtp-js -f dev/docker-compose.yml down
+docker compose -p xmtp-js -f dev/docker-compose.yml down

dev/up

@@ -6,4 +6,4 @@ if ! which docker &>/dev/null; then
     exit 1
 fi
 
-docker-compose -p xmtp-js -f dev/docker-compose.yml up -d
+docker compose -p xmtp-js -f dev/docker-compose.yml up -d

packages/react-sdk/package.json

@@ -95,7 +95,7 @@
     "@xmtp/content-type-reply": "^1.1.11",
     "@xmtp/content-type-text": "^1.0.0",
     "@xmtp/tsconfig": "workspace:*",
-    "@xmtp/xmtp-js": "^12.1.0",
+    "@xmtp/xmtp-js": "^13.0.0",
     "eslint": "^8.57.0",
     "eslint-config-xmtp-web": "workspace:*",
     "fake-indexeddb": "^6.0.0",

packages/react-sdk/src/hooks/useConsent.test.tsx

@@ -91,13 +91,12 @@ describe("useConsent", () => {
 
     await act(async () => {
       const list = await result.current.loadConsentList();
-      expect(list).toEqual([]);
+      expect(list.size).toEqual(0);
       await result.current.allow([testWallet2.account.address]);
       const list2 = await result.current.loadConsentList();
-      expect(list2.length).toEqual(1);
-      expect(list2[0].entryType).toEqual("address");
-      expect(list2[0].permissionType).toEqual("allowed");
-      expect(list2[0].value).toEqual(testWallet2.account.address);
+      expect(list2.size).toEqual(1);
+      const entry = list2.get(`address-${testWallet2.account.address}`);
+      expect(entry).toEqual("allowed");
       const entries = await getCachedConsentEntries(
         testWallet1.account.address,
         db,
@@ -118,13 +117,12 @@ describe("useConsent", () => {
 
     await act(async () => {
       const list = await result.current.refreshConsentList();
-      expect(list).toEqual([]);
+      expect(list.size).toEqual(0);
       await result.current.allow([testWallet4.account.address]);
       const list2 = await result.current.refreshConsentList();
-      expect(list2.length).toEqual(1);
-      expect(list2[0].entryType).toEqual("address");
-      expect(list2[0].permissionType).toEqual("allowed");
-      expect(list2[0].value).toEqual(testWallet4.account.address);
+      expect(list2.size).toEqual(1);
+      const entry = list2.get(`address-${testWallet4.account.address}`);
+      expect(entry).toEqual("allowed");
       const entries = await getCachedConsentEntries(
         testWallet3.account.address,
         db,

packages/react-sdk/src/hooks/useConsent.ts

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import type { ConsentState } from "@xmtp/xmtp-js";
 import { useClient } from "@/hooks/useClient";
 import { useDb } from "@/hooks/useDb";
 import {
@@ -113,13 +114,19 @@ export const useConsent = () => {
       }
       const db = await getDbInstance();
       const newEntries = await client.contacts.loadConsentList(startTime);
-      if (newEntries.length > 0) {
+      if (newEntries.size > 0) {
+        const addresses = Array.from(newEntries.entries())
+          .filter(([entry]) => entry.startsWith("address-"))
+          .map(
+            ([entry, state]) =>
+              [entry.split("-")[1], state] as [string, ConsentState],
+          );
         // update DB
         await bulkPutConsentState(
-          newEntries.map((entry) => ({
-            value: entry.value,
+          addresses.map(([address, state]) => ({
+            value: address,
             type: "address",
-            state: entry.permissionType,
+            state,
             walletAddress: client.address,
           })),
           db,
@@ -138,13 +145,19 @@ export const useConsent = () => {
     const db = await getDbInstance();
     await db.table("consent").clear();
     const newEntries = await client?.contacts.refreshConsentList();
-    if (newEntries.length > 0) {
+    if (newEntries.size > 0) {
+      const addresses = Array.from(newEntries.entries())
+        .filter(([entry]) => entry.startsWith("address-"))
+        .map(
+          ([entry, state]) =>
+            [entry.split("-")[1], state] as [string, ConsentState],
+        );
       // update DB
       await bulkPutConsentState(
-        newEntries.map((entry) => ({
-          value: entry.value,
+        addresses.map(([address, state]) => ({
+          value: address,
           type: "address",
-          state: entry.permissionType,
+          state,
           walletAddress: client.address,
         })),
         db,

yarn.lock

@@ -5900,7 +5900,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@xmtp/proto@npm:3.62.1, @xmtp/proto@npm:^3.61.1, @xmtp/proto@npm:^3.62.1":
+"@xmtp/proto@npm:3.62.1, @xmtp/proto@npm:^3.61.1":
   version: 3.62.1
   resolution: "@xmtp/proto@npm:3.62.1"
   dependencies:
@@ -5912,6 +5912,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xmtp/proto@npm:^3.62.1, @xmtp/proto@npm:^3.68.0":
+  version: 3.68.0
+  resolution: "@xmtp/proto@npm:3.68.0"
+  dependencies:
+    long: "npm:^5.2.0"
+    protobufjs: "npm:^7.0.0"
+    rxjs: "npm:^7.8.0"
+    undici: "npm:^5.8.1"
+  checksum: 10/2cadf9d212ac01dc6a1d3a83e59ca559debff65ee83c7381e29e1a5e9dc2f0caa021a4c6df696957d77da8b5c1133fe02cbc8a4c3c7c4d2e45993366e309da63
+  languageName: node
+  linkType: hard
+
 "@xmtp/react-app@workspace:*, @xmtp/react-app@workspace:apps/react":
   version: 0.0.0-use.local
   resolution: "@xmtp/react-app@workspace:apps/react"
@@ -5927,7 +5939,7 @@ __metadata:
     "@xmtp/content-type-text": "npm:^1.0.0"
     "@xmtp/react-sdk": "workspace:*"
     "@xmtp/tsconfig": "workspace:*"
-    "@xmtp/xmtp-js": "npm:^12.1.0"
+    "@xmtp/xmtp-js": "npm:^13.0.0"
     date-fns: "npm:^3.6.0"
     eslint: "npm:^8.57.0"
     eslint-config-xmtp-web: "workspace:*"
@@ -5962,7 +5974,7 @@ __metadata:
     "@xmtp/content-type-reply": "npm:^1.1.11"
     "@xmtp/content-type-text": "npm:^1.0.0"
     "@xmtp/tsconfig": "workspace:*"
-    "@xmtp/xmtp-js": "npm:^12.1.0"
+    "@xmtp/xmtp-js": "npm:^13.0.0"
     async-mutex: "npm:^0.5.0"
     date-fns: "npm:^3.6.0"
     dexie: "npm:^4.0.8"
@@ -6094,7 +6106,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@xmtp/xmtp-js@npm:^12.0.0, @xmtp/xmtp-js@npm:^12.1.0":
+"@xmtp/xmtp-js@npm:^12.0.0":
   version: 12.1.0
   resolution: "@xmtp/xmtp-js@npm:12.1.0"
   dependencies:
@@ -6112,6 +6124,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xmtp/xmtp-js@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "@xmtp/xmtp-js@npm:13.0.0"
+  dependencies:
+    "@noble/secp256k1": "npm:1.7.1"
+    "@xmtp/consent-proof-signature": "npm:^0.1.3"
+    "@xmtp/content-type-primitives": "npm:^1.0.1"
+    "@xmtp/content-type-text": "npm:^1.0.0"
+    "@xmtp/proto": "npm:^3.68.0"
+    "@xmtp/user-preferences-bindings-wasm": "npm:^0.3.6"
+    async-mutex: "npm:^0.5.0"
+    elliptic: "npm:^6.5.7"
+    long: "npm:^5.2.3"
+    viem: "npm:2.7.15"
+  checksum: 10/6e79d661232b0a4b5f8ba84872014346f33b77b1a017c5fed52c6ee2a37e77dd89e9c48851d5dbb83db29132280498130990846c6b6a8cc84ef359da5ec683f0
+  languageName: node
+  linkType: hard
+
 "@xtuc/ieee754@npm:^1.2.0":
   version: 1.2.0
   resolution: "@xtuc/ieee754@npm:1.2.0"
@@ -8285,9 +8315,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"elliptic@npm:^6.5.5":
-  version: 6.5.6
-  resolution: "elliptic@npm:6.5.6"
+"elliptic@npm:^6.5.5, elliptic@npm:^6.5.7":
+  version: 6.5.7
+  resolution: "elliptic@npm:6.5.7"
   dependencies:
     bn.js: "npm:^4.11.9"
     brorand: "npm:^1.1.0"
@@ -8296,7 +8326,7 @@ __metadata:
     inherits: "npm:^2.0.4"
     minimalistic-assert: "npm:^1.0.1"
     minimalistic-crypto-utils: "npm:^1.0.1"
-  checksum: 10/09377ec924fdb37775d63e5d7e5ebb2845842e6f08880b68265b1108863e968970c4a4e1c43df622078c8262417deec9a04aeb9d34e8d09a9693e19b5454e1df
+  checksum: 10/fbad1fad0a5cc07df83f80cc1f7a784247ef59075194d3e340eaeb2f4dd594825ee24c7e9b0cf279c9f1982efe610503bb3139737926428c4821d4fca1bcf348
   languageName: node
   linkType: hard