Upgrade viem, wagmi, rainbowkit

package.json

@@ -34,8 +34,10 @@
     "@headlessui/react": "^1.4.3",
     "@heroicons/react": "^1.0.5",
     "@ipld/car": "^5.2.5",
-    "@rainbow-me/rainbowkit": "^1.0.11",
-    "@wagmi/core": "^1.4.2",
+    "@rainbow-me/rainbowkit": "^2.0.1",
+    "@tanstack/react-query": "^5.24.1",
+    "@wagmi/connectors": "^4.1.14",
+    "@wagmi/core": "^2.6.5",
     "@web3-storage/w3up-client": "^12.0.0",
     "@xmtp/content-type-reaction": "^1.1.3",
     "@xmtp/content-type-remote-attachment": "^1.1.4",
@@ -65,8 +67,8 @@
     "react-timer-hook": "^3.0.6",
     "react-tooltip": "^5.19.0",
     "react-virtuoso": "^4.3.4",
-    "viem": "^1.13.2",
-    "wagmi": "^1.4.2",
+    "viem": "^2.7.16",
+    "wagmi": "^2.5.7",
     "web3.storage": "^4.5.4",
     "zustand": "^4.3.2"
   },

src/helpers/config.ts

@@ -0,0 +1,65 @@
+import {
+  connectorsForWallets,
+  getDefaultWallets,
+} from "@rainbow-me/rainbowkit";
+import { trustWallet } from "@rainbow-me/rainbowkit/wallets";
+import { mainnet } from "@wagmi/core/chains";
+import type { Config } from "@wagmi/core";
+import { http, fallback } from "@wagmi/core";
+import { createConfig } from "wagmi";
+import { demoConnector } from "./demoConnector";
+import { isAppEnvDemo } from "./env";
+
+// Required field as of WalletConnect v2.
+// Replace with your project id: https://www.rainbowkit.com/docs/migration-guide#2-supply-a-walletconnect-cloud-projectid
+const projectId = import.meta.env.VITE_PROJECT_ID || "ADD_PROJECT_ID_HERE";
+const appName = "XMTP Inbox Web";
+
+const { wallets } = getDefaultWallets({
+  appName,
+  projectId,
+});
+
+const connectors = connectorsForWallets(
+  [
+    ...wallets,
+    {
+      groupName: "Other",
+      wallets: [trustWallet],
+    },
+  ],
+  {
+    appName,
+    projectId,
+  },
+);
+
+const transports = {
+  [mainnet.id]: fallback([
+    http(
+      `https://mainnet.infura.io/v3/${import.meta.env.VITE_INFURA_ID ?? ""}`,
+    ),
+    http(),
+  ]),
+};
+
+let config: Config;
+
+export const getWagmiConfig = () => {
+  if (!config) {
+    if (isAppEnvDemo()) {
+      config = createConfig({
+        connectors: [demoConnector],
+        chains: [mainnet],
+        transports,
+      });
+    } else {
+      config = createConfig({
+        connectors,
+        chains: [mainnet],
+        transports,
+      });
+    }
+  }
+  return config;
+};

src/helpers/conversation.ts

@@ -11,6 +11,7 @@ import {
   throttledFetchAddressName,
 } from "./string";
 import { chunkArray } from "./functions";
+import { getWagmiConfig } from "./config";
 
 export type PeerAddressAvatar = string | null;
 export type PeerAddressName = string | null;
@@ -92,7 +93,8 @@ export const fetchPeerAddressAvatar = async (
     // check for a cached name
     const name = getCachedPeerAddressName(conversation);
     if (name) {
-      avatar = (await throttledFetchEnsAvatar({ name })) ?? null;
+      avatar =
+        (await throttledFetchEnsAvatar(getWagmiConfig(), { name })) ?? null;
     }
   }
   return avatar;
