User experience while using sendTransaction

Question

What is best practice for user experience when sending a transaction? I was blocking UI with a spinner.

I am doing this:

//BlockUI

const sentTransaction = await sendTransaction(transaction)
persistTransactionInDB()

//UnblockUI

This is sometimes taking over 60 seconds to get a response with a transaction, and hence a transactionId I can use to track it.

I could do :

const regularTransaction = sendTransaction(transaction).then(res => persistResponse)

alert('well done, we'll let you know')

...but then if the user navigates away from the page then my function isn't executed?

What is the best way to do this?

Can I or should I somehow off load this to a worker or something?

Answer 1

It will depend on your current infrastructure. The handicap here is when the user closes the page, so you somehow need to store the transactions backlog and recover it when the user is back.

Below are some alternatives I used in former projects:

• Front-end only: you can use the local storage to save the transactions.
• Front-end & Back-end: you can use a database to save the transactions in the back-end, and manage the user connections with websockets in order to know when a user connects or disconnects from the page.
• Etherscan: not recommended, but you could also retrieve transaction status from this centralized website.

In the first two cases, you should create a cron process to manage the transaction queue with a state field to know which ones are 'in progress', 'confirmed' or 'canceled', in order to regularly check if the 'in progress' transactions are eventually confirmed.

The solution might also depend on the framework you are using. Perhaps you can find libraries that can facilitate this process, but in essence, you need a process to go through a transaction queue and a storage to keep this transaction backlog.