private tags page

ui/pages/PrivateTags.tsx

@@ -27,7 +27,7 @@ const PrivateTags = ({ onChangeTab: onChangeTabProps }: Props) => {
       <Box h="100%">
         <AccountPageHeader text="Private tags"/>
         <Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ onTabChange }>
-          <TabList marginBottom={ 8 }>
+          <TabList marginBottom={{ base: 6, lg: 8 }}>
             <Tab>Address</Tab>
             <Tab>Transaction</Tab>
           </TabList>

ui/privateTags/AddressTagTable/AddressTagListItem.tsx

+import { Tag, Flex, HStack, Text } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import type { AddressTag } from 'types/api/account';
+
+import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import AddressSnippet from 'ui/shared/AddressSnippet';
+import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
+
+interface Props {
+  item: AddressTag;
+  onEditClick: (data: AddressTag) => void;
+  onDeleteClick: (data: AddressTag) => void;
+}
+
+const AddressTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
+  const onItemEditClick = useCallback(() => {
+    return onEditClick(item);
+  }, [ item, onEditClick ]);
+
+  const onItemDeleteClick = useCallback(() => {
+    return onDeleteClick(item);
+  }, [ item, onDeleteClick ]);
+
+  return (
+    <AccountListItemMobile>
+      <Flex alignItems="flex-start" flexDirection="column" maxW="100%">
+        <AddressSnippet address={ item.address_hash }/>
+        <HStack spacing={ 3 } mt={ 4 }>
+          <Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
+          <Tag variant="gray" lineHeight="24px">
+            { item.name }
+          </Tag>
+        </HStack>
+      </Flex>
+      <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
+    </AccountListItemMobile>
+  );
+};
+
+export default React.memo(AddressTagListItem);

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -2,15 +2,13 @@ import {
   Tag,
   Tr,
   Td,
-  HStack,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import type { AddressTag } 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';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 interface Props {
@@ -41,10 +39,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </TruncatedTextTooltip>
       </Td>
       <Td>
-        <HStack spacing={ 6 }>
-          <EditButton onClick={ onItemEditClick }/>
-          <DeleteButton onClick={ onItemDeleteClick }/>
-        </HStack>
+        <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
       </Td>
     </Tr>
   );

ui/privateTags/PrivateAddressTags.tsx

