Switch account action

src/components/@molecules/TransactionDialogManager/stage/TransactionStageModal.tsx

@@ -1,10 +1,11 @@
 import { queryOptions } from '@tanstack/react-query'
+import { switchChain } from '@wagmi/core'
 import { Dispatch, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import { match, P } from 'ts-pattern'
 import { BaseError } from 'viem'
-import { useClient, useConnectorClient, useSendTransaction } from 'wagmi'
+import { useAccount, useClient, useConnectorClient, useSendTransaction } from 'wagmi'
 
 import {
   Button,
@@ -36,6 +37,7 @@ import { ConfigWithEns, TransactionDisplayItem } from '@app/types'
 import { getReadableError } from '@app/utils/errors'
 import { getIsCachedData } from '@app/utils/getIsCachedData'
 import { useQuery } from '@app/utils/query/useQuery'
+import { wagmiConfig } from '@app/utils/query/wagmi'
 import { makeEtherscanLink } from '@app/utils/utils'
 
 import { DisplayItems } from '../DisplayItems'
@@ -323,7 +325,7 @@ export const TransactionStageModal = ({
   const { data: isSafeApp, isLoading: safeAppStatusLoading } = useIsSafeApp()
   const { data: connectorClient } = useConnectorClient<ConfigWithEns>()
   const client = useClient()
-
+  const { data: account } = useAccount()
   const addRecentTransaction = useAddRecentTransaction()
 
   const stage = transaction.stage || 'confirm'
@@ -548,7 +550,10 @@ export const TransactionStageModal = ({
           !!requestError ||
           isTransactionRequestCachedData
         }
-        onClick={() => {
+        onClick={async () => {
+          if (account?.chain?.id !== request?.chainId) {
+            await switchChain(wagmiConfig, { chainId: request?.chainId })
+          }
           sendTransaction(request!)
 
           const eventName = match(actionName)