@ravnexchange/react - RAVN

Three hooks that manage the state around quote, execute and status. They never sign or send: bring your own wallet. React 18 or later.

npm install @ravnexchange/react @ravnexchange/sdk

import { RavnClient } from "@ravnexchange/sdk";
import { useRavnQuote, useRavnExecute, useRavnStatus } from "@ravnexchange/react";

const client = new RavnClient(); // create once, pass to every hook

useRavnQuote

const { quote, isLoading, error, isExpired, refetch } = useRavnQuote(client, params);

Fetches whenever params changes (compared by value). Pass null to skip. isExpired turns true when the quote’s expiresAt passes. It doesn’t refetch on its own: stop the user from signing and call refetch().

useRavnExecute

const { execute, data, isLoading, error } = useRavnExecute(client);
const execution = await execute({ quoteToken: quote.quoteToken });

State around client.execute(), for when you send each execution yourself, exactly as Execution types says: send calls in order (approvals included), or on a SIGNATURE mine the approval before signing, and report your fee’s hash as txHash on /status. Simpler: let the core SDK’s executeAndTrack send it, as below.

useRavnStatus

const { status, isLoading, error } = useRavnStatus(client, { quoteToken, ref, txHash }, 4_000);

Polls until success, refunded, failed or unknown, through expired and not_found. Pass null until you have a ref. Use 10,000 to 15,000 ms for a Bitcoin deposit. Stops on errors that can’t succeed on retry (UNAUTHORIZED, INVALID_REQUEST, QUOTE_INVALID, NOT_FOUND).

Together

import { executeAndTrack, ExecuteAndTrackError } from "@ravnexchange/sdk";

function SwapButton({ params }: { params: GetQuoteParams }) {
  const { quote, isExpired, refetch } = useRavnQuote(client, params);
  const [track, setTrack] = useState<{ quoteToken: string; ref: string; txHash?: string } | null>(null);
  const { status } = useRavnStatus(client, track);

  const handleSwap = async () => {
    // Sends the approval, the swap or deposit, and your fee, in order. The hook does the polling.
    // `handlers`: your wallet functions, as on the executeAndTrack page.
    try {
      const result = await executeAndTrack(client, { quoteToken: quote!.quoteToken }, handlers, {
        sendDeposit: true,
        pollUntilTerminal: false,
      });
      if (result.depositNotSent) return; // a deposit it couldn't send: show the address instead
      setTrack({ quoteToken: result.quoteToken, ref: result.statusRef!, txHash: result.statusTxHash });
    } catch (e) {
      // Failed after the swap went out: keep tracking it with what was sent.
      const sent = e instanceof ExecuteAndTrackError ? e.partial : undefined;
      if (!sent?.statusRef) throw e;
      setTrack({ quoteToken: sent.quoteToken!, ref: sent.statusRef, txHash: sent.statusTxHash });
    }
  };

  if (isExpired) return <button onClick={refetch}>Refresh quote</button>;
  return <button onClick={handleSwap}>{status ? status.status : "Swap"}</button>;
}