link to token and screenshots update

mocks/ens/domain.ts

 import type { EnsDomainDetailed } from 'types/api/ens';
 
+const domainTokenA = {
+  id: '97352314626701792030827861137068748433918254309635329404916858191911576754327',
+  contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85',
+  type: 'NATIVE_DOMAIN_TOKEN' as const,
+};
+const domainTokenB = {
+  id: '423546333',
+  contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea86',
+  type: 'WRAPPED_DOMAIN_TOKEN' as const,
+};
+
 export const ensDomainA: EnsDomainDetailed = {
   id: '0xb140bf9645e54f02ed3c1bcc225566b515a98d1688f10494a5c3bc5b447936a7',
-  token_id: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a6',
+  tokens: [
+    domainTokenA,
+    domainTokenB,
+  ],
   name: 'cat.eth',
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
@@ -25,7 +39,7 @@ export const ensDomainA: EnsDomainDetailed = {
 
 export const ensDomainB: EnsDomainDetailed = {
   id: '0x632ac7bec8e883416b371b36beaa822f4784208c99d063ee030020e2bd09b885',
-  token_id: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a7',
+  tokens: [ domainTokenA ],
   name: 'kitty.kitty.kitty.cat.eth',
   resolved_address: null,
   registrant: {
@@ -42,7 +56,7 @@ export const ensDomainB: EnsDomainDetailed = {
 
 export const ensDomainC: EnsDomainDetailed = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ad',
-  token_id: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a8',
+  tokens: [ domainTokenA ],
   name: 'duck.duck.eth',
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
@@ -61,7 +75,7 @@ export const ensDomainC: EnsDomainDetailed = {
 
 export const ensDomainD: EnsDomainDetailed = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ae',
-  token_id: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a9',
+  tokens: [ domainTokenA ],
   name: '🦆.duck.eth',
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',

stubs/ENS.ts

@@ -6,7 +6,13 @@ import { TX_HASH } from './tx';
 export const ENS_DOMAIN: EnsDomainDetailed = {
   id: '0x126d74db13895f8d3a1d362410212731d1e1d9be8add83e388385f93d84c8c84',
   name: 'kitty.cat.eth',
-  token_id: '0x686f4041f059de13c12563c94bd32b8edef9e4d86c931f37abb8cb69ecf25fd6',
+  tokens: [
+    {
+      id: '973523146267017920308',
+      contract_hash: ADDRESS_HASH,
+      type: 'NATIVE_DOMAIN_TOKEN',
+    },
+  ],
   owner: ADDRESS_PARAMS,
   wrapped_owner: null,
   resolved_address: ADDRESS_PARAMS,

types/api/ens.ts

@@ -15,7 +15,7 @@ export interface EnsDomain {
 }
 
 export interface EnsDomainDetailed extends EnsDomain {
-  token_id: string;
+  tokens: Array<{ id: string; contract_hash: string; type: 'NATIVE_DOMAIN_TOKEN' | 'WRAPPED_DOMAIN_TOKEN' }>;
   registrant: {
     hash: string;
   } | null;

ui/nameDomain/NameDomainDetails.tsx

@@ -10,6 +10,7 @@ import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/LinkInternal';
 import TextSeparator from 'ui/shared/TextSeparator';
@@ -135,17 +136,18 @@ const NameDomainDetails = ({ query }: Props) => {
           </Tooltip>
         </DetailsInfoItem>
       ) }
+      { query.data?.tokens.map((token) => (
         <DetailsInfoItem
-        title="Token ID"
-        hint="The Token ID of this domain name NFT"
+          key={ token.type }
+          title={ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'Wrapped token ID' : 'Token ID' }
+          hint={ `The ${ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'wrapped ' : '' }token ID of this domain name NFT` }
           isLoading={ isLoading }
           wordBreak="break-all"
           whiteSpace="pre-wrap"
         >
-        <Skeleton isLoaded={ !isLoading }>
-          { query.data?.token_id }
-        </Skeleton>
+          <NftEntity hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/>
         </DetailsInfoItem>
+      )) }
       { otherAddresses.length > 0 && (
         <DetailsInfoItem
           title="Other addresses"

ui/shared/nft/NftMedia.tsx

@@ -20,13 +20,19 @@ interface Props {
 }
 
 const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
-  const [ isMediaLoading, setIsMediaLoading ] = React.useState(Boolean(url));
+  const [ isMediaLoading, setIsMediaLoading ] = React.useState(true);
   const [ isLoadingError, setIsLoadingError ] = React.useState(false);
 
   const { ref, inView } = useInView({ triggerOnce: true });
 
   const type = useNftMediaType(url, !isLoading && inView);
 
+  React.useEffect(() => {
+    if (!isLoading) {
+      setIsMediaLoading(Boolean(url));
+    }
+  }, [ isLoading, url ]);
+
   const handleMediaLoaded = React.useCallback(() => {
     setIsMediaLoading(false);
   }, []);