Docs

OpenZeppelin

Learn to setup gasless transactions using TransactionButton and OpenZeppelin's gasless relayers.

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 OpenZeppelin. For steps on how to obtain the Relayer URL, refer to the OpenZeppelin documentation.

  • Forwarder Address

    Obtain a Forwarder Address using Biconomy for the specified network. Learn how to obtain a forwarder address from OpenZeppelin documentation

  • 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: "openzeppelin",
            relayerUrl: "...",
            relayerForwarderAddress: "...",
          }}
        >
          Confirm Transaction
        </TransactionButton>
      );
    }