@trustless-work/blocks 0.0.1

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

@@ -0,0 +1,211 @@
+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/tanstak/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,
+  };
+}

package/templates/handle-errors/errors.enum.ts

@@ -0,0 +1,6 @@
+export enum ApiErrorTypes {
+  NOT_FOUND = "NOT_FOUND",
+  UNAUTHORIZED = "UNAUTHORIZED",
+  UNKNOWN_ERROR = "UNKNOWN_ERROR",
+  WALLET_ERROR = "WALLET_ERROR",
+}

package/templates/handle-errors/handle.ts

@@ -0,0 +1,47 @@
+import axios from "axios";
+import { AxiosError } from "axios";
+import { ApiErrorTypes } from "./errors.enum";
+
+export type ErrorResponse = {
+  message: string;
+  code: number;
+  type: ApiErrorTypes;
+};
+
+export type WalletError = Pick<ErrorResponse, "message" | "code">;
+
+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;
+    return {
+      message,
+      code,
+      type: mapStatusCodeToErrorType(code),
+    };
+  } else if (error.code === -4) {
+    return {
+      message: "Wallet was closed before transaction was sent",
+      code: -4,
+      type: ApiErrorTypes.WALLET_ERROR,
+    };
+  } else {
+    return {
+      message: error.message,
+      code: 500,
+      type: ApiErrorTypes.UNKNOWN_ERROR,
+    };
+  }
+};
+
+const mapStatusCodeToErrorType = (code: number): ApiErrorTypes => {
+  switch (code) {
+    case 404:
+      return ApiErrorTypes.NOT_FOUND;
+    case 401:
+      return ApiErrorTypes.UNAUTHORIZED;
+    default:
+      return ApiErrorTypes.UNKNOWN_ERROR;
+  }
+};

package/templates/helpers/format.helper.ts

@@ -0,0 +1,27 @@
+export const formatCurrency = (value: number, currency: string) => {
+  return `${currency} ${value.toFixed(2)}`;
+};
+
+export function formatTimestamp(ts?: {
+  _seconds: number;
+  _nanoseconds: number;
+}) {
+  if (!ts) return "-";
+  const d = new Date(ts._seconds * 1000);
+  return d.toLocaleString();
+}
+
+export function formatAddress(address: string) {
+  return `${address.slice(0, 10)}...${address.slice(-4)}`;
+}
+
+export function formatRole(role: string) {
+  return role
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (str) => str.toUpperCase())
+    .trim();
+}
+
+export function formatText(text: string) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}

package/templates/helpers/useCopy.ts

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+export const useCopy = () => {
+  const [copiedKeyId, setCopiedKeyId] = useState(false);
+
+  const copyToClipboard = async (text: string) => {
+    await navigator.clipboard.writeText(text);
+    setCopiedKeyId(true);
+    setTimeout(() => setCopiedKeyId(false), 1500);
+  };
+
+  return { copiedKeyId, copyToClipboard };
+};

package/templates/providers/ReactQueryClientProvider.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 30, // 30 minutes
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export function ReactQueryClientProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}

package/templates/providers/TrustlessWork.tsx

@@ -0,0 +1,30 @@
+"use client"; // make sure this is a client component
+
+import React from "react";
+import {
+  // development environment = "https://dev.api.trustlesswork.com"
+  development,
+
+  // mainnet environment = "https://api.trustlesswork.com"
+  mainNet,
+  TrustlessWorkConfig,
+} from "@trustless-work/escrow";
+
+interface TrustlessWorkProviderProps {
+  children: React.ReactNode;
+}
+
+export function TrustlessWorkProvider({
+  children,
+}: TrustlessWorkProviderProps) {
+  /**
+   * Get the API key from the environment variables
+   */
+  const apiKey = process.env.NEXT_PUBLIC_API_KEY || "";
+
+  return (
+    <TrustlessWorkConfig baseURL={development} apiKey={apiKey}>
+      {children}
+    </TrustlessWorkConfig>
+  );
+}

