feat: enhance attribute calc on mass mint

components/gallery/GalleryItemDescription.vue

@@ -283,7 +283,9 @@ const propertiesTabDisabled = computed(() => {
   return !nftMetadata.value?.attributes?.length
 })
 
-const { getAttributeRarity } = useCollectionAttributes(computed(() => propertiesTabDisabled.value ? undefined : nft.value?.collection?.id))
+const { getAttributeRarity } = useCollectionAttributes({
+  collectionId: computed(() => propertiesTabDisabled.value ? undefined : nft.value?.collection?.id),
+})
 
 const properties = computed<{ trait_type: string, value: string, rarity: number }[]>(() => {
   const attributes = (nftMetadata.value?.attributes || []) as Array<{

components/massmint/Massmint.vue

@@ -37,6 +37,7 @@
         <OverviewTable
           :disabled="!mediaLoaded"
           :nfts="NFTS"
+          :collection-id="selectedCollection?.id"
           @open-side-bar-with="openSideBarWith"
           @delete="openDeleteModalWith"
         />

components/massmint/OverviewTable.vue

@@ -71,7 +71,7 @@
                         class="flex items-center gap-2"
                       >
                         <span>{{ attr.trait_type }}: <span class="font-bold">{{ attr.value }}</span></span>
-                        <span class="text-k-blue">{{ allNftAttributesRarityMaps[attr.trait_type]?.[attr.value] }}%</span>
+                        <span class="text-k-blue">{{ getAttributeRarity(attr.trait_type, attr.value) }}%</span>
                       </div>
                     </div>
                     <div v-else>
@@ -157,47 +157,24 @@ const props = withDefaults(
   defineProps<{
     disabled?: boolean
     nfts?: NFTS
+    collectionId?: string
   }>(),
   {
     disabled: false,
-    nfts: undefined,
+    nfts: () => ({}),
+    collectionId: undefined,
   },
 )
 
+const { getAttributeRarity } = useCollectionAttributes({
+  collectionId: computed(() => props.collectionId),
+  extraNfts: computed(() => Object.values(props.nfts)),
+})
+
 const displayedNFTS = computed<NFT[]>(() =>
   Object.values(props.nfts).slice(0, offset.value).map(addStatus),
 )
 
-const allNftAttributesRarityMaps = computed(() => {
-  const attributeCounts: Record<string, Record<string, number>> = {}
-  const nfts = Object.values(props.nfts || {})
-  nfts.forEach((nft) => {
-    if (!nft.attributes?.length) return
-
-    nft.attributes.forEach((attr) => {
-      if (!attributeCounts[attr.trait_type]) {
-        attributeCounts[attr.trait_type] = {}
-      }
-
-      attributeCounts[attr.trait_type][attr.value]
-        = (attributeCounts[attr.trait_type][attr.value] || 0) + 1
-    })
-  })
-
-  const rarityMaps: Record<string, Record<string, number>> = {}
-  const totalNfts = nfts?.length || 0
-
-  Object.entries(attributeCounts).forEach(([traitType, valueCounts]) => {
-    rarityMaps[traitType] = {}
-
-    Object.entries(valueCounts).forEach(([value, count]) => {
-      rarityMaps[traitType][value] = parseFloat((count / totalNfts * 100).toFixed(1))
-    })
-  })
-
-  return rarityMaps
-})
-
 const openSideBarWith = (nft: NFT) => {
   emit('openSideBarWith', nft)
 }

composables/useCollectionAttributes.ts

@@ -1,19 +1,34 @@
 import { useQuery } from '@tanstack/vue-query'
-import type { NFT, Attribute } from '@/types'
+import type { Attribute } from '@/types'
+import type { NFT } from '@/components/massmint/types'
 
-export const useCollectionAttributes = (collectionId: ComputedRef<string | undefined>) => {
-  const { data: nftsListData } = useQuery<NFT[]>({
+type NftWithAttributes = { meta?: { attributes?: Attribute[] } }
+
+export const useCollectionAttributes = ({ collectionId, extraNfts }: { collectionId: ComputedRef<string | undefined>, extraNfts?: ComputedRef<NFT[]> }) => {
+  const { data: nftsListData } = useQuery<NftWithAttributes[]>({
     queryKey: ['nft-attributes-by-collection', collectionId],
     queryFn: async () =>
       (collectionId.value
-        ? (await useAsyncGraphql<{ nfts: NFT[] } >({
+        ? (await useAsyncGraphql<{ nfts: NftWithAttributes[] } >({
             query: 'nftAttributesListByCollection',
             variables: { id: collectionId.value },
           })).data.value.nfts
         : []),
   })
 
-  const nftsList = computed(() => nftsListData.value || [])
+  const nftsList = computed(() => (nftsListData.value || []).concat(
+    extraNfts?.value
+      .map(nft => ({ meta: {
+        attributes:
+          nft.attributes
+            ?.filter(attr => String(attr.trait_type) && String(attr.value))
+            .map(attr => ({
+              trait: attr.trait_type,
+              value: String(attr.value),
+            })),
+      } }))
+      || [],
+  ))
 
   const attributesList = computed<Attribute[]>(() => {
     return (nftsList.value || []).reduce((acc, nft) => {
@@ -52,7 +67,7 @@ export const useCollectionAttributes = (collectionId: ComputedRef<string | undef
     )
   })
 
-  const getAttributeRarity = (trait: string, value: string) => {
+  const getAttributeRarity = (trait: string, value: string | number) => {
     return attributesRarityMaps.value[trait]?.[value] || 0
   }