feat: useTransaction

packages/register-tests/vue/src/useTransaction.test-d.ts

@@ -0,0 +1,37 @@
+import { config } from '@wagmi/test'
+import { useTransaction } from '@wagmi/vue'
+import { celo } from '@wagmi/vue/chains'
+import { expectTypeOf, test } from 'vitest'
+
+test('chain formatters', () => {
+  const result = useTransaction()
+  if (result.data?.value?.chainId === celo.id) {
+    expectTypeOf(result.data.value.feeCurrency).toEqualTypeOf<
+      `0x${string}` | null
+    >()
+    expectTypeOf(result.data.value.gatewayFee).toEqualTypeOf<
+      bigint | null | undefined
+    >()
+    expectTypeOf(result.data.value.gatewayFeeRecipient).toEqualTypeOf<
+      `0x${string}` | null | undefined
+    >()
+  }
+
+  const result2 = useTransaction({ chainId: celo.id })
+  expectTypeOf(result2.data?.value?.feeCurrency).toEqualTypeOf<
+    `0x${string}` | null | undefined
+  >()
+  expectTypeOf(result2.data?.value?.gatewayFee).toEqualTypeOf<
+    bigint | null | undefined
+  >()
+  expectTypeOf(result2.data?.value?.gatewayFeeRecipient).toEqualTypeOf<
+    `0x${string}` | null | undefined
+  >()
+})
+
+test('parameters: config', async () => {
+  const result = useTransaction({ config })
+
+  if (result.data && 'feeCurrency' in result.data)
+    expectTypeOf(result.data.feeCurrency).toEqualTypeOf<unknown>()
+})

packages/vue/src/composables/useTransaction.test-d.ts

@@ -0,0 +1,14 @@
+import { expectTypeOf, test } from 'vitest'
+
+import { useTransaction } from './useTransaction.js'
+
+test('select data', () => {
+  const result = useTransaction({
+    query: {
+      select(data) {
+        return data?.nonce
+      },
+    },
+  })
+  expectTypeOf(result.data.value).toEqualTypeOf<number | undefined>()
+})

packages/vue/src/composables/useTransaction.test.ts

@@ -0,0 +1,74 @@
+import { renderComposable, waitFor } from '@wagmi/test/vue'
+import { expect, test } from 'vitest'
+
+import { deepUnref } from '../utils/cloneDeep.js'
+import { useTransaction } from './useTransaction.js'
+
+test('default', async () => {
+  const [result] = renderComposable(() =>
+    useTransaction({
+      hash: '0x60668ed8c2dc110d61d945a936fcd45b8f13654e5c78481c8c825d1148c7ef30',
+    }),
+  )
+
+  await waitFor(result.isSuccess, (isSuccess) => isSuccess)
+
+  expect(deepUnref(result)).toMatchInlineSnapshot(`
+    {
+      "data": {
+        "accessList": [],
+        "blockHash": "0xd725a38b51e5ceec8c5f6c9ccfdb2cc423af993bb650af5eedca5e4be7156ba7",
+        "blockNumber": 15189204n,
+        "chainId": 1,
+        "from": "0xa0cf798816d4b9b9866b5330eea46a18382f251e",
+        "gas": 21000n,
+        "gasPrice": 9371645552n,
+        "hash": "0x60668ed8c2dc110d61d945a936fcd45b8f13654e5c78481c8c825d1148c7ef30",
+        "input": "0x",
+        "maxFeePerGas": 13644824566n,
+        "maxPriorityFeePerGas": 1500000000n,
+        "nonce": 86,
+        "r": "0x40174f9a38df876c1a7ce2587848819d4082ccd6d67a88aa5cabe59bf594e14f",
+        "s": "0x7c0c82f62a8a5a9b0e9cf30a54a72fdae8fc54b5b79ddafef0acd30e94e83872",
+        "to": "0xd2135cfb216b74109775236e36d4b433f1df507b",
+        "transactionIndex": 144,
+        "type": "eip1559",
+        "typeHex": "0x2",
+        "v": 0n,
+        "value": 100000000000000000n,
+        "yParity": 0,
+      },
+      "dataUpdatedAt": 1675209600000,
+      "error": null,
+      "errorUpdateCount": 0,
+      "errorUpdatedAt": 0,
+      "failureCount": 0,
+      "failureReason": null,
+      "fetchStatus": "idle",
+      "isError": false,
+      "isFetched": true,
+      "isFetchedAfterMount": true,
+      "isFetching": false,
+      "isInitialLoading": false,
+      "isLoading": false,
+      "isLoadingError": false,
+      "isPaused": false,
+      "isPending": false,
+      "isPlaceholderData": false,
+      "isRefetchError": false,
+      "isRefetching": false,
+      "isStale": true,
+      "isSuccess": true,
+      "queryKey": [
+        "transaction",
+        {
+          "chainId": 1,
+          "hash": "0x60668ed8c2dc110d61d945a936fcd45b8f13654e5c78481c8c825d1148c7ef30",
+        },
+      ],
+      "refetch": [Function],
+      "status": "success",
+      "suspense": [Function],
+    }
+  `)
+})

