@trustless-work/blocks 0.0.9 → 1.0.1

package/bin/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 /* 
  AUTHOR: @trustless-work / Joel Vargas
@@ -814,6 +814,49 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
       );
     }
 
+    // Post-copy: materialize shared files for multi-release withdraw-remaining-funds
+    try {
+      const isMultiWithdrawRoot =
+        name === "escrows/multi-release/withdraw-remaining-funds";
+      const isMultiWithdrawDialog =
+        name === "escrows/multi-release/withdraw-remaining-funds/dialog";
+      const isMultiWithdrawForm =
+        name === "escrows/multi-release/withdraw-remaining-funds/form";
+
+      const srcSharedDir = path.join(
+        TEMPLATES_DIR,
+        "escrows",
+        "multi-release",
+        "withdraw-remaining-funds",
+        "shared"
+      );
+
+      function copyMultiWithdrawSharedInto(targetDir) {
+        if (!fs.existsSync(srcSharedDir)) return;
+        const entries = fs.readdirSync(srcSharedDir, { withFileTypes: true });
+        for (const entry of entries) {
+          if (!/\.(tsx?|jsx?)$/i.test(entry.name)) continue;
+          const entrySrc = path.join(srcSharedDir, entry.name);
+          const entryDest = path.join(targetDir, entry.name);
+          writeTransformed(entrySrc, entryDest);
+        }
+      }
+
+      if (isMultiWithdrawRoot) {
+        copyMultiWithdrawSharedInto(path.join(destDir, "dialog"));
+        copyMultiWithdrawSharedInto(path.join(destDir, "form"));
+      } else if (isMultiWithdrawDialog) {
+        copyMultiWithdrawSharedInto(destDir);
+      } else if (isMultiWithdrawForm) {
+        copyMultiWithdrawSharedInto(destDir);
+      }
+    } catch (e) {
+      console.warn(
+        "⚠️  Failed to materialize shared multi-release withdraw-remaining-funds files:",
+        e?.message || e
+      );
+    }
+
     try {
       const isMultiUpdateRoot = name === "escrows/multi-release/update-escrow";
       const isMultiUpdateDialog =
@@ -1034,6 +1077,7 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
           "initialize-escrow",
           "resolve-dispute",
           "update-escrow",
+          "withdraw-remaining-funds",
         ];
 
         for (const mod of modules) {
@@ -1164,6 +1208,7 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
           "initialize-escrow",
           "resolve-dispute",
           "update-escrow",
+          "withdraw-remaining-funds",
         ];
 
         const baseTarget = path.join(destDir, "multi-release");
@@ -1757,9 +1802,6 @@ if (args[0] === "init") {
   trustless-work add escrows/escrows-by-signer/table
   trustless-work add escrows/escrows-by-signer/cards
   
-  --- Escrow details (optional standalone) ---
-  trustless-work add escrows/details
-  
   ----------------------
   --- SINGLE-RELEASE ---
   trustless-work add escrows/single-release
@@ -1769,24 +1811,6 @@ if (args[0] === "init") {
   - trustless-work add escrows/single-release/initialize-escrow/form
   - trustless-work add escrows/single-release/initialize-escrow/dialog
   
-  --- Approve milestone ---
-  - trustless-work add escrows/single-release/approve-milestone
-  - trustless-work add escrows/single-release/approve-milestone/form
-  - trustless-work add escrows/single-release/approve-milestone/button
-  - trustless-work add escrows/single-release/approve-milestone/dialog
-  
-  --- Change milestone status ---
-  - trustless-work add escrows/single-release/change-milestone-status
-  - trustless-work add escrows/single-release/change-milestone-status/form
-  - trustless-work add escrows/single-release/change-milestone-status/button
-  - trustless-work add escrows/single-release/change-milestone-status/dialog
-  
-  --- Fund escrow ---
-  - trustless-work add escrows/single-release/fund-escrow
-  - trustless-work add escrows/single-release/fund-escrow/form
-  - trustless-work add escrows/single-release/fund-escrow/button
-  - trustless-work add escrows/single-release/fund-escrow/dialog
-  
   --- Resolve dispute ---
   - trustless-work add escrows/single-release/resolve-dispute
   - trustless-work add escrows/single-release/resolve-dispute/form
@@ -1805,9 +1829,49 @@ if (args[0] === "init") {
   --- Dispute escrow ---
   - trustless-work add escrows/single-release/dispute-escrow
   - trustless-work add escrows/single-release/dispute-escrow/button
+
+  ----------------------
+  --- MULTI-RELEASE ---
+  trustless-work add escrows/multi-release
+  
+  --- Initialize escrow ---
+  - trustless-work add escrows/multi-release/initialize-escrow
+  - trustless-work add escrows/multi-release/initialize-escrow/form
+  - trustless-work add escrows/multi-release/initialize-escrow/dialog
+  
+  --- Resolve dispute ---
+  - trustless-work add escrows/multi-release/resolve-dispute
+  - trustless-work add escrows/multi-release/resolve-dispute/form
+  - trustless-work add escrows/multi-release/resolve-dispute/button
+  - trustless-work add escrows/multi-release/resolve-dispute/dialog
+  
+  --- Update escrow ---
+  - trustless-work add escrows/multi-release/update-escrow
+  - trustless-work add escrows/multi-release/update-escrow/form
+  - trustless-work add escrows/multi-release/update-escrow/dialog
+
+  --- Withdraw remaining funds ---
+  - trustless-work add escrows/multi-release/withdraw-remaining-funds
+  - trustless-work add escrows/multi-release/withdraw-remaining-funds/form
+  - trustless-work add escrows/multi-release/withdraw-remaining-funds/button
+  - trustless-work add escrows/multi-release/withdraw-remaining-funds/dialog
+  
+  --- Release escrow ---
+  - trustless-work add escrows/multi-release/release-milestone
+  - trustless-work add escrows/multi-release/release-milestone/button
+  
+  --- Dispute escrow ---
+  - trustless-work add escrows/multi-release/dispute-milestone
+  - trustless-work add escrows/multi-release/dispute-milestone/button
+
+  --- Withdraw remaining funds ---
+  - trustless-work add escrows/multi-release/withdraw-remaining-funds
+  - trustless-work add escrows/multi-release/withdraw-remaining-funds/form
+  - trustless-work add escrows/multi-release/withdraw-remaining-funds/button
+  - trustless-work add escrows/multi-release/withdraw-remaining-funds/dialog
   
   ----------------------
-  --- SINGLE-MULTI-RELEASE ---
+  --- SINGLE-MULTI-RELEASE -> Works with both types of escrows ---
   trustless-work add escrows/single-multi-release
   
   --- Approve milestone ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustless-work/blocks",
-  "version": "0.0.9",
+  "version": "1.0.1",
   "author": "Trustless Work",
   "keywords": [
     "react",

package/templates/deps.json

@@ -4,7 +4,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.53.0",
     "zod": "^3.23.8",
-    "@trustless-work/escrow": "^2.0.2",
+    "@trustless-work/escrow": "^2.0.9",
     "@tanstack/react-query": "^5.75.0",
     "@tanstack/react-query-devtools": "^5.75.0",
     "tailwindcss": "^3.3.3",

package/templates/escrows/details/Actions.tsx

@@ -113,11 +113,28 @@ export const Actions = ({
     userRolesInEscrow.includes("releaseSigner") &&
     !selectedEscrow.flags?.released;
 
+  const shouldShowWithdrawRemaining = (() => {
+    if (selectedEscrow.type !== "multi-release") return false;
+    if (!userRolesInEscrow.includes("disputeResolver")) return false;
+    if ((selectedEscrow.balance ?? 0) === 0) return false;
+    const milestones = (selectedEscrow.milestones || []) as Array<{
+      flags?: { resolved?: boolean; released?: boolean; disputed?: boolean };
+    }>;
+    return (
+      milestones.length > 0 &&
+      milestones.every((m) => {
+        const f = m.flags || {};
+        return !!(f.resolved || f.released || f.disputed);
+      })
+    );
+  })();
+
   const hasConditionalButtons =
     shouldShowEditButton ||
     shouldShowDisputeButton ||
     shouldShowResolveButton ||
-    shouldShowReleaseFundsButton;
+    shouldShowReleaseFundsButton ||
+    shouldShowWithdrawRemaining;
 
   return (
     <div className="flex items-start justify-start flex-col gap-2 w-full">
@@ -128,13 +145,19 @@ export const Actions = ({
           {/* {shouldShowEditButton && <UpdateEscrowDialog />} */}
 
           {/* Works only with single-release escrows */}
