@trustless-work/blocks 0.0.7 → 0.0.8

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,
@@ -23,10 +23,13 @@ import {
 } from "lucide-react";
 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";
+import { EscrowDetailDialog } from "../details/EscrowDetailDialog";
+import {
+  formatCurrency,
+  formatTimestamp,
+} from "../../../helpers/format.helper";
 
-export function EscrowsBySignerCards() {
+export const EscrowsBySignerCards = () => {
   const {
     walletAddress,
     data,
@@ -74,10 +77,6 @@ export function EscrowsBySignerCards() {
     void refetch();
   }, [refetch]);
 
-  const formatCurrency = (value: number, currency: string) => {
-    return `${currency} ${value.toFixed(2)}`;
-  };
-
   function allMilestonesReleasedOrResolved(
     milestones: MultiReleaseMilestone[]
   ) {
@@ -120,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[] = React.useMemo(() => ["approver"] as Role[], []);
-
   const escrows: Escrow[] = data ?? [];
 
   return (
@@ -262,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);
@@ -347,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}
@@ -365,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>
                                         </>
                                       )}
@@ -508,7 +545,6 @@ export function EscrowsBySignerCards() {
       {/* Dialog */}
       {dialogStates.second.isOpen ? (
         <EscrowDetailDialog
-          activeRole={activeRole}
           isDialogOpen={dialogStates.second.isOpen}
           setIsDialogOpen={dialogStates.second.setIsOpen}
           setSelectedEscrow={setSelectedEscrow}
@@ -516,6 +552,4 @@ export function EscrowsBySignerCards() {
       ) : null}
     </>
   );
-}
-
-export default React.memo(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);
+};

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 "@/components/tw-blocks/providers/EscrowDialogsProvider";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
-import EscrowDetailDialog from "../../escrows-by-role/details/EscrowDetailDialog";
+import { EscrowDetailDialog } from "../details/EscrowDetailDialog";
 import { formatTimestamp } from "../../../helpers/format.helper";
 
-export function EscrowsBySignerTable() {
+export const EscrowsBySignerTable = () => {
   const {
     walletAddress,
     data,
@@ -203,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[] = React.useMemo(() => ["approver"] as Role[], []);
-
   const escrows = data ?? [];
 
   return (
@@ -261,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
@@ -375,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}>
@@ -426,7 +413,6 @@ export function EscrowsBySignerTable() {
       {/* Dialog */}
       {dialogStates.second.isOpen ? (
         <EscrowDetailDialog
-          activeRole={activeRole}
           isDialogOpen={dialogStates.second.isOpen}
           setIsDialogOpen={dialogStates.second.setIsOpen}
           setSelectedEscrow={setSelectedEscrow}
@@ -434,6 +420,4 @@ export function EscrowsBySignerTable() {
       ) : null}
     </>
   );
-}
-
-export default React.memo(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/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>
+  );
+};