Merge pull request #101 from xmtp/rygine/js-sdk-v11

Upgrade to JS SDK v11

.changeset/brave-parrots-camp.md

@@ -0,0 +1,9 @@
+---
+"@xmtp/react-sdk": minor
+---
+
+* Upgrade JS SDK to v11
+* Upgrade all standards-track content types
+* Replace `ethers` with `viem`
+* Update read receipt processor for updated content type
+* Update client signer type

examples/react-quickstart/package.json

@@ -17,14 +17,14 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@rainbow-me/rainbowkit": "^0.12.16",
-    "@xmtp/content-type-remote-attachment": "^1.0.7",
+    "@rainbow-me/rainbowkit": "^1.0.11",
+    "@xmtp/content-type-remote-attachment": "^1.1.2",
     "@xmtp/react-components": "workspace:*",
     "@xmtp/react-sdk": "workspace:*",
-    "ethers": "5.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "wagmi": "^0.12.18"
+    "viem": "^1.12.2",
+    "wagmi": "^1.4.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.20",

examples/react-quickstart/src/components/App.tsx

@@ -1,18 +1,18 @@
 import "./App.css";
-import { useSigner } from "wagmi";
 import { useEffect } from "react";
 import { useClient } from "@xmtp/react-sdk";
 import { ContentRouter } from "./ContentRouter";
