markup fixes

ui/tx/details/TxDetailsTokenTransfer.tsx

@@ -15,18 +15,17 @@ type Props = TTokenTransfer;
 const TxDetailsTokenTransfer = ({ token, total, to, from }: Props) => {
 
   const isColumnLayout = token.type === 'ERC-1155' && Array.isArray(total);
-  const tokenSnippet = <TokenSnippet symbol={ token.symbol } hash={ token.address } name={ token.name } ml={ 3 }/>;
 
   const content = (() => {
     switch (token.type) {
       case 'ERC-20': {
         const payload = total as Erc20TotalPayload;
         return (
-          <Flex>
+          <Flex flexWrap="wrap" columnGap={ 3 } rowGap={ 2 }>
             <Text fontWeight={ 500 } as="span">For:{ space }
               <CurrencyValue value={ payload.value } exchangeRate={ token.exchange_rate } fontWeight={ 600 }/>
             </Text>
-            { tokenSnippet }
+            <TokenSnippet symbol={ token.symbol } hash={ token.address } name={ token.name } w="auto" flexGrow="1"/>
           </Flex>
         );
       }

ui/tx/details/TxDetailsTokenTransferList.tsx

 import { Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import type { TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer';
+import type { TokenTransfer } from 'types/api/tokenTransfer';
 
-import TokenTransfer from './TxDetailsTokenTransfer';
+import TxDetailsTokenTransfer from './TxDetailsTokenTransfer';
 
 interface Props {
-  items: Array<TTokenTransfer>;
+  items: Array<TokenTransfer>;
 }
 
-function getItemsNum(items: Array<TTokenTransfer>) {
+function getItemsNum(items: Array<TokenTransfer>) {
   const nonErc1155items = items.filter((item) => item.token.type !== 'ERC-1155').length;
   const erc1155items = items
     .filter((item) => item.token.type === 'ERC-1155')
@@ -52,7 +52,7 @@ const TxDetailsTokenTransferList = ({ items }: Props) => {
       pr={ hasScroll ? 5 : 0 }
       pb={ hasScroll ? 10 : 0 }
     >
-      { items.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
+      { items.map((item, index) => <TxDetailsTokenTransfer key={ index } { ...item }/>) }
     </Flex>
   );
 };

ui/tx/details/TxDetailsTokenTransfers.tsx

@@ -38,7 +38,7 @@ const TxDetailsTokenTransfers = ({ data, txHash }: Props) => {
             title={ (
               <>
                 <Text as="span">{ title }</Text>
-                { items.length > 1 && <Text as="span" whiteSpace="pre" variant="secondary"> ({ items.length })</Text> }
+                <Text as="span" whiteSpace="pre" variant="secondary"> ({ items.length })</Text>
               </>
             ) }
             hint={ hint }