@trustless-work/blocks 0.0.1

package/templates/escrows/details/SuccessReleaseDialog.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import React, { useMemo } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  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 { CircleCheckBig } from "lucide-react";
+
+interface SuccessReleaseDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function SuccessReleaseDialog({
+  isOpen,
+  onOpenChange,
+}: SuccessReleaseDialogProps) {
+  const { selectedEscrow } = useEscrowContext();
+  const { receiverAmount, platformFeeAmount, trustlessWorkAmount } =
+    useEscrowAmountContext();
+
+  const platformFee = Number(selectedEscrow?.platformFee || 0);
+  const trustlessPercentage = 0.3;
+  const receiverPercentage = 100 - (platformFee + trustlessPercentage);
+
+  const currency = selectedEscrow?.trustline?.name ?? "";
+
+  const cards = useMemo(
+    () => [
+      {
+        type: "Platform",
+        entity: selectedEscrow?.roles?.platformAddress,
+        percentage: platformFee,
+        amount: platformFeeAmount,
+      },
+      {
+        type: "Trustless Work",
+        entity: "Private",
+        percentage: trustlessPercentage,
+        amount: trustlessWorkAmount,
+      },
+      {
+        type: "Receiver",
+        entity: selectedEscrow?.roles?.receiver,
+        percentage: receiverPercentage,
+        amount: receiverAmount,
+      },
+    ],
+    [
+      platformFee,
+      receiverPercentage,
+      trustlessPercentage,
+      platformFeeAmount,
+      trustlessWorkAmount,
+      receiverAmount,
+      selectedEscrow?.roles?.platformAddress,
+      selectedEscrow?.roles?.receiver,
+    ]
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md sm:max-w-lg md:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <CircleCheckBig className="h-5 w-5 text-green-600" />
+            Release Successful
+          </DialogTitle>
+          <DialogDescription>
+            Funds were distributed successfully to the corresponding parties.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3">
+          {cards.map((c) => (
+            <EntityCard
+              key={c.type}
+              type={c.type}
+              entity={c.entity}
+              hasPercentage
+              percentage={Number(c.percentage.toFixed(2))}
+              hasAmount
+              amount={Number(c.amount.toFixed(2))}
+              currency={currency}
+            />
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default SuccessReleaseDialog;

package/templates/escrows/details/useDetailsEscrow.ts

@@ -0,0 +1,126 @@
+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";
+
+interface EscrowDetailDialogProps {
+  setIsDialogOpen: (value: boolean) => void;
+  setSelectedEscrow: (selectedEscrow?: Escrow) => void;
+  selectedEscrow: Escrow | null;
+}
+
+const useEscrowDetailDialog = ({
+  setIsDialogOpen,
+  setSelectedEscrow,
+  selectedEscrow,
+}: EscrowDetailDialogProps) => {
+  const { walletAddress } = useWalletContext();
+  const { userRolesInEscrow, setUserRolesInEscrow } = useEscrowContext();
+
+  const { setAmounts } = useEscrowAmountContext();
+
+  const fetchingRef = useRef(false);
+  const lastFetchKey = useRef("");
+  const [evidenceVisibleMap, setEvidenceVisibleMap] = useState<{
+    [key: number]: boolean;
+  }>({});
+
+  const totalAmount = Number(selectedEscrow?.amount || 0);
+  const platformFeePercentage = Number(selectedEscrow?.platformFee || 0);
+
+  const handleClose = useCallback(() => {
+    setIsDialogOpen(false);
+    setSelectedEscrow(undefined);
+  }, [setIsDialogOpen, setSelectedEscrow]);
+
+  const areAllMilestonesApproved =
+    selectedEscrow?.milestones?.every((milestone) => {
+      if ("flags" in milestone) {
+        return milestone.flags?.approved === true;
+      }
+      return "approved" in milestone && milestone.approved === true;
+    }) ?? false;
+
+  const fetchUserRoleInEscrow = useCallback(async () => {
+    if (!selectedEscrow?.contractId || !walletAddress) return null;
+
+    const roleMappings = [
+      { name: "approver", address: selectedEscrow.roles.approver },
+      {
+        name: "serviceProvider",
+        address: selectedEscrow.roles.serviceProvider,
+      },
+      {
+        name: "platformAddress",
+        address: selectedEscrow.roles.platformAddress,
+      },
+      { name: "releaseSigner", address: selectedEscrow.roles.releaseSigner },
+      {
+        name: "disputeResolver",
+        address: selectedEscrow.roles.disputeResolver,
+      },
+      { name: "receiver", address: selectedEscrow.roles.receiver },
+    ];
+
+    const userRoles = roleMappings
+      .filter((role) => role.address === walletAddress)
+      .map((role) => role.name);
+
+    return userRoles;
+  }, [selectedEscrow?.contractId, walletAddress]);
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | undefined = undefined;
+    let isMounted = true;
+
+    const fetchRoles = async () => {
+      if (!selectedEscrow || !walletAddress || fetchingRef.current) return;
+
+      const fetchKey = `${selectedEscrow.contractId}-${walletAddress}`;
+      if (fetchKey === lastFetchKey.current) return;
+
+      try {
+        fetchingRef.current = true;
+        lastFetchKey.current = fetchKey;
+        const roleData = await fetchUserRoleInEscrow();
+        if (isMounted && roleData) {
+          setUserRolesInEscrow(roleData);
+        }
+      } catch (error) {
+        console.error("[EscrowDetailDialog] Error fetching roles:", error);
+      } finally {
+        fetchingRef.current = false;
+      }
+    };
+
+    timeoutId = setTimeout(fetchRoles, 100);
+
+    return () => {
+      isMounted = false;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      fetchingRef.current = false;
+    };
+  }, [
+    selectedEscrow,
+    fetchUserRoleInEscrow,
+    setUserRolesInEscrow,
+    walletAddress,
+  ]);
+
+  useEffect(() => {
+    setAmounts(totalAmount, platformFeePercentage);
+  }, [totalAmount, platformFeePercentage, setAmounts]);
+
+  return {
+    handleClose,
+    setEvidenceVisibleMap,
+    evidenceVisibleMap,
+    areAllMilestonesApproved,
+    userRolesInEscrow,
+  };
+};
+
+export default useEscrowDetailDialog;

package/templates/escrows/escrow-context/EscrowAmountProvider.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import * as React from "react";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  ReactNode,
+  useCallback,
+} from "react";
+
+export type AmountEscrowStore = {
+  receiverAmount: number;
+  platformFeeAmount: number;
+  trustlessWorkAmount: number;
+  receiverResolve: number;
+  approverResolve: number;
+  amountMoonpay: number;
+  setAmounts: (totalAmount: number, platformFee: number) => void;
+  setReceiverResolve: (value: number) => void;
+  setApproverResolve: (value: number) => void;
+  setAmountMoonpay: (value: number) => void;
+};
+
+const EscrowAmountContext = createContext<AmountEscrowStore | undefined>(
+  undefined
+);
+
+export const EscrowAmountProvider = ({ children }: { children: ReactNode }) => {
+  const [receiverAmount, setReceiverAmount] = useState(0);
+  const [platformFeeAmount, setPlatformFeeAmount] = useState(0);
+  const [trustlessWorkAmount, setTrustlessWorkAmount] = useState(0);
+  const [receiverResolve, setReceiverResolve] = useState(0);
+  const [approverResolve, setApproverResolve] = useState(0);
+  const [amountMoonpay, setAmountMoonpay] = useState(0);
+
+  const setAmounts: AmountEscrowStore["setAmounts"] = useCallback(
+    (totalAmount, platformFee) => {
+      const trustlessPercentage = 0.3;
+      const receiverPercentage = 100 - (trustlessPercentage + platformFee);
+
+      setReceiverAmount((totalAmount * receiverPercentage) / 100);
+      setPlatformFeeAmount((totalAmount * platformFee) / 100);
+      setTrustlessWorkAmount((totalAmount * trustlessPercentage) / 100);
+    },
+    []
+  );
+
+  const value = useMemo<AmountEscrowStore>(
+    () => ({
+      receiverAmount,
+      platformFeeAmount,
+      trustlessWorkAmount,
+      receiverResolve,
+      approverResolve,
+      amountMoonpay,
+      setAmounts,
+      setReceiverResolve,
+      setApproverResolve,
+      setAmountMoonpay,
+    }),
+    [
+      receiverAmount,
+      platformFeeAmount,
+      trustlessWorkAmount,
+      receiverResolve,
+      approverResolve,
+      amountMoonpay,
+    ]
+  );
+
+  return (
+    <EscrowAmountContext.Provider value={value}>
+      {children}
+    </EscrowAmountContext.Provider>
+  );
+};
+
+export function useEscrowAmountContext() {
+  const ctx = useContext(EscrowAmountContext);
+  if (!ctx) {
+    throw new Error("useEscrowAmount must be used within EscrowAmountProvider");
+  }
+  return ctx;
+}

package/templates/escrows/escrow-context/EscrowDialogsProvider.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import * as React from "react";
+import { createContext, useContext, useMemo, useState } from "react";
+
+export type DialogState = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+export type DialogStates = {
+  second: DialogState;
+  completeMilestone: DialogState;
+  qr: DialogState;
+  resolveDispute: DialogState;
+  editMilestone: DialogState;
+  editEntities: DialogState;
+  editBasicProperties: DialogState;
+  successRelease: DialogState;
+  successResolveDispute: DialogState;
+};
+
+export type StatusStates = {};
+
+type EscrowDialogsContextType = DialogStates & StatusStates;
+
+const EscrowDialogsContext = createContext<
+  EscrowDialogsContextType | undefined
+>(undefined);
+
+export function EscrowDialogsProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [secondOpen, setSecondOpen] = useState(false);
+  const [completeMilestoneOpen, setCompleteMilestoneOpen] = useState(false);
+  const [qrOpen, setQrOpen] = useState(false);
+  const [resolveDisputeOpen, setResolveDisputeOpen] = useState(false);
+  const [editMilestoneOpen, setEditMilestoneOpen] = useState(false);
+  const [editEntitiesOpen, setEditEntitiesOpen] = useState(false);
+  const [editBasicPropertiesOpen, setEditBasicPropertiesOpen] = useState(false);
+  const [successReleaseOpen, setSuccessReleaseOpen] = useState(false);
+  const [successResolveDisputeOpen, setSuccessResolveDisputeOpen] =
+    useState(false);
+
+  const value = useMemo<EscrowDialogsContextType>(
+    () => ({
+      second: { isOpen: secondOpen, setIsOpen: setSecondOpen },
+      completeMilestone: {
+        isOpen: completeMilestoneOpen,
+        setIsOpen: setCompleteMilestoneOpen,
+      },
+      qr: { isOpen: qrOpen, setIsOpen: setQrOpen },
+      resolveDispute: {
+        isOpen: resolveDisputeOpen,
+        setIsOpen: setResolveDisputeOpen,
+      },
+      editMilestone: {
+        isOpen: editMilestoneOpen,
+        setIsOpen: setEditMilestoneOpen,
+      },
+      editEntities: {
+        isOpen: editEntitiesOpen,
+        setIsOpen: setEditEntitiesOpen,
+      },
+      editBasicProperties: {
+        isOpen: editBasicPropertiesOpen,
+        setIsOpen: setEditBasicPropertiesOpen,
+      },
+      successRelease: {
+        isOpen: successReleaseOpen,
+        setIsOpen: setSuccessReleaseOpen,
+      },
+      successResolveDispute: {
+        isOpen: successResolveDisputeOpen,
+        setIsOpen: setSuccessResolveDisputeOpen,
+      },
+    }),
+    [
+      secondOpen,
+      completeMilestoneOpen,
+      qrOpen,
+      resolveDisputeOpen,
+      editMilestoneOpen,
+      editEntitiesOpen,
+      editBasicPropertiesOpen,
+      successReleaseOpen,
+      successResolveDisputeOpen,
+    ]
+  );
+
+  return (
+    <EscrowDialogsContext.Provider value={value}>
+      {children}
+    </EscrowDialogsContext.Provider>
+  );
+}
+
+export function useEscrowDialogs() {
+  const ctx = useContext(EscrowDialogsContext);
+  if (!ctx) {
+    throw new Error(
+      "useEscrowDialogs must be used within EscrowDialogsProvider"
+    );
+  }
+  return ctx;
+}

package/templates/escrows/escrow-context/EscrowProvider.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import * as React from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  ReactNode,
+  useCallback,
+} from "react";
+import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+
+type EscrowContextType = {
+  selectedEscrow: Escrow | null;
+  hasEscrow: boolean;
+  userRolesInEscrow: string[];
+  updateEscrow: (
+    updater: Partial<Escrow> | ((previous: Escrow) => Escrow)
+  ) => void;
+  setEscrowField: <K extends keyof Escrow>(key: K, value: Escrow[K]) => void;
+  clearEscrow: () => void;
+  setSelectedEscrow: (escrow?: Escrow) => void;
+  setUserRolesInEscrow: (roles: string[]) => void;
+};
+
+const EscrowContext = createContext<EscrowContextType | undefined>(undefined);
+
+const LOCAL_STORAGE_KEY = "selectedEscrow";
+
+export const EscrowProvider = ({ children }: { children: ReactNode }) => {
+  const [selectedEscrow, setSelectedEscrowState] = useState<Escrow | null>(
+    null
+  );
+  const [userRolesInEscrow, setUserRolesInEscrowState] = useState<string[]>([]);
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(LOCAL_STORAGE_KEY);
+      if (stored) {
+        const parsed: Escrow = JSON.parse(stored);
+        setSelectedEscrowState(parsed);
+      }
+    } catch (_err) {
+      // ignore malformed localStorage content
+    }
+  }, []);
+
+  const persist = (value: Escrow | null) => {
+    if (value) {
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(value));
+    } else {
+      localStorage.removeItem(LOCAL_STORAGE_KEY);
+    }
+  };
+
+  const updateEscrow: EscrowContextType["updateEscrow"] = (updater) => {
+    setSelectedEscrowState((current) => {
+      if (!current) return current;
+      const next =
+        typeof updater === "function"
+          ? updater(current)
+          : { ...current, ...updater };
+      persist(next);
+      return next;
+    });
+  };
+
+  const setEscrowField: EscrowContextType["setEscrowField"] = (key, value) => {
+    setSelectedEscrowState((current) => {
+      if (!current) return current;
+      const next = { ...current, [key]: value } as Escrow;
+      persist(next);
+      return next;
+    });
+  };
+
+  const clearEscrow = () => {
+    setSelectedEscrowState(null);
+    persist(null);
+  };
+
+  const setUserRolesInEscrow = useCallback((roles: string[]) => {
+    setUserRolesInEscrowState((prev) => {
+      // Avoid unnecessary updates to prevent re-renders
+      if (
+        prev.length === roles.length &&
+        prev.every((r, i) => r === roles[i])
+      ) {
+        return prev;
+      }
+      return roles;
+    });
+  }, []);
+
+  const hasEscrow = useMemo(() => Boolean(selectedEscrow), [selectedEscrow]);
+
+  return (
+    <EscrowContext.Provider
+      value={{
+        selectedEscrow,
+        hasEscrow,
+        updateEscrow,
+        setEscrowField,
+        clearEscrow,
+        setSelectedEscrow: (value?: Escrow) =>
+          setSelectedEscrowState(value ?? null),
+        setUserRolesInEscrow,
+        userRolesInEscrow,
+      }}
+    >
+      {children}
+    </EscrowContext.Provider>
+  );
+};
+
+export const useEscrowContext = () => {
+  const context = useContext(EscrowContext);
+  if (!context) {
+    throw new Error("useEscrowContext must be used within EscrowProvider");
+  }
+  return context;
+};