feat: update notification display for transaction processing

[jshiohaha]

Description

Right now, the UI only gives feedback after (1) a transaction is confirmed, in which a signature is displayed via a notification, or (2) we are unable to confirm a transaction, and a stringified message is displayed via a notification

In either case, there is a non-zero amount of time between when a user does something related to a transaction and when they see visual feedback. The changes proposed here seek to give immediate visual feedback. However, there is still a lot left on the table to better handle transaction processing, which will come in the FaaS work. This change is only meant to improve the current working thing.

Demo

Current functionality

Users must wait until a transaction is confirmed before seeing a mantine/core notification with the transaction signature(s). If the transaction fails to confirm, the user must wait ~30s before any visual feedback tells them that we were unable to verify the transaction status.

Functionality with proposed updates

Immediately after signed transactions are sent to the cluster, we will display a notification showing the current confirmation status. The user can also click through to view the transaction in an explorer immediately.

metadao-tx-popup.mp4

Note: to reproduce and test the mocked functionality shown above, you can reference this branch on my forked version of the repo here (https://github.com/jshiohaha/meta-dao-frontend/tree/feature/improve-notification-tx-display-with-mock). Once running the branch's code, visit http://localhost:3000/mocked-notifications

Here are example screenshots from minting conditional tokens on a proposal:

Transaction submitted and status is pending

Transaction submitted but unconfirmed within 30s

Transaction submitted and successfully confirmed

Run this branch

There is no special logic to get this branch up and running. Simply follow these steps:

• pull branch
• run npm i
• run npm run dev
• visit http://localhost:3000 in your browser of choice

Testing

• Manual functional testing via human clicks
• Verifying that npm run build runs successfully
• Use a mocked version of the transaction sender (without real transactions) to simulate 1+ sets of transactions with different time-to-completion and chances of successfully finalizing. For convenience, I pushed this code to a separate branch on my repo fork here (https://github.com/jshiohaha/meta-dao-frontend/tree/feature/improve-notification-tx-display-with-mock). Once running the branch's code, you can simply navigate to http://localhost:3000/mocked-notifications.

[LukasDeco]

Just a couple really minor comments on the overall interface. In general though, really fantastic work!!

[R-K-H]

@jshiohaha I've made some changes to support v0.2 and v0.3 which have modified the way some things work, if you could resolve from master, and you're ready I'm happy to get this into the current UI.

[jshiohaha]

Awesome, will update after resolving differences from master. I also have an updated version of send + confirm transaction logic almost ready to take a look at, which I think can build on top of what's here.

These have been resolved, and now are good for merge.

[R-K-H]

LGTM! Let's let er rip!