@wagmi/vue 0.0.1 → 0.0.3

package/src/composables/useSimulateContract.ts

@@ -0,0 +1,148 @@
+import type {
+  Config,
+  ResolvedRegister,
+  SimulateContractErrorType,
+} from '@wagmi/core'
+import {
+  type SimulateContractData,
+  type SimulateContractOptions,
+  type SimulateContractQueryFnData,
+  type SimulateContractQueryKey,
+  simulateContractQueryOptions,
+} from '@wagmi/core/query'
+import type { Abi, ContractFunctionArgs, ContractFunctionName } from 'viem'
+import { type MaybeRef, computed } from 'vue'
+
+import {
+  type ConfigParameter,
+  type 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'
+import { useConnectorClient } from './useConnectorClient.js'
+
+export type UseSimulateContractParameters<
+  abi extends Abi | readonly unknown[] = Abi,
+  functionName extends ContractFunctionName<
+    abi,
+    'nonpayable' | 'payable'
+  > = ContractFunctionName<abi, 'nonpayable' | 'payable'>,
+  args extends ContractFunctionArgs<
+    abi,
+    'nonpayable' | 'payable',
+    functionName
+  > = ContractFunctionArgs<abi, 'nonpayable' | 'payable', functionName>,
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] | undefined = undefined,
+  selectData = SimulateContractData<abi, functionName, args, config, chainId>,
+> = MaybeRef<
+  DeepMaybeRef<
+    SimulateContractOptions<abi, functionName, args, config, chainId>
+  > &
+    ConfigParameter<config> &
+    QueryParameter<
+      SimulateContractQueryFnData<abi, functionName, args, config, chainId>,
+      SimulateContractErrorType,
+      selectData,
+      SimulateContractQueryKey<abi, functionName, args, config, chainId>
+    >
+>
+
+export type UseSimulateContractReturnType<
+  abi extends Abi | readonly unknown[] = Abi,
+  functionName extends ContractFunctionName<
+    abi,
+    'nonpayable' | 'payable'
+  > = ContractFunctionName<abi, 'nonpayable' | 'payable'>,
+  args extends ContractFunctionArgs<
+    abi,
+    'nonpayable' | 'payable',
+    functionName
+  > = ContractFunctionArgs<abi, 'nonpayable' | 'payable', functionName>,
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] | undefined = undefined,
+  selectData = SimulateContractData<abi, functionName, args, config, chainId>,
+> = UseQueryReturnType<selectData, SimulateContractErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useSimulateContract */
+export function useSimulateContract<
+  const abi extends Abi | readonly unknown[],
+  functionName extends ContractFunctionName<abi, 'nonpayable' | 'payable'>,
+  args extends ContractFunctionArgs<
+    abi,
+    'nonpayable' | 'payable',
+    functionName
+  >,
+  config extends Config = ResolvedRegister['config'],
+  chainId extends config['chains'][number]['id'] | undefined = undefined,
+  selectData = SimulateContractData<abi, functionName, args, config, chainId>,
+>(
+  parameters_: UseSimulateContractParameters<
+    abi,
+    functionName,
+    args,
+    config,
+    chainId,
+    selectData
+  > = {} as any,
+): UseSimulateContractReturnType<
+  abi,
+  functionName,
+  args,
+  config,
+  chainId,
+  selectData
+> {
+  const parameters = computed(() => deepUnref(parameters_)) as any
+
+  const config = useConfig(parameters)
+  const { data: connectorClient } = useConnectorClient(
+    computed(() => ({
+      connector: parameters.value.connector,
+      query: { enabled: parameters.value.account === undefined },
+    })),
+  )
+  const configChainId = useChainId({ config })
+
+  const queryOptions = computed(() => {
+    const {
+      abi,
+      account = connectorClient?.value?.account,
+      address,
+      chainId = configChainId.value,
+      functionName,
+      query = {},
+    } = parameters.value
+    const options = simulateContractQueryOptions<
+      config,
+      abi,
+      functionName,
+      args,
+      chainId
+    >(config as any, {
+      ...parameters.value,
+      account,
+      chainId,
+    })
+    const enabled = Boolean(
+      abi && address && functionName && (query.enabled ?? true),
+    )
+    return {
+      ...query,
+      ...options,
+      enabled,
+    }
+  })
+
+  return useQuery(queryOptions as any) as UseSimulateContractReturnType<
+    abi,
+    functionName,
+    args,
+    config,
+    chainId,
+    selectData
+  >
+}

package/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 any) as UseTransactionReturnType<
+    config,
+    chainId,
+    selectData
+  >
+}

