fix: Connected on Polkadot, opening Base link on Koda, mint ing - starts loading

[Jarsen136]

Thank you for your contribution to the Koda - Generative Art Marketplace.

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

PR Type

• Bugfix

Needs QA check

• @kodadot/qa-guild please review

Context

• Closes Connected on Polkadot, opening Base link on Koda, minting - starts loading #10753

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

• My DOT address: Payout

Screenshot 📸

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

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	7408760
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/66b86ca0c250bd000862c16a
😎 Deploy Preview	https://deploy-preview-10772--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.

[vikiival]

@JustLuuuu is OOO

• https://github.com/kodadot/ops-internal/discussions/1781#discussioncomment-10242554

[hassnian]

small, otherwise LGTM

code issue

[vikiival]

cc @Jarsen136

[Jarsen136]

All should have been updated. May I get your code review again? @hassnian

[hassnian]

All should have been updated. May I get your code review again? @hassnian

Could you do #10772 (comment)

This way 'useDoAfterReconnect' takes at least on success and we can have open 'openReconnectModal' without anything passed like https://github.com/Jarsen136/nft-gallery/blob/issue-10753/composables/useDoAfterlogin.ts

Tyvm

[Jarsen136]

All should have been updated. May I get your code review again? @hassnian

Could you do #10772 (comment)

This way 'useDoAfterReconnect' takes at least on success and we can have open 'openReconnectModal' without anything passed like https://github.com/Jarsen136/nft-gallery/blob/issue-10753/composables/useDoAfterlogin.ts

Tyvm

Updated

[hassnian]

@Jarsen136 did you push your changes ?

related?

[Jarsen136]

related?

Yes, there is something wrong on GitHub I guess. Let me try to push another commit.

[sonarcloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[hassnian]

@Jarsen136 dont remove the useReconnectModal use the openreconnectmodal there

[Jarsen136]

@Jarsen136 dont remove the useReconnectModal use the openreconnectmodal there

Do you mean like this?

const { openReconnectWalletModal } = useReconnectModal()

I don't get the benefit or major difference of using it as a composable instead of utils function.
Could you explain a bit? In the previous implementation, it was a composable function but with a different name.

[hassnian]

@Jarsen136 dont remove the useReconnectModal use the openreconnectmodal there

Do you mean like this?

const { openReconnectWalletModal } = useReconnectModal()

I don't get the benefit or major difference of using it as a composable instead of utils function. Could you explain a bit? In the previous implementation, it was a composable function but with a different name.

sure, I was thinking something like this

export default function () {
  const { getWalletVM, getIsWalletVMChain } = storeToRefs(useWalletStore())

  const needsReconnect = computed(() => getWalletVM.value && !getIsWalletVMChain.value) // computed can be removed if it's not needed outside of this composable

  const doAfterReconnect = ({ onSuccess, onCancel }) => {
    if (needsReconnect.value) {
      openReconnectWalletModal({
        onConnect: onSuccess,
        onCancel,
        closeAfterConnect: true,
      })
    }
    else {
      onSuccess()
    }
  }

  return {
    doAfterReconnect,
    needsReconnect
  }
}

this way you can remove getWalletVM.value && !getIsWalletVMChain.value) that was being duplicated

this

  if (getWalletVM.value && !getIsWalletVMChain.value) {
    openReconnectWalletModal()
    return
  }
  emit('mint')

becomes

  useDoAfterReconnect({ onSuccess: () => {
      emit('mint')
  }})

if you need more control you can create and use needsReconnect and openReconnectWalletModal independently

[Jarsen136]

@Jarsen136 dont remove the useReconnectModal use the openreconnectmodal there

Do you mean like this?

const { openReconnectWalletModal } = useReconnectModal()

I don't get the benefit or major difference of using it as a composable instead of utils function. Could you explain a bit? In the previous implementation, it was a composable function but with a different name.

sure, I was thinking something like this

export default function () {
  const { getWalletVM, getIsWalletVMChain } = storeToRefs(useWalletStore())

  const needsReconnect = computed(() => getWalletVM.value && !getIsWalletVMChain.value) // computed can be removed if it's not needed outside of this composable

  const doAfterReconnect = ({ onSuccess, onCancel }) => {
    if (needsReconnect.value) {
      openReconnectWalletModal({
        onConnect: onSuccess,
        onCancel,
        closeAfterConnect: true,
      })
    }
    else {
      onSuccess()
    }
  }

  return {
    doAfterReconnect,
    needsReconnect
  }
}

this way you can remove getWalletVM.value && !getIsWalletVMChain.value) that was being duplicated

this

  if (getWalletVM.value && !getIsWalletVMChain.value) {
    openReconnectWalletModal()
    return
  }
  emit('mint')

becomes

  useDoAfterReconnect({ onSuccess: () => {
      emit('mint')
  }})

if you need more control you can create and use needsReconnect and openReconnectWalletModal independently

Now I understand your concern and you would like to reuse the check condition getWalletVM.value && !getIsWalletVMChain.value). However, this check condition is not universal and does not apply to all cases.

// 1. components/carousel/CarouselTypeDrops.vue
It checks if the chain of drop matches the walletVM.

// 2. components/collection/drop/MintButton.vue
It checks if the current urlPrefix matches the walletVM.

In other words, the logic suitable for reuse is only openReconnectWalletModal. No matter putting it to the composable or utils function, it's fine. wdyt @hassnian