alex992y / relay-examples-frontend-backend-v5

Repo showcasing how to call the relay from a React UI as well as from node

Relay Examples

This project showcases the implementation of the relay sdk v5 with front end (React) and back end (node) examples. The relay sdk implements ethers v6 that introduces some minor breaking changes when instantiating the providers and creating the payload data. Please refer to the ethers migration guide for further information

Frontend examples

We are using React to showcase the relay-sdk integration

Please add the Gelat Relay sponsorsKey here

yarn start

The implementation code can be found here:

• sponsoredCallERC2771. Link to docs.
• sponsoredCall. Link to docs.
• callWithSyncFee. Link to docs.
• callWithSyncFeeERC2771. Link to docs.

Backend/Node examples

Please copy .env.example to .env and add the GELATO_RELAY_API_KEY, PRIVATE_KEY and ALCHEMY_ID. Then you can run:

sponsoredCallERC2771

yarn testSponsoredCallERC2771

code can be found here and here the docs

sponsoredCall

yarn testSponsoredCall

code can be found here and here the docs

callWithSyncFee

yarn testCallWithSyncFee

code can be found here and here the docs

callWithSyncFeeERC2771

yarn testCallWithSyncFeeERC2771

code can be found here and here the docs

concurrentSponsoredCallERC2771

yarn testConcurrentSponsoredCallERC2771

code can be found here and here the docs

getSignatureDataERC2771 with sponsoredCallERC2771WithSignature

yarn testSponsoredCallERC2771WithSignature

code can be found here and here the docs

getDataToSignERC2771 with sponsoredCallERC2771WithSignature

yarn testSponsoredGetDataToSignERC2771

code can be found here and here the docs

getSignatureDataERC2771 with callWithSyncFeeERC2771WithSignature

yarn testCallWithSyncFeeERC2771WithSignature

code can be found here and here the docs

getDataToSignERC2771 with callWithSyncFeeERC2771WithSignature

yarn testCallWithSyncFeeGetDataToSignERC2771

code can be found here and here the [docs]( and here the docs )

Tracking your Relay Request

WebSocket Subscription

Docs can be found here

Relay-sdk Implementation

    relay.onTaskStatusUpdate((taskStatus: TransactionStatusResponse) => {
      console.log("Task status update", taskStatus);
      fetchStatusSocket(taskStatus, setMessage, setLoading);
    });

Websocket API

 const relayStatusWs = new WebSocket(
      "wss://api.gelato.digital/tasks/ws/status"
    );
      relayStatusWs.onopen = (event) => {
        relayStatusWs.send(
          JSON.stringify({
            action: "subscribe" as string,
            taskId: response.taskId,
          })
        );
        relayStatusWs.onmessage = (event) => {
          fetchStatusSocket(JSON.parse(event.data).payload, setMessage, setLoading);
        };
      }

Polling for Updates

Docs can be found here

code

let status = await relay.getTaskStatus(taskIdToQuery);`

Status

Docs can be found here

 let details = {
        txHash: status?.transactionHash || undefined,
        chainId: status?.chainId?.toString() || undefined,
        blockNumber: status?.blockNumber?.toString() || undefined,
        executionDate: status?.executionDate || undefined,
        creationnDate: status?.creationDate || undefined,
        taskState: (status?.taskState as TaskState) || undefined,
      };
      let body = ``;
      let header = ``;

      let txHash = details.txHash;

      switch (details.taskState!) {
        case TaskState.WaitingForConfirmation:
          header = `Transaction Relayed`;
          body = `Waiting for Confirmation`;
          break;
        case TaskState.Pending:
          header = `Transaction Relayed`;
          body = `Pending Status`;

          break;
        case TaskState.CheckPending:
          header = `Transaction Relayed`;
          body = `Simulating Transaction`;

          break;
        case TaskState.ExecPending:
          header = `Transaction Relayed`;
          body = `Pending Execution`;
          break;
        case TaskState.ExecSuccess:
          header = `Transaction Executed`;
          body = `Waiting to refresh...`;

          destroyFetchTask.next();
          setTimeout(() => {
            console.log("finish");
            setLoading(false);
          }, 2000);

          break;
        case TaskState.Cancelled:
          header = `Canceled`;
          body = `TxHash: ${details.txHash}`;
          destroyFetchTask.next();
          break;
        case TaskState.ExecReverted:
          header = `Reverted`;
          body = `TxHash: ${details.txHash}`;
          destroyFetchTask.next();
          break;
        case TaskState.NotFound:
          header = `Not Found`;
          body = `TxHash: ${details.txHash}`;
          destroyFetchTask.next();
          break;
        case TaskState.Blacklisted:
          header = `BlackListed`;
          body = `TxHash: ${details.txHash}`;
          destroyFetchTask.next();
          break;
        default:
          break;
      }