@trustless-work/blocks 0.0.5 → 0.0.7

package/package.json

@@ -1,44 +1,44 @@
-{
-  "name": "@trustless-work/blocks",
-  "version": "0.0.5",
-  "author": "Trustless Work",
-  "keywords": [
-    "react",
-    "hooks",
-    "trustless work",
-    "escrow",
-    "api",
-    "blocks",
-    "ui",
-    "components",
-    "helpers",
-    "templates",
-    "blockchain"
-  ],
-  "bin": {
-    "trustless-work": "bin/index.js"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "node -e \"console.log('Skipping build: no src to bundle')\"",
-    "prepublishOnly": "npm run build"
-  },
-  "description": "",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Trustless-Work/react-library-trustless-work-blocks.git"
-  },
-  "files": [
-    "bin",
-    "templates",
-    "README.md"
-  ],
-  "license": "MIT",
-  "engines": {
-    "node": ">=18.17"
-  }
-}
+{
+  "name": "@trustless-work/blocks",
+  "version": "0.0.7",
+  "author": "Trustless Work",
+  "keywords": [
+    "react",
+    "hooks",
+    "trustless work",
+    "escrow",
+    "api",
+    "blocks",
+    "ui",
+    "components",
+    "helpers",
+    "templates",
+    "blockchain"
+  ],
+  "bin": {
+    "trustless-work": "bin/index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "node -e \"console.log('Skipping build: no src to bundle')\"",
+    "prepublishOnly": "npm run build"
+  },
+  "description": "",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Trustless-Work/react-library-trustless-work-blocks.git"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "README.md"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.17"
+  }
+}

package/templates/escrows/details/EscrowDetailDialog.tsx

@@ -12,7 +12,7 @@ import useEscrowDetailDialog from "./useDetailsEscrow";
 import Link from "next/link";
 import { Card } from "__UI_BASE__/card";
 import { Info, Users, ListChecks } from "lucide-react";
