feat: decorate clients with actions (#77)

* feat: fall back to getLogs if filters are not supported

* Update src/actions/public/watchContractEvent.test.ts

Co-authored-by: awkweb <tom@meagher.co>

* pr review

* feat: decode event log topics & data

* wip: public

* wip: add ens

* docs: public actions

* wip: wallet actions

* docs: wallet actions

* wip: test actions

* wip: add utils to main entrypoint

* tests: add tests

* playgrounds: update

* chore: changeset

* test

* refactor: wire up decorator generics

* fix conflicts

* format

---------

Co-authored-by: awkweb <tom@meagher.co>

.changeset/unlucky-poems-rush.md

@@ -0,0 +1,21 @@
+---
+"viem": patch
+---
+
+Decorated Clients with their respective Actions.
+
+Example:
+
+```diff
+import { createPublicClient, http } from 'viem'
+import { mainnet } from 'viem/chains'
+-import { getBlockNumber } from 'viem/public'
+
+const client = createPublicClient({
+  chain: mainnet,
+  transport: http(),
+})
+
+- const blockNumber = await getBlockNumber(client)
++ const blockNumber = await client.getBlockNumber()
+```

playgrounds/browser/src/components/actions/AddChain.tsx

@@ -1,13 +1,12 @@
 import type { WalletClient } from 'viem'
 import { celo } from 'viem/chains'
-import { addChain } from 'viem/wallet'
 
 export function AddChain({ client }: { client: WalletClient }) {
   return (
     <div>
       <button
         onClick={async () => {
-          await addChain(client, celo)
+          await client.addChain({ chain: celo })
         }}
       >
         add chain

playgrounds/browser/src/components/actions/GetBalance.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
 import type { PublicClient } from 'viem'
-import { getBalance } from 'viem/public'
 
 export function GetBalance({
   address = '0xa5cc3c03994DB5b0d9A5eEdD10CabaB0813678AC',
@@ -13,7 +12,7 @@ export function GetBalance({
   useEffect(() => {
     ;(async () => {
       setBalance(
-        await getBalance(client, {
+        await client.getBalance({
           address,
         }),
       )

playgrounds/browser/src/components/actions/GetBlock.tsx

@@ -1,16 +1,15 @@
 import { useEffect, useState } from 'react'
 import type { PublicClient } from 'viem'
 import type { GetBlockResponse } from 'viem/public'
-import { getBlock } from 'viem/public'
 
 export function GetBlock({ client }: { client: PublicClient }) {
   const [latestBlock, setLatestBlock] = useState<GetBlockResponse>()
   const [block, setBlock] = useState<GetBlockResponse>()
 
   useEffect(() => {
     ;(async () => {
-      setLatestBlock(await getBlock(client, { blockTag: 'latest' }))
-      setBlock(await getBlock(client, { blockNumber: 42069n }))
+      setLatestBlock(await client.getBlock({ blockTag: 'latest' }))
+      setBlock(await client.getBlock({ blockNumber: 42069n }))
     })()
   }, [client])
 

playgrounds/browser/src/components/actions/GetBlockNumber.tsx

@@ -1,13 +1,12 @@
 import { useEffect, useState } from 'react'
 import type { PublicClient } from 'viem'
 import type { GetBlockNumberResponse } from 'viem/public'
-import { getBlockNumber } from 'viem/public'
 
 export function GetBlockNumber({ client }: { client: PublicClient }) {
   const [blockNumber, setBlockNumber] = useState<GetBlockNumberResponse>()
   useEffect(() => {
     ;(async () => {
-      setBlockNumber(await getBlockNumber(client))
+      setBlockNumber(await client.getBlockNumber())
     })()
   }, [client])
   return <div>{blockNumber?.toString()}</div>

playgrounds/browser/src/components/actions/GetPermissions.tsx

@@ -1,12 +1,11 @@
 import type { WalletClient } from 'viem'
-import { getPermissions } from 'viem/wallet'
 
 export function GetPermissions({ client }: { client: WalletClient }) {
   return (
     <div>
       <button
         onClick={async () => {
-          console.log(await getPermissions(client))
+          console.log(await client.getPermissions())
         }}
       >
         get permissions

playgrounds/browser/src/components/actions/GetTransaction.tsx

@@ -1,8 +1,6 @@
 import { useState } from 'react'
-import type { PublicClient } from 'viem'
+import type { Address, PublicClient } from 'viem'
 import type { GetTransactionArgs, GetTransactionResponse } from 'viem/public'
-import { getTransaction } from 'viem/public'
-import type { Address } from 'viem'
 
 export function GetTransaction({ client }: { client: PublicClient }) {
   return (
@@ -24,7 +22,7 @@ function GetTransactionByHash({ client }: { client: PublicClient }) {
 
   const handleGetTransaction = async () => {
     if (hash) {
-      setTransaction(await getTransaction(client, { hash }))
+      setTransaction(await client.getTransaction({ hash }))
     }
   }
 
@@ -64,7 +62,7 @@ function GetTransactionByHashAndIndex({ client }: { client: PublicClient }) {
   const handleGetTransaction = async () => {
     if (blockHash && index) {
       setTransaction(
-        await getTransaction(client, { blockHash, index: parseInt(index) }),
+        await client.getTransaction({ blockHash, index: parseInt(index) }),
       )
     }
   }
@@ -108,7 +106,7 @@ function GetTransactionByNumberAndIndex({ client }: { client: PublicClient }) {
   const handleGetTransaction = async () => {
     if (blockNumber && index) {
       setTransaction(
-        await getTransaction(client, {
+        await client.getTransaction({
           blockNumber: BigInt(blockNumber),
           index: parseInt(index),
         }),
@@ -156,7 +154,7 @@ function GetTransactionByTagAndIndex({ client }: { client: PublicClient }) {
   const handleGetTransaction = async () => {
     if (blockTag && index) {
       setTransaction(
-        await getTransaction(client, {
+        await client.getTransaction({
           blockTag,
           index: parseInt(index),
         }),

playgrounds/browser/src/components/actions/RequestAccountAddresses.tsx

@@ -1,14 +1,13 @@
 import { useState } from 'react'
 import type { WalletClient } from 'viem'
-import { requestAccounts } from 'viem/wallet'
 
 export function RequestAccountAddresses({ client }: { client: WalletClient }) {
   const [addresses, setAddresses] = useState<`0x${string}`[]>()
   return (
     <div>
       <button
         onClick={async () => {
-          const addresses = await requestAccounts(client)
+          const addresses = await client.requestAccounts()
           setAddresses(addresses)
         }}
       >

playgrounds/browser/src/components/actions/RequestPermissions.tsx

@@ -1,12 +1,11 @@
 import type { WalletClient } from 'viem'
-import { requestPermissions } from 'viem/wallet'
 
 export function RequestPermissions({ client }: { client: WalletClient }) {
   return (
     <div>
       <button
         onClick={async () => {
-          console.log(await requestPermissions(client, { eth_accounts: {} }))
+          console.log(await client.requestPermissions({ eth_accounts: {} }))
         }}
       >
         request permissions

playgrounds/browser/src/components/actions/SendTransaction.tsx

@@ -1,14 +1,13 @@
 import type { WalletClient } from 'viem'
-import { parseEther } from 'viem/utils'
-import { sendTransaction } from 'viem/wallet'
+import { parseEther } from 'viem'
 
 export function SendTransaction({ client }: { client: WalletClient }) {
   return (
     <div>
       <button
         onClick={async () => {
-          const [account] = await client.request({ method: 'eth_accounts' })
-          await sendTransaction(client, {
+          const [account] = await client.getAccounts()
+          await client.sendTransaction({
             from: account,
             to: '0xa5cc3c03994DB5b0d9A5eEdD10CabaB0813678AC',
             value: parseEther('0.0001'),

playgrounds/browser/src/components/actions/SwitchChain.tsx

@@ -1,13 +1,12 @@
 import type { WalletClient } from 'viem'
 import { mainnet } from 'viem/chains'
-import { switchChain } from 'viem/wallet'
 
 export function SwitchChain({ client }: { client: WalletClient }) {
   return (
     <div>
       <button
         onClick={async () => {
-          await switchChain(client, mainnet)
+          await client.switchChain(mainnet)
         }}
       >
         switch chain

playgrounds/browser/src/components/actions/WatchBlockNumber.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useState } from 'react'
 import type { PublicClient } from 'viem'
 import type { OnBlockNumberResponse } from 'viem/public'
-import { watchBlockNumber } from 'viem/public'
 
 export function WatchBlockNumber({ client }: { client: PublicClient }) {
   const [blockNumber, setBlockNumber] = useState<OnBlockNumberResponse>()
   useEffect(() => {
-    const unwatch = watchBlockNumber(client, {
+    const unwatch = client.watchBlockNumber({
       emitOnBegin: true,
       onBlockNumber: setBlockNumber,
     })

playgrounds/browser/src/components/actions/WatchBlocks.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useState } from 'react'
 import type { PublicClient } from 'viem'
 import type { OnBlockResponse } from 'viem/public'
-import { watchBlocks } from 'viem/public'
 
 export function WatchBlocks({ client }: { client: PublicClient }) {
   const [block, setBlock] = useState<OnBlockResponse>()
   useEffect(() => {
-    const unwatch = watchBlocks(client, {
+    const unwatch = client.watchBlocks({
       emitOnBegin: true,
       onBlock: setBlock,
     })

playgrounds/browser/src/components/actions/WatchPendingTransactions.tsx

@@ -1,26 +1,25 @@
-import { useEffect, useState } from 'react';
-import type { PublicClient } from 'viem';
-import type { OnTransactionsResponse } from 'viem/public';
-import { watchPendingTransactions } from 'viem/public';
+import { useEffect, useState } from 'react'
+import type { PublicClient } from 'viem'
+import type { OnTransactionsResponse } from 'viem/public'
 
 export function WatchPendingTransactions({ client }: { client: PublicClient }) {
-  const [transactions, setTransactions] = useState<OnTransactionsResponse>([]);
+  const [transactions, setTransactions] = useState<OnTransactionsResponse>([])
   useEffect(() => {
     try {
-      const unwatch = watchPendingTransactions(client, {
+      const unwatch = client.watchPendingTransactions({
         onError: (err) => console.log(client.transport.url),
         onTransactions: setTransactions,
-      });
-      return unwatch;
+      })
+      return unwatch
     } catch (err) {
-      console.log(err);
+      console.log(err)
     }
-  }, [client]);
+  }, [client])
   return (
     <div style={{ maxHeight: 300, overflow: 'scroll' }}>
       {transactions.map((hash, i) => (
         <div key={i}>{hash}</div>
       ))}
     </div>
-  );
+  )
 }

playgrounds/bun/index.ts

@@ -1,6 +1,5 @@
 import { createPublicClient, http } from 'viem'
 import { mainnet, polygon } from 'viem/chains'
-import { getBlockNumber, getLogs, watchEvent } from 'viem/public'
 
 ////////////////////////////////////////////////////////////////////
 // Clients
@@ -19,17 +18,17 @@ export const publicClients = {
 ////////////////////////////////////////////////////////////////////
 // Blocks
 
-// const blockNumber = await getBlockNumber(publicClients.mainnet)
-// const blockNumber = await getBlockNumber(publicClients.polygon)
+// const blockNumber = await publicClients.mainnet.getBlockNumber()
+// const blockNumber = await publicClients.polygon.getBlockNumber()
 // console.log('blockNumber', blockNumber)
 
 ////////////////////////////////////////////////////////////////////
 // Events, Logs & Filters
 
-// const logs = await getLogs(publicClients.mainnet)
+// const logs = await publicClients.mainnet.getLogs()
 // console.log(logs)
 
-watchEvent(publicClients.mainnet, {
+publicClients.mainnet.watchEvent({
   onError(error) {
     console.log(error)
   },