metadata placeholder

types/api/token.ts

@@ -42,7 +42,7 @@ export interface TokenInstance {
   image_url: string | null;
   animation_url: string | null;
   external_app_url: string | null;
-  metadata: unknown;
+  metadata: Record<string, unknown> | null;
   owner: AddressParam;
   token: TokenInfo;
 }

ui/tokenInstance/TokenInstanceContent.tsx

@@ -18,6 +18,7 @@ import TokenLogo from 'ui/shared/TokenLogo';
 import TokenTransfer from 'ui/token/TokenTransfer/TokenTransfer';
 
 import TokenInstanceDetails from './TokenInstanceDetails';
+import TokenInstanceMetadata from './TokenInstanceMetadata';
 import TokenInstanceSkeleton from './TokenInstanceSkeleton';
 
 export type TokenTabs = 'token_transfers' | 'holders'
@@ -53,7 +54,7 @@ const TokenInstanceContent = () => {
     { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id }/> },
     // there is no api for this tab yet
     // { id: 'holders', title: 'Holders', component: <span>Holders</span> },
-    { id: 'metadata', title: 'Metadata', component: <span>Metadata</span> },
+    { id: 'metadata', title: 'Metadata', component: <TokenInstanceMetadata data={ tokenInstanceQuery.data?.metadata }/> },
   ];
 
   if (tokenInstanceQuery.isError) {
@@ -96,7 +97,7 @@ const TokenInstanceContent = () => {
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
-        rightSlot={ !isMobile && transfersQuery.isPaginationVisible ? <Pagination { ...transfersQuery.pagination }/> : null }
+        rightSlot={ !isMobile && transfersQuery.isPaginationVisible && tab !== 'metadata' ? <Pagination { ...transfersQuery.pagination }/> : null }
         stickyEnabled={ !isMobile }
       />
     </>

ui/tokenInstance/TokenInstanceMetadata.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInstance } from 'types/api/token';
+
+import RawDataSnippet from 'ui/shared/RawDataSnippet';
+
+interface Props {
+  data: TokenInstance['metadata'] | undefined;
+}
+
+const TokenInstanceMetadata = ({ data }: Props) => {
+  if (!data) {
+    return <Box>There is no metadata for this NFT</Box>;
+  }
+
+  return (
+    <RawDataSnippet
+      data={ JSON.stringify(data, undefined, 4) }
+    />
+  );
+};
+
+export default TokenInstanceMetadata;