feat: client actions/hooks

docs/.vitepress/sidebar.ts

@@ -99,6 +99,7 @@ export function getSidebar() {
                 link: '/react/api/hooks/useBlockNumber',
               },
               { text: 'useChainId', link: '/react/api/hooks/useChainId' },
+              { text: 'useClient', link: '/react/api/hooks/useClient' },
               { text: 'useConfig', link: '/react/api/hooks/useConfig' },
               { text: 'useConnect', link: '/react/api/hooks/useConnect' },
               {
@@ -137,6 +138,10 @@ export function getSidebar() {
                 text: 'useEnsResolver',
                 link: '/react/api/hooks/useEnsResolver',
               },
+              {
+                text: 'usePublicClient 🚧',
+                link: '/react/api/hooks/usePublicClient',
+              },
               {
                 text: 'useEstimateFeesPerGas',
                 link: '/react/api/hooks/useEstimateFeesPerGas',
@@ -280,6 +285,10 @@ export function getSidebar() {
                 link: '/core/api/actions/getBlockNumber',
               },
               { text: 'getChainId', link: '/core/api/actions/getChainId' },
+              {
+                text: 'getClient 🚧',
+                link: '/core/api/actions/getClient',
+              },
               {
                 text: 'getConnections',
                 link: '/core/api/actions/getConnections',
@@ -298,11 +307,19 @@ export function getSidebar() {
                 text: 'getEnsResolver',
                 link: '/core/api/actions/getEnsResolver',
               },
+              {
+                text: 'getPublicClient 🚧',
+                link: '/core/api/actions/getPublicClient',
+              },
               { text: 'getToken', link: '/core/api/actions/getToken' },
               {
                 text: 'getTransaction',
                 link: '/core/api/actions/getTransaction',
               },
+              {
+                text: 'getWalletClient 🚧',
+                link: '/core/api/actions/getWalletClient',
+              },
               {
                 text: 'multicall 🚧',
                 link: '/core/api/actions/multicall',
@@ -356,10 +373,18 @@ export function getSidebar() {
                 text: 'watchChainId',
                 link: '/core/api/actions/watchChainId',
               },
+              {
+                text: 'watchClient 🚧',
+                link: '/core/api/actions/watchClient',
+              },
               {
                 text: 'watchConnections',
                 link: '/core/api/actions/watchConnections',
               },
+              {
+                text: 'watchPublicClient 🚧',
+                link: '/core/api/actions/watchPublicClient',
+              },
               {
                 text: 'watchContractEvent 🚧',
                 link: '/core/api/actions/watchContractEvent',

docs/core/api/actions/watchAccount.md

@@ -33,7 +33,7 @@ import { type WatchAccountParameters } from '@wagmi/core'
 
 ### onChange
 
-`onChange: (data: GetAccountReturnType) => void`
+`onChange(account: GetAccountReturnType, prevAccount: GetAccountReturnType): void`
 
 Callback function called when account changes.
 
@@ -43,8 +43,8 @@ import { watchAccount } from '@wagmi/core'
 import { config } from './config'
 
 const unwatch = watchAccount(config, {
-  onChange(data) { // [!code focus:3]
-    console.log('Account changed!', data)
+  onChange(account) { // [!code focus:3]
+    console.log('Account changed!', account)
   },
 })
 unwatch()

docs/core/api/actions/watchChainId.md

@@ -33,7 +33,7 @@ import { type WatchChainIdParameters } from '@wagmi/core'
 
 ### onChange
 
-`onChange: (data: GetChainIdReturnType) => void`
+`onChange(chainId: GetChainIdReturnType, prevChainId: GetChainIdReturnType): void`
 
 Callback function called when chain ID changes.
 
@@ -43,8 +43,8 @@ import { watchChainId } from '@wagmi/core'
 import { config } from './config'
 
 const unwatch = watchChainId(config, {
-  onChange(data) { // [!code focus:3]
-    console.log('Chain ID changed!', data)
+  onChange(chainId) { // [!code focus:3]
+    console.log('Chain ID changed!', chainId)
   },
 })
 unwatch()

docs/core/api/actions/watchConnections.md

@@ -33,7 +33,7 @@ import { type WatchConnectionsParameters } from '@wagmi/core'
 
 ### onChange
 
-`onChange: (data: GetConnectionsReturnType) => void`
+`onChange(connections: GetConnectionsReturnType, prevConnections: GetConnectionsReturnType): void`
 
 Callback function called when connections changes.
 

package.json

@@ -53,7 +53,7 @@
   "simple-git-hooks": {
     "pre-commit": "pnpm format && pnpm lint:fix"
   },
-  "packageManager": "pnpm@8.6.12",
+  "packageManager": "pnpm@8.7.5",
   "pnpm": {
     "overrides": {
       "@wagmi/connectors": "workspace:*",

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

@@ -0,0 +1,19 @@
+import { chain, config } from '@wagmi/test'
+import { expectTypeOf, test } from 'vitest'
+
+import { getClient } from './getClient.js'
+
+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'>()
+})

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

@@ -0,0 +1,8 @@
+import { config } from '@wagmi/test'
+import { expect, test } from 'vitest'
+
+import { getClient } from './getClient.js'
+
+test('default', async () => {
+  expect(getClient(config)).toBeDefined()
+})

packages/core/src/actions/getClient.ts

@@ -0,0 +1,30 @@
+import { type Client } from 'viem'
+
+import type { Config } from '../createConfig.js'
+import type { ChainIdParameter } from '../types/properties.js'
+import type { Evaluate } from '../types/utils.js'
+
+export type GetClientParameters<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+> = ChainIdParameter<config, chainId>
+
+export type GetClientReturnType<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+> = Evaluate<
+  Client<
+    config['_internal']['transports'][chainId],
+    Extract<config['chains'][number], { id: chainId }>
+  >
+>
+
+export function getClient<
+  config extends Config,
+  chainId extends config['chains'][number]['id'],
+>(
+  config: config,
+  parameters: GetClientParameters<config, chainId> = {},
+): GetClientReturnType<config, chainId> {
+  return config.getClient(parameters) as GetClientReturnType<config, chainId>
+}

packages/core/src/actions/viem/getPublicClient.ts → packages/core/src/actions/getPublicClient.ts

@@ -1,7 +1,8 @@
 import { type PublicClient, publicActions } from 'viem'
-import type { Config } from '../../createConfig.js'
-import type { ChainIdParameter } from '../../types/properties.js'
-import type { Evaluate } from '../../types/utils.js'
+
+import type { Config } from '../createConfig.js'
+import type { ChainIdParameter } from '../types/properties.js'
+import type { Evaluate } from '../types/utils.js'
 
 export type GetPublicClientParameters<
   config extends Config = Config,

packages/core/src/actions/viem/getWalletClient.test.ts → packages/core/src/actions/getWalletClient.test.ts

@@ -1,8 +1,8 @@
 import { config } from '@wagmi/test'
 import { expect, test } from 'vitest'
 
-import { connect } from '../connect.js'
-import { disconnect } from '../disconnect.js'
+import { connect } from './connect.js'
+import { disconnect } from './disconnect.js'
 import { getWalletClient } from './getWalletClient.js'
 
 const connector = config.connectors[0]!

packages/core/src/actions/viem/getWalletClient.ts → packages/core/src/actions/getWalletClient.ts

@@ -1,11 +1,12 @@
 import { type Account, type WalletClient, walletActions } from 'viem'
-import type { Config } from '../../createConfig.js'
-import type { Evaluate } from '../../types/utils.js'
+
+import type { Config } from '../createConfig.js'
+import type { Evaluate } from '../types/utils.js'
 import {
   type GetConnectorClientError,
   type GetConnectorClientParameters,
   getConnectorClient,
-} from '../getConnectorClient.js'
+} from './getConnectorClient.js'
 
 export type GetWalletClientParameters<
   config extends Config = Config,

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

@@ -9,8 +9,9 @@ import { watchAccount } from './watchAccount.js'
 test('default', async () => {
   const accounts: { address: Address | undefined; status: string }[] = []
   const unwatch = watchAccount(config, {
-    onChange: (data) =>
-      accounts.push({ address: data.address, status: data.status }),
+    onChange(data) {
+      accounts.push({ address: data.address, status: data.status })
+    },
   })
 
   await connect(config, { connector: config.connectors[0]! })

packages/core/src/actions/watchAccount.ts

@@ -3,7 +3,10 @@ import { deepEqual } from '../utils/deepEqual.js'
 import { type GetAccountReturnType, getAccount } from './getAccount.js'
 
 export type WatchAccountParameters = {
-  onChange(data: GetAccountReturnType, prevData: GetAccountReturnType): void
+  onChange(
+    account: GetAccountReturnType,
+    prevAccount: GetAccountReturnType,
+  ): void
 }
 
 export type WatchAccountReturnType = () => void

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

@@ -6,7 +6,9 @@ import { watchChainId } from './watchChainId.js'
 test('default', async () => {
   const chainIds: number[] = []
   const unwatch = watchChainId(config, {
-    onChange: (chainId) => chainIds.push(chainId),
+    onChange(chainId) {
+      chainIds.push(chainId)
+    },
   })
   config.setState((x) => ({ ...x, chainId: chain.mainnet2.id }))
   config.setState((x) => ({ ...x, chainId: chain.mainnet.id }))

packages/core/src/actions/watchChainId.ts

@@ -2,7 +2,10 @@ import type { Config } from '../createConfig.js'
 import type { GetChainIdReturnType } from './getChainId.js'
 
 export type WatchChainIdParameters<config extends Config = Config> = {
-  onChange(data: GetChainIdReturnType<config>): void
+  onChange(
+    chainId: GetChainIdReturnType<config>,
+    prevChainId: GetChainIdReturnType<config>,
+  ): void
 }
 
 export type WatchChainIdReturnType = () => void

packages/core/src/actions/watchClient.test-d.ts

@@ -0,0 +1,15 @@
+import { config } from '@wagmi/test'
+import { expectTypeOf, test } from 'vitest'
+
+import { watchClient } from './watchClient.js'
+
+test('default', () => {
+  watchClient(config, {
+    onChange(client) {
+      expectTypeOf(client.chain).toEqualTypeOf<
+        typeof config['chains'][number]
+      >()
+      expectTypeOf(client.transport.type).toEqualTypeOf<'http'>()
+    },
+  })
+})

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

@@ -0,0 +1,23 @@
+import { config } from '@wagmi/test'
+import type { Client } from 'viem'
+import { expect, test } from 'vitest'
+
+import { switchChain } from './switchChain.js'
+import { watchClient } from './watchClient.js'
+
+test('default', async () => {
+  const clients: Client[] = []
+  const unwatch = watchClient(config, {
+    onChange(client) {
+      clients.push(client)
+    },
+  })
+
+  switchChain(config, { chainId: 456 })
+  switchChain(config, { chainId: 10 })
+  switchChain(config, { chainId: 1 })
+
+  expect(clients.length).toBe(3)
+
+  unwatch()
+})

packages/core/src/actions/watchClient.ts

@@ -0,0 +1,34 @@
+import type { Config } from '../createConfig.js'
+import { type GetClientReturnType, getClient } from './getClient.js'
+
+export type WatchClientParameters<
+  config extends Config = Config,
+  chainId extends config['chains'][number]['id'] = config['chains'][number]['id'],
+> = {
+  onChange(
+    publicClient: GetClientReturnType<config, chainId>,
+    prevClient: GetClientReturnType<config, chainId>,
+  ): void
+}
+
+export type WatchClientReturnType = () => void
+
+/** https://alpha.wagmi.sh/core/api/actions/watchClient */
+export function watchClient<
+  config extends Config,
+  chainId extends config['chains'][number]['id'],
+>(
+  config: config,
+  parameters: WatchClientParameters<config, chainId>,
+): WatchClientReturnType {
+  const { onChange } = parameters
+  return config.subscribe(
+    () => getClient(config) as GetClientReturnType<config, chainId>,
+    onChange,
+    {
+      equalityFn(a, b) {
+        return a?.uid === b?.uid
+      },
+    },
+  )
+}

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

@@ -9,7 +9,9 @@ import { watchConnections } from './watchConnections.js'
 test('default', async () => {
   const connections: Connection[][] = []
   const unwatch = watchConnections(config, {
-    onChange: (connection) => connections.push(connection),
+    onChange(connection) {
+      connections.push(connection)
+    },
   })
 
   const connector = config.connectors[0]!

packages/core/src/actions/watchConnections.ts

@@ -6,7 +6,10 @@ import {
 } from './getConnections.js'
 
 export type WatchConnectionsParameters = {
-  onChange(data: GetConnectionsReturnType): void
+  onChange(
+    connections: GetConnectionsReturnType,
+    prevConnections: GetConnectionsReturnType,
+  ): void
 }
 
 export type WatchConnectionsReturnType = () => void

packages/core/src/actions/watchPublicClient.test-d.ts

@@ -0,0 +1,15 @@
+import { config } from '@wagmi/test'
+import { expectTypeOf, test } from 'vitest'
+
+import { watchPublicClient } from './watchPublicClient.js'
+
+test('default', () => {
+  watchPublicClient(config, {
+    onChange(client) {
+      expectTypeOf(client.chain).toEqualTypeOf<
+        typeof config['chains'][number]
+      >()
+      expectTypeOf(client.transport.type).toEqualTypeOf<'http'>()
+    },
+  })
+})