dApp: Deposit limit when TVL cap is exceeded

[kpyszkowski]

Closes: #827
Closes: #805

Changes:

• Add information about the TVL cap excess
• Add information about the remaining TVL
• Disable the deposit button when the TVL cap is exceeded
• Hide the withdrawal button for guests and first time users

Preview:

Note:

• To start with latest TVL changes I set the origin branch to tvl-component.
• If you'd like to test the functionality you can manually modify the cap value in src/constants/staking.ts file.

[netlify]

✅ Deploy Preview for acre-dapp ready!

Name	Link
🔨 Latest commit	5ce853f
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp/deploys/672cdc021b10db00089bcdfe
😎 Deploy Preview	https://deploy-preview-826--acre-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for acre-dapp-testnet ready!

Name	Link
🔨 Latest commit	5ce853f
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp-testnet/deploys/672cdc0237c1740008a6afe3
😎 Deploy Preview	https://deploy-preview-826--acre-dapp-testnet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kkosiorowska]

LGTM, I left only one question and non-blocking comment.

• When the flag is disabled and the user is not connected, we do not display the withdraw button. Currently we always display two buttons. Are we sure we want to change it?

• I think we could improve a bit the loading of elements in the following component. What I mean is that when the user is not connected can see a button and text then later the text disappears and two buttons appear. I think we could add maybe a skeleton for all this row? Of course, this is a non-blocking comment, let's think about it later.

Screen.Recording.2024-11-07.at.14.30.20.mov

[kpyszkowski]

@kkosiorowska

When the flag is disabled and the user is not connected, we do not display the withdraw button. Currently we always display two buttons. Are we sure we want to change it?

It was consulted with Design team and it was confirmed that the Withdrawal button should be hidden under specific conditions. (context)

I think we could add maybe a skeleton for all this row?

I considered it. The purpose of skeletons is to provide a placeholder for content that is not ready yet.
Both the TVL and cap amount are ready as long as user enters the dApp so the skeleton seems pointless here.
I'd ask Design team for an opinion in this matter.

[nkuba]

@kpyszkowski does this PR address #805?