@wagmi/vue 0.0.0-canary-20240515232917

package/query/package.json

@@ -0,0 +1,5 @@
+{
+  "type": "module",
+  "types": "../dist/types/exports/query.d.ts",
+  "main": "../dist/esm/exports/query.js"
+}

package/src/composables/useAccount.ts

@@ -0,0 +1,37 @@
+import {
+  type Config,
+  type GetAccountReturnType,
+  type ResolvedRegister,
+  getAccount,
+  watchAccount,
+} from '@wagmi/core'
+import { type ToRefs, onScopeDispose, reactive, readonly, toRefs } from 'vue'
+
+import { type ConfigParameter } from '../types/properties.js'
+import { updateState } from '../utils/updateState.js'
+import { useConfig } from './useConfig.js'
+
+export type UseAccountParameters<config extends Config = Config> =
+  ConfigParameter<config>
+
+export type UseAccountReturnType<config extends Config = Config> = ToRefs<
+  GetAccountReturnType<config>
+>
+
+/** https://wagmi.sh/vue/api/composables/useAccount */
+export function useAccount<config extends Config = ResolvedRegister['config']>(
+  parameters: UseAccountParameters<config> = {},
+): UseAccountReturnType<config> {
+  const config = useConfig(parameters)
+
+  const account = reactive(getAccount(config))
+
+  const unsubscribe = watchAccount(config, {
+    onChange(data) {
+      updateState(account, data)
+    },
+  })
+  onScopeDispose(() => unsubscribe())
+
+  return toRefs(readonly(account)) as UseAccountReturnType<config>
+}

package/src/composables/useAccountEffect.ts

@@ -0,0 +1,66 @@
+import { type GetAccountReturnType, watchAccount } from '@wagmi/core'
+import type { Evaluate } from '@wagmi/core/internal'
+import { watchEffect } from 'vue'
+
+import type { ConfigParameter } from '../types/properties.js'
+import type { DeepMaybeRef } from '../types/ref.js'
+import { deepUnref } from '../utils/cloneDeep.js'
+import { useConfig } from './useConfig.js'
+
+export type UseAccountEffectParameters = Evaluate<
+  DeepMaybeRef<
+    {
+      onConnect?(
+        data: Evaluate<
+          Pick<
+            Extract<GetAccountReturnType, { status: 'connected' }>,
+            'address' | 'addresses' | 'chain' | 'chainId' | 'connector'
+          > & {
+            isReconnected: boolean
+          }
+        >,
+      ): void
+      onDisconnect?(): void
+    } & ConfigParameter
+  >
+>
+
+/** https://wagmi.sh/vue/api/composables/useAccountEffect */
+export function useAccountEffect(parameters: UseAccountEffectParameters = {}) {
+  const config = useConfig(parameters)
+
+  watchEffect((onCleanup) => {
+    const { onConnect, onDisconnect } = deepUnref(parameters)
+
+    const unwatch = watchAccount(config, {
+      onChange(data, prevData) {
+        if (
+          (prevData.status === 'reconnecting' ||
+            (prevData.status === 'connecting' &&
+              prevData.address === undefined)) &&
+          data.status === 'connected'
+        ) {
+          const { address, addresses, chain, chainId, connector } = data
+          const isReconnected =
+            prevData.status === 'reconnecting' ||
+            // if `previousAccount.status` is `undefined`, the connector connected immediately.
+            prevData.status === undefined
+          onConnect?.({
+            address,
+            addresses,
+            chain,
+            chainId,
+            connector,
+            isReconnected,
+          })
+        } else if (
+          prevData.status === 'connected' &&
+          data.status === 'disconnected'
+        )
+          onDisconnect?.()
+      },
+    })
+
+    onCleanup(() => unwatch())
+  })
+}

package/src/composables/useBalance.ts

@@ -0,0 +1,69 @@
+import {
+  type Config,
+  type GetBalanceErrorType,
+  type ResolvedRegister,
+} from '@wagmi/core'
+import type { Evaluate } from '@wagmi/core/internal'
+import {
+  type GetBalanceData,
+  type GetBalanceOptions,
+  type GetBalanceQueryKey,
+  getBalanceQueryOptions,
+} from '@wagmi/core/query'
+import type { GetBalanceQueryFnData } 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 UseBalanceParameters<
+  config extends Config = Config,
+  selectData = GetBalanceData,
+> = Evaluate<
+  DeepMaybeRef<
+    GetBalanceOptions<config> &
+      ConfigParameter<config> &
+      QueryParameter<
+        GetBalanceQueryFnData,
+        GetBalanceErrorType,
+        selectData,
+        GetBalanceQueryKey<config>
+      >
+  >
+>
+
+export type UseBalanceReturnType<selectData = GetBalanceData> =
+  UseQueryReturnType<selectData, GetBalanceErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useBalance */
+export function useBalance<
+  config extends Config = ResolvedRegister['config'],
+  selectData = GetBalanceData,
+>(
+  parameters_: UseBalanceParameters<config, selectData> = {},
+): UseBalanceReturnType<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 = getBalanceQueryOptions(config, {
+      ...parameters.value,
+      chainId,
+    })
+    const enabled = Boolean(address && (query.enabled ?? true))
+    return { ...query, ...options, enabled }
+  })
+
+  return useQuery(queryOptions as any) as UseBalanceReturnType<selectData>
+}