-import { useEscrowDialogs } from "../../escrow-context/EscrowDialogsProvider";
+import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
 import type {
   GetEscrowsFromIndexerResponse as Escrow,
   Role,
@@ -21,7 +21,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "__UI_BASE__/tabs";
 import { Milestones } from "./Milestones";
 import { Entities } from "./Entities";
 import { GeneralInformation } from "./GeneralInformation";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import SuccessReleaseDialog from "./SuccessReleaseDialog";
 
 interface EscrowDetailDialogProps {
@@ -151,4 +151,4 @@ const EscrowDetailDialog = ({
   );
 };
 
-export default EscrowDetailDialog;
+export default React.memo(EscrowDetailDialog);

package/templates/escrows/details/GeneralInformation.tsx

@@ -19,12 +19,12 @@ import { Actions, roleActions } from "./Actions";
 import type {
   DialogStates,
   StatusStates,
-} from "../../escrow-context/EscrowDialogsProvider";
+} from "@/components/tw-blocks/providers/EscrowDialogsProvider";
 import {
   GetEscrowsFromIndexerResponse,
   Role,
 } from "@trustless-work/escrow/types";
-import { useEscrowAmountContext } from "../../escrow-context/EscrowAmountProvider";
+import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 import { StatisticsCard } from "./StatisticsCard";
 import {
   formatAddress,

package/templates/escrows/details/SuccessReleaseDialog.tsx

@@ -8,10 +8,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "__UI_BASE__/dialog";
-import { Card } from "__UI_BASE__/card";
 import EntityCard from "./EntityCard";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
-import { useEscrowAmountContext } from "../../escrow-context/EscrowAmountProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 import { CircleCheckBig } from "lucide-react";
 
 interface SuccessReleaseDialogProps {

package/templates/escrows/details/useDetailsEscrow.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
 import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
-import { useEscrowAmountContext } from "../../escrow-context/EscrowAmountProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 
 interface EscrowDetailDialogProps {
   setIsDialogOpen: (value: boolean) => void;

package/templates/escrows/escrows-by-role/cards/EscrowsCards.tsx

@@ -22,8 +22,8 @@ import {
 import { useEscrowsByRole } from "../useEscrowsByRole.shared";
 import Filters from "./Filters";
 import EscrowDetailDialog from "../details/EscrowDetailDialog";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
-import { useEscrowDialogs } from "../../escrow-context/EscrowDialogsProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
 import {
   formatCurrency,
   formatTimestamp,
@@ -75,6 +75,17 @@ export function EscrowsByRoleCards() {
 
   const dialogStates = useEscrowDialogs();
 
+  const handleRefresh = React.useCallback(() => {
+    void refetch();
+  }, [refetch]);
+
+  const setRoleStable = React.useCallback(
+    (v: Role | undefined) => {
+      if (v) setRole(v);
+    },
+    [setRole]
+  );
+
   function allMilestonesReleasedOrResolved(
     milestones: MultiReleaseMilestone[]
   ) {
@@ -119,7 +130,20 @@ export function EscrowsByRoleCards() {
     dialogStates.second.setIsOpen(true);
   };
 
-  const activeRole: Role[] = role.split(",") as Role[];
+  /**
+   * 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[] = React.useMemo(
+    () => role.split(",") as Role[],
+    [role]
+  );
 
   return (
     <>
@@ -140,19 +164,19 @@ export function EscrowsByRoleCards() {
           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}
         />
 
         <div className="w-full py-2 sm:py-4">
@@ -492,14 +516,16 @@ export function EscrowsByRoleCards() {
       </div>
 
       {/* Dialog */}
-      <EscrowDetailDialog
-        activeRole={activeRole}
-        isDialogOpen={dialogStates.second.isOpen}
-        setIsDialogOpen={dialogStates.second.setIsOpen}
-        setSelectedEscrow={setSelectedEscrow}
-      />
+      {dialogStates.second.isOpen ? (
+        <EscrowDetailDialog
+          activeRole={activeRole}
+          isDialogOpen={dialogStates.second.isOpen}
+          setIsDialogOpen={dialogStates.second.setIsOpen}
+          setSelectedEscrow={setSelectedEscrow}
+        />
+      ) : null}
     </>
   );
 }
 
-export default EscrowsByRoleCards;
+export default React.memo(EscrowsByRoleCards);

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

@@ -25,8 +25,8 @@ import {
 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 { 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";
 
@@ -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,7 +213,21 @@ export function EscrowsByRoleTable() {
     enableSortingRemoval: true,
   });
 
-  const activeRole: Role[] = role.split(",") as Role[];
+  /**
+   * 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[] = React.useMemo(
+    () => role.split(",") as Role[],
+    [role]
+  );
+
   const escrows = data ?? [];
 
   return (
@@ -224,19 +249,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">
@@ -335,7 +360,7 @@ export function EscrowsByRoleTable() {
                         <Button
                           variant="outline"
                           size="sm"
-                          onClick={() => refetch()}
+                          onClick={handleRefresh}
                         >
                           <RefreshCw className="h-4 w-4 mr-2" />
                           Retry
@@ -414,14 +439,16 @@ export function EscrowsByRoleTable() {
       </div>
 
       {/* Dialog */}
-      <EscrowDetailDialog
-        activeRole={activeRole}
-        isDialogOpen={dialogStates.second.isOpen}
-        setIsDialogOpen={dialogStates.second.setIsOpen}
-        setSelectedEscrow={setSelectedEscrow}
-      />
+      {dialogStates.second.isOpen ? (
+        <EscrowDetailDialog
+          activeRole={activeRole}
+          isDialogOpen={dialogStates.second.isOpen}
+          setIsDialogOpen={dialogStates.second.setIsOpen}
+          setSelectedEscrow={setSelectedEscrow}
+        />
+      ) : null}
     </>
   );
 }
 
-export default EscrowsByRoleTable;
+export default React.memo(EscrowsByRoleTable);

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";
@@ -234,6 +242,12 @@ export function useEscrowsByRole() {
     dateRange,
   ]);
 
+  /**
+   * Call the query to get the escrows from the Trustless Work Indexer
+   *
+   * @param params - The parameters for the query
+   * @returns The query result
+   */
   const query = useEscrowsByRoleQuery(params);
   const nextPageQuery = useEscrowsByRoleQuery({ ...params, page: page + 1 });
 

package/templates/escrows/escrows-by-signer/cards/EscrowsCards.tsx

@@ -21,8 +21,8 @@ import {
   RefreshCw,
   FileX,
 } from "lucide-react";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
-import { useEscrowDialogs } from "../../escrow-context/EscrowDialogsProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
 import EscrowDetailDialog from "../../escrows-by-role/details/EscrowDetailDialog";
 import { formatTimestamp } from "../../../helpers/format.helper";
 
@@ -70,6 +70,10 @@ export function EscrowsBySignerCards() {
 
   const dialogStates = useEscrowDialogs();
 
+  const handleRefresh = React.useCallback(() => {
+    void refetch();
+  }, [refetch]);
+
   const formatCurrency = (value: number, currency: string) => {
     return `${currency} ${value.toFixed(2)}`;
   };
@@ -116,7 +120,18 @@ export function EscrowsBySignerCards() {
     dialogStates.second.setIsOpen(true);
   };
 
-  const activeRole: Role[] = ["approver"];
+  /**
+   * 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[] = React.useMemo(() => ["approver"] as Role[], []);
+
   const escrows: Escrow[] = data ?? [];
 
   return (
@@ -137,18 +152,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">
@@ -224,7 +239,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>
@@ -491,14 +506,16 @@ export function EscrowsBySignerCards() {
       </div>
 
       {/* Dialog */}
-      <EscrowDetailDialog
-        activeRole={activeRole}
-        isDialogOpen={dialogStates.second.isOpen}
-        setIsDialogOpen={dialogStates.second.setIsOpen}
-        setSelectedEscrow={setSelectedEscrow}
-      />
+      {dialogStates.second.isOpen ? (
+        <EscrowDetailDialog
+          activeRole={activeRole}
+          isDialogOpen={dialogStates.second.isOpen}
+          setIsDialogOpen={dialogStates.second.setIsOpen}
+          setSelectedEscrow={setSelectedEscrow}
+        />
+      ) : null}
     </>
   );
 }
 
-export default EscrowsBySignerCards;
+export default React.memo(EscrowsBySignerCards);