@wagmi/vue 0.0.0-canary-20240515232917

package/src/composables/useConnectorClient.ts

@@ -0,0 +1,127 @@
+import { useQueryClient } from '@tanstack/vue-query'
+import type {
+  Config,
+  Connector,
+  GetConnectorClientErrorType,
+  ResolvedRegister,
+} from '@wagmi/core'
+import { type Evaluate, type Omit } from '@wagmi/core/internal'
+import {
+  type GetConnectorClientData,
+  type GetConnectorClientOptions,
+  type GetConnectorClientQueryFnData,
+  type GetConnectorClientQueryKey,
+  getConnectorClientQueryOptions,
+} from '@wagmi/core/query'
+import { computed, ref, watchEffect } from 'vue'
+
+import type { ConfigParameter } from '../types/properties.js'
+import type { DeepMaybeRef, DeepUnwrapRef } from '../types/ref.js'
+import { deepUnref } from '../utils/cloneDeep.js'
+import {
+  type UseQueryParameters,
+  type UseQueryReturnType,
+  useQuery,
+} from '../utils/query.js'
+import { useAccount } from './useAccount.js'
+import { useChainId } from './useChainId.js'
+import { useConfig } from './useConfig.js'
+
+export type UseConnectorClientParameters<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetConnectorClientData<config, chainId>,
+> = Evaluate<
+  DeepMaybeRef<
+    GetConnectorClientOptions<config, chainId> &
+      ConfigParameter<config> & {
+        query?:
+          | Evaluate<
+              Omit<
+                DeepUnwrapRef<
+                  UseQueryParameters<
+                    GetConnectorClientQueryFnData<config, chainId>,
+                    GetConnectorClientErrorType,
+                    selectData,
+                    GetConnectorClientQueryKey<config, chainId>
+                  >
+                >,
+                'gcTime' | 'staleTime'
+              >
+            >
+          | undefined
+      }
+  >
+>
+
+export type UseConnectorClientReturnType<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetConnectorClientData<config, chainId>,
+> = UseQueryReturnType<selectData, GetConnectorClientErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useConnectorClient */
+export function useConnectorClient<
+  config extends Config = ResolvedRegister['config'],
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetConnectorClientData<config, chainId>,
+>(
+  parameters_: UseConnectorClientParameters<config, chainId, selectData> = {},
+): UseConnectorClientReturnType<config, chainId, selectData> {
+  const parameters = computed(() => deepUnref(parameters_))
+
+  const config = useConfig(parameters)
+  const queryClient = useQueryClient()
+  const {
+    address,
+    connector: accountConnector,
+    status,
+  } = useAccount({ config })
+  const configChainId = useChainId({ config })
+
+  const queryOptions = computed(() => {
+    const {
+      chainId = configChainId.value,
+      connector = accountConnector.value,
+      query = {},
+    } = parameters.value
+    const { queryKey, ...options } = getConnectorClientQueryOptions<
+      config,
+      chainId
+    >(config as config, {
+      ...deepUnref(parameters),
+      chainId: chainId as chainId,
+      connector: connector as Connector,
+    })
+    const enabled = Boolean(
+      status.value !== 'disconnected' && (query.enabled ?? true),
+    )
+    return {
+      ...query,
+      ...options,
+      queryKey,
+      enabled,
+      staleTime: Infinity,
+    }
+  })
+
+  const addressRef = ref(address)
+  watchEffect(() => {
+    const previousAddress = addressRef.value
+    if (!address && previousAddress) {
+      // remove when account is disconnected
+      queryClient.removeQueries({ queryKey: queryOptions.value.queryKey })
+      addressRef.value = undefined
+    } else if (address.value !== previousAddress) {
+      // invalidate when address changes
+      queryClient.invalidateQueries({ queryKey: queryOptions.value.queryKey })
+      addressRef.value = address.value
+    }
+  })
+
+  return useQuery(queryOptions as any) as UseConnectorClientReturnType<
+    config,
+    chainId,
+    selectData
+  >
+}

package/src/composables/useConnectors.ts