package/src/composables/useBlockNumber.ts

@@ -0,0 +1,118 @@
+import { useQueryClient } from '@tanstack/vue-query'
+import {
+  type Config,
+  type GetBlockNumberErrorType,
+  type ResolvedRegister,
+} from '@wagmi/core'
+import {
+  type Evaluate,
+  type UnionEvaluate,
+  type UnionOmit,
+} from '@wagmi/core/internal'
+import {
+  type GetBlockNumberData,
+  type GetBlockNumberOptions,
+  type GetBlockNumberQueryFnData,
+  type GetBlockNumberQueryKey,
+  getBlockNumberQueryOptions,
+} from '@wagmi/core/query'
+import { computed } from 'vue'
+
+import type { ConfigParameter, QueryParameter } from '../types/properties.js'
+import type { DeepMaybeRef, DeepUnwrapRef } 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 {
+  type UseWatchBlockNumberParameters,
+  useWatchBlockNumber,
+} from './useWatchBlockNumber.js'
+
+export type UseBlockNumberParameters<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetBlockNumberData,
+> = Evaluate<
+  DeepMaybeRef<
+    GetBlockNumberOptions<config, chainId> &
+      ConfigParameter<config> &
+      QueryParameter<
+        GetBlockNumberQueryFnData,
+        GetBlockNumberErrorType,
+        selectData,
+        GetBlockNumberQueryKey<config, chainId>
+      > & {
+        watch?:
+          | boolean
+          | UnionEvaluate<
+              UnionOmit<
+                DeepUnwrapRef<UseWatchBlockNumberParameters<config, chainId>>,
+                'chainId' | 'config' | 'onBlockNumber' | 'onError'
+              >
+            >
+          | undefined
+      }
+  >
+>
+
+export type UseBlockNumberReturnType<selectData = GetBlockNumberData> =
+  UseQueryReturnType<selectData, GetBlockNumberErrorType>
+
+/** https://wagmi.sh/vue/api/composables/useBlockNumber */
+export function useBlockNumber<
+  config extends Config = ResolvedRegister['config'],
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+  selectData = GetBlockNumberData,
+>(
+  parameters_: UseBlockNumberParameters<config, chainId, selectData> = {},
+): UseBlockNumberReturnType<selectData> {
+  const parameters = computed(() => deepUnref(parameters_))
+
+  const config = useConfig(parameters)
+  const queryClient = useQueryClient()
+  const configChainId = useChainId({ config })
+
+  const queryOptions = computed(() => {
+    const {
+      chainId = configChainId.value,
+      query = {},
+      watch: _,
+      ...rest
+    } = parameters.value
+    const options = getBlockNumberQueryOptions(config, {
+      ...deepUnref(rest),
+      chainId,
+    })
+    return {
+      ...query,
+      ...options,
+    }
+  })
+
+  const watchBlockNumberArgs = computed(() => {
+    const {
+      config,
+      chainId = configChainId.value,
+      query,
+      watch,
+    } = parameters.value
+    return {
+      ...({
+        config,
+        chainId,
+        ...(typeof watch === 'object' ? watch : {}),
+      } as UseWatchBlockNumberParameters),
+      enabled:
+        (query?.enabled ?? true) &&
+        (typeof watch === 'object' ? watch.enabled : watch),
+      onBlockNumber(blockNumber) {
+        queryClient.setQueryData(queryOptions.value.queryKey, blockNumber)
+      },
+    } satisfies UseWatchBlockNumberParameters
+  })
+
+  useWatchBlockNumber(watchBlockNumberArgs)
+
+  return useQuery(queryOptions as any) as UseBlockNumberReturnType<selectData>
+}

package/src/composables/useChainId.ts

