@trustless-work/blocks 0.0.7 → 0.0.8

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

@@ -0,0 +1,175 @@
+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 {
+  InitializeMultiReleaseEscrowPayload,
+  InitializeMultiReleaseEscrowResponse,
+} from "@trustless-work/escrow/types";
+import { toast } from "sonner";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
+
+export function useInitializeEscrow() {
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const { getMultiReleaseFormSchema } = useInitializeEscrowSchema();
+  const formSchema = getMultiReleaseFormSchema();
+  const { setSelectedEscrow } = useEscrowContext();
+
+  const { walletAddress } = useWalletContext();
+  const { deployEscrow } = useEscrowsMutations();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      engagementId: "",
+      title: "",
+      description: "",
+      platformFee: undefined,
+      receiverMemo: "",
+      trustline: {
+        address: "",
+        decimals: 10000000,
+      },
+      roles: {
+        approver: "",
+        serviceProvider: "",
+        platformAddress: "",
+        receiver: "",
+        releaseSigner: "",
+        disputeResolver: "",
+      },
+      milestones: [{ description: "", amount: "" }],
+    },
+    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: "", amount: "" },
+    ];
+    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 fillTemplateForm = () => {
+    const usdc = trustlineOptions.find((t) => t.label === "USDC");
+
+    const templateData: z.infer<typeof formSchema> = {
+      engagementId: "ENG-001",
+      title: "Design Landing Page",
+      description: "Landing for the new product of the company.",
+      platformFee: 5,
+      receiverMemo: "123",
+      trustline: {
+        address: usdc?.value || "",
+        decimals: 10000000,
+      },
+      roles: {
+        approver: walletAddress || "",
+        serviceProvider: walletAddress || "",
+        platformAddress: walletAddress || "",
+        receiver: walletAddress || "",
+        releaseSigner: walletAddress || "",
+        disputeResolver: walletAddress || "",
+      },
+      milestones: [
+        { description: "Design the wireframe", amount: 2 },
+        { description: "Develop the wireframe", amount: 2 },
+        { description: "Deploy the wireframe", amount: 2 },
+      ],
+    };
+
+    // Set form values
+    Object.entries(templateData).forEach(([key, value]) => {
+      form.setValue(key as keyof z.infer<typeof formSchema>, value);
+    });
+
+    // Explicitly set the trustline field
+    form.setValue("trustline.address", usdc?.value || "");
+    form.setValue("trustline.decimals", 10000000);
+  };
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      /**
+       * Create the final payload for the initialize escrow mutation
+       *
+       * @param payload - The payload from the form
+       * @returns The final payload for the initialize escrow mutation
+       */
+      const finalPayload: InitializeMultiReleaseEscrowPayload = {
+        ...payload,
+        platformFee:
+          typeof payload.platformFee === "string"
+            ? Number(payload.platformFee)
+            : payload.platformFee,
+        receiverMemo: Number(payload.receiverMemo) ?? 0,
+        signer: walletAddress || "",
+        milestones: payload.milestones.map((milestone) => ({
+          ...milestone,
+          amount:
+            typeof milestone.amount === "string"
+              ? Number(milestone.amount)
+              : milestone.amount,
+        })),
+      };
+
+      /**
+       * Call the initialize escrow mutation
+       *
+       * @param payload - The final payload for the initialize escrow mutation
+       * @param type - The type of the escrow
+       * @param address - The address of the escrow
+       */
+      const response: InitializeMultiReleaseEscrowResponse =
+        (await deployEscrow.mutateAsync({
+          payload: finalPayload,
+          type: "multi-release",
+          address: walletAddress || "",
+        })) as InitializeMultiReleaseEscrowResponse;
+
+      toast.success("Escrow initialized successfully");
+
+      setSelectedEscrow({ ...finalPayload, contractId: response.contractId });
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+      form.reset();
+    }
+  });
+
+  return {
+    form,
+    isSubmitting,
+    milestones,
+    isAnyMilestoneEmpty,
+    fillTemplateForm,
+    handleSubmit,
+    handleAddMilestone,
+    handleRemoveMilestone,
+  };
+}

