buy flow

[daiagi]

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 QA check

• @kodadot/qa-guild please review

Testing

3 relevant places:
shopping cart, Gallery Item page, and explore
clicking buy in these places while not connected should

1. open connect wallet modal
2. after a successful wallet connection => close the wallet modal and open the complete purchase modal

clicking buy while wallet is connected => just open confirmation modal

@exezbcz
showing the loader spinner on the button and keeping the button visible while the wallet modal is open turned out quite challenging and is not included in this PR.

Context

• Closes Buy now flow  #6372
• 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 e3c875b

This pull request enhances the user experience of buying items from the gallery by adding a custom connect event to the ConnectWalletModal.vue component and using it to open the CompletePurchaseModal.vue component after connecting the wallet. It also refactors the openConnectWalletModal function in the useConnectWallet.ts file to accept an optional object with a callback function and a flag to control the modal closing behavior. It updates the ShoppingCartModal.vue and GalleryItemBuy.vue components to use the modified function and pass the appropriate parameters.

🤖 Generated by Copilot at e3c875b

openConnectWallet
closes after connection
autumn leaves fall fast

[kodabot]

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

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	1846c70
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64d0ec1bebd5d2000896d804
😎 Deploy Preview	https://deploy-preview-6596--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.

[reviewpad]

AI-Generated Summary: This pull request introduces changes to enhance the user experience in regards to the process of connecting the wallet and making a purchase in an e-commerce application. More specifically, the changes consist of opening the "confirm purchase" modal once the wallet connection is successfully established. The patch adjusts several Vue.js components, notably the ConnectWalletModal.vue, and useConnectWallet.ts, ShoppingCartModal.vue, the GalleryItemBuy.vue and the ItemsGridImage.vue. It modifies the behavior of the wallet connection event, triggering additional actions upon successful connection, such as closing the modal or proceeding to complete purchase. This helps in streamlining and improving the buying process for users.

[exezbcz]

• looks like its not absolute position or?
• steps: go to explore, click buy now, connect wallet, then this appears - its closed after like 3 sec, but I could not see the confirmation dialog anymore

[daiagi]

@exezbcz unrelated to this PR. it happens on kodadot.xyz as well
when the shopping cart Pr was merged it worked. something broke since then

[roiLeo]

something broke since then

Hello! maybe it's me from #6575 could you try with #6591 patch?

[daiagi]

something broke since then

Hello! maybe it's me from #6575 could you try with #6591 patch?

yes I suspect the same.
on my local shopping cart branch it works well

could you try with #6591 patch?

how?

[roiLeo]

how?

apply same change, or merge it on your PR

[daiagi]

what is this witchcraft?
it does solve the problem

how is scoped on neoButton style cause this?

[roiLeo]

how is scoped on neoButton style cause this?

[exezbcz]

So, is it ready for testing sir?

I got this when I opened the link

also, I see some corner radius 👀 not yet on app, please

[daiagi]

So, is it ready for testing sir?

yes

I got this when I opened the link

that's because you didn't close the modal when it was buggy, and the app state is persistent

also, I see some corner radius eyes not yet on app, please

I'll make another PR for that. don't want to mix it here

[Jarsen136]

It would be better if we could reuse this part by a composable.

if (!isLogIn.value) {
    openConnectWalletModal(instance, {
      onConnect: callback,
      closeAfterConnect: true,
    })
  } else {
    callback()
  }

[codeclimate]

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

View more on Code Climate.

[daiagi]

It would be better if we could reuse this part by a composable.

Thanks @Jarsen136
Done

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[prury]

Testing
3 relevant places:
shopping cart, Gallery Item page, and explore
clicking buy in these places while not connected should
open connect wallet modal
after a successful wallet connection => close the wallet modal and open the complete purchase modal
clicking buy while wallet is connected => just open confirmation modal

they all work, thanks for the guidance

[yangwao]

pay 50 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $50 @ 5.05 USD/DOT ~ 9.901 $DOT
🧗 1cAsKZYNRb8dkSCpn4eVkEn6ycNZTGoDo5dGDgB8J1UUWK8
🔗 0x986c5f8bca8215babb6855ee26a0d9d58445991d2c7300e50abe666166f86f34

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