From fcce15154b5a9c64142cc144f57532015bdbacea Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 17 Oct 2023 10:00:10 +0700
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=90=9B=20broken=20explorer=20link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ItemsGrid/ItemsGridImageTokenEntity.vue   |  7 +++++++
 .../components/NeoNftCard/NFTMediaInfo.vue    |  6 +++---
 .../NeoNftCard/NFTMediaInfoStacked.vue        |  6 +++---
 .../src/components/NeoNftCard/NeoNftCard.vue  | 19 +++++++++----------
 libs/ui/src/components/NeoNftCard/types.ts    | 16 ++++++++++++++++
 5 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 libs/ui/src/components/NeoNftCard/types.ts

diff --git a/components/items/ItemsGrid/ItemsGridImageTokenEntity.vue b/components/items/ItemsGrid/ItemsGridImageTokenEntity.vue
index c98dc0ab7a..2f50a53d49 100644
--- a/components/items/ItemsGrid/ItemsGridImageTokenEntity.vue
+++ b/components/items/ItemsGrid/ItemsGridImageTokenEntity.vue
@@ -2,6 +2,7 @@
   <NeoNftCard
     v-if="entity"
     :nft="entity"
+    :link-to="linkTo"
     :placeholder="placeholder"
     :prefix="urlPrefix"
     :show-price="isAvailableToBuy"
@@ -107,6 +108,12 @@ const { showCardIcon, cardIcon } = await useNftCardIcon(
   computed(() => props.entity),
 )
 
+const linkTo = computed(() =>
+  isStack.value
+    ? `/${urlPrefix.value}/collection/${props.entity.collection.id}`
+    : `/${urlPrefix.value}/gallery/${props.entity.cheapest.id}`,
+)
+
 const variant = computed(() =>
   isStack.value ? `stacked-${props.variant}` : props.variant,
 )
diff --git a/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue b/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
index 28486f10c3..26d65b3054 100644
--- a/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
+++ b/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
@@ -32,7 +32,7 @@
       ]">
       <CommonTokenMoney
         v-if="showPrice"
