Merge branch 'main' into neostickymodal-tailwindcss

components/MessageNotify.vue

@@ -59,7 +59,7 @@ const realworldFullPath = computed(() => {
   &--toast {
     z-index: 100;
     position: fixed;
-    border-radius: 0;
+    border-radius: 0 !important;
     top: 100px;
     right: 0;
     margin-left: auto;
@@ -73,7 +73,8 @@ const realworldFullPath = computed(() => {
   }
 
   .message-body {
-    border: none;
+    border-left-width: 0;
+    border-radius: 0;
   }
 
   .congrats-message {

components/carousel/CarouselTypeGenerative.vue

@@ -8,10 +8,11 @@
 </template>
 
 <script lang="ts" setup>
+import { AHK_GENERATIVE_DROPS, AHP_GENERATIVE_DROPS } from '@/utils/drop'
 import { useCarouselGenerativeNftEvents } from './utils/useCarouselEvents'
 
 const { nfts, ids } = await useCarouselGenerativeNftEvents(
-  ['176'],
-  ['38', '40', '46', '49', '50'],
+  AHK_GENERATIVE_DROPS,
+  AHP_GENERATIVE_DROPS,
 )
 </script>

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>

components/collection/unlockable/UnlockableLandingMobileBanner.vue

@@ -9,7 +9,7 @@
         alt="unlockable icon" />
       <span>{{ $t('mint.unlockable.mintLive') }}</span>
     </div>
-    <nuxt-link class="has-text-weight-bold" to="/ahp/drops/wallstreet">
+    <nuxt-link class="has-text-weight-bold" :to="DEFAULT_DROP">
       {{ $t('mint.unlockable.takeMe') }}
     </nuxt-link>
   </div>

components/collection/unlockable/UnlockableLandingTag.vue

@@ -14,7 +14,7 @@
     <div class="separator mx-2" />
     <nuxt-link
       class="is-flex is-align-items-center has-text-weight-bold my-2"
-      to="/ahp/drops/wallstreet">
+      :to="DEFAULT_DROP">
       {{ $t('mint.unlockable.takeMe') }}
     </nuxt-link>
   </div>

components/common/shoppingCart/ShoppingCartModal.vue

@@ -5,7 +5,6 @@
       data-testid="shopping-cart-modal-container">
       <NeoModalHead
         :title="$t('shoppingCart.title')"
-        data-testid="shopping-cart-modal"
         @close="closeShoppingCart(ModalCloseType.BACK)" />
       <div
         v-if="numberOfItems"

components/items/ItemsGrid/ItemsGrid.vue

@@ -8,6 +8,7 @@
       v-if="total !== 0 && (!isLoading || !isFetchingData)"
       :id="scrollContainerId"
       v-slot="slotProps"
+      :mobile-cols="2"
       class="my-5">
       <div
         v-for="(entity, index) in items"
@@ -53,7 +54,8 @@
     <!-- skeleton on first load -->
     <DynamicGrid
       v-if="total === 0 && (isLoading || isFetchingData)"
-      class="my-5">
+      class="my-5"
+      :mobile-cols="2">
       <NeoNftCardSkeleton
         v-for="n in skeletonCount"
         :key="n"

components/profile/activityTab/History.vue

@@ -10,7 +10,7 @@
 
     <div v-if="!desktop" class="is-flex is-justify-content-flex-end my-5">
       <Pagination
-        v-model="currentPage"
+        :value="currentPage"
         :total="total"
         :per-page="itemsPerPage"
         :range-before="2"

components/shared/DynamicGrid.vue

@@ -17,6 +17,7 @@ const props = withDefaults(
     }
     gridSize?: 'small' | 'medium' | 'large'
     mobileVariant?: boolean
+    mobileCols?: number
   }>(),
   {
     defaultWidth: () => ({
@@ -25,6 +26,7 @@ const props = withDefaults(
       large: 16 * 20, // 20rem
     }),
     mobileVariant: true,
+    mobileCols: 1,
   },
 )
 
@@ -45,7 +47,7 @@ const updateColumns = () => {
       containerWidth.value / props.defaultWidth[grid.value],
     )
 
-    cols.value = isMobileVariant.value ? 1 : getCols
+    cols.value = isMobileVariant.value ? props.mobileCols : getCols
   }
 }
 

composables/popularCollections/constants.ts

@@ -54,11 +54,7 @@ export const POPULAR_COLLECTIONS = {
     'u-31848', // Ajuna Network Promo Collection
   ],
   ahp: [
-    '50', // .motherboard
-    '49', // wallstreet
-    '46', // Snowflakes
-    '40', // Swirls
-    '38', // Generativ Art - Pare1d0scope
+    ...AHP_POPULAR_DROP_COLLECTIONS,
     '10', // Kodachain - Berlin Onchain Exhibition
     '11', // Kodachain - Sub0 Opening Party 2023
     '13', // The sub0 2023 Biodiversity Collection