replace hint with tag

ui/tx/state/TxStateListItem.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const TxStateListItem = ({ data }: Props) => {
 
-  const { before, after, change, hint, tokenId } = getStateElements(data);
+  const { before, after, change, tag, tokenId } = getStateElements(data);
 
   return (
     <ListItemMobileGrid.Container>
@@ -24,8 +24,8 @@ const TxStateListItem = ({ data }: Props) => {
       <ListItemMobileGrid.Value py="3px">
         <Address flexGrow={ 1 } w="100%" alignSelf="center">
           <AddressIcon address={ data.address }/>
-          <AddressLink type="address" hash={ data.address.hash } ml={ 2 } truncation="constant" mr="auto"/>
-          { hint }
+          <AddressLink type="address" hash={ data.address.hash } ml={ 2 } truncation="constant" mr={ 3 }/>
+          { tag }
         </Address>
       </ListItemMobileGrid.Value>
 

ui/tx/state/TxStateTable.tsx

@@ -20,7 +20,7 @@ const TxStateTable = ({ data }: Props) => {
     <Table variant="simple" minWidth="1000px" size="sm" w="auto" mt={ 6 }>
       <Thead top={ 0 }>
         <Tr>
-          <Th width="140px"/>
+          <Th width="140px">Type</Th>
           <Th width="146px">Address</Th>
           <Th width="33%" isNumeric>Before</Th>
           <Th width="33%" isNumeric>After</Th>

ui/tx/state/TxStateTableItem.tsx

@@ -14,12 +14,12 @@ interface Props {
 }
 
 const TxStateTableItem = ({ data }: Props) => {
-  const { before, after, change, hint, tokenId } = getStateElements(data);
+  const { before, after, change, tag, tokenId } = getStateElements(data);
 
   return (
     <Tr>
       <Td lineHeight="30px">
-        { hint || '-' }
+        { tag || '-' }
       </Td>
       <Td>
         <Address height="30px">

ui/tx/state/utils.tsx

-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Tag, Tooltip } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -11,18 +11,16 @@ import { nbsp } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import AddressLink from 'ui/shared/address/AddressLink';
-import Hint from 'ui/shared/Hint';
 
 import TxStateTokenIdList from './TxStateTokenIdList';
 
 export function getStateElements(data: TxStateChange) {
-  const hint = (() => {
+  const tag = (() => {
     if (data.is_miner) {
       return (
-        <Flex align="center" columnGap={ 1 } flexDir={{ base: 'row-reverse', lg: 'row' }}>
-          <Hint label="A block producer who successfully included the block into the blockchain"/>
-          <Box color="text_secondary" textTransform="capitalize">{ getNetworkValidatorTitle() }</Box>
-        </Flex>
+        <Tooltip label="A block producer who successfully included the block into the blockchain">
+          <Tag textTransform="capitalize" colorScheme="yellow">{ getNetworkValidatorTitle() }</Tag>
+        </Tooltip>
       );
     }
 
@@ -31,10 +29,9 @@ export function getStateElements(data: TxStateChange) {
       if (changeDirection) {
         const text = changeDirection === 'from' ? 'Mint' : 'Burn';
         return (
-          <Flex align="center" columnGap={ 1 } flexDir={{ base: 'row-reverse', lg: 'row' }}>
-            <Hint label="Address used in tokens mintings and burnings"/>
-            <Box color="text_secondary" whiteSpace="nowrap">{ text } address</Box>
-          </Flex>
+          <Tooltip label="Address used in tokens mintings and burnings">
+            <Tag textTransform="capitalize" colorScheme="yellow">{ text } address</Tag>
+          </Tooltip>
         );
       }
     }
@@ -54,7 +51,7 @@ export function getStateElements(data: TxStateChange) {
         before: <Box>{ beforeBn.toFormat() } { appConfig.network.currency.symbol }</Box>,
         after: <Box>{ afterBn.toFormat() } { appConfig.network.currency.symbol }</Box>,
         change: <Box color={ changeColor }>{ changeSign }{ nbsp }{ differenceBn.abs().toFormat() }</Box>,
-        hint,
+        tag,
       };
     }
     case 'token': {
@@ -110,7 +107,7 @@ export function getStateElements(data: TxStateChange) {
           </Flex>
         ) : null,
         change,
-        hint,
+        tag,
         tokenId,
       };
     }