From 3ecacbcd6e46f8b31b563f1e9505855201a77fc3 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Mon, 15 Jul 2024 19:49:26 +0200
Subject: [PATCH 1/3] fix: remove modal close on random clicks

---
 components/collection/drop/AddFundsModal.vue  |   1 -
 components/collection/drop/modal/PaidMint.vue |   5 +-
 .../unlockable/UnlockableLoader.vue           | 127 ------------------
 .../common/autoTeleport/AutoTeleportModal.vue |  10 +-
 .../autoTeleport/AutoTeleportWelcomeModal.vue |   6 +-
 .../ConfirmPurchaseModal.vue                  |   1 -
 .../successfulModal/SuccessfulModal.vue       |   5 +-
 components/drops/CreateCalendarEventModal.vue |   5 +-
 components/shared/TransactionLoader.vue       |   2 +-
 libs/ui/src/components/NeoModal/NeoModal.vue  |   2 +-
 10 files changed, 7 insertions(+), 157 deletions(-)
 delete mode 100644 components/collection/unlockable/UnlockableLoader.vue

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index ace2e042cc..8c9d685700 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -1,7 +1,6 @@
 <template>
   <NeoModal
     :value="modelValue"
-    :can-cancel="['outside', 'escape']"
     content-class="add-funds-modal !w-[unset]"
     @close="onClose">
     <ModalBody
diff --git a/components/collection/drop/modal/PaidMint.vue b/components/collection/drop/modal/PaidMint.vue
index a218de0e08..b12b9af82e 100644
--- a/components/collection/drop/modal/PaidMint.vue
+++ b/components/collection/drop/modal/PaidMint.vue
@@ -1,8 +1,5 @@
 <template>
-  <NeoModal
-    :value="modelValue"
-    :can-cancel="isSigningStep ? false : ['outside', 'escape']"
-    @close="close">
+  <NeoModal :value="modelValue" @close="close">
     <ModalBody
       :title="title"
       :scrollable="false"
diff --git a/components/collection/unlockable/UnlockableLoader.vue b/components/collection/unlockable/UnlockableLoader.vue
deleted file mode 100644
index f7b3737682..0000000000
--- a/components/collection/unlockable/UnlockableLoader.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <NeoLoading v-model:active="isLoading" is-full-page :can-cancel="canCancel">
-    <div class="loading-container py-2">
-      <NeoButton
-        class="close-icon py-1 px-2"
-        variant="text"
-        no-shadow
-        icon="xmark"
-        size="medium"
-        @click="closeLoading" />
-      <img src="/unlockable-loader.svg" />
-      <div class="flex flex-col items-center px-5 text-center capitalize">
-        <div class="font-bold mb-2">{{ $t('mint.success') }}</div>
-        <div>
-          {{ $t('mint.unlockable.loader.viewNFT1') }}
-          <span v-if="minted">
-            {{ $t('mint.unlockable.loader.viewNFTNow2') }}
-            <span class="font-bold">
-              {{ $t('mint.unlockable.loader.viewNFTNow3') }}</span
-            >
-          </span>
-          <span v-else>
-            {{ $t('mint.unlockable.loader.viewNFTLater2') }}
-            <span class="font-bold">
-              {{ displayDuration }}
-            </span>
-          </span>
-        </div>
-        <div class="mt-4">
-          {{ $t('mint.unlockable.loader.shareSuccess') }}
-          <a
-            v-safe-href="postTwitterUrl"
-            target="_blank"
-            class="text-k-blue hover:text-k-blue-hover"
-            >{{ $t('mint.unlockable.loader.onTwitter') }}
-          </a>
-        </div>
-        <nuxt-link :to="`/${urlPrefix}/gallery/${minted}`">
-          <NeoButton
-            class="mb-2 mt-4 loading-button text-base"
-            variant="secondary"
-            tag="span"
-            :disabled="!minted"
-            :label="buttonLabel" />
-        </nuxt-link>
-      </div>
-    </div>
-  </NeoLoading>
-</template>
-
-<script lang="ts" setup>
-import { NeoButton, NeoLoading } from '@kodadot1/brick'
-import { resolveComponent } from 'vue'
-import { getCountDownTime, useCountDown } from './utils/useCountDown'
-
-const NuxtLink = resolveComponent('NuxtLink')
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    canCancel?: boolean
-    minted?: string
-    duration?: number
-  }>(),
-  {
-    modelValue: false,
-    canCancel: true,
-    duration: 51, // second
-    minted: '',
-  },
-)
-const { urlPrefix } = usePrefix()
-const { $i18n } = useNuxtApp()
-const isLoading = useVModel(props, 'modelValue')
-
-const { displayDuration } = useCountDown({
-  countDownTime: getCountDownTime(props.duration),
-})
-
-const twitterText = computed(
-  () =>
-    `Just minted an exclusive NFT with unlockable items on @Kodadot! 🎉 So excited to add this unique collectible to my collection. Do not miss your chance! \n\n ${location.href}`,
-)
-
-const postTwitterUrl = computed(
-  () =>
-    `https://twitter.com/intent/tweet?text=${encodeURIComponent(
-      twitterText.value,
-    )}`,
-)
-const emit = defineEmits(['modelValue'])
-
-const closeLoading = () => {
-  emit('modelValue', false)
-}
-const buttonLabel = computed(() =>
-  $i18n.t(
-    props.minted ? 'mint.unlockable.viewItem' : 'mint.unlockable.preparing',
-  ),
-)
-</script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-
-.loading-container {
-  background: $white;
-  backdrop-filter: $frosted-glass-backdrop-filter;
-  margin: 0rem 1rem;
-  width: 385px;
-  min-height: 356px;
-
-  @include ktheme() {
-    box-shadow: theme('primary-shadow');
-    border: 1px solid theme('border-color');
-    background: theme('background-color');
-  }
-  .close-icon {
-    position: absolute;
-    right: 20px;
-    top: 10px;
-  }
-  .loading-button {
-    height: 35px;
-    min-width: 126px;
-  }
-}
-</style>
diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
index 7623c697cf..7e566d21e2 100644
--- a/components/common/autoTeleport/AutoTeleportModal.vue
+++ b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <NeoModal
-    :value="isModalActive"
-    :can-cancel="canCancel"
-    class="z-[1000]"
-    @close="onClose">
+  <NeoModal :value="isModalActive" class="z-[1000]" @close="onClose">
     <div class="sm:w-[25rem]">
       <ModalBody
         :title="$i18n.t('autoTeleport.signTransactions')"
