@pyratzlabs/react-fhevm-utils 1.0.2 → 1.0.3
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 +347 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
## Introduction
|
|
2
|
+
|
|
3
|
+
@pyratzlabs/react-fhevm-utils is a typescript library that enables developers to interact with Zama's [fhevmjs](https://www.npmjs.com/package/fhevmjs?activeTab=readme) API. This library provides a React hooks set that allow frontend developers to easily decrypt/encrypt values or transfer encrypted tokens.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
# Using npm
|
|
9
|
+
npm install @pyratzlabs/react-fhevm-utils
|
|
10
|
+
|
|
11
|
+
# Using Yarn
|
|
12
|
+
yarn add @pyratzlabs/react-fhevm-utils
|
|
13
|
+
|
|
14
|
+
# Using pnpm
|
|
15
|
+
pnpm add @pyratzlabs/react-fhevm-utils
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
This will download and install the @pyratzlabs/react-fhevm-utils library and its dependencies into your project.
|
|
19
|
+
|
|
20
|
+
## Initialization
|
|
21
|
+
|
|
22
|
+
### Install dependencies
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# Using npm
|
|
26
|
+
npm install @tanstack/react-query ethers wagmi
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
You can alors use yarn or pnpm depending on your preferences
|
|
30
|
+
|
|
31
|
+
### Providers
|
|
32
|
+
|
|
33
|
+
You can declare these providers a the root of your projet, wherever it makes more sense to you.
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
// src/app/layout.tsx
|
|
37
|
+
|
|
38
|
+
import React from "react";
|
|
39
|
+
import FhevmProvider from "@pyratzlabs/react-fhevm-utils";
|
|
40
|
+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
41
|
+
import { WagmiProvider } from "wagmi";
|
|
42
|
+
|
|
43
|
+
export default function RootLayout({
|
|
44
|
+
children,
|
|
45
|
+
}: Readonly<{
|
|
46
|
+
children: React.ReactNode;
|
|
47
|
+
}>) {
|
|
48
|
+
const queryClient = new QueryClient();
|
|
49
|
+
const config = {
|
|
50
|
+
// ... your wagmi config
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<html lang="en">
|
|
55
|
+
<body>
|
|
56
|
+
<WagmiProvider config={config}>
|
|
57
|
+
<QueryClientProvider client={queryClient}>
|
|
58
|
+
<FhevmProvider>{children}</FhevmProvider>
|
|
59
|
+
</QueryClientProvider>
|
|
60
|
+
</WagmiProvider>
|
|
61
|
+
</body>
|
|
62
|
+
</html>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Retrieve user encrypted balance
|
|
68
|
+
|
|
69
|
+
To retrieve user encrypted balance you can use useGetEncryptedBalance hook.
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
// src/app/page.tsx
|
|
73
|
+
|
|
74
|
+
import React from "react";
|
|
75
|
+
|
|
76
|
+
export default function Home() {
|
|
77
|
+
const { encryptedBalance } = useGetEncryptedBalance({
|
|
78
|
+
tokenAddress: "0xD61a80ec935D210b54FC97F0FBCB8C4793bE80C8",
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<div className="space-y-4">
|
|
83
|
+
<p>User encrypted balance : {encryptedBalance}</p>
|
|
84
|
+
</div>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Decrypt user balance
|
|
90
|
+
|
|
91
|
+
You can decrypt the user balance using useDecryptBalance hook.
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
// src/app/page.tsx
|
|
95
|
+
|
|
96
|
+
import React, { useState } from "react";
|
|
97
|
+
|
|
98
|
+
const TOKEN_ADDRESS = "0xD61a80ec935D210b54FC97F0FBCB8C4793bE80C8";
|
|
99
|
+
|
|
100
|
+
export default function Home() {
|
|
101
|
+
const [decryptedBalance, setDecryptedBalance] = useState<number>();
|
|
102
|
+
|
|
103
|
+
const { encryptedBalance } = useGetEncryptedBalance({
|
|
104
|
+
tokenAddress: TOKEN_ADDRESS,
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
const { mutate, isPending: isDecrypting } = useDecryptBalance({
|
|
108
|
+
tokenAddress: TOKEN_ADDRESS,
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
const decrypt = async () => {
|
|
112
|
+
if (!encryptedBalance) {
|
|
113
|
+
setDecryptedBalance(0);
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
mutate(encryptedBalance, {
|
|
118
|
+
onSuccess: (balance: bigint) => {
|
|
119
|
+
setDecryptedBalance(balance * 10 ** -18);
|
|
120
|
+
},
|
|
121
|
+
});
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
return (
|
|
125
|
+
<div className="space-y-4">
|
|
126
|
+
<p>User encrypted balance : {encryptedBalance}</p>
|
|
127
|
+
|
|
128
|
+
<div className="flex items-center">
|
|
129
|
+
<p>User decrypted balance :</p>
|
|
130
|
+
{decryptedBalance ? (
|
|
131
|
+
<div>{decryptedBalance}</div>
|
|
132
|
+
) : (
|
|
133
|
+
<button>{isDecrypting ? "Decrypting..." : "Decrypt"}</button>
|
|
134
|
+
)}
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## Encrypt value
|
|
142
|
+
|
|
143
|
+
In order to encrypt value before a transfer you can use useEncryptValue hook.
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
// src/app/page.tsx
|
|
147
|
+
|
|
148
|
+
import React from "react";
|
|
149
|
+
|
|
150
|
+
const TOKEN_ADDRESS = "0xD61a80ec935D210b54FC97F0FBCB8C4793bE80C8";
|
|
151
|
+
|
|
152
|
+
export default function Home() {
|
|
153
|
+
const [value, setValue] = useState<number>();
|
|
154
|
+
|
|
155
|
+
const {
|
|
156
|
+
mutate: encrypt,
|
|
157
|
+
isPending: isEncrypting,
|
|
158
|
+
isSuccess: isEncryptSuccess,
|
|
159
|
+
isFailed: isEncryptFailed,
|
|
160
|
+
} = useEncryptValue({
|
|
161
|
+
tokenAddress: TOKEN_ADDRESS,
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
const handleEncrypt = () => {
|
|
165
|
+
const valueToEncrypt = BigInt(value * 10 ** 18);
|
|
166
|
+
|
|
167
|
+
encrypt(valueToEncrypt);
|
|
168
|
+
};
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<div className="space-y-4">
|
|
172
|
+
<input
|
|
173
|
+
placeholder="Enter value"
|
|
174
|
+
onChange={(e) => setValue(e.target.value)}
|
|
175
|
+
/>
|
|
176
|
+
<button onClick={handleEncrypt}>
|
|
177
|
+
{isEncrypting ? "Encrypting..." : `Encrypt value : ${value}`}
|
|
178
|
+
</button>
|
|
179
|
+
{isEncryptSuccess && <p>Encrypt Success</p>}
|
|
180
|
+
{isEncryptFailed && <p>Encrypt Failed</p>}
|
|
181
|
+
</div>
|
|
182
|
+
);
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## Transfer encrypted token
|
|
187
|
+
|
|
188
|
+
If you want to transfer tokens you need to encrypt value before calling the transfer method.
|
|
189
|
+
|
|
190
|
+
```tsx
|
|
191
|
+
// src/app/page.tsx
|
|
192
|
+
|
|
193
|
+
import React from "react";
|
|
194
|
+
import { Address } from "viem";
|
|
195
|
+
|
|
196
|
+
const TOKEN_ADDRESS = "0xD61a80ec935D210b54FC97F0FBCB8C4793bE80C8";
|
|
197
|
+
|
|
198
|
+
export default function Home() {
|
|
199
|
+
const [value, setValue] = useState<number>();
|
|
200
|
+
const [address, setAddress] = useState<Address>();
|
|
201
|
+
|
|
202
|
+
const {
|
|
203
|
+
mutate: encrypt,
|
|
204
|
+
isPending: isEncrypting,
|
|
205
|
+
isSuccess: isEncryptSuccess,
|
|
206
|
+
isFailed: isEncryptFailed,
|
|
207
|
+
} = useEncryptValue({
|
|
208
|
+
tokenAddress: TOKEN_ADDRESS,
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
const {
|
|
212
|
+
transfer,
|
|
213
|
+
isLoading: isTransferring,
|
|
214
|
+
isSuccess: isTransferSuccess,
|
|
215
|
+
isFailed: isTransferFailed,
|
|
216
|
+
} = useEncryptedTransfer({
|
|
217
|
+
tokenAddress: TOKEN_ADDRESS,
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
const transfer = () => {
|
|
221
|
+
if (!address || !value) return;
|
|
222
|
+
|
|
223
|
+
const valueToEncrypt = BigInt(value * 10 ** 18);
|
|
224
|
+
|
|
225
|
+
encrypt(valueToEncrypt, {
|
|
226
|
+
onSuccess: (result) => {
|
|
227
|
+
const { handles, inputProof } = result;
|
|
228
|
+
transfer(address, handles, inputProof);
|
|
229
|
+
},
|
|
230
|
+
});
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
return (
|
|
234
|
+
<div className="space-y-4">
|
|
235
|
+
<input
|
|
236
|
+
placeholder="Enter value"
|
|
237
|
+
onChange={(e) => setValue(e.target.value)}
|
|
238
|
+
/>
|
|
239
|
+
<input
|
|
240
|
+
placeholder="Reciever address"
|
|
241
|
+
onChange={(e) => setAddress(e.target.value)}
|
|
242
|
+
/>
|
|
243
|
+
|
|
244
|
+
<button onClick={transfer}>
|
|
245
|
+
{isEncrypting
|
|
246
|
+
? "Encrypting..."
|
|
247
|
+
: isTransferring
|
|
248
|
+
? "Transferring..."
|
|
249
|
+
: "Transfer"}
|
|
250
|
+
</button>
|
|
251
|
+
|
|
252
|
+
{isEncryptSuccess && <p>Encrypt Success</p>}
|
|
253
|
+
{isEncryptFailed && <p>Encrypt Failed</p>}
|
|
254
|
+
{isTransferSuccess && <p>Transfer Success</p>}
|
|
255
|
+
{isTransferFailed && <p>Transfer Failed</p>}
|
|
256
|
+
</div>
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
## Retrieve Fhevm instance
|
|
262
|
+
|
|
263
|
+
To retrieve fhevm instance you can use useFhevmInstance hook.
|
|
264
|
+
|
|
265
|
+
```tsx
|
|
266
|
+
// src/app/page.tsx
|
|
267
|
+
|
|
268
|
+
import React from "react";
|
|
269
|
+
|
|
270
|
+
export default function Home() {
|
|
271
|
+
const { instance } = useFhevmInstance();
|
|
272
|
+
|
|
273
|
+
return (
|
|
274
|
+
<div className="space-y-4">
|
|
275
|
+
<p>Fhevm instance : {instance.toString()}</p>
|
|
276
|
+
</div>
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
## Retrieve Fhevm instance
|
|
282
|
+
|
|
283
|
+
To retrieve fhevm instance you can use useFhevmInstance hook.
|
|
284
|
+
|
|
285
|
+
```tsx
|
|
286
|
+
// src/app/page.tsx
|
|
287
|
+
|
|
288
|
+
import React from "react";
|
|
289
|
+
|
|
290
|
+
export default function Home() {
|
|
291
|
+
const { instance } = useFhevmInstance();
|
|
292
|
+
|
|
293
|
+
return (
|
|
294
|
+
<div className="space-y-4">
|
|
295
|
+
<p>Fhevm instance : {instance.toString()}</p>
|
|
296
|
+
</div>
|
|
297
|
+
);
|
|
298
|
+
}
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
## Override Fhvem configuration
|
|
302
|
+
|
|
303
|
+
You can override Fhevm configuration depending on the chain you're working with.
|
|
304
|
+
|
|
305
|
+
```tsx
|
|
306
|
+
// src/app/layout.tsx
|
|
307
|
+
|
|
308
|
+
import React from "react";
|
|
309
|
+
import FhevmProvider, { FhevmConfig } from "@pyratzlabs/react-fhevm-utils";
|
|
310
|
+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
311
|
+
import { WagmiProvider } from "wagmi";
|
|
312
|
+
import { polygonAmoy } from "viem/chains";
|
|
313
|
+
|
|
314
|
+
export default function RootLayout({
|
|
315
|
+
children,
|
|
316
|
+
}: Readonly<{
|
|
317
|
+
children: React.ReactNode;
|
|
318
|
+
}>) {
|
|
319
|
+
const queryClient = new QueryClient();
|
|
320
|
+
const config = {
|
|
321
|
+
// ... your wagmi config
|
|
322
|
+
};
|
|
323
|
+
|
|
324
|
+
const customFhevmConfig: FhevmConfig = {
|
|
325
|
+
network: polygonAmoy,
|
|
326
|
+
// other overridable configurations
|
|
327
|
+
// chainId: 11221212,
|
|
328
|
+
// networkUrl: "https://example-polygon-amoy-rpc.com/
|
|
329
|
+
};
|
|
330
|
+
|
|
331
|
+
return (
|
|
332
|
+
<html lang="en">
|
|
333
|
+
<body>
|
|
334
|
+
<WagmiProvider config={config}>
|
|
335
|
+
<QueryClientProvider client={queryClient}>
|
|
336
|
+
<FhevmProvider config={customFhevmConfig}>{children}</FhevmProvider>
|
|
337
|
+
</QueryClientProvider>
|
|
338
|
+
</WagmiProvider>
|
|
339
|
+
</body>
|
|
340
|
+
</html>
|
|
341
|
+
);
|
|
342
|
+
}
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
## License
|
|
346
|
+
|
|
347
|
+
This library is distributed under the MIT license.
|