wagmi-extended 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -35
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
# wagmi-extended
|
|
2
2
|
|
|
3
|
-
`wagmi-extended` is a library that provides extended hooks and helper functions on top of [Wagmi](https://wagmi.sh/), [Viem](https://viem.sh/), and [TanStack Query](https://tanstack.com/query/v5) for Ethereum and blockchain development with React.
|
|
3
|
+
`wagmi-extended` is a library that provides extended hooks and helper functions on top of [Wagmi](https://wagmi.sh/), [Viem](https://viem.sh/), and [TanStack Query](https://tanstack.com/query/v5) for Ethereum and blockchain development with React.
|
|
4
|
+
<br />
|
|
5
|
+
<br />
|
|
6
|
+
It simplifies common tasks such as fetching token metadata, approving ERC20 token transfers, sending transactions, writing contracts, waiting for receipt and more—with configurable behavior via global defaults.
|
|
4
7
|
|
|
5
8
|
## Table of Contents
|
|
6
9
|
|
|
7
10
|
- [Installation](#installation)
|
|
8
11
|
- [Requirements](#requirements)
|
|
9
12
|
- [API](#api)
|
|
10
|
-
- [Setup](#setup)
|
|
11
13
|
- [Usage](#usage)
|
|
12
14
|
- [useERC20ApproveX Hook](#useerc20approvex-hook)
|
|
13
15
|
- [useContractWriteX Hook](#usecontractwritex-hook)
|
|
14
16
|
- [useSendTransactionX Hook](#usesendtransactionx-hook)
|
|
15
17
|
- [useTokenX Hook](#usetokenx-hook)
|
|
18
|
+
- [Non-hook functions setup](#Non-hook-functions-setup)
|
|
16
19
|
- [License](#license)
|
|
17
20
|
|
|
18
21
|
### Installation
|
|
@@ -38,7 +41,7 @@ Your project must include the following peer dependencies:
|
|
|
38
41
|
- **Viem**: ^2.0.0
|
|
39
42
|
- **@tanstack/react-query**: ^5.0.0
|
|
40
43
|
|
|
41
|
-
Note: You must wrap your application with necessary providers (e.g. QueryClientProvider from TanStack Query).
|
|
44
|
+
Note: You must wrap your application with necessary providers (e.g. QueryClientProvider from TanStack Query and WagmiProvider).
|
|
42
45
|
|
|
43
46
|
### API
|
|
44
47
|
|
|
@@ -49,6 +52,7 @@ import {
|
|
|
49
52
|
useTokenX,
|
|
50
53
|
useERC20ApproveX,
|
|
51
54
|
useSendTransactionX,
|
|
55
|
+
useWriteTransactionX,
|
|
52
56
|
setDefaults,
|
|
53
57
|
getDefaults,
|
|
54
58
|
} from "wagmi-extended";
|
|
@@ -56,38 +60,6 @@ import {
|
|
|
56
60
|
|
|
57
61
|
Each hook is documented with detailed JSDoc comments (including usage examples) in the source code. Refer to that documentation for additional details.
|
|
58
62
|
|
|
59
|
-
## Setup
|
|
60
|
-
|
|
61
|
-
For easier use of fetch (non hook) functions setup the default configuration.
|
|
62
|
-
<br />
|
|
63
|
-
This is done by calling `setDefaults` in your application initialization (e.g., in index.tsx or App.tsx).
|
|
64
|
-
|
|
65
|
-
Example:
|
|
66
|
-
|
|
67
|
-
```bash
|
|
68
|
-
// index.tsx (or App.tsx)
|
|
69
|
-
import React from "react";
|
|
70
|
-
import ReactDOM from "react-dom/client";
|
|
71
|
-
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
72
|
-
import { useConfig } from "wagmi";
|
|
73
|
-
import { setDefaults } from "wagmi-extended";
|
|
74
|
-
|
|
75
|
-
const queryClient = new QueryClient();
|
|
76
|
-
// Obtain your Wagmi configuration from your initialization or provider
|
|
77
|
-
const wagmiConfig = /* your wagmi config here */;
|
|
78
|
-
|
|
79
|
-
// Set defaults for the extended library functions.
|
|
80
|
-
setDefaults(queryClient, wagmiConfig);
|
|
81
|
-
|
|
82
|
-
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
83
|
-
<React.StrictMode>
|
|
84
|
-
<QueryClientProvider client={queryClient}>
|
|
85
|
-
<App />
|
|
86
|
-
</QueryClientProvider>
|
|
87
|
-
</React.StrictMode>
|
|
88
|
-
);
|
|
89
|
-
```
|
|
90
|
-
|
|
91
63
|
## Hooks explanations and examples
|
|
92
64
|
|
|
93
65
|
### useERC20ApproveX Hook
|
|
@@ -215,6 +187,40 @@ function TokenDisplay({ tokenAddress }: { tokenAddress: Address }) {
|
|
|
215
187
|
}
|
|
216
188
|
```
|
|
217
189
|
|
|
190
|
+
## Non-hook functions setup
|
|
191
|
+
|
|
192
|
+
**Feel free to skip Setup-section if using only hooks - no fetch methods directly**
|
|
193
|
+
<br />
|
|
194
|
+
For easier use of fetch (non hook) functions setup the default configuration.
|
|
195
|
+
<br />
|
|
196
|
+
This is done by calling `setDefaults` in your application initialization (e.g., in index.tsx or App.tsx).
|
|
197
|
+
|
|
198
|
+
Example:
|
|
199
|
+
|
|
200
|
+
```bash
|
|
201
|
+
// index.tsx (or App.tsx)
|
|
202
|
+
import React from "react";
|
|
203
|
+
import ReactDOM from "react-dom/client";
|
|
204
|
+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
205
|
+
import { useConfig } from "wagmi";
|
|
206
|
+
import { setDefaults } from "wagmi-extended";
|
|
207
|
+
import { wagmiConfig } from "/your/path/to/wagmi-config";
|
|
208
|
+
|
|
209
|
+
const queryClient = new QueryClient();
|
|
210
|
+
// Obtain your Wagmi configuration from your initialization or provider
|
|
211
|
+
|
|
212
|
+
// Set defaults for the extended library functions.
|
|
213
|
+
setDefaults(queryClient, wagmiConfig);
|
|
214
|
+
|
|
215
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
216
|
+
<React.StrictMode>
|
|
217
|
+
<QueryClientProvider client={queryClient}>
|
|
218
|
+
<App />
|
|
219
|
+
</QueryClientProvider>
|
|
220
|
+
</React.StrictMode>
|
|
221
|
+
);
|
|
222
|
+
```
|
|
223
|
+
|
|
218
224
|
### License
|
|
219
225
|
|
|
220
226
|
This is free and unencumbered software released into the public domain.
|