Merge pull request #11117 from hassnian/issue-collection-banner

feat: collection banner use `banner` field

components/collection/CollectionHeader/CollectionBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="collection-banner relative md:h-[560px] h-72 bg-no-repeat bg-cover bg-center border-b"
-    :style="{ backgroundImage: `url(${bannerImageUrl})` }"
+    :style="{ backgroundImage: `url(${collectionBanner})` }"
   >
     <div class="collection-banner-shadow absolute inset-0" />
 
@@ -55,38 +55,43 @@ const props = defineProps<{
 const route = useRoute()
 
 const collectionAvatar = ref('')
+const collectionBanner = ref('')
 const collectionName = ref('--')
 
-const bannerImageUrl = computed(
-  () => collectionAvatar.value && toOriginalContentUrl(collectionAvatar.value),
-)
-
 watch(() => props.collectionId, () => {
   collectionAvatar.value = ''
+  collectionBanner.value = ''
   collectionName.value = '--'
 })
 
 watchEffect(async () => {
   const collection = props.collection
   const metadata = collection?.metadata
   const image = collection?.meta?.image
+  const banner = collection?.meta?.banner || image
   const name = collection?.name
 
-  if (image && name) {
+  if (image && name && banner) {
     collectionAvatar.value = sanitizeIpfsUrl(image)
+    collectionBanner.value = toOriginalContentUrl(sanitizeIpfsUrl(banner))
     collectionName.value = name
   }
   else {
     const meta = (await processSingleMetadata(
       metadata as string,
     )) as NFTMetadata
     const metaImage = sanitizeIpfsUrl(meta?.image)
+    const metaBanner = meta?.banner ? sanitizeIpfsUrl(meta?.banner) : metaImage
     const metaName = meta?.name
 
     if (metaName) {
       collectionName.value = metaName
     }
 
+    if (metaBanner) {
+      collectionBanner.value = toOriginalContentUrl(metaBanner)
+    }
+
     if (metaImage) {
       collectionAvatar.value = metaImage
     }

queries/subsquid/general/collectionByIdMinimal.graphql

@@ -7,6 +7,7 @@ query collectionByIdMinimal($id: String!) {
       description
       id
       image
+      banner
       name
       type
     }

queries/subsquid/general/collectionByIdMinimalWithRoyalty.graphql

@@ -9,6 +9,7 @@ query collectionByIdMinimalWithRoyalty($id: String!) {
       description
       id
       image
+      banner
       name
       type
     }