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,42 +71,46 @@ const NameDomainDetails = ({ query }: Props) => {
           </Skeleton>
         </DetailsInfoItem>
       ) }
-      <DetailsInfoItem
-        title="Registrant"
-        hint="The account that owns the domain name and has the rights to edit its ownership and records"
-        isLoading={ isLoading }
-        columnGap={ 2 }
-        flexWrap="nowrap"
-      >
-        <AddressEntity
-          address={ query.data?.registrant }
+      { query.data?.registrant && (
+        <DetailsInfoItem
+          title="Registrant"
+          hint="The account that owns the domain name and has the rights to edit its ownership and records"
           isLoading={ isLoading }
-        />
-        { /* TODO @tom2drum add correct href */ }
-        <Tooltip label="Lookup for related domain names">
-          <LinkInternal flexShrink={ 0 } display="inline-flex">
-            <Icon as={ iconSearch } boxSize={ 5 } isLoading={ isLoading }/>
-          </LinkInternal>
-        </Tooltip>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Controller"
-        hint="The account that owns the rights to edit the records of this domain name"
-        isLoading={ isLoading }
-        columnGap={ 2 }
-        flexWrap="nowrap"
-      >
-        <AddressEntity
-          address={ query.data?.owner }
+          columnGap={ 2 }
+          flexWrap="nowrap"
+        >
+          <AddressEntity
+            address={ query.data.registrant }
+            isLoading={ isLoading }
+          />
+          { /* TODO @tom2drum add correct href */ }
+          <Tooltip label="Lookup for related domain names">
+            <LinkInternal flexShrink={ 0 } display="inline-flex">
+              <Icon as={ iconSearch } boxSize={ 5 } isLoading={ isLoading }/>
+            </LinkInternal>
+          </Tooltip>
+        </DetailsInfoItem>
+      ) }
+      { query.data?.owner && (
+        <DetailsInfoItem
+          title="Controller"
+          hint="The account that owns the rights to edit the records of this domain name"
           isLoading={ isLoading }
-        />
-        { /* TODO @tom2drum add correct href */ }
-        <Tooltip label="Lookup for related domain names">
-          <LinkInternal flexShrink={ 0 } display="inline-flex">
-            <Icon as={ iconSearch } boxSize={ 5 } isLoading={ isLoading }/>
-          </LinkInternal>
-        </Tooltip>
-      </DetailsInfoItem>
+          columnGap={ 2 }
+          flexWrap="nowrap"
+        >
+          <AddressEntity
+            address={ query.data.owner }
+            isLoading={ isLoading }
+          />
+          { /* TODO @tom2drum add correct href */ }
+          <Tooltip label="Lookup for related domain names">
+            <LinkInternal flexShrink={ 0 } display="inline-flex">
+              <Icon as={ iconSearch } boxSize={ 5 } isLoading={ isLoading }/>
+            </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,13 +55,15 @@ const NameDomain = () => {
         noLink
         maxW="300px"
       />
-      <AddressEntity
-        address={ infoQuery.data?.resolvedAddress }
-        isLoading={ isLoading }
-        truncation={ isMobile ? 'constant' : 'dynamic' }
-        noLink
-        flexShrink={ 0 }
-      />
+      { infoQuery.data?.resolvedAddress && (
+        <AddressEntity
+          address={ infoQuery.data?.resolvedAddress }
+          isLoading={ isLoading }
+          truncation={ isMobile ? 'constant' : 'dynamic' }
+          noLink
+          flexShrink={ 0 }
+        />
+      ) }
       { /* TODO @tom2drum add correct href */ }
       <Tooltip label="Lookup for related domain names">
         <LinkInternal flexShrink={ 0 } display="inline-flex">