feat: Success notification unlockable drop

[Jarsen136]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Needs Design check

• @exezbcz please review

Context

• Closes Success notification unlockable drop  #6204
• Requires deployment <snek/rubick/worker>

Did your issue had any of the "$" label on it?

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at 2f58564

Added a new UnlockableLoader component to improve the user experience when minting and viewing unlockable NFTs. Replaced the old Loader component with the new one in the UnlockableContainer component. Used some components and hooks from the @kodadot1/brick library.

🤖 Generated by Copilot at 2f58564

To mint NFTs with a flair
We added a new UnlockableLoader there
It uses some hooks and props
And some Neo components on top
And shows a congrats message with care

[kodabot]

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

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	cdff8b3
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6489d71568db1200080f94fb
😎 Deploy Preview	https://deploy-preview-6213--koda-canary.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.

[reviewpad]

AI-Generated Summary: This pull request introduces a new feature for displaying a success notification when an unlockable drop is minted. It adds a new component called UnlockableLoader.vue and makes minor modifications to the UnlockableContainer.vue component. The success notification is shown for 30 seconds after minting and includes a "View Item" button.

[exezbcz]

Great work! Is there a way to activate the popup without minting the NFT? Could you guide me to a resource where I can find more information on this? Thanks!

[Jarsen136]

Great work! Is there a way to activate the popup without minting the NFT? Could you guide me to a resource where I can find more information on this? Thanks!

Yes, I have made a preview env for testing. Opening the page with parms ?redesign=true, the popup would be active auto and then the button would be changed after a few seconds.
https://deploy-preview-6213--koda-canary.netlify.app/stmn/unlockable?redesign=true

I will remove this testing logic before the PR is about to merge.

[roiLeo]

Text look a bit small on figma

Why don't we unify component between these two

[exezbcz]

@roiLeo its a different success, the one for drop page is in figma drop page

edit: Yeah, I will make some changes

[yangwao]

merging?

[roiLeo]

in anticipation of a unified design, let's roll

[exezbcz]

Okay, sorry for changing it now. Let's make the text 16px

Ad @roiLeo We plan to implement a unified design that includes redesigned notification toasts. It seems that this style will be used for most of our notifications.

[Jarsen136]

Okay, sorry for changing it now. Let's make the text 16px

✅ Updated

[exezbcz]

okay, a few minor changes

• make the background the same as with opening the wallet connect sidebar - if its already, my bad :D
• The button should be 16px font size
• make the box close only with the close icon because otherwise, it could happen you accidentally close it.

Thanks!

Maybe + change the copy a bit and add that it will be visible in the 30s on your profile, for people that closed the dialog :D

[codeclimate]

Code Climate has analyzed commit cdff8b3 and detected 0 issues on this pull request.

View more on Code Climate.

[Jarsen136]

okay, a few minor changes

• make the background the same as with opening the wallet connect sidebar - if its already, my bad :D
• make the box close only with the close icon because otherwise, it could happen you accidentally close it.

It's already there.

• The button should be 16px font size
  Maybe + change the copy a bit and add that it will be visible in the 30s on your profile, for people that closed the dialog :D

✅ Updated

[exezbcz]

It's already there.

Cool, I think I will create one more issue for some small things, I don't want to hold up this one. Thanks!

visual oki 🏁

[yangwao]

pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 4.74 USD/DOT ~ 6.329 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x84c23fa2b4fd20e12a49840de308b4091c5f695e6dfe94c0cd65a186e633b6a6

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