WC migration to WalletKit

ios/Podfile.lock

@@ -1177,7 +1177,7 @@ PODS:
     - React-Core
   - react-native-cloud-fs (2.6.2):
     - React
-  - react-native-compat (2.15.1):
+  - react-native-compat (2.17.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2352,7 +2352,7 @@ SPEC CHECKSUMS:
   react-native-cameraroll: b5ce04a1ee4081d7eea921918de979f0b41d8e22
   react-native-change-icon: ea9bb7255b09e89f41cbf282df16eade91ab1833
   react-native-cloud-fs: c90379f513b8d7ad5cfed610ccf50f27d837016e
-  react-native-compat: 408a4b320fa4426f2c25ab74ed5764be6b3eb5aa
+  react-native-compat: 4e82fe33d1af54feba2f25d3d88f2b4d8e5c2b78
   react-native-get-random-values: 1404bd5cc0ab0e287f75ee1c489555688fc65f89
   react-native-ios-context-menu: e529171ba760a1af7f2ef0729f5a7f4d226171c5
   react-native-mail: a864fb211feaa5845c6c478a3266de725afdce89

package.json

@@ -124,6 +124,7 @@
     "@react-navigation/material-top-tabs": "6.6.2",
     "@react-navigation/native": "6.1.17",
     "@react-navigation/stack": "6.3.29",
+    "@reown/walletkit": "^1.0.0",
     "@reservoir0x/reservoir-sdk": "2.3.0",
     "@rudderstack/rudder-sdk-react-native": "1.12.1",
     "@sentry/react-native": "5.31.1",
@@ -140,12 +141,11 @@
     "@unstoppabledomains/resolution": "7.1.4",
     "@wagmi/chains": "1.8.0",
     "@walletconnect/client": "1.8.0",
-    "@walletconnect/core": "2.15.1",
+    "@walletconnect/core": "2.17.0",
     "@walletconnect/legacy-utils": "2.0.0",
-    "@walletconnect/react-native-compat": "2.15.1",
-    "@walletconnect/types": "2.15.1",
-    "@walletconnect/utils": "2.15.1",
-    "@walletconnect/web3wallet": "1.14.1",
+    "@walletconnect/react-native-compat": "2.17.0",
+    "@walletconnect/types": "2.17.0",
+    "@walletconnect/utils": "2.17.0",
     "assert": "1.5.0",
     "async-mutex": "0.3.2",
     "asyncstorage-down": "4.2.0",

src/walletConnect/index.tsx

@@ -9,7 +9,7 @@ import { formatJsonRpcResult, formatJsonRpcError } from '@json-rpc-tools/utils';
 import { gretch } from 'gretchen';
 import messaging from '@react-native-firebase/messaging';
 import WalletConnectCore, { Core } from '@walletconnect/core';
-import Client, { Web3Wallet, Web3WalletTypes } from '@walletconnect/web3wallet';
+import { WalletKit, WalletKitTypes, IWalletKit } from '@reown/walletkit';
 import { isHexString } from '@ethersproject/bytes';
 import { toUtf8String } from '@ethersproject/strings';
 
@@ -96,20 +96,20 @@ let lastConnector: string | undefined = undefined;
 
 let walletConnectCore: WalletConnectCore | undefined;
 
-let web3WalletClient: ReturnType<(typeof Web3Wallet)['init']> | undefined;
+let walletKitClient: ReturnType<(typeof WalletKit)['init']> | undefined;
 
-let initPromise: Promise<Client> | undefined = undefined;
+let initPromise: Promise<IWalletKit> | undefined = undefined;
 
-let syncWeb3WalletClient: Client | undefined = undefined;
+let syncWalletKitClient: IWalletKit | undefined = undefined;
 
 export const initializeWCv2 = async () => {
   if (!walletConnectCore) {
     walletConnectCore = new Core({ projectId: WC_PROJECT_ID });
   }
 
-  if (!web3WalletClient) {
+  if (!walletKitClient) {
     // eslint-disable-next-line require-atomic-updates
-    web3WalletClient = Web3Wallet.init({
+    walletKitClient = WalletKit.init({
       core: walletConnectCore,
       metadata: {
         name: '🌈 Rainbow',
@@ -124,10 +124,10 @@ export const initializeWCv2 = async () => {
     });
   }
 
-  return web3WalletClient;
+  return walletKitClient;
 };
 
-export async function getWeb3WalletClient() {
+export async function getWalletKitClient() {
   if (!initPromise) {
     initPromise = initializeWCv2();
   }
@@ -196,7 +196,7 @@ export function parseRPCParams({ method, params }: RPCPayload): {
 /**
  * Better signature for this type of function
  *
- * @see https://docs.walletconnect.com/2.0/web/web3wallet/wallet-usage#-namespaces-builder-util
+ * @see https://docs.walletconnect.com/2.0/web/walletKit/wallet-usage#-namespaces-builder-util
  */
 export function getApprovedNamespaces(props: Parameters<typeof buildApprovedNamespaces>[0]):
   | {
@@ -303,15 +303,15 @@ async function rejectProposal({
   proposal,
   reason,
 }: {
-  proposal: Web3WalletTypes.SessionProposal;
+  proposal: WalletKitTypes.SessionProposal;
   reason: Parameters<typeof getSdkError>[0];
 }) {
   logger.warn(`[walletConnect]: session approval denied`, {
     reason,
     proposal,
   });
 
-  const client = await getWeb3WalletClient();
+  const client = await getWalletKitClient();
   const { id, proposer } = proposal.params;
 
   await client.rejectSession({ id, reason: getSdkError(reason) });
@@ -323,11 +323,10 @@ async function rejectProposal({
 }
 
 // listen for THIS topic pairing, and clear timeout if received
-function trackTopicHandler(proposal: Web3WalletTypes.SessionProposal | Web3WalletTypes.AuthRequest) {
+function trackTopicHandler(proposal: WalletKitTypes.SessionProposal) {
   logger.debug(`[walletConnect]: pair: handler`, { proposal });
 
-  const { metadata } =
-    (proposal as Web3WalletTypes.SessionProposal).params.proposer || (proposal as Web3WalletTypes.AuthRequest).params.requester;
+  const { metadata } = (proposal as WalletKitTypes.SessionProposal).params.proposer;
 
   analytics.track(analytics.event.wcNewPairing, {
     dappName: metadata.name,
@@ -344,7 +343,7 @@ export async function pair({ uri, connector }: { uri: string; connector?: string
    */
 
   const { topic, ...rest } = parseUri(uri);
-  const client = await getWeb3WalletClient();
+  const client = await getWalletKitClient();
 
   logger.debug(`[walletConnect]: pair: parsed uri`, { topic, rest });
 
@@ -355,16 +354,16 @@ export async function pair({ uri, connector }: { uri: string; connector?: string
 export async function initListeners() {
   PerformanceTracking.startMeasuring(PerformanceMetrics.initializeWalletconnect);
 
-  const client = await getWeb3WalletClient();
+  const client = await getWalletKitClient();
   PerformanceTracking.finishMeasuring(PerformanceMetrics.initializeWalletconnect);
 
-  syncWeb3WalletClient = client;
+  syncWalletKitClient = client;
 
-  logger.debug(`[walletConnect]: web3WalletClient initialized, initListeners`, {}, logger.DebugContext.walletconnect);
+  logger.debug(`[walletConnect]: walletKitClient initialized, initListeners`, {}, logger.DebugContext.walletconnect);
 
   client.on('session_proposal', onSessionProposal);
   client.on('session_request', onSessionRequest);
-  client.on('auth_request', onAuthRequest);
+  client.on('session_authenticate', onSessionAuthenticate);
   client.on('session_delete', () => {
     logger.debug(`[walletConnect]: session_delete`, {}, logger.DebugContext.walletconnect);
 
@@ -379,7 +378,7 @@ export async function initWalletConnectPushNotifications() {
     const token = await getFCMToken();
 
     if (token) {
-      const client = await getWeb3WalletClient();
+      const client = await getWalletKitClient();
       const client_id = await client.core.crypto.getClientId();
 
       // initial subscription
@@ -429,7 +428,7 @@ async function subscribeToEchoServer({ client_id, token }: { client_id: string;
   }
 }
 
-export async function onSessionProposal(proposal: Web3WalletTypes.SessionProposal) {
+export async function onSessionProposal(proposal: WalletKitTypes.SessionProposal) {
   try {
     trackTopicHandler(proposal);
 
@@ -468,10 +467,15 @@ export async function onSessionProposal(proposal: Web3WalletTypes.SessionProposa
       verifiedData,
       timedOut: false,
       callback: async (approved, approvedChainId, accountAddress) => {
-        const client = await getWeb3WalletClient();
+        console.log('[WC DEBUG] executing callback');
+        const client = await getWalletKitClient();
+        console.log('[WC DEBUG] got client');
+
         const { id, proposer, requiredNamespaces } = proposal.params;
 
         if (approved) {
+          console.log('[WC DEBUG] approved true');
+
           logger.debug(
             `[walletConnect]: session approved`,
             {
@@ -502,7 +506,11 @@ export async function onSessionProposal(proposal: Web3WalletTypes.SessionProposa
           logger.debug(`[walletConnect]: session approved namespaces`, { namespaces }, logger.DebugContext.walletconnect);
 
           try {
+            console.log('[WC DEBUG] try');
+
             if (namespaces.success) {
+              console.log('[WC DEBUG] namespaces success');
+
               /**
                * This is equivalent handling of setPendingRequest and
                * walletConnectApproveSession, since setPendingRequest is only used
@@ -516,6 +524,8 @@ export async function onSessionProposal(proposal: Web3WalletTypes.SessionProposa
                 namespaces: namespaces.result,
               });
 
+              console.log('[WC DEBUG] session approved');
+
               // let the ConnectedDappsSheet know we've got a new one
               events.emit('walletConnectV2SessionCreated');
 
@@ -533,6 +543,8 @@ export async function onSessionProposal(proposal: Web3WalletTypes.SessionProposa
                 });
               }
             } else {
+              console.log('[WC DEBUG] rejected proposal');
+
               await rejectProposal({
                 proposal,
                 reason: 'INVALID_SESSION_SETTLE_REQUEST',
@@ -546,6 +558,8 @@ export async function onSessionProposal(proposal: Web3WalletTypes.SessionProposa
               });
             }
           } catch (e) {
+            console.log('[WC DEBUG] catch', e);
+
             setHasPendingDeeplinkPendingRedirect(false);
 
             Alert({
@@ -566,6 +580,8 @@ export async function onSessionProposal(proposal: Web3WalletTypes.SessionProposa
             });
           }
         } else if (!approved) {
+          console.log('[WC DEBUG] not approved');
+
           await rejectProposal({ proposal, reason: 'USER_REJECTED' });
         }
       },
@@ -592,7 +608,7 @@ export async function onSessionProposal(proposal: Web3WalletTypes.SessionProposa
 // For WC v2
 export async function onSessionRequest(event: SignClientTypes.EventArguments['session_request']) {
   setHasPendingDeeplinkPendingRedirect(true);
-  const client = await getWeb3WalletClient();
+  const client = await getWalletKitClient();
 
   logger.debug(`[walletConnect]: session_request`, {}, logger.DebugContext.walletconnect);
 
@@ -808,7 +824,7 @@ export async function handleSessionRequestResponse(
     success: Boolean(result),
   });
 
-  const client = await getWeb3WalletClient();
+  const client = await getWalletKitClient();
   const { topic, id } = sessionRequestEvent;
   if (result) {
     const payload = {
@@ -829,10 +845,12 @@ export async function handleSessionRequestResponse(
   store.dispatch(removeRequest(sessionRequestEvent.id));
 }
 
-export async function onAuthRequest(event: Web3WalletTypes.AuthRequest) {
+export async function onSessionAuthenticate(event: WalletKitTypes.SessionAuthenticate) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore Can be fixed once we wipe wc v1 from the codebase
   trackTopicHandler(event);
 
-  const client = await getWeb3WalletClient();
+  const client = await getWalletKitClient();
 
   logger.debug(`[walletConnect]: auth_request`, { event }, logger.DebugContext.walletconnect);
 
@@ -845,6 +863,8 @@ export async function onAuthRequest(event: Web3WalletTypes.AuthRequest) {
 
       // exit early if possible
       if (selectedWallet?.type === WalletTypes.readOnly) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore Can be fixed once we wipe wc v1 from the codebase
         await client.respondAuthRequest(
           {
             id: event.id,
@@ -875,7 +895,8 @@ export async function onAuthRequest(event: Web3WalletTypes.AuthRequest) {
 
           return undefined;
         }
-
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore Can be fixed once we wipe wc v1 from the codebase
         const message = client.formatMessage(event.params.cacaoPayload, iss);
         // prompt the user to sign the message
         return wallet.signMessage(message);
@@ -904,6 +925,8 @@ export async function onAuthRequest(event: Web3WalletTypes.AuthRequest) {
       }
 
       // respond to WC
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore Can be fixed once we wipe wc v1 from the codebase
       await client.respondAuthRequest(
         {
           id: event.id,
@@ -929,7 +952,7 @@ export async function onAuthRequest(event: Web3WalletTypes.AuthRequest) {
 
   // need to prefetch dapp metadata since portal is static
   const url =
-    // @ts-ignore Web3WalletTypes.AuthRequest type is missing VerifyContext
+    // @ts-ignore WalletKitTypes.AuthRequest type is missing VerifyContext
     event?.verifyContext?.origin || event.params.requester.metadata.url;
   const metadata = await fetchDappMetadata({ url, status: true });
 
@@ -939,7 +962,7 @@ export async function onAuthRequest(event: Web3WalletTypes.AuthRequest) {
       AuthRequest({
         authenticate,
         requesterMeta: event.params.requester.metadata,
-        // @ts-ignore Web3WalletTypes.AuthRequest type is missing VerifyContext
+        // @ts-ignore WalletKitTypes.AuthRequest type is missing VerifyContext
         verifiedData: event?.verifyContext,
       }),
     { sheetHeight: IS_ANDROID ? 560 : 520 + (isScam ? 40 : 0) }
@@ -950,7 +973,7 @@ export async function onAuthRequest(event: Web3WalletTypes.AuthRequest) {
  * Returns all active settings in a type-safe manner.
  */
 export async function getAllActiveSessions() {
-  const client = await getWeb3WalletClient();
+  const client = await getWalletKitClient();
   return Object.values(client?.getActiveSessions() || {}) || [];
 }
 
@@ -959,15 +982,15 @@ export async function getAllActiveSessions() {
  * in a type-safe manner.
  */
 export function getAllActiveSessionsSync() {
-  return Object.values(syncWeb3WalletClient?.getActiveSessions() || {}) || [];
+  return Object.values(syncWalletKitClient?.getActiveSessions() || {}) || [];
 }
 
 /**
  * Adds an account to an existing session
  */
 export async function addAccountToSession(session: SessionTypes.Struct, { address }: { address?: string }) {
   try {
-    const client = await getWeb3WalletClient();
+    const client = await getWalletKitClient();
 
     const namespaces: Parameters<typeof client.updateSession>[0]['namespaces'] = {};
 
@@ -1028,7 +1051,7 @@ export async function addAccountToSession(session: SessionTypes.Struct, { addres
 
 export async function changeAccount(session: SessionTypes.Struct, { address }: { address?: string }) {
   try {
-    const client = await getWeb3WalletClient();
+    const client = await getWalletKitClient();
 
     /*
      * Before we can effectively switch accounts, we need to add the account to
@@ -1076,7 +1099,7 @@ export async function changeAccount(session: SessionTypes.Struct, { address }: {
  * within a dapp is handled internally by WC v2.
  */
 export async function disconnectSession(session: SessionTypes.Struct) {
-  const client = await getWeb3WalletClient();
+  const client = await getWalletKitClient();
 
   await client.disconnectSession({
     topic: session.topic,

src/walletConnect/sheets/AuthRequest.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useNavigation } from '@react-navigation/native';
-import { Web3WalletTypes } from '@walletconnect/web3wallet';
 
 import { Box, Text, Separator, BackgroundProvider, AccentColorProvider } from '@/design-system';
 import ButtonPressAnimation from '@/components/animations/ButtonPressAnimation';
@@ -19,13 +18,14 @@ import { Verify } from '@walletconnect/types';
 import { useDappMetadata } from '@/resources/metadata/dapp';
 import { DAppStatus } from '@/graphql/__generated__/metadata';
 import { InfoAlert } from '@/components/info-alert/info-alert';
+import { WalletKitTypes } from '@reown/walletkit';
 
 export function AuthRequest({
   requesterMeta,
   authenticate,
   verifiedData,
 }: {
-  requesterMeta: Web3WalletTypes.AuthRequest['params']['requester']['metadata'];
+  requesterMeta: WalletKitTypes.SessionProposal['params']['proposer']['metadata'];
   authenticate: AuthRequestAuthenticateSignature;
   verifiedData?: Verify.Context['verified'];
 }) {