@@ -0,0 +1,35 @@
+import {
+  type Config,
+  type GetChainIdReturnType,
+  type ResolvedRegister,
+  getChainId,
+  watchChainId,
+} from '@wagmi/core'
+import { type Ref, onScopeDispose, readonly, ref } from 'vue'
+
+import { type ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseChainIdParameters<config extends Config = Config> =
+  ConfigParameter<config>
+
+export type UseChainIdReturnType<config extends Config = Config> = Ref<
+  GetChainIdReturnType<config>
+>
+
+/** https://wagmi.sh/vue/api/composables/useChainId */
+export function useChainId<config extends Config = ResolvedRegister['config']>(
+  parameters: UseChainIdParameters<config> = {},
+): UseChainIdReturnType<config> {
+  const config = useConfig(parameters)
+
+  const chainId = ref<GetChainIdReturnType>(getChainId(config))
+  const unsubscribe = watchChainId(config, {
+    onChange(data) {
+      chainId.value = data
+    },
+  })
+  onScopeDispose(() => unsubscribe())
+
+  return readonly(chainId)
+}

package/src/composables/useChains.ts

@@ -0,0 +1,38 @@
+import {
+  type Config,
+  type GetChainsReturnType,
+  type ResolvedRegister,
+  getChains,
+} from '@wagmi/core'
+import { watchChains } from '@wagmi/core/internal'
+
+import type { Chain } from 'viem'
+import { type Ref, onScopeDispose, readonly, ref } from 'vue'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseChainsParameters<config extends Config = Config> =
+  ConfigParameter<config>
+
+export type UseChainsReturnType<config extends Config = Config> = Ref<
+  config['chains'] extends readonly [Chain, ...Chain[]]
+    ? config['chains']
+    : readonly [Chain, ...Chain[]]
+>
+
+/** https://wagmi.sh/vue/api/composables/useChains */
+export function useChains<config extends Config = ResolvedRegister['config']>(
+  parameters: UseChainsParameters<config> = {},
+): UseChainsReturnType<config> {
+  const config = useConfig(parameters)
+
+  const chains = ref<GetChainsReturnType>(getChains(config))
+  const unsubscribe = watchChains(config, {
+    onChange(data) {
+      chains.value = data
+    },
+  })
+  onScopeDispose(() => unsubscribe())
+
+  return readonly(chains)
+}

package/src/composables/useClient.ts

@@ -0,0 +1,66 @@
+import {
+  type Config,
+  type GetClientParameters,
+  type GetClientReturnType,
+  type ResolvedRegister,
+  getClient,
+  watchClient,
+} from '@wagmi/core'
+import type { Evaluate } from '@wagmi/core/internal'
+import {
+  type Ref,
+  computed,
+  onScopeDispose,
+  readonly,
+  ref,
+  watchEffect,
+} from 'vue'
+
+import type { ConfigParameter } from '../types/properties.js'
+import type { DeepMaybeRef } from '../types/ref.js'
+import { deepUnref } from '../utils/cloneDeep.js'
+import { useConfig } from './useConfig.js'
+
+export type UseClientParameters<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] | number | undefined =
+    | config['chains'][number]['id']
+    | undefined,
+> = Evaluate<
+  DeepMaybeRef<GetClientParameters<config, chainId> & ConfigParameter<config>>
+>
+
+export type UseClientReturnType<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] | number | undefined =
+    | config['chains'][number]['id']
+    | undefined,
+> = Ref<GetClientReturnType<config, chainId>>
+
+/** https://wagmi.sh/vue/api/composables/useClient */
+export function useClient<
+  config extends Config = ResolvedRegister['config'],
+  chainId extends config['chains'][number]['id'] | number | undefined =
+    | config['chains'][number]['id']
+    | undefined,
+>(
+  parameters: UseClientParameters<config, chainId> = {},
+): UseClientReturnType<config, chainId> {
+  const params = computed(() => deepUnref(parameters))
+
+  const config = useConfig(params)
+
+  const client = ref(getClient(config, params.value as GetClientParameters))
+  watchEffect(() => {
+    client.value = getClient(config, params.value as GetClientParameters)
+  })
+  const unsubscribe = watchClient(config, {
+    onChange(data) {
+      if (client.value?.uid === data?.uid) return
+      client.value = data
+    },
+  })
+  onScopeDispose(() => unsubscribe())
+
+  return readonly(client) as UseClientReturnType<config, chainId>
+}

package/src/composables/useConfig.ts

