manage incomplete data

lib/mixpanel/getPageType.ts

@@ -38,6 +38,8 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/zkevm-l2-txn-batches': 'ZkEvm L2 Tx batches',
   '/zkevm-l2-txn-batch/[number]': 'ZkEvm L2 Tx batch details',
   '/404': '404',
+  '/name-domains': 'Domains search and resolve',
+  '/name-domains/[name]': 'Domain details',
 
   // service routes, added only to make typescript happy
   '/login': 'Login',

types/api/ens.ts

@@ -3,10 +3,10 @@ export interface EnsDomain {
   name: string;
   resolvedAddress: {
     hash: string;
-  };
+  } | null;
   owner: {
     hash: string;
-  };
+  } | null;
   registrationDate?: string;
   expiryDate?: string;
 }
@@ -15,7 +15,7 @@ export interface EnsDomainDetailed extends EnsDomain {
   tokenId: string;
   registrant: {
     hash: string;
-  };
+  } | null;
   otherAddresses: Record<string, string>;
 }
 
@@ -24,7 +24,7 @@ export interface EnsDomainEvent {
   timestamp: string;
   fromAddress: {
     hash: string;
-  };
+  } | null;
   action?: string;
 }
 

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -40,10 +40,12 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
 
   const mainDomain = data.items.find((domain) => domain.name === mainDomainName);
   const ownedDomains = data.items.filter((domain) =>
+    domain.owner &&
     domain.owner.hash.toLowerCase() === addressHash.toLowerCase() &&
     domain.name !== mainDomainName,
   );
   const resolvedDomains = data.items.filter((domain) =>
+    domain.resolvedAddress &&
     domain.resolvedAddress.hash.toLowerCase() === addressHash.toLowerCase() &&
     domain.name !== mainDomainName,
   );

ui/nameDomain/NameDomainDetails.tsx

@@ -71,6 +71,7 @@ const NameDomainDetails = ({ query }: Props) => {
           </Skeleton>
         </DetailsInfoItem>
       ) }
+      { query.data?.registrant && (
         <DetailsInfoItem
           title="Registrant"
           hint="The account that owns the domain name and has the rights to edit its ownership and records"
@@ -79,7 +80,7 @@ const NameDomainDetails = ({ query }: Props) => {
           flexWrap="nowrap"
         >
           <AddressEntity
-          address={ query.data?.registrant }
+            address={ query.data.registrant }
             isLoading={ isLoading }
           />
           { /* TODO @tom2drum add correct href */ }
@@ -89,6 +90,8 @@ const NameDomainDetails = ({ query }: Props) => {
             </LinkInternal>
           </Tooltip>
         </DetailsInfoItem>
+      ) }
+      { query.data?.owner && (
         <DetailsInfoItem
           title="Controller"
           hint="The account that owns the rights to edit the records of this domain name"
@@ -97,7 +100,7 @@ const NameDomainDetails = ({ query }: Props) => {
           flexWrap="nowrap"
         >
           <AddressEntity
-          address={ query.data?.owner }
+            address={ query.data.owner }
             isLoading={ isLoading }
           />
           { /* TODO @tom2drum add correct href */ }
@@ -107,6 +110,7 @@ const NameDomainDetails = ({ query }: Props) => {
             </LinkInternal>
           </Tooltip>
         </DetailsInfoItem>
+      ) }
       <DetailsInfoItem
         title="Token ID"
         hint="The Token ID of this domain name NFT"

ui/pages/NameDomain.tsx

@@ -14,7 +14,6 @@ import NameDomainDetails from 'ui/nameDomain/NameDomainDetails';
 import NameDomainHistory from 'ui/nameDomain/NameDomainHistory';
 import TextAd from 'ui/shared/ad/TextAd';
 import Icon from 'ui/shared/chakra/Icon';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -43,7 +42,7 @@ const NameDomain = () => {
   const tabIndex = useTabIndexFromQuery(tabs);
 
   if (infoQuery.isError) {
-    return <DataFetchAlert/>;
+    throw new Error(undefined, { cause: infoQuery.error });
   }
 
   const isLoading = infoQuery.isPlaceholderData;
@@ -56,6 +55,7 @@ const NameDomain = () => {
         noLink
         maxW="300px"
       />
+      { infoQuery.data?.resolvedAddress && (
         <AddressEntity
           address={ infoQuery.data?.resolvedAddress }
           isLoading={ isLoading }
@@ -63,6 +63,7 @@ const NameDomain = () => {
           noLink
           flexShrink={ 0 }
         />
+      ) }
       { /* TODO @tom2drum add correct href */ }
       <Tooltip label="Lookup for related domain names">
         <LinkInternal flexShrink={ 0 } display="inline-flex">