@trustless-work/blocks 0.0.5 → 0.0.7

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

@@ -1,211 +1,224 @@
-import * as React from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useUpdateEscrowSchema } from "./schema";
-import { z } from "zod";
-import {
-  UpdateSingleReleaseEscrowPayload,
-  UpdateSingleReleaseEscrowResponse,
-} from "@trustless-work/escrow/types";
-import { toast } from "sonner";
-import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
-import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import {
-  ErrorResponse,
-  handleError,
-} from "@/components/tw-blocks/handle-errors/handle";
-import { GetEscrowsFromIndexerResponse } from "@trustless-work/escrow/types";
-
-export function useUpdateEscrow() {
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-
-  const { getSingleReleaseFormSchema } = useUpdateEscrowSchema();
-  const formSchema = getSingleReleaseFormSchema();
-
-  const { walletAddress } = useWalletContext();
-  const { selectedEscrow, setSelectedEscrow } = useEscrowContext();
-  const { updateEscrow } = useEscrowsMutations();
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      engagementId: selectedEscrow?.engagementId || "",
-      title: selectedEscrow?.title || "",
-      description: selectedEscrow?.description || "",
-      platformFee: selectedEscrow?.platformFee as unknown as
-        | number
-        | string
-        | undefined,
-      amount: selectedEscrow?.amount as unknown as number | string | undefined,
-      receiverMemo: selectedEscrow?.receiverMemo
-        ? String(selectedEscrow.receiverMemo)
-        : "",
-      trustline: {
-        address: selectedEscrow?.trustline?.address || "",
-        decimals: 10000000,
-      },
-      roles: {
-        approver: selectedEscrow?.roles?.approver || "",
-        serviceProvider: selectedEscrow?.roles?.serviceProvider || "",
-        platformAddress: selectedEscrow?.roles?.platformAddress || "",
-        receiver: selectedEscrow?.roles?.receiver || "",
-        releaseSigner: selectedEscrow?.roles?.releaseSigner || "",
-        disputeResolver: selectedEscrow?.roles?.disputeResolver || "",
-      },
-      milestones: (selectedEscrow?.milestones || []).map((m: any) => ({
-        description: m?.description || "",
-      })),
-    },
-    mode: "onChange",
-  });
-
-  React.useEffect(() => {
-    if (!selectedEscrow) return;
-    form.reset({
-      engagementId: selectedEscrow?.engagementId || "",
-      title: selectedEscrow?.title || "",
-      description: selectedEscrow?.description || "",
-      platformFee:
-        (selectedEscrow?.platformFee as unknown as
-          | number
-          | string
-          | undefined) || "",
-      amount:
-        (selectedEscrow?.amount as unknown as number | string | undefined) ||
-        "",
-      receiverMemo: selectedEscrow?.receiverMemo
-        ? String(selectedEscrow.receiverMemo)
-        : "",
-      trustline: {
-        address: selectedEscrow?.trustline?.address || "",
-        decimals: 10000000,
-      },
-      roles: {
-        approver: selectedEscrow?.roles?.approver || "",
-        serviceProvider: selectedEscrow?.roles?.serviceProvider || "",
-        platformAddress: selectedEscrow?.roles?.platformAddress || "",
-        receiver: selectedEscrow?.roles?.receiver || "",
-        releaseSigner: selectedEscrow?.roles?.releaseSigner || "",
-        disputeResolver: selectedEscrow?.roles?.disputeResolver || "",
-      },
-      milestones: (selectedEscrow?.milestones || []).map((m: any) => ({
-        description: m?.description || "",
-      })),
-    });
-  }, [selectedEscrow, form]);
-
-  const milestones = form.watch("milestones");
-  const isAnyMilestoneEmpty = milestones.some((m) => m.description === "");
-
-  const handleAddMilestone = () => {
-    const current = form.getValues("milestones");
-    const updated = [...current, { description: "" }];
-    form.setValue("milestones", updated);
-  };
-
-  const handleRemoveMilestone = (index: number) => {
-    const current = form.getValues("milestones");
-    const updated = current.filter((_, i) => i !== index);
-    form.setValue("milestones", updated);
-  };
-
-  const handleAmountChange = (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);
-      }
-    }
-    form.setValue("amount", rawValue);
-  };
-
-  const handlePlatformFeeChange = (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);
-      }
-    }
-    form.setValue("platformFee", rawValue);
-  };
-
-  const handleSubmit = form.handleSubmit(async (payload) => {
-    try {
-      setIsSubmitting(true);
-
-      const finalPayload: UpdateSingleReleaseEscrowPayload = {
-        contractId: selectedEscrow?.contractId || "",
-        signer: walletAddress || "",
-        escrow: {
-          engagementId: payload.engagementId,
-          title: payload.title,
-          description: payload.description,
-          platformFee:
-            typeof payload.platformFee === "string"
-              ? Number(payload.platformFee)
-              : payload.platformFee,
-          amount:
-            typeof payload.amount === "string"
-              ? Number(payload.amount)
-              : payload.amount,
-          receiverMemo: payload.receiverMemo
-            ? Number(payload.receiverMemo)
-            : undefined,
-          trustline: {
-            address: payload.trustline.address,
-            decimals: 10000000,
-          },
-          roles: payload.roles as any,
-          milestones: payload.milestones,
-        },
-      };
-
-      (await updateEscrow.mutateAsync({
-        payload: finalPayload,
-        type: "single-release",
-        address: walletAddress || "",
-      })) as UpdateSingleReleaseEscrowResponse;
-
-      if (!selectedEscrow) return;
-
-      const nextSelectedEscrow: GetEscrowsFromIndexerResponse = {
-        ...selectedEscrow,
-        ...finalPayload.escrow,
-        trustline: {
-          name:
-            selectedEscrow.trustline?.name ||
-            (selectedEscrow.trustline?.address as string) ||
-            "",
-          address: finalPayload.escrow.trustline.address,
-          decimals: finalPayload.escrow.trustline.decimals,
-        },
-      };
-
-      setSelectedEscrow(nextSelectedEscrow);
-      toast.success("Escrow updated successfully");
-    } catch (error) {
-      toast.error(handleError(error as ErrorResponse).message);
-    } finally {
-      setIsSubmitting(false);
-    }
-  });
-
-  return {
-    form,
-    isSubmitting,
-    milestones,
-    isAnyMilestoneEmpty,
-    handleSubmit,
-    handleAddMilestone,
-    handleRemoveMilestone,
-    handleAmountChange,
-    handlePlatformFeeChange,
-  };
-}
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useUpdateEscrowSchema } from "./schema";
+import { z } from "zod";
+import {
+  UpdateSingleReleaseEscrowPayload,
+  UpdateSingleReleaseEscrowResponse,
+} from "@trustless-work/escrow/types";
+import { toast } from "sonner";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { GetEscrowsFromIndexerResponse } from "@trustless-work/escrow/types";
+
+export function useUpdateEscrow() {
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const { getSingleReleaseFormSchema } = useUpdateEscrowSchema();
+  const formSchema = getSingleReleaseFormSchema();
+
+  const { walletAddress } = useWalletContext();
+  const { selectedEscrow, setSelectedEscrow } = useEscrowContext();
+  const { updateEscrow } = useEscrowsMutations();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      engagementId: selectedEscrow?.engagementId || "",
+      title: selectedEscrow?.title || "",
+      description: selectedEscrow?.description || "",
+      platformFee: selectedEscrow?.platformFee as unknown as
+        | number
+        | string
+        | undefined,
+      amount: selectedEscrow?.amount as unknown as number | string | undefined,
+      receiverMemo: selectedEscrow?.receiverMemo
+        ? String(selectedEscrow.receiverMemo)
+        : "",
+      trustline: {
+        address: selectedEscrow?.trustline?.address || "",
+        decimals: 10000000,
+      },
+      roles: {
+        approver: selectedEscrow?.roles?.approver || "",
+        serviceProvider: selectedEscrow?.roles?.serviceProvider || "",
+        platformAddress: selectedEscrow?.roles?.platformAddress || "",
+        receiver: selectedEscrow?.roles?.receiver || "",
+        releaseSigner: selectedEscrow?.roles?.releaseSigner || "",
+        disputeResolver: selectedEscrow?.roles?.disputeResolver || "",
+      },
+      milestones: (selectedEscrow?.milestones || []).map((m: any) => ({
+        description: m?.description || "",
+      })),
+    },
+    mode: "onChange",
+  });
+
+  React.useEffect(() => {
+    if (!selectedEscrow) return;
+    form.reset({
+      engagementId: selectedEscrow?.engagementId || "",
+      title: selectedEscrow?.title || "",
+      description: selectedEscrow?.description || "",
+      platformFee:
+        (selectedEscrow?.platformFee as unknown as
+          | number
+          | string
+          | undefined) || "",
+      amount:
+        (selectedEscrow?.amount as unknown as number | string | undefined) ||
+        "",
+      receiverMemo: selectedEscrow?.receiverMemo
+        ? String(selectedEscrow.receiverMemo)
+        : "",
+      trustline: {
+        address: selectedEscrow?.trustline?.address || "",
+        decimals: 10000000,
+      },
+      roles: {
+        approver: selectedEscrow?.roles?.approver || "",
+        serviceProvider: selectedEscrow?.roles?.serviceProvider || "",
+        platformAddress: selectedEscrow?.roles?.platformAddress || "",
+        receiver: selectedEscrow?.roles?.receiver || "",
+        releaseSigner: selectedEscrow?.roles?.releaseSigner || "",
+        disputeResolver: selectedEscrow?.roles?.disputeResolver || "",
+      },
+      milestones: (selectedEscrow?.milestones || []).map((m: any) => ({
+        description: m?.description || "",
+      })),
+    });
+  }, [selectedEscrow, form]);
+
+  const milestones = form.watch("milestones");
+  const isAnyMilestoneEmpty = milestones.some((m) => m.description === "");
+
+  const handleAddMilestone = () => {
+    const current = form.getValues("milestones");
+    const updated = [...current, { description: "" }];
+    form.setValue("milestones", updated);
+  };
+
+  const handleRemoveMilestone = (index: number) => {
+    const current = form.getValues("milestones");
+    const updated = current.filter((_, i) => i !== index);
+    form.setValue("milestones", updated);
+  };
+
+  const handleAmountChange = (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);
+      }
+    }
+    form.setValue("amount", rawValue);
+  };
+
+  const handlePlatformFeeChange = (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);
+      }
+    }
+    form.setValue("platformFee", rawValue);
+  };
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      /**
+       * Create the final payload for the update escrow mutation
+       *
+       * @param payload - The payload from the form
+       * @returns The final payload for the update escrow mutation
+       */
+      const finalPayload: UpdateSingleReleaseEscrowPayload = {
+        contractId: selectedEscrow?.contractId || "",
+        signer: walletAddress || "",
+        escrow: {
+          engagementId: payload.engagementId,
+          title: payload.title,
+          description: payload.description,
+          platformFee:
+            typeof payload.platformFee === "string"
+              ? Number(payload.platformFee)
+              : payload.platformFee,
+          amount:
+            typeof payload.amount === "string"
+              ? Number(payload.amount)
+              : payload.amount,
+          receiverMemo: payload.receiverMemo
+            ? Number(payload.receiverMemo)
+            : undefined,
+          trustline: {
+            address: payload.trustline.address,
+            decimals: 10000000,
+          },
+          roles: payload.roles as any,
+          milestones: payload.milestones,
+        },
+      };
+
+      /**
+       * Call the update escrow mutation
+       *
+       * @param payload - The final payload for the update escrow mutation
+       * @param type - The type of the escrow
+       * @param address - The address of the escrow
+       */
+      (await updateEscrow.mutateAsync({
+        payload: finalPayload,
+        type: "single-release",
+        address: walletAddress || "",
+      })) as UpdateSingleReleaseEscrowResponse;
+
+      if (!selectedEscrow) return;
+
+      const nextSelectedEscrow: GetEscrowsFromIndexerResponse = {
+        ...selectedEscrow,
+        ...finalPayload.escrow,
+        trustline: {
+          name:
+            selectedEscrow.trustline?.name ||
+            (selectedEscrow.trustline?.address as string) ||
+            "",
+          address: finalPayload.escrow.trustline.address,
+          decimals: finalPayload.escrow.trustline.decimals,
+        },
+      };
+
+      setSelectedEscrow(nextSelectedEscrow);
+      toast.success("Escrow updated successfully");
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  });
+
+  return {
+    form,
+    isSubmitting,
+    milestones,
+    isAnyMilestoneEmpty,
+    handleSubmit,
+    handleAddMilestone,
+    handleRemoveMilestone,
+    handleAmountChange,
+    handlePlatformFeeChange,
+  };
+}

