Obtener saldos de múltiples escrows

El formulario ideal para este endpoint.

Esquema

Esto valida un formulario de escrow usando Zod, incluyendo direcciones de billetera.

import { z } from "zod";

export const formSchema = z.object({
  signer: z.string().min(1, "Se requiere la dirección del firmante"),
  direcciones: z
    .array(
      z.object({
        valor: z.string().min(1, "La dirección es obligatoria"),
      })
    )
    .min(1, "Se requiere al menos una dirección"),
});

Hook Personalizado

Esto contiene toda la lógica del formulario, incluida la validación del esquema, la función onSubmit y otros estados y funcionalidades.

import { useWalletContext } from "@/providers/wallet.provider";
import { useState } from "react";
import { useForm, useFieldArray } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { formSchema } from "../schemas/get-multiple-escrow-balances-form.schema";
import { toast } from "sonner";
import { escrowService } from "../services/escrow.service";
import { GetBalanceParams } from "@/@types/escrows/escrow-payload.entity";
import { EscrowRequestResponse } from "@/@types/escrows/escrow-response.entity";

type FormData = z.infer<typeof formSchema>;

export const useGetMultipleEscrowBalancesForm = () => {
  const { walletAddress } = useWalletContext();
  const [loading, setLoading] = useState(false);
  const [response, setResponse] = useState<EscrowRequestResponse | null>(null);

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      signer: walletAddress || "",
      direcciones: [{ valor: "" }],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control: form.control,
    nombre: "addresses",
  });

  const onSubmit = async (payload: FormData) => {
    setLoading(true);
    setResponse(null);

    // Transformar la carga útil al formato correcto
    const transformedData: GetBalanceParams = {
      addresses: payload.addresses.map((a) => a.value),
      signer: payload.signer,
    };

    try {
      /**
       * Llamada API usando el servicio escrow
       * @Note:
       * - Necesitamos especificar el endpoint y el método
       * - Necesitamos especificar que returnEscrowDataIsRequired es false
       * - El resultado será un EscrowRequestResponse
       */
      const balances = (await escrowService.execute({
        payload: transformedData,
        endpoint: "/helper/get-multiple-escrow-balance",
        method: "get",
        requiresSignature: false,
        returnEscrowDataIsRequired: false,
      })) as EscrowRequestResponse;

      /**
       * @Responses:
       * balances !== null
       * - Saldos de escrow recibidos con éxito
       * - Establecer la respuesta
       * - Mostrar un toast de éxito
       *
       * balances === null
       * - Mostrar un toast de error
       */
      if (balances) {
        setResponse(balances);
        toast.info("Saldos de escrow recibidos");
      }
    } catch (err) {
      toast.error(
        err instanceof Error ? err.message : "Ocurrió un error desconocido"
      );
    } finally {
      setLoading(false);
    }
  };

  return { form, loading, response, fields, append, remove, onSubmit };
};

Formulario

Este formulario está construido con react hook form. Usamos el hook personalizado y el esquema zod mencionados anteriormente.

"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from "@/components/ui/form";
import { useGetEscrowForm } from "../../hooks/get-escrow-form.hook";
import { ResponseDisplay } from "@/components/utils/response-display";

export function GetEscrowForm() {
  const { form, loading, response, onSubmit } = useGetEscrowForm();

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="contractId"
          render={({ field }) => (
            <FormItem>
              <FormLabel>ID del Contrato / Escrow</FormLabel>
              <FormControl>
                <Input placeholder="CAZ6UQX7..." {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="signer"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Dirección del Firmante</FormLabel>
              <FormControl>
                <Input disabled placeholder="GSIGN...XYZ" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button type="submit" className="w-full" disabled={loading}>
          {loading ? "Obteniendo escrow..." : "Obtener escrow"}
        </Button>
      </form>

      <ResponseDisplay response={response} />
    </Form>
  );
}