Token Transfer Form

This guide demonstrates how to combine the validation power of useSorobanForm with the execution logic of useContractSend. We will build a form that captures a recipient address and an amount.

Implementation Pattern

The most efficient way to build this is to use two hooks side-by-side. Both hooks point to the same contract and method, which means they share a single network request for the contract specification.

useSorobanForm: Handles input validation as the user types.
useContractSend: Handles the blockchain transaction after the user clicks Submit.

The Complete Form

import { useSorobanForm, useContractSend } from "@sorokit/contract";

export function TransferForm({ contractId }) {
  const { register, handleSubmit, formState } = useSorobanForm({
    contractId,
    method: "transfer",
  });

  const { sendAsync, status } = useContractSend({
    contractId,
    method: "transfer",
  });

  const onSubmit = async (values) => {
    await sendAsync(values);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Recipient</label>
      <input {...register("to")} placeholder="G..." />
      {formState.errors.to && <span>{String(formState.errors.to.message)}</span>}

      <label>Amount (BigInt)</label>
      <input
        type="text"
        {...register("amount", {
          setValueAs: (v) => (v === "" ? undefined : BigInt(v)),
        })}
      />
      {formState.errors.amount && <span>{String(formState.errors.amount.message)}</span>}

      <button disabled={status === "SUBMITTING"}>{status === "IDLE" ? "Send" : status}</button>
    </form>
  );
}

Important Considerations

BigInt Conversion: Smart contracts use high-precision numbers. By using setValueAs, you ensure the string from the HTML input is converted to a bigint before it reaches the Zod validator.
Error Mapping: Notice how formState.errors.to works automatically. Sorokit has already derived the validation rules from the contract’s WASM file.
Loading States: Using the status string from useContractSend is better than a simple boolean because you can show the user exactly where they are in the process (e.g., “SIMULATING”).

Advanced Guides

Monetization

Starters

Token Transfer Form

Implementation Pattern

The Complete Form

Important Considerations

​Implementation Pattern

​The Complete Form

​Important Considerations

Implementation Pattern

The Complete Form

Important Considerations