+import { useWallet } from "../hooks/useWallet";
 
 const App = () => {
-  const { data: signer } = useSigner();
+  const { address } = useWallet();
   const { disconnect } = useClient();
 
   // disconnect XMTP client when the wallet changes
   useEffect(() => {
     void disconnect();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signer]);
+  }, [address]);
 
   return (
     <div className="App">

examples/react-quickstart/src/components/XMTPConnect.tsx

@@ -1,22 +1,22 @@
 import { LinkIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { useClient } from "@xmtp/react-sdk";
 import { useCallback } from "react";
+import { useWalletClient } from "wagmi";
 import { Notification } from "./Notification";
-import { useWallet } from "../hooks/useWallet";
 
 type XMTPConnectButtonProps = {
   label: string;
 };
 
 const XMTPConnectButton: React.FC<XMTPConnectButtonProps> = ({ label }) => {
-  const { signer } = useWallet();
   const { initialize } = useClient();
+  const { data: walletClient } = useWalletClient();
 
   const handleConnect = useCallback(() => {
     void initialize({
-      signer,
+      signer: walletClient,
     });
-  }, [initialize, signer]);
+  }, [initialize, walletClient]);
 
   return (
     <button className="Button" type="button" onClick={handleConnect}>

examples/react-quickstart/src/contexts/WalletContext.tsx

@@ -1,15 +1,13 @@
 import "@rainbow-me/rainbowkit/styles.css";
-import type { Signer } from "@xmtp/react-sdk";
 import { createContext, useMemo } from "react";
-import { useAccount, useConnect, useDisconnect, useSigner } from "wagmi";
+import { useAccount, useConnect, useDisconnect } from "wagmi";
 
 export type WalletContextValue = {
   address: `0x${string}` | undefined;
   disconnect: ReturnType<typeof useDisconnect>["disconnect"];
   error: Error | null;
   isConnected: boolean;
   isLoading: boolean;
-  signer: Signer | undefined | null;
 };
 
 export const WalletContext = createContext<WalletContextValue>({
@@ -18,23 +16,27 @@ export const WalletContext = createContext<WalletContextValue>({
   error: null,
   isConnected: false,
   isLoading: false,
-  signer: undefined,
 });
 
 export const WalletProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
   const { address, isConnected, isConnecting, isReconnecting } = useAccount();
   const { error } = useConnect();
-  const { data: signer } = useSigner();
   const { disconnect } = useDisconnect();
 
   const isLoading = isConnecting || isReconnecting;
 
   // memo-ize the context value to prevent unnecessary re-renders
   const value = useMemo(
-    () => ({ address, disconnect, error, isLoading, signer, isConnected }),
-    [address, disconnect, error, isLoading, signer, isConnected],
+    () => ({
+      address,
+      disconnect,
+      error,
+      isLoading,
+      isConnected,
+    }),
+    [address, disconnect, error, isLoading, isConnected],
   );
 
   return (

examples/react-quickstart/src/globals.d.ts

@@ -1,5 +1,6 @@
 interface ImportMeta {
   env: {
     VITE_PROJECT_ID: string;
+    VITE_INFURA_ID: string;
   };
 }

examples/react-quickstart/src/main.tsx

@@ -2,9 +2,19 @@ import "./polyfills";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@rainbow-me/rainbowkit/styles.css";
-import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
-import { configureChains, createClient, WagmiConfig } from "wagmi";
-import { mainnet } from "wagmi/chains";
+import {
+  connectorsForWallets,
+  RainbowKitProvider,
+} from "@rainbow-me/rainbowkit";
+import {
+  coinbaseWallet,
+  metaMaskWallet,
+  rainbowWallet,
+  trustWallet,
+  walletConnectWallet,
+} from "@rainbow-me/rainbowkit/wallets";
+import { createConfig, configureChains, mainnet, WagmiConfig } from "wagmi";
+import { infuraProvider } from "wagmi/providers/infura";
 import { publicProvider } from "wagmi/providers/public";
 import {
   XMTPProvider,
@@ -27,27 +37,39 @@ const contentTypeConfigs = [
   replyContentTypeConfig,
 ];
 
-const { chains, provider, webSocketProvider } = configureChains(
+const { chains, publicClient } = configureChains(
   [mainnet],
-  [publicProvider()],
+  [
+    infuraProvider({ apiKey: import.meta.env.VITE_INFURA_ID }),
+    publicProvider(),
+  ],
 );
 
-const { connectors } = getDefaultWallets({
-  appName: "XMTP React RainbowKit Example",
-  chains,
-  // now required for WalletConnect V2
-  projectId: import.meta.env.VITE_PROJECT_ID,
-});
+const projectId = import.meta.env.VITE_PROJECT_ID;
+const appName = "XMTP React Quickstart";
+
+const connectors = connectorsForWallets([
+  {
+    groupName: "Wallets",
+    wallets: [
+      // Alpha order
+      coinbaseWallet({ appName, chains }),
+      metaMaskWallet({ chains, projectId }),
+      rainbowWallet({ chains, projectId }),
+      trustWallet({ projectId, chains }),
+      walletConnectWallet({ chains, projectId }),
+    ],
+  },
+]);
 
-const wagmiClient = createClient({
+const wagmiConfig = createConfig({
   autoConnect: true,
   connectors,
-  provider,
-  webSocketProvider,
+  publicClient,
 });
 
 createRoot(document.getElementById("root") as HTMLElement).render(
-  <WagmiConfig client={wagmiClient}>
+  <WagmiConfig config={wagmiConfig}>
     <RainbowKitProvider chains={chains}>
       <StrictMode>
         <WalletProvider>

package.json

@@ -31,7 +31,7 @@
     "@changesets/cli": "^2.26.2"
   },
   "resolutions": {
-    "@xmtp/xmtp-js": "^10.2.0",
+    "@xmtp/xmtp-js": "^11.1.1",
     "vite": "^4.4.9"
   }
 }

packages/react-components/package.json

@@ -73,9 +73,9 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@xmtp/content-type-reaction": "^1.0.1",
-    "@xmtp/content-type-remote-attachment": "^1.0.7",
-    "@xmtp/content-type-reply": "^1.0.0",
+    "@xmtp/content-type-reaction": "^1.1.2",
+    "@xmtp/content-type-remote-attachment": "^1.1.2",
+    "@xmtp/content-type-reply": "^1.1.3",
     "@xmtp/react-sdk": "workspace:*",
     "date-fns": "^2.30.0",
     "react": "^18.2.0",

packages/react-sdk/package.json

@@ -72,17 +72,18 @@
     "typedoc": "typedoc"
   },
   "dependencies": {
-    "@xmtp/content-type-reaction": "^1.0.1",
-    "@xmtp/content-type-read-receipt": "^1.0.1",
-    "@xmtp/content-type-remote-attachment": "^1.0.7",
-    "@xmtp/content-type-reply": "^1.0.0",
-    "@xmtp/xmtp-js": "^10.2.1",
+    "@xmtp/content-type-reaction": "^1.1.2",
+    "@xmtp/content-type-read-receipt": "^1.1.3",
+    "@xmtp/content-type-remote-attachment": "^1.1.2",
+    "@xmtp/content-type-reply": "^1.1.3",
+    "@xmtp/xmtp-js": "^11.1.1",
     "async-mutex": "^0.4.0",
     "date-fns": "^2.30.0",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.6",
     "react": "^18.2.0",
     "uuid": "^9.0.0",
+    "viem": "^1.12.2",
     "zod": "^3.22.1"
   },
   "devDependencies": {
@@ -96,7 +97,6 @@
     "@xmtp/tsconfig": "workspace:*",
     "eslint": "^8.47.0",
     "eslint-config-xmtp-web": "workspace:*",
-    "ethers": "^6.7.0",
     "fake-indexeddb": "^4.0.2",
     "jsdom": "^21.1.2",
     "prettier": "^3.0.2",
@@ -109,7 +109,7 @@
     "vitest": "^0.34.2"
   },
   "peerDependencies": {
-    "@xmtp/xmtp-js": "^10.2.1",
+    "@xmtp/xmtp-js": "^11.1.1",
     "react": ">=16.14"
   },
   "engines": {

packages/react-sdk/src/contexts/XMTPContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, useMemo, useState } from "react";
 import type { Client, ContentCodec, Signer } from "@xmtp/xmtp-js";
 import Dexie from "dexie";
+import type { WalletClient } from "viem";
 import type {
   ContentTypeConfiguration,
   ContentTypeMessageProcessors,
@@ -40,11 +41,13 @@ export type XMTPContextValue = {
   /**
    * Set the signer (wallet) to associate with the XMTP client instance
    */
-  setClientSigner: React.Dispatch<React.SetStateAction<Signer | undefined>>;
+  setClientSigner: React.Dispatch<
+    React.SetStateAction<Signer | WalletClient | undefined>
+  >;
   /**
    * The signer (wallet) associated with the XMTP client instance
    */
-  signer?: Signer | null;
+  signer?: Signer | WalletClient | null;
   /**
    * Message content validators for content types
    */
@@ -89,9 +92,9 @@ export const XMTPProvider: React.FC<XMTPProviderProps> = ({
   dbVersion,
 }) => {
   const [client, setClient] = useState<Client | undefined>(initialClient);
-  const [clientSigner, setClientSigner] = useState<Signer | undefined>(
-    undefined,
-  );
+  const [clientSigner, setClientSigner] = useState<
+    Signer | WalletClient | undefined
+  >(undefined);
 
   // combine all message processors
   const processors = useMemo(