[UX] Improve transaction submission/cancellation flow

[ori-near]

Background

When users perform actions in NEAR Treasury, such as adding a new member, they click "Submit" to initiate sending the transaction on-chain via BOS. Currently, once the transaction is submitted, our UI doesn't provide clear feedback about the transaction status or allows them to cancel the transaction if needed. This is because we don't have visibility into the transaction's status after it's submitted. As a result, users might be stuck on a loading screen if the transaction fails or is canceled by the user in the subsequent BOS dialogue.

User Story

As a NEAR Treasury user, I want to have a clear understanding of the transaction's status after I submit it. I also want to be able to cancel the transaction if necessary.

Acceptance Criteria

• Create UX mockups for the scenario below. And get feedback from the team.
  • When the user clicks the "Submit" button, disable the "Submit", "Cancel", and "X" close buttons and display a loading indicator.
  • If the transaction is successful within 10 seconds, the user will automatically get redirected to the pending transaction page and see the existing success toast
  • If 10 seconds pass, assume the transaction failed. Change the loading indicator to an error message, allowing the user to try again. Re-enable the "Submit", "Cancel", and "X" close buttons and restore the form fields to their previous state/values before the user clicked submit.

Resources & Additional Notes

Successful Toast

Copy

• Error Message: "Something went wrong. Please try resubmitting the request"
• Loading Indicator: "Processing your request ..." (or something like that)

Priority

🔴 P0 : Critical

[FREZZZBE]

Hey @ori-near @Megha-Dev-19
Here is the solution, which does exactly what was described in this task.

Check this video -> https://github.com/user-attachments/assets/d6a07f42-b03c-4185-8b67-c1d23e26c265

Figma | Prototype

[ori-near]

@FREZZZBE thanks for putting this together! I don't think we will be able to know once user clicks any button on the transaction pop up ... @Megha-Dev-19 can you confirm if this solution works and if not provide any alternative suggestions?

[Megha-Dev-19]

@FREZZZBE as @ori-near said, we don't have access to the user action (if they click on 'confirm' or 'cancel'), I can help you understand in our call today.

[FREZZZBE]

After discussion with @Megha-Dev-19, we decided to trigger this loader by clicking submit (not confirm).