Handle Wait for transaction when user gets disconnected

[midgerate]

I was looking at ways to handle situations where we want to display a loader to the user if their transactions is currently ongoing.
we can use useWaitForTransaction for that. However, how do we handle the case, if the user refreshes the page?

Ideally, I want to be able to fetch user's pending transactions and display a UI suitable to my needs.

What's your thought on this?

[midgerate]

Secondly, how else could I use useWaitForTransaction so that I am able to set loading state elsewhere allowing me to show loaders on the page?

[kesne]

From what I can tell, the refresh case would need to be solved through means outside of this library. I can easily add a useTransaction hook, which would let you use a transaction hash to read the current state of the transaction. I don't think there's a way to get a list of pending transactions though, so you'd need to persist the transaction into localstorage or something to make it resilient to refreshes.

For displaying loading state while you useWaitForTransaction, you just use suspense. There's an example of it here: https://kesne.github.io/ethereal-react/getting-started/contracts/#waiting-for-transactions

[midgerate]

So you are suggesting that I can store the transaction to localstorage and then create a component like this.

const Page = () => {
  const [transaction, setTransaction] = useState()

  useEffect(() => {
    const tx = getTransactionFromLocalStorage()
    setTranasction(tx)
  }, [])

  const SubmitButton = () => {
    // would this throw error if transaction is undefined? 
    useWaitForTransaction(transaction)
    return <button>Submit</button>
  }
  return <Suspense fallback={<>Loading</>}><SubmitButton /></Suspense>
  
}

[kesne]

I'll try to put together an example to demonstrate this next week, it'll require the addition of a new useTransaction hook as well.