+          {/* Only appears if the escrow has balance */}
           {/* {shouldShowDisputeButton && <DisputeEscrowButton />} */}
 
           {/* Works only with single-release escrows */}
+          {/* Only appears if the escrow is disputed */}
           {/* {shouldShowResolveButton && <ResolveDisputeDialog />} */}
 
           {/* Works only with single-release escrows */}
+          {/* Only appears if all the milestones are approved */}
           {/* {shouldShowReleaseFundsButton && <ReleaseEscrowButton />} */}
+
+          {/* Multi-release: Withdraw Remaining Funds */}
+          {/* {shouldShowWithdrawRemaining && <WithdrawRemainingFundsDialog />} */}
         </div>
       )}
 

package/templates/escrows/details/MilestoneCard.tsx

@@ -141,7 +141,7 @@ const MilestoneCardComponent = ({
       buttons
         .push
         // You can add the button here, using the button from the blocks. This button is conditional based on the milestone status and the user roles. Works only with multi-release escrows.
-        // <ReleaseEscrowButton
+        // <ReleaseMilestoneButton
         //   key={`release-${milestoneIndex}`}
         //   milestoneIndex={milestoneIndex}
         // />
@@ -159,7 +159,7 @@ const MilestoneCardComponent = ({
       buttons
         .push
         // You can add the button here, using the button from the blocks. This button is conditional based on the milestone status and the user roles. Works only with multi-release escrows.
-        // <DisputeEscrowButton
+        // <DisputeMilestoneButton
         //   key={`dispute-${milestoneIndex}`}
         //   milestoneIndex={milestoneIndex}
         // />

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

@@ -562,5 +562,3 @@ export const EscrowsByRoleCards = () => {
     </>
   );
 };
-
-export default React.memo(EscrowsByRoleCards);

package/templates/escrows/multi-release/dispute-milestone/button/{DisputeEscrow.tsx → DisputeMilestone.tsx}

@@ -14,13 +14,13 @@ import {
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { Loader2 } from "lucide-react";
 
-type DisputeEscrowButtonProps = {
+type DisputeMilestoneButtonProps = {
   milestoneIndex: number | string;
 };
 
-export const DisputeEscrowButton = ({
+export const DisputeMilestoneButton = ({
   milestoneIndex,
-}: DisputeEscrowButtonProps) => {
+}: DisputeMilestoneButtonProps) => {
   const { startDispute } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -54,7 +54,7 @@ export const DisputeEscrowButton = ({
         address: walletAddress || "",
       });
 
-      toast.success("Escrow disputed successfully");
+      toast.success("Milestone disputed successfully");
 
       updateEscrow({
         ...selectedEscrow,

package/templates/escrows/multi-release/initialize-escrow/dialog/InitializeEscrow.tsx

@@ -482,6 +482,7 @@ export const InitializeEscrowDialog = () => {
                       onClick={() => handleRemoveMilestone(index)}
                       className="p-2 bg-transparent text-red-500 rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-red-500 focus:ring-0 active:ring-0 self-start sm:self-center"
                       disabled={milestones.length === 1}
+                      type="button"
                     >
                       <Trash2 className="h-5 w-5" />
                     </Button>

package/templates/escrows/multi-release/initialize-escrow/form/InitializeEscrow.tsx

@@ -462,6 +462,7 @@ export const InitializeEscrowForm = () => {
                   onClick={() => handleRemoveMilestone(index)}
                   className="p-2 bg-transparent text-red-500 rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-red-500 focus:ring-0 active:ring-0 self-start sm:self-center"
                   disabled={milestones.length === 1}
+                  type="button"
                 >
                   <Trash2 className="h-5 w-5" />
                 </Button>

package/templates/escrows/multi-release/initialize-escrow/shared/schema.ts

@@ -8,7 +8,6 @@ export const useInitializeEscrowSchema = () => {
         address: z.string().min(1, {
           message: "Trustline address is required.",
         }),
-        decimals: z.number().default(10000000),
       }),
       roles: z.object({
         approver: z

package/templates/escrows/multi-release/initialize-escrow/shared/useInitializeEscrow.ts

@@ -37,7 +37,6 @@ export function useInitializeEscrow() {
       receiverMemo: "",
       trustline: {
         address: "",
-        decimals: 10000000,
       },
       roles: {
         approver: "",
@@ -83,7 +82,6 @@ export function useInitializeEscrow() {
       receiverMemo: "123",
       trustline: {
         address: usdc?.value || "",
-        decimals: 10000000,
       },
       roles: {
         approver: walletAddress || "",

package/templates/escrows/multi-release/release-milestone/button/{ReleaseEscrow.tsx → ReleaseMilestone.tsx}

@@ -16,13 +16,13 @@ import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogs
 import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 import { Loader2 } from "lucide-react";
 
-type ReleaseEscrowButtonProps = {
+type ReleaseMilestoneButtonProps = {
   milestoneIndex: number | string;
 };
 
-export const ReleaseEscrowButton = ({
+export const ReleaseMilestoneButton = ({
   milestoneIndex,
-}: ReleaseEscrowButtonProps) => {
+}: ReleaseMilestoneButtonProps) => {
   const { releaseFunds } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const dialogStates = useEscrowDialogs();
@@ -58,7 +58,7 @@ export const ReleaseEscrowButton = ({
         address: walletAddress || "",
       });
 
-      toast.success("Escrow released successfully");
+      toast.success("Milestone released successfully");
 
       // Ensure amounts are up to date for the success dialog
       if (selectedEscrow) {

package/templates/escrows/multi-release/resolve-dispute/button/ResolveDispute.tsx

@@ -15,14 +15,12 @@ import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvide
 import { Loader2 } from "lucide-react";
 
 type ResolveDisputeButtonProps = {
-  approverFunds: number;
-  receiverFunds: number;
+  distributions: { address: string; amount: number }[];
   milestoneIndex: number | string;
 };
 
 export const ResolveDisputeButton = ({
-  approverFunds,
-  receiverFunds,
+  distributions,
   milestoneIndex,
 }: ResolveDisputeButtonProps) => {
   const { resolveDispute } = useEscrowsMutations();
@@ -32,18 +30,11 @@ export const ResolveDisputeButton = ({
 
   async function handleClick() {
     try {
-      if (
-        approverFunds == null ||
-        Number.isNaN(approverFunds) ||
-        receiverFunds == null ||
-        Number.isNaN(receiverFunds)
-      ) {
-        toast.error("Both amounts are required");
-        return;
-      }
-
-      if (approverFunds < 0 || receiverFunds < 0) {
-        toast.error("Amounts must be >= 0");
+      const hasInvalid = distributions.some(
+        (d) => !d.address || Number.isNaN(d.amount) || d.amount < 0
+      );
+      if (hasInvalid) {
+        toast.error("Invalid distributions");
         return;
       }
 
@@ -57,8 +48,7 @@ export const ResolveDisputeButton = ({
       const payload: MultiReleaseResolveDisputePayload = {
         contractId: selectedEscrow?.contractId || "",
         disputeResolver: walletAddress || "",
-        approverFunds: Number(approverFunds),
-        receiverFunds: Number(receiverFunds),
+        distributions: distributions as [{ address: string; amount: number }],
         milestoneIndex: String(milestoneIndex),
       };
 
@@ -92,8 +82,8 @@ export const ResolveDisputeButton = ({
           return milestone;
         }),
         balance:
-          selectedEscrow?.balance ||
-          Number(approverFunds) + Number(receiverFunds),
+          (selectedEscrow?.balance || 0) -
+          distributions.reduce((acc, d) => acc + Number(d.amount || 0), 0),
       });
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);

package/templates/escrows/multi-release/resolve-dispute/dialog/ResolveDispute.tsx

@@ -16,7 +16,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "__UI_BASE__/dialog";
-import { Loader2 } from "lucide-react";
+import { Loader2, Trash2 } from "lucide-react";
 import { useResolveDispute } from "./useResolveDispute";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { formatCurrency } from "../../../../helpers/format.helper";
@@ -35,7 +35,22 @@ export const ResolveDisputeDialog = ({
   showSelectMilestone?: boolean;
   milestoneIndex?: number | string;
 }) => {
-  const { form, handleSubmit, isSubmitting, totalAmount } = useResolveDispute();
+  const {
+    form,
+    handleSubmit,
+    isSubmitting,
+    totalAmount,
+    distributions,
+    handleAddDistribution,
+    handleRemoveDistribution,
+    handleDistributionAddressChange,
+    handleDistributionAmountChange,
+    isAnyDistributionEmpty,
+    allowedAmount,
+    distributedSum,
+    isExactMatch,
+    difference,
+  } = useResolveDispute();
   const { selectedEscrow } = useEscrowContext();
 
   React.useEffect(() => {
@@ -55,7 +70,7 @@ export const ResolveDisputeDialog = ({
           Resolve Dispute
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="!w-full sm:!max-w-3xl max-h-[95vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Resolve Dispute</DialogTitle>
         </DialogHeader>
@@ -96,52 +111,110 @@ export const ResolveDisputeDialog = ({
               />
             )}
 
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-              <FormField
-                control={form.control}
-                name="approverFunds"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Approver Funds</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        inputMode="decimal"
-                        placeholder="Enter approver funds"
-                        value={field.value as unknown as string}
-                        onChange={(e) => field.onChange(e.target.value)}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+            <FormLabel className="flex items-center my-4">
+              Distributions<span className="text-destructive ml-1">*</span>
+            </FormLabel>
 
-              <FormField
-                control={form.control}
-                name="receiverFunds"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Receiver Funds</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        inputMode="decimal"
-                        placeholder="Enter receiver funds"
-                        value={field.value as unknown as string}
-                        onChange={(e) => field.onChange(e.target.value)}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+            {distributions.map((d, idx) => (
+              <div
+                key={`dist-${idx}`}
+                className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1fr_minmax(140px,220px)_auto] gap-3 sm:gap-4 items-end mb-2"
+              >
+                <FormField
+                  control={form.control}
+                  name={`distributions.${idx}.address` as const}
+                  render={() => (
+                    <FormItem className="sm:col-span-2 lg:col-span-1">
+                      <FormLabel>Address</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          placeholder="Receiver address"
+                          value={d.address}
+                          onChange={(e) =>
+                            handleDistributionAddressChange(idx, e.target.value)
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name={`distributions.${idx}.amount` as const}
+                  render={() => (
+                    <FormItem>
+                      <FormLabel>Amount</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          inputMode="decimal"
+                          placeholder="0.00"
+                          value={(d.amount as string) ?? ""}
+                          onChange={(e) =>
+                            handleDistributionAmountChange(idx, e)
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <Button
+                  type="button"
+                  onClick={() => handleRemoveDistribution(idx)}
+                  className="justify-self-end self-end p-2 bg-transparent text-destructive rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-destructive focus:ring-0 active:ring-0"
+                  disabled={distributions.length <= 2}
+                >
+                  <Trash2 className="h-5 w-5" />
+                </Button>
+              </div>
+            ))}
+
+            <div className="flex justify-between items-center mt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleAddDistribution}
+                disabled={isAnyDistributionEmpty}
+                className="cursor-pointer"
+              >
+                Add Item
+              </Button>
+
+              <div className="flex items-center gap-4">
+                <div className="text-xs text-muted-foreground">
+                  <p>
+                    <span className="font-bold">Total Amount: </span>
+                    {distributedSum.toFixed(2)} / {allowedAmount.toFixed(2)}
+                  </p>
+                  {!isExactMatch && (
+                    <p className="text-destructive">
+                      <span className="font-bold">Difference: </span>
+                      {difference.toFixed(2)}
+                    </p>
+                  )}
+                </div>
+
+                <p className="text-xs text-muted-foreground">
+                  <span className="font-bold">Total Balance: </span>
+                  {formatCurrency(
+                    selectedEscrow?.balance || 0,
+                    selectedEscrow?.trustline.name || ""
+                  )}
+                </p>
+              </div>
             </div>
 
-            <div className="mt-4 flex justify-between items-center">
+            <div className="mt-4 flex justify-start items-center">
               <Button
                 type="submit"
-                disabled={isSubmitting}
+                disabled={
+                  isSubmitting || isAnyDistributionEmpty || !isExactMatch
+                }
                 className="cursor-pointer"
               >
                 {isSubmitting ? (
@@ -153,22 +226,6 @@ export const ResolveDisputeDialog = ({
                   "Resolve"
                 )}
               </Button>
-
-              <p className="text-xs text-muted-foreground">
-                <span className="font-bold">Total Amount: </span>
-                {formatCurrency(
-                  totalAmount,
-                  selectedEscrow?.trustline.name || ""
-                )}
-              </p>
-
-              <p className="text-xs text-muted-foreground">
-                <span className="font-bold">Total Balance: </span>
-                {formatCurrency(
-                  selectedEscrow?.balance || 0,
-                  selectedEscrow?.trustline.name || ""
-                )}
-              </p>
             </div>
           </form>
         </Form>