fix: drop modal bugs

components/collection/drop/modal/DropConfirmModal.vue

@@ -7,17 +7,17 @@
     content-class="modal-width"
     @close="onClose">
     <ModalBody :title="title" @close="onClose">
-      <transition name="fade">
-        <EmailSignup v-if="needsEmail" @confirm="handleEmailSignupConfirm" />
+      <EmailSignup
+        v-if="isEmailSignupStep"
+        @confirm="handleEmailSignupConfirm" />
 
-        <ClaimingDrop v-else-if="claimingDrop" :est="displayDuration" />
+      <ClaimingDrop v-else-if="isClaimingDropStep" :est="displayDuration" />
 
-        <SuccessfulDrop
-          v-else-if="successfulDrop && sanitizedMintedNft"
-          :minted-nft="sanitizedMintedNft"
-          :can-list-nft="canListNft"
-          @list="$emit('list')" />
-      </transition>
+      <SuccessfulDrop
+        v-else-if="isSuccessfulDropStep"
+        :minted-nft="sanitizedMintedNft"
+        :can-list-nft="canListNft"
+        @list="$emit('list')" />
     </ModalBody>
   </NeoModal>
 </template>
@@ -34,6 +34,12 @@ import {
   useCountDown,
 } from '@/components/collection/unlockable/utils/useCountDown'
 
+enum ModalStep {
+  EMAIL = 'email',
+  CLAIMING = 'claiming',
+  SUCCEEDED = 'succeded',
+}
+
 const emit = defineEmits(['confirm', 'completed', 'close', 'list'])
 const props = defineProps<{
   modelValue: boolean
@@ -51,13 +57,10 @@ const { $i18n } = useNuxtApp()
 
 const isModalActive = useVModel(props, 'modelValue')
 
+const modalStep = ref<ModalStep>(ModalStep.EMAIL)
 const email = ref<string>()
 const nftCoverLoaded = ref(false)
-
-const successfulDrop = computed(() => Boolean(sanitizedMintedNft.value))
-const claimingDrop = computed(() =>
-  nftCoverLoaded.value ? false : distance.value > 0,
-)
+const retry = ref(3)
 
 const sanitizedMintedNft = computed<DropMintedNft | undefined>(
   () =>
@@ -67,16 +70,24 @@ const sanitizedMintedNft = computed<DropMintedNft | undefined>(
     },
 )
 
-const needsEmail = computed(
-  () => !email.value && !claimingDrop.value && !successfulDrop.value,
-)
+const isEmailSignupStep = computed(() => modalStep.value === 'email')
+const isClaimingDropStep = computed(() => modalStep.value === 'claiming')
+const isSuccessfulDropStep = computed(() => modalStep.value === 'succeded')
+
+const moveSuccessfulDrop = computed(() => {
+  if (nftCoverLoaded.value) {
+    return true
+  }
+
+  return distance.value <= 0 && sanitizedMintedNft.value && retry.value === 0
+})
 
 const title = computed(() => {
-  if (needsEmail.value) {
+  if (isEmailSignupStep.value) {
     return $i18n.t('drops.finalizeClaimNow')
   }
 
-  if (claimingDrop.value) {
+  if (isClaimingDropStep.value) {
     return $i18n.t('drops.claimingDrop')
   }
 
@@ -106,9 +117,23 @@ watch(
   },
 )
 
-watch(sanitizedMintedNft, async (mintedNft) => {
-  if (mintedNft?.image) {
-    nftCoverLoaded.value = await preloadImage(mintedNft.image)
+watch([sanitizedMintedNft, retry], async ([mintedNft]) => {
+  if (mintedNft?.image && retry.value) {
+    try {
+      nftCoverLoaded.value = await preloadImage(mintedNft.image)
+    } catch (error) {
+      retry.value -= 1
+    }
+  }
+})
+
+watchEffect(() => {
+  if (props.claiming && isEmailSignupStep.value) {
+    modalStep.value = ModalStep.CLAIMING
+  } else if (moveSuccessfulDrop.value && isClaimingDropStep.value) {
+    modalStep.value = ModalStep.SUCCEEDED
+  } else if (!props.modelValue && isSuccessfulDropStep.value) {
+    modalStep.value = ModalStep.EMAIL
   }
 })
 </script>

utils/dom.ts

@@ -1,18 +1,16 @@
 export const preloadImage = (src: string): Promise<boolean> => {
   return new Promise((resolve, reject) => {
-    try {
-      const image = new Image()
-      image.src = src
+    const image = new Image()
+    image.src = src
 
-      const onLoad = () => {
-        resolve(true)
-      }
-
-      image.addEventListener('load', onLoad, true)
+    const onLoad = () => {
+      resolve(true)
+    }
 
-      image.removeEventListener('load', onLoad)
-    } catch (e) {
+    image.addEventListener('load', onLoad, true)
+    image.removeEventListener('load', onLoad)
+    image.addEventListener('error', (e) => {
       reject(e)
-    }
+    })
   })
 }