@@ -0,0 +1,30 @@
+import {
+  type GetConnectorsReturnType,
+  getConnectors,
+  watchConnectors,
+} from '@wagmi/core'
+import { type Ref, onScopeDispose, ref } from 'vue'
+
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseConnectorsParameters = ConfigParameter
+
+export type UseConnectorsReturnType = Ref<GetConnectorsReturnType>
+
+/** https://wagmi.sh/vue/api/composables/useConnectors */
+export function useConnectors(
+  parameters: UseConnectorsParameters = {},
+): UseConnectorsReturnType {
+  const config = useConfig(parameters)
+
+  const connectors = ref(getConnectors(config))
+  const unsubscribe = watchConnectors(config, {
+    onChange(data) {
+      connectors.value = data
+    },
+  })
+  onScopeDispose(() => unsubscribe())
+
+  return connectors
+}

package/src/composables/useDisconnect.ts

@@ -0,0 +1,70 @@
+import { useMutation } from '@tanstack/vue-query'
+import { type Connector, type DisconnectErrorType } from '@wagmi/core'
+import type { Evaluate } from '@wagmi/core/internal'
+import {
+  type DisconnectData,
+  type DisconnectMutate,
+  type DisconnectMutateAsync,
+  type DisconnectVariables,
+  disconnectMutationOptions,
+} from '@wagmi/core/query'
+import { type Ref, computed } from 'vue'
+
+import type { ConfigParameter } from '../types/properties.js'
+import type {
+  UseMutationParameters,
+  UseMutationReturnType,
+} from '../utils/query.js'
+import { useConfig } from './useConfig.js'
+import { useConnections } from './useConnections.js'
+
+export type UseDisconnectParameters<context = unknown> = Evaluate<
+  ConfigParameter & {
+    mutation?:
+      | UseMutationParameters<
+          DisconnectData,
+          DisconnectErrorType,
+          DisconnectVariables,
+          context
+        >
+      | undefined
+  }
+>
+
+export type UseDisconnectReturnType<context = unknown> = Evaluate<
+  UseMutationReturnType<
+    DisconnectData,
+    DisconnectErrorType,
+    DisconnectVariables,
+    context
+  > & {
+    connectors: Ref<readonly Connector[]>
+    disconnect: DisconnectMutate<context>
+    disconnectAsync: DisconnectMutateAsync<context>
+  }
+>
+
+/** https://wagmi.sh/vue/api/composables/useDisconnect */
+export function useDisconnect<context = unknown>(
+  parameters: UseDisconnectParameters<context> = {},
+): UseDisconnectReturnType<context> {
+  const { mutation } = parameters
+
+  const config = useConfig(parameters)
+  const connections = useConnections({ config })
+
+  const mutationOptions = disconnectMutationOptions(config)
+  const { mutate, mutateAsync, ...result } = useMutation({
+    ...mutation,
+    ...mutationOptions,
+  })
+
+  return {
+    ...result,
+    connectors: computed(() =>
+      connections.value.map((connection) => connection.connector),
+    ),
+    disconnect: mutate,
+    disconnectAsync: mutateAsync,
+  }
+}

package/src/composables/useEnsAddress.ts

@@ -0,0 +1,65 @@
+import type {
+  Config,
+  GetEnsAddressErrorType,
+  ResolvedRegister,
+} from '@wagmi/core'
+import { type Evaluate } from '@wagmi/core/internal'
+import {
+  type GetEnsAddressData,
+  type GetEnsAddressOptions,
+  type GetEnsAddressQueryFnData,
+  type GetEnsAddressQueryKey,
+  getEnsAddressQueryOptions,
+} 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 UseEnsAddressParameters<
+  config extends Config = Config,
+  selectData = GetEnsAddressData,
+> = Evaluate<
+  DeepMaybeRef<
+    GetEnsAddressOptions<config> &
+      ConfigParameter<config> &
+      QueryParameter<
+        GetEnsAddressQueryFnData,
+        GetEnsAddressErrorType,
+        selectData,
+        GetEnsAddressQueryKey<config>
+      >
+  >
+>
+
+export type UseEnsAddressReturnType<selectData = GetEnsAddressData> =
+  UseQueryReturnType<selectData, GetEnsAddressErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useEnsAddress */
+export function useEnsAddress<
+  config extends Config = ResolvedRegister['config'],
+  selectData = GetEnsAddressData,
+>(
+  parameters_: UseEnsAddressParameters<config, selectData> = {},
+): UseEnsAddressReturnType<selectData> {
+  const parameters = computed(() => deepUnref(parameters_))
+
+  const config = useConfig(parameters)
+  const configChainId = useChainId({ config })
+
+  const queryOptions = computed(() => {
+    const { chainId = configChainId.value, name, query = {} } = parameters.value
+    const options = getEnsAddressQueryOptions(config, {
+      ...parameters.value,
+      chainId,
+    })
+    const enabled = Boolean(name && (query.enabled ?? true))
+    return { ...query, ...options, enabled }
+  })
+
+  return useQuery(queryOptions as any) as UseEnsAddressReturnType<selectData>
+}

