Docs

Engine

Learn to setup gasless transactions using TransactionButton and Engine

This guide assumes you have already installed Connect SDK into your application. If you have not, please refer to the quickstart guide.

  • Relayer URL

    Obtain the Relayer URL using Engine. For steps on how to obtain the Relayer URL, refer to the Engine relayer guide.

  • Add transaction button

    Add a transaction button for the method you want to sponsor funds for. Pass in the relayerUrl and relayerForwarderAddress

    function Example() {
      return (
        <TransactionButton
          transaction={() => {
            // Create a transaction object and return it
            const tx = prepareContractCall({
              contract,
              method: "mint",
              params: [address, amount],
            });
            return tx;
          }}
          onTransactionSent={(result) => {
            console.log("Transaction submitted", result.transactionHash);
          }}
          onTransactionConfirmed={(receipt) => {
            console.log("Transaction confirmed", receipt.transactionHash);
          }}
          onError={(error) => {
            console.error("Transaction error", error);
          }}
          gasless={{
            provider: "engine",
            relayerUrl: "...",
            relayerForwarderAddress: "...",
          }}
        >
          Confirm Transaction
        </TransactionButton>
      );
    }