Merge branch 'main' into fix/ui/build

assets/styles/abstracts/_theme.scss

@@ -24,6 +24,7 @@ $themes: (
     'k-grey-fix': #999999,
     'k-pink': #ffb6ef,
     'k-yellow': #feffb6,
+    'warning-yellow': #fffbcc,
     'k-blueaccent': #b6cbff,
     'k-aqua-blue': #cafdf4,
     'k-greenaccent': #c2ffac,
@@ -72,6 +73,7 @@ $themes: (
     'k-grey-fix': #999999,
     'k-pink': #7a2a68,
     'k-yellow': #363234,
+    'warning-yellow': #3f3500,
     'k-blueaccent': #2e50a2,
     'k-aqua-blue': #106153,
     'k-greenaccent': #056a02,

components/base/types.ts

@@ -30,6 +30,7 @@ export interface CarouselNFT extends ItemResources {
   }
   name: string
   price: string
+  latestSalePrice?: string
   timestamp: string
   unixTime: number
   metadata?: string

components/carousel/module/CarouselInfo.vue

@@ -35,12 +35,16 @@
           ? 'is-justify-content-space-between'
           : 'is-justify-content-end',
       ]">
-      <Money
-        v-if="showPrice"
-        :value="item.price"
-        inline
-        :prefix="item.chain"
-        :unit-symbol="unitSymbol" />
+      <div v-if="showPrice" class="is-flex is-align-items-center">
+        <Money
+          :value="price"
+          inline
+          :prefix="item.chain"
+          :unit-symbol="unitSymbol" />
+        <span v-if="showSold" class="ml-2 has-text-grey is-size-7"
+          >- {{ $t('spotlight.sold') }}</span
+        >
+      </div>
       <p class="is-size-7 chain-name is-capitalized">{{ chainName }}</p>
     </div>
   </div>
@@ -71,8 +75,11 @@ const chainName = computed(() => {
   return getChainNameByPrefix(props.item.chain || urlPrefix.value)
 })
 
+const price = computed(() => props.item.latestSalePrice ?? props.item.price)
+const showSold = computed(() => Number(props.item.latestSalePrice) > 0)
+
 const showPrice = computed((): boolean => {
-  return Number(props.item.price) > 0 && !isCollection
+  return Number(price.value) > 0 && !isCollection
 })
 
 const unitSymbol = computed(() => prefixToToken[props.item.chain || 'ksm'])

components/carousel/utils/useCarouselEvents.ts

@@ -38,8 +38,32 @@ const fetchLatestEvents = async (chain, type, where = {}, limit = 5) => {
   })
 }
 