package/src/composables/useEnsAvatar.ts

@@ -0,0 +1,65 @@
+import type {
+  Config,
+  GetEnsAvatarErrorType,
+  ResolvedRegister,
+} from '@wagmi/core'
+import { type Evaluate } from '@wagmi/core/internal'
+import {
+  type GetEnsAvatarData,
+  type GetEnsAvatarOptions,
+  type GetEnsAvatarQueryFnData,
+  type GetEnsAvatarQueryKey,
+  getEnsAvatarQueryOptions,
+} 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 UseEnsAvatarParameters<
+  config extends Config = Config,
+  selectData = GetEnsAvatarData,
+> = Evaluate<
+  DeepMaybeRef<
+    GetEnsAvatarOptions<config> &
+      ConfigParameter<config> &
+      QueryParameter<
+        GetEnsAvatarQueryFnData,
+        GetEnsAvatarErrorType,
+        selectData,
+        GetEnsAvatarQueryKey<config>
+      >
+  >
+>
+
+export type UseEnsAvatarReturnType<selectData = GetEnsAvatarData> =
+  UseQueryReturnType<selectData, GetEnsAvatarErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useEnsAvatar */
+export function useEnsAvatar<
+  config extends Config = ResolvedRegister['config'],
+  selectData = GetEnsAvatarData,
+>(
+  parameters_: UseEnsAvatarParameters<config, selectData> = {},
+): UseEnsAvatarReturnType<selectData> {
+  const parameters = computed(() => deepUnref(parameters_))
+
+  const config = useConfig(parameters)
+  const configChainId = useChainId({ config })
+
+  const queryOptions = computed(() => {
+    const { chainId = configChainId.value, name, query = {} } = parameters.value
+    const options = getEnsAvatarQueryOptions(config, {
+      ...parameters.value,
+      chainId,
+    })
+    const enabled = Boolean(name && (query.enabled ?? true))
+    return { ...query, ...options, enabled }
+  })
+
+  return useQuery(queryOptions as any) as UseEnsAvatarReturnType<selectData>
+}

package/src/composables/useEnsName.ts

@@ -0,0 +1,65 @@
+import type { Config, GetEnsNameErrorType, ResolvedRegister } from '@wagmi/core'
+import { type Evaluate } from '@wagmi/core/internal'
+import {
+  type GetEnsNameData,
+  type GetEnsNameOptions,
+  type GetEnsNameQueryFnData,
+  type GetEnsNameQueryKey,
+  getEnsNameQueryOptions,
+} 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 UseEnsNameParameters<
+  config extends Config = Config,
+  selectData = GetEnsNameData,
+> = Evaluate<
+  DeepMaybeRef<
+    GetEnsNameOptions<config> &
+      ConfigParameter<config> &
+      QueryParameter<
+        GetEnsNameQueryFnData,
+        GetEnsNameErrorType,
+        selectData,
+        GetEnsNameQueryKey<config>
+      >
+  >
+>
+
+export type UseEnsNameReturnType<selectData = GetEnsNameData> =
+  UseQueryReturnType<selectData, GetEnsNameErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useEnsName */
+export function useEnsName<
+  config extends Config = ResolvedRegister['config'],
+  selectData = GetEnsNameData,
+>(
+  parameters_: UseEnsNameParameters<config, selectData> = {},
+): UseEnsNameReturnType<selectData> {
+  const parameters = computed(() => deepUnref(parameters_))
+
+  const config = useConfig(parameters)
+  const configChainId = useChainId({ config })
+
+  const queryOptions = computed(() => {
+    const {
+      address,
+      chainId = configChainId.value,
+      query = {},
+    } = parameters.value
+    const options = getEnsNameQueryOptions(config, {
+      ...parameters.value,
+      chainId,
+    })
+    const enabled = Boolean(address && (query.enabled ?? true))
+    return { ...query, ...options, enabled }
+  })
+
+  return useQuery(queryOptions as any) as UseEnsNameReturnType<selectData>
+}

