@trustless-work/blocks 1.0.6 → 1.0.7

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.
Files changed (33) hide show
  1. package/bin/index.js +1930 -1921
  2. package/package.json +1 -1
  3. package/templates/deps.json +1 -1
  4. package/templates/escrows/details/Actions.tsx +1 -2
  5. package/templates/escrows/details/Entities.tsx +23 -2
  6. package/templates/escrows/details/GeneralInformation.tsx +1 -13
  7. package/templates/escrows/details/MilestoneCard.tsx +1 -1
  8. package/templates/escrows/details/MilestoneDetailDialog.tsx +38 -19
  9. package/templates/escrows/details/SuccessReleaseDialog.tsx +84 -28
  10. package/templates/escrows/details/useDetailsEscrow.ts +15 -2
  11. package/templates/escrows/multi-release/initialize-escrow/dialog/InitializeEscrow.tsx +76 -101
  12. package/templates/escrows/multi-release/initialize-escrow/form/InitializeEscrow.tsx +78 -102
  13. package/templates/escrows/multi-release/initialize-escrow/shared/schema.ts +8 -18
  14. package/templates/escrows/multi-release/initialize-escrow/shared/useInitializeEscrow.ts +21 -12
  15. package/templates/escrows/multi-release/release-milestone/button/ReleaseMilestone.tsx +5 -1
  16. package/templates/escrows/multi-release/update-escrow/dialog/UpdateEscrow.tsx +112 -101
  17. package/templates/escrows/multi-release/update-escrow/form/UpdateEscrow.tsx +103 -101
  18. package/templates/escrows/multi-release/update-escrow/shared/schema.ts +8 -16
  19. package/templates/escrows/multi-release/update-escrow/shared/useUpdateEscrow.ts +33 -14
  20. package/templates/escrows/multi-release/withdraw-remaining-funds/button/WithdrawRemainingFunds.tsx +0 -1
  21. package/templates/escrows/multi-release/withdraw-remaining-funds/shared/useWithdrawRemainingFunds.ts +0 -1
  22. package/templates/escrows/single-release/initialize-escrow/dialog/InitializeEscrow.tsx +2 -25
  23. package/templates/escrows/single-release/initialize-escrow/form/InitializeEscrow.tsx +3 -26
  24. package/templates/escrows/single-release/initialize-escrow/shared/schema.ts +0 -10
  25. package/templates/escrows/single-release/initialize-escrow/shared/useInitializeEscrow.ts +0 -4
  26. package/templates/escrows/single-release/release-escrow/button/ReleaseEscrow.tsx +5 -1
  27. package/templates/escrows/single-release/update-escrow/dialog/UpdateEscrow.tsx +41 -27
  28. package/templates/escrows/single-release/update-escrow/form/UpdateEscrow.tsx +38 -3
  29. package/templates/escrows/single-release/update-escrow/shared/useUpdateEscrow.ts +28 -14
  30. package/templates/providers/EscrowAmountProvider.tsx +8 -0
  31. package/templates/tanstack/useEscrowsMutations.ts +1 -6
  32. package/templates/wallet-kit/WalletButtons.tsx +2 -2
  33. package/templates/wallet-kit/WalletProvider.tsx +0 -1
package/templates/escrows/multi-release/update-escrow/dialog/UpdateEscrow.tsx CHANGED
@@ -19,7 +19,7 @@ import {
19
19
  } from "__UI_BASE__/select";
20
20
  import { Textarea } from "__UI_BASE__/textarea";
21
21
  import { useUpdateEscrow } from "./useUpdateEscrow";
22
- import { Trash2, DollarSign, Percent, Loader2 } from "lucide-react";
22
+ import { Trash2, DollarSign, Percent, Loader2, Lock } from "lucide-react";
23
23
  import Link from "next/link";
24
24
  import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
