dApp: Deposit/Withdrawal form improvements - visuals

[kpyszkowski]

Closes: #629
Closes: #652
Closes: #637
Closes: #570
Closes: #630

Changes:

• Adjusted styles: spacings, button styles, input
• Form input is automatically focused as the form appears
• Added stake form input placeholder
• Added withdrawal form input placeholder
• Disabled submit button when amount is invalid
• Removed fiat-converted amount displayed below the input
• Displayed validation errors as Alert component
• Adjusted validation strategy
• Updated input displayed value formatting function to use bigIntToUserAmount instead of fixedPointNumberToString:
  • The fixedPointNumberToString aggressively trims trailing zero values conflicting with the way NumericFormat component does it. The bigIntToUserAmount seems to fit better here
• Updated copies
• Conditionally styled balance amount for invalid state
• Added suffix currency symbol value

Screen.Recording.2024-08-19.at.21.57.03.mov

[netlify]

✅ Deploy Preview for acre-dapp ready!

Name	Link
🔨 Latest commit	880bbd9
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp/deploys/66c5aab43276770008807ac6
😎 Deploy Preview	https://deploy-preview-687--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	880bbd9
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp-testnet/deploys/66c5aab4e8e75d0008b993c5
😎 Deploy Preview	https://deploy-preview-687--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]

Overall it looks good, I just left some comments. I haven't tested it yet, but I noticed one bug.

Solution:

Design:

[kkosiorowska]

I left some comments. But I also noticed that build and format Github actions failed.

[kkosiorowska]

LGTM, ready for testing 🚀

[michalinacienciala]

On the Withdraw form the Wallet balance label should be replaced by Acre balance, as per this comment.

[michalinacienciala]

The input field should show a grey 'BTC' text after the amount entered by the user.

Design:

Actual:

[michalinacienciala]

As per this doc and this Discord discussion, we shouldn't show errors relating to the values entered in the amount input until user clicks Deposit/Withdraw. Right now we're validating the amount dynamically.
Also, the Deposit/Withdraw button should be disabled only freshly after user clicked on it and the validation failed. Afer that any change to the amount field should enable the button.

[michalinacienciala]

Also, just making sure - the handling of the insufficient balance to handle fee is not in scope of this PR, right?

[kpyszkowski]

@michalinacienciala

The input field should show a grey 'BTC' text after the amount entered by the user.

In designs to looks like the value is mapped over placeholders. It requires the entire component to be rebuilt because we don't have such functionality and it's not how native inputs work. I suppose it would be too much time consuming for us. I'd suggest to skip it.

It is possible to add suffix to the value. Unfortunately it's impossible to style it so it will be the same color as the value.

Ref commit: 8e1f875

The amount in the input field should not change the color to red when there's a failure of the validation.

Ref commit: 07b172e

The value inside the input field should be 0.015 BTC, not 0.0150 BTC (and for withdrawal: 0.01 BTC instead of 0.0100 BTC)

Ref commit: a599749

As per this doc and this Discord discussion, we shouldn't show errors relating to the values entered in the amount input until user clicks Deposit/Withdraw. Right now we're validating the amount dynamically.
Also, the Deposit/Withdraw button should be disabled only freshly after user clicked on it and the validation failed. Afer that any change to the amount field should enable the button.

Functionalities you describe are impossible to implement with Formik - the library we use. It's impossible to track the state before first submit. About the form behavior that's all we can do.

Sorry, I misunderstood the requirements. I reviewed possibilities and applied requested changes basing on Coda write up.

• The value is validated only on submit button click
• The error state is reset on the change event triggered on input
• The insufficient balance to cover network fee case is not covered since it requires to somehow estimate network fee values. It will be covered in separate PR to prevent blocking this PR

Ref commit: a72361a

Added video presentation in the PR description.

[michalinacienciala]

Also, just making sure - the handling of the insufficient balance to handle fee is not in scope of this PR, right?

@kpyszkowski I think you missed this one

[michalinacienciala]

Regarding the two items deemed as impossible / hard to implement - I asked @SorinQ about the approach we should take here. Anyway, we can probably close this PR without those changes and handle them in separate tasks (as soon as we resolve all other issues in the current PR).

[kkosiorowska]

Overall it looks good. I left a few small questions. Let me know what you think.

Additionally, I will wait for the merge until tomorrow in case Michalina finds a moment to test. If not, we will do the merge tomorrow.

[kkosiorowska]

🚀🚀🚀

[kkosiorowska]

Confirmed works great! 🚀