package/templates/handle-errors/handle.ts

@@ -10,23 +10,33 @@ export type ErrorResponse = {
 
 export type WalletError = Pick<ErrorResponse, "message" | "code">;
 
+/**
+ * Handle the error
+ *
+ * @param error - The error
+ * @returns The error response
+ */
 export const handleError = (error: AxiosError | WalletError): ErrorResponse => {
   if (axios.isAxiosError(error)) {
     const axiosError = error as AxiosError<ErrorResponse>;
     const code = axiosError.response?.status || 500;
     const message = axiosError.response?.data?.message || error.message;
+
+    // Map the status code to the error type
     return {
       message,
       code,
       type: mapStatusCodeToErrorType(code),
     };
   } else if (error.code === -4) {
+    // Wallet was closed before transaction was sent
     return {
       message: "Wallet was closed before transaction was sent",
       code: -4,
       type: ApiErrorTypes.WALLET_ERROR,
     };
   } else {
+    // Unknown error
     return {
       message: error.message,
       code: 500,
@@ -35,6 +45,12 @@ export const handleError = (error: AxiosError | WalletError): ErrorResponse => {
   }
 };
 
+/**
+ * Map the status code to the error type
+ *
+ * @param code - The status code
+ * @returns The error type
+ */
 const mapStatusCodeToErrorType = (code: number): ApiErrorTypes => {
   switch (code) {
     case 404:

package/templates/helpers/format.helper.ts

@@ -1,7 +1,20 @@
+/**
+ * Format the currency
+ *
+ * @param value - The value
+ * @param currency - The currency
+ * @returns The formatted currency
+ */
 export const formatCurrency = (value: number, currency: string) => {
   return `${currency} ${value.toFixed(2)}`;
 };
 
+/**
+ * Format the timestamp
+ *
+ * @param ts - The timestamp
+ * @returns The formatted timestamp
+ */
 export function formatTimestamp(ts?: {
   _seconds: number;
   _nanoseconds: number;
@@ -11,10 +24,22 @@ export function formatTimestamp(ts?: {
   return d.toLocaleString();
 }
 
+/**
+ * Format the address
+ *
+ * @param address - The address
+ * @returns The formatted address
+ */
 export function formatAddress(address: string) {
   return `${address.slice(0, 10)}...${address.slice(-4)}`;
 }
 
+/**
+ * Format the role
+ *
+ * @param role - The role
+ * @returns The formatted role
+ */
 export function formatRole(role: string) {
   return role
     .replace(/([A-Z])/g, " $1")
@@ -22,6 +47,12 @@ export function formatRole(role: string) {
     .trim();
 }
 
+/**
+ * Format the text
+ *
+ * @param text - The text
+ * @returns The formatted text
+ */
 export function formatText(text: string) {
   return text.charAt(0).toUpperCase() + text.slice(1);
 }

package/templates/helpers/useCopy.ts

@@ -1,5 +1,10 @@
 import { useState } from "react";
 
+/**
+ * Use copy to clipboard
+ *
+ * @returns The copied key id and the function to copy to clipboard
+ */
 export const useCopy = () => {
   const [copiedKeyId, setCopiedKeyId] = useState(false);
 

package/templates/{escrows/escrow-context → providers}/EscrowAmountProvider.tsx

@@ -37,7 +37,10 @@ export const EscrowAmountProvider = ({ children }: { children: ReactNode }) => {
 
   const setAmounts: AmountEscrowStore["setAmounts"] = useCallback(
     (totalAmount, platformFee) => {
+      // Trustless Work percentage
       const trustlessPercentage = 0.3;
+
+      // Receiver percentage
       const receiverPercentage = 100 - (trustlessPercentage + platformFee);
 
       setReceiverAmount((totalAmount * receiverPercentage) / 100);

package/templates/providers/EscrowDialogsProvider.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import { createContext, useContext, useMemo, useState } from "react";
+
+export type DialogState = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+export type DialogStates = {
+  second: DialogState;
+  successRelease: DialogState;
+};
+
+export type StatusStates = {};
+
+type EscrowDialogsContextType = DialogStates & StatusStates;
+
+const EscrowDialogsContext = createContext<
+  EscrowDialogsContextType | undefined
+>(undefined);
+
+export function EscrowDialogsProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [secondOpen, setSecondOpen] = useState(false);
+  const [successReleaseOpen, setSuccessReleaseOpen] = useState(false);
+
+  const value = useMemo<EscrowDialogsContextType>(
+    () => ({
+      // Detail Escrow Dialog
+      second: { isOpen: secondOpen, setIsOpen: setSecondOpen },
+
+      // Success Release Dialog
+      successRelease: {
+        isOpen: successReleaseOpen,
+        setIsOpen: setSuccessReleaseOpen,
+      },
+    }),
+    [secondOpen, successReleaseOpen]
+  );
+
+  return (
+    <EscrowDialogsContext.Provider value={value}>
+      {children}
+    </EscrowDialogsContext.Provider>
+  );
+}
+
+export function useEscrowDialogs() {
+  const ctx = useContext(EscrowDialogsContext);
+  if (!ctx) {
+    throw new Error(
+      "useEscrowDialogs must be used within EscrowDialogsProvider"
+    );
+  }
+  return ctx;
+}