token transfer type

ui/shared/AdditionalInfoButton.tsx

@@ -2,18 +2,34 @@ import {
   Icon,
   Center,
   useColorModeValue,
+  chakra,
 } from '@chakra-ui/react';
 import React from 'react';
 
 import infoIcon from 'icons/info.svg';
 
-const AdditionalInfoButton = ({ isOpen, onClick }: {isOpen?: boolean; onClick?: () => void}, ref: React.ForwardedRef<HTMLDivElement>) => {
+interface Props {
+  isOpen?: boolean;
+  className?: string;
+  onClick?: () => void;
+}
+
+const AdditionalInfoButton = ({ isOpen, onClick, className }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
 
   const infoBgColor = useColorModeValue('blue.50', 'gray.600');
   const infoColor = useColorModeValue('blue.600', 'blue.300');
 
   return (
-    <Center ref={ ref } background={ isOpen ? infoBgColor : 'unset' } borderRadius="8px" w="24px" h="24px" onClick={ onClick } cursor="pointer">
+    <Center
+      className={ className }
+      ref={ ref }
+      background={ isOpen ? infoBgColor : 'unset' }
+      borderRadius="8px"
+      w="24px"
+      h="24px"
+      onClick={ onClick }
+      cursor="pointer"
+    >
       <Icon
         as={ infoIcon }
         boxSize={ 5 }
@@ -24,4 +40,4 @@ const AdditionalInfoButton = ({ isOpen, onClick }: {isOpen?: boolean; onClick?:
   );
 };
 
-export default React.forwardRef(AdditionalInfoButton);
+export default chakra(React.forwardRef(AdditionalInfoButton));

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -13,13 +13,14 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
 import TokenSnippet from 'ui/shared/TokenSnippet';
+import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
 }
 
-const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAddress, showTxInfo }: Props) => {
+const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAddress, showTxInfo, type }: Props) => {
   const value = (() => {
     if (!('value' in total)) {
       return null;
@@ -31,10 +32,11 @@ const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAd
   const addressWidth = `calc((100% - ${ baseAddress ? '50px' : '0px' }) / 2)`;
   return (
     <AccountListItemMobile rowGap={ 3 }>
-      <Flex w="100%">
+      <Flex w="100%" flexWrap="wrap" rowGap={ 1 } position="relative">
         <TokenSnippet hash={ token.address } w="auto" maxW="calc(100% - 140px)" name={ token.name || 'Unnamed token' }/>
-        <Tag flexShrink={ 0 } ml={ 2 } mr="auto">{ token.type }</Tag>
-        { showTxInfo && <AdditionalInfoButton/> }
+        <Tag flexShrink={ 0 } ml={ 2 } mr={ 2 }>{ token.type }</Tag>
+        <Tag colorScheme="orange">{ getTokenTransferTypeText(type) }</Tag>
+        { showTxInfo && <AdditionalInfoButton position="absolute" top={ 0 } right={ 0 }/> }
       </Flex>
       { 'token_id' in total && (
         <Flex alignItems="center">

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -11,13 +11,14 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
 import TokenSnippet from 'ui/shared/TokenSnippet';
+import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
 }
 
-const TxInternalTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddress, showTxInfo }: Props) => {
+const TxInternalTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddress, showTxInfo, type }: Props) => {
   const value = (() => {
     if (!('value' in total)) {
       return '-';
@@ -36,7 +37,8 @@ const TxInternalTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddr
       <Td>
         <Flex flexDir="column" alignItems="flex-start">
           <TokenSnippet hash={ token.address } name={ token.name || 'Unnamed token' } lineHeight="30px"/>
-          <Tag>{ token.type }</Tag>
+          <Tag mt={ 1 }>{ token.type }</Tag>
+          <Tag colorScheme="orange" mt={ 2 }>{ getTokenTransferTypeText(type) }</Tag>
         </Flex>
       </Td>
       <Td lineHeight="30px">

ui/shared/TokenTransfer/helpers.ts

@@ -11,3 +11,16 @@ export const flattenTotal = (result: Array<TokenTransfer>, item: TokenTransfer):
 
   return result;
 };
+
+export const getTokenTransferTypeText = (type: TokenTransfer['type']) => {
+  switch (type) {
+    case 'token_minting':
+      return 'Token minting';
+    case 'token_burning':
+      return 'Token burning';
+    case 'token_spawning':
+      return 'Token creating';
+    case 'token_transfer':
+      return 'Token transfer';
+  }
+};