React SDK

React hooks and components for Grat integration.

The React SDK is currently planned for Phase 4. You can use the TypeScript SDK directly within your React components today to build zero-gas experiences.

Using the TypeScript SDK in React Today

You can easily integrate Grat by initializing the client in a configuration file and using it within your event handlers or custom hooks.

import { useState } from 'react';
import { Grat } from '@grat-official-sdk/sdk';
import { buildPaymentTx } from './stellar-utils'; // Your tx builder

const grat = Grat.testnet();

export function SendButton({ userKp }) {
  const [loading, setLoading] = useState(false);

  const handleSend = async () => {
    setLoading(true);
    try {
      // 1. Build and sign your transaction
      const tx = await buildPaymentTx(userKp);
      tx.sign(userKp);

      // 2. Sponsor via Grat
      const result = await grat.sponsor(tx);
      alert(`Sent! Hash: ${result.hash}`);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <button onClick={handleSend} disabled={loading}>
      {loading ? 'Sponsoring...' : 'Send USDC'}
    </button>
  );
}

Planned Hooks API

The future React SDK will provide a collection of hooks to handle state management, loading indicators, and error states automatically.

useSponsor()

Returns a function to sponsor transactions and the current execution state.

const { sponsor, data, error, isLoading } = useSponsor();

useSimulate()

Calculates Soroban resource fees and diagnostic events for a transaction.

const { simulate, data: simulation } = useSimulate(tx);

useRelayStatus()

Polls the health and metadata of the configured relay server.

const { status, isOnline } = useRelayStatus();

useCreditBalance()

Fetches and updates the remaining credit balance for the project API key.

const { balance } = useCreditBalance();

useGrat()

Provides access to the raw Grat client instance via React Context.

const grat = useGrat();

View on GitHub