@trustless-work/blocks 0.0.1

package/templates/escrows/escrows-by-signer/useEscrowsBySigner.shared.ts

@@ -0,0 +1,320 @@
+"use client";
+
+import React from "react";
+import { startOfDay, endOfDay, format } from "date-fns";
+import type { DateRange as DayPickerDateRange } from "react-day-picker";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import type { SortingState } from "@tanstack/react-table";
+import { useWalletContext } from "../../wallet-kit/WalletProvider";
+import { useEscrowsBySignerQuery } from "../../tanstak/useEscrowsBySignerQuery";
+import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+
+export type EscrowOrderBy = "createdAt" | "updatedAt" | "amount";
+export type EscrowOrderDirection = "asc" | "desc";
+export type EscrowType = "single-release" | "multi-release" | "all";
+export type EscrowStatus =
+  | "working"
+  | "pendingRelease"
+  | "released"
+  | "resolved"
+  | "inDispute"
+  | "all";
+export type DateRange = DayPickerDateRange;
+
+export function useEscrowsBySigner() {
+  const { walletAddress } = useWalletContext();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const [page, setPage] = React.useState<number>(1);
+  const [orderBy, setOrderBy] = React.useState<EscrowOrderBy>("createdAt");
+  const [orderDirection, setOrderDirection] =
+    React.useState<EscrowOrderDirection>("desc");
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [title, setTitle] = React.useState<string>("");
+  const [engagementId, setEngagementId] = React.useState<string>("");
+  const [isActive, setIsActive] = React.useState<boolean>(true);
+  const [validateOnChain, setValidateOnChain] = React.useState<boolean>(true);
+  const [type, setType] = React.useState<EscrowType>("all");
+  const [status, setStatus] = React.useState<EscrowStatus>("all");
+  const [minAmount, setMinAmount] = React.useState<string>("");
+  const [maxAmount, setMaxAmount] = React.useState<string>("");
+  const [dateRange, setDateRange] = React.useState<DateRange>({
+    from: undefined,
+    to: undefined,
+  });
+
+  function useDebouncedValue<T>(value: T, delayMs: number) {
+    const [debounced, setDebounced] = React.useState<T>(value);
+    React.useEffect(() => {
+      const id = setTimeout(() => setDebounced(value), delayMs);
+      return () => clearTimeout(id);
+    }, [value, delayMs]);
+    return debounced;
+  }
+
+  const debouncedTitle = useDebouncedValue(title, 400);
+  const debouncedEngagementId = useDebouncedValue(engagementId, 400);
+  const debouncedMinAmount = useDebouncedValue(minAmount, 400);
+  const debouncedMaxAmount = useDebouncedValue(maxAmount, 400);
+
+  React.useEffect(() => {
+    if (!searchParams) return;
+    const qp = new URLSearchParams(searchParams.toString());
+    const qpPage = Number(qp.get("page") || 1);
+    const qpOrderBy = (qp.get("orderBy") as EscrowOrderBy) || "createdAt";
+    const qpOrderDir =
+      (qp.get("orderDirection") as EscrowOrderDirection) || "desc";
+    const qpTitle = qp.get("title") || "";
+    const qpEng = qp.get("engagementId") || "";
+    const qpActive = qp.get("isActive");
+    const qpValidateOnChain = qp.get("validateOnChain");
+    const qpType = (qp.get("type") as EscrowType) || "all";
+    const qpStatus = (qp.get("status") as EscrowStatus) || "all";
+    const qpMin = qp.get("minAmount") || "";
+    const qpMax = qp.get("maxAmount") || "";
+    const qpStart = qp.get("startDate");
+    const qpEnd = qp.get("endDate");
+
+    setPage(Number.isFinite(qpPage) && qpPage > 0 ? qpPage : 1);
+    setOrderBy(
+      ["createdAt", "updatedAt", "amount"].includes(qpOrderBy)
+        ? qpOrderBy
+        : "createdAt"
+    );
+    setOrderDirection(qpOrderDir === "asc" ? "asc" : "desc");
+    setTitle(qpTitle);
+    setEngagementId(qpEng);
+    setIsActive(qpActive === null ? true : qpActive === "true");
+    setValidateOnChain(
+      qpValidateOnChain === null ? true : qpValidateOnChain === "true"
+    );
+    setType(qpType);
+    setStatus(qpStatus);
+    setMinAmount(qpMin);
+    setMaxAmount(qpMax);
+    setDateRange({
+      from: qpStart ? new Date(qpStart) : undefined,
+      to: qpEnd ? new Date(qpEnd) : undefined,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const debouncedSearchParams = useDebouncedValue(
+    {
+      page,
+      orderBy,
+      orderDirection,
+      title: debouncedTitle,
+      engagementId: debouncedEngagementId,
+      isActive,
+      validateOnChain,
+      type,
+      status,
+      minAmount: debouncedMinAmount,
+      maxAmount: debouncedMaxAmount,
+      startDate: dateRange.from
+        ? startOfDay(dateRange.from).toISOString()
+        : undefined,
+      endDate: dateRange.to ? endOfDay(dateRange.to).toISOString() : undefined,
+    },
+    200
+  );
+
+  React.useEffect(() => {
+    if (!pathname) return;
+    const qp = new URLSearchParams();
+    qp.set("page", String(debouncedSearchParams.page ?? 1));
+    qp.set("orderBy", String(debouncedSearchParams.orderBy ?? "createdAt"));
+    qp.set(
+      "orderDirection",
+      String(debouncedSearchParams.orderDirection ?? "desc")
+    );
+    if (debouncedSearchParams.title)
+      qp.set("title", debouncedSearchParams.title);
+    if (debouncedSearchParams.engagementId)
+      qp.set("engagementId", debouncedSearchParams.engagementId);
+    qp.set("isActive", String(debouncedSearchParams.isActive));
+    qp.set("validateOnChain", String(debouncedSearchParams.validateOnChain));
+    if (type && type !== "all") qp.set("type", type);
+    if (status && status !== "all") qp.set("status", status);
+    if (debouncedSearchParams.minAmount)
+      qp.set("minAmount", String(debouncedSearchParams.minAmount));
+    if (debouncedSearchParams.maxAmount)
+      qp.set("maxAmount", String(debouncedSearchParams.maxAmount));
+    if (debouncedSearchParams.startDate)
+      qp.set("startDate", String(debouncedSearchParams.startDate));
+    if (debouncedSearchParams.endDate)
+      qp.set("endDate", String(debouncedSearchParams.endDate));
+
+    router.replace(`${pathname}?${qp.toString()}`);
+  }, [
+    pathname,
+    router,
+    debouncedSearchParams.page,
+    debouncedSearchParams.orderBy,
+    debouncedSearchParams.orderDirection,
+    debouncedSearchParams.title,
+    debouncedSearchParams.engagementId,
+    debouncedSearchParams.isActive,
+    debouncedSearchParams.validateOnChain,
+    type,
+    status,
+    debouncedSearchParams.minAmount,
+    debouncedSearchParams.maxAmount,
+    debouncedSearchParams.startDate,
+    debouncedSearchParams.endDate,
+  ]);
+
+  const formattedRangeLabel = React.useMemo(() => {
+    if (!dateRange?.from && !dateRange?.to) return "Date range";
+    const fromStr = dateRange.from
+      ? format(dateRange.from, "LLL dd, yyyy")
+      : "";
+    const toStr = dateRange.to ? format(dateRange.to, "LLL dd, yyyy") : "";
+    return [fromStr, toStr].filter(Boolean).join(" – ") || "Date range";
+  }, [dateRange]);
+
+  const params = React.useMemo(() => {
+    return {
+      signer: walletAddress ?? "",
+      page,
+      orderBy,
+      orderDirection,
+      title: debouncedTitle || undefined,
+      engagementId: debouncedEngagementId || undefined,
+      isActive,
+      validateOnChain,
+      type: (type === "all" ? undefined : type) as
+        | undefined
+        | "single-release"
+        | "multi-release",
+      status: (status === "all" ? undefined : status) as
+        | undefined
+        | "working"
+        | "pendingRelease"
+        | "released"
+        | "resolved"
+        | "inDispute",
+      minAmount: debouncedMinAmount ? Number(debouncedMinAmount) : undefined,
+      maxAmount: debouncedMaxAmount ? Number(debouncedMaxAmount) : undefined,
+      startDate: dateRange.from
+        ? startOfDay(dateRange.from).toISOString()
+        : undefined,
+      endDate: dateRange.to ? endOfDay(dateRange.to).toISOString() : undefined,
+      enabled: Boolean(walletAddress),
+    };
+  }, [
+    walletAddress,
+    page,
+    orderBy,
+    orderDirection,
+    debouncedTitle,
+    debouncedEngagementId,
+    isActive,
+    validateOnChain,
+    type,
+    status,
+    debouncedMinAmount,
+    debouncedMaxAmount,
+    dateRange,
+  ]);
+
+  const query = useEscrowsBySignerQuery(params);
+  const nextPageQuery = useEscrowsBySignerQuery({ ...params, page: page + 1 });
+
+  const didMountValidateRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!didMountValidateRef.current) {
+      didMountValidateRef.current = true;
+      return;
+    }
+    query.refetch();
+    nextPageQuery.refetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validateOnChain]);
+
+  const onClearFilters = React.useCallback(() => {
+    setTitle("");
+    setEngagementId("");
+    setIsActive(true);
+    setValidateOnChain(true);
+    setType("all");
+    setStatus("all");
+    setMinAmount("");
+    setMaxAmount("");
+    setDateRange({ from: undefined, to: undefined });
+    setPage(1);
+    setOrderBy("createdAt");
+    setOrderDirection("desc");
+    setSorting([]);
+  }, []);
+
+  const handleSortingChange = React.useCallback(
+    (updater: SortingState | ((old: SortingState) => SortingState)) => {
+      setSorting((prev) => {
+        const next =
+          typeof updater === "function"
+            ? (updater as (old: SortingState) => SortingState)(prev)
+            : updater;
+        const first = next[0];
+        if (first) {
+          if (
+            first.id === "amount" ||
+            first.id === "createdAt" ||
+            first.id === "updatedAt"
+          ) {
+            setOrderBy(first.id as EscrowOrderBy);
+            setOrderDirection(first.desc ? "desc" : "asc");
+          }
+        } else {
+          setOrderBy("createdAt");
+          setOrderDirection("desc");
+        }
+        return next;
+      });
+    },
+    []
+  );
+
+  return {
+    walletAddress,
+    data: query.data ?? ([] as Escrow[]),
+    isLoading: query.isLoading,
+    isError: query.isError,
+    isFetching: query.isFetching,
+    refetch: query.refetch,
+    nextData: nextPageQuery.data ?? [],
+    isFetchingNext: nextPageQuery.isFetching,
+    page,
+    setPage,
+    orderBy,
+    setOrderBy,
+    orderDirection,
+    setOrderDirection,
+    sorting,
+    setSorting,
+    title,
+    setTitle,
+    engagementId,
+    setEngagementId,
+    isActive,
+    setIsActive,
+    validateOnChain,
+    setValidateOnChain,
+    type,
+    setType,
+    status,
+    setStatus,
+    minAmount,
+    setMinAmount,
+    maxAmount,
+    setMaxAmount,
+    dateRange,
+    setDateRange,
+    formattedRangeLabel,
+    onClearFilters,
+    handleSortingChange,
+  } as const;
+}

package/templates/escrows/single-release/approve-milestone/button/ApproveMilestone.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 { ApproveMilestonePayload } 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 ApproveMilestoneButtonProps = {
+  milestoneIndex: number | string;
+};
+
+export default function ApproveMilestoneButton({
+  milestoneIndex,
+}: ApproveMilestoneButtonProps) {
+  const { approveMilestone } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  async function handleClick() {
+    try {
+      setIsSubmitting(true);
+
+      const payload: ApproveMilestonePayload = {
+        contractId: selectedEscrow?.contractId || "",
+        milestoneIndex: String(milestoneIndex),
+        approver: walletAddress || "",
+        newFlag: true,
+      };
+
+      await approveMilestone.mutateAsync({
+        payload,
+        type: "single-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Milestone approved flag updated successfully");
+
+      updateEscrow({
+        ...selectedEscrow,
+        milestones: selectedEscrow?.milestones.map((milestone, index) => {
+          if (index === Number(milestoneIndex)) {
+            return { ...milestone, approved: true };
+          }
+          return milestone;
+        }),
+      });
+    } 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">Approving...</span>
+        </div>
+      ) : (
+        "Approve Milestone"
+      )}
+    </Button>
+  );
+}

