@trustless-work/blocks 1.0.0 → 1.0.1

package/bin/index.js

@@ -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");
@@ -1804,6 +1849,12 @@ if (args[0] === "init") {
   - 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
@@ -1812,6 +1863,12 @@ if (args[0] === "init") {
   --- 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 -> Works with both types of escrows ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustless-work/blocks",
-  "version": "1.0.0",
+  "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">
@@ -138,6 +155,9 @@ export const Actions = ({
           {/* 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/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/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>

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

@@ -11,7 +11,7 @@ import { Input } from "__UI_BASE__/input";
 import { Button } from "__UI_BASE__/button";
 import { useResolveDispute } from "./useResolveDispute";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
-import { Loader2 } from "lucide-react";
+import { Loader2, Trash2 } from "lucide-react";
 import {
   Select,
   SelectContent,
@@ -28,7 +28,22 @@ export const ResolveDisputeForm = ({
   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(() => {
@@ -79,52 +94,106 @@ export const ResolveDisputeForm = ({
           />
         )}
 
-        <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">
+          <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">
           <Button
             type="submit"
-            disabled={isSubmitting}
+            disabled={isSubmitting || isAnyDistributionEmpty || !isExactMatch}
             className="cursor-pointer"
           >
             {isSubmitting ? (
@@ -136,19 +205,6 @@ export const ResolveDisputeForm = ({
               "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>