@trustless-work/blocks 0.0.1

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@trustless-work/blocks",
+  "version": "0.0.1",
+  "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/deps.json

@@ -0,0 +1,29 @@
+{
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.53.0",
+    "zod": "^3.23.8",
+    "@trustless-work/escrow": "^2.0.2",
+    "@tanstack/react-query": "^5.75.0",
+    "@tanstack/react-query-devtools": "^5.75.0",
+    "tailwindcss": "^3.3.3",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
+    "@hookform/resolvers": "^3.10.0",
+    "@creit.tech/stellar-wallets-kit": "^1.8.0",
+    "axios": "^1.7.9",
+    "@tanstack/react-table": "^8.21.3",
+    "react-day-picker": "^9.5.0"
+  },
+  "devDependencies": {
+    "postcss": "^8",
+    "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5",
+    "@types/next": "^8.0.7",
+    "@types/node": "^20",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18"
+  }
+}

package/templates/escrows/details/Actions.tsx

@@ -0,0 +1,149 @@
+import {
+  DollarSign,
+  CheckCircle,
+  CheckSquare,
+  AlertTriangle,
+  Edit,
+  Scale,
+  Unlock,
+  Wallet,
+  Settings,
+  Briefcase,
+} from "lucide-react";
+import {
+  GetEscrowsFromIndexerResponse as Escrow,
+  Role,
+} from "@trustless-work/escrow/types";
+import DisputeEscrowButton from "../../single-release/dispute-escrow/button/DisputeEscrow";
+import ResolveDisputeDialog from "../../single-release/resolve-dispute/dialog/ResolveDispute";
+import ReleaseEscrowButton from "../../single-release/release-escrow/button/ReleaseEscrow";
+import FundEscrowDialog from "../../single-release/fund-escrow/dialog/FundEscrow";
+import UpdateEscrowDialog from "../../single-release/update-escrow/dialog/UpdateEscrow";
+
+interface ActionsProps {
+  selectedEscrow: Escrow;
+  userRolesInEscrow: string[];
+  areAllMilestonesApproved: boolean;
+  activeRole: Role[];
+}
+
+export const roleActions: {
+  role: Role;
+  actions: string[];
+  icon: React.ReactNode;
+  color: string;
+}[] = [
+  {
+    role: "signer",
+    actions: ["fundEscrow"],
+    icon: <Wallet className="h-6 w-6 text-primary" />,
+    color: "",
+  },
+  {
+    role: "approver",
+    actions: ["fundEscrow", "approveMilestone", "startDispute"],
+    icon: <CheckCircle className="h-6 w-6 text-primary" />,
+    color: "0",
+  },
+  {
+    role: "serviceProvider",
+    actions: ["fundEscrow", "completeMilestone", "startDispute"],
+    icon: <Briefcase className="h-6 w-6 text-primary" />,
+    color: "0",
+  },
+  {
+    role: "disputeResolver",
+    actions: ["fundEscrow", "resolveDispute"],
+    icon: <Scale className="h-6 w-6 text-primary" />,
+    color: "00",
+  },
+  {
+    role: "releaseSigner",
+    actions: ["fundEscrow", "releasePayment"],
+    icon: <Unlock className="h-6 w-6 text-primary" />,
+    color: "",
+  },
+  {
+    role: "platformAddress",
+    actions: ["fundEscrow", "editEscrow"],
+    icon: <Settings className="h-6 w-6 text-primary" />,
+    color: "0",
+  },
+  {
+    role: "receiver",
+    actions: ["fundEscrow"],
+    icon: <DollarSign className="h-6 w-6 text-primary" />,
+    color: "",
+  },
+];
+
+export const actionIcons: Record<string, React.ReactNode> = {
+  fundEscrow: <DollarSign className="h-6 w-6 text-primary/60" />,
+  approveMilestone: <CheckCircle className="h-6 w-6 text-primary/60" />,
+  completeMilestone: <CheckSquare className="h-6 w-6 text-primary/60" />,
+  startDispute: <AlertTriangle className="h-6 w-6 text-primary/60" />,
+  resolveDispute: <Scale className="h-6 w-6 text-primary/60" />,
+  releasePayment: <Unlock className="h-6 w-6 text-primary/60" />,
+  editEscrow: <Edit className="h-6 w-6 text-primary/60" />,
+};
+
+export const Actions = ({
+  selectedEscrow,
+  userRolesInEscrow,
+  areAllMilestonesApproved,
+  activeRole,
+}: ActionsProps) => {
+  const shouldShowEditButton =
+    userRolesInEscrow.includes("platformAddress") &&
+    !selectedEscrow?.flags?.disputed &&
+    !selectedEscrow?.flags?.resolved &&
+    !selectedEscrow?.flags?.released &&
+    activeRole.includes("platformAddress");
+
+  const shouldShowDisputeButton =
+    selectedEscrow.type === "single-release" &&
+    (userRolesInEscrow.includes("approver") ||
+      userRolesInEscrow.includes("serviceProvider")) &&
+    (activeRole.includes("approver") ||
+      activeRole.includes("serviceProvider")) &&
+    !selectedEscrow?.flags?.disputed &&
+    !selectedEscrow?.flags?.resolved;
+
+  const shouldShowResolveButton =
+    selectedEscrow.type === "single-release" &&
+    userRolesInEscrow.includes("disputeResolver") &&
+    activeRole.includes("disputeResolver") &&
+    !selectedEscrow?.flags?.resolved &&
+    selectedEscrow?.flags?.disputed;
+
+  const shouldShowReleaseFundsButton =
+    selectedEscrow.type === "single-release" &&
+    areAllMilestonesApproved &&
+    userRolesInEscrow.includes("releaseSigner") &&
+    !selectedEscrow.flags?.released &&
+    activeRole.includes("releaseSigner");
+
+  const hasConditionalButtons =
+    shouldShowEditButton ||
+    shouldShowDisputeButton ||
+    shouldShowResolveButton ||
+    shouldShowReleaseFundsButton;
+
+  return (
+    <div className="flex items-start justify-start flex-col gap-2 w-full">
+      {hasConditionalButtons && (
+        <div className="flex flex-col sm:flex-row gap-2 w-full">
+          {shouldShowEditButton && <UpdateEscrowDialog />}
+
+          {shouldShowDisputeButton && <DisputeEscrowButton />}
+
+          {shouldShowResolveButton && <ResolveDisputeDialog />}
+
+          {shouldShowReleaseFundsButton && <ReleaseEscrowButton />}
+        </div>
+      )}
+
+      <FundEscrowDialog />
+    </div>
+  );
+};