packages/vue/src/composables/useTransaction.ts

@@ -0,0 +1,88 @@
+import type {
+  Config,
+  GetTransactionErrorType,
+  ResolvedRegister,
+} from '@wagmi/core'
+import { type Evaluate } from '@wagmi/core/internal'
+import {
+  type GetTransactionData,
+  type GetTransactionOptions,
+  type GetTransactionQueryFnData,
+  type GetTransactionQueryKey,
+  getTransactionQueryOptions,
+} from '@wagmi/core/query'
+
+import { computed } from 'vue'
+import type { ConfigParameter, QueryParameter } from '../types/properties.js'
+import type { DeepMaybeRef } from '../types/ref.js'
+import { deepUnref } from '../utils/cloneDeep.js'
+import { type UseQueryReturnType, useQuery } from '../utils/query.js'
+import { useChainId } from './useChainId.js'
+import { useConfig } from './useConfig.js'
+
+export type UseTransactionParameters<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetTransactionData<config, chainId>,
+> = Evaluate<
+  DeepMaybeRef<
+    GetTransactionOptions<config, chainId> &
+      ConfigParameter<config> &
+      QueryParameter<
+        GetTransactionQueryFnData<config, chainId>,
+        GetTransactionErrorType,
+        selectData,
+        GetTransactionQueryKey<config, chainId>
+      >
+  >
+>
+
+export type UseTransactionReturnType<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetTransactionData<config, chainId>,
+> = UseQueryReturnType<selectData, GetTransactionErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useTransaction */
+export function useTransaction<
+  config extends Config = ResolvedRegister['config'],
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetTransactionData<config, chainId>,
+>(
+  parameters_: UseTransactionParameters<config, chainId, selectData> = {},
+): UseTransactionReturnType<config, chainId, selectData> {
+  const parameters = computed(() => deepUnref(parameters_))
+
+  const config = useConfig(parameters)
+  const configChainId = useChainId({ config })
+
+  const queryOptions = computed(() => {
+    const {
+      blockHash,
+      blockNumber,
+      blockTag,
+      chainId = configChainId.value,
+      hash,
+      query = {},
+    } = parameters.value
+    const options = getTransactionQueryOptions(config, {
+      ...parameters.value,
+      chainId,
+    })
+    const enabled = Boolean(
+      !(blockHash && blockNumber && blockTag && hash) &&
+        (query.enabled ?? true),
+    )
+    return {
+      ...query,
+      ...options,
+      enabled,
+    }
+  })
+
+  return useQuery(queryOptions) as UseTransactionReturnType<
+    config,
+    chainId,
+    selectData
+  >
+}

packages/vue/src/exports/index.test.ts

@@ -34,6 +34,7 @@ test('exports', () => {
       "useSimulateContract",
       "useSwitchAccount",
       "useSwitchChain",
+      "useTransaction",
       "useWatchBlockNumber",
       "useWaitForTransactionReceipt",
       "useWriteContract",

packages/vue/src/exports/index.ts

@@ -164,6 +164,12 @@ export {
   useSwitchChain,
 } from '../composables/useSwitchChain.js'
 
+export {
+  type UseTransactionParameters,
+  type UseTransactionReturnType,
+  useTransaction,
+} from '../composables/useTransaction.js'
+
 export {
   type UseWatchBlockNumberParameters,
   type UseWatchBlockNumberReturnType,

site/.vitepress/sidebar.ts

@@ -559,6 +559,10 @@ export function getSidebar() {
             text: 'useSwitchChain',
             link: '/vue/api/composables/useSwitchChain',
           },
+          {
+            text: 'useTransaction',
+            link: '/vue/api/composables/useTransaction',
+          },
           {
             text: 'useWaitForTransactionReceipt',
             link: '/vue/api/composables/useWaitForTransactionReceipt',