implemented: wallet_watchAsset RPC Method

Author: kolirt

README.md

@@ -8,10 +8,10 @@
 Simple WalletConnect Web3Modal v2 integration package for Vue3 apps.
 
 ### Versions
-| package version | web3modal |
-|-----------------|-------------------|
-| [2.x.x](https://github.com/kolirt/vue-web3-auth/tree/v2)       | [v2](https://github.com/WalletConnect/web3modal/tree/V2)            |
 
+| package version                                          | web3modal                                                |
+| -------------------------------------------------------- | -------------------------------------------------------- |
+| [2.x.x](https://github.com/kolirt/vue-web3-auth/tree/v2) | [v2](https://github.com/WalletConnect/web3modal/tree/V2) |
 
 ### Table of Contents
 
@@ -39,6 +39,7 @@ Simple WalletConnect Web3Modal v2 integration package for Vue3 apps.
     - [EstimateWriteContractGas](#estimatewritecontractgas)
     - [ParseEvents](#parseevents)
     - [WatchContractEvent](#watchcontractevent)
+    - [WatchAsset](#watchasset)
   - [Composable](#composable)
     - [UseFetchBalance](#usefetchbalance)
 - [Demo](#demo)
@@ -420,6 +421,18 @@ const unwatch = watchContractEvent(
 )
 ```
 
+### WatchAsset
+
+```js
+import { watchAsset } from '@kolirt/vue-web3-auth'
+
+const unwatch = watchAsset({
+  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+  decimals: 18,
+  symbol: 'DAI'
+})
+```
+
 ## Composable
 
 ### UseFetchBalance

lib/actions/asset.ts

@@ -0,0 +1,22 @@
+import { getWalletClient } from '@wagmi/core'
+
+import { chain } from '../chain'
+import type { WatchAsset } from '../types'
+
+export async function watchAsset(options: WatchAsset) {
+  const walletClient = await getWalletClient({ chainId: options.chainId || chain.value.id })
+
+  if (walletClient) {
+    return await walletClient.watchAsset({
+      type: 'ERC20',
+      options: {
+        address: options.address,
+        symbol: options.symbol,
+        decimals: options.decimals,
+        image: options.image
+      }
+    })
+  }
+
+  return false
+}

lib/actions/event.ts

@@ -1,6 +1,6 @@
 import { watchContractEvent as masterWatchContractEvent } from '@wagmi/core'
-import { decodeEventLog } from 'viem'
 import type { TransactionReceipt } from 'viem/src/types/transaction'
+import { decodeEventLog } from 'viem/utils'
 
 import { chain } from '../chain'
 import type { DecodedEvent, ParseEvents, WatchContractEvent } from '../types'

lib/actions/index.ts

@@ -1,3 +1,5 @@
+export { watchAsset } from './asset'
+
 export { fetchBalance, useFetchBalance } from './balance'
 
 export { fetchBlockNumber } from './block'

lib/actions/multicall.ts

@@ -1,5 +1,6 @@
 import { multicall as masterMulticall } from '@wagmi/core'
-import { type ContractFunctionConfig, type MulticallParameters } from 'viem'
+import { type MulticallParameters } from 'viem/actions'
+import { type ContractFunctionConfig } from 'viem/src/types/contract'
 
 import type { MulticallArgs } from '../types'
 

lib/types.ts

@@ -1,6 +1,7 @@
 import type { Chain, Unit } from '@wagmi/core'
 import type { ThemeCtrlState } from '@web3modal/core'
 import type { EthereumClient } from '@web3modal/ethereum'
+import type { WatchAssetParams } from 'viem/src/types/eip1193'
 
 type BlockTag = 'latest' | 'earliest' | 'pending' | 'safe' | 'finalized'
 
@@ -131,6 +132,10 @@ export type FetchBalance = {
   token?: `0x${string}`
 }
 
+export type WatchAsset = {
+  chainId?: number
+} & WatchAssetParams['options']
+
 export type FetchBalanceOptions = {
   disableAutoFetch?: boolean
   autoReloadTime?: number

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolirt/vue-web3-auth",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "Web3 authentication for Vue3 apps based on WalletConnect Web3Modal v2",
   "author": "kolirt",
   "license": "MIT",