feat: migrated walletconnect connector to wagmi v2

Author: ignaciosantise

apps/native-cli/package.json

@@ -21,8 +21,8 @@
     "react-native-get-random-values": "~1.9.0",
     "react-native-modal": "13.0.1",
     "react-native-svg": "13.9.0",
-    "viem": "1.19.3",
-    "wagmi": "1.4.7"
+    "viem": "2.11.1",
+    "wagmi": "2.9.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

apps/native/App.tsx

@@ -2,7 +2,9 @@ import { StyleSheet, View, useColorScheme } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import * as Clipboard from 'expo-clipboard';
 import '@walletconnect/react-native-compat';
-import { WagmiConfig } from 'wagmi';
+
+import { CreateConfigParameters, WagmiProvider } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import {
   Web3Modal,
@@ -11,7 +13,8 @@ import {
   createWeb3Modal,
   defaultWagmiConfig
 } from '@web3modal/wagmi-react-native';
-import { EmailConnector } from '@web3modal/email-wagmi-react-native';
+
+// import { EmailConnector } from '@web3modal/email-wagmi-react-native';
 
 import {
   arbitrum,
@@ -26,14 +29,14 @@ import {
   base,
   celo,
   aurora
-} from 'wagmi/chains';
+} from '@wagmi/core/chains';
 import { AccountView } from './src/views/AccountView';
 import { ActionsView } from './src/views/ActionsView';
 import { getCustomWallets } from './src/utils/misc';
 
 const projectId = process.env.EXPO_PUBLIC_PROJECT_ID ?? '';
 
-const chains = [
+const chains: CreateConfigParameters['chains'] = [
   mainnet,
   polygon,
   arbitrum,
@@ -49,8 +52,8 @@ const chains = [
 ];
 
 const metadata = {
-  name: 'Web3Modal v3',
-  description: 'Web3Modal v3 by WalletConnect',
+  name: 'Web3Modal RN',
+  description: 'Web3Modal RN by WalletConnect',
   url: 'https://walletconnect.com/',
   icons: ['https://avatars.githubusercontent.com/u/37784886'],
   redirect: {
@@ -64,20 +67,21 @@ const clipboardClient = {
   }
 };
 
-const emailConnector = new EmailConnector({ chains, options: { projectId, metadata } });
+// const emailConnector = new EmailConnector({ chains, options: { projectId, metadata } });
 
 const wagmiConfig = defaultWagmiConfig({
   chains,
   projectId,
-  metadata,
-  extraConnectors: [emailConnector]
+  metadata
+  // extraConnectors: [emailConnector]
 });
 
+const queryClient = new QueryClient();
+
 const customWallets = getCustomWallets();
 
 createWeb3Modal({
   projectId,
-  chains,
   wagmiConfig,
   clipboardClient,
   customWallets,
@@ -89,22 +93,24 @@ export default function Native() {
   const isDarkMode = useColorScheme() === 'dark';
 
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <View style={[styles.container, isDarkMode && styles.dark]}>
-        <StatusBar style="auto" />
-        <W3mButton
-          connectStyle={styles.button}
-          accountStyle={styles.button}
-          label="Connect"
-          loadingLabel="Connecting..."
-          balance="show"
-        />
-        <W3mNetworkButton />
-        <AccountView />
-        <ActionsView />
-        <Web3Modal />
-      </View>
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <View style={[styles.container, isDarkMode && styles.dark]}>
+          <StatusBar style="auto" />
+          <W3mButton
+            connectStyle={styles.button}
+            accountStyle={styles.button}
+            label="Connect"
+            loadingLabel="Connecting..."
+            balance="show"
+          />
+          <W3mNetworkButton />
+          <AccountView />
+          <ActionsView />
+          <Web3Modal />
+        </View>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 

apps/native/package.json

@@ -17,8 +17,8 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-native-community/netinfo": "11.1.0",
+    "@tanstack/react-query": "5.37.1",
     "@walletconnect/react-native-compat": "2.10.5",
-    "@web3modal/email-wagmi-react-native": "1.4.0-email-beta.5",
     "@web3modal/wagmi-react-native": "1.4.0-email-beta.5",
     "expo": "^50.0.14",
     "expo-application": "~5.8.3",
@@ -34,8 +34,8 @@
     "react-native-web": "~0.19.6",
     "react-native-webview": "13.6.4",
     "uuid": "3.4.0",
-    "viem": "1.19.3",
-    "wagmi": "1.4.7"
+    "viem": "2.11.0",
+    "wagmi": "2.9.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

apps/native/src/views/ActionsView.tsx

@@ -5,30 +5,33 @@ import { parseEther } from 'viem';
 
 export function ActionsView() {
   const { isConnected } = useAccount();
-  const { data, isError, isLoading, isSuccess, signMessage } = useSignMessage({
-    message: 'Hello Web3Modal!'
-  });
+  const { data, isError, isPending, isSuccess, signMessage } = useSignMessage();
 
   const {
     data: sendData,
-    isLoading: isSending,
+    isPending: isSending,
     isSuccess: isSendSuccess,
     sendTransaction
-  } = useSendTransaction({
-    to: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', //vitalik.etch
-    value: parseEther('0.01'),
-    data: '0x'
-  });
+  } = useSendTransaction();
 
   return isConnected ? (
     <View>
       <Text variant="large-600">Wagmi Actions</Text>
-      <Button disabled={isLoading} onPress={() => signMessage()}>
+      <Button disabled={isPending} onPress={() => signMessage({ message: 'Hello Web3Modal!' })}>
         Sign
       </Button>
       {isSuccess && <Text>Signature: {data}</Text>}
       {isError && <Text>Error signing message</Text>}
-      <Button disabled={isSending} onPress={() => sendTransaction()}>
+      <Button
+        disabled={isSending}
+        onPress={() =>
+          sendTransaction({
+            to: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', //vitalik.etch
+            value: parseEther('0.01'),
+            data: '0x'
+          })
+        }
+      >
         Send
       </Button>
       {isSending && <Text>Check Wallet</Text>}

package.json

@@ -7,8 +7,6 @@
     "packages/scaffold-utils",
     "packages/scaffold",
     "packages/wagmi",
-    "packages/coinbase-wagmi",
-    "packages/email-wagmi",
     "packages/email-ethers",
     "packages/coinbase-ethers",
     "packages/ethers5",
@@ -34,6 +32,7 @@
     "@coinbase/wallet-mobile-sdk": "1.0.10",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native/eslint-config": "0.72.2",
+    "@tanstack/react-query": "^5.37.1",
     "@testing-library/jest-native": "5.4.2",
     "@testing-library/react-native": "12.2.0",
     "@types/jest": "29.5.7",
@@ -59,8 +58,8 @@
     "tsconfig": "*",
     "turbo": "1.10.15",
     "typescript": "5.2.2",
-    "viem": "1.19.3",
-    "wagmi": "1.4.7"
+    "viem": "2.11.0",
+    "wagmi": "2.9.2"
   },
   "packageManager": "yarn@4.0.2"
 }

packages/coinbase-wagmi/package.json

@@ -38,7 +38,7 @@
   },
   "peerDependencies": {
     "@coinbase/wallet-mobile-sdk": ">=1.0.10",
-    "wagmi": ">=1 <2"
+    "wagmi": ">=2"
   },
   "react-native": "src/index.ts",
   "react-native-builder-bob": {

packages/core/src/controllers/AccountController.ts

@@ -1,7 +1,8 @@
 import { proxy } from 'valtio';
 import { subscribeKey as subKey } from 'valtio/utils';
+
 import { CoreHelperUtil } from '../utils/CoreHelperUtil';
-import type { CaipAddress } from '../utils/TypeUtil';
+import type { CaipAddress, ConnectedWalletInfo } from '../utils/TypeUtil';
 
 // -- Types --------------------------------------------- //
 export interface AccountControllerState {
@@ -13,8 +14,11 @@ export interface AccountControllerState {
   profileName?: string;
   profileImage?: string;
   addressExplorerUrl?: string;
+  connectedWalletInfo?: ConnectedWalletInfo;
 }
 
+type StateKey = keyof AccountControllerState;
+
 // -- State --------------------------------------------- //
 const state = proxy<AccountControllerState>({
   isConnected: false
@@ -24,8 +28,8 @@ const state = proxy<AccountControllerState>({
 export const AccountController = {
   state,
 
-  subscribeConnection(callback: (value: AccountControllerState['isConnected']) => void) {
-    return subKey(state, 'isConnected', callback);
+  subscribeKey<K extends StateKey>(key: K, callback: (value: AccountControllerState[K]) => void) {
+    return subKey(state, key, callback);
   },
 
   setIsConnected(isConnected: AccountControllerState['isConnected']) {
@@ -54,6 +58,10 @@ export const AccountController = {
     state.profileImage = profileImage;
   },
 
+  setConnectedWalletInfo(connectedWalletInfo: AccountControllerState['connectedWalletInfo']) {
+    state.connectedWalletInfo = connectedWalletInfo;
+  },
+
   setAddressExplorerUrl(explorerUrl: AccountControllerState['addressExplorerUrl']) {
     state.addressExplorerUrl = explorerUrl;
   },

packages/core/src/controllers/BlockchainApiController.ts

@@ -10,11 +10,10 @@ const api = new FetchUtil({ baseUrl: 'https://rpc.walletconnect.com' });
 
 // -- Controller ---------------------------------------- //
 export const BlockchainApiController = {
-  fetchIdentity({ caipChainId, address }: BlockchainApiIdentityRequest) {
+  fetchIdentity({ address }: BlockchainApiIdentityRequest) {
     return api.get<BlockchainApiIdentityResponse>({
       path: `/v1/identity/${address}`,
       params: {
-        chainId: caipChainId,
         projectId: OptionsController.state.projectId
       }
     });

packages/core/src/utils/TypeUtil.ts

@@ -9,6 +9,14 @@ export interface CaipNetwork {
   imageUrl?: string;
 }
 
+export type ConnectedWalletInfo =
+  | {
+      name?: string;
+      icon?: string;
+      [key: string]: unknown;
+    }
+  | undefined;
+
 export interface LinkingRecord {
   redirect: string;
   href: string;
@@ -97,7 +105,6 @@ export interface ThemeVariables {
 
 // -- BlockchainApiController Types ---------------------------------------------
 export interface BlockchainApiIdentityRequest {
-  caipChainId: CaipNetworkId;
   address: string;
 }
 

packages/ethers/package.json

@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@walletconnect/ethereum-provider": "2.11.1",
+    "@walletconnect/ethereum-provider": "2.13.0",
     "@web3modal/scaffold-react-native": "1.4.0-email-beta.5",
     "@web3modal/scaffold-utils-react-native": "1.4.0-email-beta.5"
   },

packages/ethers5/package.json

@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@walletconnect/ethereum-provider": "2.11.1",
+    "@walletconnect/ethereum-provider": "2.13.0",
     "@web3modal/scaffold-react-native": "1.4.0-email-beta.5",
     "@web3modal/scaffold-utils-react-native": "1.4.0-email-beta.5"
   },

packages/scaffold/src/client.ts

@@ -12,7 +12,8 @@ import type {
   ThemeControllerState,
   ThemeMode,
   ThemeVariables,
-  Connector
+  Connector,
+  ConnectedWalletInfo
 } from '@web3modal/core-react-native';
 import {
   AccountController,
@@ -89,6 +90,14 @@ export class Web3ModalScaffold {
     return ThemeController.subscribe(callback);
   }
 
+  public getWalletInfo() {
+    return AccountController.state.connectedWalletInfo;
+  }
+
+  public subscribeWalletInfo(callback: (newState: ConnectedWalletInfo) => void) {
+    return AccountController.subscribeKey('connectedWalletInfo', callback);
+  }
+
   public getState() {
     return { ...PublicStateController.state };
   }
@@ -107,7 +116,7 @@ export class Web3ModalScaffold {
   public subscribeConnection(
     callback: (isConnected: AccountControllerState['isConnected']) => void
   ) {
-    return AccountController.subscribeConnection(callback);
+    return AccountController.subscribeKey('isConnected', callback);
   }
 
   public setLoading(loading: ModalControllerState['loading']) {
@@ -190,6 +199,11 @@ export class Web3ModalScaffold {
       AccountController.setAddressExplorerUrl(addressExplorerUrl);
     };
 
+  protected setConnectedWalletInfo: (typeof AccountController)['setConnectedWalletInfo'] =
+    connectedWalletInfo => {
+      AccountController.setConnectedWalletInfo(connectedWalletInfo);
+    };
+
   // -- Private ------------------------------------------------------------------
   private initControllers(options: ScaffoldOptions) {
     this.initAsyncValues(options);

packages/wagmi/package.json

@@ -47,8 +47,8 @@
     "react": ">=17",
     "react-native": ">=0.68.5",
     "react-native-get-random-values": "*",
-    "viem": ">=1",
-    "wagmi": ">=1"
+    "viem": ">=2",
+    "wagmi": ">=2"
   },
   "react-native": "src/index.tsx",
   "react-native-builder-bob": {