Merge branch 'main' into neoinput-tailwindcss

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/global.scss

@@ -342,6 +342,12 @@ a.has-text-grey {
   }
 }
 
+.border-bottom-k-shade {
+  @include ktheme() {
+    border-bottom: 1px solid theme('k-shade');
+  }
+}
+
 .has-text-k-shade {
   @include ktheme() {
     color: theme('k-shade');

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,

components/collection/drop/DropConfirmModal.vue

@@ -15,6 +15,22 @@
         {{ $t('drops.subscribe') }}
       </p>
 
+      <div class="mb-5">
+        <div class="is-capitalized is-flex is-align-items-center">
+          <span>{{ $t('drops.plusGetA') }}</span>
+
+          <div class="px-2 is-flex is-align-items-center">
+            <img width="58" :src="signUpVoucherIcon" alt="shop voucher" />
+          </div>
+
+          <span>{{ $t('drops.voucherToOurShop') }}</span>
+        </div>
+
+        <p class="has-text-k-grey is-capitalized mt-3 is-size-7">
+          ({{ $t('drops.justConfirmSubscriptionViaEmail') }})
+        </p>
+      </div>
+
       <form @submit.prevent="confirm">
         <NeoInput
           ref="emailInput"
@@ -55,6 +71,8 @@ const props = defineProps<{ modelValue: boolean }>()
 
 const isModalActive = useVModel(props, 'modelValue')
 
+const { signUpVoucherIcon } = useIcon()
+
 const emailInput = ref()
 const email = ref()
 const agree = ref(false)
@@ -95,12 +113,11 @@ const confirm = () => {
   width: 25rem;
 }
 
-.shine {
-  &:not(:disabled) {
-    @include shineEffect(var(--k-accent-light-3), lightgrey);
-    &:hover {
-      color: var(--k-accent) !important;
-    }
+.shine:not(:hover):not(:disabled) {
+  @include shineEffect(var(--k-accent-light-3), lightgrey, false);
+
+  &:hover {
+    color: var(--k-accent2) !important;
   }
 }
 </style>

components/collection/drop/GenerativePreview.vue

@@ -77,9 +77,6 @@ const generativeImageUrl = ref(
 
 const isLoading = ref(false)
 
-watch([accountId], () => {
-  generateNft(true)
-})
 const displayUrl = computed(() => {
   return generativeImageUrl.value || props.image
 })
@@ -93,6 +90,16 @@ const generateNft = (isDefault: boolean = false) => {
     isLoading.value = false
   }, 3000)
 }
+
+watch(
+  accountId,
+  () => {
+    generateNft(true)
+  },
+  {
+    immediate: true,
+  },
+)
 </script>
 
 <style scoped lang="scss">

components/collection/unlockable/UnlockableTag.vue

@@ -19,9 +19,9 @@
 
 <script lang="ts" setup>
 import { NeoTooltip } from '@kodadot1/brick'
-import { useUnlockableIcon } from '@/composables/useUnlockableIcon'
+import { useIcon } from '@/composables/useIcon'
 
-const { unlockableIcon } = useUnlockableIcon()
+const { unlockableIcon } = useIcon()
 
 const props = defineProps({
   collectionId: {

components/collection/utils/types.ts

@@ -8,6 +8,7 @@ export type Stats = {
   uniqueOwners?: number
   uniqueOwnersPercent?: string
   collectionTradedVolumeNumber?: string | number
+  maxSupply?: number
 }
 
 export type CollectionEntityMinimal = {

components/collection/utils/useCollectionDetails.ts

@@ -49,6 +49,7 @@ export const useCollectionDetails = ({ collectionId }) => {
       const listedNfts = data.value.stats.listed
 
       stats.value = {
+        maxSupply: data.value.stats.max,
         listedCount: data.value.stats.listed.length,
         collectionLength: data.value.stats.base.length,
         collectionFloorPrice:

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -83,6 +83,10 @@ const menus = ref([
     label: 'Onchain Identity',
     to: '/identity',
   },
+  {
+    label: 'Migrate',
+    to: '/migrate',
+  },
 ])
 
 watchEffect(() => {

components/common/ConnectWallet/WalletAssetNfts.vue

@@ -3,14 +3,14 @@
     <hr class="my-4" />
     <p class="has-text-grey is-size-7 mb-2">Recent NFTs</p>
     <div class="nfts">
-      <a
+      <NuxtLink
         v-for="nft in nfts"
-        :key="nft.id"
-        v-safe-href="`/${urlPrefix}/gallery/${nft.id}`">
+        :key="nft?.id"
+        :to="`/${urlPrefix}/gallery/${nft?.id}`">
         <BaseMediaItem
-          :src="sanitizeIpfsUrl(nft.meta.image)"
-          :mime-type="nft.type" />
-      </a>
+          :src="sanitizeIpfsUrl(nft?.meta.image)"
+          :mime-type="nft?.type" />
+      </NuxtLink>
     </div>
   </div>
 </template>

components/common/autoTeleport/AutoTeleportActionButton.vue

@@ -293,7 +293,7 @@ watchSyncEffect(() => {
   }
 })
 
-defineExpose({ hasBalances })
+defineExpose({ hasBalances, optimalTransition })
 </script>
 
 <style lang="scss" scoped>