From ebb8a1a02fb23ef9aec154f97f29ff99b5c6963e Mon Sep 17 00:00:00 2001 From: hassnian Date: Tue, 12 Dec 2023 07:27:10 +0500 Subject: [PATCH 1/5] add: modal step --- .../drop/modal/DropConfirmModal.vue | 60 ++++++++++++++----- utils/dom.ts | 20 +++---- 2 files changed, 53 insertions(+), 27 deletions(-) diff --git a/components/collection/drop/modal/DropConfirmModal.vue b/components/collection/drop/modal/DropConfirmModal.vue index 492b07a988..36cbd13ca9 100644 --- a/components/collection/drop/modal/DropConfirmModal.vue +++ b/components/collection/drop/modal/DropConfirmModal.vue @@ -8,12 +8,14 @@ @close="onClose"> - + - + @@ -34,6 +36,8 @@ import { useCountDown, } from '@/components/collection/unlockable/utils/useCountDown' +type ModalStep = 'email' | 'claiming' | 'succeded' + const emit = defineEmits(['confirm', 'completed', 'close', 'list']) const props = defineProps<{ modelValue: boolean @@ -51,13 +55,10 @@ const { $i18n } = useNuxtApp() const isModalActive = useVModel(props, 'modelValue') +const modalStep = ref('email') const email = ref() 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( () => @@ -67,16 +68,24 @@ const sanitizedMintedNft = computed( }, ) -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 +115,28 @@ 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 + } + } +}) + +watch( + () => props.claiming, + (claiming: boolean) => { + if (claiming) { + modalStep.value = 'claiming' + } + }, +) + +watch(moveSuccessfulDrop, (value) => { + if (value) { + modalStep.value = 'succeded' } }) diff --git a/utils/dom.ts b/utils/dom.ts index a93cd11496..9b185197ec 100644 --- a/utils/dom.ts +++ b/utils/dom.ts @@ -1,18 +1,16 @@ export const preloadImage = (src: string): Promise => { 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) - } + }) }) } From e00f31802c303773bbc970c0c8e2feee6b09c347 Mon Sep 17 00:00:00 2001 From: hassnian Date: Tue, 12 Dec 2023 09:55:31 +0500 Subject: [PATCH 2/5] add: reset to email on error --- components/collection/drop/modal/DropConfirmModal.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/components/collection/drop/modal/DropConfirmModal.vue b/components/collection/drop/modal/DropConfirmModal.vue index 36cbd13ca9..98aa1298b2 100644 --- a/components/collection/drop/modal/DropConfirmModal.vue +++ b/components/collection/drop/modal/DropConfirmModal.vue @@ -139,4 +139,13 @@ watch(moveSuccessfulDrop, (value) => { modalStep.value = 'succeded' } }) + +watch( + () => props.modelValue, + (isOpen) => { + if (isOpen) { + modalStep.value = 'email' + } + }, +) From e2e01b1d350f10a9f71691c3b49a0de5c125009b Mon Sep 17 00:00:00 2001 From: hassnian Date: Thu, 14 Dec 2023 13:49:35 +0500 Subject: [PATCH 3/5] ref: add enum and use watchEffect --- .../drop/modal/DropConfirmModal.vue | 36 +++++++------------ 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/components/collection/drop/modal/DropConfirmModal.vue b/components/collection/drop/modal/DropConfirmModal.vue index 98aa1298b2..9afe8088d5 100644 --- a/components/collection/drop/modal/DropConfirmModal.vue +++ b/components/collection/drop/modal/DropConfirmModal.vue @@ -36,7 +36,11 @@ import { useCountDown, } from '@/components/collection/unlockable/utils/useCountDown' -type ModalStep = 'email' | 'claiming' | 'succeded' +enum ModalStep { + EMAIL = 'email', + CLAIMING = 'claiming', + SUCCEEDED = 'succeded', +} const emit = defineEmits(['confirm', 'completed', 'close', 'list']) const props = defineProps<{ @@ -55,7 +59,7 @@ const { $i18n } = useNuxtApp() const isModalActive = useVModel(props, 'modelValue') -const modalStep = ref('email') +const modalStep = ref(ModalStep.EMAIL) const email = ref() const nftCoverLoaded = ref(false) const retry = ref(3) @@ -125,27 +129,13 @@ watch([sanitizedMintedNft, retry], async ([mintedNft]) => { } }) -watch( - () => props.claiming, - (claiming: boolean) => { - if (claiming) { - modalStep.value = 'claiming' - } - }, -) - -watch(moveSuccessfulDrop, (value) => { - if (value) { - modalStep.value = 'succeded' +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 } }) - -watch( - () => props.modelValue, - (isOpen) => { - if (isOpen) { - modalStep.value = 'email' - } - }, -) From 86277e8ca3bef7599d6f628e04657e38a70423e1 Mon Sep 17 00:00:00 2001 From: hassnian Date: Thu, 14 Dec 2023 14:15:57 +0500 Subject: [PATCH 4/5] fix: transition renders non-element root node that cannot be animated --- .../drop/modal/DropConfirmModal.vue | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/components/collection/drop/modal/DropConfirmModal.vue b/components/collection/drop/modal/DropConfirmModal.vue index 9afe8088d5..719d1fdb57 100644 --- a/components/collection/drop/modal/DropConfirmModal.vue +++ b/components/collection/drop/modal/DropConfirmModal.vue @@ -7,19 +7,17 @@ content-class="modal-width" @close="onClose"> - - - - - - - + + + + + From 73b8963f3be16ce5594b22b14317dd9adb355fae Mon Sep 17 00:00:00 2001 From: hassnian Date: Thu, 14 Dec 2023 14:19:09 +0500 Subject: [PATCH 5/5] fix: sonarcloud Use the opposite operator (<=) instead --- components/collection/drop/modal/DropConfirmModal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/collection/drop/modal/DropConfirmModal.vue b/components/collection/drop/modal/DropConfirmModal.vue index 719d1fdb57..63e2b7d5a1 100644 --- a/components/collection/drop/modal/DropConfirmModal.vue +++ b/components/collection/drop/modal/DropConfirmModal.vue @@ -79,7 +79,7 @@ const moveSuccessfulDrop = computed(() => { return true } - return !(distance.value > 0) && sanitizedMintedNft.value && retry.value === 0 + return distance.value <= 0 && sanitizedMintedNft.value && retry.value === 0 }) const title = computed(() => {