package/src/composables/useEstimateGas.ts

@@ -0,0 +1,83 @@
+import type {
+  Config,
+  EstimateGasErrorType,
+  ResolvedRegister,
+} from '@wagmi/core'
+import {
+  type EstimateGasData,
+  type EstimateGasOptions,
+  type EstimateGasQueryFnData,
+  type EstimateGasQueryKey,
+  estimateGasQueryOptions,
+} 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'
+import { useConnectorClient } from './useConnectorClient.js'
+
+export type UseEstimateGasParameters<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] | undefined = undefined,
+  selectData = EstimateGasData,
+> = DeepMaybeRef<
+  EstimateGasOptions<config, chainId> &
+    ConfigParameter<config> &
+    QueryParameter<
+      EstimateGasQueryFnData,
+      EstimateGasErrorType,
+      selectData,
+      EstimateGasQueryKey<config, chainId>
+    >
+>
+
+export type UseEstimateGasReturnType<selectData = EstimateGasData> =
+  UseQueryReturnType<selectData, EstimateGasErrorType>
+
+/** https://wagmi.sh/react/api/hooks/useEstimateGas */
+export function useEstimateGas<
+  config extends Config = ResolvedRegister['config'],
+  chainId extends config['chains'][number]['id'] | undefined = undefined,
+  selectData = EstimateGasData,
+>(
+  parameters?: UseEstimateGasParameters<config, chainId, selectData>,
+): UseEstimateGasReturnType<selectData>
+
+export function useEstimateGas(
+  parameters_: UseEstimateGasParameters = {},
+): UseEstimateGasReturnType {
+  const parameters = computed(() => deepUnref(parameters_))
+
+  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 {
+      account = connectorClient?.value?.account,
+      chainId = configChainId.value,
+      connector,
+      query = {},
+    } = parameters.value
+    const options = estimateGasQueryOptions(config, {
+      ...parameters.value,
+      account,
+      chainId,
+      connector,
+    })
+    const enabled = Boolean((account || connector) && (query.enabled ?? true))
+    return { ...query, ...options, enabled }
+  })
+
+  return useQuery(queryOptions)
+}

package/src/composables/useReadContract.ts

