@trustless-work/blocks 0.0.1

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

@@ -0,0 +1,232 @@
+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 getSingleReleaseFormSchema = () => {
+    const baseSchema = getBaseSchema();
+
+    return baseSchema.extend({
+      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: "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: "Amount can have a maximum of 2 decimal places.",
+          }
+        ),
+      milestones: z
+        .array(
+          z.object({
+            description: z.string().min(1, {
+              message: "Milestone description is required.",
+            }),
+          })
+        )
+        .min(1, { message: "At least one milestone is required." }),
+    });
+  };
+
+  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 {
+    getSingleReleaseFormSchema,
+    getMultiReleaseFormSchema,
+  };
+};

package/templates/escrows/single-release/initialize-escrow/shared/useInitializeEscrow.ts

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useInitializeEscrowSchema } from "./schema";
+import { z } from "zod";
+import {
+  InitializeSingleReleaseEscrowPayload,
+  InitializeSingleReleaseEscrowResponse,
+} from "@trustless-work/escrow/types";
+import { toast } from "sonner";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstak/useEscrowsMutations";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+
+export function useInitializeEscrow() {
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const { getSingleReleaseFormSchema } = useInitializeEscrowSchema();
+  const formSchema = getSingleReleaseFormSchema();
+
+  const { walletAddress } = useWalletContext();
+  const { deployEscrow } = useEscrowsMutations();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      engagementId: "",
+      title: "",
+      description: "",
+      platformFee: undefined,
+      amount: undefined,
+      receiverMemo: "",
+      trustline: {
+        address: "",
+        decimals: 10000000,
+      },
+      roles: {
+        approver: "",
+        serviceProvider: "",
+        platformAddress: "",
+        receiver: "",
+        releaseSigner: "",
+        disputeResolver: "",
+      },
+      milestones: [{ description: "" }],
+    },
+    mode: "onChange",
+  });
+
+  const milestones = form.watch("milestones");
+  const isAnyMilestoneEmpty = milestones.some(
+    (milestone) => milestone.description === ""
+  );
+
+  const handleAddMilestone = () => {
+    const currentMilestones = form.getValues("milestones");
+    const updatedMilestones = [...currentMilestones, { description: "" }];
+    form.setValue("milestones", updatedMilestones);
+  };
+
+  const handleRemoveMilestone = (index: number) => {
+    const currentMilestones = form.getValues("milestones");
+    const updatedMilestones = currentMilestones.filter((_, i) => i !== index);
+    form.setValue("milestones", updatedMilestones);
+  };
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      const finalPayload: InitializeSingleReleaseEscrowPayload = {
+        ...payload,
+        amount:
+          typeof payload.amount === "string"
+            ? Number(payload.amount)
+            : payload.amount,
+        platformFee:
+          typeof payload.platformFee === "string"
+            ? Number(payload.platformFee)
+            : payload.platformFee,
+        receiverMemo: Number(payload.receiverMemo) ?? 0,
+        signer: walletAddress || "",
+        milestones: payload.milestones,
+      };
+
+      const response: InitializeSingleReleaseEscrowResponse =
+        (await deployEscrow.mutateAsync({
+          payload: finalPayload,
+          type: "single-release",
+          address: walletAddress || "",
+        })) as InitializeSingleReleaseEscrowResponse;
+
+      console.log("response", response);
+      toast.success("Escrow initialized successfully");
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+      form.reset();
+    }
+  });
+
+  return {
+    form,
+    isSubmitting,
+    milestones,
+    isAnyMilestoneEmpty,
+    handleSubmit,
+    handleAddMilestone,
+    handleRemoveMilestone,
+  };
+}

package/templates/escrows/single-release/release-escrow/button/ReleaseEscrow.tsx

