tx type fix

ui/txs/TxType.tsx

@@ -4,14 +4,18 @@ import React from 'react';
 import type { TransactionType } from 'types/api/transaction';
 
 export interface Props {
-  type: TransactionType;
+  types: Array<TransactionType>;
 }
 
-const TxStatus = ({ type }: Props) => {
+const TYPES_ORDER = [ 'token_creation', 'contract_creation', 'token_transfer', 'contract_call', 'coin_transfer' ];
+
+const TxType = ({ types }: Props) => {
+  const typeToShow = types.sort((t1, t2) => TYPES_ORDER.indexOf(t1) - TYPES_ORDER.indexOf(t2))[0];
+
   let label;
   let colorScheme;
 
-  switch (type) {
+  switch (typeToShow) {
     case 'contract_call':
       label = 'Contract call';
       colorScheme = 'blue';
@@ -41,4 +45,4 @@ const TxStatus = ({ type }: Props) => {
   );
 };
 
-export default TxStatus;
+export default TxType;

ui/txs/TxsListItem.tsx

@@ -40,7 +40,7 @@ const TxsListItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: boo
       <Box width="100%" borderBottom="1px solid" borderColor={ borderColor } _first={{ borderTop: '1px solid', borderColor }}>
         <Flex justifyContent="space-between" mt={ 4 }>
           <HStack>
-            { tx.tx_types.map(item => <TxType key={ item } type={ item }/>) }
+            <TxType types={ tx.tx_types }/>
             <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
           </HStack>
           <AdditionalInfoButton onClick={ onOpen }/>

ui/txs/TxsTableItem.tsx

@@ -76,7 +76,7 @@ const TxsTableItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: bo
       </Td>
       <Td>
         <VStack alignItems="start">
-          { tx.tx_types.map(item => <TxType key={ item } type={ item }/>) }
+          <TxType types={ tx.tx_types }/>
           <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
         </VStack>
       </Td>