first part of fixes

- transaction icon
- public tag go back link
- api key icon alignment
- status label for public key request

icons/transactions.svg

-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.433 12.64a1.212 1.212 0 0 1-.857.354H6.212a1.212 1.212 0 0 1-1.12-.745 1.212 1.212 0 0 1 .266-1.321L8.994 7.29a1.212 1.212 0 0 1 1.71 1.71L9.14 10.57h13.436a1.212 1.212 0 0 1 .857 2.068ZM7.424 17.236h16.363a1.213 1.213 0 0 1 1.121.745 1.212 1.212 0 0 1-.266 1.321l-3.636 3.637a1.213 1.213 0 1 1-1.71-1.71l1.564-1.569H7.424a1.212 1.212 0 0 1 0-2.424Z"/></svg>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
\ No newline at end of file
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M23.433 12.64a1.212 1.212 0 0 1-.857.354H6.212a1.212 1.212 0 0 1-1.12-.745 1.212 1.212 0 0 1 .266-1.321L8.994 7.29a1.212 1.212 0 0 1 1.71 1.71L9.14 10.57h13.436a1.212 1.212 0 0 1 .857 2.068ZM7.424 17.236h16.363a1.213 1.213 0 0 1 1.121.745 1.212 1.212 0 0 1-.266 1.321l-3.636 3.637a1.213 1.213 0 1 1-1.71-1.71l1.564-1.569H7.424a1.212 1.212 0 0 1 0-2.424Z" fill="currentColor"/>
+</svg>
\ No newline at end of file

ui/apiKey/ApiKeyTable/ApiKeyListItem.tsx

@@ -26,7 +26,7 @@ const ApiKeyListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <AccountListItemMobile>
       <Box>
-        <HStack>
+        <HStack alignItems="flex-start">
           <Text fontSize="md" fontWeight={ 600 }>{ item.api_key }</Text>
           <CopyToClipboard text={ item.api_key }/>
         </HStack>

ui/pages/PublicTags.tsx

-import { Box } from '@chakra-ui/react';
+import { ArrowBackIcon } from '@chakra-ui/icons';
+import { Box, Link, Text } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 import { animateScroll } from 'react-scroll';
 
 import type { PublicTag } from 'types/api/account';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import useToast from 'lib/hooks/useToast';
 import PublicTagsData from 'ui/publicTags/PublicTagsData';
 import PublicTagsForm from 'ui/publicTags/PublicTagsForm/PublicTagsForm';
@@ -24,6 +26,7 @@ const PublicTagsComponent: React.FC = () => {
   const [ formData, setFormData ] = useState<PublicTag>();
 
   const toast = useToast();
+  const isMobile = useIsMobile();
 
   const showToast = useCallback((action: TToastAction) => {
     toast({
@@ -59,6 +62,7 @@ const PublicTagsComponent: React.FC = () => {
   }, [ showToast ]);
 
   const onTagDelete = useCallback(() => showToast('removed'), [ showToast ]);
+  const onGoBack = useCallback(() => setScreen('data'), [ ]);
 
   let content;
   let header;
@@ -74,6 +78,12 @@ const PublicTagsComponent: React.FC = () => {
   return (
     <Page>
       <Box h="100%">
+        { isMobile && screen === 'form' && (
+          <Link display="inline-flex" alignItems="center" mb={ 6 } onClick={ onGoBack }>
+            <ArrowBackIcon w={ 6 } h={ 6 }/>
+            <Text variant="inherit" fontSize="sm" ml={ 2 }>Public tags</Text>
+          </Link>
+        ) }
         <AccountPageHeader text={ header }/>
         { content }
       </Box>

ui/privateTags/TransactionTagTable/TransactionTagListItem.tsx

@@ -4,8 +4,8 @@ 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';
+import TransactionSnippet from 'ui/shared/TransactionSnippet';
 
 interface Props {
   item: TransactionTag;
@@ -25,7 +25,7 @@ const TransactionTagListItem = ({ item, onEditClick, onDeleteClick }: Props) =>
   return (
     <AccountListItemMobile>
       <Flex alignItems="flex-start" flexDirection="column" maxW="100%">
-        <AddressLinkWithTooltip address={ item.transaction_hash }/>
+        <TransactionSnippet hash={ item.transaction_hash }/>
         <HStack spacing={ 3 } mt={ 4 }>
           <Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
           <Tag variant="gray" lineHeight="24px">

ui/privateTags/TransactionTagTable/TransactionTagTableItem.tsx

@@ -8,8 +8,8 @@ import React, { useCallback } from 'react';
 
 import type { TransactionTag } from 'types/api/account';
 
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
+import TransactionSnippet from 'ui/shared/TransactionSnippet';
 
 interface Props {
   item: TransactionTag;
@@ -17,7 +17,7 @@ interface Props {
   onDeleteClick: (data: TransactionTag) => void;
 }
 
-const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
+const TransactionTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   const onItemEditClick = useCallback(() => {
     return onEditClick(item);
   }, [ item, onEditClick ]);
@@ -29,7 +29,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.id }>
       <Td>
-        <AddressLinkWithTooltip address={ item.transaction_hash }/>
+        <TransactionSnippet hash={ item.transaction_hash }/>
       </Td>
       <Td>
         <Tooltip label={ item.name }>
@@ -45,4 +45,4 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   );
 };
 
-export default AddressTagTableItem;
+export default TransactionTagTableItem;

ui/publicTags/PublicTagTable/PublicTagListItem.tsx

@@ -25,7 +25,7 @@ const PublicTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
 
   return (
     <AccountListItemMobile>
-      <VStack spacing={ 4 } alignItems="flex-start" maxW="100%">
+      <VStack spacing={ 3 } alignItems="flex-start" maxW="100%">
         <VStack spacing={ 4 } alignItems="unset" maxW="100%">
           { item.addresses.map((address) => <AddressSnippet key={ address } address={ address }/>) }
         </VStack>
@@ -43,7 +43,10 @@ const PublicTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
             }) }
           </HStack>
         </HStack>
-        <Text fontSize="sm" fontWeight="500">Submitted</Text>
+        <HStack spacing={ 3 }>
+          <Text fontSize="sm" fontWeight={ 500 }>Status</Text>
+          <Text fontSize="sm" variant="secondary">Submitted</Text>
+        </HStack>
       </VStack>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
     </AccountListItemMobile>

ui/shared/TransactionSnippet.tsx

+import { Box, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import transactionIcon from 'icons/transactions.svg';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+
+interface Props {
+  hash: string;
+}
+
+const TransactionSnippet = ({ hash }: Props) => {
+  return (
+    <HStack spacing={ 2 } overflow="hidden" alignItems="start" maxW="100%">
+      <Icon as={ transactionIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') }/>
+      <Box overflow="hidden">
+        <AddressLinkWithTooltip address={ hash }/>
+      </Box>
+    </HStack>
+  );
+};
+
+export default React.memo(TransactionSnippet);