Merge pull request #713 from xmtp/rygine/updates

Update Browser SDK

.changeset/calm-guests-sin.md

@@ -0,0 +1,5 @@
+---
+"@xmtp/browser-sdk": patch
+---
+
+Update Browser SDK

.gitignore

@@ -16,6 +16,7 @@ yarn-error.log*
 
 # local env files
 .env*
+!.env.example
 
 # turbo
 .turbo

examples/react-vite-browser-sdk/.env.example

@@ -0,0 +1,2 @@
+VITE_PROJECT_ID= # Your Reown (https://reown.com/) project ID
+VITE_ENCRYPTION_KEY= # 32 byte hex string

examples/react-vite-browser-sdk/src/createClient.ts

@@ -16,8 +16,13 @@ export const getSignature = async (client: Client, wallet: Wallet) => {
 };
 
 export const createClient = async (walletKey: string) => {
+  const encryptionKeyHex = import.meta.env.VITE_ENCRYPTION_KEY;
+  if (!encryptionKeyHex) {
+    throw new Error("VITE_ENCRYPTION_KEY must be set in the environment");
+  }
+  const encryptionBytes = toBytes(encryptionKeyHex);
   const wallet = createWallet(walletKey);
-  const client = await Client.create(wallet.account.address, {
+  const client = await Client.create(wallet.account.address, encryptionBytes, {
     env: "local",
   });
   const isRegistered = await client.isRegistered();

examples/react-vite-browser-sdk/src/globals.d.ts

@@ -1,6 +1,7 @@
 interface ImportMeta {
   env: {
-    VITE_PROJECT_ID: string;
+    VITE_PROJECT_ID?: string;
+    VITE_ENCRYPTION_KEY?: string;
   };
 }
 

examples/react-vite-browser-sdk/src/main.tsx

@@ -9,9 +9,14 @@ import { WagmiProvider } from "wagmi";
 import { App } from "./App";
 import "./index.css";
 
+const projectId = import.meta.env.VITE_PROJECT_ID;
+if (!projectId) {
+  throw new Error("VITE_PROJECT_ID must be set in the environment");
+}
+
 export const config = getDefaultConfig({
   appName: "XMTP V3 Browser SDK Example",
-  projectId: import.meta.env.VITE_PROJECT_ID,
+  projectId,
   chains: [mainnet],
   transports: {
     [mainnet.id]: http(),

packages/frames-validator/package.json

@@ -38,6 +38,7 @@
   "devDependencies": {
     "@open-frames/types": "^0.1.1",
     "@rollup/plugin-typescript": "^12.1.1",
+    "@types/bl": "^5.1.4",
     "@xmtp/frames-client": "^0.5.4",
     "@xmtp/xmtp-js": "^12.1.0",
     "ethers": "^6.10.0",

packages/frames-validator/tsconfig.json

@@ -1,4 +1,5 @@
 {
   "extends": "tsconfig/base.json",
-  "includes": ["src", "rollup.config.js", "vitest.config.ts", "vitest.setup.ts"]
+  "include": ["src", "rollup.config.js", "vitest.config.ts"],
+  "exclude": ["dist", "node_modules"]
 }

sdks/browser-sdk/package.json

@@ -65,7 +65,7 @@
     "@xmtp/content-type-primitives": "^1.0.1",
     "@xmtp/content-type-text": "^1.0.0",
     "@xmtp/proto": "^3.70.0",
-    "@xmtp/wasm-bindings": "^0.0.3",
+    "@xmtp/wasm-bindings": "^0.0.4",
     "uuid": "^10.0.0"
   },
   "devDependencies": {

sdks/browser-sdk/rollup.config.js

@@ -21,6 +21,7 @@ const external = [
   "@xmtp/content-type-text",
   "@xmtp/wasm-bindings",
   "@xmtp/content-type-primitives",
+  "@xmtp/content-type-group-updated",
   "@xmtp/proto",
   "uuid",
 ];

sdks/browser-sdk/src/Client.ts

@@ -37,13 +37,23 @@ export class Client extends ClientWorkerClass {
 
   #codecs: Map<string, ContentCodec>;
 
-  constructor(address: string, options?: ClientOptions) {
+  #encryptionKey: Uint8Array;
+
+  constructor(
+    address: string,
+    encryptionKey: Uint8Array,
+    options?: ClientOptions,
+  ) {
     const worker = new Worker(new URL("./workers/client", import.meta.url), {
       type: "module",
     });
-    super(worker, options?.enableLogging ?? false);
+    super(
+      worker,
+      options?.loggingLevel !== undefined && options.loggingLevel !== "off",
+    );
     this.address = address;
     this.options = options;
+    this.#encryptionKey = encryptionKey;
     this.#conversations = new Conversations(this);
     const codecs = [
       new GroupUpdatedCodec(),
@@ -58,15 +68,20 @@ export class Client extends ClientWorkerClass {
   async init() {
     const result = await this.sendMessage("init", {
       address: this.address,
+      encryptionKey: this.#encryptionKey,
       options: this.options,
     });
     this.#inboxId = result.inboxId;
     this.#installationId = result.installationId;
     this.#isReady = true;
   }
 
-  static async create(address: string, options?: ClientOptions) {
-    const client = new Client(address, options);
+  static async create(
+    address: string,
+    encryptionKey: Uint8Array,
+    options?: ClientOptions,
+  ) {
+    const client = new Client(address, encryptionKey, options);
     await client.init();
     return client;
   }
@@ -103,6 +118,20 @@ export class Client extends ClientWorkerClass {
     return this.sendMessage("addSignature", { type, bytes });
   }
 
+  async addScwSignature(
+    type: SignatureRequestType,
+    bytes: Uint8Array,
+    chainId: bigint,
+    blockNumber?: bigint,
+  ) {
+    return this.sendMessage("addScwSignature", {
+      type,
+      bytes,
+      chainId,
+      blockNumber,
+    });
+  }
+
   async applySignatures() {
     return this.sendMessage("applySignatures", undefined);
   }

sdks/browser-sdk/src/WorkerClient.ts

@@ -23,9 +23,10 @@ export class WorkerClient {
 
   static async create(
     accountAddress: string,
+    encryptionKey: Uint8Array,
     options?: Omit<ClientOptions, "codecs">,
   ) {
-    const client = await createClient(accountAddress, options);
+    const client = await createClient(accountAddress, encryptionKey, options);
     return new WorkerClient(client);
   }
 
@@ -84,6 +85,15 @@ export class WorkerClient {
     return this.#client.addSignature(type, bytes);
   }
 
+  async addScwSignature(
+    type: SignatureRequestType,
+    bytes: Uint8Array,
+    chainId: bigint,
+    blockNumber?: bigint,
+  ) {
+    return this.#client.addScwSignature(type, bytes, chainId, blockNumber);
+  }
+
   async applySignatures() {
     return this.#client.applySignatureRequests();
   }

sdks/browser-sdk/src/WorkerConversation.ts

@@ -2,12 +2,12 @@ import type {
   ConsentState,
   Conversation,
   EncodedContent,
+  GroupMember,
 } from "@xmtp/wasm-bindings";
 import {
   fromSafeListMessagesOptions,
   toSafeGroupMember,
   type SafeListMessagesOptions,
-  type WasmGroupMember,
 } from "@/utils/conversions";
 import type { WorkerClient } from "@/WorkerClient";
 
@@ -73,13 +73,13 @@ export class WorkerConversation {
   get metadata() {
     const metadata = this.#group.groupMetadata();
     return {
-      creatorInboxId: metadata.creator_inbox_id(),
-      conversationType: metadata.conversation_type(),
+      creatorInboxId: metadata.creatorInboxId(),
+      conversationType: metadata.conversationType(),
     };
   }
 
   async members() {
-    const members = (await this.#group.listMembers()) as WasmGroupMember[];
+    const members = (await this.#group.listMembers()) as GroupMember[];
     return members.map((member) => toSafeGroupMember(member));
   }
 

sdks/browser-sdk/src/index.ts

@@ -1,9 +1,36 @@
 export { Client } from "./Client";
 export { Conversations } from "./Conversations";
 export { Conversation } from "./Conversation";
-export * from "./DecodedMessage";
+export type { MessageDeliveryStatus, MessageKind } from "./DecodedMessage";
+export { DecodedMessage } from "./DecodedMessage";
 export { Utils } from "./Utils";
 export { ApiUrls } from "./constants";
 export type * from "./types";
 export * from "./utils/conversions";
-export type * from "@xmtp/wasm-bindings";
+export {
+  ConsentEntityType,
+  ConsentState,
+  ConversationType,
+  CreateGroupOptions,
+  DeliveryStatus,
+  GroupMembershipState,
+  EncodedContent,
+  GroupMember,
+  GroupMetadata,
+  GroupPermissions,
+  GroupMessageKind,
+  GroupPermissionsOptions,
+  InboxState,
+  Installation,
+  ListConversationsOptions,
+  ListMessagesOptions,
+  Message,
+  PermissionLevel,
+  PermissionPolicy,
+  PermissionPolicySet,
+  PermissionUpdateType,
+  SignatureRequestType,
+  SortDirection,
+  Consent,
+  ContentTypeId,
+} from "@xmtp/wasm-bindings";

sdks/browser-sdk/src/types/clientEvents.ts

@@ -38,6 +38,7 @@ export type ClientEvents =
       };
       data: {
         address: string;
+        encryptionKey: Uint8Array;
         options?: ClientOptions;
       };
     }
@@ -78,6 +79,17 @@ export type ClientEvents =
         bytes: Uint8Array;
       };
     }
+  | {
+      action: "addScwSignature";
+      id: string;
+      result: undefined;
+      data: {
+        type: SignatureRequestType;
+        bytes: Uint8Array;
+        chainId: bigint;
+        blockNumber?: bigint;
+      };
+    }
   | {
       action: "applySignatures";
       id: string;

sdks/browser-sdk/src/types/options.ts

@@ -18,16 +18,6 @@ export type NetworkOptions = {
   apiUrl?: string;
 };
 
-/**
- * Encryption options
- */
-export type EncryptionOptions = {
-  /**
-   * Encryption key to use for the local DB
-   */
-  encryptionKey?: Uint8Array;
-};
-
 /**
  * Storage options
  */
@@ -47,13 +37,20 @@ export type ContentOptions = {
 
 export type OtherOptions = {
   /**
-   * Enable logging of events between the client and worker
+   * Enable structured JSON logging
+   */
+  structuredLogging?: boolean;
+  /**
+   * Enable performance metrics
+   */
+  performanceLogging?: boolean;
+  /**
+   * Logging level
    */
-  enableLogging?: boolean;
+  loggingLevel?: "off" | "error" | "warn" | "info" | "debug" | "trace";
 };
 
 export type ClientOptions = NetworkOptions &
-  EncryptionOptions &
   StorageOptions &
   ContentOptions &
   OtherOptions;

sdks/browser-sdk/src/utils/conversions.ts

@@ -341,36 +341,12 @@ export type SafeGroupMember = {
   permissionLevel: PermissionLevel;
 };
 
-export class WasmGroupMember {
-  account_addresses: string[];
-  consent_state: ConsentState;
-  inbox_id: string;
-  installation_ids: string[];
-  permission_level: PermissionLevel;
-
-  constructor(
-    inbox_id: string,
-    account_addresses: string[],
-    installation_ids: string[],
-    permission_level: PermissionLevel,
-    consent_state: ConsentState,
-  ) {
-    this.inbox_id = inbox_id;
-    this.account_addresses = account_addresses;
-    this.installation_ids = installation_ids;
-    this.permission_level = permission_level;
-    this.consent_state = consent_state;
-  }
-}
-
-export const toSafeGroupMember = (
-  member: WasmGroupMember,
-): SafeGroupMember => ({
-  accountAddresses: member.account_addresses,
-  consentState: member.consent_state,
-  inboxId: member.inbox_id,
-  installationIds: member.installation_ids,
-  permissionLevel: member.permission_level,
+export const toSafeGroupMember = (member: GroupMember): SafeGroupMember => ({
+  accountAddresses: member.accountAddresses,
+  consentState: member.consentState,
+  inboxId: member.inboxId,
+  installationIds: member.installationIds,
+  permissionLevel: member.permissionLevel,
 });
 
 export const fromSafeGroupMember = (member: SafeGroupMember): GroupMember =>