package/templates/escrows/details/Entities.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+import EntityCard from "./EntityCard";
+
+interface EntitiesProps {
+  selectedEscrow: Escrow;
+}
+
+export const Entities = ({ selectedEscrow }: EntitiesProps) => {
+  return (
+    <>
+      <div className="flex justify-between items-center mb-6">
+        <div className="flex items-center gap-2">
+          <h3 className="text-lg font-semibold">Entities</h3>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <EntityCard
+          type="approver"
+          entity={selectedEscrow.roles?.approver}
+          inDispute={selectedEscrow.flags?.disputed}
+        />
+        <EntityCard
+          type="serviceProvider"
+          entity={selectedEscrow.roles?.serviceProvider}
+          inDispute={selectedEscrow.flags?.disputed}
+        />
+        <EntityCard
+          type="disputeResolver"
+          entity={selectedEscrow.roles?.disputeResolver}
+        />
+        <EntityCard
+          type="platformAddress"
+          entity={selectedEscrow.roles?.platformAddress}
+          hasPercentage
+          percentage={selectedEscrow.platformFee}
+        />
+        <EntityCard
+          type="releaseSigner"
+          entity={selectedEscrow.roles?.releaseSigner}
+        />
+        <EntityCard type="receiver" entity={selectedEscrow.roles?.receiver} />
+      </div>
+    </>
+  );
+};

