@trustless-work/blocks 0.0.7 → 0.0.8

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

@@ -15,6 +15,7 @@ import {
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
 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

@@ -13,7 +13,7 @@ import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogs
 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

@@ -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

@@ -19,15 +19,12 @@ import {
 import { Loader2 } from "lucide-react";
 import { useResolveDispute } from "./useResolveDispute";
 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

@@ -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>
   );
-}
+};

package/templates/escrows/single-release/update-escrow/shared/useUpdateEscrow.ts

@@ -6,6 +6,7 @@ import { z } from "zod";
 import {
   UpdateSingleReleaseEscrowPayload,
   UpdateSingleReleaseEscrowResponse,
+  SingleReleaseMilestone,
 } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
@@ -53,9 +54,11 @@ export function useUpdateEscrow() {
         releaseSigner: selectedEscrow?.roles?.releaseSigner || "",
         disputeResolver: selectedEscrow?.roles?.disputeResolver || "",
       },
-      milestones: (selectedEscrow?.milestones || []).map((m: any) => ({
-        description: m?.description || "",
-      })),
+      milestones: (selectedEscrow?.milestones || []).map(
+        (m: SingleReleaseMilestone) => ({
+          description: m?.description || "",
+        })
+      ),
     },
     mode: "onChange",
   });
@@ -89,9 +92,11 @@ export function useUpdateEscrow() {
         releaseSigner: selectedEscrow?.roles?.releaseSigner || "",
         disputeResolver: selectedEscrow?.roles?.disputeResolver || "",
       },
-      milestones: (selectedEscrow?.milestones || []).map((m: any) => ({
-        description: m?.description || "",
-      })),
+      milestones: (selectedEscrow?.milestones || []).map(
+        (m: SingleReleaseMilestone) => ({
+          description: m?.description || "",
+        })
+      ),
     });
   }, [selectedEscrow, form]);
 
@@ -168,7 +173,7 @@ export function useUpdateEscrow() {
             address: payload.trustline.address,
             decimals: 10000000,
           },
-          roles: payload.roles as any,
+          roles: payload.roles,
           milestones: payload.milestones,
         },
       };

package/templates/providers/EscrowDialogsProvider.tsx

@@ -13,9 +13,7 @@ export type DialogStates = {
   successRelease: DialogState;
 };
 
-export type StatusStates = {};
-
-type EscrowDialogsContextType = DialogStates & StatusStates;
+type EscrowDialogsContextType = DialogStates;
 
 const EscrowDialogsContext = createContext<
   EscrowDialogsContextType | undefined

package/templates/providers/EscrowProvider.tsx

@@ -10,7 +10,28 @@ import {
   ReactNode,
   useCallback,
 } from "react";
-import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+import {
+  GetEscrowsFromIndexerResponse as Escrow,
+  Trustline,
+} from "@trustless-work/escrow/types";
+
+type SingleEscrowPayload = Omit<
+  Escrow,
+  "type" | "updatedAt" | "createdAt" | "user" | "trustline"
+> &
+  Partial<Pick<Escrow, "type" | "updatedAt" | "createdAt" | "user">> & {
+    trustline: Trustline & { name?: string };
+  };
+
+type MultiEscrowPayload = Omit<
+  Escrow,
+  "type" | "updatedAt" | "createdAt" | "user" | "trustline" | "amount"
+> &
+  Partial<
+    Pick<Escrow, "type" | "updatedAt" | "createdAt" | "user" | "amount">
+  > & {
+    trustline: Trustline & { name?: string };
+  };
 
 type EscrowContextType = {
   selectedEscrow: Escrow | null;
@@ -21,7 +42,9 @@ type EscrowContextType = {
   ) => void;
   setEscrowField: <K extends keyof Escrow>(key: K, value: Escrow[K]) => void;
   clearEscrow: () => void;
-  setSelectedEscrow: (escrow?: Escrow) => void;
+  setSelectedEscrow: (
+    escrow?: SingleEscrowPayload | MultiEscrowPayload
+  ) => void;
   setUserRolesInEscrow: (roles: string[]) => void;
 };
 
@@ -134,8 +157,8 @@ export const EscrowProvider = ({ children }: { children: ReactNode }) => {
         updateEscrow,
         setEscrowField,
         clearEscrow,
-        setSelectedEscrow: (value?: Escrow) =>
-          setSelectedEscrowState(value ?? null),
+        setSelectedEscrow: (value?: SingleEscrowPayload | MultiEscrowPayload) =>
+          setSelectedEscrowState((value as unknown as Escrow) ?? null),
         setUserRolesInEscrow,
         userRolesInEscrow,
       }}

package/templates/providers/TrustlessWork.tsx

@@ -6,7 +6,7 @@ import {
   development,
 
   // mainnet environment = "https://api.trustlesswork.com"
-  mainNet,
+  // mainNet,
   TrustlessWorkConfig,
 } from "@trustless-work/escrow";
 

package/templates/escrows/details/ProgressEscrow.tsx

