Polling Transactions

After sending a transaction over to the network, for the sake of user experience, it's best to poll the transaction status endpoint by periodically checking to know if the transaction is complete. This will let the user using your dapp know in realtime, the status of the current transaction.

Navigating to our src/services/requests.ts file, you will find our method for getting a transaction status called getTransationStatus().

export const getTransationStatus = async (
  statusParams: TransactionStatusParams,
): Promise<TransactionStatusAPIResponse> => {
  try {
    const response = await axios.get<TransactionStatusAPIResponse>(
      `${baseUrl}/transfer/status`,
      { params: { ...statusParams, projectId } },
    );
 
    if (response.status === 404) {
      return { status: 'Not Found ' };
    }
    return response.data;
  } catch (error) {
    console.error('Error fetching transaction status:', error);
 
    return { status: 'Transaction Failed' };
  }
};

The TransactionStatusParams params contains the three properties, namely: id, txHash and projectId

URL: https://swap.prod.swing.xyz/v0/transfer/status

Parameters:

Key	Example	Description
`id`	239750	Transaction ID from `/send` response
`txHash`	0x3b2a04e2d16489bcbbb10960a248.....	The transaction hash identifier.
`projectId`	`replug`	Your project's ID

To poll the /status endpoint, we'll be using setTimeout() to to retry getTransationStatus() over a period of time. We will define a function, pollTransactionStatus(), which will recursively call getTransStatus() until the transaction is completed.

// src/components/Swaps.tsx
 
const pendingStatuses = ["Submitted", "Not Sent", "Pending Source Chain", "Pending Destination Chain"];
 
....
 
async function getTransStatus(transId: string, txHash: string) {
  const transactionStatus = await getTransationStatus({
    id: transId,
    txHash,
  });
 
  setTransStatus(transactionStatus);
 
  return transactionStatus;
}
 
async function pollTransactionStatus(transId: string, txHash: string) {
  const transactionStatus = await getTransStatus(transId, txHash);
 
  if (pendingStatuses.includes(transactionStatus?.status)) {
    setTimeout(
      () => pollTransactionStatus(transId, txHash),
      transactionPollingDuration,
    );
  } else {
    setTransferRoute(null);
  }
}

In our startTransfer() method, we will execute the pollTransactionStatus() right after our transaction is sent over the network

Example:

// src/components/Swaps.tsx
 
setTransStatus({ status: 'Wallet Interaction Required' });
 
const txResponse = await signer?.sendTransaction(txData);
 
pollTransactionStatus(transfer.id.toString(), txResponse.hash);

It's important to note that if the /status endpoint is not queried at least once after a transaction is sent, the transaction will not appear in the Transactions section of your platform's dashboard. Once the transaction's status has been queried, it will be displayed on your dashboard: