@trustless-work/blocks 1.1.4 → 1.1.6

package/templates/escrows/load-escrow/dialog/LoadEscrow.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Button } from "__UI_BASE__/button";
+import { Input } from "__UI_BASE__/input";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "__UI_BASE__/dialog";
+import { useLoadEscrow } from "./useLoadEscrow";
+import * as React from "react";
+
+export function LoadEscrowDialog() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { form, isSubmitting, onSubmit } = useLoadEscrow();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button type="button" className="cursor-pointer w-full">
+          Load Escrow
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="!w-full sm:!max-w-xl max-h-[95vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Load Escrow</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="contractIds.0.value"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Contract / Escrow ID</FormLabel>
+                  <FormControl>
+                    <Input placeholder="CAZ6UQX7..." {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button
+              type="submit"
+              className="w-full cursor-pointer"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Loading..." : "Load Escrow"}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/escrows/load-escrow/form/LoadEscrow.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Button } from "__UI_BASE__/button";
+import { Input } from "__UI_BASE__/input";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { useLoadEscrow } from "./useLoadEscrow";
+
+export function LoadEscrowForm() {
+  const { form, isSubmitting, onSubmit } = useLoadEscrow();
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col space-y-6 w-full"
+      >
+        <FormField
+          control={form.control}
+          name="contractIds.0.value"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Contract / Escrow ID</FormLabel>
+              <FormControl>
+                <Input placeholder="CAZ6UQX7..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button
+          type="submit"
+          className="w-full cursor-pointer"
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? "Loading..." : "Load Escrow"}
+        </Button>
+      </form>
+    </Form>
+  );
+}

package/templates/escrows/load-escrow/shared/schema.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+const STELLAR_CONTRACT_ID_REGEX = /^C[A-Z2-7]{55}$/;
+
+export const formSchema = z.object({
+  contractIds: z
+    .array(
+      z.object({
+        value: z
+          .string()
+          .min(1, "Contract ID is required")
+          .regex(STELLAR_CONTRACT_ID_REGEX, "Invalid Stellar Contract ID"),
+      })
+    )
+    .min(1, "At least one contract ID is required"),
+  validateOnChain: z.boolean(),
+});

package/templates/escrows/load-escrow/shared/useLoadEscrow.ts

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { toast } from "sonner";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useGetEscrowFromIndexerByContractIds } from "@trustless-work/escrow/hooks";
+import { GetEscrowsFromIndexerResponse } from "@trustless-work/escrow/types";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { formSchema } from "./schema";
+
+export const useLoadEscrow = () => {
+  const { setSelectedEscrow } = useEscrowContext();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { getEscrowByContractIds } = useGetEscrowFromIndexerByContractIds();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      contractIds: [{ value: "" }],
+      validateOnChain: true,
+    },
+    mode: "onChange",
+  });
+
+  const onSubmit = async (payload: z.infer<typeof formSchema>) => {
+    setIsSubmitting(true);
+
+    try {
+      const data = (await getEscrowByContractIds({
+        contractIds: payload.contractIds.map((item) => item.value),
+        validateOnChain: true,
+      })) as unknown as GetEscrowsFromIndexerResponse[];
+
+      const escrowData = data[0];
+
+      if (!escrowData) {
+        throw new Error("No escrow data received");
+      }
+
+      setSelectedEscrow(escrowData);
+
+      toast.success(
+        "Escrow data fetched successfully. Now you can use the selectedEscrow state"
+      );
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+      form.reset();
+    }
+  };
+
+  return { form, isSubmitting, onSubmit };
+};

package/templates/tanstack/useEscrowsByContractIdsQuery.ts

@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  GetEscrowFromIndexerByContractIdsParams,
+  useGetEscrowFromIndexerByContractIds,
+} from "@trustless-work/escrow";
+import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+
+/**
+ * Use the query to get the escrows by contract ids
+ *
+ * @param params - The parameters for the query
+ * @returns The query result
+ */
+export const useEscrowsByContractIdsQuery = ({
+  contractIds,
+  validateOnChain = true,
+}: GetEscrowFromIndexerByContractIdsParams) => {
+  // Get the escrow by contract ids
+  const { getEscrowByContractIds } = useGetEscrowFromIndexerByContractIds();
+
+  return useQuery({
+    queryKey: ["escrow", contractIds, validateOnChain],
+    queryFn: async (): Promise<Escrow[]> => {
+      if (!contractIds) {
+        throw new Error(
+          "Contract IDs are required to fetch escrows by contract IDs"
+        );
+      }
+
+      /**
+       * Call the query to get escrows by contract ids from the Trustless Work Indexer
+       *
+       * @param params - The parameters for the query
+       * @returns The query result
+       */
+      const escrows = await getEscrowByContractIds({
+        contractIds,
+        validateOnChain,
+      });
+
+      if (!escrows) {
+        throw new Error("Failed to fetch escrows");
+      }
+
+      return escrows;
+    },
+    enabled: !!contractIds,
+    staleTime: 1000 * 60 * 5,
+  });
+};