Merge pull request #10832 from kodadot/main

components/collection/drop/GenerativeLayout.vue

@@ -29,7 +29,7 @@
           <CollectionUnlockableCollectionInfo
             class="mt-7"
             :collection-id="drop?.collection"
-            :description="description"
+            :description="drop.collectionDescription"
           />
 
           <hr class="hidden md:block mt-4 mb-0">
@@ -93,22 +93,19 @@ import type {
   Drop } from '@/components/drops/useDrops'
 import {
   getFormattedDropItem,
-  useDrop,
 } from '@/components/drops/useDrops'
 import { useCollectionActivity } from '@/composables/collectionActivity/useCollectionActivity'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import useCursorDropEvents from '@/composables/party/useCursorDropEvents'
 import { DropEventType } from '@/composables/party/types'
-import { useCollectionEntity } from '@/composables/drop/useGenerativeDropMint'
 import type { DropItem } from '@/params/types'
 
 const mdBreakpoint = 768
 
 const emit = defineEmits(['mint'])
 
-const { drop } = useDrop()
+const { drop } = storeToRefs(useDropStore())
 const { previewItem, userMintsCount } = storeToRefs(useDropStore())
-const { description } = useCollectionEntity()
 const { width } = useWindowSize()
 
 const { emitEvent, completeLastEvent } = useCursorDropEvents()

components/collection/drop/GenerativePreview.vue

@@ -56,16 +56,23 @@
         <div class="mr-4 text-neutral-7">
           {{ mintedPercent }}% ~
         </div>
-        <div class="font-bold">
-          {{ dropStore.mintsCount }}/{{ maxCount }}
+        <div
+          v-if="drop.minted >= 0 && drop.max"
+          class="font-bold"
+        >
+          {{ drop.minted }}/{{ drop.max }}
           {{ $t('statsOverview.minted') }}
         </div>
+        <div v-else>
+          <NeoSkeleton width="100" />
+        </div>
       </div>
     </div>
 
     <CollectionUnlockableSlider
+      v-if="drop.max"
       class="text-neutral-5 dark:text-neutral-9"
-      :value="dropStore.mintsCount / maxCount"
+      :value="drop.minted / drop.max"
     />
 
     <div class="flex mt-6 gap-4 max-md:flex-col">
@@ -88,18 +95,14 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton, NeoIcon, NeoSkeleton } from '@kodadot1/brick'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import useGenerativeIframeData from '@/composables/drop/useGenerativeIframeData'
-import { useDrop } from '@/components/drops/useDrops'
-import useGenerativeDropMint from '@/composables/drop/useGenerativeDropMint'
 
 const { accountId } = useAuth()
 const { chainSymbol, decimals } = useChain()
-const { drop } = useDrop()
 const dropStore = useDropStore()