package/src/composables/useTransactionReceipt.ts

@@ -0,0 +1,85 @@
+import {
+  type Config,
+  type GetTransactionReceiptErrorType,
+  type ResolvedRegister,
+} from '@wagmi/core'
+import { type Evaluate } from '@wagmi/core/internal'
+import {
+  type GetTransactionReceiptData,
+  type GetTransactionReceiptOptions,
+  type GetTransactionReceiptQueryKey,
+  getTransactionReceiptQueryOptions,
+} from '@wagmi/core/query'
+import { type GetTransactionReceiptQueryFnData } from '@wagmi/core/query'
+
+import { computed } from 'vue'
+import {
+  type ConfigParameter,
+  type 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 UseTransactionReceiptParameters<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetTransactionReceiptData<config, chainId>,
+> = Evaluate<
+  DeepMaybeRef<
+    GetTransactionReceiptOptions<config, chainId> &
+      ConfigParameter<config> &
+      QueryParameter<
+        GetTransactionReceiptQueryFnData<config, chainId>,
+        GetTransactionReceiptErrorType,
+        selectData,
+        GetTransactionReceiptQueryKey<config, chainId>
+      >
+  >
+>
+
+export type UseTransactionReceiptReturnType<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetTransactionReceiptData<config, chainId>,
+> = UseQueryReturnType<selectData, GetTransactionReceiptErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useTransactionReceipt */
+export function useTransactionReceipt<
+  config extends Config = ResolvedRegister['config'],
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetTransactionReceiptData<config, chainId>,
+>(
+  parameters_: UseTransactionReceiptParameters<
+    config,
+    chainId,
+    selectData
+  > = {},
+): UseTransactionReceiptReturnType<config, chainId, selectData> {
+  const parameters = computed(() => deepUnref(parameters_))
+
+  const config = useConfig(parameters)
+  const configChainId = useChainId({ config })
+
+  const queryOptions = computed(() => {
+    const { chainId = configChainId.value, hash, query = {} } = parameters.value
+    const options = getTransactionReceiptQueryOptions(config, {
+      ...parameters.value,
+      chainId,
+    })
+    const enabled = Boolean(hash && (query.enabled ?? true))
+    return {
+      ...(query as any),
+      ...options,
+      enabled,
+    }
+  })
+
+  return useQuery(queryOptions) as UseTransactionReceiptReturnType<
+    config,
+    chainId,
+    selectData
+  >
+}

package/src/composables/useWaitForTransactionReceipt.ts

@@ -0,0 +1,81 @@
+import type {
+  Config,
+  ResolvedRegister,
+  WaitForTransactionReceiptErrorType,
+} from '@wagmi/core'
+import { type Evaluate } from '@wagmi/core/internal'
+import {
+  type WaitForTransactionReceiptData,
+  type WaitForTransactionReceiptOptions,
+  type WaitForTransactionReceiptQueryFnData,
+  type WaitForTransactionReceiptQueryKey,
+  waitForTransactionReceiptQueryOptions,
+} 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 UseWaitForTransactionReceiptParameters<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = WaitForTransactionReceiptData<config, chainId>,
+> = Evaluate<
+  DeepMaybeRef<
+    WaitForTransactionReceiptOptions<config, chainId> &
+      ConfigParameter<config> &
+      QueryParameter<
+        WaitForTransactionReceiptQueryFnData<config, chainId>,
+        WaitForTransactionReceiptErrorType,
+        selectData,
+        WaitForTransactionReceiptQueryKey<config, chainId>
+      >
+  >
+>
+
+export type UseWaitForTransactionReceiptReturnType<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = WaitForTransactionReceiptData<config, chainId>,
+> = UseQueryReturnType<selectData, WaitForTransactionReceiptErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useWaitForTransactionReceipt */
+export function useWaitForTransactionReceipt<
+  config extends Config = ResolvedRegister['config'],
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = WaitForTransactionReceiptData<config, chainId>,
+>(
+  parameters_: UseWaitForTransactionReceiptParameters<
+    config,
+    chainId,
+    selectData
+  > = {},
+): UseWaitForTransactionReceiptReturnType<config, chainId, selectData> {
+  const parameters = computed(() => deepUnref(parameters_))
+  const config = useConfig(parameters_)
+  const configChainId = useChainId()
+
+  const queryOptions = computed(() => {
+    const { chainId = configChainId.value, hash, query = {} } = parameters.value
+
+    const options = waitForTransactionReceiptQueryOptions(config, {
+      ...parameters.value,
+      chainId,
+    })
+    const enabled = Boolean(hash && (query.enabled ?? true))
+
+    return {
+      ...query,
+      ...options,
+      enabled,
+    }
+  })
+
+  return useQuery(
+    queryOptions as any,
+  ) as UseWaitForTransactionReceiptReturnType<config, chainId, selectData>
+}

package/src/composables/useWriteContract.ts

@@ -0,0 +1,85 @@
+import { useMutation } from '@tanstack/vue-query'
+import type {
+  Config,
+  ResolvedRegister,
+  WriteContractErrorType,
+} from '@wagmi/core'
+import {
+  type WriteContractData,
+  type WriteContractMutate,
+  type WriteContractMutateAsync,
+  type WriteContractVariables,
+  writeContractMutationOptions,
+} from '@wagmi/core/query'
+import type { Abi } from 'viem'
+
+import type { ConfigParameter } from '../types/properties.js'
+import type {
+  UseMutationParameters,
+  UseMutationReturnType,
+} from '../utils/query.js'
+import { useConfig } from './useConfig.js'
+
+export type UseWriteContractParameters<
+  config extends Config = Config,
+  context = unknown,
+> = ConfigParameter<config> & {
+  mutation?:
+    | UseMutationParameters<
+        WriteContractData,
+        WriteContractErrorType,
+        WriteContractVariables<
+          Abi,
+          string,
+          readonly unknown[],
+          config,
+          config['chains'][number]['id']
+        >,
+        context
+      >
+    | undefined
+}
+
+export type UseWriteContractReturnType<
+  config extends Config = Config,
+  context = unknown,
+> = UseMutationReturnType<
+  WriteContractData,
+  WriteContractErrorType,
+  WriteContractVariables<
+    Abi,
+    string,
+    readonly unknown[],
+    config,
+    config['chains'][number]['id']
+  >,
+  context
+> & {
+  writeContract: WriteContractMutate<config, context>
+  writeContractAsync: WriteContractMutateAsync<config, context>
+}
+
+/** https://wagmi.sh/vue/api/composables/useWriteContract */
+export function useWriteContract<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: UseWriteContractParameters<config, context> = {},
+): UseWriteContractReturnType<config, context> {
+  const { mutation } = parameters
+
+  const config = useConfig(parameters)
+
+  const mutationOptions = writeContractMutationOptions(config)
+  const { mutate, mutateAsync, ...result } = useMutation({
+    ...mutation,
+    ...mutationOptions,
+  })
+
+  type Return = UseWriteContractReturnType<config, context>
+  return {
+    ...result,
+    writeContract: mutate as Return['writeContract'],
+    writeContractAsync: mutateAsync as Return['writeContractAsync'],
+  }
+}