-import { Box, Button, Text, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { AddressTags, AddressTag } from 'types/api/account';
 
 import fetch from 'lib/client/fetch';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import AddressModal from './AddressModal/AddressModal';
+import AddressTagListItem from './AddressTagTable/AddressTagListItem';
 import AddressTagTable from './AddressTagTable/AddressTagTable';
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 
@@ -18,6 +21,7 @@ const PrivateAddressTags = () => {
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
+  const isMobile = useIsMobile();
 
   const [ addressModalData, setAddressModalData ] = useState<AddressTag>();
   const [ deleteModalData, setDeleteModalData ] = useState<AddressTag>();
@@ -43,10 +47,10 @@ const PrivateAddressTags = () => {
   }, [ deleteModalProps ]);
 
   const description = (
-    <Text marginBottom={ 12 }>
-        Use private transaction tags to label any transactions of interest.
+    <AccountPageDescription>
+        Use private address tags to track any addresses of interest.
         Private tags are saved in your account and are only visible when you are logged in.
-    </Text>
+    </AccountPageDescription>
   );
 
   if (isLoading && !addressTagsData) {
@@ -63,16 +67,29 @@ const PrivateAddressTags = () => {
     return <DataFetchAlert/>;
   }
 
-  return (
-    <>
-      { description }
-      { Boolean(addressTagsData?.length) && (
+  const list = isMobile ? (
+    <Box>
+      { addressTagsData.map((item: AddressTag) => (
+        <AddressTagListItem
+          item={ item }
+          key={ item.id }
+          onDeleteClick={ onDeleteClick }
+          onEditClick={ onEditClick }
+        />
+      )) }
+    </Box>
+  ) : (
     <AddressTagTable
       data={ addressTagsData }
       onDeleteClick={ onDeleteClick }
       onEditClick={ onEditClick }
     />
-      ) }
+  );
+
+  return (
+    <>
+      { description }
+      { Boolean(addressTagsData?.length) && list }
       <Box marginTop={ 8 }>
         <Button
           variant="primary"

ui/privateTags/PrivateTransactionTags.tsx

-import { Box, Button, Skeleton, Text, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { TransactionTags, TransactionTag } from 'types/api/account';
 
 import fetch from 'lib/client/fetch';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 import TransactionModal from './TransactionModal/TransactionModal';
+import TransactionTagListItem from './TransactionTagTable/TransactionTagListItem';
 import TransactionTagTable from './TransactionTagTable/TransactionTagTable';
 
 const PrivateTransactionTags = () => {
@@ -18,6 +21,7 @@ const PrivateTransactionTags = () => {
 
   const transactionModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
+  const isMobile = useIsMobile();
 
   const [ transactionModalData, setTransactionModalData ] = useState<TransactionTag>();
   const [ deleteModalData, setDeleteModalData ] = useState<TransactionTag>();
@@ -43,10 +47,10 @@ const PrivateTransactionTags = () => {
   }, [ deleteModalProps ]);
 
   const description = (
-    <Text marginBottom={ 12 }>
+    <AccountPageDescription>
         Use private transaction tags to label any transactions of interest.
         Private tags are saved in your account and are only visible when you are logged in.
-    </Text>
+    </AccountPageDescription>
   );
 
   if (isLoading && !transactionTagsData) {
@@ -63,16 +67,29 @@ const PrivateTransactionTags = () => {
     return <DataFetchAlert/>;
   }
 
-  return (
-    <>
-      { description }
-      { Boolean(transactionTagsData.length) && (
+  const list = isMobile ? (
+    <Box>
+      { transactionTagsData.map((item) => (
+        <TransactionTagListItem
+          item={ item }
+          key={ item.id }
+          onDeleteClick={ onDeleteClick }
+          onEditClick={ onEditClick }
+        />
+      )) }
+    </Box>
+  ) : (
     <TransactionTagTable
       data={ transactionTagsData }
       onDeleteClick={ onDeleteClick }
       onEditClick={ onEditClick }
     />
-      ) }
+  );
+
+  return (
+    <>
+      { description }
+      { Boolean(transactionTagsData.length) && list }
       <Box marginTop={ 8 }>
         <Button
           variant="primary"

ui/privateTags/TransactionTagTable/TransactionTagListItem.tsx

+import { Tag, HStack, Text, Flex } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import type { TransactionTag } from 'types/api/account';
+
+import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
+
+interface Props {
+  item: TransactionTag;
+  onEditClick: (data: TransactionTag) => void;
+  onDeleteClick: (data: TransactionTag) => void;
+}
+
+const TransactionTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
+  const onItemEditClick = useCallback(() => {
+    return onEditClick(item);
+  }, [ item, onEditClick ]);
+
+  const onItemDeleteClick = useCallback(() => {
+    return onDeleteClick(item);
+  }, [ item, onDeleteClick ]);
+
+  return (
+    <AccountListItemMobile>
+      <Flex alignItems="flex-start" flexDirection="column" maxW="100%">
+        <AddressLinkWithTooltip address={ item.transaction_hash }/>
+        <HStack spacing={ 3 } mt={ 4 }>
+          <Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
+          <Tag variant="gray" lineHeight="24px">
+            { item.name }
+          </Tag>
+        </HStack>
+      </Flex>
+      <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
+    </AccountListItemMobile>
+  );
+};
+
+export default React.memo(TransactionTagListItem);

ui/privateTags/TransactionTagTable/TransactionTagTableItem.tsx

@@ -2,7 +2,6 @@ import {
   Tag,
   Tr,
   Td,
-  HStack,
   Tooltip,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
@@ -10,8 +9,7 @@ import React, { useCallback } from 'react';
 import type { TransactionTag } from 'types/api/account';
 
 import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
-import DeleteButton from 'ui/shared/DeleteButton';
-import EditButton from 'ui/shared/EditButton';
+import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
   item: TransactionTag;
@@ -41,10 +39,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </Tooltip>
       </Td>
       <Td>
-        <HStack spacing={ 6 }>
-          <EditButton onClick={ onItemEditClick }/>
-          <DeleteButton onClick={ onItemDeleteClick }/>
-        </HStack>
+        <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
       </Td>
     </Tr>
   );

ui/shared/AddressLinkWithTooltip.tsx

@@ -12,7 +12,7 @@ const AddressLinkWithTooltip = ({ address }: {address: string}) => {
   const basePath = useBasePath();
   const url = basePath + '/address/' + address + '/tokens#address-tabs';
   return (
-    <HStack spacing={ 2 } alignContent="center" overflow="hidden">
+    <HStack spacing={ 2 } alignContent="center" overflow="hidden" maxW="100%">
       <Link
         href={ url }
         target="_blank"