✨ migrate to wagmi+viem v2

app/+html.tsx

@@ -1,3 +1,4 @@
+// @ts-expect-error -- missing types
 import { ScrollViewStyleReset } from "expo-router/html";
 import React, { type ReactNode } from "react";
 

app/_layout.tsx

@@ -3,21 +3,20 @@ import "expo-webauthn";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import InterBold from "@tamagui/font-inter/otf/Inter-Bold.otf";
 import Inter from "@tamagui/font-inter/otf/Inter-Medium.otf";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { type FontSource, useFonts } from "expo-font";
 import { Slot, SplashScreen } from "expo-router";
 import { StatusBar } from "expo-status-bar";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import * as Sentry from "sentry-expo";
 import { TamaguiProvider } from "tamagui";
 import { TextEncoder } from "text-encoding";
-import { WagmiConfig, configureChains, createConfig } from "wagmi";
-import { alchemyProvider } from "wagmi/providers/alchemy";
-import { publicProvider } from "wagmi/providers/public";
+import { WagmiProvider, createConfig, http } from "wagmi";
 
 import metadata from "../package.json";
 import tamaguiConfig from "../tamagui.config";
-import AlchemyConnector from "../utils/AlchemyConnector";
-import { alchemyAPIKey, chain } from "../utils/constants";
+import alchemyConnector from "../utils/alchemyConnector";
+import { chain, httpURL } from "../utils/constants";
 
 export { ErrorBoundary } from "expo-router";
 
@@ -35,36 +34,41 @@ Sentry.init({
   autoSessionTracking: true,
 });
 
-const { publicClient, webSocketPublicClient } = configureChains(
-  [chain],
-  [alchemyAPIKey ? alchemyProvider({ apiKey: alchemyAPIKey }) : publicProvider()],
-);
-const wagmiConfig = createConfig({ connectors: [new AlchemyConnector()], publicClient, webSocketPublicClient });
+const wagmiConfig = createConfig({
+  chains: [chain],
+  connectors: [alchemyConnector()],
+  transports: { [chain.id]: http(httpURL) },
+});
+const queryClient = new QueryClient();
 
 export default function RootLayout() {
   const [loaded, error] = useFonts({
     Inter: Inter as FontSource,
     InterBold: InterBold as FontSource,
     ...FontAwesome.font,
   });
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     if (error) throw error;
   }, [error]);
 
   useEffect(() => {
+    setMounted(true);
     if (loaded) SplashScreen.hideAsync().catch(() => {});
   }, [loaded]);
 
-  if (!loaded) return;
+  if (!loaded || !mounted) return;
 
   return (
     <>
       <StatusBar translucent={false} />
       <TamaguiProvider config={tamaguiConfig}>
-        <WagmiConfig config={wagmiConfig}>
-          <Slot />
-        </WagmiConfig>
+        <WagmiProvider config={wagmiConfig}>
+          <QueryClientProvider client={queryClient}>
+            <Slot />
+          </QueryClientProvider>
+        </WagmiProvider>
       </TamaguiProvider>
     </>
   );

app/index.tsx

@@ -4,7 +4,7 @@ import { deviceName } from "expo-device";
 import React, { useCallback } from "react";
 import { Button, Spinner, Text, XStack, YStack } from "tamagui";
 import { UAParser } from "ua-parser-js";
-import { useAccount, useConnect, useDisconnect, usePrepareSendTransaction, useSendTransaction } from "wagmi";
+import { useAccount, useConnect, useDisconnect, useSendTransaction } from "wagmi";
 
 import base64URLEncode from "../utils/base64URLEncode";
 import { rpId, turnkeyAPIPublicKey, turnkeyAPIPrivateKey, turnkeyOrganizationId } from "../utils/constants";