@@ -215,10 +211,6 @@ const autoteleportFinalized = computed(() =>
     : hasCompletedActionPreSteps.value,
 )
 
-const canCancel = computed(() =>
-  autoteleportFinalized.value ? ['outside', 'escape'] : false,
-)
-
 const btnLabel = computed<string>(() => {
   if (!hasActions.value && isBalanceCheckCompleted.value) {
     return $i18n.t('redirect.continue')
diff --git a/components/common/autoTeleport/AutoTeleportWelcomeModal.vue b/components/common/autoTeleport/AutoTeleportWelcomeModal.vue
index b4197a54e4..1f2bb6a55b 100644
--- a/components/common/autoTeleport/AutoTeleportWelcomeModal.vue
+++ b/components/common/autoTeleport/AutoTeleportWelcomeModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <NeoModal
-    :value="isModalActive"
-    :can-cancel="['outside', 'escape']"
-    class="z-[1000]"
-    @close="onClose">
+  <NeoModal :value="isModalActive" class="z-[1000]" @close="onClose">
     <div class="sm:w-[40rem]">
       <header class="py-5 pl-6 pr-5 flex justify-between items-center">
         <span class="capitalize text-[1.6rem] font-bold">
diff --git a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
index f529664115..2d76fbce7e 100644
--- a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
+++ b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
@@ -1,7 +1,6 @@
 <template>
   <NeoModal
     :value="isModalActive"
-    :can-cancel="['outside', 'escape']"
     class="z-[1000]"
     content-class="!w-[unset]"
     @close="onClose">
diff --git a/components/common/successfulModal/SuccessfulModal.vue b/components/common/successfulModal/SuccessfulModal.vue
index 2df4f970d5..5c3a9bf4fe 100644
--- a/components/common/successfulModal/SuccessfulModal.vue
+++ b/components/common/successfulModal/SuccessfulModal.vue
@@ -1,8 +1,5 @@
 <template>
-  <NeoModal
-    :value="isModalActive"
-    :can-cancel="['outside', 'escape']"
-    @close="onClose">
+  <NeoModal :value="isModalActive" @close="onClose">
     <ModalBody :title="$t('success')" @close="onClose">
       <SuccessfulModalBody
         :tx-hash="txHash"
diff --git a/components/drops/CreateCalendarEventModal.vue b/components/drops/CreateCalendarEventModal.vue
index 175689503d..daa99a5706 100644
--- a/components/drops/CreateCalendarEventModal.vue
+++ b/components/drops/CreateCalendarEventModal.vue
@@ -1,8 +1,5 @@
 <template>
-  <NeoModal
-    :value="isModalActive"
-    :can-cancel="['outside', 'escape']"
-    @close="onClose">
+  <NeoModal :value="isModalActive" @close="onClose">
     <ModalBody :title="$t('drops.createACalendarEvent')" @close="onClose">
       <p class="capitalize">
         {{ title }}
diff --git a/components/shared/TransactionLoader.vue b/components/shared/TransactionLoader.vue
index 55f89a235b..aed676ac97 100644
--- a/components/shared/TransactionLoader.vue
+++ b/components/shared/TransactionLoader.vue
@@ -102,7 +102,7 @@ const props = withDefaults(
     isMobile?: boolean
   }>(),
   {
-    canCancel: true,
+    canCancel: false,
     isMobile: false,
   },
 )
diff --git a/libs/ui/src/components/NeoModal/NeoModal.vue b/libs/ui/src/components/NeoModal/NeoModal.vue
index 576301a46f..ebf009f8ee 100644
--- a/libs/ui/src/components/NeoModal/NeoModal.vue
+++ b/libs/ui/src/components/NeoModal/NeoModal.vue
@@ -45,7 +45,7 @@ const props = withDefaults(
   }>(),
   {
     destroyOnHide: true,
-    canCancel: true,
+    canCancel: false,
     fullScreen: false,
     contentClass: '',
     rootClass: '',

From 6be7b0ccd6abf72d57a409ee0601fc0477130541 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 16 Jul 2024 10:47:44 +0200
Subject: [PATCH 2/3] fix: e2e

---
 components/collection/HeroButtons.vue | 13 +++++--------
 tests/e2e/share.spec.ts               |  5 ++++-
 tests/e2e/sidebar.spec.ts             |  5 ++++-
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/collection/HeroButtons.vue b/components/collection/HeroButtons.vue
index 58bdb8d393..d53a74c59a 100644
--- a/components/collection/HeroButtons.vue
+++ b/components/collection/HeroButtons.vue
@@ -81,14 +81,10 @@
         </NeoDropdown>
       </div>
     </div>
-    <NeoModal :value="QRModalActive" @close="QRModalActive = false">
-      <div class="card" data-testid="hero-share-qrcode-modal">
-        <header class="card-header">
-          <p class="card-header-title">{{ collection?.name }}</p>
-        </header>
-        <div class="card-content">
-          <QRCode :text="currentCollectionUrl" />
-        </div>
+    <NeoModal :value="QRModalActive" header="" @close="QRModalActive = false">
+      <NeoModalHead :title="collection?.name" @close="QRModalActive = false" />
+      <div class="card-content" data-testid="hero-share-qrcode-modal">
+        <QRCode :text="currentCollectionUrl" />
       </div>
     </NeoModal>
   </div>
@@ -101,6 +97,7 @@ import {
   NeoDropdownItem,
   NeoIcon,
   NeoModal,
+  NeoModalHead,
 } from '@kodadot1/brick'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import { hasOperationsDisabled } from '@/utils/prefix'
diff --git a/tests/e2e/share.spec.ts b/tests/e2e/share.spec.ts
index 272b411d0f..b6699b72ff 100644
--- a/tests/e2e/share.spec.ts
+++ b/tests/e2e/share.spec.ts
@@ -49,7 +49,10 @@ test('Share Button on Collection', async ({ page, Commands, baseURL }) => {
     await shareBtn.click()
     await page.getByTestId('hero-share-QR-dropdown').first().click()
     await expect(page.getByTestId('hero-share-qrcode-modal')).toBeVisible()
-    await page.keyboard.press('Escape')
+    await page
+      .getByTestId('modal-close-button')
+      .and(page.locator(':visible'))
+      .click()
   })
   //Twitter
   await test.step('Clicks on twitter and verify URL', async () => {
diff --git a/tests/e2e/sidebar.spec.ts b/tests/e2e/sidebar.spec.ts
index a8ff228ba5..fdcc474822 100644
--- a/tests/e2e/sidebar.spec.ts
+++ b/tests/e2e/sidebar.spec.ts
@@ -29,7 +29,10 @@ test('Sidebar Interactions', async ({ page, Commands }) => {
     })
     await page.getByTestId('button-add-funds-empty').click()
     await expect(page.getByTestId('on-ramp-modal')).toBeVisible()
-    await page.keyboard.press('Escape')
+    await page
+      .getByTestId('modal-close-button')
+      .and(page.locator(':visible'))
+      .click()
     await expect(page.getByTestId('on-ramp-modal')).not.toBeVisible()
   })
 })

From 238e5e43e193326546fc39c80cd886a66fe31904 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 16 Jul 2024 11:47:39 +0200
Subject: [PATCH 3/3] fix: e2e

---
 tests/e2e/sidebar.spec.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/tests/e2e/sidebar.spec.ts b/tests/e2e/sidebar.spec.ts
index fdcc474822..a8ff228ba5 100644
--- a/tests/e2e/sidebar.spec.ts
+++ b/tests/e2e/sidebar.spec.ts
@@ -29,10 +29,7 @@ test('Sidebar Interactions', async ({ page, Commands }) => {
     })
     await page.getByTestId('button-add-funds-empty').click()
     await expect(page.getByTestId('on-ramp-modal')).toBeVisible()
-    await page
-      .getByTestId('modal-close-button')
-      .and(page.locator(':visible'))
-      .click()
+    await page.keyboard.press('Escape')
     await expect(page.getByTestId('on-ramp-modal')).not.toBeVisible()
   })
 })