Show user balance at minting screen

[Jarsen136]

Thank you for your contribution to the KodaDot NFT gallery.
👇 _ Let's make a quick check before the contribution.

PR type

• Bugfix
• Feature
• Refactoring

What's new?

• PR closes Show user balance at minting screen #3459
• Requires deployment <rubick/magick_issue>
• <brief_description_of_what_I've_added>

Before submitting Pull Request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </rmrk/collection/26902bc2f7c20c546a-1FVG7>
• I've tested PR on mobile and everything seems works
• I found edge cases
• I've written some unit tests 🧪

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot

• My fix has changed something on UI; a screenshot is best to understand changes for others.

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	be01f07
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/62d6c67b53262800099406bb
😎 Deploy Preview	https://deploy-preview-3473--koda-nuxt.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 settings.

[kodabot]

SUCCESS @Jarsen136 PR for issue #3459 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[damskyftw]

Works for me

[roiLeo]

Can you rename component to <AccountBalance />?
I find it more meaningfull

[petersopko]

I know the issue described only adding the balance so user can see what's wrong, but perhaps we don't want to let user run into the error itself? Can we disable submit buttons on create nfts/create collections, if the balance is 0 with tooltip informing there's a balance issue? wdyt @roiLeo @Jarsen136 I'm still runing into this:

[Jarsen136]

I know the issue described only adding the balance so user can see what's wrong, but perhaps we don't want to let user run into the error itself? Can we disable submit buttons on create nfts/create collections, if the balance is 0 with tooltip informing there's a balance issue? wdyt @roiLeo @Jarsen136 I'm still runing into this:

Even if the balance is great than 0, it may still face this warning `account balance too low.
How about creating another issue to trace it.

1. limit submit button if balance is 0.
2. Estimate the transaction gas fee and display a friendly tip to tell user has not enough balance, before they click submit.
3. ..any idea?

(btw: This PR is about building a reusable component to show user balance)

[roiLeo]

I'm not really a fan of disabled pattern as it can cause some frustrating for the UX.
To me, it should appear when user made an error in a form input AND with the error displayed near the inputs.
In this case, that can work too but i find it important to show a sentence which explains why the button has been disabled.

Tooltip component is more of a "Helper" and shouldn't be used to inform user has not enough founds + think about mobile user. (ref #3324, MaterialDesign)

[petersopko]

Tooltip component is more of a "Helper" and shouldn't be used to inform user has not enough founds + think about mobile user. (ref #3324, MaterialDesign)

sure, good to know, whatever works for you and won't result in user seeing that error 😆

[yangwao]

I'm not really a fan of disabled pattern as it can cause some frustrating for the UX.
To me, it should appear when user made an error in a form input AND with the error displayed near the inputs.
In this case, that can work too but i find it important to show a sentence which explains why the button has been disabled.

✅

[roiLeo]

Let's merge this one and open new issue for when user hasn't enough balance to mint.

[yangwao]

pay 100 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $100 @ 68.13 USD/KSM ~ 1.468 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0x17389c2d66cb8bf468cc084084ff1401e3e500b27a13f071bdd1830a4f0d3722

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues