Rebrand DAO Dashboard - Modals

[peterjurco]

Update styles of modals on the staking page based on the new designs. This includes

• Stake / Unstake / Deposit / Withdraw modals
• Unsupported chain modal

[PrenaamD]

@Anboias
Feedback 1
According to the design, "Once staked, you will not be able to unstake your tokens for 7 days." is displayed after the deposit amount is approved, not before. In the implementation, it is always displayed in the deposit modal.

Feedback 2

1. On all the modals, the text should be "How many API3 tokens would you like to ..." instead of "How many tokens would you like to ..."
2. On the Unstaking modal, instead of "Your balance" it should be "Staked tokens"
3. On the Staking modal, instead of "Your balance" it should be "Wallet balance"
4. On the withdraw modal, instead of "Your balance" it should be "Withdrawable tokens"
5. Actually, there seems to be an inconsistency in the design, in the screenshot below, the deposit modal has "your balance" and "wallet balance"

[Anboias]

Thanks for the thorough review, @PrenaamD.

I must agree with @peterjurco's comment here. We only focused on the design part of things, leaving the logic as-is. Would you be so kind to check the above with the Design Team as well? We have a Design meeting later today, perhaps you could join us

[PrenaamD]

@Anboias I think it can be addressed in a separate issue after checking with the design team.

[Anboias]

I think it can be addressed in a separate issue after checking with the design team.

@PrenaamD, agree 🙏

Just for the record, I mentioned this issue in yesterday's design call. I was told that, with a few exceptions, Figma typing is outdated and Production version is the source of truth.

[T9991]

Feedback 1
According to the design, "Once staked, you will not be able to unstake your tokens for 7 days." is displayed after the deposit amount is approved, not before. In the implementation, it is always displayed in the deposit modal.

Will update the designs to reflect this.✅ I think we added it after to draw more attention of something appearing.

Feedback 2: 1. On all the modals, the text should be "How many API3 tokens would you like to ..." instead of "How many tokens would you like to ..."

I completely disagree with this. The token name should be stated.

2. On the Unstaking modal, instead of "Your balance" it should be "Staked tokens"

Can't find this in the designs- I assume it was updated during/after a call?

3. On the Staking modal, instead of "Your balance" it should be "Wallet balance"

Commented to update ✅

4. On the withdraw modal, instead of "Your balance" it should be "Withdrawable tokens" & 5. Actually, there seems to be an inconsistency in the design, in the screenshot below, the deposit modal has "your balance" and "wallet balance"

Commented on the designs to update ✅ Wallet balance should be used for deposit modals. Your balance for staking modals.

[Anboias]

@T9991, have you added all your feedback to this ticket?

After everything is done on your side, we can pick the ticket up and apply the changes in the code. But it helps to have the full list somewhere so that we know what to change.

[T9991]

@Anboias Yes, that's everything