From f7a71fb1f87507d6d089d4d93c0d3cdc14d01e27 Mon Sep 17 00:00:00 2001 From: hassnian Date: Tue, 7 May 2024 17:00:55 +0500 Subject: [PATCH 1/4] fix(PaidMint.vue): autotelport flow only one modal at a time --- components/collection/drop/PaidGenerative.vue | 7 +++ components/collection/drop/modal/PaidMint.vue | 43 ++++++++++++++----- .../autoTeleport/AutoTeleportActionButton.vue | 3 +- .../autoTeleport/useAutoTeleportModal.ts | 7 +++ 4 files changed, 49 insertions(+), 11 deletions(-) create mode 100644 composables/autoTeleport/useAutoTeleportModal.ts diff --git a/components/collection/drop/PaidGenerative.vue b/components/collection/drop/PaidGenerative.vue index 951f3168be..2f7c86ffd4 100644 --- a/components/collection/drop/PaidGenerative.vue +++ b/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 { isModalOpen: 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() diff --git a/components/collection/drop/modal/PaidMint.vue b/components/collection/drop/modal/PaidMint.vue index 4374560489..2bf6388b49 100644 --- a/components/collection/drop/modal/PaidMint.vue +++ b/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 { isModalOpen: isAuteleportModalOpen } = useAutoTeleportModal() const { formattedMinimumFunds, minimumFunds, formattedExistentialDeposit } = useDropMinimumFunds(computed(() => amountToMint.value)) @@ -80,6 +82,8 @@ const { completed: imagePreloadingCompleted } = usePreloadImages( const mintOverview = ref() const modalStep = ref(ModalStep.OVERVIEW) +const autoteleportCompleted = ref(false) +const isModalOpen = useVModel(props, 'modelValue') const isSingleMintNotReady = computed( () => amountToMint.value === 1 && !canMint.value, @@ -109,8 +113,13 @@ const mintButton = computed(() => { }) const loading = computed( - () => isSingleMintNotReady.value || mintOverview.value?.loading || false, + () => + isSingleMintNotReady.value || + mintOverview.value?.loading || + (autoteleportCompleted.value && !moveSuccessfulDrop.value) || + false, ) + const preStepTitle = computed(() => isSingleMintNotReady.value ? $i18n.t('drops.mintDropError') : undefined, ) @@ -153,9 +162,10 @@ 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() } @@ -163,7 +173,10 @@ const onClose = () => { const handleModalClose = (completed: boolean) => { if (completed) { - modalStep.value = ModalStep.SUCCEEDED + autoteleportCompleted.value = true + isModalOpen.value = true + } else { + close() } } @@ -175,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, isAuteleportModalOpen], + ([isOpen]) => { + if (!isOpen && !isAuteleportModalOpen.value) { + reset() } }, { debounce: 500 }, // wait for the modal closing animation to finish diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue index 94b7890337..c1214bdb4f 100644 --- a/components/common/autoTeleport/AutoTeleportActionButton.vue +++ b/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( diff --git a/composables/autoTeleport/useAutoTeleportModal.ts b/composables/autoTeleport/useAutoTeleportModal.ts new file mode 100644 index 0000000000..071260df5d --- /dev/null +++ b/composables/autoTeleport/useAutoTeleportModal.ts @@ -0,0 +1,7 @@ +const isModalOpen = ref(false) + +export default () => { + return { + isModalOpen, + } +} From 9ed77e04239285ddb48eabc9d4b2f8eaff248171 Mon Sep 17 00:00:00 2001 From: hassnian Date: Tue, 7 May 2024 17:21:44 +0500 Subject: [PATCH 2/4] fix(HolderOfGenerative.vue): dont reset massmint on autotelport failed --- components/collection/drop/HolderOfGenerative.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue index cdf4bdb8ef..9ffd9ad4b2 100644 --- a/components/collection/drop/HolderOfGenerative.vue +++ b/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 { isModalOpen: isAutoTeleportModalOpen } = useAutoTeleportModal() const { mintingSession, @@ -205,6 +207,10 @@ const handleList = () => { } const stopMint = () => { + if (isAutoTeleportModalOpen.value && isHolderOfWithPaidMint.value) { + return + } + closeMintModal() loading.value = false clearMassMint() From 6f0d4192b042df422e96d4eba793c2cc66934a2e Mon Sep 17 00:00:00 2001 From: hassnian Date: Wed, 8 May 2024 17:09:21 +0500 Subject: [PATCH 3/4] fix(useAutotTeleportModal.ts): multiple teleport modals opening at once --- .../collection/drop/HolderOfGenerative.vue | 2 +- components/collection/drop/PaidGenerative.vue | 2 +- .../autoTeleport/useAutoTeleportModal.ts | 18 +++++++++++++++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue index 9ffd9ad4b2..488b4d517c 100644 --- a/components/collection/drop/HolderOfGenerative.vue +++ b/components/collection/drop/HolderOfGenerative.vue @@ -89,7 +89,7 @@ const { subscribeDropStatus } = useDropStatus(drop) const dropStore = useDropStore() const { claimedNft, canListMintedNft } = useGenerativeDropMint() const { availableNfts } = useHolderOfCollection() -const { isModalOpen: isAutoTeleportModalOpen } = useAutoTeleportModal() +const { isAutoTeleportModalOpen } = useAutoTeleportModal() const { mintingSession, diff --git a/components/collection/drop/PaidGenerative.vue b/components/collection/drop/PaidGenerative.vue index 2f7c86ffd4..46d793d08b 100644 --- a/components/collection/drop/PaidGenerative.vue +++ b/components/collection/drop/PaidGenerative.vue @@ -42,7 +42,7 @@ const { isCapturingImage, } = storeToRefs(useDropStore()) -const { isModalOpen: isAutoTeleportModalOpen } = useAutoTeleportModal() +const { isAutoTeleportModalOpen } = useAutoTeleportModal() const { transaction, diff --git a/composables/autoTeleport/useAutoTeleportModal.ts b/composables/autoTeleport/useAutoTeleportModal.ts index 071260df5d..762aee1d66 100644 --- a/composables/autoTeleport/useAutoTeleportModal.ts +++ b/composables/autoTeleport/useAutoTeleportModal.ts @@ -1,7 +1,23 @@ -const isModalOpen = ref(false) +const modals = ref(new Map()) 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, } } From bb789c4a91e91e4cab0e0d1e16453f0bc6d18e43 Mon Sep 17 00:00:00 2001 From: hassnian Date: Wed, 8 May 2024 17:32:50 +0500 Subject: [PATCH 4/4] fix(PaidMint.vue): use isAutoTeleportModalOpen --- components/collection/drop/modal/PaidMint.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/collection/drop/modal/PaidMint.vue b/components/collection/drop/modal/PaidMint.vue index 2bf6388b49..21fc1b34b5 100644 --- a/components/collection/drop/modal/PaidMint.vue +++ b/components/collection/drop/modal/PaidMint.vue @@ -71,7 +71,7 @@ const props = defineProps<{ const { canMint, canList, isRendering } = useDropMassMintState() const { mintingSession, amountToMint, toMintNFTs } = storeToRefs(useDropStore()) const { $i18n } = useNuxtApp() -const { isModalOpen: isAuteleportModalOpen } = useAutoTeleportModal() +const { isAutoTeleportModalOpen } = useAutoTeleportModal() const { formattedMinimumFunds, minimumFunds, formattedExistentialDeposit } = useDropMinimumFunds(computed(() => amountToMint.value)) @@ -208,9 +208,9 @@ watchEffect(() => { }) watchDebounced( - [() => props.modelValue, isAuteleportModalOpen], + [() => props.modelValue, isAutoTeleportModalOpen], ([isOpen]) => { - if (!isOpen && !isAuteleportModalOpen.value) { + if (!isOpen && !isAutoTeleportModalOpen.value) { reset() } },