package/templates/tanstak/useEscrowsByRoleQuery.ts

@@ -0,0 +1,87 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  GetEscrowsFromIndexerByRoleParams,
+  useGetEscrowsFromIndexerByRole,
+} from "@trustless-work/escrow";
+import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+
+type UseEscrowsByRoleQueryParams = Omit<
+  GetEscrowsFromIndexerByRoleParams,
+  "role"
+> & {
+  role?: GetEscrowsFromIndexerByRoleParams["role"];
+  enabled?: boolean;
+  validateOnChain?: boolean;
+};
+
+export const useEscrowsByRoleQuery = ({
+  role,
+  roleAddress,
+  isActive = true,
+  page,
+  orderDirection,
+  orderBy,
+  startDate,
+  endDate,
+  maxAmount,
+  minAmount,
+  title,
+  engagementId,
+  status,
+  type,
+  enabled = true,
+  validateOnChain = true,
+}: UseEscrowsByRoleQueryParams) => {
+  const { getEscrowsByRole } = useGetEscrowsFromIndexerByRole();
+
+  return useQuery({
+    queryKey: [
+      "escrows",
+      roleAddress,
+      role,
+      isActive,
+      page,
+      orderDirection,
+      orderBy,
+      startDate,
+      endDate,
+      maxAmount,
+      minAmount,
+      title,
+      engagementId,
+      status,
+      type,
+      validateOnChain,
+    ],
+    queryFn: async (): Promise<Escrow[]> => {
+      if (!role) {
+        throw new Error("Role is required to fetch escrows by role");
+      }
+      const escrows = await getEscrowsByRole({
+        role,
+        roleAddress,
+        isActive,
+        page,
+        orderDirection,
+        orderBy,
+        startDate,
+        endDate,
+        maxAmount,
+        minAmount,
+        title,
+        engagementId,
+        status,
+        type,
+        validateOnChain,
+      });
+
+      if (!escrows) {
+        throw new Error("Failed to fetch escrows");
+      }
+
+      return escrows;
+    },
+    enabled: enabled && !!roleAddress && !!role,
+    staleTime: 1000 * 60 * 5,
+  });
+};

package/templates/tanstak/useEscrowsBySignerQuery.ts

@@ -0,0 +1,78 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  GetEscrowsFromIndexerBySignerParams,
+  useGetEscrowsFromIndexerBySigner,
+} from "@trustless-work/escrow";
+import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+
+interface UseEscrowsBySignerQueryParams
+  extends GetEscrowsFromIndexerBySignerParams {
+  enabled?: boolean;
+  validateOnChain?: boolean;
+}
+
+export const useEscrowsBySignerQuery = ({
+  signer,
+  isActive,
+  page,
+  orderDirection,
+  orderBy,
+  startDate,
+  endDate,
+  maxAmount,
+  minAmount,
+  title,
+  engagementId,
+  status,
+  type,
+  enabled = true,
+  validateOnChain = true,
+}: UseEscrowsBySignerQueryParams) => {
+  const { getEscrowsBySigner } = useGetEscrowsFromIndexerBySigner();
+
+  return useQuery({
+    queryKey: [
+      "escrows",
+      signer,
+      isActive,
+      page,
+      orderDirection,
+      orderBy,
+      startDate,
+      endDate,
+      maxAmount,
+      minAmount,
+      title,
+      engagementId,
+      status,
+      type,
+      validateOnChain,
+    ],
+    queryFn: async (): Promise<Escrow[]> => {
+      const escrows = await getEscrowsBySigner({
+        signer,
+        isActive,
+        page,
+        orderDirection,
+        orderBy,
+        startDate,
+        endDate,
+        maxAmount,
+        minAmount,
+        title,
+        engagementId,
+        status,
+        type,
+        validateOnChain,
+      });
+
+      if (!escrows) {
+        throw new Error("Failed to fetch escrows");
+      }
+
+      return escrows;
+    },
+    enabled: enabled && !!signer,
+    staleTime: 1000 * 60 * 5, // 5 min
+  });
+};