Chore: replace @WalletConnect packages with @reown/walletkit (#4548)

* Chore: replace @WalletConnect packages with @reown/walletkit

* Fix tests

* Add core

package.json

@@ -28,7 +28,6 @@
     "cypress:ci": "yarn cypress:run --config baseUrl=http://localhost:8080 --spec cypress/e2e/smoke/*.cy.js",
     "serve": "npx -y serve out -p ${REVERSE_PROXY_UI_PORT:=8080}",
     "static-serve": "yarn build && yarn serve",
-    "update-wc": "yarn add @walletconnect/web3wallet@latest @walletconnect/utils@latest; yarn add -D @walletconnect/types@latest",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build --quiet"
@@ -56,6 +55,7 @@
     "@mui/material": "^6.1.6",
     "@mui/x-date-pickers": "^7.22.1",
     "@reduxjs/toolkit": "^2.2.6",
+    "@reown/walletkit": "^1.1.1",
     "@safe-global/api-kit": "^2.4.6",
     "@safe-global/protocol-kit": "^4.1.1",
     "@safe-global/safe-apps-sdk": "^9.1.0",
@@ -65,8 +65,8 @@
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",
+    "@walletconnect/core": "^2.17.2",
     "@walletconnect/utils": "^2.17.2",
-    "@walletconnect/web3wallet": "^1.16.1",
     "@web3-onboard/coinbase": "^2.2.6",
     "@web3-onboard/core": "^2.21.4",
     "@web3-onboard/injected-wallets": "^2.11.2",
@@ -137,7 +137,6 @@
     "@types/react-gtm-module": "^2.0.3",
     "@types/semver": "^7.3.10",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@walletconnect/types": "^2.17.2",
     "cross-env": "^7.0.3",
     "cypress": "^13.15.2",
     "cypress-file-upload": "^5.0.8",

src/features/walletconnect/__tests__/WalletConnectContext.test.tsx

@@ -2,7 +2,7 @@ import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { toBeHex } from 'ethers'
 import { useContext } from 'react'
 import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import type { SessionTypes } from '@walletconnect/types'
 
 import { act, fireEvent, render, waitFor } from '@/tests/test-utils'
@@ -276,7 +276,7 @@ describe('WalletConnectProvider', () => {
           request: {},
           chainId: 'eip155:5', // Goerli
         },
-      } as unknown as Web3WalletTypes.SessionRequest)
+      } as unknown as WalletKitTypes.SessionRequest)
 
       await waitFor(() => {
         expect(sendSessionResponseSpy).toHaveBeenCalledWith('topic', {
@@ -335,7 +335,7 @@ describe('WalletConnectProvider', () => {
           request: {},
           chainId: 'eip155:1', // Mainnet
         },
-      } as unknown as Web3WalletTypes.SessionRequest)
+      } as unknown as WalletKitTypes.SessionRequest)
 
       await waitFor(() => {
         expect(sendSessionResponseSpy).toHaveBeenCalledWith('topic', {
@@ -404,7 +404,7 @@ describe('WalletConnectProvider', () => {
           request: { method: 'fake', params: [] },
           chainId: 'eip155:5', // Goerli
         },
-      } as unknown as Web3WalletTypes.SessionRequest)
+      } as unknown as WalletKitTypes.SessionRequest)
 
       expect(mockRequest).toHaveBeenCalledWith(
         1,
@@ -476,7 +476,7 @@ describe('WalletConnectProvider', () => {
           request: {},
           chainId: 'eip155:5', // Goerli
         },
-      } as unknown as Web3WalletTypes.SessionRequest)
+      } as unknown as WalletKitTypes.SessionRequest)
 
       expect(sendSessionResponseSpy).not.toHaveBeenCalled()
 

src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx

@@ -1,6 +1,6 @@
 import { Alert, Typography } from '@mui/material'
 import { useCallback } from 'react'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 
 import ChainIndicator from '@/components/common/ChainIndicator'
 import { useCompatibilityWarning } from './useCompatibilityWarning'