@@ -0,0 +1,34 @@
+import { type Config, type ResolvedRegister } from '@wagmi/core'
+import { hasInjectionContext, inject, unref } from 'vue'
+
+import {
+  WagmiInjectionContextError,
+  WagmiPluginNotFoundError,
+} from '../errors/plugin.js'
+import { configKey } from '../plugin.js'
+import type { ConfigParameter } from '../types/properties.js'
+import type { DeepMaybeRef } from '../types/ref.js'
+
+export type UseConfigParameters<config extends Config = Config> = DeepMaybeRef<
+  ConfigParameter<config>
+>
+
+export type UseConfigReturnType<config extends Config = Config> = config
+
+/** https://wagmi.sh/vue/api/composables/useConfig */
+export function useConfig<config extends Config = ResolvedRegister['config']>(
+  parameters_: UseConfigParameters<config> = {},
+): UseConfigReturnType<config> {
+  const parameters = unref(parameters_)
+
+  // passthrough config if provided
+  if (parameters.config) return parameters.config as UseConfigReturnType<config>
+
+  // ensures that `inject()` can be used
+  if (!hasInjectionContext()) throw new WagmiInjectionContextError()
+
+  const config = inject<Config | undefined>(configKey)
+  if (!config) throw new WagmiPluginNotFoundError()
+
+  return config as UseConfigReturnType<config>
+}

package/src/composables/useConnect.ts

@@ -0,0 +1,91 @@
+import { useMutation } from '@tanstack/vue-query'
+import {
+  type Config,
+  type ConnectErrorType,
+  type GetConnectorsReturnType,
+  type ResolvedRegister,
+} from '@wagmi/core'
+import type { Evaluate } from '@wagmi/core/internal'
+import {
+  type ConnectData,
+  type ConnectMutate,
+  type ConnectMutateAsync,
+  type ConnectVariables,
+  connectMutationOptions,
+} from '@wagmi/core/query'
+import { onScopeDispose } from 'vue'
+
+import type { ConfigParameter } from '../types/properties.js'
+import type {
+  UseMutationParameters,
+  UseMutationReturnType,
+} from '../utils/query.js'
+import { useConfig } from './useConfig.js'
+import { useConnectors } from './useConnectors.js'
+
+export type UseConnectParameters<
+  config extends Config = Config,
+  context = unknown,
+> = Evaluate<
+  ConfigParameter<config> & {
+    mutation?:
+      | UseMutationParameters<
+          ConnectData<config>,
+          ConnectErrorType,
+          ConnectVariables<config>,
+          context
+        >
+      | undefined
+  }
+>
+
+export type UseConnectReturnType<
+  config extends Config = Config,
+  context = unknown,
+> = Evaluate<
+  UseMutationReturnType<
+    ConnectData<config>,
+    ConnectErrorType,
+    ConnectVariables<config>,
+    context
+  > & {
+    connect: ConnectMutate<config, context>
+    connectAsync: ConnectMutateAsync<config, context>
+    connectors: Evaluate<GetConnectorsReturnType>
+  }
+>
+
+/** https://wagmi.sh/vue/api/composables/useConnect */
+export function useConnect<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: UseConnectParameters<config, context> = {},
+): UseConnectReturnType<config, context> {
+  const { mutation } = parameters
+
+  const config = useConfig(parameters)
+
+  const mutationOptions = connectMutationOptions(config)
+  const { mutate, mutateAsync, ...result } = useMutation({
+    ...mutation,
+    ...mutationOptions,
+  })
+
+  // Reset mutation back to an idle state when the connector disconnects.
+  const unsubscribe = config.subscribe(
+    ({ status }) => status,
+    (status, previousStatus) => {
+      if (previousStatus === 'connected' && status === 'disconnected')
+        result.reset()
+    },
+  )
+  onScopeDispose(() => unsubscribe())
+
+  return {
+    ...result,
+    connect: mutate,
+    connectAsync: mutateAsync,
+    connectors: useConnectors({ config }).value,
+  }
+}

package/src/composables/useConnections.ts

@@ -0,0 +1,30 @@
+import {
+  type GetConnectionsReturnType,
+  getConnections,
+  watchConnections,
+} from '@wagmi/core'
+import { type Ref, onScopeDispose, readonly, ref } from 'vue'
+
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseConnectionsParameters = ConfigParameter
+
+export type UseConnectionsReturnType = Ref<GetConnectionsReturnType>
+
+/** https://wagmi.sh/vue/api/composables/useConnections */
+export function useConnections(
+  parameters: UseConnectionsParameters = {},
+): UseConnectionsReturnType {
+  const config = useConfig(parameters)
+
+  const connections = ref(getConnections(config))
+  const unsubscribe = watchConnections(config, {
+    onChange(data) {
+      connections.value = data
+    },
+  })
+  onScopeDispose(() => unsubscribe())
+
+  return readonly(connections) as UseConnectionsReturnType
+}