@@ -14,13 +14,12 @@ import handleError from "../utils/handleError";
 export default function Home() {
   const {
     connect,
-    isLoading: isConnecting,
+    isPending: isConnecting,
     connectors: [connector],
   } = useConnect();
   const { address } = useAccount();
   const { disconnect } = useDisconnect();
-  const { config: sendConfig } = usePrepareSendTransaction({ to: "0xE72185a9f4Ce3500d6dC7CCDCfC64cf66D823bE8" });
-  const { sendTransaction, data: txHash, isLoading: isSending } = useSendTransaction(sendConfig);
+  const { sendTransaction, data: txHash, isPending: isSending } = useSendTransaction();
 
   const createAccount = useCallback(() => {
     const name = `exactly, ${new Date().toISOString()}`;
@@ -81,6 +80,7 @@ export default function Home() {
   }, []);
 
   const connectAccount = useCallback(() => {
+    if (!connector) throw new Error("no connector");
     connect({ connector });
   }, [connect, connector]);
 
@@ -89,15 +89,15 @@ export default function Home() {
   }, [disconnect]);
 
   const send = useCallback(() => {
-    sendTransaction?.();
+    sendTransaction({ to: "0xE72185a9f4Ce3500d6dC7CCDCfC64cf66D823bE8" });
   }, [sendTransaction]);
 
   return (
     <XStack flex={1} alignItems="center" space>
       <YStack flex={1} alignItems="center" space>
         <Text textAlign="center">{txHash}</Text>
         <Button onPress={createAccount}>create</Button>
-        <Button disabled={isConnecting} onPress={address ? disconnectAccount : connectAccount}>
+        <Button disabled={!connector || isConnecting} onPress={address ? disconnectAccount : connectAccount}>
           {isConnecting ? <Spinner size="small" /> : address ?? "connect"}
         </Button>
         <Button disabled={!address || isSending} onPress={send}>

app/pomelo+api.ts

@@ -1,18 +1,12 @@
-import { configureChains, createConfig, fetchBlockNumber } from "@wagmi/core";
-import { alchemyProvider } from "@wagmi/core/providers/alchemy";
-import { publicProvider } from "@wagmi/core/providers/public";
+import { createConfig, getBlockNumber, http } from "@wagmi/core";
 import { type ExpoRequest, ExpoResponse } from "expo-router/server";
 
-import { alchemyAPIKey, chain } from "../utils/constants";
+import { chain, httpURL } from "../utils/constants";
 
-const { publicClient, webSocketPublicClient } = configureChains(
-  [chain],
-  [alchemyAPIKey ? alchemyProvider({ apiKey: alchemyAPIKey }) : publicProvider()],
-);
-createConfig({ publicClient, webSocketPublicClient });
+const wagmiConfig = createConfig({ chains: [chain], transports: { [chain.id]: http(httpURL) } });
 
 // eslint-disable-next-line import/prefer-default-export
 export async function GET(_: ExpoRequest) {
-  const blockNumber = await fetchBlockNumber();
+  const blockNumber = await getBlockNumber(wagmiConfig);
   return ExpoResponse.json(Number(blockNumber));
 }

babel.config.js

@@ -6,6 +6,7 @@ module.exports = function (api) {
     plugins: [
       "expo-router/babel",
       "transform-inline-environment-variables",
+      ["@babel/plugin-transform-private-methods", { loose: true }],
       ["@tamagui/babel-plugin", { components: ["tamagui"], config: "tamagui.config.ts", logTimings: true }],
     ],
   };

package.json

@@ -24,8 +24,9 @@
     "@alchemy/aa-core": "^1.2.0",
     "@expo/vector-icons": "^13.0.0",
     "@react-native-async-storage/async-storage": "1.18.2",
-    "@sentry/react-native": "^5.14.0",
+    "@sentry/react-native": "^5.14.1",
     "@tamagui/config": "^1.79.1",
+    "@tanstack/react-query": "^5.8.4",
     "@turnkey/api-key-stamper": "^0.2.0",
     "@turnkey/http": "^2.3.1",
     "@turnkey/viem": "^0.3.4",
@@ -55,12 +56,13 @@
     "tamagui": "^1.79.1",
     "text-encoding": "^0.7.0",
     "ua-parser-js": "^1.0.37",
-    "viem": "^1.19.7",
-    "wagmi": "^1.4.7",
+    "viem": "^2.0.0-beta.6",
+    "wagmi": "^2.0.0-beta.5",
     "zustand": "^4.4.6"
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",
+    "@babel/plugin-transform-private-methods": "^7.23.3",
     "@tamagui/babel-plugin": "^1.79.1",
     "@types/babel__core": "^7.20.5",
     "@types/eslint": "^8.44.7",