All Categories
Engine
How to use thirdweb engine relayer to send transaction

How to use thirdweb engine relayer to send transaction

We will explore how to use the thirdweb Engine Relayer to send transactions from both your frontend and backend.

 

We will create a relayer on the thirdweb Engine dashboard.

  1. Navigate to the "Relayer" tab on your engine dashboard and click the "Add Relayer" button
      2. Notion image
  1. Fill out the relayer form, providing details such as the backend wallets to use, trusted forwarders, allowed contracts, and so on. Then, click the "Add" button.
      2. Notion image
  1. Save the URL of the relayer from the list for future use.
      2. Notion image
       

Deploy a contract with trusted forwarders

Next, we need to deploy a smart contract using trusted forwarders to relay the transaction. You can obtain default forwarders for the network during the contract deployment by clicking the "get default" button on the dashboard.

Notion image

Claim an NFT on the new contract using a relayer on frontend.


import { createThirdwebClient, getContract } from "thirdweb";
import { defineChain } from "thirdweb/chains";
import {
  ConnectButton,
  TransactionButton,
  useActiveAccount,
} from "thirdweb/react";
import { claimTo } from "thirdweb/extensions/erc721";

function NFTMint() {
  const activeAccount = useActiveAccount();
  const client = createThirdwebClient({
    clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID,
  });
  const contract = getContract({
    client,
    chain: defineChain(YOUR_CHAIN_ID_HERE),
    address: "YOUR_SMART_CONTRACT_ADDRESS",
  });

  return (
    <>
      <ConnectButton
        client={client}
        autoConnect={true}
        connectModal={{ size: "wide" }}
      />

      <TransactionButton
        transaction={() => {
          // Create a transaction object and return it
          const tx = claimTo({
            contract,
            to: activeAccount.address,
            quantity: 1n,
          });
          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: "RELAYER_URL",
          relayerForwarderAddress: "TRUSTED_FORWARDER",
        }}
      >
        Confirm Transaction
      </TransactionButton>
    </>
  );
}
export default NFTMint;
 

Claim an NFT on the new contract using a relayer on backend.

import { defineChain } from "thirdweb/chains";
import { privateKeyToAccount } from "thirdweb/wallets";
import { sendTransaction, getContract, createThirdwebClient } from "thirdweb";
import { claimTo } from "thirdweb/extensions/erc721";

export async function main() {
  const client = createThirdwebClient({
    secretKey: process.env.THIRDWEB_SECRET_KEY,
  });
  const account = privateKeyToAccount({
    client,
    privateKey: process.env.WALLET_PRIVATE_KEY,,
  });
  const contract = getContract({
    client,
    chain: defineChain(YOUR_CHAIN_ID_HERE),
    address: "YOUR_SMART_CONTRACT_ADDRESS",
  });
  const tx = claimTo({
     contract,
     to: "WALLET_TO_CLAIM_NFT_ON",
     quantity: 1n,
  });
  try {
    const transactionResult = await sendTransaction({
      transaction: tx,
      account: account,
      gasless:{
          provider: "engine",
          relayerUrl: "RELAYER_URL",
          relayerForwarderAddress: "TRUSTED_FORWARDER",
       }
    });
  } catch (e) {
    console.log(e)
  }

}
main();
 

Can’t get this working? If you’ve followed the above and still have issues, contact our support team for help.

Did this answer your question?
😞
😐
🤩
Is it possible to change admin wallet on my cloud hosted engine? How to deploy thirdweb Engine to your local machine