Merge branch 'main' of github.com:kodadot/nft-gallery into cf-ssr-pri…

…vacy-policy

assets/styles/components/_search.scss

@@ -27,6 +27,7 @@
 
   .o-acp__menu {
     max-height: 610px;
+
     .o-acp__item {
       padding: 0;
       background: unset !important;
@@ -203,6 +204,18 @@
   }
 }
 
+@media screen and (max-width: 640px) {
+  .search-bar-container {
+    .o-acp__menu {
+      left: -28px;
+      width: 100vw;
+      max-height: 93dvh;
+      margin-top: .8rem;
+      border: none;
+    }
+  }
+}
+
 @media screen and (max-width: 480px) {
   .landing-search {
     justify-content: center;

components/MessageNotify.vue

@@ -7,7 +7,9 @@
     :duration="realDuration"
     :auto-close="autoClose"
     @close="$emit('close')">
-    <img src="/congrats-message-header.svg" class="congrats-message" />
+    <img
+      src="~/assets/svg/congrats-message-header.svg"
+      class="congrats-message" />
     <div class="flex flex-col">
       <div class="title is-3 mb-4">
         {{ title }}

components/Navbar.vue

@@ -9,7 +9,10 @@
     <div class="container items-center" :class="{ 'is-fluid': !isTouch }">
       <!-- BRAND -->
       <div class="navbar-brand">
-        <nuxt-link to="/" class="navbar-item logo nuxt-link-active">
+        <nuxt-link
+          v-if="!isMobile || !openMobileSearchBar"
+          to="/"
+          class="navbar-item logo nuxt-link-active">
           <img
             :src="logoSrc"
             alt="First NFT market explorer on Kusama and Polkadot" />
@@ -18,16 +21,18 @@
           class="lg:!hidden flex flex-grow items-center justify-end"
           @click="closeBurgerMenu">
           <NeoButton
+            v-show="isMobile && !openMobileSearchBar"
             class="square-40 mr-2"
             icon="magnifying-glass"
             @click="showMobileSearchBar" />
 
-          <div v-show="openMobileSearchBar">
-            <div class="fixed-stack flex items-center justify-between p-2">
+          <div v-show="!isMobile || openMobileSearchBar" class="w-full">
+            <div
+              class="is-fixed-top z-10 flex items-center justify-between p-2">
               <Search ref="mobilSearchRef" hide-filter class="flex-grow" />
               <NeoButton
                 variant="text"
-                class="p-3 is-shadowless border-0 capitalize"
+                class="p-3 is-shadowless border-0 capitalize sm:hidden"
                 @click="hideMobileSearchBar">
                 {{ $t('cancel') }}
               </NeoButton>
@@ -38,7 +43,7 @@
         <!-- BURGER MENU -->
         <a
           role="button"
-          class="navbar-burger"
+          class="navbar-burger sm:hidden"
           :class="{ 'is-active': isMobileNavbarOpen }"
           aria-label="menu"
           aria-expanded="false"

components/carousel/utils/useCarouselEvents.ts

@@ -2,7 +2,8 @@ import type { CarouselNFT } from '@/components/base/types'
 import type { NFTWithMetadata } from '@/composables/useNft'
 import type { Prefix } from '@kodadot1/static'
 import { formatNFT } from '@/utils/carousel'
-import { AHK_GENERATIVE_DROPS, AHP_GENERATIVE_DROPS } from '@/utils/drop'
+import { AHK_GENERATIVE_DROPS } from '@/utils/drop'
+import { getDrops } from '@/services/fxart'
 
 import latestEvents from '@/queries/subsquid/general/latestEvents.graphql'
 import latestEventsRmrkv2 from '@/queries/subsquid/ksm/latestEvents.graphql'
@@ -17,21 +18,21 @@ const nftEventVariables = {
   newestList: { interaction_eq: 'LIST' },
 }
 
-const fetchLatestEvents = async (chain, type, where = {}, limit = 20) => {
+const fetchLatestEvents = (chain, type, where = {}, limit = 20) => {
   const query = chain === 'ksm' ? latestEventsRmrkv2 : latestEvents
 
-  return await useAsyncQuery({
+  return useQuery(
     query,
-    clientId: chain,
-    variables: {
+    {
       limit,
       orderBy: 'timestamp_DESC',
       where: {
         ...nftEventVariables[type],
         ...where,
       },
     },
-  })
+    { clientId: chain },
+  )
 }
 
 const createEventQuery = (
@@ -72,14 +73,15 @@ const useEvents = (chain, type, limit = 10, collectionIds = []) => {
     return items.value.some((item) => item.id === nft.id)
   }
 
+  const where = createEventQuery(
+    type,
+    excludeNfts,
+    excludeCollections,
+    collectionIds,
+  )
+  const { result: data } = fetchLatestEvents(chain, type, where)
+
   const constructNfts = async () => {
-    const where = createEventQuery(
-      type,
-      excludeNfts,
-      excludeCollections,
-      collectionIds,
-    )
-    const { data } = await fetchLatestEvents(chain, type, where)
     const events = (
       data.value as {
         events: { meta: string; nft: NFTWithMetadata; timestamp: string }[]
@@ -116,7 +118,7 @@ const useEvents = (chain, type, limit = 10, collectionIds = []) => {
   }
 
   watchEffect(async () => {
-    if (items.value.length < limit) {
+    if (items.value.length < limit && data.value) {
       await constructNfts()
     }
   })
@@ -182,7 +184,7 @@ const GENERATIVE_CONFIG: Partial<
 > = {
   ahp: {
     limit: 12,
-    collections: AHP_GENERATIVE_DROPS,
+    collections: [],
   },
   ahk: {
     limit: 3,
@@ -193,21 +195,40 @@ const GENERATIVE_CONFIG: Partial<
 export const useCarouselGenerativeNftEvents = () => {
   const nfts = ref<CarouselNFT[]>([])
   const eventType = ['newestList', 'latestSales']
+  const dropsAhp = computedAsync(async () => {
+    return await getDrops({
+      limit: 12,
+      active: [true],
+      chain: ['ahp'],
+    })
+  })
+
+  const eventsDataRefs = computed(() => {
+    return Object.keys(GENERATIVE_CONFIG).map((chain) => {
+      let collections = GENERATIVE_CONFIG[chain].collections
+
+      if (isProduction && chain === 'ahk') {
+        return []
+      }
+
+      if (chain === 'ahp' && dropsAhp.value?.length) {
+        collections = dropsAhp.value.map((drop) => drop.collection)
+      }
 
-  const eventsDataRefs = Object.keys(GENERATIVE_CONFIG).map((chain) => {
-    return eventType.map((eventName) => {
-      const { data } = useEvents(
-        chain,
-        eventName,
-        GENERATIVE_CONFIG[chain].limit,
-        GENERATIVE_CONFIG[chain].collections,
-      )
-      return data
+      return eventType.map((eventName) => {
+        const { data } = useEvents(
+          chain,
+          eventName,
+          GENERATIVE_CONFIG[chain].limit,
+          collections,
+        )
+        return data
+      })
     })
   })
 
   watchEffect(() => {
-    nfts.value = eventsDataRefs.flat().flatMap((dataRef) => dataRef.value)
+    nfts.value = eventsDataRefs.value.flat().flatMap((dataRef) => dataRef.value)
   })
 
   return computed(() => sortNfts(unionBy(nfts.value, 'id')).nfts)

components/collection/CollectionHeader/CollectionBanner.vue

@@ -31,7 +31,7 @@
               <img
                 width="42"
                 height="42"
-                src="/migrate/state-ready.svg"
+                src="~/assets/svg/migrate/state-ready.svg"
                 alt="unlockable icon" />
               <span> {{ $t('migrate.ready.title') }} </span>
             </div>

components/collection/drop/Phase.vue

@@ -76,7 +76,10 @@
       :holder-of-collection="holderOfCollection"
       :is-minted-out="isMintedOut" />
 
-    <DropsCreateCalendarEventModal v-model="isCreateEventModalActive" />
+    <DropsCreateCalendarEventModal
+      v-model="isCreateEventModalActive"
+      :title="`Drop: ${drop.name}`"
+      :drop-start-time="dropStartTime" />
 
     <!-- if there is location on the campaign -->
     <CollectionDropRequirementItem

components/collection/drop/modal/PaidMint.vue

@@ -87,14 +87,17 @@ const mintButton = computed(() => {
 
   if (generatingVariations) {
     return {
-      label: `${$i18n.t('drops.generatingVariations')} ~ 5s `,
+      label: `${$i18n.t('drops.generatingVariations')} ~ 5s`,
       disabled: true,
       loading: true,
     }
   }
 
   if (!canMint.value) {
-    return { label: $i18n.t('loader.ipfs'), disabled: true }
+    return {
+      label: `${$i18n.t('loader.ipfs')} ~ 15s`,
+      disabled: true,
+    }
   }
 
   return { label: $i18n.t('drops.proceedToSigning'), disabled: false }

components/collection/drop/modal/paid/MintOverview.vue

@@ -57,6 +57,7 @@
       ref="autoteleport"
       :label="mintButton.label"
       :disabled="mintButton.disabled"
+      :loading="mintButton.disabled"
       :amount="minimumFunds"
       :actions="[action]"
       :parent-ready="!modalLoading"

components/collection/unlockable/UnlockableItemInfo.vue

@@ -28,7 +28,7 @@
         </NeoButton>
       </div>
       <div class="flex-1">
-        <img src="/unlockable-introduce.svg" alt="Unlockable" />
+        <img src="~/assets/svg/unlockable-introduce.svg" alt="Unlockable" />
       </div>
     </div>
   </div>

components/collectionDetailsPopover/CollectionDetailsPopover.vue

@@ -36,7 +36,7 @@ const { urlPrefix } = usePrefix()
 
 const props = withDefaults(
   defineProps<{
-    collection: Collection
+    collection?: Collection
     nft?: CarouselNFT
     showDelay?: number
     hideDelay?: number
@@ -47,6 +47,7 @@ const props = withDefaults(
     hideDelay: 0,
     className: '',
     nft: undefined,
+    collection: undefined,
   },
 )
 

components/common/autoTeleport/AutoTeleportActionButton.vue

@@ -9,7 +9,7 @@
             <img :src="autoTeleportIcon" class="mr-2" alt="teleport arrow" />
             <img
               v-if="isTelportIconActive"
-              src="/accent-blur.svg"
+              src="~/assets/svg/accent-blur.svg"
               alt="blur"
               class="blur autotelport-blur" />
           </div>
@@ -48,6 +48,8 @@
         variant="k-accent"
         no-shadow
         :disabled="isDisabled"
+        :loading="loading"
+        :loading-with-label="loading"
         class="flex flex-grow btn-height capitalize"
         @click="handleSubmit" />
     </div>
@@ -108,6 +110,7 @@ const props = withDefaults(
     interaction?: ActionlessInteraction
     hideTop?: boolean
     parentReady?: boolean
+    loading?: boolean
   }>(),
   {
     autoCloseModalDelayModal: undefined,
@@ -119,6 +122,7 @@ const props = withDefaults(
     label: '',
     hideTop: false,
     parentReady: true,
+    loading: false,
   },
 )
 

components/common/autoTeleport/AutoTeleportWelcomeModal.vue

@@ -30,7 +30,10 @@
                 :icon="reasonsIcons[index]"
                 size="large"
                 class="text-k-primary mb-3" />
-              <img src="/accent-blur.svg" class="blur icon-blur" alt="blur" />
+              <img
+                src="~/assets/svg/accent-blur.svg"
+                class="blur icon-blur"
+                alt="blur" />
             </div>
 
             <p class="font-bold text-xl mb-3">

components/common/shoppingCart/ShoppingCartItemRow.vue

@@ -11,7 +11,7 @@
             class="border image is-48x48" />
         </nuxt-link>
         <div
-          class="flex flex-col justify-between ml-4 min-w-0 w-full leading-none">
+          class="flex flex-col justify-between ml-4 min-w-0 w-full leading-tight">
           <nuxt-link
             :to="`/${urlPrefix}/gallery/${nft.id}`"
             class="font-bold text-text-color whitespace-nowrap is-clipped text-ellipsis"

components/drops/CreateCalendarEventModal.vue

@@ -4,9 +4,11 @@
     :can-cancel="['outside', 'escape']"
     @close="onClose">
     <ModalBody :title="$t('drops.createACalendarEvent')" @close="onClose">
-      <p class="capitalize">{{ $t('drops.kodadotWeeklyGenerativeDrop') }}</p>
+      <p class="capitalize">
+        {{ title }}
+      </p>
 
-      <p class="text-k-grey mt-3">{{ $t('drops.everyThursday') }} - 3pm CET</p>
+      <p class="text-k-grey mt-3">{{ formattedDate }} - 3pm CET</p>
 
       <div class="flex !mt-6 flex-col gap-6">
         <NeoButton
@@ -34,8 +36,11 @@ type CalendarProvider = 'google'
 
 const props = defineProps<{
   modelValue: boolean
+  title: string
+  dropStartTime?: Date
 }>()
 
+const { $i18n } = useNuxtApp()
 const isModalActive = useVModel(props, 'modelValue')
 
 const providers: { id: CalendarProvider; label: string; icon: string }[] = [
@@ -82,6 +87,12 @@ const addGoogleEvent = () => {
   window.open(calendarURL.toString(), '_blank')
 }
 
+const formattedDate = computed(() =>
+  props.dropStartTime
+    ? format(props.dropStartTime, 'dd/MM/yyyy')
+    : $i18n.t('drops.everyThursday'),
+)
+
 const addEvent = (provider: CalendarProvider) => {
   if (provider === 'google') {
     addGoogleEvent()

components/drops/Drops.vue

@@ -68,7 +68,9 @@
       </div>
     </DynamicGrid>
 
-    <DropsCreateCalendarEventModal v-model="isCreateEventModalActive" />
+    <DropsCreateCalendarEventModal
+      v-model="isCreateEventModalActive"
+      :title="$t('drops.kodadotWeeklyGenerativeDrop')" />
   </div>
 </template>