feat(ui): two-step signing process to add staking pools

[drichar]

Transaction signing will fail in certain wallets if the signature request isn't triggered by a user action (e.g., a button click). This is a security measure to prevent an app from initiating transaction signatures without the user's knowledge or consent.

Adding a staking pool is a two step process:

1. select a node and create the pool
2. MBR payment to satisfy the pool's storage requirements

The AddPoolModal component now presents these actions on a numbered timeline with a progress bar underneath. Once the user selects a node and submits the form, the first signature request is triggered.

Upon success a green check appears next to step 1 and its content collapses, while step 2 is expanded/highlighted and the progress bar advances. A button must be clicked again to initiate the MBR payment.

Previously the MBR payment would automatically be triggered on successful pool creation. While Pera/Defly/KMD all support this, Lute Wallet does not and the second transaction request fails (leaving the pool in an invalid "limbo" state).

Other Changes

Speaking of that "limbo" state, I've also limited the ways this modal can be closed. This is to prevent someone from creating the pool and closing the modal (intentionally or accidentally) before sending the MBR payment. Now the only ways to close theAddPoolModal are:

• clicking the X button in the top corner
• pressing Esc
• (Ideally) clicking the "Finish (Close)" button that appears after both transactions have been signed and sent

Finally, a proper ErrorAlert component is added here that will be used going forward vs the simple placeholder <p>Error</p> that has been used since early development.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
reti	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2024 4:12pm