-        :value="isTokenEntity(nft) ? nft.cheapest?.price : nft.price"
+        :value="nft.price ?? nft.cheapest?.price"
         data-testid="card-money" />
       <span v-if="!isMinimal" class="chain-name is-capitalized is-size-7">{{
         getChainNameByPrefix(prefix)
@@ -44,10 +44,10 @@
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 import { getChainNameByPrefix } from '@/utils/chain'
 import { NftCardVariant } from '@kodadot1/brick'
-import { NFTWithMetadata } from '@/composables/useNft'
+import { NeoNFT } from './types'
 const props = withDefaults(
   defineProps<{
-    nft: NFTWithMetadata | TokenEntity
+    nft: NeoNFT
     prefix: string
     showPrice?: boolean
     collectionPopoverShowDelay?: number
diff --git a/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue b/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
index 92ce6a83cf..e039c97ab8 100644
--- a/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
+++ b/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
@@ -16,7 +16,7 @@
       <div v-if="!isMinimal" class="is-size-7 has-text-grey">
         {{ $t('lowestPrice') }}:
         <CommonTokenMoney
-          :value="token.cheapest.price"
+          :value="token.cheapest?.price"
           data-testid="card-money" />
       </div>
     </div>
@@ -53,11 +53,11 @@
 <script lang="ts" setup>
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 import { NeoButton, NftCardVariant } from '@kodadot1/brick'
-import { TokenEntity } from '@/composables/useNft'
+import { NeoNFT } from './types'
 
 const props = withDefaults(
   defineProps<{
-    token: TokenEntity
+    token: NeoNFT
     prefix: string
 
     variant?: NftCardVariant
diff --git a/libs/ui/src/components/NeoNftCard/NeoNftCard.vue b/libs/ui/src/components/NeoNftCard/NeoNftCard.vue
index d5215ba051..70ff7595eb 100644
--- a/libs/ui/src/components/NeoNftCard/NeoNftCard.vue
+++ b/libs/ui/src/components/NeoNftCard/NeoNftCard.vue
@@ -2,14 +2,7 @@
   <div
     class="nft-card"
     :class="{ loading: isLoading, 'nft-card__stacked': isStacked }">
-    <component
-      :is="link"
-      v-if="!isLoading && nft"
-      :[bindKey]="
-        isStacked
-          ? `/${prefix}/collection/${nft.collection.id}`
-          : `/${prefix}/gallery/${nft.id}`
-      ">
+    <component :is="link" v-if="!isLoading && nft" :[bindKey]="href">
       <img
         v-if="cardIcon && cardIconSrc"
         class="card-icon"
@@ -82,12 +75,12 @@ import MediaItem from '../MediaItem/MediaItem.vue'
 import { NeoSkeleton, NftCardVariant } from '@kodadot1/brick'
 import NFTMediaInfoStacked from './NFTMediaInfoStacked.vue'
 import NFTMediaInfo from './NFTMediaInfo.vue'
-import { ItemsGridEntity } from '@/components/items/ItemsGrid/useItemsGrid'
+import { NeoNFT } from './types'
 
 const props = withDefaults(
   defineProps<{
     isLoading?: boolean
-    nft: ItemsGridEntity
+    nft: NeoNFT
     prefix: string
     showPrice?: boolean
     collectionPopoverShowDelay?: number
@@ -103,6 +96,7 @@ const props = withDefaults(
     showActionOnHover?: boolean
     mediaPlayerCover?: string
     mediaHoverOnCoverPlay?: boolean
+    linkTo?: string
   }>(),
   {
     collectionPopoverShowDelay: 500,
@@ -113,9 +107,14 @@ const props = withDefaults(
     showActionOnHover: true,
     placeholder: undefined,
     mediaPlayerCover: undefined,
+    linkTo: undefined,
   },
 )
 
+const href = computed(
+  () => props.linkTo ?? `/${props.prefix}/gallery/${props.nft.id}`,
+)
+
 const isStacked = computed(() =>
   props.variant ? props.variant.includes('stacked') : false,
 )
diff --git a/libs/ui/src/components/NeoNftCard/types.ts b/libs/ui/src/components/NeoNftCard/types.ts
new file mode 100644
index 0000000000..dd822a1621
--- /dev/null
+++ b/libs/ui/src/components/NeoNftCard/types.ts
@@ -0,0 +1,16 @@
+export type NeoNFT = {
+  id: string
+  name: string
+  image: string
+  animationUrl?: string
+  mimeType?: string
+  supply?: number
+  price?: string
+  cheapest?: {
+    price: string
+  }
+  collection: {
+    id: string
+    name: string
+  }
+}

From d1f0b9f4128ca0e5c66f6bfce5a16a5ad300484b Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 17 Oct 2023 14:39:17 +0700
Subject: [PATCH 2/5] fix ellipsys on collection name

---
 libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue b/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
index 26d65b3054..7959346f63 100644
--- a/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
+++ b/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
@@ -12,11 +12,12 @@
       <CollectionDetailsPopover
         v-if="nft.collection.name || nft.collection.id"
         :show-delay="collectionPopoverShowDelay"
+        class="is-size-7 nft-info-collection-name is-ellipsis"
         :nft="nft">
         <template #content>
           <nuxt-link
             :to="`/${prefix}/collection/${nft.collection.id}`"
-            class="is-size-7 nft-info-collection-name is-ellipsis">
+            class="nft-info-collection-name">
             {{ nft.collection.name || '--' }}
           </nuxt-link>
         </template>

From d9ad96eb25c1a08dc3222f125c6ed9027f6ec84d Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 17 Oct 2023 14:40:17 +0700
Subject: [PATCH 3/5] collection popover in stacked card

---
 .../NeoNftCard/NFTMediaInfoStacked.vue        | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue b/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
index e039c97ab8..165a4b1f72 100644
--- a/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
+++ b/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
@@ -33,17 +33,26 @@
           variant="text"
           tag="nuxt-link"
           :to="collectionUrl"
-          class="is-size-7 has-text-grey"
+          class="is-size-7 nft-info-collection-name"
           label="Visit"
           icon="arrow-right" />
       </template>
 
       <template v-else>
-        <nuxt-link
-          class="is-size-7 has-text-grey is-ellipsis pr-1"
-          :to="collectionUrl">
-          {{ collectionNameLabel }}
-        </nuxt-link>
+        <CollectionDetailsPopover
+          v-if="collectionNameLabel"
+          :show-delay="collectionPopoverShowDelay"
+          class="is-size-7 nft-info-collection-name is-ellipsis"
+          :nft="token">
+          <template #content>
+            <nuxt-link
+              :to="`/${prefix}/collection/${token.collection.id}`"
+              class="nft-info-collection-name">
+              {{ collectionNameLabel }}
+            </nuxt-link>
+          </template>
+        </CollectionDetailsPopover>
+
         <span>x{{ token.supply }}</span>
       </template>
     </div>
@@ -59,11 +68,13 @@ const props = withDefaults(
   defineProps<{
     token: NeoNFT
     prefix: string
+    collectionPopoverShowDelay?: number
 
     variant?: NftCardVariant
   }>(),
   {
     variant: 'primary',
+    collectionPopoverShowDelay: 500,
   },
 )
 

From 567d2c68b2b582479a20ca612ef525fdbc7c9899 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 17 Oct 2023 15:12:24 +0700
Subject: [PATCH 4/5] nuxt link => a

---
 libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue |  6 +++---
 .../components/NeoNftCard/NFTMediaInfoStacked.vue  | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue b/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
index 7959346f63..2695fd59f4 100644
--- a/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
+++ b/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
@@ -15,11 +15,11 @@
         class="is-size-7 nft-info-collection-name is-ellipsis"
         :nft="nft">
         <template #content>
-          <nuxt-link
-            :to="`/${prefix}/collection/${nft.collection.id}`"
+          <a
+            :href="`/${prefix}/collection/${nft.collection.id}`"
             class="nft-info-collection-name">
             {{ nft.collection.name || '--' }}
-          </nuxt-link>
+          </a>
         </template>
       </CollectionDetailsPopover>
     </div>
diff --git a/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue b/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
index 165a4b1f72..504b539915 100644
--- a/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
+++ b/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
@@ -25,14 +25,14 @@
       class="is-flex is-justify-content-space-between is-align-items-center px-3"
       :class="isMinimal ? '' : 'border-top card-border-color pt-3'">
       <template v-if="!isMinimal">
-        <nuxt-link class="is-ellipsis pr-1" :to="collectionUrl">
+        <a class="is-ellipsis pr-1" :href="collectionUrl">
           {{ collectionNameLabel }}
-        </nuxt-link>
+        </a>
         <NeoButton
           no-shadow
           variant="text"
-          tag="nuxt-link"
-          :to="collectionUrl"
+          tag="a"
+          :href="collectionUrl"
           class="is-size-7 nft-info-collection-name"
           label="Visit"
           icon="arrow-right" />
@@ -45,11 +45,11 @@
           class="is-size-7 nft-info-collection-name is-ellipsis"
           :nft="token">
           <template #content>
-            <nuxt-link
-              :to="`/${prefix}/collection/${token.collection.id}`"
+            <a
+              :href="`/${prefix}/collection/${token.collection.id}`"
               class="nft-info-collection-name">
               {{ collectionNameLabel }}
-            </nuxt-link>
+            </a>
           </template>
         </CollectionDetailsPopover>
 

From 92c69c082a99f3591a14a6c41edebb2d72cd0046 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 17 Oct 2023 15:15:12 +0700
Subject: [PATCH 5/5] v-safe-href

---
 libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue        | 2 +-
 libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue b/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
index 2695fd59f4..aec4e0f384 100644
--- a/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
+++ b/libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue
@@ -16,7 +16,7 @@
         :nft="nft">
         <template #content>
           <a
-            :href="`/${prefix}/collection/${nft.collection.id}`"
+            :v-safe-href="`/${prefix}/collection/${nft.collection.id}`"
             class="nft-info-collection-name">
             {{ nft.collection.name || '--' }}
           </a>
diff --git a/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue b/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
index 504b539915..6fdf44f40e 100644
--- a/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
+++ b/libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue
@@ -25,14 +25,14 @@
       class="is-flex is-justify-content-space-between is-align-items-center px-3"
       :class="isMinimal ? '' : 'border-top card-border-color pt-3'">
       <template v-if="!isMinimal">
-        <a class="is-ellipsis pr-1" :href="collectionUrl">
+        <a class="is-ellipsis pr-1" :v-safe-href="collectionUrl">
           {{ collectionNameLabel }}
         </a>
         <NeoButton
           no-shadow
           variant="text"
           tag="a"
-          :href="collectionUrl"
+          :v-safe-href="collectionUrl"
           class="is-size-7 nft-info-collection-name"
           label="Visit"
           icon="arrow-right" />
@@ -46,7 +46,7 @@
           :nft="token">
           <template #content>
             <a
-              :href="`/${prefix}/collection/${token.collection.id}`"
+              :v-safe-href="`/${prefix}/collection/${token.collection.id}`"
               class="nft-info-collection-name">
               {{ collectionNameLabel }}
             </a>