-const useChainEvents = async (chain, type, eventQueryLimit, collectionIds) => {
-  const nfts = ref<{ nft: NFTWithMetadata; timestamp: string }[]>([])
+const createEventQuery = (
+  type,
+  excludeNftId,
+  collectionIds,
+  excludeCollectionId,
+) => ({
+  nft: {
+    ...(type === 'newestList' && { price_gt: 0 }),
+    id_not_in: [...new Set(excludeNftId.value)],
+    collection: {
+      ...(collectionIds && { id_in: collectionIds }),
+      id_not_in: [...new Set(excludeCollectionId.value)],
+    },
+  },
+})
+
+const useChainEvents = async (
+  chain,
+  type,
+  eventQueryLimit,
+  collectionIds,
+  withLastestSale = true,
+) => {
+  const nfts = ref<
+    { nft: NFTWithMetadata; timestamp: string; latestSalePrice?: string }[]
+  >([])
   const uniqueNftId = ref<string[]>([])
   const totalCollection = reactive({})
   const excludeCollectionId = ref<string[]>([])
@@ -54,6 +78,9 @@ const useChainEvents = async (chain, type, eventQueryLimit, collectionIds) => {
   const pushNft = (nft) => {
     if (!uniqueNftId.value.includes(nft.nft.id) && nfts.value.length < limit) {
       uniqueNftId.value.push(nft.nft.id)
+      if (type === 'latestSales' && withLastestSale) {
+        nft.latestSalePrice = nft.meta
+      }
       nfts.value.push(nft)
     }
   }
@@ -75,22 +102,14 @@ const useChainEvents = async (chain, type, eventQueryLimit, collectionIds) => {
     totalCollection[nft.nft.collection.id] = 1
     pushNft(nft)
   }
-
-  const { data } = await fetchLatestEvents(
-    chain,
+  const query = createEventQuery(
     type,
-    {
-      nft: {
-        ...(type === 'newestList' && { price_gt: 0 }),
-        id_not_in: [...new Set(excludeNftId.value)],
-        collection: {
-          ...(collectionIds && { id_in: collectionIds }),
-          id_not_in: [...new Set(excludeCollectionId.value)],
-        },
-      },
-    },
-    eventQueryLimit,
+    excludeNftId,
+    collectionIds,
+    excludeCollectionId,
   )
+
+  const { data } = await fetchLatestEvents(chain, type, query, eventQueryLimit)
   data.value?.events?.forEach((nft) => limitCollection(nft))
 
   return {
@@ -107,6 +126,7 @@ export const flattenNFT = (data, chain) => {
     return {
       ...nft.nft,
       timestamp: nft.timestamp,
+      latestSalePrice: nft.latestSalePrice,
     }
   })
 
@@ -158,6 +178,7 @@ export const useCarouselGenerativeNftEvents = async (
     'latestSales',
     10,
     ahkCollectionIds,
+    false,
   )
   const { data: listDataAhk } = await useChainEvents(
     'ahk',
@@ -170,6 +191,7 @@ export const useCarouselGenerativeNftEvents = async (
     'latestSales',
     10,
     ahpCollectionIds,
+    false,
   )
   const { data: listDataAhp } = await useChainEvents(
     'ahp',

components/items/ItemsGrid/ItemsGridImageTokenEntity.vue

@@ -115,6 +115,7 @@ const {
   isOwner,
   isThereAnythingToList,
 } = useNftActions(props.entity)
+const cheapestNFT = ref<NFTWithMetadata>()
 
 const { showCardIcon, cardIcon } = await useNftCardIcon(
   computed(() => props.entity),
@@ -136,7 +137,9 @@ const mediaPlayerCover = computed(() => nftMetadata.value?.image)
 
 const showActionSection = computed(() => {
   return (
-    !isLogIn.value && shoppingCartStore.getItemToBuy?.id === props.entity.id
+    !isLogIn.value &&
+    shoppingCartStore.getItemToBuy?.id !== undefined &&
+    shoppingCartStore.getItemToBuy?.id === cheapestNFT.value?.id
   )
 })
 
@@ -199,7 +202,7 @@ const onClickShoppingCart = async () => {
 const onClickListingCart = async () => {
   const nftsToProcess = await getTokensNfts([props.entity])
 
-  const floorPrice = nftsToProcess[0].collection.floorPrice[0].price
+  const floorPrice = nftsToProcess[0].collection.floorPrice[0]?.price || '0'
 
   for (const nft of nftsToProcess) {
     if (listingCartStore.isItemInCart(nft.id)) {
@@ -209,6 +212,10 @@ const onClickListingCart = async () => {
     }
   }
 }
+
+onMounted(async () => {
+  cheapestNFT.value = await getNFTForBuying()
+})
 </script>
 
 <style lang="scss" scoped>

components/massmint/Massmint.vue

@@ -72,6 +72,10 @@
       v-model="mintModalOpen"
       :loading="isMinting"
       @close="mintModalOpen = false" />
+    <MobileDisclaimerModal
+      v-model="MobileDisclaimerModalOpen"
+      @continue="MobileDisclaimerModalOpen = false"
+      @leave="back" />
   </div>
 </template>
 
@@ -84,10 +88,16 @@ import OverviewTable from './OverviewTable.vue'
 import ChooseCollectionDropdown from '@/components/common/ChooseCollectionDropdown.vue'
 import EditPanel from './EditPanel.vue'
 import { NFT, NFTToMint } from './types'
-import MissingInfoModal from './modals/MissingInfoModal.vue'
-import ReviewModal from './modals/ReviewModal.vue'
-import DeleteModal from './modals/DeleteModal.vue'
-import MintingModal from './modals/MintingModal.vue'
+const { width } = useWindowSize()
+const { back } = useRouter()
+
+import {
+  DeleteModal,
+  MintingModal,
+  MissingInfoModal,
+  MobileDisclaimerModal,
+  ReviewModal,
+} from './modals'
 import { MintedCollection } from '@/composables/transaction/types'
 import { notificationTypes, showNotification } from '@/utils/notification'
 import { useMassMint } from '@/composables/massmint/useMassMint'
@@ -110,6 +120,8 @@ const deleteModalOpen = ref(false)
 const missingInfoModalOpen = ref(false)
 const overViewModalOpen = ref(false)
 const mintModalOpen = ref(false)
+const MobileDisclaimerModalOpen = ref(false)
+const smallerThenDesktop = computed(() => width.value < 1024)
 
 const isMinting = ref(false)
 const mintStatus = ref('')
@@ -243,6 +255,10 @@ const onDescriptionLoaded = (entries: Record<string, Entry>) => {
     }
   })
 }
+
+onMounted(() => {
+  MobileDisclaimerModalOpen.value = smallerThenDesktop.value
+})
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables.scss';

components/massmint/modals/MobileDisclaimerModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <NeoModal
+    :value="isModalActive"
+    scroll="clip"
+    :enable-mobile="false"
+    content-class="mx-4"
+    :can-cancel="false">
+    <div class="px-6 py-5 modal-width">
+      <div class="is-flex is-size-5 mb-4 is-align-items-center">
+        <NeoIcon icon="triangle-exclamation" pack="fasr" class="mr-3" />
+        <span class="has-text-weight-bold">
+          {{ $t('massmint.mobileDisclaimer.title') }}
+          <br />
+        </span>
+      </div>
+      <div
+        class="px-4 py-3 bakground-warning-yellow border border-color-k-orange">
+        {{ $t('massmint.mobileDisclaimer.content1') }}
+        <br />
+        <br />
+        {{ $t('massmint.mobileDisclaimer.content2') }}
+      </div>
+      <div class="is-flex mt-5 is-align-items-center">
+        <NeoButton
+          variant="text"
+          class="mr-4"
+          no-shadow
+          :label="$t('massmint.mobileDisclaimer.continueAnyway')"
+          @click="emit('continue')" />
+        <NeoButton
+          variant="pill"
+          :label="$t('massmint.mobileDisclaimer.leave')"
+          @click="emit('leave')" />
+      </div>
+    </div>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoIcon, NeoModal } from '@kodadot1/brick'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const isModalActive = useVModel(props, 'modelValue')
+
+const emit = defineEmits(['leave', 'continue'])
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables.scss';
+
+.bakground-warning-yellow {
+  @include ktheme() {
+    background-color: theme('warning-yellow');
+  }
+}
+.border-color-k-orange {
+  @include ktheme() {
+    border-color: theme('k-orange') !important;
+  }
+}
+</style>

components/massmint/modals/index.ts

@@ -0,0 +1,5 @@
+export { default as MintingModal } from './MintingModal.vue'
+export { default as MissingInfoModal } from './MissingInfoModal.vue'
+export { default as MobileDisclaimerModal } from './MobileDisclaimerModal.vue'
+export { default as DeleteModal } from './DeleteModal.vue'
+export { default as ReviewModal } from './ReviewModal.vue'

composables/useListInfiniteScroll.ts

@@ -69,6 +69,13 @@ export default function ({
   )
 
   const updateCurrentPage = () => {
+    // allow page update only when current path is same as route path
+    // i.e. scope it to only the page in which useListInfiniteScroll is used
+    const allowUpdate =
+      process.client && window.location.pathname === route.path
+    if (!allowUpdate) {
+      return
+    }
     const page =
       Math.floor(document.documentElement.scrollTop / pageHeight.value) +
       startPage.value

layouts/explore-layout.vue

@@ -27,7 +27,7 @@
             </div>
           </section>
           <hr class="text-color my-0" />
-          <NuxtPage :keepalive="keepalive" />
+          <NuxtPage />
         </div>
       </main>
     </div>
@@ -70,8 +70,6 @@ const isCollection = computed(
   () => route.name?.toString().includes('prefix-collection-id'),
 )
 
-const keepalive = computed(() => (isCollection.value ? false : undefined))
-
 const getExploreTitle = computed(() => {
   if (
     Object.keys(chainNameSeoMap).includes(urlPrefix.value) &&

libs/ui/src/components/MediaItem/MediaItem.vue

@@ -96,7 +96,7 @@ const props = withDefaults(
     original: false,
     isLewd: false,
     isDetail: false,
-    placeholder: '',
+    placeholder: './Koda.svg',
     disableOperation: undefined,
     audioPlayerCover: '',
     imageComponent: 'img',