@trustless-work/blocks 0.0.7 → 0.0.8

package/templates/escrows/multi-release/initialize-escrow/form/InitializeEscrow.tsx

@@ -0,0 +1,506 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Input } from "__UI_BASE__/input";
+import { Button } from "__UI_BASE__/button";
+import { Card } from "__UI_BASE__/card";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "__UI_BASE__/select";
+import { Textarea } from "__UI_BASE__/textarea";
+import { useInitializeEscrow } from "./useInitializeEscrow";
+import { Trash2, DollarSign, Percent, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
+
+export const InitializeEscrowForm = () => {
+  const {
+    form,
+    isSubmitting,
+    milestones,
+    isAnyMilestoneEmpty,
+    handleSubmit,
+    handleAddMilestone,
+    handleRemoveMilestone,
+    fillTemplateForm,
+  } = useInitializeEscrow();
+
+  const handleMilestoneAmountChange = (
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    let rawValue = e.target.value;
+    rawValue = rawValue.replace(/[^0-9.]/g, "");
+
+    if (rawValue.split(".").length > 2) {
+      rawValue = rawValue.slice(0, -1);
+    }
+
+    // Limit to 2 decimal places
+    if (rawValue.includes(".")) {
+      const parts = rawValue.split(".");
+      if (parts[1] && parts[1].length > 2) {
+        rawValue = parts[0] + "." + parts[1].slice(0, 2);
+      }
+    }
+
+    // Always keep as string to allow partial input like "0." or "0.5"
+    const updatedMilestones = [...milestones];
+    updatedMilestones[index] = {
+      ...updatedMilestones[index],
+      amount: rawValue,
+    };
+    form.setValue("milestones", updatedMilestones);
+  };
+
+  const handlePlatformFeeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let rawValue = e.target.value;
+    rawValue = rawValue.replace(/[^0-9.]/g, "");
+
+    if (rawValue.split(".").length > 2) {
+      rawValue = rawValue.slice(0, -1);
+    }
+
+    // Limit to 2 decimal places
+    if (rawValue.includes(".")) {
+      const parts = rawValue.split(".");
+      if (parts[1] && parts[1].length > 2) {
+        rawValue = parts[0] + "." + parts[1].slice(0, 2);
+      }
+    }
+
+    // Always keep as string to allow partial input like "0." or "0.5"
+    form.setValue("platformFee", rawValue);
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="flex flex-col space-y-6">
+        <Card className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 p-4">
+          <Link
+            className="flex-1"
+            href="https://docs.trustlesswork.com/trustless-work/technology-overview/escrow-types"
+            target="_blank"
+          >
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 rounded-full bg-primary" />
+              <h2 className="text-xl font-semibold">Multi Release Escrow</h2>
+            </div>
+            <p className="text-muted-foreground mt-1">
+              Fill out the form to initialize a multi release escrow
+            </p>
+          </Link>
+          {process.env.NODE_ENV !== "production" && (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={fillTemplateForm}
+              className="cursor-pointer"
+            >
+              Autofill
+            </Button>
+          )}
+        </Card>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center">
+                  Title<span className="text-destructive ml-1">*</span>
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Escrow title"
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="engagementId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center">
+                  Engagement<span className="text-destructive ml-1">*</span>
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Enter identifier"
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="trustline.address"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center">
+                  Trustline<span className="text-destructive ml-1">*</span>
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    value={field.value}
+                    onValueChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select trustline" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {trustlineOptions
+                        .filter((option) => option.value)
+                        .map((option, index) => (
+                          <SelectItem
+                            key={`${option.value}-${index}`}
+                            value={option.value}
+                          >
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="roles.approver"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center justify-between">
+                  <span className="flex items-center">
+                    Approver<span className="text-destructive ml-1">*</span>
+                  </span>
+                </FormLabel>
+
+                <FormControl>
+                  <Input
+                    placeholder="Enter approver address"
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="roles.serviceProvider"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center justify-between">
+                  <span className="flex items-center">
+                    Service Provider
+                    <span className="text-destructive ml-1">*</span>
+                  </span>
+                </FormLabel>
+
+                <FormControl>
+                  <Input
+                    placeholder="Enter service provider address"
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="roles.releaseSigner"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center justify-between">
+                  <span className="flex items-center">
+                    Release Signer
+                    <span className="text-destructive ml-1">*</span>
+                  </span>
+                </FormLabel>
+
+                <FormControl>
+                  <Input
+                    placeholder="Enter release signer address"
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="roles.disputeResolver"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center justify-between">
+                  <span className="flex items-center">
+                    Dispute Resolver
+                    <span className="text-destructive ml-1">*</span>
+                  </span>
+                </FormLabel>
+
+                <FormControl>
+                  <Input
+                    placeholder="Enter dispute resolver address"
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="roles.platformAddress"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center justify-between">
+                  <span className="flex items-center">
+                    Platform Address
+                    <span className="text-destructive ml-1">*</span>
+                  </span>
+                </FormLabel>
+
+                <FormControl>
+                  <Input
+                    placeholder="Enter platform address"
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="roles.receiver"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center justify-between">
+                  <span className="flex items-center">
+                    Receiver<span className="text-destructive ml-1">*</span>
+                  </span>
+                </FormLabel>
+
+                <FormControl>
+                  <Input
+                    placeholder="Enter receiver address"
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="platformFee"
+            render={() => (
+              <FormItem>
+                <FormLabel className="flex items-center">
+                  Platform Fee<span className="text-destructive ml-1">*</span>
+                </FormLabel>
+                <FormControl>
+                  <div className="relative">
+                    <Percent
+                      className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
+                      size={18}
+                    />
+                    <Input
+                      placeholder="Enter platform fee"
+                      className="pl-10"
+                      value={form.watch("platformFee")?.toString() || ""}
+                      onChange={handlePlatformFeeChange}
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="receiverMemo"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center">
+                  Receiver Memo (opcional)
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    type="text"
+                    placeholder="Enter the escrow receiver Memo"
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="flex items-center">
+                Description<span className="text-destructive ml-1">*</span>
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Escrow description"
+                  {...field}
+                  onChange={(e) => {
+                    field.onChange(e);
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="space-y-4">
+          <FormLabel className="flex items-center">
+            Milestones<span className="text-destructive ml-1">*</span>
+          </FormLabel>
+          {milestones.map((milestone, index) => (
+            <div key={index} className="space-y-4">
+              <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
+                <Input
+                  placeholder="Milestone Description"
+                  value={milestone.description}
+                  className="w-full sm:w-3/5"
+                  onChange={(e) => {
+                    const updatedMilestones = [...milestones];
+                    updatedMilestones[index].description = e.target.value;
+                    form.setValue("milestones", updatedMilestones);
+                  }}
+                />
+
+                <div className="relative w-full sm:w-2/5">
+                  <DollarSign
+                    className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
+                    size={18}
+                  />
+                  <Input
+                    className="pl-10"
+                    placeholder="Enter amount"
+                    value={milestone.amount?.toString() || ""}
+                    onChange={(e) => handleMilestoneAmountChange(index, e)}
+                  />
+                </div>
+
+                <Button
+                  onClick={() => handleRemoveMilestone(index)}
+                  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"
+                  disabled={milestones.length === 1}
+                >
+                  <Trash2 className="h-5 w-5" />
+                </Button>
+              </div>
+
+              {index === milestones.length - 1 && (
+                <div className="flex justify-end mt-4">
+                  <Button
+                    disabled={isAnyMilestoneEmpty}
+                    className="w-full md:w-1/4"
+                    variant="outline"
+                    onClick={handleAddMilestone}
+                    type="button"
+                  >
+                    Add Item
+                  </Button>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-start">
+          <Button
+            className="w-full md:w-1/4 cursor-pointer"
+            type="submit"
+            disabled={isAnyMilestoneEmpty || isSubmitting}
+          >
+            {isSubmitting ? (
+              <div className="flex items-center">
+                <Loader2 className="h-5 w-5 animate-spin" />
+                <span className="ml-2">Deploying...</span>
+              </div>
+            ) : (
+              "Deploy"
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

package/templates/escrows/multi-release/initialize-escrow/shared/schema.ts

@@ -0,0 +1,179 @@
+import { z } from "zod";
+import { isValidWallet } from "../../../../wallet-kit/validators";
+
+export const useInitializeEscrowSchema = () => {
+  const getBaseSchema = () => {
+    return z.object({
+      trustline: z.object({
+        address: z.string().min(1, {
+          message: "Trustline address is required.",
+        }),
+        decimals: z.number().default(10000000),
+      }),
+      roles: z.object({
+        approver: z
+          .string()
+          .min(1, {
+            message: "Approver is required.",
+          })
+          .refine((value) => isValidWallet(value), {
+            message: "Approver must be a valid wallet.",
+          }),
+        serviceProvider: z
+          .string()
+          .min(1, {
+            message: "Service provider is required.",
+          })
+          .refine((value) => isValidWallet(value), {
+            message: "Service provider must be a valid wallet.",
+          }),
+        platformAddress: z
+          .string()
+          .min(1, {
+            message: "Platform address is required.",
+          })
+          .refine((value) => isValidWallet(value), {
+            message: "Platform address must be a valid wallet.",
+          }),
+        releaseSigner: z
+          .string()
+          .min(1, {
+            message: "Release signer is required.",
+          })
+          .refine((value) => isValidWallet(value), {
+            message: "Release signer must be a valid wallet.",
+          }),
+        disputeResolver: z
+          .string()
+          .min(1, {
+            message: "Dispute resolver is required.",
+          })
+          .refine((value) => isValidWallet(value), {
+            message: "Dispute resolver must be a valid wallet.",
+          }),
+        receiver: z
+          .string()
+          .min(1, {
+            message: "Receiver address is required.",
+          })
+          .refine((value) => isValidWallet(value), {
+            message: "Receiver address must be a valid wallet.",
+          }),
+      }),
+      engagementId: z.string().min(1, {
+        message: "Engagement is required.",
+      }),
+      title: z.string().min(1, {
+        message: "Title is required.",
+      }),
+      description: z.string().min(10, {
+        message: "Description must be at least 10 characters long.",
+      }),
+      platformFee: z
+        .union([z.string(), z.number()])
+        .refine(
+          (val) => {
+            if (typeof val === "string") {
+              if (val === "" || val === "." || val.endsWith(".")) {
+                return true;
+              }
+              const numVal = Number(val);
+              return !isNaN(numVal) && numVal > 0;
+            }
+            return val > 0;
+          },
+          {
+            message: "Platform fee must be greater than 0.",
+          }
+        )
+        .refine(
+          (val) => {
+            if (typeof val === "string") {
+              if (val === "" || val === "." || val.endsWith(".")) {
+                return true;
+              }
+              const numVal = Number(val);
+              if (isNaN(numVal)) return false;
+              const decimalPlaces = (numVal.toString().split(".")[1] || "")
+                .length;
+              return decimalPlaces <= 2;
+            }
+            const decimalPlaces = (val.toString().split(".")[1] || "").length;
+            return decimalPlaces <= 2;
+          },
+          {
+            message: "Platform fee can have a maximum of 2 decimal places.",
+          }
+        ),
+      receiverMemo: z
+        .string()
+        .optional()
+        .refine((val) => !val || val.length >= 1, {
+          message: "Receiver Memo must be at least 1.",
+        })
+        .refine((val) => !val || /^[1-9][0-9]*$/.test(val), {
+          message:
+            "Receiver Memo must be a whole number greater than 0 (no decimals).",
+        }),
+    });
+  };
+
+  const getMultiReleaseFormSchema = () => {
+    const baseSchema = getBaseSchema();
+
+    return baseSchema.extend({
+      milestones: z
+        .array(
+          z.object({
+            description: z.string().min(1, {
+              message: "Milestone description is required.",
+            }),
+            amount: z
+              .union([z.string(), z.number()])
+              .refine(
+                (val) => {
+                  if (typeof val === "string") {
+                    if (val === "" || val === "." || val.endsWith(".")) {
+                      return true;
+                    }
+                    const numVal = Number(val);
+                    return !isNaN(numVal) && numVal > 0;
+                  }
+                  return val > 0;
+                },
+                {
+                  message: "Milestone amount must be greater than 0.",
+                }
+              )
+              .refine(
+                (val) => {
+                  if (typeof val === "string") {
+                    if (val === "" || val === "." || val.endsWith(".")) {
+                      return true;
+                    }
+                    const numVal = Number(val);
+                    if (isNaN(numVal)) return false;
+                    const decimalPlaces = (
+                      numVal.toString().split(".")[1] || ""
+                    ).length;
+                    return decimalPlaces <= 2;
+                  }
+                  const decimalPlaces = (val.toString().split(".")[1] || "")
+                    .length;
+                  return decimalPlaces <= 2;
+                },
+                {
+                  message:
+                    "Milestone amount can have a maximum of 2 decimal places.",
+                }
+              ),
+          })
+        )
+        .min(1, { message: "At least one milestone is required." }),
+    });
+  };
+
+  return {
+    getMultiReleaseFormSchema,
+  };
+};