@@ -0,0 +1,121 @@
+import {
+  type Config,
+  type ReadContractErrorType,
+  type ResolvedRegister,
+} from '@wagmi/core'
+import { type UnionEvaluate } from '@wagmi/core/internal'
+import {
+  type ReadContractData,
+  type ReadContractOptions,
+  type ReadContractQueryFnData,
+  type ReadContractQueryKey,
+  readContractQueryOptions,
+  structuralSharing,
+} from '@wagmi/core/query'
+import {
+  type Abi,
+  type ContractFunctionArgs,
+  type ContractFunctionName,
+} from 'viem'
+
+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 UseReadContractParameters<
+  abi extends Abi | readonly unknown[] = Abi,
+  functionName extends ContractFunctionName<
+    abi,
+    'pure' | 'view'
+  > = ContractFunctionName<abi, 'pure' | 'view'>,
+  args extends ContractFunctionArgs<
+    abi,
+    'pure' | 'view',
+    functionName
+  > = ContractFunctionArgs<abi, 'pure' | 'view', functionName>,
+  config extends Config = Config,
+  selectData = ReadContractData<abi, functionName, args>,
+> = UnionEvaluate<
+  DeepMaybeRef<
+    ReadContractOptions<abi, functionName, args, config> &
+      ConfigParameter<config> &
+      QueryParameter<
+        ReadContractQueryFnData<abi, functionName, args>,
+        ReadContractErrorType,
+        selectData,
+        ReadContractQueryKey<abi, functionName, args, config>
+      >
+  >
+>
+
+export type UseReadContractReturnType<
+  abi extends Abi | readonly unknown[] = Abi,
+  functionName extends ContractFunctionName<
+    abi,
+    'pure' | 'view'
+  > = ContractFunctionName<abi, 'pure' | 'view'>,
+  args extends ContractFunctionArgs<
+    abi,
+    'pure' | 'view',
+    functionName
+  > = ContractFunctionArgs<abi, 'pure' | 'view', functionName>,
+  selectData = ReadContractData<abi, functionName, args>,
+> = UseQueryReturnType<selectData, ReadContractErrorType>
+
+/** https://wagmi.sh/vue/api/hooks/useReadContract */
+export function useReadContract<
+  const abi extends Abi | readonly unknown[],
+  functionName extends ContractFunctionName<abi, 'pure' | 'view'>,
+  args extends ContractFunctionArgs<abi, 'pure' | 'view', functionName>,
+  config extends Config = ResolvedRegister['config'],
+  selectData = ReadContractData<abi, functionName, args>,
+>(
+  parameters_: UseReadContractParameters<
+    abi,
+    functionName,
+    args,
+    config,
+    selectData
+  > = {} as any,
+): UseReadContractReturnType<abi, functionName, args, selectData> {
+  const parameters = computed(() =>
+    deepUnref(parameters_),
+  ) as UseReadContractParameters
+
+  const config = useConfig(parameters)
+  const configChainId = useChainId({ config })
+
+  const queryOptions = computed(() => {
+    const {
+      abi,
+      address,
+      chainId = configChainId.value,
+      functionName,
+      query = {},
+    } = parameters.value as any
+    const options = readContractQueryOptions<config, abi, functionName, args>(
+      config as config,
+      { ...(parameters.value as any), chainId },
+    )
+    const enabled = Boolean(
+      address && abi && functionName && (query.enabled ?? true),
+    )
+    return {
+      ...query,
+      ...options,
+      enabled,
+      structuralSharing: query.structuralSharing ?? structuralSharing,
+    }
+  })
+
+  return useQuery(queryOptions) as UseReadContractReturnType<
+    abi,
+    functionName,
+    args,
+    selectData
+  >
+}

package/src/composables/useReconnect.ts

@@ -0,0 +1,65 @@
+import { useMutation } from '@tanstack/vue-query'
+import { type Connector, type ReconnectErrorType } from '@wagmi/core'
+import type { Evaluate } from '@wagmi/core/internal'
+import {
+  type ReconnectData,
+  type ReconnectMutate,
+  type ReconnectMutateAsync,
+  type ReconnectVariables,
+  reconnectMutationOptions,
+} from '@wagmi/core/query'
+
+import type { ConfigParameter } from '../types/properties.js'
+import type {
+  UseMutationParameters,
+  UseMutationReturnType,
+} from '../utils/query.js'
+import { useConfig } from './useConfig.js'
+
+export type UseReconnectParameters<context = unknown> = Evaluate<
+  ConfigParameter & {
+    mutation?:
+      | UseMutationParameters<
+          ReconnectData,
+          ReconnectErrorType,
+          ReconnectVariables,
+          context
+        >
+      | undefined
+  }
+>
+
+export type UseReconnectReturnType<context = unknown> = Evaluate<
+  UseMutationReturnType<
+    ReconnectData,
+    ReconnectErrorType,
+    ReconnectVariables,
+    context
+  > & {
+    connectors: readonly Connector[]
+    reconnect: ReconnectMutate<context>
+    reconnectAsync: ReconnectMutateAsync<context>
+  }
+>
+
+/** https://wagmi.sh/vue/api/composables/useReconnect */
+export function useReconnect<context = unknown>(
+  parameters: UseReconnectParameters<context> = {},
+): UseReconnectReturnType<context> {
+  const { mutation } = parameters
+
+  const config = useConfig(parameters)
+
+  const mutationOptions = reconnectMutationOptions(config)
+  const { mutate, mutateAsync, ...result } = useMutation({
+    ...mutation,
+    ...mutationOptions,
+  })
+
+  return {
+    ...result,
+    connectors: config.connectors,
+    reconnect: mutate,
+    reconnectAsync: mutateAsync,
+  }
+}