refactor:@reown/walletkit (#710)

* refactor: replaces `@walletconnect/web3wallet` with `@reown/walletkit`

* refactor: package name

Author: ganchoradkov

advanced/wallets/react-wallet-v2/package.json

@@ -33,7 +33,7 @@
     "@taquito/signer": "^15.1.0",
     "@taquito/taquito": "^15.1.0",
     "@types/semver": "^7.5.8",
-    "@walletconnect/web3wallet": "1.15.1",
+    "@reown/walletkit": "1.0.0",
     "@zerodev/ecdsa-validator": "5.3.0",
     "@zerodev/presets": "5.3.0",
     "@zerodev/sdk": "5.3.1",

advanced/wallets/react-wallet-v2/src/components/Modal.tsx

@@ -16,7 +16,6 @@ import SessionSendCallsModal from '@/views/SessionSendCallsModal'
 import { Modal as NextModal } from '@nextui-org/react'
 import { useSnapshot } from 'valtio'
 import { useCallback, useMemo } from 'react'
-import AuthRequestModal from '@/views/AuthRequestModal'
 import LoadingModal from '@/views/LoadingModal'
 import SessionAuthenticateModal from '@/views/SessionAuthenticateModal'
 import SessionGrantPermissionsModal from '@/views/SessionGrantPermissionsModal'
@@ -62,8 +61,6 @@ export default function Modal() {
         return <SessionSignTezosModal />
       case 'SessionSignKadenaModal':
         return <SessionSignKadenaModal />
-      case 'AuthRequestModal':
-        return <AuthRequestModal />
       case 'LoadingModal':
         return <LoadingModal />
       case 'SessionAuthenticateModal':

advanced/wallets/react-wallet-v2/src/components/MultibridgeRequestModal.tsx

@@ -2,7 +2,7 @@ import { LoaderProps } from '@/components/ModalFooter'
 
 import RequestMethodCard from '@/components/RequestMethodCard'
 import { Avatar, Col, Container, Divider, Row, Text } from '@nextui-org/react'
-import { web3wallet } from '@/utils/WalletConnectUtil'
+import { walletkit } from '@/utils/WalletConnectUtil'
 import RequestModal from './RequestModal'
 import ModalStore from '@/store/ModalStore'
 import { useCallback, useState } from 'react'
@@ -92,7 +92,7 @@ export default function MultibridgeRequestModal({
           } ms`
         )
 
-        await web3wallet.respondSessionRequest({
+        await walletkit.respondSessionRequest({
           topic,
           response
         })

advanced/wallets/react-wallet-v2/src/hooks/useInitialization.ts

@@ -7,7 +7,7 @@ import { createOrRestoreNearWallet } from '@/utils/NearWalletUtil'
 import { createOrRestoreMultiversxWallet } from '@/utils/MultiversxWalletUtil'
 import { createOrRestoreTronWallet } from '@/utils/TronWalletUtil'
 import { createOrRestoreTezosWallet } from '@/utils/TezosWalletUtil'
-import { createWeb3Wallet, web3wallet } from '@/utils/WalletConnectUtil'
+import { createWalletKit, walletkit } from '@/utils/WalletConnectUtil'
 import { createOrRestoreKadenaWallet } from '@/utils/KadenaWalletUtil'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useSnapshot } from 'valtio'
@@ -42,7 +42,7 @@ export default function useInitialization() {
       SettingsStore.setTronAddress(tronAddresses[0])
       SettingsStore.setTezosAddress(tezosAddresses[0])
       SettingsStore.setKadenaAddress(kadenaAddresses[0])
-      await createWeb3Wallet(relayerRegionURL)
+      await createWalletKit(relayerRegionURL)
       setInitialized(true)
     } catch (err: unknown) {
       console.error('Initialization failed', err)
@@ -54,7 +54,7 @@ export default function useInitialization() {
   // restart transport if relayer region changes
   const onRelayerRegionChange = useCallback(() => {
     try {
-      web3wallet?.core?.relayer.restartTransport(relayerRegionURL)
+      walletkit?.core?.relayer.restartTransport(relayerRegionURL)
       prevRelayerURLValue.current = relayerRegionURL
     } catch (err: unknown) {
       alert(err)

advanced/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts

@@ -1,4 +1,3 @@
-import { Web3WalletTypes } from '@walletconnect/web3wallet'
 import { COSMOS_SIGNING_METHODS } from '@/data/COSMOSData'
 import { EIP155_SIGNING_METHODS } from '@/data/EIP155Data'
 import { EIP5792_METHODS } from '@/data/EIP5792Data'
@@ -8,7 +7,7 @@ import { MULTIVERSX_SIGNING_METHODS } from '@/data/MultiversxData'
 import { TRON_SIGNING_METHODS } from '@/data/TronData'
 import ModalStore from '@/store/ModalStore'
 import SettingsStore from '@/store/SettingsStore'
-import { web3wallet } from '@/utils/WalletConnectUtil'
+import { walletkit } from '@/utils/WalletConnectUtil'
 import { SignClientTypes } from '@walletconnect/types'
 import { useCallback, useEffect, useMemo } from 'react'
 import { NEAR_SIGNING_METHODS } from '@/data/NEARData'
@@ -35,12 +34,6 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
     },
     []
   )
-  /******************************************************************************
-   * 2. Open Auth modal for confirmation / rejection
-   *****************************************************************************/
-  const onAuthRequest = useCallback((request: Web3WalletTypes.AuthRequest) => {
-    ModalStore.open('AuthRequestModal', { request })
-  }, [])
 
   /******************************************************************************
    * 3. Open request handling modal based on method that was used
@@ -49,7 +42,7 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
     async (requestEvent: SignClientTypes.EventArguments['session_request']) => {
       const { topic, params, verifyContext, id } = requestEvent
       const { request } = params
-      const requestSession = web3wallet.engine.signClient.session.get(topic)
+      const requestSession = walletkit.engine.signClient.session.get(topic)
       // set the verify context so it can be displayed in the projectInfoCard
       SettingsStore.setCurrentRequestVerifyContext(verifyContext)
       switch (request.method) {
@@ -72,13 +65,13 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
 
         case EIP5792_METHODS.WALLET_GET_CAPABILITIES:
         case EIP5792_METHODS.WALLET_GET_CALLS_STATUS:
-          return await web3wallet.respondSessionRequest({
+          return await walletkit.respondSessionRequest({
             topic,
             response: await approveEIP5792Request(requestEvent)
           })
 
         case EIP5792_METHODS.WALLET_SHOW_CALLS_STATUS:
-          return await web3wallet.respondSessionRequest({
+          return await walletkit.respondSessionRequest({
             topic,
             response: formatJsonRpcError(id, "Wallet currently don't show call status.")
           })
@@ -91,7 +84,7 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
              * if EOA, we can submit call one by one, but need to have a data structure
              * to return bundle id, for all the calls,
              */
-            return await web3wallet.respondSessionRequest({
+            return await walletkit.respondSessionRequest({
               topic,
               response: formatJsonRpcError(id, "Wallet currently don't support batch call for EOA")
             })
@@ -131,7 +124,7 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
           return ModalStore.open('SessionSignMultiversxModal', { requestEvent, requestSession })
 
         case NEAR_SIGNING_METHODS.NEAR_GET_ACCOUNTS:
-          return web3wallet.respondSessionRequest({
+          return walletkit.respondSessionRequest({
             topic,
             response: await approveNearRequest(requestEvent)
           })
@@ -166,21 +159,19 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
    * Set up WalletConnect event listeners
    *****************************************************************************/
   useEffect(() => {
-    if (initialized && web3wallet) {
+    if (initialized && walletkit) {
       //sign
-      web3wallet.on('session_proposal', onSessionProposal)
-      web3wallet.on('session_request', onSessionRequest)
-      // auth
-      web3wallet.on('auth_request', onAuthRequest)
+      walletkit.on('session_proposal', onSessionProposal)
+      walletkit.on('session_request', onSessionRequest)
       // TODOs
-      web3wallet.engine.signClient.events.on('session_ping', data => console.log('ping', data))
-      web3wallet.on('session_delete', data => {
+      walletkit.engine.signClient.events.on('session_ping', data => console.log('ping', data))
+      walletkit.on('session_delete', data => {
         console.log('session_delete event received', data)
         refreshSessionsList()
       })
-      web3wallet.on('session_authenticate', onSessionAuthenticate)
+      walletkit.on('session_authenticate', onSessionAuthenticate)
       // load sessions on init
       refreshSessionsList()
     }
-  }, [initialized, onAuthRequest, onSessionAuthenticate, onSessionProposal, onSessionRequest])
+  }, [initialized, onSessionAuthenticate, onSessionProposal, onSessionRequest])
 }

advanced/wallets/react-wallet-v2/src/lib/NearLib.ts

@@ -7,7 +7,7 @@ import {
 } from 'near-api-js'
 import { AccessKeyView } from 'near-api-js/lib/providers/provider'
 
-import { web3wallet } from '@/utils/WalletConnectUtil'
+import { walletkit } from '@/utils/WalletConnectUtil'
 import { NEAR_TEST_CHAINS, TNearChain } from '@/data/NEARData'
 import { Schema, serialize } from 'borsh'
 
@@ -184,7 +184,7 @@ export class NearWallet {
   }
 
   private isAccountsValid(topic: string, accounts: Array<{ accountId: string }>) {
-    const session = web3wallet.engine.signClient.session.get(topic)
+    const session = walletkit.engine.signClient.session.get(topic)
     const validAccountIds = session.namespaces.near.accounts.map(accountId => {
       return accountId.split(':')[2]
     })
@@ -243,7 +243,7 @@ export class NearWallet {
   }
 
   async getAccounts({ topic }: GetAccountsParams): Promise<Array<Account>> {
-    const session = web3wallet.engine.signClient.session.get(topic)
+    const session = walletkit.engine.signClient.session.get(topic)
     return Promise.all(
       session.namespaces.near.accounts.map(async account => {
         const accountId = account.split(':')[2]

advanced/wallets/react-wallet-v2/src/pages/_app.tsx

@@ -6,7 +6,7 @@ import Layout from '@/components/Layout'
 import Modal from '@/components/Modal'
 import useInitialization from '@/hooks/useInitialization'
 import useWalletConnectEventsManager from '@/hooks/useWalletConnectEventsManager'
-import { web3wallet } from '@/utils/WalletConnectUtil'
+import { walletkit } from '@/utils/WalletConnectUtil'
 import { RELAYER_EVENTS } from '@walletconnect/core'
 import { AppProps } from 'next/app'
 import '../../public/main.css'
@@ -20,11 +20,11 @@ export default function App({ Component, pageProps }: AppProps) {
   useWalletConnectEventsManager(initialized)
   useEffect(() => {
     if (!initialized) return
-    web3wallet?.core.relayer.on(RELAYER_EVENTS.connect, () => {
+    walletkit?.core.relayer.on(RELAYER_EVENTS.connect, () => {
       styledToast('Network connection is restored!', 'success')
     })
 
-    web3wallet?.core.relayer.on(RELAYER_EVENTS.disconnect, () => {
+    walletkit?.core.relayer.on(RELAYER_EVENTS.disconnect, () => {
       styledToast('Network connection lost.', 'error')
     })
   }, [initialized])

advanced/wallets/react-wallet-v2/src/pages/pairings.tsx

@@ -1,15 +1,15 @@
 import PageHeader from '@/components/PageHeader'
 import PairingCard from '@/components/PairingCard'
-import { web3wallet } from '@/utils/WalletConnectUtil'
+import { walletkit } from '@/utils/WalletConnectUtil'
 import { Text } from '@nextui-org/react'
 import { getSdkError } from '@walletconnect/utils'
 import { Fragment, useState } from 'react'
 
 export default function PairingsPage() {
-  const [pairings, setPairings] = useState(web3wallet.core.pairing.getPairings())
+  const [pairings, setPairings] = useState(walletkit.core.pairing.getPairings())
 
   async function onDelete(topic: string) {
-    await web3wallet.disconnectSession({ topic, reason: getSdkError('USER_DISCONNECTED') })
+    await walletkit.disconnectSession({ topic, reason: getSdkError('USER_DISCONNECTED') })
     const newPairings = pairings.filter(pairing => pairing.topic !== topic)
     setPairings(newPairings)
   }

advanced/wallets/react-wallet-v2/src/pages/session.tsx

@@ -3,7 +3,7 @@ import PageHeader from '@/components/PageHeader'
 import ProjectInfoCard from '@/components/ProjectInfoCard'
 import SessionChainCard from '@/components/SessionChainCard'
 import { styledToast } from '@/utils/HelperUtil'
-import { web3wallet } from '@/utils/WalletConnectUtil'
+import { walletkit } from '@/utils/WalletConnectUtil'
 import { Button, Col, Divider, Loading, Row, Text } from '@nextui-org/react'
 import { getSdkError } from '@walletconnect/utils'
 import { useRouter } from 'next/router'
@@ -29,7 +29,7 @@ export default function SessionPage() {
   }, [query])
 
   const session = useMemo(
-    () => web3wallet.engine.signClient.session.values.find(s => s.topic === topic),
+    () => walletkit.engine.signClient.session.values.find(s => s.topic === topic),
     [topic]
   )
   const namespaces = useMemo(() => session?.namespaces, [session])
@@ -38,7 +38,7 @@ export default function SessionPage() {
   const expiryDate = useMemo(() => new Date(session?.expiry! * 1000), [session])
   const getPendingRequests = useCallback(() => {
     if (!session) return
-    const allPending = web3wallet.getPendingSessionRequests()
+    const allPending = walletkit.getPendingSessionRequests()
     const requestsForSession = allPending?.filter(r => r.topic === session.topic)
     setPendingRequests(requestsForSession)
   }, [session])
@@ -55,7 +55,7 @@ export default function SessionPage() {
   const onDeleteSession = useCallback(async () => {
     setDeleteLoading(true)
     try {
-      await web3wallet.disconnectSession({ topic, reason: getSdkError('USER_DISCONNECTED') })
+      await walletkit.disconnectSession({ topic, reason: getSdkError('USER_DISCONNECTED') })
       replace('/sessions')
     } catch (e) {
       styledToast((e as Error).message, 'error')
@@ -65,7 +65,7 @@ export default function SessionPage() {
 
   const onSessionPing = useCallback(async () => {
     setPingLoading(true)
-    await web3wallet.engine.signClient.ping({ topic })
+    await walletkit.engine.signClient.ping({ topic })
     setPingLoading(false)
   }, [topic])
 
@@ -74,7 +74,7 @@ export default function SessionPage() {
     try {
       const namespace = Object.keys(session?.namespaces!)[0]
       const chainId = session?.namespaces[namespace].chains?.[0]
-      await web3wallet.emitSessionEvent({
+      await walletkit.emitSessionEvent({
         topic,
         event: { name: 'chainChanged', data: 'Hello World' },
         chainId: chainId! // chainId: 'eip155:1'
@@ -88,11 +88,11 @@ export default function SessionPage() {
   const onSessionUpdate = useCallback(async () => {
     setUpdateLoading(true)
     try {
-      const session = web3wallet.engine.signClient.session.get(topic)
+      const session = walletkit.engine.signClient.session.get(topic)
       const baseAddress = '0x70012948c348CBF00806A3C79E3c5DAdFaAa347'
       const namespaceKeyToUpdate = Object.keys(session?.namespaces)[0]
       const namespaceToUpdate = session?.namespaces[namespaceKeyToUpdate]
-      await web3wallet.updateSession({
+      await walletkit.updateSession({
         topic,
         namespaces: {
           ...session?.namespaces,

advanced/wallets/react-wallet-v2/src/pages/settings.tsx

@@ -40,8 +40,8 @@ export default function SettingsPage() {
         Packages
       </Text>
       <Row justify="space-between" align="center">
-        <Text color="$gray400">@walletconnect/web3wallet</Text>
-        <Text color="$gray400">{packageJSON.dependencies['@walletconnect/web3wallet']}</Text>
+        <Text color="$gray400">@reown/walletkit</Text>
+        <Text color="$gray400">{packageJSON.dependencies['@reown/walletkit']}</Text>
       </Row>
 
       <Divider y={2} />

advanced/wallets/react-wallet-v2/src/pages/walletconnect.tsx

@@ -1,7 +1,7 @@
 import { parseUri } from '@walletconnect/utils'
 import PageHeader from '@/components/PageHeader'
 import QrReader from '@/components/QrReader'
-import { web3wallet } from '@/utils/WalletConnectUtil'
+import { walletkit } from '@/utils/WalletConnectUtil'
 import { Button, Input, Loading, Text } from '@nextui-org/react'
 import { Fragment, useEffect, useState } from 'react'
 import { styledToast } from '@/utils/HelperUtil'
@@ -19,16 +19,16 @@ export default function WalletConnectPage(params: { deepLink?: string }) {
       if (pairingTopic === topic) {
         styledToast('Pairing expired. Please try again with new Connection URI', 'error')
         ModalStore.close()
-        web3wallet.core.pairing.events.removeListener('pairing_expire', pairingExpiredListener)
+        walletkit.core.pairing.events.removeListener('pairing_expire', pairingExpiredListener)
       }
     }
-    web3wallet.once('session_proposal', () => {
-      web3wallet.core.pairing.events.removeListener('pairing_expire', pairingExpiredListener)
+    walletkit.once('session_proposal', () => {
+      walletkit.core.pairing.events.removeListener('pairing_expire', pairingExpiredListener)
     })
     try {
       setLoading(true)
-      web3wallet.core.pairing.events.on('pairing_expire', pairingExpiredListener)
-      await web3wallet.pair({ uri })
+      walletkit.core.pairing.events.on('pairing_expire', pairingExpiredListener)
+      await walletkit.pair({ uri })
     } catch (error) {
       styledToast((error as Error).message, 'error')
       ModalStore.close()

advanced/wallets/react-wallet-v2/src/pages/wc.tsx

@@ -5,7 +5,7 @@ import WalletConnectPage from './walletconnect'
 import ModalStore from '@/store/ModalStore'
 import { useSnapshot } from 'valtio'
 import SettingsStore from '@/store/SettingsStore'
-import { web3wallet } from '@/utils/WalletConnectUtil'
+import { walletkit } from '@/utils/WalletConnectUtil'
 
 export default function DeepLinkPairingPage() {
   const state = useSnapshot(ModalStore.state)
@@ -58,6 +58,6 @@ export default function DeepLinkPairingPage() {
 }
 
 export function refreshSessionsList() {
-  if (!web3wallet) return
-  SettingsStore.setSessions(Object.values(web3wallet.getActiveSessions()))
+  if (!walletkit) return
+  SettingsStore.setSessions(Object.values(walletkit.getActiveSessions()))
 }

advanced/wallets/react-wallet-v2/src/store/ModalStore.ts

@@ -1,5 +1,5 @@
 import { SessionTypes, SignClientTypes } from '@walletconnect/types'
-import { Web3WalletTypes } from '@walletconnect/web3wallet'
+import { WalletKitTypes } from '@reown/walletkit'
 import { proxy } from 'valtio'
 
 /**
@@ -9,7 +9,6 @@ interface ModalData {
   proposal?: SignClientTypes.EventArguments['session_proposal']
   requestEvent?: SignClientTypes.EventArguments['session_request']
   requestSession?: SessionTypes.Struct
-  request?: Web3WalletTypes.AuthRequest
   loadingMessage?: string
   authRequest?: SignClientTypes.EventArguments['session_authenticate']
 }
@@ -32,7 +31,6 @@ interface State {
     | 'SessionSignTronModal'
     | 'SessionSignTezosModal'
     | 'SessionSignKadenaModal'
-    | 'AuthRequestModal'
     | 'SessionAuthenticateModal'
     | 'LoadingModal'
   data?: ModalData