@trustless-work/blocks 0.0.1

package/templates/escrows/single-release/change-milestone-status/button/ChangeMilestoneStatus.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { Button } from "__UI_BASE__/button";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstak/useEscrowsMutations";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { ChangeMilestoneStatusPayload } from "@trustless-work/escrow/types";
+import { toast } from "sonner";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import { Loader2 } from "lucide-react";
+
+type ChangeMilestoneStatusButtonProps = {
+  status: string;
+  evidence?: string;
+  milestoneIndex: number | string;
+};
+
+export default function ChangeMilestoneStatusButton({
+  status,
+  evidence,
+  milestoneIndex,
+}: ChangeMilestoneStatusButtonProps) {
+  const { changeMilestoneStatus } = useEscrowsMutations();
+  const { selectedEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  async function handleClick() {
+    try {
+      if (!status || status.trim().length === 0) {
+        toast.error("Status is required");
+        return;
+      }
+
+      setIsSubmitting(true);
+
+      const payload: ChangeMilestoneStatusPayload = {
+        contractId: selectedEscrow?.contractId || "",
+        milestoneIndex: String(milestoneIndex),
+        newStatus: status,
+        newEvidence: evidence || undefined,
+        serviceProvider: walletAddress || "",
+      };
+
+      await changeMilestoneStatus.mutateAsync({
+        payload,
+        type: "single-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Milestone status updated successfully");
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      disabled={isSubmitting}
+      onClick={handleClick}
+      className="cursor-pointer w-full"
+    >
+      {isSubmitting ? (
+        <div className="flex items-center">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          <span className="ml-2">Updating...</span>
+        </div>
+      ) : (
+        "Update Status"
+      )}
+    </Button>
+  );
+}

package/templates/escrows/single-release/change-milestone-status/dialog/ChangeMilestoneStatus.tsx

@@ -0,0 +1,167 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Input } from "__UI_BASE__/input";
+import { Textarea } from "__UI_BASE__/textarea";
+import { Button } from "__UI_BASE__/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "__UI_BASE__/dialog";
+import { Loader2 } from "lucide-react";
+import { useChangeMilestoneStatus } from "./useChangeMilestoneStatus";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+
+export default function ChangeMilestoneStatusDialog({
+  showSelectMilestone = false,
+  milestoneIndex,
+}: {
+  showSelectMilestone?: boolean;
+  milestoneIndex?: number | string;
+}) {
+  const { form, handleSubmit, isSubmitting } = useChangeMilestoneStatus();
+  const { selectedEscrow } = useEscrowContext();
+
+  React.useEffect(() => {
+    if (
+      !showSelectMilestone &&
+      milestoneIndex !== undefined &&
+      milestoneIndex !== null
+    ) {
+      form.setValue("milestoneIndex", String(milestoneIndex));
+    }
+  }, [showSelectMilestone, milestoneIndex, form]);
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button" className="cursor-pointer w-full">
+          Update Status
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change Milestone Status</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col space-y-6 w-full"
+          >
+            <div
+              className={`grid grid-cols-1 ${
+                showSelectMilestone ? "lg:grid-cols-2" : "lg:grid-cols-1"
+              } gap-4`}
+            >
+              {showSelectMilestone && (
+                <FormField
+                  control={form.control}
+                  name="milestoneIndex"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="flex items-center">
+                        Milestone
+                        <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 milestone" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {(selectedEscrow?.milestones || []).map(
+                              (m, idx) => (
+                                <SelectItem
+                                  key={`ms-${idx}`}
+                                  value={String(idx)}
+                                >
+                                  {m?.description || `Milestone ${idx + 1}`}
+                                </SelectItem>
+                              )
+                            )}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex items-center">
+                      Status<span className="text-destructive ml-1">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input placeholder="Enter new status" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="evidence"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Evidence</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter evidence (optional)"
+                      {...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">Updating...</span>
+                  </div>
+                ) : (
+                  "Update"
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/escrows/single-release/change-milestone-status/form/ChangeMilestoneStatus.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Input } from "__UI_BASE__/input";
+import { Textarea } from "__UI_BASE__/textarea";
+import { Button } from "__UI_BASE__/button";
+import { useChangeMilestoneStatus } from "./useChangeMilestoneStatus";
+import { Loader2 } from "lucide-react";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+
+export default function ChangeMilestoneStatusForm() {
+  const { form, handleSubmit, isSubmitting } = useChangeMilestoneStatus();
+  const { selectedEscrow } = useEscrowContext();
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="flex flex-col space-y-6 w-full">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="milestoneIndex"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center">
+                  Milestone<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 milestone" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(selectedEscrow?.milestones || []).map((m, idx) => (
+                        <SelectItem key={`ms-${idx}`} value={String(idx)}>
+                          {m?.description || `Milestone ${idx + 1}`}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex items-center">
+                  Status<span className="text-destructive ml-1">*</span>
+                </FormLabel>
+                <FormControl>
+                  <Input placeholder="Enter new status" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <FormField
+          control={form.control}
+          name="evidence"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Evidence</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Enter evidence (optional)" {...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">Updating...</span>
+              </div>
+            ) : (
+              "Update"
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

package/templates/escrows/single-release/change-milestone-status/shared/schema.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+export const changeMilestoneStatusSchema = z.object({
+  milestoneIndex: z
+    .string({ required_error: "Milestone is required" })
+    .min(1, { message: "Milestone is required" }),
+  status: z
+    .string({ required_error: "Status is required" })
+    .min(1, { message: "Status is required" }),
+  evidence: z.string().optional(),
+});
+
+export type ChangeMilestoneStatusValues = z.infer<
+  typeof changeMilestoneStatusSchema
+>;

package/templates/escrows/single-release/change-milestone-status/shared/useChangeMilestoneStatus.ts

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  changeMilestoneStatusSchema,
+  type ChangeMilestoneStatusValues,
+} from "./schema";
+import { toast } from "sonner";
+import { ChangeMilestoneStatusPayload } 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 useChangeMilestoneStatus() {
+  const { changeMilestoneStatus } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+
+  const form = useForm<ChangeMilestoneStatusValues>({
+    resolver: zodResolver(changeMilestoneStatusSchema),
+    defaultValues: {
+      milestoneIndex: "0",
+      status: "",
+      evidence: "",
+    },
+    mode: "onChange",
+  });
+
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      const finalPayload: ChangeMilestoneStatusPayload = {
+        contractId: selectedEscrow?.contractId || "",
+        milestoneIndex: payload.milestoneIndex,
+        newStatus: payload.status,
+        newEvidence: payload.evidence || undefined,
+        serviceProvider: walletAddress || "",
+      };
+
+      await changeMilestoneStatus.mutateAsync({
+        payload: finalPayload,
+        type: "single-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Milestone status updated successfully");
+
+      updateEscrow({
+        ...selectedEscrow,
+        milestones: selectedEscrow?.milestones.map((milestone, index) => {
+          if (index === Number(payload.milestoneIndex)) {
+            return {
+              ...milestone,
+              status: payload.status,
+              evidence: payload.evidence || undefined,
+            };
+          }
+          return milestone;
+        }),
+      });
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+      form.reset();
+    }
+  });
+
+  return { form, handleSubmit, isSubmitting };
+}

package/templates/escrows/single-release/dispute-escrow/button/DisputeEscrow.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { Button } from "__UI_BASE__/button";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstak/useEscrowsMutations";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { SingleReleaseStartDisputePayload } from "@trustless-work/escrow/types";
+import { toast } from "sonner";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import { Loader2 } from "lucide-react";
+
+export default function DisputeEscrowButton() {
+  const { startDispute } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  async function handleClick() {
+    try {
+      setIsSubmitting(true);
+
+      const payload: SingleReleaseStartDisputePayload = {
+        contractId: selectedEscrow?.contractId || "",
+        signer: walletAddress || "",
+      };
+
+      await startDispute.mutateAsync({
+        payload,
+        type: "single-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Escrow disputed successfully");
+
+      updateEscrow({
+        ...selectedEscrow,
+        flags: {
+          ...selectedEscrow?.flags,
+          disputed: true,
+        },
+      });
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      disabled={isSubmitting || !selectedEscrow?.balance}
+      onClick={handleClick}
+      className="cursor-pointer w-full"
+    >
+      {isSubmitting ? (
+        <div className="flex items-center">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          <span className="ml-2">Disputing...</span>
+        </div>
+      ) : (
+        "Dispute Escrow"
+      )}
+    </Button>
+  );
+}

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

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { Button } from "__UI_BASE__/button";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstak/useEscrowsMutations";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { FundEscrowPayload } from "@trustless-work/escrow/types";
+import { toast } from "sonner";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+
+type FundEscrowButtonProps = {
+  amount: number;
+  className?: string;
+};
+
+export default function FundEscrowButton({
+  amount,
+  className,
+}: FundEscrowButtonProps) {
+  const { fundEscrow } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  async function handleClick() {
+    try {
+      if (!amount || Number.isNaN(amount)) {
+        toast.error("Amount is required");
+        return;
+      }
+
+      if (amount <= 0) {
+        toast.error("Amount must be greater than 0");
+        return;
+      }
+
+      setIsSubmitting(true);
+
+      const payload: FundEscrowPayload = {
+        amount: Number(amount),
+        contractId: selectedEscrow?.contractId || "",
+        signer: walletAddress || "",
+      };
+
+      await fundEscrow.mutateAsync({
+        payload,
+        type: "single-release",
+        address: walletAddress || "",
+      });
+
+      updateEscrow({
+        ...selectedEscrow,
+        amount: (selectedEscrow?.amount || 0) + payload.amount,
+      });
+      toast.success("Escrow funded successfully");
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      disabled={isSubmitting}
+      onClick={handleClick}
+      className={cn(className, "cursor-pointer w-full")}
+    >
+      {isSubmitting ? (
+        <div className="flex items-center">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          <span className="ml-2">Funding...</span>
+        </div>
+      ) : (
+        "Fund"
+      )}
+    </Button>
+  );
+}

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

@@ -0,0 +1,77 @@
+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 {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "__UI_BASE__/dialog";
+import { Loader2 } from "lucide-react";
+import { useFundEscrow } from "./useFundEscrow";
+
+export default function FundEscrowDialog() {
+  const { form, handleSubmit, isSubmitting } = useFundEscrow();
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button" className="cursor-pointer w-full">
+          Fund
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Fund Escrow</DialogTitle>
+        </DialogHeader>
+        <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>
+      </DialogContent>
+    </Dialog>
+  );
+}