@trustless-work/blocks 0.0.6 → 0.0.8

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

@@ -30,7 +30,7 @@ import {
   DialogTrigger,
 } from "__UI_BASE__/dialog";
 
-export function InitializeEscrowDialog() {
+export const InitializeEscrowDialog = () => {
   const {
     form,
     isSubmitting,
@@ -39,6 +39,7 @@ export function InitializeEscrowDialog() {
     handleSubmit,
     handleAddMilestone,
     handleRemoveMilestone,
+    fillTemplateForm,
   } = useInitializeEscrow();
 
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -107,10 +108,19 @@ export function InitializeEscrowDialog() {
                   </h2>
                 </div>
                 <p className="text-muted-foreground mt-1">
-                  A single payment will be released upon completion of all
-                  milestones
+                  Fill out the form to initialize a single release escrow
                 </p>
               </Link>
+              {process.env.NODE_ENV !== "production" && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={fillTemplateForm}
+                  className="cursor-pointer"
+                >
+                  Autofill
+                </Button>
+              )}
             </Card>
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
               <FormField
@@ -521,6 +531,4 @@ export function InitializeEscrowDialog() {
       </DialogContent>
     </Dialog>
   );
-}
-
-export default InitializeEscrowDialog;
+};

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

@@ -23,7 +23,7 @@ import { Trash2, DollarSign, Percent, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
 
-export function InitializeEscrowForm() {
+export const InitializeEscrowForm = () => {
   const {
     form,
     isSubmitting,
@@ -32,6 +32,7 @@ export function InitializeEscrowForm() {
     handleSubmit,
     handleAddMilestone,
     handleRemoveMilestone,
+    fillTemplateForm,
   } = useInitializeEscrow();
 
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -88,10 +89,19 @@ export function InitializeEscrowForm() {
               <h2 className="text-xl font-semibold">Single Release Escrow</h2>
             </div>
             <p className="text-muted-foreground mt-1">
-              A single payment will be released upon completion of all
-              milestones
+              Fill out the form to initialize a single release escrow milestones
             </p>
           </Link>
+          {process.env.NODE_ENV !== "production" && (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={fillTemplateForm}
+              className="cursor-pointer"
+            >
+              Autofill
+            </Button>
+          )}
         </Card>
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
           <FormField
@@ -499,6 +509,4 @@ export function InitializeEscrowForm() {
       </form>
     </Form>
   );
-}
-
-export default InitializeEscrowForm;
+};

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

@@ -169,64 +169,7 @@ export const useInitializeEscrowSchema = () => {
         .min(1, { message: "At least one milestone is required." }),
     });
   };
-
-  const getMultiReleaseFormSchema = () => {
-    const baseSchema = getBaseSchema();
-
-    return baseSchema.extend({
-      milestones: z
-        .array(
-          z.object({
-            description: z.string().min(1, {
-              message: "Milestone description is required.",
-            }),
-            amount: 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: "Milestone amount must be greater than 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;
-                  }
-                  const decimalPlaces = (val.toString().split(".")[1] || "")
-                    .length;
-                  return decimalPlaces <= 2;
-                },
-                {
-                  message:
-                    "Milestone amount can have a maximum of 2 decimal places.",
-                }
-              ),
-          })
-        )
-        .min(1, { message: "At least one milestone is required." }),
-    });
-  };
-
   return {
     getSingleReleaseFormSchema,
-    getMultiReleaseFormSchema,
   };
 };

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

