@trustless-work/blocks 1.1.1 → 1.1.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 +67 -35
- package/bin/index.js +1967 -1967
- package/package.json +1 -1
- package/templates/dashboard/dashboard-01/Dashboard.tsx +315 -315
- package/templates/dashboard/dashboard-01/useDashboard.ts +119 -119
- package/templates/deps.json +1 -1
- package/templates/escrows/details/Actions.tsx +166 -166
package/README.md
CHANGED
|
@@ -1,13 +1,22 @@
|
|
|
1
|
-
<p align="center">
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://github.com/user-attachments/assets/5b182044-dceb-41f5-acf0-da22dea7c98a" alt="Trustless Work Blocks" />
|
|
3
|
+
</p>
|
|
2
4
|
|
|
3
|
-
# Trustless Work <a href="https://www.npmjs.com/package/@trustless-work/blocks" target="_blank">React
|
|
5
|
+
# Trustless Work <a href="https://www.npmjs.com/package/@trustless-work/blocks" target="_blank">React Blocks</a>
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
Production‑ready React blocks for integrating Trustless Work's escrow and dispute resolution flows into your dApp.
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
+
It includes:
|
|
10
|
+
|
|
11
|
+
- UI blocks (cards, tables, dialogs, forms) to list and manage escrows
|
|
12
|
+
- Providers for API config, wallet context, dialogs and amount calculations
|
|
9
13
|
- TanStack Query hooks for fetching and mutating escrows
|
|
10
|
-
- Wallet
|
|
14
|
+
- Wallet‑kit helpers and error handling utilities
|
|
15
|
+
|
|
16
|
+
## Requirements
|
|
17
|
+
|
|
18
|
+
- Node.js `>= 18.17`
|
|
19
|
+
- React 18 / Next.js 13+ (App Router recommended)
|
|
11
20
|
|
|
12
21
|
## Installation
|
|
13
22
|
|
|
@@ -20,18 +29,21 @@ yarn add @trustless-work/blocks
|
|
|
20
29
|
npx trustless-work init
|
|
21
30
|
```
|
|
22
31
|
|
|
23
|
-
What init does
|
|
32
|
+
**What `init` does:**
|
|
24
33
|
|
|
25
34
|
- Installs shadcn/ui components (prompted)
|
|
26
|
-
- Installs required deps:
|
|
27
|
-
-
|
|
28
|
-
-
|
|
35
|
+
- Installs required deps: `@tanstack/react-query`, `@trustless-work/escrow`, `axios`, `zod`,
|
|
36
|
+
`react-hook-form`, `@creit.tech/stellar-wallets-kit`, `react-day-picker`, etc.
|
|
37
|
+
- Creates `.twblocks.json` with your UI base alias (default: `"@/components/ui"`)
|
|
38
|
+
- Optionally wires providers into your Next.js `app/layout.tsx`
|
|
29
39
|
|
|
30
|
-
Environment
|
|
40
|
+
**Environment:**
|
|
31
41
|
|
|
32
|
-
- Create `NEXT_PUBLIC_API_KEY` in your env. The library uses `TrustlessWorkProvider` with
|
|
42
|
+
- Create `NEXT_PUBLIC_API_KEY` in your env. The library uses `TrustlessWorkProvider` with the
|
|
43
|
+
`development` base URL by default.
|
|
33
44
|
|
|
34
|
-
|
|
45
|
+
> For a full walkthrough and screenshots, check the tutorial at
|
|
46
|
+
> <a href="https://dapp.trustlesswork.com" target="_blank">the backoffice landing</a>.
|
|
35
47
|
|
|
36
48
|
## Quick Start
|
|
37
49
|
|
|
@@ -52,11 +64,8 @@ npx trustless-work add providers
|
|
|
52
64
|
```tsx
|
|
53
65
|
// app/layout.tsx
|
|
54
66
|
import { ReactQueryClientProvider } from "@/components/tw-blocks/providers/ReactQueryClientProvider";
|
|
55
|
-
import {
|
|
56
|
-
|
|
57
|
-
ReactQueryClientProvider,
|
|
58
|
-
EscrowProvider,
|
|
59
|
-
} from "@/components/tw-blocks/providers/TrustlessWork";
|
|
67
|
+
import { TrustlessWorkProvider } from "@/components/tw-blocks/providers/TrustlessWork";
|
|
68
|
+
import { EscrowProvider } from "@/components/tw-blocks/providers/EscrowProvider";
|
|
60
69
|
import { WalletProvider } from "@/components/tw-blocks/wallet-kit/WalletProvider";
|
|
61
70
|
|
|
62
71
|
export default function RootLayout({
|
|
@@ -173,34 +182,48 @@ export function DeployButton({ address }: { address: string }) {
|
|
|
173
182
|
|
|
174
183
|
## Available Blocks
|
|
175
184
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
```shell
|
|
185
|
+
To discover all available blocks, run:
|
|
179
186
|
|
|
187
|
+
```bash
|
|
180
188
|
npx trustless-work list
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### Scaffold top‑level groups
|
|
181
192
|
|
|
182
|
-
|
|
193
|
+
```bash
|
|
183
194
|
npx trustless-work add providers
|
|
184
195
|
npx trustless-work add wallet-kit
|
|
185
196
|
npx trustless-work add handle-errors
|
|
186
197
|
npx trustless-work add helpers
|
|
187
198
|
npx trustless-work add tanstack
|
|
188
199
|
npx trustless-work add escrows
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
### Escrows by role
|
|
189
203
|
|
|
190
|
-
|
|
204
|
+
```bash
|
|
191
205
|
npx trustless-work add escrows/escrows-by-role
|
|
192
206
|
npx trustless-work add escrows/escrows-by-role/table
|
|
193
207
|
npx trustless-work add escrows/escrows-by-role/cards
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### Escrows by signer
|
|
194
211
|
|
|
195
|
-
|
|
212
|
+
```bash
|
|
196
213
|
npx trustless-work add escrows/escrows-by-signer
|
|
197
214
|
npx trustless-work add escrows/escrows-by-signer/table
|
|
198
215
|
npx trustless-work add escrows/escrows-by-signer/cards
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Escrow details (optional standalone)
|
|
199
219
|
|
|
200
|
-
|
|
220
|
+
```bash
|
|
201
221
|
npx trustless-work add escrows/details
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### Single‑release flows
|
|
202
225
|
|
|
203
|
-
|
|
226
|
+
```bash
|
|
204
227
|
npx trustless-work add escrows/single-release
|
|
205
228
|
npx trustless-work add escrows/single-release/initialize-escrow
|
|
206
229
|
npx trustless-work add escrows/single-release/approve-milestone
|
|
@@ -212,13 +235,13 @@ npx trustless-work add escrows/single-release/resolve-dispute
|
|
|
212
235
|
npx trustless-work add escrows/single-release/update-escrow
|
|
213
236
|
```
|
|
214
237
|
|
|
215
|
-
### Escrows
|
|
238
|
+
### Escrows UI summary
|
|
216
239
|
|
|
217
|
-
- Cards and tables to browse escrows (by role or by signer) with filters, pagination, and
|
|
240
|
+
- Cards and tables to browse escrows (by role or by signer) with filters, pagination, and sorting
|
|
218
241
|
- Detail dialog with actions gated by roles and escrow flags
|
|
219
|
-
- Dialogs/forms for single
|
|
242
|
+
- Dialogs/forms for the single‑release lifecycle (initialize, fund, approve, change status, release, dispute, resolve, update)
|
|
220
243
|
|
|
221
|
-
Using cards (by role)
|
|
244
|
+
**Using cards (by role):**
|
|
222
245
|
|
|
223
246
|
```tsx
|
|
224
247
|
import { EscrowDialogsProvider } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
|
|
@@ -233,14 +256,23 @@ export default function Screen() {
|
|
|
233
256
|
}
|
|
234
257
|
```
|
|
235
258
|
|
|
259
|
+
## Configuration Checklist
|
|
260
|
+
|
|
236
261
|
Make sure to:
|
|
237
262
|
|
|
238
|
-
1. Set `NEXT_PUBLIC_API_KEY
|
|
239
|
-
2. Configure your UI base imports
|
|
263
|
+
1. **Set `NEXT_PUBLIC_API_KEY`** and run the app against the correct environment (the provider defaults to `development`).
|
|
264
|
+
2. **Configure your UI base imports.** The CLI uses `.twblocks.json` `uiBase` to replace `__UI_BASE__`.
|
|
265
|
+
If your UI alias differs, pass `--ui-base`:
|
|
266
|
+
|
|
240
267
|
```bash
|
|
241
268
|
npx trustless-work add escrows/escrows-by-role/cards --ui-base "@/components/ui"
|
|
242
269
|
```
|
|
243
|
-
|
|
270
|
+
|
|
271
|
+
3. **Wrap your app with all providers** in this order:
|
|
272
|
+
|
|
273
|
+
```text
|
|
274
|
+
ReactQueryClientProvider → TrustlessWorkProvider → WalletProvider → EscrowProvider
|
|
275
|
+
```
|
|
244
276
|
|
|
245
277
|
## Best Practices
|
|
246
278
|
|
|
@@ -283,11 +315,11 @@ Make sure to:
|
|
|
283
315
|
|
|
284
316
|
## Contributing
|
|
285
317
|
|
|
286
|
-
We welcome contributions! Please
|
|
318
|
+
We welcome contributions! Please open an issue or pull request in the repository and make sure to follow any existing contributing guidelines.
|
|
287
319
|
|
|
288
320
|
## License
|
|
289
321
|
|
|
290
|
-
MIT License
|
|
322
|
+
MIT License – see the `LICENSE` file for details.
|
|
291
323
|
|
|
292
324
|
# Maintainers | [Telegram](https://t.me/+kmr8tGegxLU0NTA5)
|
|
293
325
|
|