(beta): 48% of October 2024 Cherry 🍒

components/common/ChooseCollectionDropdown.vue

@@ -8,15 +8,15 @@
       },
     ]"
     :no-shadow="noShadow"
-    :disabled="!isLogIn"
+    :disabled="disabled"
   >
     <template #trigger="{ active }">
       <NeoButton
         v-if="!selectedCollection"
         class="dropdown-width"
         :no-shadow="noShadow"
-        :label="$t('massmint.selectCollection')"
-        :icon="active ? 'chevron-up' : 'chevron-down'"
+        :label="isLoading ? $t('loading') : $t('massmint.selectCollection')"
+        :icon="isLoading ? undefined : (active ? 'chevron-up' : 'chevron-down')"
       />
       <NeoButton
         v-else
@@ -93,6 +93,7 @@ import {
 import type { MintedCollection } from '@/composables/transaction/types'
 import { useCollectionForMint } from '@/composables/massmint/useMassMint'
 
+const emit = defineEmits(['selectedCollection'])
 const props = defineProps({
   fullWidth: { type: Boolean, default: false },
   noShadow: { type: Boolean, default: false },
@@ -101,13 +102,10 @@ const props = defineProps({
 
 const { isLogIn, accountId } = useAuth()
 
-const { collectionsEntites } = useCollectionForMint()
+const { collectionsEntites, isLoading } = useCollectionForMint()
 const selectedCollection = ref<MintedCollection>()
-const emit = defineEmits(['selectedCollection'])
 
-watch(accountId, () => {
-  selectedCollection.value = undefined
-})
+const disabled = computed(() => !isLogIn.value || isLoading.value)
 
 const selectCollection = (collection) => {
   selectedCollection.value = collection
@@ -131,6 +129,10 @@ const handleCollectionsChange = (
   }
 }
 
+watch(accountId, () => {
+  selectedCollection.value = undefined
+})
+
 watch(collectionsEntites, handleCollectionsChange, { immediate: true })
 </script>
 

components/common/listingCart/multipleItemsCart/ListingCartItem.vue

@@ -46,7 +46,6 @@ import ListingCartPriceInput from '../shared/ListingCartPriceInput.vue'
 import CartItemDetails from '@/components/common/CartItemDetails.vue'
 import type { ListCartItem } from '@/stores/listingCart'
 import { useListingCartStore } from '@/stores/listingCart'
-import formatBalance from '@/utils/format/balance'
 
 const { decimals, chainSymbol } = useChain()
 
@@ -56,9 +55,7 @@ const props = defineProps<{
   nft: ListCartItem
 }>()
 
-const floor = computed(() =>
-  formatBalance(props.nft.collection.floor, decimals.value, chainSymbol.value),
-)
+const { formatted: floor } = useAmount(computed(() => props.nft.collection.floor || 0), decimals, chainSymbol, { withBlank: true })
 
 const listingCartItem = computed({
   get: () => listingCartStore.getItem(props.nft.id)?.listPrice,

components/common/listingCart/singleItemCart/ListingCartSingleItemCart.vue

@@ -40,7 +40,6 @@ import ListingCartFloorPrice from '../shared/ListingCartFloorPrice.vue'
 import ListingCartPriceInput from '../shared/ListingCartPriceInput.vue'
 import CartItemDetails from '@/components/common/CartItemDetails.vue'
 import { useListingCartStore } from '@/stores/listingCart'
-import formatBalance from '@/utils/format/balance'
 
 const emit = defineEmits([
   'setFixedPrice',
@@ -65,15 +64,8 @@ const { chainSymbol, decimals } = useChain()
 
 const item = computed(() => listingCartStore.itemsInChain[0])
 
-const itemPrice = computed(() => formatWithBlank(Number(item.value.price)))
-
-const collectionPrice = computed(() =>
-  formatWithBlank(Number(item.value.collection.floor)),
-)
-
-const formatWithBlank = (value: number) => {
-  return value ? formatBalance(value, decimals.value, chainSymbol.value) : '--'
-}
+const { formatted: itemPrice } = useAmount(computed(() => (item.value.price || 0)), decimals, chainSymbol, { withBlank: true })
+const { formatted: collectionPrice } = useAmount(computed(() => item.value.collection.floor || 0), decimals, chainSymbol, { withBlank: true })
 
 watch(
   () => props.fixedPrice,

components/create/CreateNft.vue

@@ -147,7 +147,6 @@
 
       <!-- select collections -->
       <NeoField
-        :key="`collection-${currentChain}`"
         ref="chooseCollectionRef"
         :label="`${$t('mint.nft.collection.label')} *`"
         @click="startSelectedCollection = true"

components/gallery/GalleryItem.vue

@@ -8,7 +8,7 @@
     <div class="flex flex-col lg:flex-row">
       <div class="w-full lg:w-2/5 lg:pr-7 group">
         <div
-          id="nft-img-container"
+          :id="CONTAINER_ID"
           ref="imgref"
           :class="{
             'relative': !isFullscreen,
@@ -41,7 +41,10 @@
             :audio-player-cover="image"
           />
         </div>
-        <GalleryItemToolBar @toggle="toggleFullscreen" />
+        <GalleryItemToolBar
+          :container-id="CONTAINER_ID"
+          @toggle="toggleFullscreen"
+        />
       </div>
 
       <div class="w-full lg:w-3/5 lg:pl-5 py-7">
@@ -188,6 +191,8 @@ import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
 import { convertMarkdownToText } from '@/utils/markdown'
 import { generateNftImage } from '@/utils/seoImageGenerator'
 
+const CONTAINER_ID = 'nft-img-container'
+
 const NuxtImg = resolveComponent('NuxtImg')
 
 const { urlPrefix } = usePrefix()

components/gallery/GalleryItemToolBar.vue

@@ -74,6 +74,10 @@ type ReloadElement =
 
 defineEmits(['toggle'])
 
+const props = defineProps<{
+  containerId: string
+}>()
+
 const { getNft: nft, getNftImage: nftImage, getNftMimeType: nftMimeType, getNftAnimation: nftAnimation, getNftAnimationMimeType: nftAnimationMimeType } = storeToRefs(useNftStore())
 
 const isLoading = ref(false)
@@ -126,7 +130,7 @@ const handleReloadClick = () => {
 }
 
 const openInNewTab = (selector: string, attribute: string = 'src') => {
-  const element = document.querySelector(selector)
+  const element = document.querySelector(`#${props.containerId} ${selector}`)
   if (element) {
     const src = element.getAttribute(attribute)
     if (src) {

components/massmint/types.ts

@@ -1,3 +1,5 @@
+import type { OpenSeaAttribute } from '@kodadot1/hyperdata'
+
 export enum Status {
   Ok = 'Ok',
   Incomplete = 'Incomplete',
@@ -14,13 +16,15 @@ export type NFT = {
   description?: string
   price?: number
   status?: Status
+  attributes?: OpenSeaAttribute[]
 }
 
 export type NFTToMint = {
   name: string
   file: File
   description?: string
   price?: number
+  attributes?: OpenSeaAttribute[]
 }
 
 export type NFTS = { [id: string]: NFT }

components/offer/MakingOfferSingleItem.vue

@@ -54,7 +54,6 @@
 import OfferPriceInput from '@/components/offer/OfferPriceInput.vue'
 import OfferExpirationSelector from '@/components/offer/OfferExpirationSelector.vue'
 import { useMakingOfferStore } from '@/stores/makeOffer'
-import formatBalance from '@/utils/format/balance'
 import CartItemDetails from '@/components/common/CartItemDetails.vue'
 
 const emit = defineEmits([
@@ -73,11 +72,8 @@ const { chainSymbol, decimals } = useChain()
 
 const item = computed(() => offerStore.items[0])
 
-const itemPrice = computed(() => formatWithBlank(Number(item.value.price)))
+const { formatted: itemPrice } = useAmount(computed(() => item.value.price), decimals, chainSymbol, { withBlank: true })
 
-const formatWithBlank = (value: number) => {
-  return value ? formatBalance(value, decimals.value, chainSymbol.value) : '--'
-}
 const offerPriceStoreItem = computed({
   get: () => offerStore.getItem(item.value?.id)?.offerPrice,
   set: price => offerStore.updateItem({ id: item.value.id, offerPrice: price }),
@@ -87,11 +83,8 @@ const offerExpirationStoreItem = computed({
   set: v => offerStore.updateItem({ id: item.value.id, offerExpiration: v }),
 })
 
-const highestOfferPrice = computed(() => formatWithBlank(Number(item.value.highestOffer) || 0) || '--')
-
-const collectionFloorPrice = computed(() =>
-  formatWithBlank(Number(item.value.collection.floorPrice?.[0]?.price || '0')) || '--',
-)
+const { formatted: highestOfferPrice } = useAmount(computed(() => item.value.highestOffer || 0), decimals, chainSymbol, { withBlank: true })
+const { formatted: collectionFloorPrice } = useAmount(computed(() => item.value.collection.floorPrice?.[0]?.price || 0), decimals, chainSymbol, { withBlank: true })
 
 watch(
   () => props.offerPrice,

composables/massmint/massMintHelpers.ts

@@ -25,7 +25,7 @@ export const createTokensToMint = (
       nft.price === undefined ? 0 : nft.price * Math.pow(10, decimals.value),
     nsfw: false,
     postfix: true,
-    tags: [],
+    tags: Array.isArray(nft.attributes) ? nft.attributes : [],
   }))
 }
 export const subscribeToCollectionLengthUpdates = (collectionId: string) => {

composables/massmint/parsers/common.ts

@@ -1,3 +1,4 @@
+import type { OpenSeaAttribute } from '@kodadot1/hyperdata'
 import { validFormats } from '@/composables/massmint/useZipValidator'
 
 export type Entry = {
@@ -7,6 +8,7 @@ export type Entry = {
   price?: number
   valid: boolean
   currency?: string
+  attributes?: OpenSeaAttribute[]
 }
 
 export const validFileExtension = (stringWithFileName: string): boolean => {

composables/massmint/parsers/parseJson.ts

@@ -19,6 +19,7 @@ export function parseJson(jsonData: string): Record<string, Entry> {
         name: item.name || undefined,
         description: item.description || undefined,
         price: item.price !== undefined ? parseFloat(item.price) : undefined,
+        attributes: item.attributes || [],
       }
 
       if (!entry.file) {

composables/massmint/useMassMint.ts

@@ -1,10 +1,10 @@
 import { Interaction } from '@kodadot1/minimark/v1'
+import { useQuery } from '@tanstack/vue-query'
 import {
   createTokensToMint,
   subscribeToCollectionLengthUpdates,
 } from './massMintHelpers'
 import { unwrapSafe } from '@/utils/uniquery'
-import resolveQueryPath from '@/utils/queryPathResolver'
 import type { NFTToMint } from '@/components/massmint/types'
 import { Status } from '@/components/massmint/types'
 import type { MintedCollection } from '@/composables/transaction/types'
@@ -35,64 +35,48 @@ export const statusClass = (status?: Status) => {
 
 export const useCollectionForMint = () => {
   const collectionsEntites = ref<MintedCollection[]>()
-  const collections = ref()
-  const { $consola } = useNuxtApp()
-  const { accountId, isLogIn } = useAuth()
-  const { client, urlPrefix } = usePrefix()
-
-  const doFetch = async () => {
-    if (!isLogIn.value) {
-      return
-    }
-
-    const query = await resolveQueryPath(urlPrefix.value, 'collectionForMint')
-    const { data } = await useAsyncQuery({
-      query: query.default,
-      variables: {
-        account: accountId.value,
-      },
-      clientId: client.value,
-    })
-
-    const { collectionEntities } = data.value
-
-    collections.value = collectionEntities
-      .map(collection => ({
-        ...collection,
-        lastIndexUsed: Math.max(
-          ...collection.nfts.map(nft => Number(nft.index)),
-        ),
-
-        alreadyMinted: collection.nfts?.length,
-        totalCount: collection.nfts?.filter(nft => !nft.burned).length,
-      }))
-      .filter(
-        collection =>
-          (collection.max || Infinity) - collection.alreadyMinted > 0,
-      )
-  }
-
-  const doFetchWithErrorHandling = () =>
-    doFetch().catch((error) => {
-      $consola.error(
-        `Error fetching collections for account ${accountId.value}:`,
-        error,
-      )
-    })
+  const { accountId } = useAuth()
+  const { urlPrefix } = usePrefix()
 
-  watch(accountId, doFetchWithErrorHandling, { immediate: true })
+  const { data, isPending } = useQuery({
+    queryKey: ['collections-for-mint', accountId, urlPrefix],
+    queryFn: async () =>
+      accountId.value
+        ? (await useAsyncGraphql({
+            query: 'collectionForMint',
+            variables: {
+              account: accountId.value,
+            },
+          })).data.value
+        : null,
+  })
 
-  watch(collections, () => {
-    if (!collections) {
-      $consola.log(`collections for account ${accountId.value} not found`)
-      return
+  watch(data, () => {
+    const collectionEntities = data.value?.collectionEntities
+
+    if (collectionEntities?.length) {
+      const collections = collectionEntities
+        .map(collection => ({
+          ...collection,
+          lastIndexUsed: Math.max(
+            ...collection.nfts.map(nft => Number(nft.index)),
+          ),
+
+          alreadyMinted: collection.nfts?.length,
+          totalCount: collection.nfts?.filter(nft => !nft.burned).length,
+        }))
+        .filter(
+          collection =>
+            (collection.max || Infinity) - collection.alreadyMinted > 0,
+        )
+
+      collectionsEntites.value = unwrapSafe(collections)
     }
-
-    collectionsEntites.value = unwrapSafe(collections.value)
-  })
+  }, { immediate: true })
 
   return {
     collectionsEntites,
+    isLoading: isPending,
   }
 }
 

composables/transaction/evm/useMetaTransaction.ts

@@ -1,4 +1,4 @@
-import { type Address, TransactionExecutionError } from 'viem'
+import { type Address } from 'viem'
 import { simulateContract, waitForTransactionReceipt, writeContract } from '@wagmi/core'
 import { useChainId, useConfig, useSwitchChain } from '@wagmi/vue'
 import type { Abi } from '../types'
@@ -105,14 +105,9 @@ export default function useEvmMetaTransaction() {
   const errorCb
     = (onError?: () => void) =>
       ({ error }) => {
-        if (error instanceof TransactionExecutionError) {
-          const isCancelled = error.message.includes('User rejected the request.')
-          isError.value = !isCancelled
-
-          if (isCancelled) {
-            warningMessage($i18n.t('general.tx.cancelled'), { reportable: false })
-            status.value = TransactionStatus.Cancelled
-          }
+        if (error.message?.includes('User rejected the request.')) {
+          warningMessage($i18n.t('general.tx.cancelled'), { reportable: false })
+          status.value = TransactionStatus.Cancelled
         }
         else {
           isError.value = true

composables/useAmount.ts

@@ -5,15 +5,15 @@ export default function (
   tokenAmount: ComputedRef<number | string | undefined>,
   tokenDecimals: ComputedRef<number>,
   chainSymbol: ComputedRef<string>,
-  roundBy?: ComputedRef<Prefix | number>,
+  { roundBy, withBlank = false }: { roundBy?: ComputedRef<Prefix | number>, withBlank?: boolean } = {},
 ) {
   const { getCurrentTokenValue } = useFiatStore()
 
   const amountFormatted = computed(() => {
     const amount = tokenAmount.value
       ? formatAmountWithRound(tokenAmount.value, tokenDecimals.value, roundBy?.value)
       : 0
-    return `${amount} ${chainSymbol.value}`
+    return (!Number(amount) && withBlank) ? '--' : `${amount} ${chainSymbol.value}`
   })
 
   const amountUsd = computed(() => {