package/templates/escrows/details/EntityCard.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React from "react";
+import { Avatar, AvatarFallback } from "__UI_BASE__/avatar";
+import { Card, CardContent } from "__UI_BASE__/card";
+import { Badge } from "__UI_BASE__/badge";
+import { Separator } from "__UI_BASE__/separator";
+import Link from "next/link";
+import {
+  formatAddress,
+  formatRole,
+} from "@/components/tw-blocks/helpers/format.helper";
+
+interface EntityCardProps {
+  entity?: string;
+  type: string;
+  hasPercentage?: boolean;
+  percentage?: number;
+  hasAmount?: boolean;
+  amount?: number;
+  currency?: string;
+  inDispute?: boolean;
+}
+
+const EntityCard = ({
+  entity,
+  type,
+  hasPercentage,
+  percentage,
+  hasAmount,
+  amount,
+  currency,
+  inDispute,
+}: EntityCardProps) => {
+  return (
+    <Card className="w-full overflow-hidden transition-all duration-200 hover:shadow-md py-2">
+      <Link href={`/dashboard/public-profile/${entity}`} target="_blank">
+        <CardContent className="p-3">
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex w-2/4 items-center justify-between gap-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                {formatRole(type)}
+              </span>
+              {inDispute && <Badge variant="destructive">In Dispute</Badge>}
+            </div>
+
+            <div className="flex w-2/4 items-center justify-end gap-2 text-xs">
+              {hasPercentage && (
+                <div className="flex items-center">
+                  <span className="text-muted-foreground mr-1">Fee:</span>
+                  <span className="font-medium text-emerald-600">
+                    {percentage}%
+                  </span>
+                </div>
+              )}
+              {hasAmount && (
+                <div className="flex items-center">
+                  <span className="text-muted-foreground mr-1">Amount:</span>
+                  <span className="font-medium">
+                    {currency ? `${currency} ` : ""}
+                    {typeof amount === "number" ? amount.toFixed(2) : "-"}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <Separator className="my-2" />
+
+          <div className="flex items-center gap-3 py-1">
+            <Avatar className="h-9 w-9 rounded-md border">
+              <AvatarFallback className="rounded-md bg-background text-foreground">
+                {entity?.[0] || "?"}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex flex-col">
+              {entity && (
+                <span className="text-sm font-medium leading-tight">
+                  {formatAddress(entity)}
+                </span>
+              )}
+              {entity && (
+                <span className="text-xs text-muted-foreground">
+                  {type === "Trustless Work"
+                    ? "Private"
+                    : formatAddress(entity)}
+                </span>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Link>
+    </Card>
+  );
+};
+
+export default EntityCard;

package/templates/escrows/details/EscrowDetailDialog.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "__UI_BASE__/dialog";
+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 type {
+  GetEscrowsFromIndexerResponse as Escrow,
+  Role,
+} from "@trustless-work/escrow/types";
+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 SuccessReleaseDialog from "./SuccessReleaseDialog";
+
+interface EscrowDetailDialogProps {
+  isDialogOpen: boolean;
+  activeRole: Role[];
+  setIsDialogOpen: (value: boolean) => void;
+  setSelectedEscrow: (selectedEscrow?: Escrow) => void;
+}
+
+const EscrowDetailDialog = ({
+  isDialogOpen,
+  setIsDialogOpen,
+  setSelectedEscrow,
+  activeRole,
+}: EscrowDetailDialogProps) => {
+  const { selectedEscrow } = useEscrowContext();
+  const dialogStates = useEscrowDialogs();
+  const [activeTab, setActiveTab] = useState("general");
+
+  const {
+    handleClose,
+    setEvidenceVisibleMap,
+    evidenceVisibleMap,
+    areAllMilestonesApproved,
+    userRolesInEscrow,
+  } = useEscrowDetailDialog({
+    setIsDialogOpen,
+    setSelectedEscrow,
+    selectedEscrow,
+  });
+
+  const stellarExplorerUrl = `https://stellar.expert/explorer/testnet/contract/${selectedEscrow?.contractId}`;
+
+  if (!isDialogOpen || !selectedEscrow) return null;
+  return (
+    <>
+      <Dialog open={isDialogOpen} onOpenChange={handleClose}>
+        <DialogContent className="w-11/12 sm:w-3/4 h-[95vh] overflow-hidden flex flex-col !max-w-none">
+          <DialogHeader className="flex-shrink-0">
+            <div className="w-full">
+              <div className="flex flex-col gap-2">
+                <div className="w-full">
+                  <Link
+                    href={stellarExplorerUrl}
+                    target="_blank"
+                    className="hover:underline"
+                  >
+                    <DialogTitle className="text-xl">
+                      {selectedEscrow.title}
+                    </DialogTitle>
+                  </Link>
+                </div>
+
+                <DialogDescription>
+                  {selectedEscrow.description}
+                </DialogDescription>
+              </div>
+            </div>
+          </DialogHeader>
+
+          <Tabs
+            defaultValue="general"
+            className="w-full"
+            value={activeTab}
+            onValueChange={setActiveTab}
+          >
+            <TabsList className="grid w-full grid-cols-3 mb-6 bg-muted/50">
+              <TabsTrigger
+                value="general"
+                className="flex items-center gap-2 data-[state=active]:bg-background"
+              >
+                <Info className="h-4 w-4 hidden md:block" />
+                <span>Information</span>
+              </TabsTrigger>
+              <TabsTrigger
+                value="entities"
+                className="flex items-center gap-2 data-[state=active]:bg-background"
+              >
+                <Users className="h-4 w-4 hidden md:block" />
+                <span>Entities</span>
+              </TabsTrigger>
+              <TabsTrigger
+                value="milestones"
+                className="flex items-center gap-2 data-[state=active]:bg-background"
+              >
+                <ListChecks className="h-4 w-4 hidden md:block" />
+                <span>Milestones</span>
+              </TabsTrigger>
+            </TabsList>
+
+            <div className="flex-1 min-h-0">
+              <TabsContent value="general" className="mt-4 h-full">
+                <GeneralInformation
+                  activeRole={activeRole}
+                  selectedEscrow={selectedEscrow}
+                  userRolesInEscrow={userRolesInEscrow}
+                  dialogStates={dialogStates}
+                  areAllMilestonesApproved={areAllMilestonesApproved}
+                />
+              </TabsContent>
+
+              <TabsContent value="entities" className="mt-4 h-full">
+                <Entities selectedEscrow={selectedEscrow} />
+              </TabsContent>
+
+              <TabsContent value="milestones" className="mt-4 h-full">
+                <Card className="p-4 h-full">
+                  <Milestones
+                    activeRole={activeRole}
+                    selectedEscrow={selectedEscrow}
+                    userRolesInEscrow={userRolesInEscrow}
+                    setEvidenceVisibleMap={setEvidenceVisibleMap}
+                    evidenceVisibleMap={evidenceVisibleMap}
+                  />
+                </Card>
+              </TabsContent>
+            </div>
+          </Tabs>
+        </DialogContent>
+      </Dialog>
+
+      <SuccessReleaseDialog
+        isOpen={dialogStates.successRelease.isOpen}
+        onOpenChange={dialogStates.successRelease.setIsOpen}
+      />
+    </>
+  );
+};
+
+export default EscrowDetailDialog;