@@ -14,7 +14,8 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
 
 export function useInitializeEscrow() {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
@@ -69,6 +70,45 @@ export function useInitializeEscrow() {
     form.setValue("milestones", updatedMilestones);
   };
 
+  const fillTemplateForm = () => {
+    const usdc = trustlineOptions.find((t) => t.label === "USDC");
+
+    const templateData: z.infer<typeof formSchema> = {
+      engagementId: "ENG-001",
+      title: "Design Landing Page",
+      description: "Landing for the new product of the company.",
+      platformFee: 5,
+      amount: 5,
+      receiverMemo: "123",
+      trustline: {
+        address: usdc?.value || "",
+        decimals: 10000000,
+      },
+      roles: {
+        approver: walletAddress || "",
+        serviceProvider: walletAddress || "",
+        platformAddress: walletAddress || "",
+        receiver: walletAddress || "",
+        releaseSigner: walletAddress || "",
+        disputeResolver: walletAddress || "",
+      },
+      milestones: [
+        { description: "Design the wireframe" },
+        { description: "Develop the wireframe" },
+        { description: "Deploy the wireframe" },
+      ],
+    };
+
+    // Set form values
+    Object.entries(templateData).forEach(([key, value]) => {
+      form.setValue(key as keyof z.infer<typeof formSchema>, value);
+    });
+
+    // Explicitly set the trustline field
+    form.setValue("trustline.address", usdc?.value || "");
+    form.setValue("trustline.decimals", 10000000);
+  };
+
   const handleSubmit = form.handleSubmit(async (payload) => {
     try {
       setIsSubmitting(true);
@@ -110,7 +150,7 @@ export function useInitializeEscrow() {
 
       toast.success("Escrow initialized successfully");
 
-      setSelectedEscrow(response);
+      setSelectedEscrow({ ...finalPayload, contractId: response.contractId });
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);
     } finally {
@@ -124,6 +164,7 @@ export function useInitializeEscrow() {
     isSubmitting,
     milestones,
     isAnyMilestoneEmpty,
+    fillTemplateForm,
     handleSubmit,
     handleAddMilestone,
     handleRemoveMilestone,

package/templates/escrows/single-release/release-escrow/button/ReleaseEscrow.tsx

@@ -8,12 +8,12 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
-import { useEscrowDialogs } from "../../../escrow-context/EscrowDialogsProvider";
-import { useEscrowAmountContext } from "../../../escrow-context/EscrowAmountProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
+import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 import { Loader2 } from "lucide-react";
 
-export default function ReleaseEscrowButton() {
+export const ReleaseEscrowButton = () => {
   const { releaseFunds } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const dialogStates = useEscrowDialogs();
@@ -89,4 +89,4 @@ export default function ReleaseEscrowButton() {
       )}
     </Button>
   );
-}
+};

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

@@ -8,7 +8,7 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { Loader2 } from "lucide-react";
 
 type ResolveDisputeButtonProps = {
@@ -16,10 +16,10 @@ type ResolveDisputeButtonProps = {
   receiverFunds: number;
 };
 
-export default function ResolveDisputeButton({
+export const ResolveDisputeButton = ({
   approverFunds,
   receiverFunds,
-}: ResolveDisputeButtonProps) {
+}: ResolveDisputeButtonProps) => {
   const { resolveDispute } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -103,4 +103,4 @@ export default function ResolveDisputeButton({
       )}
     </Button>
   );
-}
+};

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

@@ -18,16 +18,13 @@ import {
 } from "__UI_BASE__/dialog";
 import { Loader2 } from "lucide-react";
 import { useResolveDispute } from "./useResolveDispute";
-import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { formatCurrency } from "../../../../helpers/format.helper";
 
-export default function ResolveDisputeDialog() {
+export const ResolveDisputeDialog = () => {
   const { form, handleSubmit, isSubmitting } = useResolveDispute();
   const { selectedEscrow } = useEscrowContext();
 
-  function formatCurrency(amount: number, currency: string) {
-    return `${currency} ${amount.toFixed(2)}`;
-  }
-
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -120,4 +117,4 @@ export default function ResolveDisputeDialog() {
       </DialogContent>
     </Dialog>
   );
-}
+};

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

@@ -12,7 +12,7 @@ import { Button } from "__UI_BASE__/button";
 import { useResolveDispute } from "./useResolveDispute";
 import { Loader2 } from "lucide-react";
 
-export default function ResolveDisputeForm() {
+export const ResolveDisputeForm = () => {
   const { form, handleSubmit, isSubmitting } = useResolveDispute();
 
   return (
@@ -79,4 +79,4 @@ export default function ResolveDisputeForm() {
       </form>
     </Form>
   );
-}
+};

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

@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { resolveDisputeSchema, type ResolveDisputeValues } from "./schema";
 import { toast } from "sonner";
 import { SingleReleaseResolveDisputePayload } from "@trustless-work/escrow";
-import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
 import {
   ErrorResponse,
@@ -14,7 +14,7 @@ import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvid
 
 export function useResolveDispute() {
   const { resolveDispute } = useEscrowsMutations();
-  const { selectedEscrow } = useEscrowContext();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
 
   const form = useForm<ResolveDisputeValues>({
@@ -59,6 +59,19 @@ export function useResolveDispute() {
       });
 
       toast.success("Dispute resolved successfully");
+
+      updateEscrow({
+        ...selectedEscrow,
+        flags: {
+          ...selectedEscrow?.flags,
+          disputed: false,
+          resolved: true,
+        },
+        balance:
+          (selectedEscrow?.balance || 0) -
+            (Number(payload.approverFunds) + Number(payload.receiverFunds)) ||
+          0,
+      });
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);
     } finally {

package/templates/escrows/single-release/update-escrow/dialog/UpdateEscrow.tsx

@@ -30,7 +30,7 @@ import {
   DialogTrigger,
 } from "__UI_BASE__/dialog";
 
-export default function UpdateEscrowDialog() {
+export const UpdateEscrowDialog = () => {
   const {
     form,
     isSubmitting,
@@ -482,4 +482,4 @@ export default function UpdateEscrowDialog() {
       </DialogContent>
     </Dialog>
   );
-}
+};

package/templates/escrows/single-release/update-escrow/form/UpdateEscrow.tsx

@@ -23,7 +23,7 @@ import { Trash2, DollarSign, Percent, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
 
-export default function UpdateEscrowForm() {
+export const UpdateEscrowForm = () => {
   const {
     form,
     isSubmitting,
@@ -460,4 +460,4 @@ export default function UpdateEscrowForm() {
       </form>
     </Form>
   );
-}
+};