Add metadata tab to NFT details page

.changelog/1036.feature.md

@@ -0,0 +1 @@
+Add NFT feature

src/app/components/CodeDisplay/index.tsx

@@ -2,12 +2,13 @@ import { FC, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
 import { ScrollableDataDisplay } from '../../components/ScrollableDataDisplay'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { base64ToHex } from '../../utils/helpers'
 
-export const CodeDisplay: FC<{
+const CodeDisplay: FC<{
   code: ReactNode
   copyToClipboardValue: string
   label: string
@@ -59,12 +60,14 @@ export const RawDataDisplay: FC<{
   )
 }
 
-export const JsonCodeDisplay: FC<{ data: Record<string, any>; label: string }> = ({ data, label }) => {
-  return (
-    <CodeDisplay
-      code={<pre>{JSON.stringify(data, null, 2)}</pre>}
-      copyToClipboardValue={JSON.stringify(data)}
-      label={label}
-    />
-  )
-}
+const StyledPre = styled('pre')({
+  margin: 0,
+})
+
+export const JsonCodeDisplay: FC<{ data: Record<string, any>; label: string }> = ({ data, label }) => (
+  <CodeDisplay
+    code={<StyledPre>{JSON.stringify(data, null, 2)}</StyledPre>}
+    copyToClipboardValue={JSON.stringify(data)}
+    label={label}
+  />
+)

src/app/pages/NFTInstanceDashboardPage/NftMetadataCard.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import { Runtime, useGetRuntimeEvmTokensAddressNftsId } from '../../../oasis-nexus/api'
+import { LinkableDiv } from '../../components/PageLayout/LinkableDiv'
+import { CardEmptyState } from './../AccountDetailsPage/CardEmptyState'
+import { NftDashboardContext } from '../NFTInstanceDashboardPage'
+import { JsonCodeDisplay } from '../../components/CodeDisplay'
+
+export const nftMetadataId = 'metadata'
+
+export const NftMetadataCard: FC<NftDashboardContext> = ({ scope, address, instanceId }) => {
+  const { t } = useTranslation()
+  const { data, isFetched } = useGetRuntimeEvmTokensAddressNftsId(
+    scope.network,
+    scope.layer as Runtime,
+    address,
+    instanceId,
+  )
+  const metadata = data?.data?.metadata
+
+  return (
+    <Card>
+      {isFetched && !metadata && <CardEmptyState label={t('nft.noMetadata')} />}
+      <>
+        {metadata && (
+          <CardContent>
+            <LinkableDiv id={nftMetadataId}>
+              <JsonCodeDisplay data={metadata} label={t('nft.metadata')} />
+            </LinkableDiv>
+          </CardContent>
+        )}
+      </>
+    </Card>
+  )
+}

src/app/pages/NFTInstanceDashboardPage/index.tsx

@@ -1,14 +1,26 @@
 import { FC } from 'react'
-import { useParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useHref, useParams, useOutletContext } from 'react-router-dom'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { PageLayout } from '../../components/PageLayout'
 import { InstanceTitleCard } from './InstanceTitleCard'
 import { InstanceDetailsCard } from './InstanceDetailsCard'
 import { InstanceImageCard } from './InstanceImageCard'
 import { Layer, Runtime, useGetRuntimeEvmTokensAddressNftsId } from '../../../oasis-nexus/api'
 import { AppErrors } from '../../../types/errors'
+import { RouterTabs } from 'app/components/RouterTabs'
+import { SearchScope } from '../../../types/searchScope'
+
+export type NftDashboardContext = {
+  scope: SearchScope
+  address: string
+  instanceId: string
+}
+
+export const useNftDetailsProps = () => useOutletContext<NftDashboardContext>()
 
 export const NFTInstanceDashboardPage: FC = () => {
+  const { t } = useTranslation()
   const scope = useRequiredScopeParam()
   const { address, instanceId } = useParams()
   if (scope.layer === Layer.consensus) {
@@ -27,7 +39,12 @@ export const NFTInstanceDashboardPage: FC = () => {
     instanceId,
   )
   const nft = data?.data
-
+  const metadataLink = useHref('')
+  const context: NftDashboardContext = {
+    scope,
+    address,
+    instanceId,
+  }
   return (
     <PageLayout>
       <InstanceTitleCard isFetched={isFetched} isLoading={isLoading} nft={nft} scope={scope} />
@@ -39,6 +56,7 @@ export const NFTInstanceDashboardPage: FC = () => {
         scope={scope}
         contractAddress={address!}
       />
+      <RouterTabs tabs={[{ label: t('nft.metadata'), to: metadataLink }]} context={context} />
     </PageLayout>
   )
 }

src/locales/en/translation.json

@@ -126,6 +126,8 @@
     "collection": "Collection",
     "instance": "(NFT Instance)",
     "instanceId": "Token ID",
+    "metadata": "Metadata",
+    "noMetadata": "There is no metadata on record for this NFT.",
     "noPreview": "No preview available",
     "openInFull": "Open in full",
     "owner": "Owner",

src/routes.tsx

@@ -25,7 +25,8 @@ import { TokenDashboardPage, useTokenDashboardProps } from './app/pages/TokenDas
 import { AccountTokenTransfersCard } from './app/pages/AccountDetailsPage/AccountTokenTransfersCard'
 import { TokenTransfersCard } from './app/pages/TokenDashboardPage/TokenTransfersCard'
 import { TokenHoldersCard } from './app/pages/TokenDashboardPage/TokenHoldersCard'
-import { NFTInstanceDashboardPage } from './app/pages/NFTInstanceDashboardPage'
+import { NFTInstanceDashboardPage, useNftDetailsProps } from './app/pages/NFTInstanceDashboardPage'
+import { NftMetadataCard } from './app/pages/NFTInstanceDashboardPage/NftMetadataCard'
 
 const NetworkSpecificPart = () => (
   <ThemeByNetwork network={useRequiredScopeParam().network}>
@@ -120,6 +121,13 @@ export const routes: RouteObject[] = [
           {
             path: 'token/:address/instance/:instanceId',
             element: <NFTInstanceDashboardPage />,
+            loader: addressParamLoader,
+            children: [
+              {
+                path: '',
+                Component: () => <NftMetadataCard {...useNftDetailsProps()} />,
+              },
+            ],
           },
           {
             path: `token/:address`,