@trustless-work/blocks 0.0.6 → 0.0.8

package/templates/escrows/escrows-by-signer/table/EscrowsTable.tsx

@@ -6,7 +6,6 @@ import { Button } from "__UI_BASE__/button";
 import type {
   GetEscrowsFromIndexerResponse as Escrow,
   MultiReleaseMilestone,
-  Role,
 } from "@trustless-work/escrow/types";
 import {
   ColumnDef,
@@ -23,14 +22,14 @@ import {
   TableRow,
 } from "__UI_BASE__/table";
 import { FileX, Loader2, Wallet, RefreshCw, AlertTriangle } from "lucide-react";
-import Filters from "./Filters";
+import { Filters } from "./Filters";
 import { useEscrowsBySigner } from "../useEscrowsBySigner.shared";
-import { useEscrowDialogs } from "../../escrow-context/EscrowDialogsProvider";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
-import EscrowDetailDialog from "../../escrows-by-role/details/EscrowDetailDialog";
+import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { EscrowDetailDialog } from "../details/EscrowDetailDialog";
 import { formatTimestamp } from "../../../helpers/format.helper";
 
-export function EscrowsBySignerTable() {
+export const EscrowsBySignerTable = () => {
   const {
     walletAddress,
     data,
@@ -73,6 +72,10 @@ export function EscrowsBySignerTable() {
   const dialogStates = useEscrowDialogs();
   const { setSelectedEscrow } = useEscrowContext();
 
+  const handleRefresh = React.useCallback(() => {
+    void refetch();
+  }, [refetch]);
+
   const columns = React.useMemo<ColumnDef<Escrow>[]>(
     () => [
       {
@@ -184,7 +187,7 @@ export function EscrowsBySignerTable() {
         ),
       },
     ],
-    []
+    [dialogStates.second.setIsOpen, setSelectedEscrow]
   );
 
   const table = useReactTable({
@@ -199,18 +202,6 @@ export function EscrowsBySignerTable() {
     enableSortingRemoval: true,
   });
 
-  /**
-   * Based on the provided roles -> https://docs.trustlesswork.com/trustless-work/technology-overview/roles-in-trustless-work
-   *
-   * You must pass one or more roles according to requirements
-   *
-   * For example:
-   * - If the user is a freelancer, you must pass the "serviceProvider" and "receiver" role
-   *
-   * Depending of the role, you'll have different actions buttons
-   */
-  const activeRole: Role[] = ["approver"];
-
   const escrows = data ?? [];
 
   return (
@@ -231,18 +222,18 @@ export function EscrowsBySignerTable() {
           setEngagementId={setEngagementId}
           setIsActive={setIsActive}
           setValidateOnChain={setValidateOnChain}
-          setType={(v) => setType(v as typeof type)}
-          setStatus={(v) => setStatus(v as typeof status)}
+          setType={setType}
+          setStatus={setStatus}
           setMinAmount={setMinAmount}
           setMaxAmount={setMaxAmount}
           setDateRange={setDateRange}
           onClearFilters={onClearFilters}
-          onRefresh={() => refetch()}
+          onRefresh={handleRefresh}
           isRefreshing={isFetching}
           orderBy={orderBy}
           orderDirection={orderDirection}
-          setOrderBy={(v) => setOrderBy(v)}
-          setOrderDirection={(v) => setOrderDirection(v)}
+          setOrderBy={setOrderBy}
+          setOrderDirection={setOrderDirection}
         />
 
         <Card className="w-full py-2 sm:py-4">
@@ -257,8 +248,8 @@ export function EscrowsBySignerTable() {
                       const className =
                         typeof header.column.columnDef.meta === "object" &&
                         header.column.columnDef.meta &&
-                        "className" in (header.column.columnDef.meta as any)
-                          ? (header.column.columnDef.meta as any).className
+                        "className" in header.column.columnDef.meta
+                          ? header.column.columnDef.meta.className
                           : "";
                       return (
                         <TableHead
@@ -341,7 +332,7 @@ export function EscrowsBySignerTable() {
                         <Button
                           variant="outline"
                           size="sm"
-                          onClick={() => refetch()}
+                          onClick={handleRefresh}
                         >
                           <RefreshCw className="h-4 w-4 mr-2" />
                           Retry
@@ -371,8 +362,8 @@ export function EscrowsBySignerTable() {
                           const className =
                             typeof cell.column.columnDef.meta === "object" &&
                             cell.column.columnDef.meta &&
-                            "className" in (cell.column.columnDef.meta as any)
-                              ? (cell.column.columnDef.meta as any).className
+                            "className" in cell.column.columnDef.meta
+                              ? (cell.column.columnDef.meta.className as string)
                               : "";
                           return (
                             <TableCell key={cell.id} className={className}>
@@ -420,14 +411,13 @@ export function EscrowsBySignerTable() {
       </div>
 
       {/* Dialog */}
-      <EscrowDetailDialog
-        activeRole={activeRole}
-        isDialogOpen={dialogStates.second.isOpen}
-        setIsDialogOpen={dialogStates.second.setIsOpen}
-        setSelectedEscrow={setSelectedEscrow}
-      />
+      {dialogStates.second.isOpen ? (
+        <EscrowDetailDialog
+          isDialogOpen={dialogStates.second.isOpen}
+          setIsDialogOpen={dialogStates.second.setIsOpen}
+          setSelectedEscrow={setSelectedEscrow}
+        />
+      ) : null}
     </>
   );
-}
-
-export default EscrowsBySignerTable;
+};

package/templates/escrows/escrows-by-signer/table/Filters.tsx

@@ -81,7 +81,7 @@ type FiltersProps = {
   setOrderDirection: (v: "asc" | "desc") => void;
 };
 
-function Filters({
+export const Filters = ({
   title,
   engagementId,
   isActive,
@@ -108,7 +108,7 @@ function Filters({
   onRefresh,
   setOrderBy,
   setOrderDirection,
-}: FiltersProps) {
+}: FiltersProps) => {
   return (
     <div className="w-full bg-card/50 backdrop-blur-sm border border-border/50 rounded-lg p-4 shadow-sm">
       {/* Header Section */}
@@ -384,6 +384,4 @@ function Filters({
       </div>
     </div>
   );
-}
-
-export default React.memo(Filters);
+};

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

@@ -101,8 +101,8 @@ export function useEscrowsBySigner() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const debouncedSearchParams = useDebouncedValue(
-    {
+  const stableSearchParams = React.useMemo(
+    () => ({
       page,
       orderBy,
       orderDirection,
@@ -118,10 +118,28 @@ export function useEscrowsBySigner() {
         ? startOfDay(dateRange.from).toISOString()
         : undefined,
       endDate: dateRange.to ? endOfDay(dateRange.to).toISOString() : undefined,
-    },
-    200
+    }),
+    [
+      page,
+      orderBy,
+      orderDirection,
+      debouncedTitle,
+      debouncedEngagementId,
+      isActive,
+      validateOnChain,
+      type,
+      status,
+      debouncedMinAmount,
+      debouncedMaxAmount,
+      dateRange.from,
+      dateRange.to,
+    ]
   );
 
+  const debouncedSearchParams = useDebouncedValue(stableSearchParams, 200);
+
+  const lastQueryStringRef = React.useRef("");
+
   React.useEffect(() => {
     if (!pathname) return;
     const qp = new URLSearchParams();
@@ -137,8 +155,10 @@ export function useEscrowsBySigner() {
       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.type && debouncedSearchParams.type !== "all")
+      qp.set("type", debouncedSearchParams.type);
+    if (debouncedSearchParams.status && debouncedSearchParams.status !== "all")
+      qp.set("status", debouncedSearchParams.status);
     if (debouncedSearchParams.minAmount)
       qp.set("minAmount", String(debouncedSearchParams.minAmount));
     if (debouncedSearchParams.maxAmount)
@@ -147,25 +167,12 @@ export function useEscrowsBySigner() {
       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 newQs = qp.toString();
+    if (lastQueryStringRef.current !== newQs) {
+      lastQueryStringRef.current = newQs;
+      router.replace(`${pathname}?${newQs}`);
+    }
+  }, [pathname, router, debouncedSearchParams]);
 
   const formattedRangeLabel = React.useMemo(() => {
     if (!dateRange?.from && !dateRange?.to) return "Date range";

package/templates/escrows/multi-release/dispute-milestone/button/DisputeEscrow.tsx

@@ -0,0 +1,98 @@
+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 {
+  MultiReleaseStartDisputePayload,
+  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 DisputeEscrowButtonProps = {
+  milestoneIndex: number | string;
+};
+
+export const DisputeEscrowButton = ({
+  milestoneIndex,
+}: DisputeEscrowButtonProps) => {
+  const { startDispute } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  async function handleClick() {
+    try {
+      setIsSubmitting(true);
+
+      /**
+       * Create the payload for the dispute escrow mutation
+       *
+       * @returns The payload for the dispute escrow mutation
+       */
+      const payload: MultiReleaseStartDisputePayload = {
+        contractId: selectedEscrow?.contractId || "",
+        signer: walletAddress || "",
+        milestoneIndex: String(milestoneIndex),
+      };
+
+      /**
+       * Call the dispute escrow mutation
+       *
+       * @param payload - The payload for the dispute escrow mutation
+       * @param type - The type of the escrow
+       * @param address - The address of the escrow
+       */
+      await startDispute.mutateAsync({
+        payload,
+        type: "multi-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Escrow disputed successfully");
+
+      updateEscrow({
+        ...selectedEscrow,
+        milestones: selectedEscrow?.milestones.map((milestone, index) => {
+          if (index === Number(milestoneIndex)) {
+            return {
+              ...milestone,
+              flags: {
+                ...(milestone as MultiReleaseMilestone).flags,
+                disputed: true,
+              },
+            };
+          }
+          return milestone;
+        }),
+      });
+    } 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 Milestone"
+      )}
+    </Button>
+  );
+};