@trustless-work/blocks 0.0.6 → 0.0.8

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

@@ -23,14 +23,14 @@ import {
   TableRow,
 } from "__UI_BASE__/table";
 import { FileX, Loader2, Wallet, RefreshCw, AlertTriangle } from "lucide-react";
-import Filters from "./Filters";
-import EscrowDetailDialog from "../details/EscrowDetailDialog";
-import { useEscrowDialogs } from "../../escrow-context/EscrowDialogsProvider";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
+import { Filters } from "./Filters";
+import { EscrowDetailDialog } from "../details/EscrowDetailDialog";
+import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { useEscrowsByRole } from "../useEscrowsByRole.shared";
 import { formatTimestamp } from "../../../helpers/format.helper";
 
-export function EscrowsByRoleTable() {
+export const EscrowsByRoleTable = () => {
   const {
     walletAddress,
     data,
@@ -75,6 +75,17 @@ export function EscrowsByRoleTable() {
   const dialogStates = useEscrowDialogs();
   const { setSelectedEscrow } = useEscrowContext();
 
+  const handleRefresh = React.useCallback(() => {
+    void refetch();
+  }, [refetch]);
+
+  const setRoleStable = React.useCallback(
+    (v: Role | undefined) => {
+      if (v) setRole(v);
+    },
+    [setRole]
+  );
+
   const columns = React.useMemo<ColumnDef<Escrow>[]>(
     () => [
       {
@@ -187,7 +198,7 @@ export function EscrowsByRoleTable() {
         ),
       },
     ],
-    []
+    [dialogStates.second.setIsOpen, setSelectedEscrow]
   );
 
   const table = useReactTable({
@@ -202,18 +213,6 @@ export function EscrowsByRoleTable() {
     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. Acctually it's coming from the select filter.
-   *
-   * 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[] = role.split(",") as Role[];
-
   const escrows = data ?? [];
 
   return (
@@ -235,19 +234,19 @@ export function EscrowsByRoleTable() {
           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}
-          setRole={(v) => setRole(v as Role)}
+          setRole={setRoleStable}
           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">
@@ -262,8 +261,8 @@ export function EscrowsByRoleTable() {
                       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
@@ -346,7 +345,7 @@ export function EscrowsByRoleTable() {
                         <Button
                           variant="outline"
                           size="sm"
-                          onClick={() => refetch()}
+                          onClick={handleRefresh}
                         >
                           <RefreshCw className="h-4 w-4 mr-2" />
                           Retry
@@ -376,8 +375,8 @@ export function EscrowsByRoleTable() {
                           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}>
@@ -425,14 +424,13 @@ export function EscrowsByRoleTable() {
       </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 EscrowsByRoleTable;
+};

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

@@ -84,7 +84,7 @@ type FiltersProps = {
   setOrderDirection: (v: "asc" | "desc") => void;
 };
 
-function Filters({
+export const Filters = ({
   title,
   engagementId,
   isActive,
@@ -113,7 +113,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 */}
@@ -416,6 +416,4 @@ function Filters({
       </div>
     </div>
   );
-}
-
-export default React.memo(Filters);
+};

package/templates/escrows/escrows-by-role/useEscrowsByRole.shared.ts

@@ -108,8 +108,8 @@ export function useEscrowsByRole() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const debouncedSearchParams = useDebouncedValue(
-    {
+  const stableSearchParams = React.useMemo(
+    () => ({
       page,
       orderBy,
       orderDirection,
@@ -126,10 +126,29 @@ export function useEscrowsByRole() {
         : undefined,
       endDate: dateRange.to ? endOfDay(dateRange.to).toISOString() : undefined,
       role,
-    },
-    200
+    }),
+    [
+      page,
+      orderBy,
+      orderDirection,
+      debouncedTitle,
+      debouncedEngagementId,
+      isActive,
+      validateOnChain,
+      type,
+      status,
+      debouncedMinAmount,
+      debouncedMaxAmount,
+      dateRange.from,
+      dateRange.to,
+      role,
+    ]
   );
 
+  const debouncedSearchParams = useDebouncedValue(stableSearchParams, 200);
+
+  const lastQueryStringRef = React.useRef("");
+
   React.useEffect(() => {
     if (!pathname) return;
     const qp = new URLSearchParams();
@@ -145,8 +164,10 @@ export function useEscrowsByRole() {
       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)
@@ -158,25 +179,12 @@ export function useEscrowsByRole() {
     if (debouncedSearchParams.role)
       qp.set("role", String(debouncedSearchParams.role));
 
-    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,
-    debouncedSearchParams.role,
-  ]);
+    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/escrows-by-signer/cards/EscrowsCards.tsx

@@ -5,14 +5,14 @@ import { Button } from "__UI_BASE__/button";
 import type {
   GetEscrowsFromIndexerResponse as Escrow,
   MultiReleaseMilestone,
-  Role,
   SingleReleaseMilestone,
 } from "@trustless-work/escrow/types";
-import Filters from "./Filters";
+import { Filters } from "./Filters";
 import { useEscrowsBySigner } from "../useEscrowsBySigner.shared";
 import { Card, CardContent, CardHeader, CardTitle } from "__UI_BASE__/card";
 import { Badge } from "__UI_BASE__/badge";
 import { Separator } from "__UI_BASE__/separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "__UI_BASE__/tooltip";
 import {
   Goal,
   Wallet,
@@ -21,12 +21,15 @@ import {
   RefreshCw,
   FileX,
 } from "lucide-react";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
-import { useEscrowDialogs } from "../../escrow-context/EscrowDialogsProvider";
-import EscrowDetailDialog from "../../escrows-by-role/details/EscrowDetailDialog";
-import { formatTimestamp } from "../../../helpers/format.helper";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
+import { EscrowDetailDialog } from "../details/EscrowDetailDialog";
+import {
+  formatCurrency,
+  formatTimestamp,
+} from "../../../helpers/format.helper";
 
-export function EscrowsBySignerCards() {
+export const EscrowsBySignerCards = () => {
   const {
     walletAddress,
     data,
@@ -70,9 +73,9 @@ export function EscrowsBySignerCards() {
 
   const dialogStates = useEscrowDialogs();
 
-  const formatCurrency = (value: number, currency: string) => {
-    return `${currency} ${value.toFixed(2)}`;
-  };
+  const handleRefresh = React.useCallback(() => {
+    void refetch();
+  }, [refetch]);
 
   function allMilestonesReleasedOrResolved(
     milestones: MultiReleaseMilestone[]
@@ -116,18 +119,6 @@ export function EscrowsBySignerCards() {
     dialogStates.second.setIsOpen(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: Escrow[] = data ?? [];
 
   return (
@@ -148,18 +139,18 @@ export function EscrowsBySignerCards() {
           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}
         />
 
         <div className="w-full py-2 sm:py-4">
@@ -235,7 +226,7 @@ export function EscrowsBySignerCards() {
                     An error occurred while loading the information. Please try
                     again.
                   </p>
-                  <Button variant="outline" size="sm" onClick={() => refetch()}>
+                  <Button variant="outline" size="sm" onClick={handleRefresh}>
                     <RefreshCw className="h-4 w-4 mr-2" />
                     Retry
                   </Button>
@@ -258,7 +249,7 @@ export function EscrowsBySignerCards() {
                 {escrows.map((escrow) => (
                   <React.Fragment key={escrow.contractId}>
                     <Card
-                      className="w-full max-w-md mx-auto hover:shadow-lg transition-shadow duration-200"
+                      className="w-full max-w-md mx-auto hover:shadow-lg transition-shadow duration-200 cursor-pointer"
                       onClick={(e) => {
                         e.stopPropagation();
                         onCardClick(escrow);
@@ -343,9 +334,9 @@ export function EscrowsBySignerCards() {
                             <ul className="list-disc list-inside flex flex-col gap-1">
                               {escrow.milestones
                                 .slice(0, 3)
-                                .map((milestone) => (
+                                .map((milestone, index) => (
                                   <li
-                                    key={milestone.description.slice(0, 5)}
+                                    key={`milestone-${milestone.description}-${milestone.status}-${index}`}
                                     className="text-xs flex justify-between"
                                   >
                                     {milestone.description}
@@ -361,33 +352,83 @@ export function EscrowsBySignerCards() {
                                               )}
                                             </span>
 
-                                            <span
-                                              className={`bg-red-800 rounded-full h-2 w-2 ml-1 ${
-                                                milestone.flags?.disputed
-                                                  ? "block"
-                                                  : "hidden"
-                                              }`}
-                                            />
-
-                                            <span
-                                              className={`bg-green-800 rounded-full h-2 w-2 ml-1 ${
-                                                milestone.flags?.resolved ||
-                                                milestone.flags?.released
-                                                  ? "block"
-                                                  : "hidden"
-                                              }`}
-                                            />
-
-                                            <span
-                                              className={`bg-yellow-800 rounded-full h-2 w-2 ml-1 ${
-                                                milestone.flags?.approved &&
-                                                !milestone.flags?.disputed &&
-                                                !milestone.flags?.resolved &&
-                                                !milestone.flags?.released
-                                                  ? "block"
-                                                  : "hidden"
-                                              }`}
-                                            />
+                                            {milestone.flags?.disputed && (
+                                              <Tooltip>
+                                                <TooltipTrigger>
+                                                  <span
+                                                    className={`bg-red-800 rounded-full h-2 w-2 ml-1 ${
+                                                      milestone.flags?.disputed
+                                                        ? "block"
+                                                        : "hidden"
+                                                    }`}
+                                                  />
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                  Disputed
+                                                </TooltipContent>
+                                              </Tooltip>
+                                            )}
+
+                                            {milestone.flags?.resolved && (
+                                              <Tooltip>
+                                                <TooltipTrigger>
+                                                  <span
+                                                    className={`bg-green-800 rounded-full h-2 w-2 ml-1 ${
+                                                      milestone.flags?.resolved
+                                                        ? "block"
+                                                        : "hidden"
+                                                    }`}
+                                                  />
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                  Resolved
+                                                </TooltipContent>
+                                              </Tooltip>
+                                            )}
+
+                                            {milestone.flags?.released && (
+                                              <Tooltip>
+                                                <TooltipTrigger>
+                                                  <span
+                                                    className={`bg-green-800 rounded-full h-2 w-2 ml-1 ${
+                                                      milestone.flags?.released
+                                                        ? "block"
+                                                        : "hidden"
+                                                    }`}
+                                                  />
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                  Released
+                                                </TooltipContent>
+                                              </Tooltip>
+                                            )}
+
+                                            {milestone.flags?.approved &&
+                                              !milestone.flags?.disputed &&
+                                              !milestone.flags?.resolved &&
+                                              !milestone.flags?.released && (
+                                                <Tooltip>
+                                                  <TooltipTrigger>
+                                                    <span
+                                                      className={`bg-yellow-600 rounded-full h-2 w-2 ml-1 ${
+                                                        milestone.flags
+                                                          ?.approved &&
+                                                        !milestone.flags
+                                                          ?.disputed &&
+                                                        !milestone.flags
+                                                          ?.resolved &&
+                                                        !milestone.flags
+                                                          ?.released
+                                                          ? "block"
+                                                          : "hidden"
+                                                      }`}
+                                                    />
+                                                  </TooltipTrigger>
+                                                  <TooltipContent>
+                                                    Pending Release
+                                                  </TooltipContent>
+                                                </Tooltip>
+                                              )}
                                           </div>
                                         </>
                                       )}
@@ -502,14 +543,13 @@ export function EscrowsBySignerCards() {
       </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 EscrowsBySignerCards;
+};

package/templates/escrows/escrows-by-signer/cards/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);
+};