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,29 +34,33 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit }: Props)
         <AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}/>
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label>Token Info</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py={ application ? '3px' : '5px' } display="flex" alignItems="center">
-        { application ? (
-          <>
-            <VerifiedAddressesTokenSnippet application={ application }/>
-            <Tooltip label="Edit">
-              <IconButton
-                aria-label="edit"
-                variant="simple"
-                boxSize={ 5 }
-                borderRadius="none"
-                flexShrink={ 0 }
-                onClick={ handleEditClick }
-                icon={ <Icon as={ editIcon }/> }
-              />
-            </Tooltip>
-          </>
-        ) : (
-          <Link onClick={ handleAddClick }>Add details</Link>
-        ) }
-      </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 } name={ item.metadata.tokenName }/>
+                <Tooltip label="Edit">
+                  <IconButton
+                    aria-label="edit"
+                    variant="simple"
+                    boxSize={ 5 }
+                    borderRadius="none"
+                    flexShrink={ 0 }
+                    onClick={ handleEditClick }
+                    icon={ <Icon as={ editIcon }/> }
+                  />
+                </Tooltip>
+              </>
+            ) : (
+              <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,33 +27,43 @@ 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>
+        { item.metadata.tokenName && application ? (
+          <Tooltip label="Edit">
+            <IconButton
+              aria-label="edit"
+              variant="simple"
+              boxSize={ 5 }
+              borderRadius="none"
+              flexShrink={ 0 }
+              onClick={ handleEditClick }
+              icon={ <Icon as={ editIcon }/> }
+            />
+          </Tooltip>
+        ) : null }
       </Td>
-      <Td>{ application ? (
-        <Tooltip label="Edit">
-          <IconButton
-            aria-label="edit"
-            variant="simple"
-            boxSize={ 5 }
-            borderRadius="none"
-            flexShrink={ 0 }
-            onClick={ handleEditClick }
-            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>
+      <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 }