mobile view

ui/pages/VerifiedAddresses.tsx

@@ -130,10 +130,11 @@ const VerifiedAddresses = () => {
   const content = addressesQuery.data?.verifiedAddresses ? (
     <>
       <Show below="lg" key="content-mobile" ssr={ false }>
-        { data.verifiedAddresses.map((item) => (
+        { addressesQuery.data.verifiedAddresses.map((item) => (
           <VerifiedAddressesListItem
             key={ item.contractAddress }
             item={ item }
+            application={ applicationsQuery.data?.submissions?.find(({ tokenAddress }) => tokenAddress === item.contractAddress) }
             onAdd={ handleItemAdd }
             onEdit={ handleItemEdit }
           />
@@ -190,4 +191,4 @@ const VerifiedAddresses = () => {
   );
 };
 
-export default VerifiedAddresses;
+export default React.memo(VerifiedAddresses);

ui/verifiedAddresses/VerifiedAddressesListItem.tsx

-import { Link } from '@chakra-ui/react';
+import { Icon, IconButton, Link, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
-import type { VerifiedAddress } from 'types/api/account';
+import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account';
 
+import editIcon from 'icons/edit.svg';
+import dayjs from 'lib/date/dayjs';
 import AddressSnippet from 'ui/shared/AddressSnippet';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
+import VerifiedAddressesStatus from './VerifiedAddressesStatus';
+import VerifiedAddressesTokenSnippet from './VerifiedAddressesTokenSnippet';
+
 interface Props {
   item: VerifiedAddress;
+  application: TokenInfoApplication | undefined;
   onAdd: (address: string) => void;
-  onEdit: (item: VerifiedAddress) => void;
+  onEdit: (address: string) => void;
 }
 
-const VerifiedAddressesListItem = ({ item, onAdd }: Props) => {
+const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit }: Props) => {
   const handleAddClick = React.useCallback(() => {
     onAdd(item.contractAddress);
   }, [ item, onAdd ]);
 
+  const handleEditClick = React.useCallback(() => {
+    onEdit(item.contractAddress);
+  }, [ item, onEdit ]);
+
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label>Address</ListItemMobileGrid.Label>
@@ -25,9 +35,44 @@ const VerifiedAddressesListItem = ({ item, onAdd }: Props) => {
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label>Token Info</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Link onClick={ handleAddClick }>Add details</Link>
+      <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>
+
+      { application && (
+        <>
+          <ListItemMobileGrid.Label>Status</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <VerifiedAddressesStatus status={ application.status }/>
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      { application && (
+        <>
+          <ListItemMobileGrid.Label>Date</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            { dayjs(application.updatedAt).format('MMM DD, YYYY') }
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
     </ListItemMobileGrid.Container>
   );
 };

ui/verifiedAddresses/VerifiedAddressesStatus.tsx

+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfoApplication } from 'types/api/account';
+
+interface Props {
+  status?: TokenInfoApplication['status'];
+}
+
+const VerifiedAddressesStatus = ({ status }: Props) => {
+  switch (status) {
+    case 'IN_PROCESS': {
+      return <chakra.span fontWeight={ 500 }>In progress</chakra.span>;
+    }
+    case 'APPROVED': {
+      return <chakra.span fontWeight={ 500 } color="green.500">Approved</chakra.span>;
+    }
+    case 'UPDATE_REQUIRED': {
+      return <chakra.span fontWeight={ 500 } color="orange.500">Waiting for update</chakra.span>;
+    }
+    case 'REJECTED': {
+      return <chakra.span fontWeight={ 500 } color="red.500">Rejected</chakra.span>;
+    }
+
+    default:
+      return null;
+  }
+};
+
+export default VerifiedAddressesStatus;

ui/verifiedAddresses/VerifiedAddressesTable.tsx

@@ -19,6 +19,7 @@ const VerifiedAddressesTable = ({ data, applications, onItemEdit, onItemAdd }: P
         <Tr>
           <Th>Address</Th>
           <Th w="232px">Token info</Th>
+          <Th w="94px"></Th>
           <Th w="160px">Request status</Th>
           <Th w="150px">Date</Th>
         </Tr>

ui/verifiedAddresses/VerifiedAddressesTableItem.tsx

-import { Td, Tr, Link, Flex, Image, Tooltip, IconButton, Icon, chakra } from '@chakra-ui/react';
+import { Td, Tr, Link, Tooltip, IconButton, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account';
 
 import editIcon from 'icons/edit.svg';
 import dayjs from 'lib/date/dayjs';
-import AddressLink from 'ui/shared/address/AddressLink';
 import AddressSnippet from 'ui/shared/AddressSnippet';
-import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
+
+import VerifiedAddressesStatus from './VerifiedAddressesStatus';
+import VerifiedAddressesTokenSnippet from './VerifiedAddressesTokenSnippet';
 
 interface Props {
   item: VerifiedAddress;
@@ -26,26 +27,6 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit }: Props)
     onEdit(item.contractAddress);
   }, [ item, onEdit ]);
 
-  const status = (() => {
-    switch (application?.status) {
-      case 'IN_PROCESS': {
-        return <chakra.span fontWeight={ 500 }>In progress</chakra.span>;
-      }
-      case 'APPROVED': {
-        return <chakra.span fontWeight={ 500 } color="green.500">Approved</chakra.span>;
-      }
-      case 'UPDATE_REQUIRED': {
-        return <chakra.span fontWeight={ 500 } color="orange.500">Waiting for update</chakra.span>;
-      }
-      case 'REJECTED': {
-        return <chakra.span fontWeight={ 500 } color="red.500">Rejected</chakra.span>;
-      }
-
-      default:
-        return null;
-    }
-  })();
-
   return (
     <Tr>
       <Td>
@@ -53,39 +34,25 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit }: Props)
       </Td>
       <Td fontSize="sm" verticalAlign="middle">
         { application ? (
-          <Flex alignItems="center" columnGap={ 2 } w="100%">
-            <Image
-              borderRadius="base"
-              boxSize={ 6 }
-              objectFit="cover"
-              src={ application.iconUrl }
-              alt="Token logo"
-              fallback={ <TokenLogoPlaceholder boxSize={ 6 }/> }
-            />
-            <AddressLink
-              hash={ application.tokenAddress }
-              alias={ application.projectName }
-              type="token"
-              isDisabled={ application.status === 'IN_PROCESS' }
-              fontWeight={ 500 }
-            />
-            <Tooltip label="Edit">
-              <IconButton
-                aria-label="edit"
-                variant="simple"
-                boxSize={ 5 }
-                borderRadius="none"
-                flexShrink={ 0 }
-                onClick={ handleEditClick }
-                icon={ <Icon as={ editIcon }/> }
-              />
-            </Tooltip>
-          </Flex>
+          <VerifiedAddressesTokenSnippet application={ application }/>
         ) : (
           <Link onClick={ handleAddClick }>Add details</Link>
         ) }
       </Td>
-      <Td fontSize="sm">{ status }</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>
     </Tr>
   );

ui/verifiedAddresses/VerifiedAddressesTokenSnippet.tsx

+import { Image, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfoApplication } from 'types/api/account';
+
+import AddressLink from 'ui/shared/address/AddressLink';
+import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
+
+interface Props {
+  application: TokenInfoApplication;
+}
+
+const VerifiedAddressesTokenSnippet = ({ application }: Props) => {
+  return (
+    <Flex alignItems="center" columnGap={ 2 } w="100%">
+      <Image
+        borderRadius="base"
+        boxSize={ 6 }
+        objectFit="cover"
+        src={ application.iconUrl }
+        alt="Token logo"
+        fallback={ <TokenLogoPlaceholder boxSize={ 6 }/> }
+      />
+      <AddressLink
+        hash={ application.tokenAddress }
+        alias={ application.projectName }
+        type="token"
+        isDisabled={ application.status === 'IN_PROCESS' }
+        fontWeight={ 500 }
+      />
+    </Flex>
+  );
+};
+
+export default React.memo(VerifiedAddressesTokenSnippet);