Refactor: Replace onboard with Eip1193Provider in dispatch calls

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

src/components/common/BuyCryptoButton/index.tsx

@@ -21,7 +21,7 @@ const useOnrampAppUrl = (): string | undefined => {
 
 const useBuyCryptoHref = (): LinkProps['href'] | undefined => {
   const query = useSearchParams()
-  const safe = query.get('safe')
+  const safe = query?.get('safe')
   const appUrl = useOnrampAppUrl()
 
   return useMemo(() => {

src/components/common/SafeTokenWidget/index.tsx

@@ -54,7 +54,7 @@ const SafeTokenWidget = () => {
 
   const url = {
     pathname: AppRoutes.apps.open,
-    query: { safe: query.get('safe'), appUrl: GOVERNANCE_APP_URL },
+    query: { safe: query?.get('safe'), appUrl: GOVERNANCE_APP_URL },
   }
 
   const canRedeemSep5 = canRedeemSep5Airdrop(allocationData)

src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx

@@ -1,3 +1,5 @@
+import useWallet from '@/hooks/wallets/useWallet'
+import { assertWalletChain } from '@/services/tx/tx-sender/sdk'
 import { CircularProgress, Typography, Button, CardActions, Divider, Alert } from '@mui/material'
 import useAsync from '@/hooks/useAsync'
 import { FEATURES } from '@safe-global/safe-gateway-typescript-sdk'
@@ -60,6 +62,7 @@ export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
   const canRelay = hasRemainingRelays(relays)
   const willRelay = canRelay && executionMethod === ExecutionMethod.RELAY
   const onboard = useOnboard()
+  const wallet = useWallet()
 
   const [txsWithDetails, error, loading] = useAsync<TransactionDetails[]>(() => {
     if (!chain?.chainId) return
@@ -87,20 +90,23 @@ export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
   }, [txsWithDetails, multiSendTxs])
 
   const onExecute = async () => {
-    if (!userNonce || !onboard || !multiSendTxData || !multiSendContract || !txsWithDetails || !gasPrice) return
+    if (!userNonce || !onboard || !wallet || !multiSendTxData || !multiSendContract || !txsWithDetails || !gasPrice)
+      return
 
     const overrides: Overrides = isEIP1559
       ? { maxFeePerGas: maxFeePerGas?.toString(), maxPriorityFeePerGas: maxPriorityFeePerGas?.toString() }
       : { gasPrice: maxFeePerGas?.toString() }
 
     overrides.nonce = userNonce
 
+    await assertWalletChain(onboard, safe.chainId)
+
     await dispatchBatchExecution(
       txsWithDetails,
       multiSendContract,
       multiSendTxData,
-      onboard,
-      safe.chainId,
+      wallet.provider,
+      wallet.address,
       safe.address.value,
       overrides as Overrides & { nonce: number },
     )

src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx

@@ -1,5 +1,6 @@
 import { trackEvent } from '@/services/analytics'
 import { RECOVERY_EVENTS } from '@/services/analytics/events/recovery'
+import { assertWalletChain } from '@/services/tx/tx-sender/sdk'
 import { CardActions, Button, Typography, Divider, Box, CircularProgress } from '@mui/material'
 import { useContext, useEffect, useState } from 'react'
 import type { ReactElement } from 'react'
@@ -70,7 +71,7 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
 
   // On modal submit
   const onSubmit = async () => {
-    if (!recovery || !onboard || !safeTx) {
+    if (!recovery || !onboard || !wallet || !safeTx) {
       return
     }
 
@@ -79,11 +80,14 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
     setIsRejectedByUser(false)
 
     try {
+      await assertWalletChain(onboard, safe.chainId)
+
       await dispatchRecoveryProposal({
-        onboard,
+        provider: wallet.provider,
         safe,
         safeTx,
         delayModifierAddress: recovery.address,
+        signerAddress: wallet.address,
       })
       trackEvent({ ...RECOVERY_EVENTS.SUBMIT_RECOVERY_ATTEMPT })
     } catch (_err) {

src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx

@@ -1,3 +1,4 @@
+import useWallet from '@/hooks/wallets/useWallet'
 import { useState } from 'react'
 import {
   Dialog,
@@ -14,7 +15,6 @@ import {
 } from '@mui/material'
 import { Close } from '@mui/icons-material'
 import madProps from '@/utils/mad-props'
-import useOnboard from '@/hooks/wallets/useOnboard'
 import useChainId from '@/hooks/useChainId'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import { deleteTx } from '@/utils/gateway'
@@ -32,12 +32,12 @@ type DeleteTxModalProps = {
   safeTxHash: string
   onClose: () => void
   onSuccess: () => void
-  onboard: ReturnType<typeof useOnboard>
+  wallet: ReturnType<typeof useWallet>
   chainId: ReturnType<typeof useChainId>
   safeAddress: ReturnType<typeof useSafeAddress>
 }
 
-const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, onboard, safeAddress, chainId }: DeleteTxModalProps) => {
+const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, wallet, safeAddress, chainId }: DeleteTxModalProps) => {
   const [error, setError] = useState<Error>()
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
@@ -46,15 +46,15 @@ const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, onboard, safeAddress,
     setIsLoading(true)
     trackEvent(REJECT_TX_EVENTS.DELETE_CONFIRM)
 
-    if (!onboard || !safeAddress || !chainId || !safeTxHash) {
+    if (!wallet?.provider || !safeAddress || !chainId || !safeTxHash) {
       setIsLoading(false)
       setError(new Error('Please connect your wallet first'))
       trackEvent(REJECT_TX_EVENTS.DELETE_FAIL)
       return
     }
 
     try {
-      const signer = await getAssertedChainSigner(onboard, chainId)
+      const signer = await getAssertedChainSigner(wallet.provider)
 
       await deleteTx({
         safeTxHash,
@@ -145,7 +145,7 @@ const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, onboard, safeAddress,
 }
 
 const DeleteTxModal = madProps(_DeleteTxModal, {
-  onboard: useOnboard,
+  wallet: useWallet,
   chainId: useChainId,
   safeAddress: useSafeAddress,
 })

src/components/tx-flow/flows/SafeAppsTx/ReviewSafeAppsTx.tsx

@@ -1,4 +1,6 @@
 import { SWAP_TITLE } from '@/features/swap'
+import useWallet from '@/hooks/wallets/useWallet'
+import { assertWalletChain } from '@/services/tx/tx-sender/sdk'
 import { useContext, useEffect, useMemo } from 'react'
 import type { ReactElement } from 'react'
 import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
@@ -26,6 +28,7 @@ const ReviewSafeAppsTx = ({
 }: ReviewSafeAppsTxProps): ReactElement => {
   const { safe } = useSafeInfo()
   const onboard = useOnboard()
+  const wallet = useWallet()
   const { safeTx, setSafeTx, safeTxError, setSafeTxError } = useContext(SafeTxContext)
 
   useHighlightHiddenTab()
@@ -48,12 +51,13 @@ const ReviewSafeAppsTx = ({
   }, [txs, setSafeTx, setSafeTxError, params])
 
   const handleSubmit = async (txId: string) => {
-    if (!safeTx || !onboard) return
+    if (!safeTx || !onboard || !wallet?.provider) return
     trackSafeAppTxCount(Number(appId))
 
     let safeTxHash = ''
     try {
-      safeTxHash = await dispatchSafeAppsTx(safeTx, requestId, onboard, safe.chainId, txId)
+      await assertWalletChain(onboard, safe.chainId)
+      safeTxHash = await dispatchSafeAppsTx(safeTx, requestId, wallet.provider, txId)
     } catch (error) {
       setSafeTxError(asError(error))
     }