Merge pull request kodadot#10258 from hassnian/issue-10253

fix: Paid mint modal auto-teleport flow

components/collection/drop/HolderOfGenerative.vue

@@ -60,6 +60,7 @@ import useDropMassMintListing from '@/composables/drop/massmint/useDropMassMintL
 import { useDropStore } from '@/stores/drop'
 import useHolderOfCollection from '@/composables/drop/useHolderOfCollection'
 import { NFTs } from '@/composables/transaction/types'
+import useAutoTeleportModal from '@/composables/autoTeleport/useAutoTeleportModal'
 
 const { $i18n, $consola } = useNuxtApp()
 const { urlPrefix } = usePrefix()
@@ -88,6 +89,7 @@ const { subscribeDropStatus } = useDropStatus(drop)
 const dropStore = useDropStore()
 const { claimedNft, canListMintedNft } = useGenerativeDropMint()
 const { availableNfts } = useHolderOfCollection()
+const { isAutoTeleportModalOpen } = useAutoTeleportModal()
 
 const {
   mintingSession,
@@ -205,6 +207,10 @@ const handleList = () => {
 }
 
 const stopMint = () => {
+  if (isAutoTeleportModalOpen.value && isHolderOfWithPaidMint.value) {
+    return
+  }
+
   closeMintModal()
   loading.value = false
   clearMassMint()

components/collection/drop/PaidGenerative.vue

@@ -19,6 +19,7 @@ import { ActionlessInteraction } from '@/components/common/autoTeleport/utils'
 import useCursorDropEvents from '@/composables/party/useCursorDropEvents'
 import useDropMassMint from '@/composables/drop/massmint/useDropMassMint'
 import useDropMassMintListing from '@/composables/drop/massmint/useDropMassMintListing'
+import useAutoTeleportModal from '@/composables/autoTeleport/useAutoTeleportModal'
 import { NFTs } from '@/composables/transaction/types'
 
 const { drop } = useDrop()
@@ -41,6 +42,8 @@ const {
   isCapturingImage,
 } = storeToRefs(useDropStore())
 
+const { isAutoTeleportModalOpen } = useAutoTeleportModal()
+
 const {
   transaction,
   isLoading: isTransactionLoading,
@@ -144,6 +147,10 @@ const handleConfirmPaidMint = () => {
 }
 
 const stopMint = () => {
+  if (isAutoTeleportModalOpen.value) {
+    return
+  }
+
   isMintModalActive.value = false
   loading.value = false
   clearMassMint()

components/collection/drop/modal/PaidMint.vue

@@ -50,6 +50,7 @@ import { usePreloadImages } from './utils'
 import { useDropMinimumFunds } from '@/components/drops/useDrops'
 import useDropMassMintState from '@/composables/drop/massmint/useDropMassMintState'
 import { TransactionStatus } from '@/composables/useTransactionStatus'
+import useAutoTeleportModal from '@/composables/autoTeleport/useAutoTeleportModal'
 
 enum ModalStep {
   OVERVIEW = 'overview',
@@ -59,7 +60,7 @@ enum ModalStep {
 
 const IPFS_ESTIMATED_TIME_SECONDS = 15
 
-const emit = defineEmits(['confirm', 'update:modelValue', 'list'])
+const emit = defineEmits(['confirm', 'update:modelValue', 'list', 'close'])
 const props = defineProps<{
   modelValue: boolean
   action: AutoTeleportAction
@@ -70,6 +71,7 @@ const props = defineProps<{
 const { canMint, canList, isRendering } = useDropMassMintState()
 const { mintingSession, amountToMint, toMintNFTs } = storeToRefs(useDropStore())
 const { $i18n } = useNuxtApp()
+const { isAutoTeleportModalOpen } = useAutoTeleportModal()
 
 const { formattedMinimumFunds, minimumFunds, formattedExistentialDeposit } =
   useDropMinimumFunds(computed(() => amountToMint.value))
@@ -80,6 +82,8 @@ const { completed: imagePreloadingCompleted } = usePreloadImages(
 
 const mintOverview = ref()
 const modalStep = ref<ModalStep>(ModalStep.OVERVIEW)
+const autoteleportCompleted = ref(false)
+const isModalOpen = useVModel(props, 'modelValue')
 
 const isSingleMintNotReady = computed(
   () => amountToMint.value === 1 && !canMint.value,
@@ -112,9 +116,10 @@ const loading = computed(
   () =>
     isSingleMintNotReady.value ||
     mintOverview.value?.loading ||
-    (isSuccessfulDropStep.value && !moveSuccessfulDrop.value) ||
+    (autoteleportCompleted.value && !moveSuccessfulDrop.value) ||
     false,
 )
+
 const preStepTitle = computed<string | undefined>(() =>
   isSingleMintNotReady.value ? $i18n.t('drops.mintDropError') : undefined,
 )
@@ -157,17 +162,21 @@ const title = computed(() => {
   return $i18n.t('success')
 })
 
-const onClose = () => {
-  emit('update:modelValue', false)
+const close = () => emit('close')
 
+const onClose = () => {
+  close()
   if (isSuccessfulDropStep.value) {
     window.location.reload()
   }
 }
 
 const handleModalClose = (completed: boolean) => {
   if (completed) {
-    modalStep.value = ModalStep.SUCCEEDED
+    autoteleportCompleted.value = true
+    isModalOpen.value = true
+  } else {
+    close()
   }
 }
 
@@ -179,20 +188,30 @@ const handleConfirm = ({
   if (!autoteleport) {
     confirm()
     modalStep.value = ModalStep.SIGNING
+  } else {
+    isModalOpen.value = false
   }
 }
 
+const reset = () => {
+  modalStep.value = ModalStep.OVERVIEW
+  autoteleportCompleted.value = false
+}
+
 watchEffect(() => {
-  if (moveSuccessfulDrop.value && isSigningStep.value) {
+  if (
+    moveSuccessfulDrop.value &&
+    (isSigningStep.value || autoteleportCompleted.value)
+  ) {
     modalStep.value = ModalStep.SUCCEEDED
   }
 })
 
 watchDebounced(
-  () => props.modelValue,
-  (isOpen) => {
-    if (!isOpen) {
-      modalStep.value = ModalStep.OVERVIEW
+  [() => props.modelValue, isAutoTeleportModalOpen],
+  ([isOpen]) => {
+    if (!isOpen && !isAutoTeleportModalOpen.value) {
+      reset()
     }
   },
   { debounce: 500 }, // wait for the modal closing animation to finish

components/common/autoTeleport/AutoTeleportActionButton.vue

@@ -81,6 +81,7 @@
 import { NeoButton, NeoSwitch } from '@kodadot1/brick'
 import AutoTeleportWelcomeModal from './AutoTeleportWelcomeModal.vue'
 import useAutoTeleport from '@/composables/autoTeleport/useAutoTeleport'
+import useAutoTeleportModal from '@/composables/autoTeleport/useAutoTeleportModal'
 import type {
   AutoTeleportAction,
   AutoTeleportFeeParams,
@@ -130,6 +131,7 @@ const props = withDefaults(
 const preferencesStore = usePreferencesStore()
 const { $i18n } = useNuxtApp()
 const { chainSymbol, name } = useChain()
+const { isModalOpen } = useAutoTeleportModal()
 
 const amount = ref()
 
@@ -148,7 +150,6 @@ const {
   props.fees,
 )
 
-const isModalOpen = ref(false)
 const onRampActive = ref(false)
 const autoTeleport = ref(false)
 const showFirstTimeTeleport = computed(

composables/autoTeleport/useAutoTeleportModal.ts

@@ -0,0 +1,23 @@
+const modals = ref(new Map<symbol, { isOpen: boolean }>())
+
+export default () => {
+  const isModalOpen = ref(false)
+  const symbol = Symbol()
+
+  watch(isModalOpen, (isOpen) => {
+    modals.value.set(symbol, { isOpen })
+  })
+
+  const isAutoTeleportModalOpen = computed(
+    () =>
+      modals.value.size &&
+      Array.from(modals.value.values())
+        .map((modal) => modal.isOpen)
+        .some(Boolean),
+  )
+
+  return {
+    isModalOpen,
+    isAutoTeleportModalOpen,
+  }
+}

composables/useFetchProfile.ts

@@ -4,7 +4,10 @@ import type { Profile } from '@/services/profile'
 export default function useFetchProfile(address: Ref<string | undefined>) {
   const { data: profile } = useAsyncData<Profile | null>(
     `userProfile-${address.value}`,
-    () =>  address.value ? fetchProfileByAddress(address.value) : Promise.resolve(null),
+    () =>
+      address.value
+        ? fetchProfileByAddress(address.value)
+        : Promise.resolve(null),
     {
       watch: [address],
     },