diff --git a/.changeset/brave-parrots-camp.md b/.changeset/brave-parrots-camp.md
new file mode 100644
index 00000000..9d474021
--- /dev/null
+++ b/.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
diff --git a/examples/react-quickstart/package.json b/examples/react-quickstart/package.json
index 6bc00bc9..6b3ffdd4 100644
--- a/examples/react-quickstart/package.json
+++ b/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",
diff --git a/examples/react-quickstart/src/components/App.tsx b/examples/react-quickstart/src/components/App.tsx
index 0e9499c0..fcef5e41 100644
--- a/examples/react-quickstart/src/components/App.tsx
+++ b/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 (
diff --git a/examples/react-quickstart/src/components/XMTPConnect.tsx b/examples/react-quickstart/src/components/XMTPConnect.tsx
index 2a5f6107..cc57c200 100644
--- a/examples/react-quickstart/src/components/XMTPConnect.tsx
+++ b/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 = ({ label }) => {
- const { signer } = useWallet();
const { initialize } = useClient();
+ const { data: walletClient } = useWalletClient();
const handleConnect = useCallback(() => {
void initialize({
- signer,
+ signer: walletClient,
});
- }, [initialize, signer]);
+ }, [initialize, walletClient]);
return (