25
25
  import {
@@ -41,6 +41,8 @@ export const UpdateEscrowDialog = () => {
41
41
  handleRemoveMilestone,
42
42
  handlePlatformFeeChange,
43
43
  handleMilestoneAmountChange,
44
+ isEscrowLocked,
45
+ initialMilestonesCount,
44
46
  } = useUpdateEscrow();
45
47
 
46
48
  return (
@@ -71,9 +73,25 @@ export const UpdateEscrowDialog = () => {
71
73
  <p className="text-muted-foreground mt-1">
72
74
  Update escrow details and milestones
73
75
  </p>
76
+
77
+ {isEscrowLocked && (
78
+ <div className="flex flex-col gap-2 text-sm bg-yellow-50 dark:bg-yellow-900/20 p-2 rounded-md border border-yellow-200 dark:border-yellow-800 mt-3 px-4">
79
+ <div className="flex items-center gap-2">
80
+ <Lock className="w-4 h-4 text-yellow-600 dark:text-yellow-500 font-medium" />
81
+ <span className="text-yellow-600 dark:text-yellow-500 font-medium">
82
+ Escrow is locked
83
+ </span>
84
+ </div>
85
+
86
+ <p className="text-muted-foreground font-medium">
87
+ When the escrow has balance, it cannot be updated in all
88
+ fields, just adding new milestones is allowed.
89
+ </p>
90
+ </div>
91
+ )}
74
92
  </Link>
75
93
  </Card>
76
- <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
94
+ <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
77
95
  <FormField
78
96
  control={form.control}
79
97
  name="title"
@@ -86,6 +104,7 @@ export const UpdateEscrowDialog = () => {
86
104
  <Input
87
105
  placeholder="Escrow title"
88
106
  {...field}
107
+ disabled={isEscrowLocked}
89
108
  onChange={(e) => {
90
109
  field.onChange(e);
91
110
  }}
@@ -108,6 +127,7 @@ export const UpdateEscrowDialog = () => {
108
127
  <Input
109
128
  placeholder="Enter identifier"
110
129
  {...field}
130
+ disabled={isEscrowLocked}
111
131
  onChange={(e) => {
112
132
  field.onChange(e);
113
133
  }}
@@ -129,6 +149,7 @@ export const UpdateEscrowDialog = () => {
129
149
  <FormControl>
130
150
  <Select
131
151
  value={field.value}
152
+ disabled={isEscrowLocked}
132
153
  onValueChange={(e) => {
133
154
  field.onChange(e);
134
155
  }}
@@ -154,6 +175,35 @@ export const UpdateEscrowDialog = () => {
154
175
  </FormItem>
155
176
  )}
156
177
  />
178
+
179
+ <FormField
180
+ control={form.control}
181
+ name="platformFee"
182
+ render={() => (
183
+ <FormItem>
184
+ <FormLabel className="flex items-center">
185
+ Platform Fee
186
+ <span className="text-destructive ml-1">*</span>
187
+ </FormLabel>
188
+ <FormControl>
189
+ <div className="relative">
190
+ <Percent
191
+ className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
192
+ size={18}
193
+ />
194
+ <Input
195
+ placeholder="Enter platform fee"
196
+ className="pl-10"
197
+ value={form.watch("platformFee")?.toString() || ""}
198
+ onChange={handlePlatformFeeChange}
199
+ disabled={isEscrowLocked}
200
+ />
201
+ </div>
202
+ </FormControl>
203
+ <FormMessage />
204
+ </FormItem>
205
+ )}
206
+ />
157
207
  </div>
158
208
 
159
209
  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
@@ -172,6 +222,7 @@ export const UpdateEscrowDialog = () => {
172
222
  <Input
173
223
  placeholder="Enter approver address"
174
224
  {...field}
225
+ disabled={isEscrowLocked}
175
226
  onChange={(e) => {
176
227
  field.onChange(e);
177
228
  }}
@@ -198,6 +249,7 @@ export const UpdateEscrowDialog = () => {
198
249
  <Input
199
250
  placeholder="Enter service provider address"
200
251
  {...field}
252
+ disabled={isEscrowLocked}
201
253
  onChange={(e) => {
202
254
  field.onChange(e);
203
255
  }}
@@ -226,6 +278,7 @@ export const UpdateEscrowDialog = () => {
226
278
  <Input
227
279
  placeholder="Enter release signer address"
228
280
  {...field}
281
+ disabled={isEscrowLocked}
229
282
  onChange={(e) => {
230
283
  field.onChange(e);
231
284
  }}
@@ -252,6 +305,7 @@ export const UpdateEscrowDialog = () => {
252
305
  <Input
253
306
  placeholder="Enter dispute resolver address"
254
307
  {...field}
308
+ disabled={isEscrowLocked}
255
309
  onChange={(e) => {
256
310
  field.onChange(e);
257
311
  }}
@@ -263,7 +317,7 @@ export const UpdateEscrowDialog = () => {
263
317
  />
264
318
  </div>
265
319
 
266
- <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
320
+ <div className="grid grid-cols-1 gap-4">
267
321
  <FormField
268
322
  control={form.control}
269
323
  name="roles.platformAddress"
@@ -271,7 +325,7 @@ export const UpdateEscrowDialog = () => {
271
325
  <FormItem>
272
326
  <FormLabel className="flex items-center justify-between">
273
327
  <span className="flex items-center">
274
- Platform Address
328
+ Platform
275
329
  <span className="text-destructive ml-1">*</span>
276
330
  </span>
277
331
  </FormLabel>
@@ -280,83 +334,7 @@ export const UpdateEscrowDialog = () => {
280
334
  <Input
281
335
  placeholder="Enter platform address"
282
336
  {...field}
283
- onChange={(e) => {
284
- field.onChange(e);
285
- }}
286
- />
287
- </FormControl>
288
- <FormMessage />
289
- </FormItem>
290
- )}
291
- />
292
- <FormField
293
- control={form.control}
294
- name="roles.receiver"
295
- render={({ field }) => (
296
- <FormItem>
297
- <FormLabel className="flex items-center justify-between">
298
- <span className="flex items-center">
299
- Receiver<span className="text-destructive ml-1">*</span>
300
- </span>
301
- </FormLabel>
302
-
303
- <FormControl>
304
- <Input
305
- placeholder="Enter receiver address"
306
- {...field}
307
- onChange={(e) => {
308
- field.onChange(e);
309
- }}
310
- />
311
- </FormControl>
312
- <FormMessage />
313
- </FormItem>
314
- )}
315
- />
316
- </div>
317
-
318
- <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
319
- <FormField
320
- control={form.control}
321
- name="platformFee"
322
- render={() => (
323
- <FormItem>
324
- <FormLabel className="flex items-center">
325
- Platform Fee
326
- <span className="text-destructive ml-1">*</span>
327
- </FormLabel>
328
- <FormControl>
329
- <div className="relative">
330
- <Percent
331
- className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
332
- size={18}
333
- />
334
- <Input
335
- placeholder="Enter platform fee"
336
- className="pl-10"
337
- value={form.watch("platformFee")?.toString() || ""}
338
- onChange={handlePlatformFeeChange}
339
- />
340
- </div>
341
- </FormControl>
342
- <FormMessage />
343
- </FormItem>
344
- )}
345
- />
346
-
347
- <FormField
348
- control={form.control}
349
- name="receiverMemo"
350
- render={({ field }) => (
351
- <FormItem>
352
- <FormLabel className="flex items-center">
353
- Receiver Memo (opcional)
354
- </FormLabel>
355
- <FormControl>
356
- <Input
357
- type="text"
358
- placeholder="Enter the escrow receiver Memo"
359
- {...field}
337
+ disabled={isEscrowLocked}
360
338
  onChange={(e) => {
361
339
  field.onChange(e);
362
340
  }}
@@ -380,6 +358,7 @@ export const UpdateEscrowDialog = () => {
380
358
  <Textarea
381
359
  placeholder="Escrow description"
382
360
  {...field}
361
+ disabled={isEscrowLocked}
383
362
  onChange={(e) => {
384
363
  field.onChange(e);
385
364
  }}
@@ -396,19 +375,42 @@ export const UpdateEscrowDialog = () => {
396
375
  </FormLabel>
397
376
  {milestones.map((milestone, index) => (
398
377
  <div key={index} className="space-y-4">
399
- <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
400
- <Input
401
- placeholder="Milestone Description"
402
- value={milestone.description}
403
- className="w-full sm:w-3/5"
404
- onChange={(e) => {
405
- const updatedMilestones = [...milestones];
406
- updatedMilestones[index].description = e.target.value;
407
- form.setValue("milestones", updatedMilestones);
408
- }}
409
- />
378
+ <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
379
+ <div className="md:col-span-4">
380
+ <Input
381
+ placeholder="Enter receiver address"
382
+ value={
383
+ (milestone as { receiver?: string }).receiver || ""
384
+ }
385
+ disabled={
386
+ isEscrowLocked && index < initialMilestonesCount
387
+ }
388
+ onChange={(e) => {
389
+ const updatedMilestones = [...milestones];
390
+ (
391
+ updatedMilestones[index] as { receiver?: string }
392
+ ).receiver = e.target.value;
393
+ form.setValue("milestones", updatedMilestones);
394
+ }}
395
+ />
396
+ </div>
410
397
 
411
- <div className="relative w-full sm:w-2/5">
398
+ <div className="md:col-span-4">
399
+ <Input
400
+ placeholder="Milestone description"
401
+ value={milestone.description}
402
+ disabled={
403
+ isEscrowLocked && index < initialMilestonesCount
404
+ }
405
+ onChange={(e) => {
406
+ const updatedMilestones = [...milestones];
407
+ updatedMilestones[index].description = e.target.value;
408
+ form.setValue("milestones", updatedMilestones);
409
+ }}
410
+ />
411
+ </div>
412
+
413
+ <div className="md:col-span-3 relative">
412
414
  <DollarSign
413
415
  className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
414
416
  size={18}
@@ -417,24 +419,33 @@ export const UpdateEscrowDialog = () => {
417
419
  className="pl-10"
418
420
  placeholder="Enter amount"
419
421
  value={milestone.amount?.toString() || ""}
422
+ disabled={
423
+ isEscrowLocked && index < initialMilestonesCount
424
+ }
420
425
  onChange={(e) => handleMilestoneAmountChange(index, e)}
421
426
  />
422
427
  </div>
423
428
 
424
- <Button
425
- onClick={() => handleRemoveMilestone(index)}
426
- className="p-2 bg-transparent text-red-500 rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-red-500 focus:ring-0 active:ring-0 self-start sm:self-center"
427
- disabled={milestones.length === 1}
428
- >
429
- <Trash2 className="h-5 w-5" />
430
- </Button>
429
+ <div className="md:col-span-1 flex justify-end">
430
+ <Button
431
+ onClick={() => handleRemoveMilestone(index)}
432
+ className="p-2 bg-transparent text-red-500 rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-red-500 focus:ring-0 active:ring-0 cursor-pointer"
433
+ disabled={
434
+ (isEscrowLocked && index < initialMilestonesCount) ||
435
+ milestones.length === 1
436
+ }
437
+ type="button"
438
+ >
439
+ <Trash2 className="h-5 w-5" />
440
+ </Button>
441
+ </div>
431
442
  </div>
432
443
 
433
444
  {index === milestones.length - 1 && (
434
445
  <div className="flex justify-end mt-4">
435
446
  <Button
436
447
  disabled={isAnyMilestoneEmpty}
437
- className="w-full md:w-1/4"
448
+ className="w-full md:w-1/4 cursor-pointer"
438
449
  variant="outline"
439
450
  onClick={handleAddMilestone}
440
451
  type="button"
package/templates/escrows/multi-release/update-escrow/form/UpdateEscrow.tsx CHANGED
@@ -19,7 +19,7 @@ import {
19
19
  } from "__UI_BASE__/select";
20
20
  import { Textarea } from "__UI_BASE__/textarea";
21
21
  import { useUpdateEscrow } from "./useUpdateEscrow";
22
- import { Trash2, DollarSign, Percent, Loader2 } from "lucide-react";
22
+ import { Trash2, DollarSign, Percent, Loader2, Lock } from "lucide-react";
23
23
  import Link from "next/link";
24
24
  import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
25
25
 
@@ -34,6 +34,8 @@ export const UpdateEscrowForm = () => {
34
34
  handleRemoveMilestone,
35
35
  handleMilestoneAmountChange,
36
36
  handlePlatformFeeChange,
37
+ isEscrowLocked,
38
+ initialMilestonesCount,
37
39
  } = useUpdateEscrow();
38
40
 
39
41
  return (
@@ -52,9 +54,24 @@ export const UpdateEscrowForm = () => {
52
54
  <p className="text-muted-foreground mt-1">
53
55
  Update escrow details and milestones
54
56
  </p>
57
+ {isEscrowLocked && (
58
+ <div className="flex flex-col gap-2 text-sm bg-yellow-50 dark:bg-yellow-900/20 p-2 rounded-md border border-yellow-200 dark:border-yellow-800 mt-3 px-4">
59
+ <div className="flex items-center gap-2">
60
+ <Lock className="w-4 h-4 text-yellow-600 dark:text-yellow-500 font-medium" />
61
+ <span className="text-yellow-600 dark:text-yellow-500 font-medium">
62
+ Escrow is locked
63
+ </span>
64
+ </div>
65
+
66
+ <p className="text-muted-foreground font-medium">
67
+ When the escrow has balance, it cannot be updated in all
68
+ fields, just adding new milestones is allowed.
69
+ </p>
70
+ </div>
71
+ )}
55
72
  </Link>
56
73
  </Card>
57
- <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
74
+ <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
58
75
  <FormField
59
76
  control={form.control}
60
77
  name="title"
@@ -67,6 +84,7 @@ export const UpdateEscrowForm = () => {
67
84
  <Input
68
85
  placeholder="Escrow title"
69
86
  {...field}
87
+ disabled={isEscrowLocked}
70
88
  onChange={(e) => {
71
89
  field.onChange(e);
72
90
  }}
@@ -89,6 +107,7 @@ export const UpdateEscrowForm = () => {
89
107
  <Input
90
108
  placeholder="Enter identifier"
91
109
  {...field}
110
+ disabled={isEscrowLocked}
92
111
  onChange={(e) => {
93
112
  field.onChange(e);
94
113
  }}
@@ -110,6 +129,7 @@ export const UpdateEscrowForm = () => {
110
129
  <FormControl>
111
130
  <Select
112
131
  value={field.value}
132
+ disabled={isEscrowLocked}
113
133
  onValueChange={(e) => {
114
134
  field.onChange(e);
115
135
  }}
@@ -135,6 +155,34 @@ export const UpdateEscrowForm = () => {
135
155
  </FormItem>
136
156
  )}
137
157
  />
158
+
159
+ <FormField
160
+ control={form.control}
161
+ name="platformFee"
162
+ render={() => (
163
+ <FormItem>
164
+ <FormLabel className="flex items-center">
165
+ Platform Fee<span className="text-destructive ml-1">*</span>
166
+ </FormLabel>
167
+ <FormControl>
168
+ <div className="relative">
169
+ <Percent
170
+ className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
171
+ size={18}
172
+ />
173
+ <Input
174
+ placeholder="Enter platform fee"
175
+ className="pl-10"
176
+ value={form.watch("platformFee")?.toString() || ""}
177
+ onChange={handlePlatformFeeChange}
178
+ disabled={isEscrowLocked}
179
+ />
180
+ </div>
181
+ </FormControl>
182
+ <FormMessage />
183
+ </FormItem>
184
+ )}
185
+ />
138
186
  </div>
139
187
 
140
188
  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
@@ -153,6 +201,7 @@ export const UpdateEscrowForm = () => {
153
201
  <Input
154
202
  placeholder="Enter approver address"
155
203
  {...field}
204
+ disabled={isEscrowLocked}
156
205
  onChange={(e) => {
157
206
  field.onChange(e);
158
207
  }}
@@ -179,6 +228,7 @@ export const UpdateEscrowForm = () => {
179
228
  <Input
180
229
  placeholder="Enter service provider address"
181
230
  {...field}
231
+ disabled={isEscrowLocked}
182
232
  onChange={(e) => {
183
233
  field.onChange(e);
184
234
  }}
@@ -190,7 +240,7 @@ export const UpdateEscrowForm = () => {
190
240
  />
191
241
  </div>
192
242
 
193
- <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
243
+ <div className="grid grid-cols-1 gap-4">
194
244
  <FormField
195
245
  control={form.control}
196
246
  name="roles.releaseSigner"
@@ -207,6 +257,7 @@ export const UpdateEscrowForm = () => {
207
257
  <Input
208
258
  placeholder="Enter release signer address"
209
259
  {...field}
260
+ disabled={isEscrowLocked}
210
261
  onChange={(e) => {
211
262
  field.onChange(e);
212
263
  }}
@@ -233,6 +284,7 @@ export const UpdateEscrowForm = () => {
233
284
  <Input
234
285
  placeholder="Enter dispute resolver address"
235
286
  {...field}
287
+ disabled={isEscrowLocked}
236
288
  onChange={(e) => {
237
289
  field.onChange(e);
238
290
  }}
@@ -244,7 +296,7 @@ export const UpdateEscrowForm = () => {
244
296
  />
245
297
  </div>
246
298
 
247
- <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
299
+ <div className="grid grid-cols-1 gap-4">
248
300
  <FormField
249
301
  control={form.control}
250
302
  name="roles.platformAddress"
@@ -252,7 +304,7 @@ export const UpdateEscrowForm = () => {
252
304
  <FormItem>
253
305
  <FormLabel className="flex items-center justify-between">
254
306
  <span className="flex items-center">
255
- Platform Address
307
+ Platform
256
308
  <span className="text-destructive ml-1">*</span>
257
309
  </span>
258
310
  </FormLabel>
@@ -261,82 +313,7 @@ export const UpdateEscrowForm = () => {
261
313
  <Input
262
314
  placeholder="Enter platform address"
263
315
  {...field}
264
- onChange={(e) => {
265
- field.onChange(e);
266
- }}
267
- />
268
- </FormControl>
269
- <FormMessage />
270
- </FormItem>
271
- )}
272
- />
273
- <FormField
274
- control={form.control}
275
- name="roles.receiver"
276
- render={({ field }) => (
277
- <FormItem>
278
- <FormLabel className="flex items-center justify-between">
279
- <span className="flex items-center">
280
- Receiver<span className="text-destructive ml-1">*</span>
281
- </span>
282
- </FormLabel>
283
-
284
- <FormControl>
285
- <Input
286
- placeholder="Enter receiver address"
287
- {...field}
288
- onChange={(e) => {
289
- field.onChange(e);
290
- }}
291
- />
292
- </FormControl>
293
- <FormMessage />
294
- </FormItem>
295
- )}
296
- />
297
- </div>
298
-
299
- <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
300
- <FormField
301
- control={form.control}
302
- name="platformFee"
303
- render={() => (
304
- <FormItem>
305
- <FormLabel className="flex items-center">
306
- Platform Fee<span className="text-destructive ml-1">*</span>
307
- </FormLabel>
308
- <FormControl>
309
- <div className="relative">
310
- <Percent
311
- className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
312
- size={18}
313
- />
314
- <Input
315
- placeholder="Enter platform fee"
316
- className="pl-10"
317
- value={form.watch("platformFee")?.toString() || ""}
318
- onChange={handlePlatformFeeChange}
319
- />
320
- </div>
321
- </FormControl>
322
- <FormMessage />
323
- </FormItem>
324
- )}
325
- />
326
-
327
- <FormField
328
- control={form.control}
329
- name="receiverMemo"
330
- render={({ field }) => (
331
- <FormItem>
332
- <FormLabel className="flex items-center">
333
- Receiver Memo (opcional)
334
- </FormLabel>
335
- <FormControl>
336
- <Input
337
- type="text"
338
- placeholder="Enter the escrow receiver Memo"
339
- {...field}
316
+ disabled={isEscrowLocked}
340
317
  onChange={(e) => {
341
318
  field.onChange(e);
342
319
  }}
@@ -363,6 +340,7 @@ export const UpdateEscrowForm = () => {
363
340
  onChange={(e) => {
364
341
  field.onChange(e);
365
342
  }}
343
+ disabled={isEscrowLocked}
366
344
  />
367
345
  </FormControl>
368
346
  <FormMessage />
@@ -376,19 +354,36 @@ export const UpdateEscrowForm = () => {
376
354
  </FormLabel>
377
355
  {milestones.map((milestone, index) => (
378
356
  <div key={index} className="space-y-4">
379
- <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
380
- <Input
381
- placeholder="Milestone Description"
382
- value={milestone.description}
383
- className="w-full sm:w-3/5"
384
- onChange={(e) => {
385
- const updatedMilestones = [...milestones];
386
- updatedMilestones[index].description = e.target.value;
387
- form.setValue("milestones", updatedMilestones);
388
- }}
389
- />
357
+ <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
358
+ <div className="md:col-span-4">
359
+ <Input
360
+ placeholder="Enter receiver address"
361
+ value={(milestone as { receiver?: string }).receiver || ""}
362
+ disabled={isEscrowLocked && index < initialMilestonesCount}
363
+ onChange={(e) => {
364
+ const updatedMilestones = [...milestones];
365
+ (
366
+ updatedMilestones[index] as { receiver?: string }
367
+ ).receiver = e.target.value;
368
+ form.setValue("milestones", updatedMilestones);
369
+ }}
370
+ />
371
+ </div>
390
372
 
391
- <div className="relative w-full sm:w-2/5">
373
+ <div className="md:col-span-4">
374
+ <Input
375
+ placeholder="Milestone description"
376
+ value={milestone.description}
377
+ disabled={isEscrowLocked && index < initialMilestonesCount}
378
+ onChange={(e) => {
379
+ const updatedMilestones = [...milestones];
380
+ updatedMilestones[index].description = e.target.value;
381
+ form.setValue("milestones", updatedMilestones);
382
+ }}
383
+ />
384
+ </div>
385
+
386
+ <div className="md:col-span-3 relative">
392
387
  <DollarSign
393
388
  className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
394
389
  size={18}
@@ -397,24 +392,31 @@ export const UpdateEscrowForm = () => {
397
392
  className="pl-10"
398
393
  placeholder="Enter amount"
399
394
  value={milestone.amount?.toString() || ""}
395
+ disabled={isEscrowLocked && index < initialMilestonesCount}
400
396
  onChange={(e) => handleMilestoneAmountChange(index, e)}
401
397
  />
402
398
  </div>
403
399
 
404
- <Button
405
- onClick={() => handleRemoveMilestone(index)}
406
- className="p-2 bg-transparent text-red-500 rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-red-500 focus:ring-0 active:ring-0 self-start sm:self-center"
407
- disabled={milestones.length === 1}
408
- >
409
- <Trash2 className="h-5 w-5" />
410
- </Button>
400
+ <div className="md:col-span-1 flex justify-end">
401
+ <Button
402
+ onClick={() => handleRemoveMilestone(index)}
403
+ className="p-2 bg-transparent text-red-500 rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-red-500 focus:ring-0 active:ring-0 cursor-pointer"
404
+ disabled={
405
+ (isEscrowLocked && index < initialMilestonesCount) ||
406
+ milestones.length === 1
407
+ }
408
+ type="button"
409
+ >
410
+ <Trash2 className="h-5 w-5" />
411
+ </Button>
412
+ </div>
411
413
  </div>
412
414
 
413
415
  {index === milestones.length - 1 && (
414
416
  <div className="flex justify-end mt-4">
415
417
  <Button
416
418
  disabled={isAnyMilestoneEmpty}
417
- className="w-full md:w-1/4"
419
+ className="w-full md:w-1/4 cursor-pointer"
418
420
  variant="outline"
419
421
  onClick={handleAddMilestone}
420
422
  type="button"