add new fields

types/api/transaction.ts

@@ -38,6 +38,8 @@ export interface Transaction {
   token_transfers: Array<TokenTransfer> | null;
   token_transfers_overflow: boolean;
   exchange_rate: string;
+  method: string;
+  tx_types: Array<TransactionType>;
   tx_tag: string | null;
 }
 
@@ -49,3 +51,5 @@ export interface TransactionsResponse {
     items_count: number;
   } | null;
 }
+
+export type TransactionType = 'token_transfer' | 'contract_creation' | 'contract_call' | 'token_creation' | 'coin_transfer'

ui/txs/TxType.tsx

 import { Tag } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TransactionType } from 'types/api/transaction';
+
 export interface Props {
-  type: 'contract-call' | 'transaction' | 'token-transfer' | 'internal-tx' | 'multicall';
+  type: TransactionType;
 }
 
 const TxStatus = ({ type }: Props) => {
@@ -10,24 +12,24 @@ const TxStatus = ({ type }: Props) => {
   let colorScheme;
 
   switch (type) {
-    case 'contract-call':
+    case 'contract_call':
       label = 'Contract call';
       colorScheme = 'blue';
       break;
-    case 'transaction':
-      label = 'Transaction';
+    case 'contract_creation':
+      label = 'Contract creation';
       colorScheme = 'purple';
       break;
-    case 'token-transfer':
+    case 'token_transfer':
       label = 'Token transfer';
       colorScheme = 'orange';
       break;
-    case 'internal-tx':
-      label = 'Internal txn';
+    case 'token_creation':
+      label = 'Token creation';
       colorScheme = 'cyan';
       break;
-    case 'multicall':
-      label = 'Multicall';
+    case 'coin_transfer':
+      label = 'Coin transfer';
       colorScheme = 'teal';
       break;
   }

ui/txs/TxsListItem.tsx

@@ -39,9 +39,7 @@ const TxsListItem = ({ tx }: {tx: Transaction}) => {
       <Box width="100%" borderBottom="1px solid" borderColor={ borderColor } _first={{ borderTop: '1px solid', borderColor }}>
         <Flex justifyContent="space-between" mt={ 4 }>
           <HStack>
-            { /* TODO: we don't recieve type from api */ }
-            { /* <TxType type={ tx.type }/> */ }
-            <TxType type="transaction"/>
+            { tx.tx_types.map(item => <TxType key={ item } type={ item }/>) }
             <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
           </HStack>
           <TxAdditionalInfoButton onClick={ onOpen }/>
@@ -68,7 +66,6 @@ const TxsListItem = ({ tx }: {tx: Transaction}) => {
         </Flex>
         <Flex mt={ 3 }>
           <Text as="span" whiteSpace="pre">Method </Text>
-          { /* TODO: we don't recieve method from api */ }
           <Text
             as="span"
             variant="secondary"
@@ -76,8 +73,7 @@ const TxsListItem = ({ tx }: {tx: Transaction}) => {
             whiteSpace="nowrap"
             textOverflow="ellipsis"
           >
-            { /* { tx.method } */ }
-            CommitHash
+            { tx.method }
           </Text>
         </Flex>
         { tx.block !== null && (

ui/txs/TxsTableItem.tsx

@@ -73,9 +73,7 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
       </Td>
       <Td>
         <VStack alignItems="start">
-          { /* TODO: we don't recieve type from api */ }
-          { /* <TxType type={ tx.type }/> */ }
-          <TxType type="transaction"/>
+          { tx.tx_types.map(item => <TxType key={ item } type={ item }/>) }
           <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
         </VStack>
       </Td>
@@ -93,20 +91,12 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
         </VStack>
       </Td>
       <Td>
-        { /* TODO: we don't recieve method from api */ }
-        { /* <TruncatedTextTooltip label={ tx.method }>
+        <TruncatedTextTooltip label={ tx.method }>
           <Tag
             colorScheme={ tx.method === 'Multicall' ? 'teal' : 'gray' }
           >
             { tx.method }
           </Tag>
-        </TruncatedTextTooltip> */ }
-        <TruncatedTextTooltip label="CommitHash">
-          <Tag
-            colorScheme="gray"
-          >
-            CommitHash
-          </Tag>
         </TruncatedTextTooltip>
       </Td>
       <Td>