custom abi page

ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx

+import { VStack, useColorModeValue } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import type { CustomAbi } from 'types/api/account';
+
+import AddressSnippet from 'ui/shared/AddressSnippet';
+import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
+
+interface Props {
+  item: CustomAbi;
+  onEditClick: (item: CustomAbi) => void;
+  onDeleteClick: (item: CustomAbi) => void;
+}
+
+const CustomAbiListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
+
+  const onItemEditClick = useCallback(() => {
+    return onEditClick(item);
+  }, [ item, onEditClick ]);
+
+  const onItemDeleteClick = useCallback(() => {
+    return onDeleteClick(item);
+  }, [ item, onDeleteClick ]);
+
+  return (
+    <VStack
+      gap={ 4 }
+      alignItems="flex-start"
+      paddingY={ 6 }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderTopWidth="1px"
+      _last={{
+        borderBottomWidth: '1px',
+      }}
+    >
+      <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name }/>
+      <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
+    </VStack>
+  );
+};
+
+export default React.memo(CustomAbiListItem);

ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx

 import {
   Tr,
   Td,
-  HStack,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import type { CustomAbi } from 'types/api/account';
 
 import AddressSnippet from 'ui/shared/AddressSnippet';
-import DeleteButton from 'ui/shared/DeleteButton';
-import EditButton from 'ui/shared/EditButton';
+import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
   item: CustomAbi;
@@ -33,10 +31,7 @@ const CustomAbiTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name }/>
       </Td>
       <Td>
-        <HStack spacing={ 6 }>
-          <EditButton onClick={ onItemEditClick }/>
-          <DeleteButton onClick={ onItemDeleteClick }/>
-        </HStack>
+        <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
       </Td>
     </Tr>
   );

ui/pages/CustomAbi.tsx

@@ -5,7 +5,9 @@ import React, { useCallback, useState } from 'react';
 import type { CustomAbi, CustomAbis } from 'types/api/account';
 
 import fetch from 'lib/client/fetch';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import CustomAbiModal from 'ui/customAbi/CustomAbiModal/CustomAbiModal';
+import CustomAbiListItem from 'ui/customAbi/CustomAbiTable/CustomAbiListItem';
 import CustomAbiTable from 'ui/customAbi/CustomAbiTable/CustomAbiTable';
 import DeleteCustomAbiModal from 'ui/customAbi/DeleteCustomAbiModal';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
@@ -17,6 +19,7 @@ import DataFetchAlert from '../shared/DataFetchAlert';
 const CustomAbiPage: React.FC = () => {
   const customAbiModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
+  const isMobile = useIsMobile();
 
   const [ customAbiModalData, setCustomAbiModalData ] = useState<CustomAbi>();
   const [ deleteModalData, setDeleteModalData ] = useState<CustomAbi>();
@@ -64,16 +67,29 @@ const CustomAbiPage: React.FC = () => {
       return <DataFetchAlert/>;
     }
 
-    return (
-      <>
-        { description }
-        { data.length > 0 && (
-          <CustomAbiTable
-            data={ data }
+    const list = isMobile ? (
+      <Box>
+        { data.map((item) => (
+          <CustomAbiListItem
+            item={ item }
+            key={ item.id }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
           />
-        ) }
+        )) }
+      </Box>
+    ) : (
+      <CustomAbiTable
+        data={ data }
+        onDeleteClick={ onDeleteClick }
+        onEditClick={ onEditClick }
+      />
+    );
+
+    return (
+      <>
+        { description }
+        { data.length > 0 && list }
         <HStack marginTop={ 8 } spacing={ 5 }>
           <Button
             variant="primary"

ui/shared/AddressLinkWithTooltip.tsx

@@ -19,6 +19,7 @@ const AddressLinkWithTooltip = ({ address }: {address: string}) => {
         overflow="hidden"
         fontWeight={ FONT_WEIGHT }
         lineHeight="24px"
+        whiteSpace="nowrap"
       >
         <AddressWithDots address={ address } fontWeight={ FONT_WEIGHT }/>
       </Link>

ui/shared/AddressSnippet.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 const AddressSnippet = ({ address, subtitle }: Props) => {
   return (
-    <HStack spacing={ 4 } key={ address } overflow="hidden" alignItems="start">
+    <HStack spacing={ 4 } key={ address } overflow="hidden" alignItems="start" maxW="100%">
       <AddressIcon address={ address }/>
       <Box overflow="hidden">
         <AddressLinkWithTooltip address={ address }/>

ui/shared/TableItemActionButtons.tsx

+import { Tooltip, IconButton, Icon, HStack } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import DeleteIcon from 'icons/delete.svg';
+import EditIcon from 'icons/edit.svg';
+
+type Props = {
+  onEditClick: () => void;
+  onDeleteClick: () => void;
+}
+
+const TableItemActionButtons = ({ onEditClick, onDeleteClick }: Props) => {
+  // prevent set focus on button when closing modal
+  const onFocusCapture = useCallback((e: React.SyntheticEvent) => e.stopPropagation(), []);
+
+  return (
+    <HStack spacing={ 6 } alignSelf="flex-end">
+      <Tooltip label="Edit">
+        <IconButton
+          aria-label="edit"
+          variant="icon"
+          w="30px"
+          h="30px"
+          onClick={ onEditClick }
+          icon={ <Icon as={ EditIcon } w="20px" h="20px"/> }
+          onFocusCapture={ onFocusCapture }
+        />
+      </Tooltip>
+      <Tooltip label="Delete">
+        <IconButton
+          aria-label="delete"
+          variant="icon"
+          w="30px"
+          h="30px"
+          onClick={ onDeleteClick }
+          icon={ <Icon as={ DeleteIcon } w="20px" h="20px"/> }
+          onFocusCapture={ onFocusCapture }
+        />
+      </Tooltip>
+    </HStack>
+  );
+};
+
+export default React.memo(TableItemActionButtons);