useGaslessTransaction

import { useGaslessTransaction, useGlacier } from '@avalabs/avacloud-waas-react';
 
function CounterExample() {
  // Retrieve the current subnet RPC URL from Glacier
  const { blockchain } = useGlacier();
 
  const gaslessConfig = {
    relayerUrl: 'https://gas-relayer.avax-test.network/printedapr/testnet/rpc', // AvaCloud relayer RPC
    subnetRpcUrl: blockchain?.rpcUrl || '',                                    // Target subnet RPC
    forwarderAddress: '0x52ec85e43d09889b2bf9e431935356e06f023680',            // AvaCloud forwarder
    domainName: 'Counter',
    domainVersion: '1',
    requestType: 'Message',
    suffixType: 'bytes32',  // Optional – request suffix type
    suffixName: 'XMKUCJONOFSUSFCYHTYHCLX', // Optional – request suffix name
  } as const;
 
  // Counter contract information
  const COUNTER_CONTRACT_ADDRESS = '0xe4bB5F15dc278197FcE9B21e5aC0442a95e25b5f';
  const COUNTER_INCREMENT_ABI = [
    {
      inputs: [],
      name: 'increment',
      outputs: [],
      stateMutability: 'nonpayable',
      type: 'function',
    },
  ] as const;
 
  const {
    sendGaslessTransaction,
    isLoading,
    error,
    txHash,
    reset,
  } = useGaslessTransaction({
    gaslessConfig,
    contractAddress: COUNTER_CONTRACT_ADDRESS,
    abi: COUNTER_INCREMENT_ABI,
  });
 
  const handleIncrement = () =>
    sendGaslessTransaction({ functionName: 'increment' });
 
  return (
    <div>
      <button onClick={handleIncrement} disabled={isLoading}>
        Increment counter (no gas)
      </button>
 
      {isLoading && <p>Sending transaction…</p>}
      {txHash && <p>Transaction hash: {txHash}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
 
      <button onClick={reset}>Reset</button>
    </div>
  );
}