@@ -15,7 +15,7 @@ export const CompatibilityWarning = ({
   proposal,
   chainIds,
 }: {
-  proposal: Web3WalletTypes.SessionProposal
+  proposal: WalletKitTypes.SessionProposal
   chainIds: Array<string>
 }) => {
   const { safe } = useSafeInfo()

src/features/walletconnect/components/WcProposalForm/ProposalVerification.tsx

@@ -1,11 +1,11 @@
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import { Alert, SvgIcon } from '@mui/material'
 import AlertIcon from '@/public/images/notifications/alert.svg'
 import type { ReactElement } from 'react'
 import { getPeerName } from '@/features/walletconnect/services/utils'
 import css from './styles.module.css'
 
-const ProposalVerification = ({ proposal }: { proposal: Web3WalletTypes.SessionProposal }): ReactElement | null => {
+const ProposalVerification = ({ proposal }: { proposal: WalletKitTypes.SessionProposal }): ReactElement | null => {
   const { isScam, validation } = proposal.verifyContext.verified
 
   if (validation === 'UNKNOWN' || validation === 'VALID') {

src/features/walletconnect/components/WcProposalForm/__tests__/useCompatibilityWarning.test.ts

@@ -1,7 +1,7 @@
 import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { renderHook } from '@/tests/test-utils'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import { useCompatibilityWarning } from '../useCompatibilityWarning'
 import * as wcUtils from '@/features/walletconnect/services/utils'
 
@@ -13,7 +13,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake Bridge' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 
@@ -30,7 +30,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: '' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 
@@ -50,7 +50,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake Bridge' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 
@@ -68,7 +68,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: '' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 
@@ -88,7 +88,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake dApp' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, true))
 
@@ -105,7 +105,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: '' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, true))
 
@@ -124,7 +124,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake dApp' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false), {
         initialReduxState: {
@@ -163,7 +163,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake dApp' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 

src/features/walletconnect/components/WcProposalForm/index.tsx

@@ -15,7 +15,7 @@ import { WALLETCONNECT_EVENTS } from '@/services/analytics/events/walletconnect'
 
 import { asError } from '@/services/exceptions/utils'
 import { Button, Checkbox, CircularProgress, Divider, FormControlLabel, Typography } from '@mui/material'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import type { ChangeEvent, ReactElement } from 'react'
 import { type Dispatch, type SetStateAction, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { CompatibilityWarning } from './CompatibilityWarning'
@@ -25,8 +25,8 @@ import { useSanctionedAddress } from '@/hooks/useSanctionedAddress'
 import BlockedAddress from '@/components/common/BlockedAddress'
 
 type ProposalFormProps = {
-  proposal: Web3WalletTypes.SessionProposal
-  setProposal: Dispatch<SetStateAction<Web3WalletTypes.SessionProposal | undefined>>
+  proposal: WalletKitTypes.SessionProposal
+  setProposal: Dispatch<SetStateAction<WalletKitTypes.SessionProposal | undefined>>
   onApprove: () => void
 }
 

src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import type { AlertColor } from '@mui/material'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import useChains from '@/hooks/useChains'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { capitalize } from '@/utils/formatters'
@@ -46,7 +46,7 @@ export const _getWarning = (origin: string, name: string, isUnsupportedChain: bo
 }
 
 export const useCompatibilityWarning = (
-  proposal: Web3WalletTypes.SessionProposal,
+  proposal: WalletKitTypes.SessionProposal,
   isUnsupportedChain: boolean,
 ): (typeof Warnings)[string] => {
   const { configs } = useChains()

src/features/walletconnect/components/WcSessionManager/index.tsx

@@ -3,7 +3,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import { asError } from '@/services/exceptions/utils'
 import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import { useCallback, useContext, useEffect, useState } from 'react'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import type { SessionTypes } from '@walletconnect/types'
 import { WalletConnectContext } from '@/features/walletconnect/WalletConnectContext'
 import WcConnectionForm from '../WcConnectionForm'
@@ -28,11 +28,11 @@ const WcSessionManager = ({ sessions, uri }: WcSessionManagerProps) => {
   const { walletConnect, error, setError, open, setOpen, setIsLoading } = useContext(WalletConnectContext)
   const { safe, safeAddress } = useSafeInfo()
   const { chainId } = safe
-  const [proposal, setProposal] = useState<Web3WalletTypes.SessionProposal>()
+  const [proposal, setProposal] = useState<WalletKitTypes.SessionProposal>()
 
   // On session approve
   const onApprove = useCallback(
-    async (proposalData?: Web3WalletTypes.SessionProposal) => {
+    async (proposalData?: WalletKitTypes.SessionProposal) => {
       const sessionProposal = proposalData || proposal
 
       if (!walletConnect || !chainId || !safeAddress || !sessionProposal) return

src/features/walletconnect/services/WalletConnectWallet.ts

@@ -1,8 +1,7 @@
 import { Core } from '@walletconnect/core'
-import { Web3Wallet } from '@walletconnect/web3wallet'
+import { WalletKit, type WalletKitTypes } from '@reown/walletkit'
 import { buildApprovedNamespaces, getSdkError } from '@walletconnect/utils'
-import type Web3WalletType from '@walletconnect/web3wallet'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type Web3WalletType from '@reown/walletkit'
 import type { ProposalTypes, SessionTypes } from '@walletconnect/types'
 import { type JsonRpcResponse } from '@walletconnect/jsonrpc-utils'
 import uniq from 'lodash/uniq'
@@ -12,8 +11,8 @@ import { EIP155, SAFE_COMPATIBLE_EVENTS, SAFE_COMPATIBLE_METHODS, SAFE_WALLET_ME
 import { invariant } from '@/utils/helpers'
 import { getEip155ChainId, stripEip155Prefix } from './utils'
 
-const SESSION_ADD_EVENT = 'session_add' as Web3WalletTypes.Event // Workaround: WalletConnect doesn't emit session_add event
-const SESSION_REJECT_EVENT = 'session_reject' as Web3WalletTypes.Event // Workaround: WalletConnect doesn't emit session_reject event
+const SESSION_ADD_EVENT = 'session_add' as WalletKitTypes.Event // Workaround: WalletConnect doesn't emit session_add event
+const SESSION_REJECT_EVENT = 'session_reject' as WalletKitTypes.Event // Workaround: WalletConnect doesn't emit session_reject event
 
 function assertWeb3Wallet<T extends Web3WalletType | null>(web3Wallet: T): asserts web3Wallet {
   return invariant(web3Wallet, 'WalletConnect not initialized')
@@ -39,7 +38,7 @@ class WalletConnectWallet {
       customStoragePrefix: LS_NAMESPACE,
     })
 
-    const web3wallet = await Web3Wallet.init({
+    const web3wallet = await WalletKit.init({
       core,
       metadata: SAFE_WALLET_METADATA,
     })
@@ -81,7 +80,7 @@ class WalletConnectWallet {
     })
   }
 
-  private getNamespaces(proposal: Web3WalletTypes.SessionProposal, currentChainId: string, safeAddress: string) {
+  private getNamespaces(proposal: WalletKitTypes.SessionProposal, currentChainId: string, safeAddress: string) {
     // As workaround, we pretend to support all the required chains plus the current Safe's chain
     const requiredChains = proposal.params.requiredNamespaces[EIP155]?.chains || []
 
@@ -108,7 +107,7 @@ class WalletConnectWallet {
   }
 
   public async approveSession(
-    proposal: Web3WalletTypes.SessionProposal,
+    proposal: WalletKitTypes.SessionProposal,
     currentChainId: string,
     safeAddress: string,
     sessionProperties?: ProposalTypes.SessionProperties,
@@ -182,7 +181,7 @@ class WalletConnectWallet {
     }
   }
 
-  public async rejectSession(proposal: Web3WalletTypes.SessionProposal) {
+  public async rejectSession(proposal: WalletKitTypes.SessionProposal) {
     assertWeb3Wallet(this.web3Wallet)
 
     await this.web3Wallet.rejectSession({
@@ -197,7 +196,7 @@ class WalletConnectWallet {
   /**
    * Subscribe to session proposals
    */
-  public onSessionPropose(handler: (e: Web3WalletTypes.SessionProposal) => void) {
+  public onSessionPropose(handler: (e: WalletKitTypes.SessionProposal) => void) {
     // Subscribe to the session proposal event
     this.web3Wallet?.on('session_proposal', handler)
 
@@ -210,7 +209,7 @@ class WalletConnectWallet {
   /**
    * Subscribe to session proposal rejections
    */
-  public onSessionReject(handler: (e: Web3WalletTypes.SessionProposal) => void) {
+  public onSessionReject(handler: (e: WalletKitTypes.SessionProposal) => void) {
     // @ts-expect-error - custom event payload
     this.web3Wallet?.on(SESSION_REJECT_EVENT, handler)
 
@@ -273,7 +272,7 @@ class WalletConnectWallet {
   /**
    * Subscribe to requests
    */
-  public onRequest(handler: (event: Web3WalletTypes.SessionRequest) => void) {
+  public onRequest(handler: (event: WalletKitTypes.SessionRequest) => void) {
     this.web3Wallet?.on('session_request', handler)
 
     return () => {