gas limit for internal transactions

types/api/internalTransaction.ts

@@ -10,10 +10,11 @@ export interface InternalTransaction {
   from: AddressParam;
   to: AddressParam;
   created_contract: AddressParam;
-  value: number;
+  value: string;
   index: number;
   block: number;
   timestamp: string;
+  gas_limit: string;
 }
 
 export interface InternalTransactionsResponse {

ui/tx/TxInternals.tsx

@@ -42,16 +42,15 @@ const sortFn = (sort: Sort | undefined) => (a: InternalTransaction, b: InternalT
       return a.value === b.value ? 0 : result;
     }
 
-    // no gas limit in api yet
-    // case 'gas-limit-desc': {
-    //   const result = a.gasLimit > b.gasLimit ? -1 : 1;
-    //   return a.gasLimit === b.gasLimit ? 0 : result;
-    // }
-
-    // case 'gas-limit-asc': {
-    //   const result = a.gasLimit > b.gasLimit ? 1 : -1;
-    //   return a.gasLimit === b.gasLimit ? 0 : result;
-    // }
+    case 'gas-limit-desc': {
+      const result = a.gas_limit > b.gas_limit ? -1 : 1;
+      return a.gas_limit === b.gas_limit ? 0 : result;
+    }
+
+    case 'gas-limit-asc': {
+      const result = a.gas_limit > b.gas_limit ? 1 : -1;
+      return a.gas_limit === b.gas_limit ? 0 : result;
+    }
 
     default:
       return 0;

ui/tx/internals/TxInternalsListItem.tsx

 import { Flex, Tag, Icon, Box, HStack, Text } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
@@ -14,7 +15,7 @@ import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction;
 
-const TxInternalsListItem = ({ type, from, to, value, success, error }: Props) => {
+const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit: gasLimit }: Props) => {
   const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
 
   return (
@@ -38,11 +39,10 @@ const TxInternalsListItem = ({ type, from, to, value, success, error }: Props) =
         <Text fontSize="sm" fontWeight={ 500 }>Value { appConfig.network.currency }</Text>
         <Text fontSize="sm" variant="secondary">{ value }</Text>
       </HStack>
-      { /* no gas limit in api yet */ }
-      { /* <HStack spacing={ 3 }>
+      <HStack spacing={ 3 }>
         <Text fontSize="sm" fontWeight={ 500 }>Gas limit</Text>
-        <Text fontSize="sm" variant="secondary">{ gasLimit.toLocaleString('en') }</Text>
-      </HStack> */ }
+        <Text fontSize="sm" variant="secondary">{ BigNumber(gasLimit).toFormat() }</Text>
+      </HStack>
     </AccountListItemMobile>
   );
 };

ui/tx/internals/TxInternalsSkeletonDesktop.tsx

@@ -10,7 +10,7 @@ const TxInternalsSkeletonDesktop = () => {
         <Skeleton w="78px"/>
         <Skeleton w="360px"/>
       </Flex>
-      <SkeletonTable columns={ [ '28%', '28%', '24px', '28%', '16%' ] }/>
+      <SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/>
     </>
   );
 };

ui/tx/internals/TxInternalsSkeletonMobile.tsx

@@ -38,6 +38,10 @@ const TxInternalsSkeletonMobile = () => {
               <Skeleton w="70px" mr={ 2 }/>
               <Skeleton w="30px"/>
             </Flex>
+            <Flex h={ 6 }>
+              <Skeleton w="70px" mr={ 2 }/>
+              <Skeleton w="60px"/>
+            </Flex>
           </Flex>
         )) }
       </Box>

ui/tx/internals/TxInternalsTable.tsx

@@ -23,22 +23,21 @@ const TxInternalsTable = ({ data, sort, onSortToggle }: Props) => {
         <Thead>
           <Tr>
             <Th width="28%">Type</Th>
-            <Th width="28%">From</Th>
+            <Th width="20%">From</Th>
             <Th width="24px" px={ 0 }/>
-            <Th width="28%">To</Th>
+            <Th width="20%">To</Th>
             <Th width="16%" isNumeric>
               <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('value') } columnGap={ 1 }>
                 { sort?.includes('value') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> }
                 Value { appConfig.network.currency }
               </Link>
             </Th>
-            { /* no gas limit in api yet */ }
-            { /* <Th width="16%" isNumeric>
+            <Th width="16%" isNumeric>
               <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('gas-limit') } columnGap={ 1 }>
                 { sort?.includes('gas-limit') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> }
-                Gas limit
+                Gas limit { appConfig.network.currency }
               </Link>
-            </Th> */ }
+            </Th>
           </Tr>
         </Thead>
         <Tbody>

ui/tx/internals/TxInternalsTableItem.tsx

 import { Tr, Td, Tag, Icon, Box } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
@@ -12,7 +13,7 @@ import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction
 
-const TxInternalTableItem = ({ type, from, to, value, success, error }: Props) => {
+const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit: gasLimit }: Props) => {
   const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
 
   return (
@@ -43,10 +44,9 @@ const TxInternalTableItem = ({ type, from, to, value, success, error }: Props) =
       <Td isNumeric verticalAlign="middle">
         { value }
       </Td>
-      { /* no gas limit in api yet */ }
-      { /* <Td isNumeric verticalAlign='middle'>
-        { gasLimit.toLocaleString('en') }
-      </Td> */ }
+      <Td isNumeric verticalAlign="middle">
+        { BigNumber(gasLimit).toFormat() }
+      </Td>
     </Tr>
   );
 };