token name in account view

types/api/account.ts

@@ -166,6 +166,10 @@ export interface VerifiedAddress {
   chainId: string;
   contractAddress: string;
   verifiedDate: string;
+  metadata: {
+    tokenName: string | null;
+    tokenSymbol: string | null;
+  };
 }
 
 export interface VerifiedAddressResponse {

ui/verifiedAddresses/VerifiedAddressesListItem.tsx

@@ -34,11 +34,13 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit }: Props)
         <AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}/>
       </ListItemMobileGrid.Value>
 
+      { item.metadata.tokenName && (
+        <>
           <ListItemMobileGrid.Label>Token Info</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value py={ application ? '3px' : '5px' } display="flex" alignItems="center">
             { application ? (
               <>
-            <VerifiedAddressesTokenSnippet application={ application }/>
+                <VerifiedAddressesTokenSnippet application={ application } name={ item.metadata.tokenName }/>
                 <Tooltip label="Edit">
                   <IconButton
                     aria-label="edit"
@@ -55,8 +57,10 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit }: Props)
               <Link onClick={ handleAddClick }>Add details</Link>
             ) }
           </ListItemMobileGrid.Value>
+        </>
+      ) }
 
-      { application && (
+      { item.metadata.tokenName && application && (
         <>
           <ListItemMobileGrid.Label>Status</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
@@ -65,7 +69,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit }: Props)
         </>
       ) }
 
-      { application && (
+      { item.metadata.tokenName && application && (
         <>
           <ListItemMobileGrid.Label>Date</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>

ui/verifiedAddresses/VerifiedAddressesTableItem.tsx

@@ -27,19 +27,28 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit }: Props)
     onEdit(item.contractAddress);
   }, [ item, onEdit ]);
 
+  const tokenInfo = (() => {
+    if (!item.metadata.tokenName) {
+      return <span>Not a token</span>;
+    }
+
+    if (!application) {
+      return <Link onClick={ handleAddClick }>Add details</Link>;
+    }
+
+    return <VerifiedAddressesTokenSnippet application={ application } name={ item.metadata.tokenName }/>;
+  })();
+
   return (
     <Tr>
       <Td>
         <AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}/>
       </Td>
       <Td fontSize="sm" verticalAlign="middle">
-        { application ? (
-          <VerifiedAddressesTokenSnippet application={ application }/>
-        ) : (
-          <Link onClick={ handleAddClick }>Add details</Link>
-        ) }
+        { tokenInfo }
       </Td>
-      <Td>{ application ? (
+      <Td>
+        { item.metadata.tokenName && application ? (
           <Tooltip label="Edit">
             <IconButton
               aria-label="edit"
@@ -51,9 +60,10 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit }: Props)
               icon={ <Icon as={ editIcon }/> }
             />
           </Tooltip>
-      ) : null }</Td>
-      <Td fontSize="sm"><VerifiedAddressesStatus status={ application?.status }/></Td>
-      <Td fontSize="sm" color="text_secondary">{ dayjs(application?.updatedAt).format('MMM DD, YYYY') }</Td>
+        ) : null }
+      </Td>
+      <Td fontSize="sm"><VerifiedAddressesStatus status={ item.metadata.tokenName ? application?.status : undefined }/></Td>
+      <Td fontSize="sm" color="text_secondary">{ item.metadata.tokenName ? dayjs(application?.updatedAt).format('MMM DD, YYYY') : null }</Td>
     </Tr>
   );
 };

ui/verifiedAddresses/VerifiedAddressesTokenSnippet.tsx

@@ -8,9 +8,10 @@ import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
 
 interface Props {
   application: TokenInfoApplication;
+  name: string;
 }
 
-const VerifiedAddressesTokenSnippet = ({ application }: Props) => {
+const VerifiedAddressesTokenSnippet = ({ application, name }: Props) => {
   return (
     <Flex alignItems="center" columnGap={ 2 } w="100%">
       <Image
@@ -23,7 +24,7 @@ const VerifiedAddressesTokenSnippet = ({ application }: Props) => {
       />
       <AddressLink
         hash={ application.tokenAddress }
-        alias={ application.projectName }
+        alias={ name }
         type="token"
         isDisabled={ application.status === 'IN_PROCESS' }
         fontWeight={ 500 }