fix: drop modal bugs

[hassnian]

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Seems after countdown of 2 minutes gone, empty art rendered #8483

• add: Multiple retries when preloading nft cover

• Closes Drop asked me to subscribe again #8485

• ref: modal steps will not move back to email step if count goes to 0 seconds

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

• Fill up your DOT address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI;

CleanShot.2023-12-12.at.09.28.45.mp4

Copilot Summary

🤖[deprecated] Generated by Copilot at ebb8a1a

Refactored the drop confirmation modal to use a more declarative approach with a modalStep ref and watch effects. Improved the error handling and performance of the NFT image preloading by using the error event and rejecting the promise in preloadImage.

🤖[deprecated] Generated by Copilot at ebb8a1a

To show off an NFT in a modal
We preload the image with a portal
But if there's an error
We don't want to terror
So we reject the promise as normal

[kodabot]

WARNING @hassnian PR for issue #8483 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #8483

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	73b8963
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/657ac897a64a590008ef9e5a
😎 Deploy Preview	https://deploy-preview-8536--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 configuration.

[kodabot]

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

[reviewpad]

AI-Generated Summary: This pull request introduces a modal step change that includes addition of error handling during image preloading and refactors the DropConfirmModal.vue component to improve code clarity and manageability. This gets implemented by adding a 'ModalStep' type and computed properties for various steps of the modal. It also modifies the preloadImage function in dom.ts to add an event listener for 'error' event. Finally, logic is implemented to manage retries during image preloading and modal step changes. This results in a more structured approach to managing the modal steps and image loading process.

[prury]

asking again for subscription problem only truly happened when drop went live, lets see!

minting process:

mintagaindelete.mp4

[hassnian]

asking again for subscription problem only truly happened when drop went live, lets see!

minting process:

mintagaindelete.mp4

yep let's see

[daiagi]

looks good overall
some minor code style suggestions

[sonarqubecloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[codeclimate]

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

View more on Code Climate.

[hassnian]

CleanShot.2023-12-14.at.13.59.30.mp4

CleanShot.2023-12-14.at.14.24.42.mp4

[vikiival]

@hassnian Is it good to go?

[hassnian]

@hassnian Is it good to go?

almost done

[hassnian]

@hassnian Is it good to go?

almost done

oh nevermind wrong pr I thought you meant the pr review that you requested :d , didn't check the pr title

this is ready

[vikiival]

pay 20 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $20 @ 7.49 USD/DOT ~ 2.67 $DOT
🧗 13QUj3pZyFNfYj4AM336hRdyLQbevj5H3sR4PKmLEXLdwZhh
🔗 0xf6b2dbc5eb2a19b345064543f172d0b555722b9be44b15af88054b9f282ef5ed

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