package/templates/escrows/multi-release/release-milestone/button/ReleaseEscrow.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { Button } from "__UI_BASE__/button";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import {
+  MultiReleaseReleaseFundsPayload,
+  MultiReleaseMilestone,
+} from "@trustless-work/escrow/types";
+import { toast } from "sonner";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
+import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
+import { Loader2 } from "lucide-react";
+
+type ReleaseEscrowButtonProps = {
+  milestoneIndex: number | string;
+};
+
+export const ReleaseEscrowButton = ({
+  milestoneIndex,
+}: ReleaseEscrowButtonProps) => {
+  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);
+
+      /**
+       * Create the payload for the release escrow mutation
+       *
+       * @returns The payload for the release escrow mutation
+       */
+      const payload: MultiReleaseReleaseFundsPayload = {
+        contractId: selectedEscrow?.contractId || "",
+        releaseSigner: walletAddress || "",
+        milestoneIndex: String(milestoneIndex),
+      };
+
+      /**
+       * Call the release escrow mutation
+       *
+       * @param payload - The payload for the release escrow mutation
+       * @param type - The type of the escrow
+       * @param address - The address of the escrow
+       */
+      await releaseFunds.mutateAsync({
+        payload,
+        type: "multi-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Escrow released successfully");
+
+      // Ensure amounts are up to date for the success dialog
+      if (selectedEscrow) {
+        const milestone = selectedEscrow.milestones?.[Number(milestoneIndex)];
+        const releasedAmount = Number(
+          (milestone as MultiReleaseMilestone | undefined)?.amount || 0
+        );
+        const platformFee = Number(selectedEscrow.platformFee || 0);
+        setAmounts(releasedAmount, platformFee);
+      }
+
+      updateEscrow({
+        ...selectedEscrow,
+        milestones: selectedEscrow?.milestones.map((milestone, index) => {
+          if (index === Number(milestoneIndex)) {
+            return {
+              ...milestone,
+              flags: {
+                ...(milestone as MultiReleaseMilestone).flags,
+                released: true,
+              },
+            };
+          }
+          return milestone;
+        }),
+        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 Milestone"
+      )}
+    </Button>
+  );
+};

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

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { Button } from "__UI_BASE__/button";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import {
+  MultiReleaseResolveDisputePayload,
+  MultiReleaseMilestone,
+} from "@trustless-work/escrow/types";
+import { toast } from "sonner";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { Loader2 } from "lucide-react";
+
+type ResolveDisputeButtonProps = {
+  approverFunds: number;
+  receiverFunds: number;
+  milestoneIndex: number | string;
+};
+
+export const ResolveDisputeButton = ({
+  approverFunds,
+  receiverFunds,
+  milestoneIndex,
+}: 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);
+
+      /**
+       * Create the payload for the resolve dispute mutation
+       *
+       * @returns The payload for the resolve dispute mutation
+       */
+      const payload: MultiReleaseResolveDisputePayload = {
+        contractId: selectedEscrow?.contractId || "",
+        disputeResolver: walletAddress || "",
+        approverFunds: Number(approverFunds),
+        receiverFunds: Number(receiverFunds),
+        milestoneIndex: String(milestoneIndex),
+      };
+
+      /**
+       * Call the resolve dispute mutation
+       *
+       * @param payload - The payload for the resolve dispute mutation
+       * @param type - The type of the escrow
+       * @param address - The address of the escrow
+       */
+      await resolveDispute.mutateAsync({
+        payload,
+        type: "multi-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Dispute resolved successfully");
+      updateEscrow({
+        ...selectedEscrow,
+        milestones: selectedEscrow?.milestones.map((milestone, index) => {
+          if (index === Number(milestoneIndex)) {
+            return {
+              ...milestone,
+              flags: {
+                ...(milestone as MultiReleaseMilestone).flags,
+                disputed: false,
+                resolved: true,
+              },
+            };
+          }
+          return milestone;
+        }),
+        balance:
+          selectedEscrow?.balance ||
+          Number(approverFunds) + Number(receiverFunds),
+      });
+    } 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/multi-release/resolve-dispute/dialog/ResolveDispute.tsx

@@ -0,0 +1,178 @@
+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 "@/components/tw-blocks/providers/EscrowProvider";
+import { formatCurrency } from "../../../../helpers/format.helper";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+
+export const ResolveDisputeDialog = ({
+  showSelectMilestone = false,
+  milestoneIndex,
+}: {
+  showSelectMilestone?: boolean;
+  milestoneIndex?: number | string;
+}) => {
+  const { form, handleSubmit, isSubmitting, totalAmount } = useResolveDispute();
+  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">
+          Resolve Dispute
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Resolve Dispute</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={handleSubmit}>
+            {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>
+                )}
+              />
+            )}
+
+            <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(
+                  totalAmount,
+                  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>
+  );
+};