Merge pull request kodadot#7697 from kodadot/fix-broken-explorer-link

hassnian · Oct 17, 2023 · a3a2947 · a3a2947
2 parents ddc78f9 + cd88863
commit a3a2947
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 30 deletions.
diff --git 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
@@ -12,13 +12,14 @@
       <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">
+          <a
+            :v-safe-href="`/${prefix}/collection/${nft.collection.id}`"
+            class="nft-info-collection-name">
             {{ nft.collection.name || '--' }}
-          </nuxt-link>
+          </a>
         </template>
       </CollectionDetailsPopover>
     </div>
@@ -32,7 +33,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 +45,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
@@ -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>
@@ -25,25 +25,34 @@
       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" :v-safe-href="collectionUrl">
           {{ collectionNameLabel }}
-        </nuxt-link>
+        </a>
         <NeoButton
           no-shadow
           variant="text"
-          tag="nuxt-link"
-          :to="collectionUrl"
-          class="is-size-7 has-text-grey"
+          tag="a"
+          :v-safe-href="collectionUrl"
+          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>
+            <a
+              :v-safe-href="`/${prefix}/collection/${token.collection.id}`"
+              class="nft-info-collection-name">
+              {{ collectionNameLabel }}
+            </a>
+          </template>
+        </CollectionDetailsPopover>
+
         <span>x{{ token.supply }}</span>
       </template>
     </div>
@@ -53,17 +62,19 @@
 <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
+    collectionPopoverShowDelay?: number
 
     variant?: NftCardVariant
   }>(),
   {
     variant: 'primary',
+    collectionPopoverShowDelay: 500,
   },
 )
 

diff --git 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
@@ -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
+  }
+}