@@ -1,191 +0,0 @@
-import { GetEscrowsFromIndexerResponse } from "@trustless-work/escrow/types";
-import { cn } from "@/lib/utils";
-import {
-  MultiReleaseMilestone,
-  SingleReleaseMilestone,
-} from "@trustless-work/escrow";
-
-type Escrow = {
-  [K in keyof Omit<
-    GetEscrowsFromIndexerResponse,
-    "type" | "updatedAt" | "createdAt" | "user"
-  >]: K extends "trustline"
-    ? Omit<NonNullable<GetEscrowsFromIndexerResponse["trustline"]>, "name">
-    : GetEscrowsFromIndexerResponse[K];
-};
-
-interface ProgressEscrowProps {
-  escrow: Escrow;
-  className?: string;
-}
-
-const ProgressCircle = ({
-  percentage,
-  color,
-  size = 44,
-  strokeWidth = 3,
-}: {
-  percentage: number;
-  color: string;
-  size?: number;
-  strokeWidth?: number;
-}) => {
-  const radius = (size - strokeWidth) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const strokeDashoffset = circumference - (percentage / 100) * circumference;
-
-  return (
-    <div className="relative inline-flex">
-      <svg
-        width={size}
-        height={size}
-        viewBox={`0 0 ${size} ${size}`}
-        className="transform -rotate-90"
-      >
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          fill="none"
-          stroke="rgba(226, 232, 240, 0.3)"
-          strokeWidth={strokeWidth}
-        />
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          fill="none"
-          stroke={color}
-          strokeWidth={strokeWidth}
-          strokeDasharray={circumference}
-          strokeDashoffset={strokeDashoffset}
-          strokeLinecap="round"
-        />
-      </svg>
-      <div className="absolute inset-0 flex items-center justify-center text-xs font-medium">
-        {Math.round(percentage)}%
-      </div>
-    </div>
-  );
-};
-
-const ProgressEscrow = ({ escrow, className }: ProgressEscrowProps) => {
-  const completedMilestones = escrow.milestones.filter(
-    (milestone) => milestone.status === "completed"
-  ).length;
-  const approvedMilestones = escrow.milestones.filter(
-    (milestone: SingleReleaseMilestone | MultiReleaseMilestone) =>
-      ("flags" in milestone && milestone.flags?.approved === true) ||
-      (!("flags" in milestone) &&
-        (milestone as SingleReleaseMilestone).approved === true)
-  ).length;
-  const disputedMilestones = escrow.milestones.filter(
-    (milestone: SingleReleaseMilestone | MultiReleaseMilestone) =>
-      "flags" in milestone && milestone.flags?.disputed === true
-  ).length;
-  const resolvedMilestones = escrow.milestones.filter(
-    (milestone: SingleReleaseMilestone | MultiReleaseMilestone) =>
-      "flags" in milestone && milestone.flags?.resolved === true
-  ).length;
-  const releasedMilestones = escrow.milestones.filter(
-    (milestone: SingleReleaseMilestone | MultiReleaseMilestone) =>
-      "flags" in milestone && milestone.flags?.released === true
-  ).length;
-  const totalMilestones = escrow.milestones.length;
-
-  const progressPercentageCompleted =
-    totalMilestones > 0 ? (completedMilestones / totalMilestones) * 100 : 0;
-  const progressPercentageApproved =
-    totalMilestones > 0 ? (approvedMilestones / totalMilestones) * 100 : 0;
-  const progressPercentageDisputed =
-    totalMilestones > 0 ? (disputedMilestones / totalMilestones) * 100 : 0;
-  const progressPercentageResolved =
-    totalMilestones > 0 ? (resolvedMilestones / totalMilestones) * 100 : 0;
-  const progressPercentageReleased =
-    totalMilestones > 0 ? (releasedMilestones / totalMilestones) * 100 : 0;
-
-  const shouldHideProgress = escrow.flags?.released || escrow.flags?.resolved;
-  const isMultiRelease =
-    escrow.milestones[0] && "flags" in escrow.milestones[0];
-
-  if (shouldHideProgress || totalMilestones === 0) {
-    return null;
-  }
-
-  return (
-    <div className={cn("space-y-4 px-10 w-full", className)}>
-      <div className="flex flex-wrap items-center justify-center gap-6">
-        <div className="flex items-center gap-3">
-          <ProgressCircle
-            percentage={progressPercentageCompleted}
-            color="#006be4"
-          />
-          <div className="text-xs">
-            <div className="font-medium">Completed</div>
-            <div className="text-muted-foreground">
-              {completedMilestones}/{totalMilestones}
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <ProgressCircle
-            percentage={progressPercentageApproved}
-            color="#15803d"
-          />
-          <div className="text-xs">
-            <div className="font-medium">Approved</div>
-            <div className="text-muted-foreground">
-              {approvedMilestones}/{totalMilestones}
-            </div>
-          </div>
-        </div>
-
-        {isMultiRelease && (
-          <>
-            <div className="flex items-center gap-3">
-              <ProgressCircle
-                percentage={progressPercentageDisputed}
-                color="#dc2626"
-              />
-              <div className="text-xs">
-                <div className="font-medium">Disputed</div>
-                <div className="text-muted-foreground">
-                  {disputedMilestones}/{totalMilestones}
-                </div>
-              </div>
-            </div>
-
-            <div className="flex items-center gap-3">
-              <ProgressCircle
-                percentage={progressPercentageResolved}
-                color="#15803d"
-              />
-              <div className="text-xs">
-                <div className="font-medium">Resolved</div>
-                <div className="text-muted-foreground">
-                  {resolvedMilestones}/{totalMilestones}
-                </div>
-              </div>
-            </div>
-
-            <div className="flex items-center gap-3">
-              <ProgressCircle
-                percentage={progressPercentageReleased}
-                color="#15803d"
-              />
-              <div className="text-xs">
-                <div className="font-medium">Released</div>
-                <div className="text-muted-foreground">
-                  {releasedMilestones}/{totalMilestones}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ProgressEscrow;