@@ -0,0 +1,80 @@
+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 { SingleReleaseReleaseFundsPayload } 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 { useEscrowDialogs } from "../../../escrow-context/EscrowDialogsProvider";
+import { useEscrowAmountContext } from "../../../escrow-context/EscrowAmountProvider";
+import { Loader2 } from "lucide-react";
+
+export default function ReleaseEscrowButton() {
+  const { releaseFunds } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const dialogStates = useEscrowDialogs();
+  const { setAmounts } = useEscrowAmountContext();
+  const { walletAddress } = useWalletContext();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  async function handleClick() {
+    try {
+      setIsSubmitting(true);
+
+      const payload: SingleReleaseReleaseFundsPayload = {
+        contractId: selectedEscrow?.contractId || "",
+        releaseSigner: walletAddress || "",
+      };
+
+      await releaseFunds.mutateAsync({
+        payload,
+        type: "single-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Escrow released successfully");
+
+      // Ensure amounts are up to date for the success dialog
+      if (selectedEscrow) {
+        const totalAmount = Number(selectedEscrow.amount || 0);
+        const platformFee = Number(selectedEscrow.platformFee || 0);
+        setAmounts(totalAmount, platformFee);
+      }
+
+      updateEscrow({
+        ...selectedEscrow,
+        flags: { ...selectedEscrow?.flags, released: true },
+        balance: (selectedEscrow?.balance || 0) - (selectedEscrow?.amount || 0),
+      });
+
+      // Open success dialog
+      dialogStates.successRelease.setIsOpen(true);
+    } 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">Releasing...</span>
+        </div>
+      ) : (
+        "Release Escrow"
+      )}
+    </Button>
+  );
+}

package/templates/escrows/single-release/resolve-dispute/button/ResolveDispute.tsx

@@ -0,0 +1,94 @@
+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 { SingleReleaseResolveDisputePayload } 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 ResolveDisputeButtonProps = {
+  approverFunds: number;
+  receiverFunds: number;
+};
+
+export default function ResolveDisputeButton({
+  approverFunds,
+  receiverFunds,
+}: ResolveDisputeButtonProps) {
+  const { resolveDispute } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  async function handleClick() {
+    try {
+      if (
+        approverFunds == null ||
+        Number.isNaN(approverFunds) ||
+        receiverFunds == null ||
+        Number.isNaN(receiverFunds)
+      ) {
+        toast.error("Both amounts are required");
+        return;
+      }
+
+      if (approverFunds < 0 || receiverFunds < 0) {
+        toast.error("Amounts must be >= 0");
+        return;
+      }
+
+      setIsSubmitting(true);
+
+      const payload: SingleReleaseResolveDisputePayload = {
+        contractId: selectedEscrow?.contractId || "",
+        disputeResolver: walletAddress || "",
+        approverFunds: Number(approverFunds),
+        receiverFunds: Number(receiverFunds),
+      };
+
+      await resolveDispute.mutateAsync({
+        payload,
+        type: "single-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Dispute resolved successfully");
+      updateEscrow({
+        ...selectedEscrow,
+        flags: {
+          ...selectedEscrow?.flags,
+          disputed: false,
+          resolved: true,
+        },
+        balance: selectedEscrow?.balance || 0,
+      });
+    } 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">Resolving...</span>
+        </div>
+      ) : (
+        "Resolve Dispute"
+      )}
+    </Button>
+  );
+}

package/templates/escrows/single-release/resolve-dispute/dialog/ResolveDispute.tsx

@@ -0,0 +1,123 @@
+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 { useResolveDispute } from "./useResolveDispute";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+
+export default function ResolveDisputeDialog() {
+  const { form, handleSubmit, isSubmitting } = useResolveDispute();
+  const { selectedEscrow } = useEscrowContext();
+
+  function formatCurrency(amount: number, currency: string) {
+    return `${currency} ${amount.toFixed(2)}`;
+  }
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button" className="cursor-pointer w-full">
+          Resolve Dispute
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Resolve Dispute</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={handleSubmit}>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="approverFunds"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Approver Funds</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="text"
+                        inputMode="decimal"
+                        placeholder="Enter approver funds"
+                        value={field.value as unknown as string}
+                        onChange={(e) => field.onChange(e.target.value)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="receiverFunds"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Receiver Funds</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="text"
+                        inputMode="decimal"
+                        placeholder="Enter receiver funds"
+                        value={field.value as unknown as string}
+                        onChange={(e) => field.onChange(e.target.value)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="mt-4 flex justify-between items-center">
+              <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">Resolving...</span>
+                  </div>
+                ) : (
+                  "Resolve"
+                )}
+              </Button>
+
+              <p className="text-xs text-muted-foreground">
+                <span className="font-bold">Total Amount: </span>
+                {formatCurrency(
+                  selectedEscrow?.amount || 0,
+                  selectedEscrow?.trustline.name || ""
+                )}
+              </p>
+
+              <p className="text-xs text-muted-foreground">
+                <span className="font-bold">Total Balance: </span>
+                {formatCurrency(
+                  selectedEscrow?.balance || 0,
+                  selectedEscrow?.trustline.name || ""
+                )}
+              </p>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}