@@ -196,7 +198,9 @@ export const updateConversationIdentities = async (
       // eslint-disable-next-line no-await-in-loop
       await Promise.all(
         chunk.map(async (address) => {
-          const name = await throttledFetchEnsName({ address });
+          const name = await throttledFetchEnsName(getWagmiConfig(), {
+            address,
+          });
           if (name) {
             resolvedAddresses[address] = name;
             const addressConversations = conversationsWithoutNameMap[address];
@@ -251,7 +255,9 @@ export const updateConversationIdentities = async (
       // eslint-disable-next-line no-await-in-loop
       await Promise.all(
         chunk.map(async (name) => {
-          const avatar = await throttledFetchEnsAvatar({ name });
+          const avatar = await throttledFetchEnsAvatar(getWagmiConfig(), {
+            name,
+          });
           const addressConversations = conversationsWithoutAvatarMap[name];
           await Promise.all(
             addressConversations.map((convo) =>

src/helpers/demoConnector.ts

@@ -0,0 +1,41 @@
+import { createConnector } from "wagmi";
+import { mainnet } from "viem/chains";
+import randomWalletClient from "./createRandomWallet";
+
+// wagmi connector for demos
+export const demoConnector = createConnector(() => ({
+  id: "demoConnector",
+  name: "Demo Connector",
+  type: "demo",
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async connect() {
+    return {
+      accounts: [randomWalletClient.account.address],
+      chainId: mainnet.id,
+    };
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async disconnect() {},
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async getAccounts() {
+    return [randomWalletClient.account.address];
+  },
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async getClient() {
+    return randomWalletClient;
+  },
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async getChainId() {
+    return mainnet.id;
+  },
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async isAuthorized() {
+    return true;
+  },
+  onAccountsChanged() {},
+  onChainChanged() {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async onDisconnect() {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async getProvider() {},
+}));

src/helpers/string.ts

@@ -1,7 +1,8 @@
-import { fetchEnsAvatar, fetchEnsName, fetchEnsAddress } from "@wagmi/core";
+import { getEnsAvatar, getEnsName, getEnsAddress } from "@wagmi/core";
 import { getAddress } from "viem";
 import { ALLOWED_UNS_SUFFIXES, API_FETCH_THROTTLE } from "./constants";
 import { memoizeThrottle } from "./functions";
+import { getWagmiConfig } from "./config";
 
 export type ETHAddress = `0x${string}`;
 
@@ -68,24 +69,24 @@ type UnstoppableDomainsDomainResponse = {
 };
 
 export const throttledFetchEnsAddress = memoizeThrottle(
-  fetchEnsAddress,
+  getEnsAddress,
   API_FETCH_THROTTLE,
   undefined,
-  ({ name }) => name,
+  (_, { name }) => name,
 );
 
 export const throttledFetchEnsName = memoizeThrottle(
-  fetchEnsName,
+  getEnsName,
   API_FETCH_THROTTLE,
   undefined,
-  ({ address }) => address,
+  (_, { address }) => address,
 );
 
 export const throttledFetchEnsAvatar = memoizeThrottle(
-  fetchEnsAvatar,
+  getEnsAvatar,
   API_FETCH_THROTTLE,
   undefined,
-  ({ name }) => name,
+  (_, { name }) => name,
 );
 
 const fetchUnsName = async (address: ETHAddress) => {
@@ -117,7 +118,7 @@ export const throttledFetchUnsName = memoizeThrottle(
 );
 
 const fetchAddressName = async (address: ETHAddress) => {
-  let name = await throttledFetchEnsName({ address });
+  let name = await throttledFetchEnsName(getWagmiConfig(), { address });
   if (!name) {
     name = await throttledFetchUnsName(address);
   }

src/hooks/useAddressInput.ts

@@ -12,6 +12,7 @@ import {
   throttledFetchUnsName,
 } from "../helpers";
 import { useXmtpStore } from "../store/xmtp";
+import { getWagmiConfig } from "../helpers/config";
 
 /**
  * Hook to manage the state of the recipient address input
@@ -50,7 +51,7 @@ export const useAddressInput = () => {
               setRecipientName(unsName);
             } else {
               // check for ENS name
-              const ensName = await throttledFetchEnsName({
+              const ensName = await throttledFetchEnsName(getWagmiConfig(), {
                 address: recipientAddress,
               });
               setRecipientName(ensName);
@@ -64,7 +65,7 @@ export const useAddressInput = () => {
           if (!recipientAvatar && recipientName) {
             setRecipientState("loading");
             // check for avatar
-            const avatar = await throttledFetchEnsAvatar({
+            const avatar = await throttledFetchEnsAvatar(getWagmiConfig(), {
               name: recipientName,
             });
             setRecipientAvatar(avatar);
@@ -117,7 +118,7 @@ export const useAddressInput = () => {
         } else if (isEnsName(recipientInput)) {
           setRecipientState("loading");
           // fetch ens address
-          const address = await throttledFetchEnsAddress({
+          const address = await throttledFetchEnsAddress(getWagmiConfig(), {
             name: recipientInput,
           });
           if (address) {

src/hooks/useInitXmtpClient.ts

@@ -13,9 +13,9 @@ import {
   throttledFetchAddressName,
   throttledFetchEnsAvatar,
 } from "../helpers";
-import { mockConnector } from "../helpers/mockConnector";
+import { demoConnector } from "../helpers/demoConnector";
 import { useXmtpStore } from "../store/xmtp";
-import "wagmi/window";
+import { getWagmiConfig } from "../helpers/config";
 
 type ClientStatus = "new" | "created" | "enabled";
 
@@ -127,7 +127,7 @@ const useInitXmtpClient = () => {
   // if this is an app demo, connect to the temporary wallet
   useEffect(() => {
     if (isAppEnvDemo()) {
-      connectWallet({ connector: mockConnector });
+      connectWallet({ connector: demoConnector });
     }
     if (!client) {
       setStatus(undefined);
@@ -249,7 +249,7 @@ const useInitXmtpClient = () => {
             xmtpClient.address as ETHAddress,
           );
           if (name) {
-            const avatar = await throttledFetchEnsAvatar({
+            const avatar = await throttledFetchEnsAvatar(getWagmiConfig(), {
               name,
             });
             setClientAvatar(avatar);