From 2160ea677a084504748110da2f3eefe2a8e28a8d Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Fri, 18 Oct 2024 09:24:22 +0500
Subject: [PATCH 1/2] add(CollectionBanner.vue): use mata banner field

---
 .../CollectionHeader/CollectionBanner.vue       | 17 +++++++++++------
 .../general/collectionByIdMinimal.graphql       |  1 +
 .../collectionByIdMinimalWithRoyalty.graphql    |  1 +
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/collection/CollectionHeader/CollectionBanner.vue b/components/collection/CollectionHeader/CollectionBanner.vue
index 784faa99dd..6649150c6f 100644
--- a/components/collection/CollectionHeader/CollectionBanner.vue
+++ b/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,14 +55,12 @@ 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 = '--'
 })
 
@@ -70,10 +68,12 @@ 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 {
@@ -81,12 +81,17 @@ watchEffect(async () => {
       metadata as string,
     )) as NFTMetadata
     const metaImage = sanitizeIpfsUrl(meta?.image)
+    const metaBanner = sanitizeIpfsUrl(meta?.banner || metaImage)
     const metaName = meta?.name
 
     if (metaName) {
       collectionName.value = metaName
     }
 
+    if (metaBanner) {
+      collectionBanner.value = toOriginalContentUrl(metaBanner)
+    }
+
     if (metaImage) {
       collectionAvatar.value = metaImage
     }
diff --git a/queries/subsquid/general/collectionByIdMinimal.graphql b/queries/subsquid/general/collectionByIdMinimal.graphql
index 57c4d6eeed..48243ea2b7 100644
--- a/queries/subsquid/general/collectionByIdMinimal.graphql
+++ b/queries/subsquid/general/collectionByIdMinimal.graphql
@@ -7,6 +7,7 @@ query collectionByIdMinimal($id: String!) {
       description
       id
       image
+      banner
       name
       type
     }
diff --git a/queries/subsquid/general/collectionByIdMinimalWithRoyalty.graphql b/queries/subsquid/general/collectionByIdMinimalWithRoyalty.graphql
index a416d810a2..20cb384607 100644
--- a/queries/subsquid/general/collectionByIdMinimalWithRoyalty.graphql
+++ b/queries/subsquid/general/collectionByIdMinimalWithRoyalty.graphql
@@ -9,6 +9,7 @@ query collectionByIdMinimalWithRoyalty($id: String!) {
       description
       id
       image
+      banner
       name
       type
     }

From e82292a1d740152991b73a5d3d9a03bd4240aaee Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Sat, 19 Oct 2024 06:59:51 +0500
Subject: [PATCH 2/2] fix(CollectionBanner.vue): metaBanner ternary

---
 components/collection/CollectionHeader/CollectionBanner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/collection/CollectionHeader/CollectionBanner.vue b/components/collection/CollectionHeader/CollectionBanner.vue
index 6649150c6f..9623f5cdc6 100644
--- a/components/collection/CollectionHeader/CollectionBanner.vue
+++ b/components/collection/CollectionHeader/CollectionBanner.vue
@@ -81,7 +81,7 @@ watchEffect(async () => {
       metadata as string,
     )) as NFTMetadata
     const metaImage = sanitizeIpfsUrl(meta?.image)
-    const metaBanner = sanitizeIpfsUrl(meta?.banner || metaImage)
+    const metaBanner = meta?.banner ? sanitizeIpfsUrl(meta?.banner) : metaImage
     const metaName = meta?.name
 
     if (metaName) {