release update

assets/styles/abstracts/_animations.scss

@@ -105,7 +105,8 @@
   animation: dots 1.5s infinite;
 }
 
-@mixin shineEffect($shineColor, $shineHover) {
+@mixin shineEffect($shineColor, $shineHover, $overChild: true) {
+  position: relative;
   overflow: hidden;
 
   &::before,
@@ -117,7 +118,7 @@
     background-color: $shineColor;
     transform: skewX(-30deg);
     transition: background-color 0.3s;
-    z-index: 0;
+    z-index: 1;
   }
 
   &::before {
@@ -138,6 +139,12 @@
       background-color: $shineHover
     }
   }
+
+  @if not $overChild {
+    > :first-child {
+      z-index: 2;
+    }
+  }
 }
 
 @keyframes shine1 {

assets/styles/abstracts/_theme.scss

@@ -22,7 +22,7 @@ $themes: (
     'k-redaccent2': #ffe6e6,
     'k-grey': #999999,
     'k-grey-fix': #999999,
-    'k-grey-light': #ECECEC,
+    'k-grey-light': #f5f5f5,
     'k-pink': #ffb6ef,
     'k-yellow': #feffb6,
     'warning-yellow': #fffbcc,
@@ -72,7 +72,7 @@ $themes: (
     'k-redaccent2': #390b0b,
     'k-grey': #cccccc,
     'k-grey-fix': #999999,
-    'k-grey-light': #ECECEC,
+    'k-grey-light': #1f1f1f,
     'k-pink': #7a2a68,
     'k-yellow': #363234,
     'warning-yellow': #3f3500,

assets/styles/components/_content-markdown.scss

@@ -4,4 +4,7 @@
   code {
     font-family: monospace;
   }
+  a {
+    color: var(--k-blue) !important;
+  }
 }

assets/styles/global.scss

@@ -336,15 +336,15 @@ a.has-text-grey {
   }
 }
 
-.border-k-grey {
+.border-top-k-shade {
   @include ktheme() {
-    border-color: theme('k-grey') !important;
+    border-top: 1px solid theme('k-shade');
   }
 }
 
-.border-top-k-shade {
+.border-bottom-k-shade {
   @include ktheme() {
-    border-top: 1px solid theme('k-shade');
+    border-bottom: 1px solid theme('k-shade');
   }
 }
 
@@ -550,6 +550,11 @@ a.has-text-grey {
   border-radius: 50%;
 }
 
+.is-rounded-small {
+  border-radius: 4rem;
+}
+
+
 .w-half {
   width: 50%;
 }
@@ -567,6 +572,10 @@ a.has-text-grey {
   font-size: 1.6rem;
 }
 
+.is-size-8 {
+  font-size: 0.5rem;
+}
+
 .is-max-width-fit-content {
   max-width: fit-content;
 }

components/base/MediaItem.vue

@@ -192,9 +192,8 @@ defineExpose({ isLewdBlurredLayer })
     top: 0;
     height: 100%;
     width: 100%;
-    @include ktheme() {
-      color: theme('text-color');
-    }
+    background-color: rgb(0 0 0 / 50%);
+    color: #fff;
 
     .nsfw-desc {
       max-width: 18.75rem;

components/carousel/CarouselTypeGenerative.vue

@@ -12,6 +12,6 @@ import { useCarouselGenerativeNftEvents } from './utils/useCarouselEvents'
 
 const { nfts, ids } = await useCarouselGenerativeNftEvents(
   ['176'],
-  ['38', '40', '46'],
+  ['38', '40', '46', '49', '50'],
 )
 </script>

components/collection/CollectionInfo.vue

@@ -34,6 +34,10 @@
             :value="stats.uniqueOwners" />
         </div>
         <div>
+          <CollectionInfoLine
+            v-if="isAssetHub"
+            :title="$t('activity.totalSupply')"
+            :value="stats.maxSupply || $t('helper.unlimited')" />
           <CollectionInfoLine :title="$t('activity.floor')">
             <CommonTokenMoney
               :value="stats.collectionFloorPrice"
@@ -71,6 +75,7 @@ import {
 const route = useRoute()
 const { urlPrefix } = usePrefix()
 const { availableChains } = useChain()
+const { isAssetHub } = useIsChain(urlPrefix)
 const collectionId = computed(() => route.params.id)
 const chain = computed(
   () =>

components/collection/CustomizeModal.vue

@@ -0,0 +1,86 @@
+<template>
+  <NeoModal :value="value" @close="value = false">
+    <div class="py-4 px-5 limit-width">
+      <div class="is-flex mb-3 is-size-6 has-text-weight-bold">
+        {{ 'Customize Collection' }}
+      </div>
+      <div class="has-text-grey is-size-7 mb-5">
+        This will update the Maximum items in your collection
+      </div>
+      <!-- collection max nfts -->
+      <NeoField
+        :label="$t('Maximum NFTs in collection')"
+        data-testid="collection-maxAmount"
+        required>
+        <div class="w-full">
+          <NeoInput
+            v-model="max"
+            type="number"
+            :placeholder="`${min} is the minimum`"
+            :min="min" />
+        </div>
+      </NeoField>
+      <div class="is-flex is-justify-content-flex-end">
+        <NeoButton
+          class="has-text-weight-bold mr-4"
+          variant="text"
+          no-shadow
+          @click="customizeCollection">
+          <span class="has-text-k-green">
+            {{ $t('Update') }}
+          </span>
+        </NeoButton>
+        <NeoButton
+          class="has-text-weight-bold"
+          variant="text"
+          no-shadow
+          :label="$t('cancel')"
+          @click="value = false" />
+      </div>
+    </div>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoField, NeoInput, NeoModal } from '@kodadot1/brick'
+import { Collections } from '@/composables/transaction/types'
+
+const { $updateLoader } = useNuxtApp()
+const { transaction, status } = useTransaction()
+const { urlPrefix } = usePrefix()
+const route = useRoute()
+
+const props = defineProps<{
+  modelValue: boolean
+  min: number
+  max: number
+}>()
+const emit = defineEmits(['update:value', 'customize'])
+
+const value = useVModel(props, 'modelValue')
+
+const min = computed(() => props.min || 1)
+const max = ref(props.max)
+
+const customizeCollection = async () => {
+  emit('customize')
+  $updateLoader(true)
+
+  await transaction({
+    interaction: Collections.SET_MAX_SUPPLY,
+    collectionId: route.params.id.toString(),
+    urlPrefix: urlPrefix.value,
+    max: Number(max.value),
+  })
+
+  if (status.value === TransactionStatus.Finalized) {
+    $updateLoader(false)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.limit-width {
+  max-width: 314px;
+}
+</style>

components/collection/HeroButtonCustomizeCollection.vue

@@ -0,0 +1,35 @@
+<template>
+  <NeoDropdownItem
+    :disabled="max"
+    @click="customizeCollectionModalActive = true">
+    {{ $i18n.t('moreActions.customize') }}
+  </NeoDropdownItem>
+
+  <CollectionCustomizeModal
+    v-model="customizeCollectionModalActive"
+    :min="min"
+    :max="max"
+    @customize="closeModal" />
+</template>
+
+<script setup lang="ts">
+import { NeoDropdownItem } from '@kodadot1/brick'
+
+withDefaults(
+  defineProps<{
+    min: number
+    max: number
+  }>(),
+  {
+    min: undefined,
+    max: undefined,
+  },
+)
+
+const { $i18n } = useNuxtApp()
+const customizeCollectionModalActive = ref(false)
+
+const closeModal = () => {
+  customizeCollectionModalActive.value = false
+}
+</script>

components/collection/HeroButtons.vue

@@ -67,11 +67,11 @@
 
           <!-- related: #5792 -->
           <div v-if="isOwner">
-            <HeroButtonDeleteNfts />
-            <HeroButtonDeleteCollection />
-            <!-- <NeoDropdownItem>
-                {{ $i18n.t('moreActions.customize') }}
-              </NeoDropdownItem> -->
+            <CollectionHeroButtonDeleteNfts />
+            <CollectionHeroButtonDeleteCollection />
+            <CollectionHeroButtonCustomizeCollection
+              :min="collectionNftCount"
+              :max="collectionMaxCount" />
           </div>
           <NeoDropdownItem disabled>
             {{ $i18n.t('moreActions.reportCollection') }}
@@ -100,8 +100,6 @@ import {
   NeoModal,
 } from '@kodadot1/brick'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
-import HeroButtonDeleteCollection from './HeroButtonDeleteCollection.vue'
-import HeroButtonDeleteNfts from './HeroButtonDeleteNfts.vue'
 
 const route = useRoute()
 const { isCurrentOwner } = useAuth()
@@ -118,6 +116,8 @@ const { collection } = useCollectionMinimal({
   collectionId: collectionId.value,
 })
 const collectionIssuer = computed(() => collection.value?.issuer)
+const collectionNftCount = computed(() => collection.value?.nftCount)
+const collectionMaxCount = computed(() => collection.value?.max)
 
 const { twitter } = useIdentity({
   address: collectionIssuer,