@trustless-work/blocks 1.0.0 → 1.0.2

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>

package/templates/escrows/multi-release/resolve-dispute/shared/schema.ts

@@ -1,83 +1,80 @@
 import { z } from "zod";
+import { isValidWallet } from "../../../../wallet-kit/validators";
 
 export const getFormSchema = () => {
-  return z.object({
-    approverFunds: z
-      .union([z.string(), z.number()])
-      .refine(
-        (val) => {
-          if (typeof val === "string") {
-            if (val === "" || val === "." || val.endsWith(".")) {
-              return true;
-            }
-            const numVal = Number(val);
-            return !isNaN(numVal) && numVal >= 0;
+  const amountSchema = z
+    .union([z.string(), z.number()])
+    .refine(
+      (val) => {
+        if (typeof val === "string") {
+          if (val === "" || val === "." || val.endsWith(".")) {
+            return true; // Allow partial input
           }
-          return val >= 0;
-        },
-        {
-          message: "Approver funds must be 0 or greater.",
+          const numVal = Number(val);
+          return !isNaN(numVal) && numVal >= 0;
         }
-      )
-      .refine(
-        (val) => {
-          if (typeof val === "string") {
-            if (val === "" || val === "." || val.endsWith(".")) {
-              return true;
-            }
-            const numVal = Number(val);
-            if (isNaN(numVal)) return false;
-            const decimalPlaces = (numVal.toString().split(".")[1] || "")
-              .length;
-            return decimalPlaces <= 2;
+        return val >= 0;
+      },
+      { message: "Amount must be 0 or greater." }
+    )
+    .refine(
+      (val) => {
+        if (typeof val === "string") {
+          if (val === "" || val === "." || val.endsWith(".")) {
+            return true; // Allow partial input
           }
-          const decimalPlaces = (val.toString().split(".")[1] || "").length;
+          const numVal = Number(val);
+          if (isNaN(numVal)) return false;
+          const decimalPlaces = (numVal.toString().split(".")[1] || "").length;
           return decimalPlaces <= 2;
-        },
-        {
-          message: "Approver funds can have a maximum of 2 decimal places.",
         }
-      ),
-    receiverFunds: z
-      .union([z.string(), z.number()])
-      .refine(
-        (val) => {
-          if (typeof val === "string") {
-            if (val === "" || val === "." || val.endsWith(".")) {
-              return true;
-            }
-            const numVal = Number(val);
-            return !isNaN(numVal) && numVal >= 0;
-          }
-          return val >= 0;
-        },
-        {
-          message: "Receiver funds must be 0 or greater.",
-        }
-      )
-      .refine(
-        (val) => {
-          if (typeof val === "string") {
-            if (val === "" || val === "." || val.endsWith(".")) {
-              return true;
-            }
-            const numVal = Number(val);
-            if (isNaN(numVal)) return false;
-            const decimalPlaces = (numVal.toString().split(".")[1] || "")
-              .length;
-            return decimalPlaces <= 2;
-          }
-          const decimalPlaces = (val.toString().split(".")[1] || "").length;
-          return decimalPlaces <= 2;
-        },
-        {
-          message: "Receiver funds can have a maximum of 2 decimal places.",
+        const decimalPlaces = (val.toString().split(".")[1] || "").length;
+        return decimalPlaces <= 2;
+      },
+      { message: "Amount can have a maximum of 2 decimal places." }
+    );
+
+  return z
+    .object({
+      distributions: z
+        .array(
+          z.object({
+            address: z
+              .string()
+              .min(1, { message: "Address is required." })
+              .refine((addr) => isValidWallet(addr), {
+                message: "Invalid Stellar address.",
+              }),
+            amount: amountSchema,
+          })
+        )
+        .min(2, { message: "At least two distributions are required." }),
+      milestoneIndex: z
+        .string({ required_error: "Milestone is required" })
+        .min(1, { message: "Milestone is required" }),
+    })
+    .superRefine((data, ctx) => {
+      const seen = new Map<string, number>();
+      data.distributions.forEach((item, idx) => {
+        const key = (item.address || "").trim().toUpperCase();
+        if (!key) return;
+        if (seen.has(key)) {
+          const firstIdx = seen.get(key)!;
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["distributions", idx, "address"],
+            message: "Duplicate address. Each recipient must be unique.",
+          });
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["distributions", firstIdx, "address"],
+            message: "Duplicate address. Each recipient must be unique.",
+          });
+        } else {
+          seen.set(key, idx);
         }
-      ),
-    milestoneIndex: z
-      .string({ required_error: "Milestone is required" })
-      .min(1, { message: "Milestone is required" }),
-  });
+      });
+    });
 };
 
 export const resolveDisputeSchema = getFormSchema();

package/templates/escrows/multi-release/resolve-dispute/shared/useResolveDispute.ts

@@ -15,6 +15,8 @@ import {
 } from "@/components/tw-blocks/handle-errors/handle";
 import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
 
+type DistributionInput = { address: string; amount: string | number };
+
 export function useResolveDispute() {
   const { resolveDispute } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
@@ -23,8 +25,10 @@ export function useResolveDispute() {
   const form = useForm<ResolveDisputeValues>({
     resolver: zodResolver(resolveDisputeSchema),
     defaultValues: {
-      approverFunds: 0,
-      receiverFunds: 0,
+      distributions: [
+        { address: "", amount: "" },
+        { address: "", amount: "" },
+      ],
       milestoneIndex: "0",
     },
     mode: "onChange",
@@ -39,33 +43,97 @@ export function useResolveDispute() {
     );
   }, [selectedEscrow]);
 
+  const milestoneIndexWatch = form.watch("milestoneIndex");
+
+  const allowedAmount = React.useMemo(() => {
+    if (selectedEscrow?.type !== "multi-release") return 0;
+    const idx = Number(milestoneIndexWatch);
+    const milestones = selectedEscrow.milestones as MultiReleaseMilestone[];
+    const m = milestones?.[idx];
+    return Number((m?.amount as unknown as number) || 0);
+  }, [selectedEscrow, milestoneIndexWatch]);
+
+  const distributions = form.watch("distributions") as DistributionInput[];
+
+  const distributedSum = React.useMemo(() => {
+    return (distributions || []).reduce((acc, d) => {
+      const n = Number(d?.amount ?? 0);
+      return acc + (isNaN(n) ? 0 : n);
+    }, 0);
+  }, [distributions]);
+
+  const isExactMatch = React.useMemo(() => {
+    return Number(allowedAmount) === Number(distributedSum);
+  }, [allowedAmount, distributedSum]);
+
+  const difference = React.useMemo(() => {
+    return Math.abs(Number(allowedAmount) - Number(distributedSum));
+  }, [allowedAmount, distributedSum]);
+
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
+  const handleDistributionAddressChange = (index: number, value: string) => {
+    const updated = [...distributions];
+    updated[index] = { ...updated[index], address: value };
+    form.setValue("distributions", updated);
+  };
+
+  const handleDistributionAmountChange = (
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    let rawValue = e.target.value;
+    rawValue = rawValue.replace(/[^0-9.]/g, "");
+    if (rawValue.split(".").length > 2) {
+      rawValue = rawValue.slice(0, -1);
+    }
+    if (rawValue.includes(".")) {
+      const parts = rawValue.split(".");
+      if (parts[1] && parts[1].length > 2) {
+        rawValue = parts[0] + "." + parts[1].slice(0, 2);
+      }
+    }
+    const updated = [...distributions];
+    updated[index] = { ...updated[index], amount: rawValue };
+    form.setValue("distributions", updated);
+  };
+
+  const handleAddDistribution = () => {
+    const updated = [...distributions, { address: "", amount: "" }];
+    form.setValue("distributions", updated);
+  };
+
+  const handleRemoveDistribution = (index: number) => {
+    if (distributions.length <= 2) return;
+    const updated = distributions.filter((_, i) => i !== index);
+    form.setValue("distributions", updated);
+  };
+
+  const isAnyDistributionEmpty = React.useMemo(() => {
+    if (!distributions.length) return true;
+    const last = distributions[distributions.length - 1];
+    return (last.address || "").trim() === "" || (last.amount ?? "") === "";
+  }, [distributions]);
+
   const handleSubmit = form.handleSubmit(async (payload) => {
     try {
       setIsSubmitting(true);
 
-      /**
-       * Create the final payload for the resolve dispute mutation
-       *
-       * @param payload - The payload from the form
-       * @returns The final payload for the resolve dispute mutation
-       */
+      if (!isExactMatch) {
+        toast.error("The total distributions must equal the milestone amount");
+        return;
+      }
+
       const finalPayload: MultiReleaseResolveDisputePayload = {
         contractId: selectedEscrow?.contractId || "",
         disputeResolver: walletAddress || "",
-        approverFunds: Number(payload.approverFunds),
-        receiverFunds: Number(payload.receiverFunds),
         milestoneIndex: String(payload.milestoneIndex),
+        distributions: payload.distributions.map((d) => ({
+          address: d.address,
+          amount: Number(d.amount || 0),
+        })) as [{ address: string; amount: number }],
       };
 
-      /**
-       * Call the resolve dispute mutation
-       *
-       * @param payload - The final payload for the resolve dispute mutation
-       * @param type - The type of the escrow
-       * @param address - The address of the escrow
-       */
       await resolveDispute.mutateAsync({
         payload: finalPayload,
         type: "multi-release",
@@ -74,6 +142,11 @@ export function useResolveDispute() {
 
       toast.success("Dispute resolved successfully");
 
+      const sumDistributed = payload.distributions.reduce((acc, d) => {
+        const n = Number(d.amount || 0);
+        return acc + (isNaN(n) ? 0 : n);
+      }, 0);
+
       updateEscrow({
         ...selectedEscrow,
         milestones: selectedEscrow?.milestones.map((milestone, index) => {
@@ -89,9 +162,7 @@ export function useResolveDispute() {
           }
           return milestone;
         }),
-        balance:
-          selectedEscrow?.balance ||
-          Number(payload.approverFunds) + Number(payload.receiverFunds),
+        balance: (selectedEscrow?.balance || 0) - sumDistributed || 0,
       });
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);
@@ -101,5 +172,20 @@ export function useResolveDispute() {
     }
   });
 
-  return { form, handleSubmit, isSubmitting, totalAmount };
+  return {
+    form,
+    handleSubmit,
+    isSubmitting,
+    totalAmount,
+    distributions,
+    handleAddDistribution,
+    handleRemoveDistribution,
+    handleDistributionAddressChange,
+    handleDistributionAmountChange,
+    isAnyDistributionEmpty,
+    allowedAmount,
+    distributedSum,
+    isExactMatch,
+    difference,
+  };
 }

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

@@ -8,7 +8,6 @@ export const useUpdateEscrowSchema = () => {
         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/update-escrow/shared/useUpdateEscrow.ts

@@ -43,7 +43,6 @@ export function useUpdateEscrow() {
         : "",
       trustline: {
         address: selectedEscrow?.trustline?.address || "",
-        decimals: 10000000,
       },
       roles: {
         approver: selectedEscrow?.roles?.approver || "",
@@ -84,7 +83,6 @@ export function useUpdateEscrow() {
         : "",
       trustline: {
         address: selectedEscrow?.trustline?.address || "",
-        decimals: 10000000,
       },
       roles: {
         approver: selectedEscrow?.roles?.approver || "",
@@ -190,7 +188,6 @@ export function useUpdateEscrow() {
             : undefined,
           trustline: {
             address: payload.trustline.address,
-            decimals: 10000000,
           },
           roles: payload.roles,
           milestones: payload.milestones.map((milestone) => ({
@@ -227,7 +224,6 @@ export function useUpdateEscrow() {
             (selectedEscrow.trustline?.address as string) ||
             "",
           address: finalPayload.escrow.trustline.address,
-          decimals: finalPayload.escrow.trustline.decimals,
         },
       };
 

package/templates/escrows/multi-release/withdraw-remaining-funds/button/WithdrawRemainingFunds.tsx

@@ -0,0 +1,85 @@
+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 { WithdrawRemainingFundsPayload } 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 Distribution = { address: string; amount: number };
+
+type WithdrawRemainingFundsButtonProps = {
+  distributions: Distribution[];
+};
+
+export const WithdrawRemainingFundsButton = ({
+  distributions,
+}: WithdrawRemainingFundsButtonProps) => {
+  const { withdrawRemainingFunds } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  async function handleClick() {
+    try {
+      const hasInvalid = distributions.some(
+        (d) => !d.address || Number.isNaN(d.amount) || d.amount < 0
+      );
+      if (hasInvalid) {
+        toast.error("Invalid distributions");
+        return;
+      }
+
+      setIsSubmitting(true);
+
+      const payload: WithdrawRemainingFundsPayload = {
+        contractId: selectedEscrow?.contractId || "",
+        disputeResolver: walletAddress || "",
+        distributions: distributions as [{ address: string; amount: number }],
+      };
+
+      await withdrawRemainingFunds.mutateAsync({
+        payload,
+        type: "multi-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Withdraw successful");
+      const sumDistributed = distributions.reduce(
+        (acc, d) => acc + Number(d.amount || 0),
+        0
+      );
+      updateEscrow({
+        ...selectedEscrow,
+        balance: (selectedEscrow?.balance || 0) - sumDistributed || 0,
+      });
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      disabled={isSubmitting}
+      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">Withdrawing...</span>
+        </div>
+      ) : (
+        "Withdraw Remaining"
+      )}
+    </Button>
+  );
+};