mobile view

ui/pages/VerifiedAddresses.tsx

@@ -12,6 +12,7 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
 import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import TokenInfoForm from 'ui/tokenInfo/TokenInfoForm';
+import VerifiedAddressesListItem from 'ui/verifiedAddresses/VerifiedAddressesListItem';
 import VerifiedAddressesTable from 'ui/verifiedAddresses/VerifiedAddressesTable';
 
 const VerifiedAddresses = () => {
@@ -77,7 +78,14 @@ const VerifiedAddresses = () => {
   const content = data?.verifiedAddresses ? (
     <>
       <Show below="lg" key="content-mobile" ssr={ false }>
-        <div>mobile view</div>
+        { data.verifiedAddresses.map((item) => (
+          <VerifiedAddressesListItem
+            key={ item.contractAddress }
+            item={ item }
+            onAdd={ handleItemAdd }
+            onEdit={ handleItemEdit }
+          />
+        )) }
       </Show>
       <Hide below="lg" key="content-desktop" ssr={ false }>
         <VerifiedAddressesTable data={ data.verifiedAddresses } onItemEdit={ handleItemEdit } onItemAdd={ handleItemAdd }/>

ui/verifiedAddresses/VerifiedAddressesListItem.tsx

+import { Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type { VerifiedAddress } from 'types/api/account';
+
+import AddressSnippet from 'ui/shared/AddressSnippet';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+
+interface Props {
+  item: VerifiedAddress;
+  onAdd: (address: string) => void;
+  onEdit: (item: VerifiedAddress) => void;
+}
+
+const VerifiedAddressesListItem = ({ item, onAdd }: Props) => {
+  const handleAddClick = React.useCallback(() => {
+    onAdd(item.contractAddress);
+  }, [ item, onAdd ]);
+
+  return (
+    <ListItemMobileGrid.Container>
+      <ListItemMobileGrid.Label>Address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value py="3px">
+        <AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label>Token Info</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Link onClick={ handleAddClick }>Add details</Link>
+      </ListItemMobileGrid.Value>
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default React.memo(VerifiedAddressesListItem);