package/src/exports/index.ts

@@ -32,6 +32,12 @@ export {
   useAccountEffect,
 } from '../composables/useAccountEffect.js'
 
+export {
+  type UseBalanceParameters,
+  type UseBalanceReturnType,
+  useBalance,
+} from '../composables/useBalance.js'
+
 export {
   type UseBlockNumberParameters,
   type UseBlockNumberReturnType,
@@ -92,12 +98,66 @@ export {
   useDisconnect,
 } from '../composables/useDisconnect.js'
 
+export {
+  type UseEnsAddressParameters,
+  type UseEnsAddressReturnType,
+  useEnsAddress,
+} from '../composables/useEnsAddress.js'
+
+export {
+  type UseEnsAvatarParameters,
+  type UseEnsAvatarReturnType,
+  useEnsAvatar,
+} from '../composables/useEnsAvatar.js'
+
+export {
+  type UseEnsNameParameters,
+  type UseEnsNameReturnType,
+  useEnsName,
+} from '../composables/useEnsName.js'
+
+export {
+  type UseEstimateGasParameters,
+  type UseEstimateGasReturnType,
+  useEstimateGas,
+} from '../composables/useEstimateGas.js'
+
+export {
+  type UseReadContractParameters,
+  type UseReadContractReturnType,
+  useReadContract,
+} from '../composables/useReadContract.js'
+
 export {
   type UseReconnectParameters,
   type UseReconnectReturnType,
   useReconnect,
 } from '../composables/useReconnect.js'
 
+export {
+  type UseSendTransactionParameters,
+  type UseSendTransactionReturnType,
+  useSendTransaction,
+} from '../composables/useSendTransaction.js'
+
+export {
+  type UseSignMessageParameters,
+  type UseSignMessageReturnType,
+  useSignMessage,
+} from '../composables/useSignMessage.js'
+
+export {
+  type UseSignTypedDataParameters,
+  type UseSignTypedDataReturnType,
+  useSignTypedData,
+} from '../composables/useSignTypedData.js'
+
+export {
+  type UseSimulateContractParameters,
+  type UseSimulateContractReturnType,
+  useSimulateContract,
+} from '../composables/useSimulateContract.js'
+
 export {
   type UseSwitchAccountParameters,
   type UseSwitchAccountReturnType,
@@ -110,12 +170,36 @@ export {
   useSwitchChain,
 } from '../composables/useSwitchChain.js'
 
+export {
+  type UseTransactionParameters,
+  type UseTransactionReturnType,
+  useTransaction,
+} from '../composables/useTransaction.js'
+
+export {
+  type UseTransactionReceiptParameters,
+  type UseTransactionReceiptReturnType,
+  useTransactionReceipt,
+} from '../composables/useTransactionReceipt.js'
+
 export {
   type UseWatchBlockNumberParameters,
   type UseWatchBlockNumberReturnType,
   useWatchBlockNumber,
 } from '../composables/useWatchBlockNumber.js'
 
+export {
+  type UseWaitForTransactionReceiptParameters,
+  type UseWaitForTransactionReceiptReturnType,
+  useWaitForTransactionReceipt,
+} from '../composables/useWaitForTransactionReceipt.js'
+
+export {
+  type UseWriteContractParameters,
+  type UseWriteContractReturnType,
+  useWriteContract,
+} from '../composables/useWriteContract.js'
+
 ////////////////////////////////////////////////////////////////////////////////
 // @wagmi/core
 ////////////////////////////////////////////////////////////////////////////////

package/src/nuxt/module.ts

@@ -1,8 +1,6 @@
-import { fileURLToPath } from 'node:url'
 import type { NuxtModule } from '@nuxt/schema'
-import { defineNuxtModule } from 'nuxt/kit'
+import { addImports, createResolver, defineNuxtModule } from 'nuxt/kit'
 
-// TODO: createConfig parameters to options?
 export type WagmiModuleOptions = {}
 
 export const wagmiModule: NuxtModule<WagmiModuleOptions> =
@@ -15,11 +13,47 @@ export const wagmiModule: NuxtModule<WagmiModuleOptions> =
       },
     },
     setup(_options, nuxt) {
-      // Transpile runtime
-      const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
-      nuxt.options.build.transpile.push(runtimeDir)
+      const { resolve } = createResolver(import.meta.url)
 
-      // TODO: Add client and server plugins
-      // TODO: Auto import composables
+      // Add types
+      nuxt.hook('prepare:types', ({ references }) => {
+        references.push({ types: '@wagmi/vue/nuxt' })
+      })
+
+      // Add auto imports
+      const composables = resolve('./runtime/composables')
+      const names = [
+        'useAccount',
+        'useAccountEffect',
+        'useBalance',
+        'useBlockNumber',
+        'useChainId',
+        'useChains',
+        'useClient',
+        'useConfig',
+        'useConnect',
+        'useConnections',
+        'useConnectorClient',
+        'useConnectors',
+        'useDisconnect',
+        'useEnsAddress',
+        'useEnsAvatar',
+        'useEnsName',
+        'useEstimateGas',
+        'useReadContract',
+        'useReconnect',
+        'useSendTransaction',
+        'useSignMessage',
+        'useSignTypedData',
+        'useSimulateContract',
+        'useSwitchAccount',
+        'useSwitchChain',
+        'useTransaction',
+        'useTransactionReceipt',
+        'useWaitForTransactionReceipt',
+        'useWatchBlockNumber',
+        'useWriteContract',
+      ]
+      addImports(names.map((name) => ({ from: composables, name })))
     },
   })

package/src/nuxt/runtime/composables.ts

@@ -0,0 +1 @@
+export * from '../../exports/index.js'

package/src/types/ref.ts

@@ -1,6 +1,6 @@
 // Credit: https://github.com/TanStack/query/blob/01ce023826b81e6c41e354f27691f65c9725af67/packages/vue-query/src/types.ts
 
-import type { Config } from '@wagmi/core'
+import type { Config, Connector } from '@wagmi/core'
 import type { MaybeRef, Ref, UnwrapRef } from 'vue'
 
 type Primitive = string | number | boolean | bigint | symbol | undefined | null
@@ -16,9 +16,9 @@ type UnwrapLeaf =
   | WeakSet<any>
 
 export type DeepMaybeRef<value> = MaybeRef<
-  value extends Function | Config
+  value extends Function | Config | Connector
     ? value
-    : value extends object
+    : value extends object | any[]
     ? {
         [key in keyof value]: DeepMaybeRef<value[key]>
       }