-const { userMintsCount, mintsCount } = storeToRefs(dropStore)
-const { maxCount } = useGenerativeDropMint()
+const { userMintsCount, drop } = storeToRefs(dropStore)
 const { imageDataPayload, imageDataLoaded } = useGenerativeIframeData()
 const { formatted: formattedPrice } = useAmount(
   computed(() => drop.value.price),
@@ -121,10 +124,10 @@ const { start: startTimer } = useTimeoutFn(() => {
 const generativeImageUrl = ref('')
 
 const mintedPercent = computed(() => {
-  if (!maxCount.value) {
+  if (!drop.value.max) {
     return 0
   }
-  return Math.round((mintsCount.value / maxCount.value) * 100)
+  return Math.round((drop.value.minted / drop.value.max) * 100)
 })
 
 const displayUrl = computed(() => generativeImageUrl.value || drop.value?.image)
@@ -148,6 +151,16 @@ const generateNft = () => {
   imageDataPayload.value = undefined
 }
 
+function bindDropsEvents(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'n':
+      generateNft()
+      break
+  }
+}
+
+useKeyboardEvents({ v: bindDropsEvents })
+
 watch(imageDataLoaded, () => {
   if (imageDataLoaded.value) {
     dropStore.setIsCapturingImage(false)

components/collection/drop/HolderOfGenerative.vue

@@ -51,9 +51,7 @@
 <script setup lang="ts">
 import { NeoModal } from '@kodadot1/brick'
 import {
-  useDrop,
   useDropMinimumFunds,
-  useDropStatus,
 } from '@/components/drops/useDrops'
 import useGenerativeDropMint, {
   useUpdateMetadata,
@@ -91,14 +89,12 @@ const { openListingCartModal } = useListingCartModal({
 const { fetchMultipleBalance } = useMultipleBalance()
 const { hasMinimumFunds } = useDropMinimumFunds()
 
-const { drop } = useDrop()
-const { subscribeDropStatus } = useDropStatus(drop)
 const dropStore = useDropStore()
 const { claimedNft, canListMintedNft } = useGenerativeDropMint()
 const { availableNfts } = useHolderOfCollection()
 const { isAutoTeleportModalOpen } = useAutoTeleportModal()
 
-const { mintingSession, loading, walletConnecting, isCapturingImage }
+const { mintingSession, loading, walletConnecting, isCapturingImage, drop }
   = storeToRefs(dropStore)
 
 useCursorDropEvents([isTransactionLoading, loading])
@@ -241,8 +237,6 @@ useTransactionTracker({
 watch(txHash, () => {
   mintingSession.value.txHash = txHash.value
 })
-
-onBeforeMount(subscribeDropStatus)
 </script>
 
 <style scoped lang="scss">

components/collection/drop/MintButton.vue

@@ -22,7 +22,7 @@
 import { NeoButton } from '@kodadot1/brick'
 import useGenerativeDropMint from '@/composables/drop/useGenerativeDropMint'
 import { useDropStore } from '@/stores/drop'
-import { useDrop, useDropMinimumFunds } from '@/components/drops/useDrops'
+import { useDropMinimumFunds } from '@/components/drops/useDrops'
 import {
   calculateBalanceUsdValue,
   formatAmountWithRound,
@@ -39,10 +39,10 @@ const { isLogIn } = useAuth()
 const { chainSymbol, decimals } = useChain()
 const dropStore = useDropStore()
 const { hasCurrentChainBalance } = useMultipleBalance()
-const { drop } = useDrop()
 const now = useNow()
-const { mintCountAvailable, maxCount } = useGenerativeDropMint()
-const { amountToMint, previewItem, userMintsCount } = storeToRefs(dropStore)
+const { mintCountAvailable } = useGenerativeDropMint()
+const { amountToMint, previewItem, userMintsCount, drop } = storeToRefs(dropStore)
+
 const { hasMinimumFunds } = useDropMinimumFunds()
 const { holderOfCollection } = useHolderOfCollection()
 const { getWalletVM, getIsWalletVMChain } = storeToRefs(useWalletStore())
@@ -51,7 +51,8 @@ const priceUsd = ref()
 const isHolderAndEligible = computed(
   () =>
     holderOfCollection.value.isHolder
-    && maxCount.value > dropStore.mintsCount
+    && drop.value.max
+    && drop.value.max > drop.value.minted
     && hasMinimumFunds.value
     && holderOfCollection.value.hasAvailable,
 )
@@ -74,7 +75,7 @@ const mintForLabel = computed(() =>
 )
 
 const label = computed(() => {
-  if (!mintCountAvailable.value) {
+  if (drop.value.max && (drop.value.max === drop.value.minted)) {
     return $i18n.t('mint.unlockable.seeListings')
   }
   if (!isLogIn.value) {
@@ -138,7 +139,7 @@ const enabled = computed(() => {
     case 'holder':
       return isHolderAndEligible.value
     case 'paid':
-      return maxCount.value > userMintsCount.value
+      return drop.value.max && drop.value.max > userMintsCount.value
     default:
       return false
   }

components/collection/drop/MintStepper.vue

@@ -25,16 +25,18 @@ const min = computed(() =>
   isHolder.value ? Math.min(1, availableNftsAmount.value) : 1,
 )
 
-const max = computed(() => {
-  // tmp remove when uploading to IPFS step can be skipped @see https://github.com/kodadot/nft-gallery/issues/10001#issuecomment-2041533819
-  const dropMax = DROP_MASSMINT_LIMIT[drop.value.alias] ?? undefined
+const max = computed(() => isHolder.value ? availableNftsAmount.value : undefined)
 
-  if (isHolder.value) {
-    return dropMax
-      ? Math.min(dropMax, availableNftsAmount.value)
-      : availableNftsAmount.value
+function bindDropsEvents(event: KeyboardEvent) {
+  switch (event.key) {
+    case '-':
+      amountToMint.value--
+      break
+    case '+':
+      amountToMint.value++
+      break
   }
+}
 
-  return dropMax
-})
+useKeyboardEvents({ v: bindDropsEvents })
 </script>

components/collection/drop/PaidGenerative.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import { useDrop, useDropStatus } from '@/components/drops/useDrops'
 import { useUpdateMetadata } from '@/composables/drop/useGenerativeDropMint'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import { ActionlessInteraction } from '@/components/common/autoTeleport/utils'
@@ -24,8 +23,6 @@ import useAutoTeleportModal from '@/composables/autoTeleport/useAutoTeleportModa
 import { NFTs } from '@/composables/transaction/types'
 import { openReconnectWalletModal } from '@/components/common/ConnectWallet/openReconnectWalletModal'
 
-const { drop } = useDrop()
-const { subscribeDropStatus } = useDropStatus(drop)
 const { urlPrefix } = usePrefix()
 const { doAfterLogin } = useDoAfterlogin()
 const { $i18n, $consola } = useNuxtApp()
@@ -37,7 +34,7 @@ const { openListingCartModal } = useListingCartModal({
 })
 const { getWalletVM, getIsWalletVMChain } = storeToRefs(useWalletStore())
 
-const { loading, walletConnecting, mintingSession, isCapturingImage }
+const { loading, walletConnecting, mintingSession, isCapturingImage, drop }
   = storeToRefs(useDropStore())
 
 const { isAutoTeleportModalOpen } = useAutoTeleportModal()
@@ -174,8 +171,6 @@ useTransactionTracker({
 watch(txHash, () => {
   mintingSession.value.txHash = txHash.value
 })
-
-onBeforeMount(subscribeDropStatus)
 </script>
 
 <style scoped lang="scss">

components/common/ConnectWallet/ConnectEvm.vue

@@ -25,10 +25,11 @@
 
 <script lang="ts" setup>
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { useAccount } from '@wagmi/vue'
 
 const emits = defineEmits(['select'])
 
-const { address, isConnected, isConnecting, chainId } = useWagmi()
+const { address, isConnected, isConnecting, chainId } = useAccount()
 const { urlPrefix, setUrlPrefix } = usePrefix()
 const { modal } = useWeb3Modal()