pass client to waitForTransactionReceipt

packages/core/src/actions/getClient.test.ts

@@ -1,6 +1,10 @@
-import { config } from '@wagmi/test'
-import { expect, test } from 'vitest'
+import { chain, config } from '@wagmi/test'
+import { expect, expectTypeOf, test } from 'vitest'
 
+import { http } from 'viem'
+import { waitForTransactionReceipt } from '../actions/waitForTransactionReceipt.js'
+import { createConfig } from '../createConfig.js'
+import { optimism, optimismSepolia } from '../exports/chains.js'
 import { getClient } from './getClient.js'
 
 test('default', () => {
@@ -15,3 +19,50 @@ test('behavior: unconfigured chain', () => {
     }),
   ).toBeUndefined()
 })
+
+test('default', () => {
+  const client = getClient(config)
+  expectTypeOf(client.chain).toEqualTypeOf<typeof config['chains'][number]>()
+  expectTypeOf(client.transport.type).toEqualTypeOf<'http'>()
+})
+
+test('parameters: chainId', () => {
+  const client = getClient(config, {
+    chainId: chain.mainnet.id,
+  })
+  expectTypeOf(client.chain).toEqualTypeOf<typeof chain.mainnet>()
+  expectTypeOf(client.chain).not.toEqualTypeOf<typeof chain.mainnet2>()
+  expectTypeOf(client.transport.type).toEqualTypeOf<'http'>()
+})
+
+test('behavior: viem actions', () => {
+  const viemActionChains = [optimismSepolia, optimism] as const
+  const viemActionsTransports = {
+    [optimismSepolia.id]: http(),
+    [optimism.id]: http(),
+  } as const
+  const configObject = {
+    chains: viemActionChains,
+    transports: viemActionsTransports,
+  } as const
+
+  const config = createConfig(configObject)
+
+  const client = getClient(config)
+
+  waitForTransactionReceipt(
+    {
+      ...config,
+      client,
+    },
+    { hash: '0x…' },
+  )
+})
+
+test('behavior: unconfigured chain', () => {
+  const client = getClient(config, {
+    // @ts-expect-error
+    chainId: 123456,
+  })
+  expectTypeOf(client).toEqualTypeOf<undefined>()
+})

playgrounds/vite-react/src/App.tsx

@@ -7,6 +7,7 @@ import {
   useBalance,
   useBlockNumber,
   useChainId,
+  useClient,
   useConnect,
   useConnections,
   useConnectorClient,
@@ -24,6 +25,7 @@ import {
 import { optimism } from 'wagmi/chains'
 
 import { wagmiContractConfig } from './contracts'
+import { ChainIds, config } from './wagmi'
 
 function App() {
   useAccountEffect({
@@ -138,7 +140,7 @@ function SwitchChain() {
         <button
           disabled={chainId === chain.id}
           key={chain.id}
-          onClick={() => switchChain({ chainId: chain.id })}
+          onClick={() => switchChain({ chainId: chain.id as ChainIds })}
           type="button"
         >
           {chain.name}
@@ -246,6 +248,8 @@ function ConnectorClient() {
 
 function SendTransaction() {
   const { data: hash, error, isPending, sendTransaction } = useSendTransaction()
+  const { data: connectorClientData } = useConnectorClient()
+  const client = useClient()
 
   async function submit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -255,8 +259,15 @@ function SendTransaction() {
     sendTransaction({ to, value: parseEther(value) })
   }
 
-  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+  const { isLoading: isConfirming, data: receipt } =
     useWaitForTransactionReceipt({
+      config: {
+        ...config,
+        // Additionally, we can pass a client to the config
+        // to use a different client than the one passed to the hook
+        client,
+      },
+      chainId: connectorClientData?.chain?.id,
       hash,
     })
 
@@ -278,7 +289,7 @@ function SendTransaction() {
       </form>
       {hash && <div>Transaction Hash: {hash}</div>}
       {isConfirming && 'Waiting for confirmation...'}
-      {isConfirmed && 'Transaction confirmed.'}
+      {`Transaction ${receipt?.status}`}
       {error && (
         <div>Error: {(error as BaseError).shortMessage || error.message}</div>
       )}

playgrounds/vite-react/src/wagmi.ts

@@ -16,8 +16,11 @@ const indexedDBStorage = {
   },
 }
 
+const chains = [mainnet, sepolia, optimism, celo] as const
+export type ChainIds = typeof chains[number]['id']
+
 export const config = createConfig({
-  chains: [mainnet, sepolia, optimism, celo],
+  chains,
   connectors: [
     walletConnect({
       projectId: import.meta.env.VITE_WC_PROJECT_ID,