api keys page

theme/components/Modal.ts

@@ -22,6 +22,7 @@ const baseStyleHeader: SystemStyleFunction = (props) => ({
 const baseStyleBody = {
   padding: 0,
   marginBottom: 8,
+  flex: 'initial',
 };
 
 const baseStyleFooter = {

ui/apiKey/ApiKeyTable/ApiKeyListItem.tsx

+import { HStack, Text, Box } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import type { ApiKey } from 'types/api/account';
+
+import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
+
+interface Props {
+  item: ApiKey;
+  onEditClick: (item: ApiKey) => void;
+  onDeleteClick: (item: ApiKey) => void;
+}
+
+const ApiKeyListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
+
+  const onItemEditClick = useCallback(() => {
+    return onEditClick(item);
+  }, [ item, onEditClick ]);
+
+  const onItemDeleteClick = useCallback(() => {
+    return onDeleteClick(item);
+  }, [ item, onDeleteClick ]);
+
+  return (
+    <AccountListItemMobile>
+      <Box>
+        <HStack>
+          <Text fontSize="md" fontWeight={ 600 }>{ item.api_key }</Text>
+          <CopyToClipboard text={ item.api_key }/>
+        </HStack>
+        <Text fontSize="sm" marginTop={ 0.5 } variant="secondary">{ item.name }</Text>
+      </Box>
+      <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
+    </AccountListItemMobile>
+  );
+};
+
+export default ApiKeyListItem;

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

@@ -9,8 +9,7 @@ import React, { useCallback } from 'react';
 import type { ApiKey } from 'types/api/account';
 
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import DeleteButton from 'ui/shared/DeleteButton';
-import EditButton from 'ui/shared/EditButton';
+import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
   item: ApiKey;
@@ -38,10 +37,7 @@ const ApiKeyTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         <Text fontSize="sm" marginTop={ 0.5 } variant="secondary">{ item.name }</Text>
       </Td>
       <Td>
-        <HStack spacing={ 6 }>
-          <EditButton onClick={ onItemEditClick }/>
-          <DeleteButton onClick={ onItemDeleteClick }/>
-        </HStack>
+        <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
       </Td>
     </Tr>
   );

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 AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressSnippet from 'ui/shared/AddressSnippet';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
@@ -23,19 +23,10 @@ const CustomAbiListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <VStack
-      gap={ 4 }
-      alignItems="flex-start"
-      paddingY={ 6 }
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
-      borderTopWidth="1px"
-      _last={{
-        borderBottomWidth: '1px',
-      }}
-    >
+    <AccountListItemMobile>
       <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name }/>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
-    </VStack>
+    </AccountListItemMobile>
   );
 };
 

ui/pages/ApiKeys.tsx

-import { Box, Button, HStack, Link, Text, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Stack, Link, Text, Skeleton, useDisclosure } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { ApiKey, ApiKeys } from 'types/api/account';
 
 import fetch from 'lib/client/fetch';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import { space } from 'lib/html-entities';
 import ApiKeyModal from 'ui/apiKey/ApiKeyModal/ApiKeyModal';
+import ApiKeyListItem from 'ui/apiKey/ApiKeyTable/ApiKeyListItem';
 import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable';
 import DeleteApiKeyModal from 'ui/apiKey/DeleteApiKeyModal';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
@@ -20,6 +22,7 @@ const DATA_LIMIT = 3;
 const ApiKeysPage: React.FC = () => {
   const apiKeyModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
+  const isMobile = useIsMobile();
 
   const [ apiKeyModalData, setApiKeyModalData ] = useState<ApiKey>();
   const [ deleteModalData, setDeleteModalData ] = useState<ApiKey>();
@@ -47,7 +50,7 @@ const ApiKeysPage: React.FC = () => {
   }, [ deleteModalProps ]);
 
   const description = (
-    <Text marginBottom={ 12 }>
+    <Text marginBottom={{ base: 6, lg: 12 }}>
     Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
       <Link href="#">“How to use a Blockscout API key”</Link>.
     </Text>
@@ -68,19 +71,32 @@ const ApiKeysPage: React.FC = () => {
       return <DataFetchAlert/>;
     }
 
+    const list = isMobile ? (
+      <Box>
+        { data.map((item) => (
+          <ApiKeyListItem
+            item={ item }
+            key={ item.api_key }
+            onDeleteClick={ onDeleteClick }
+            onEditClick={ onEditClick }
+          />
+        )) }
+      </Box>
+    ) : (
+      <ApiKeyTable
+        data={ data }
+        onDeleteClick={ onDeleteClick }
+        onEditClick={ onEditClick }
+        limit={ DATA_LIMIT }
+      />
+    );
+
     const canAdd = data.length < DATA_LIMIT;
     return (
       <>
         { description }
-        { Boolean(data.length) && (
-          <ApiKeyTable
-            data={ data }
-            onDeleteClick={ onDeleteClick }
-            onEditClick={ onEditClick }
-            limit={ DATA_LIMIT }
-          />
-        ) }
-        <HStack marginTop={ 8 } spacing={ 5 }>
+        { Boolean(data.length) && list }
+        <Stack marginTop={ 8 } spacing={ 5 } direction={{ base: 'column', lg: 'row' }}>
           <Button
             variant="primary"
             size="lg"
@@ -94,7 +110,7 @@ const ApiKeysPage: React.FC = () => {
               { `You have added the maximum number of API keys (${ DATA_LIMIT }). Contact us to request additional keys.` }
             </Text>
           ) }
-        </HStack>
+        </Stack>
         <ApiKeyModal { ...apiKeyModalProps } onClose={ onApiKeyModalClose } data={ apiKeyModalData }/>
         { deleteModalData && <DeleteApiKeyModal { ...deleteModalProps } onClose={ onDeleteModalClose } data={ deleteModalData }/> }
       </>

ui/pages/CustomAbi.tsx

@@ -47,7 +47,7 @@ const CustomAbiPage: React.FC = () => {
   }, [ deleteModalProps ]);
 
   const description = (
-    <Text marginBottom={ 12 }>
+    <Text marginBottom={{ base: 6, lg: 12 }}>
       Add custom ABIs for any contract and access when logged into your account. Helpful for debugging, functional testing and contract interaction.
     </Text>
   );

ui/shared/AccountListItemMobile.tsx

+import { VStack, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const AccountListItemMobile = ({ children }: Props) => {
+  return (
+    <VStack
+      gap={ 4 }
+      alignItems="flex-start"
+      paddingY={ 6 }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderTopWidth="1px"
+      _last={{
+        borderBottomWidth: '1px',
+      }}
+    >
+      { children }
+    </VStack>
+  );
+};
+
+export default AccountListItemMobile;

ui/shared/AccountPageHeader.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 const PageHeader = ({ text }: {text: string}) => {
   return (
-    <Heading as="h1" size="lg" marginBottom={ 8 }>{ text }</Heading>
+    <Heading as="h1" size="lg" marginBottom={{ base: 6, lg: 8 }}>{ text }</Heading>
   );
 };
 

ui/shared/DeleteModal.tsx

@@ -54,7 +54,7 @@ const DeleteModal: React.FC<Props> = ({
   }, [ setAlertVisible, mutation ]);
 
   return (
-    <Modal isOpen={ isOpen } onClose={ onModalClose } size="md">
+    <Modal isOpen={ isOpen } onClose={ onModalClose } size={{ base: 'full', lg: 'md' }}>
       <ModalOverlay/>
       <ModalContent>
         <ModalHeader fontWeight="500" textStyle="h3">{ title }</ModalHeader>