[UX] Warn users when their account balance is low or insufficient

[ori-near]

Background

Users need a certain amount of NEAR token balance in their wallets to perform actions within NEAR Treasury. Currently, there's no way to see if there is enough funds to complete transactions, which could lead to unexpected problems when trying to perform certain actions. To address this, we need to:

1. Low Balance: Warn users when their balance is getting low so they can add more funds before they're unable to complete transactions.
2. Insufficient Funds: Prevent users from completing transactions when they don't have sufficient funds.

User Story

As a NEAR Treasury user, I want to be warned when my account balance is low so I can add more funds before I'm unable to complete transactions. I also want to be prevented from completing transactions when I don't have enough funds to avoid confusion.

Acceptance Criteria

• Create UX mockups for the two scenarios below. And get feedback from the team.

  • Low Balance Warning:

    • Create a warning bar (e.g. orange) that appears at the top of the app when the user's balance is <= 0.5 NEAR above the minimum required balance. We will dynamically display the user's username, current balance, and the minimum required balance. See attached copy section.
      • The warning should be informative but not alarming, and suggest that the user adds more funds to their account.
      • The user will have the ability to close this warning.

  • Insufficient Funds:

    • Create a warning bar (e.g. red) that appears at the top of the app when the user's balance is insufficient. We will dynamically display the user's username, current balance, and the minimum required balance. See attached copy section.
      • The warning should be informative but not alarming, and suggest that the user adds more funds to their account.
      • The user will NOT have the ability to close this warning.
    • Display a clear hover message on top of any disabled buttons (e.g. submit) that the user needs to add more funds to their account. See attached copy section.

• Create a follow up development ticket for implementing the approved solution

Resources & Additional Notes

Copy

• Low Balance Warning: Hey [user name], your NEAR balance is [current balance], which is getting low. The minimum balance required is [minimum balance]. Please add more NEAR to your account soon to avoid any issues completing actions on your treasury.
• Insufficient Funds: Hey [user name], your don't have enough NEAR to complete actions on your treasury. You need at least [minimum balance]. Please add more funds to your account and try again."
• Hover Copy: Not enough NEAR.

Priority

🟠 P1 : High

[FREZZZBE]

This task is delayed for 1 day. It has no change to finish it today.

[FREZZZBE]

@ori-near Thanks for the detailed solution. I would offer to make an open warning modal instead of a tooltip on hovering. You can see how it looks below. @Megha-Dev-19 let me know if you need something Figma

Warning: Low Balance

Warning: Insufficient Funds

Open warning modal when clicking on Create buttons.

Insuficient.balance.modal.mov

[ori-near]

Hi @FREZZZBE looks great to me and like your solution. @Megha-Dev-19 can you confirm if this will work?

[Megha-Dev-19]

@FREZZZBE looks great. Thanks.