package/templates/escrows/single-release/approve-milestone/dialog/ApproveMilestone.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Button } from "__UI_BASE__/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "__UI_BASE__/dialog";
+import { Loader2 } from "lucide-react";
+import { useApproveMilestone } from "./useApproveMilestone";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+
+export default function ApproveMilestoneDialog() {
+  const { form, handleSubmit, isSubmitting } = useApproveMilestone();
+  const { selectedEscrow } = useEscrowContext();
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button" className="cursor-pointer w-full">
+          Approve Milestone
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Approve Milestone</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col space-y-6 w-full"
+          >
+            <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="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">Approving...</span>
+                  </div>
+                ) : (
+                  "Approve"
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/escrows/single-release/approve-milestone/form/ApproveMilestone.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Button } from "__UI_BASE__/button";
+import { useApproveMilestone } from "./useApproveMilestone";
+import { Loader2 } from "lucide-react";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+
+export default function ApproveMilestoneForm() {
+  const { form, handleSubmit, isSubmitting } = useApproveMilestone();
+  const { selectedEscrow } = useEscrowContext();
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="flex flex-col space-y-6 w-full">
+        <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="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">Approving...</span>
+              </div>
+            ) : (
+              "Approve"
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const approveMilestoneSchema = z.object({
+  milestoneIndex: z
+    .string({ required_error: "Milestone is required" })
+    .min(1, { message: "Milestone is required" }),
+});
+
+export type ApproveMilestoneValues = z.infer<typeof approveMilestoneSchema>;

package/templates/escrows/single-release/approve-milestone/shared/useApproveMilestone.ts

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