feat: Add parent tab to GalleryItemDescription

components/gallery/GalleryItemDescription.vue

@@ -91,6 +91,29 @@
  >
  </div>
  </o-tab-item>
+
+ <!-- parent tab -->
+ <div v-if="parent">
+ <o-tab-item value="3" :label="$t('tabs.parent')" class="p-5">
+ <nuxt-link :to="parentNftUrl">
+ <MediaItem
+ :key="parent?.nftImage"
+ :class="{
+ 'is-flex is-align-items-center is-justify-content-center h-audio':
+ resolveMedia(parent?.nftMimeType.value) == MediaType.AUDIO,
+ }"
+ class="gallery-parent-item"
+ :src="parent?.nftImage.value"
+ :animation-src="parent?.nftAnimation.value"
+ :mime-type="parent?.nftMimeType.value"
+ :title="parent?.nftMetadata?.value?.name"
+ is-detail />
+ <p class="gallery-parent-item__name">
+ {{ parent?.nftMetadata?.value?.name }}
+ </p>
+ </nuxt-link>
+ </o-tab-item>
+ </div>
  </o-tabs>
 </template>
 
@@ -99,17 +122,34 @@ import { OTabItem, OTable, OTableColumn, OTabs } from '@oruga-ui/oruga'
 import Identity from '@/components/identity/IdentityIndex.vue'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 
-import { DisablableTab } from '@kodadot1/brick'
+import { DisablableTab, MediaItem } from '@kodadot1/brick'
 
 import { useGalleryItem } from './useGalleryItem'
 import { useRedirectModal } from '@/components/redirect/useRedirectModal'
 
+import { MediaType } from '@/components/rmrk/types'
+import { resolveMedia } from '@/utils/gallery/media'
+
 const { urlPrefix } = usePrefix()
 const { nft, nftMimeType, nftMetadata, nftImage, nftAnimation } =
  useGalleryItem()
 const activeTab = ref('0')
 const { version } = useRmrkVersion()
 
+const parent = computed(() => {
+ if (nft.value?.parent?.id) {
+ return useGalleryItem(nft.value?.parent?.id)
+ }
+})
+
+const parentNftUrl = computed(() => {
+ if (parent.value) {
+ const url = inject('itemUrl', 'gallery') as string
+
+ return `/${urlPrefix.value}/${url}/${parent.value?.nft.value?.id}`
+ }
+})
+
 const properties = computed(() => {
  // we have different format between rmrk2 and the other chains
  if (urlPrefix.value === 'ksm') {

components/gallery/useGalleryItem.ts

@@ -31,7 +31,7 @@ const whichAsset = (data) => {
  }
 }
 
-export const useGalleryItem = () => {
+export const useGalleryItem = (nftId?: string) => {
  const { $consola } = useNuxtApp()
  const historyStore = useHistoryStore()
  const nft = ref<NFT>()
@@ -41,6 +41,7 @@ export const useGalleryItem = () => {
  const nftMetadata = ref<NFTWithMetadata>()
 
  const { params } = useRoute()
+ const id = nftId || params.id
  // const { id: collectionID, item: id } = tokenIdToRoute(params.id)
 
  const queryPath = {
@@ -53,15 +54,15 @@ export const useGalleryItem = () => {
  queryName: 'nftById',
  queryPrefix: queryPath[urlPrefix.value],
  variables: {
- id: params.id,
+ id,
  },
  options: {
  fetchPolicy: 'network-only',
  },
  })
 
  useSubscriptionGraphql({
- query: ` nft: nftEntityById(id: "${params.id}") {
+ query: ` nft: nftEntityById(id: "${id}") {
  id
  currentOwner
  price
@@ -76,7 +77,7 @@ export const useGalleryItem = () => {
  watch(data as unknown as NFTData, async (newData) => {
  const nftEntity = newData?.nftEntity
  if (!nftEntity) {
- $consola.log(`NFT with id ${params.id} not found. Fallback to RPC Node`)
+ $consola.log(`NFT with id ${id} not found. Fallback to RPC Node`)
  return
  }
 

components/rmrk/service/scheme.ts

@@ -173,6 +173,7 @@ export interface NFT extends ItemResources {
  royalty?: number
  recipient?: string
  meta?: NFTMetadata
+ parent?: NFT
 }
 
 export type EntityWithId = {

locales/en.json

@@ -1168,6 +1168,7 @@
  "noPropertiesForNFT": "No Properties for this NFT",
  "description": "Description",
  "details": "Details",
+ "parent": "Parent",
  "offers": "Offers",
  "offersDisabled": "Offers Are Not Available on this chain",
  "activity": "Activity",

queries/subsquid/ksm/nftById.graphql

@@ -1,12 +1,22 @@
 #import "../../fragments/nft.graphql"
 #import "../../fragments/nftDetails.graphql"
+#import "../../fragments/baseMeta.graphql"
 
 query nftById($id: String!) {
  nftEntity: nftEntityById(id: $id) {
  ...nft
  ...nftDetails
  royalty
  recipient
+ parent {
+ ...nft
+ ...nftDetails
+ meta {
+ image
+ animation_url: animationUrl
+ ...baseMeta
+ }
+ }
  collection {
  id
  name

queries/subsquid/rmrk/nftById.graphql

@@ -1,10 +1,20 @@
 #import "../../fragments/nft.graphql"
 #import "../../fragments/nftDetails.graphql"
+#import "../../fragments/baseMeta.graphql"
 
 query nftById($id: String!) {
  nftEntity: nftEntityById(id: $id) {
  ...nft
  ...nftDetails
+ parent {
+ ...nft
+ ...nftDetails
+ meta {
+ image
+ animation_url: animationUrl
+ ...baseMeta
+ }
+ }
  collection {
  id
  name

styles/components/_gallery-item.scss

@@ -13,6 +13,18 @@
  }
 }
 
+.gallery-parent-item {
+ max-height: 240px;
+ max-width: 240px;
+ margin: 0 auto;
+
+ &__name {
+ padding-top: 0.25rem;
+ width: fit-content;
+ margin: 0 auto;
+ }
+}
+
 .gallery-item {
  .media-object {
  @include ktheme() {