desktop list view

lib/api/resources.ts

-import type { UserInfo, CustomAbis, PublicTags, AddressTags, TransactionTags, ApiKeys, WatchlistAddress } from 'types/api/account';
+import type { UserInfo, CustomAbis, PublicTags, AddressTags, TransactionTags, ApiKeys, WatchlistAddress, VerifiedAddressResponse } from 'types/api/account';
 import type {
   Address,
   AddressCounters,
@@ -86,7 +86,7 @@ export const RESOURCES = {
     pathParams: [ 'id' as const ],
   },
 
-  // ACCOUNT: VERIFICATIONS
+  // ACCOUNT: ADDRESS VERIFICATION & TOKEN INFO
   address_verification: {
     path: '/api/v1/chains/:chainId/verified-addresses\\:verify',
     pathParams: [ 'chainId' as const ],
@@ -94,6 +94,13 @@ export const RESOURCES = {
     basePath: appConfig.contractInfoApi.basePath,
   },
 
+  verified_addresses: {
+    path: '/api/v1/chains/:chainId/verified-addresses',
+    pathParams: [ 'chainId' as const ],
+    endpoint: appConfig.contractInfoApi.endpoint,
+    basePath: appConfig.contractInfoApi.basePath,
+  },
+
   // STATS
   stats_counters: {
     path: '/api/v1/counters',
@@ -492,6 +499,7 @@ Q extends 'private_tags_address' ? AddressTags :
 Q extends 'private_tags_tx' ? TransactionTags :
 Q extends 'api_keys' ? ApiKeys :
 Q extends 'watchlist' ? Array<WatchlistAddress> :
+Q extends 'verified_addresses' ? VerifiedAddressResponse :
 Q extends 'homepage_stats' ? HomeStats :
 Q extends 'homepage_chart_txs' ? ChartTransactionResponse :
 Q extends 'homepage_chart_market' ? ChartMarketResponse :

types/api/account.ts

@@ -160,3 +160,14 @@ export type PublicTagErrors = {
   full_name: Array<string>;
   tags: Array<string>;
 }
+
+export interface VerifiedAddress {
+  userId: string;
+  chainId: string;
+  contractAddress: string;
+  verifiedDate: string;
+}
+
+export interface VerifiedAddressResponse {
+  verifiedAddresses: Array<VerifiedAddress>;
+}

ui/pages/VerifiedAddresses.tsx

-import { UnorderedList, ListItem, chakra, Button, useDisclosure } from '@chakra-ui/react';
+import { UnorderedList, ListItem, chakra, Button, useDisclosure, Show, Hide, Skeleton, Box } from '@chakra-ui/react';
 import React from 'react';
 
+import appConfig from 'configs/app/config';
+import useApiQuery from 'lib/api/useApiQuery';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import AddressVerificationModal from 'ui/addressVerification/AddressVerificationModal';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
+import DataListDisplay from 'ui/shared/DataListDisplay';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
+import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
+import VerifiedAddressesTable from 'ui/verifiedAddresses/VerifiedAddressesTable';
 
 const VerifiedAddresses = () => {
   useRedirectForInvalidAuthToken();
 
   const modalProps = useDisclosure();
+  const { data, isLoading, isError } = useApiQuery('verified_addresses', {
+    pathParams: { chainId: appConfig.network.id },
+  });
+
+  const handleItemEdit = React.useCallback(() => {}, []);
+  const handleItemDelete = React.useCallback(() => {}, []);
+
+  const addButton = (
+    <Button size="lg" onClick={ modalProps.onOpen } marginTop={ 8 }>
+        Add address
+    </Button>
+  );
+
+  const skeleton = (
+    <>
+      <Box display={{ base: 'block', lg: 'none' }}>
+        <SkeletonListAccount/>
+        <Skeleton height="44px" width="156px" marginTop={ 8 }/>
+      </Box>
+      <Box display={{ base: 'none', lg: 'block' }}>
+        <SkeletonTable columns={ [ '100%', '180px', '260px', '160px' ] }/>
+        <Skeleton height="44px" width="156px" marginTop={ 8 }/>
+      </Box>
+    </>
+  );
+
+  const content = data?.verifiedAddresses ? (
+    <>
+      <Show below="lg" key="content-mobile" ssr={ false }>
+        mobile view
+        { addButton }
+      </Show>
+      <Hide below="lg" key="content-desktop" ssr={ false }>
+        <VerifiedAddressesTable data={ data.verifiedAddresses } onItemEdit={ handleItemEdit } onItemDelete={ handleItemDelete }/>
+        { addButton }
+      </Hide>
+    </>
+  ) : null;
 
   return (
     <Page>
@@ -28,9 +72,14 @@ const VerifiedAddresses = () => {
             Find out more about verify address ownership.
         </chakra.div>
       </AccountPageDescription>
-      <Button size="lg" onClick={ modalProps.onOpen }>
-        Add address
-      </Button>
+      <DataListDisplay
+        isLoading={ isLoading }
+        isError={ isError }
+        items={ data?.verifiedAddresses }
+        content={ content }
+        emptyText=""
+        skeletonProps={{ customSkeleton: skeleton }}
+      />
       <AddressVerificationModal isOpen={ modalProps.isOpen } onClose={ modalProps.onClose }/>
     </Page>
   );

ui/shared/AddressSnippet.tsx

@@ -9,7 +9,7 @@ import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 interface Props {
-  address: AddressParam;
+  address: Pick<AddressParam, 'hash' | 'is_contract' | 'implementation_name'>;
   subtitle?: string;
 }
 

ui/verifiedAddresses/VerifiedAddressesTable.tsx

+import { Table, Tbody, Th, Thead, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { VerifiedAddress } from 'types/api/account';
+
+import VerifiedAddressesTableItem from './VerifiedAddressesTableItem';
+
+interface Props {
+  data: Array<VerifiedAddress>;
+  onItemEdit: (item: VerifiedAddress) => void;
+  onItemDelete: (item: VerifiedAddress) => void;
+}
+
+const VerifiedAddressesTable = ({ data, onItemEdit, onItemDelete }: Props) => {
+  return (
+    <Table variant="simple">
+      <Thead>
+        <Tr>
+          <Th>Address</Th>
+          <Th w="180px">Token info</Th>
+          <Th w="260px">Request status</Th>
+          <Th w="160px">Actions</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { data.map((item) => (
+          <VerifiedAddressesTableItem
+            key={ item.contractAddress }
+            item={ item }
+            onEdit={ onItemEdit }
+            onDelete={ onItemDelete }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default React.memo(VerifiedAddressesTable);

ui/verifiedAddresses/VerifiedAddressesTableItem.tsx

+import { Td, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { VerifiedAddress } from 'types/api/account';
+
+import AddressSnippet from 'ui/shared/AddressSnippet';
+import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
+
+interface Props {
+  item: VerifiedAddress;
+  onEdit: (item: VerifiedAddress) => void;
+  onDelete: (item: VerifiedAddress) => void;
+}
+
+const VerifiedAddressesTableItem = ({ item, onEdit, onDelete }: Props) => {
+
+  const handleEditClick = React.useCallback(() => {
+    onEdit(item);
+  }, [ item, onEdit ]);
+
+  const handleDeleteClick = React.useCallback(() => {
+    onDelete(item);
+  }, [ item, onDelete ]);
+
+  return (
+    <Tr>
+      <Td>
+        <AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}/>
+      </Td>
+      <Td>Add details</Td>
+      <Td></Td>
+      <Td>
+        <TableItemActionButtons onDeleteClick={ handleDeleteClick } onEditClick={ handleEditClick }/>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(VerifiedAddressesTableItem);