@trustless-work/blocks 0.0.1

package/templates/escrows/single-release/fund-escrow/form/FundEscrow.tsx

@@ -0,0 +1,54 @@
+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 { useFundEscrow } from "./useFundEscrow";
+import { Loader2 } from "lucide-react";
+
+export default function FundEscrowForm() {
+  const { form, handleSubmit, isSubmitting } = useFundEscrow();
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit}>
+        <FormField
+          control={form.control}
+          name="amount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Amount</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="Enter amount" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="mt-4">
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="cursor-pointer"
+          >
+            {isSubmitting ? (
+              <div className="flex items-center">
+                <Loader2 className="h-5 w-5 animate-spin" />
+                <span className="ml-2">Funding...</span>
+              </div>
+            ) : (
+              "Fund"
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

package/templates/escrows/single-release/fund-escrow/shared/schema.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const fundEscrowSchema = z.object({
+  amount: z.coerce
+    .number({ invalid_type_error: "Amount must be a number" })
+    .refine((v) => !Number.isNaN(v), { message: "Amount is required" })
+    .refine((v) => v > 0, { message: "Amount must be greater than 0" }),
+});
+
+export type FundEscrowValues = z.infer<typeof fundEscrowSchema>;

package/templates/escrows/single-release/fund-escrow/shared/useFundEscrow.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { fundEscrowSchema, type FundEscrowValues } from "./schema";
+import { toast } from "sonner";
+import { FundEscrowPayload } from "@trustless-work/escrow";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstak/useEscrowsMutations";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+
+export function useFundEscrow() {
+  const { fundEscrow } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+
+  const form = useForm<FundEscrowValues>({
+    resolver: zodResolver(fundEscrowSchema),
+    defaultValues: {
+      amount: 0,
+    },
+    mode: "onChange",
+  });
+
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      const finalPayload: FundEscrowPayload = {
+        amount:
+          typeof payload.amount === "string"
+            ? Number(payload.amount)
+            : payload.amount,
+        contractId: selectedEscrow?.contractId || "",
+        signer: walletAddress || "",
+      };
+
+      await fundEscrow.mutateAsync({
+        payload: finalPayload,
+        type: "single-release",
+        address: walletAddress || "",
+      });
+
+      updateEscrow({
+        ...selectedEscrow,
+        balance: (selectedEscrow?.balance || 0) + finalPayload.amount,
+      });
+
+      toast.success("Escrow funded successfully");
+
+      // do something with the response ...
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+      form.reset();
+    }
+  });
+
+  return { form, handleSubmit, isSubmitting };
+}

package/templates/escrows/single-release/initialize-escrow/dialog/InitializeEscrow.tsx

@@ -0,0 +1,526 @@
+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";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "__UI_BASE__/dialog";
+
+export function InitializeEscrowDialog() {
+  const {
+    form,
+    isSubmitting,
+    milestones,
+    isAnyMilestoneEmpty,
+    handleSubmit,
+    handleAddMilestone,
+    handleRemoveMilestone,
+  } = useInitializeEscrow();
+
+  const handleAmountChange = (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("amount", rawValue);
+  };
+
+  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 (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button" className="cursor-pointer">
+          Initialize
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="!w-full sm:!max-w-4xl max-h-[95vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Initialize Escrow</DialogTitle>
+        </DialogHeader>
+        <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">
+                    Single Release Escrow
+                  </h2>
+                </div>
+                <p className="text-muted-foreground mt-1">
+                  A single payment will be released upon completion of all
+                  milestones
+                </p>
+              </Link>
+            </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-3 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="amount"
+                render={() => (
+                  <FormItem>
+                    <FormLabel className="flex items-center">
+                      Amount<span className="text-destructive ml-1">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <DollarSign
+                          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
+                          size={18}
+                        />
+                        <Input
+                          placeholder="Enter amount"
+                          className="pl-10"
+                          value={form.watch("amount")?.toString() || ""}
+                          onChange={handleAmountChange}
+                        />
+                      </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}>
+                  <div className="flex 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:flex-1"
+                      onChange={(e) => {
+                        const updatedMilestones = [...milestones];
+                        updatedMilestones[index].description = e.target.value;
+                        form.setValue("milestones", updatedMilestones);
+                      }}
+                    />
+
+                    <Button
+                      onClick={() => handleRemoveMilestone(index)}
+                      className="p-2 bg-transparent text-destructive rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-destructive focus:ring-0 active:ring-0 self-start sm:self-center cursor-pointer"
+                      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 cursor-pointer"
+                        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>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default InitializeEscrowDialog;