Merge pull request #1402 from blockscout/fe-1387

tx fee can be null

lib/tx/sortTxs.ts

@@ -10,9 +10,9 @@ const sortTxs = (sorting?: Sort) => (tx1: Transaction, tx2: Transaction) => {
     case 'val-asc':
       return compareBns(tx2.value, tx1.value);
     case 'fee-desc':
-      return compareBns(tx1.fee.value, tx2.fee.value);
+      return compareBns(tx1.fee.value || 0, tx2.fee.value || 0);
     case 'fee-asc':
-      return compareBns(tx2.fee.value, tx1.fee.value);
+      return compareBns(tx2.fee.value || 0, tx1.fee.value || 0);
     default:
       return 0;
   }

types/api/fee.ts

 export interface Fee {
   type: string;
-  value: string;
+  value: string | null;
 }

ui/home/LatestTxsItem.tsx

@@ -118,7 +118,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
             { tx.stability_fee ? (
               <TxFeeStability data={ tx.stability_fee } accuracy={ 5 } color="text_secondary" hideUsd/>
             ) : (
-              <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
+              <Text as="span" variant="secondary">{ tx.fee.value ? getValueWithUnit(tx.fee.value).dp(5).toFormat() : '-' }</Text>
             ) }
           </Skeleton>
         ) }

ui/home/LatestTxsItemMobile.tsx

@@ -104,7 +104,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           { tx.stability_fee ? (
             <TxFeeStability data={ tx.stability_fee } accuracy={ 5 } color="text_secondary" hideUsd/>
           ) : (
-            <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
+            <Text as="span" variant="secondary">{ tx.fee.value ? getValueWithUnit(tx.fee.value).dp(5).toFormat() : '-' }</Text>
           ) }
         </Skeleton>
       ) }

ui/tx/TxDetailsWrapped.tsx

@@ -65,6 +65,7 @@ const TxDetailsWrapped = ({ data }: Props) => {
           flexWrap="wrap"
         />
       </DetailsInfoItem>
+      { data.fee.value !== null && (
         <DetailsInfoItem
           title="Transaction fee"
           hint="Total transaction fee"
@@ -75,6 +76,7 @@ const TxDetailsWrapped = ({ data }: Props) => {
             flexWrap="wrap"
           />
         </DetailsInfoItem>
+      ) }
       <TxDetailsGasPrice gasPrice={ data.gas_price }/>
       { data.gas_limit && (
         <DetailsInfoItem

ui/tx/details/TxDetailsFeePerGas.tsx

@@ -6,13 +6,13 @@ import config from 'configs/app';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
 interface Props {
-  txFee: string;
+  txFee: string | null;
   gasUsed: string | null;
   isLoading?: boolean;
 }
 
 const TxDetailsFeePerGas = ({ txFee, gasUsed, isLoading }: Props) => {
-  if (!config.UI.views.tx.additionalFields?.fee_per_gas || !gasUsed) {
+  if (!config.UI.views.tx.additionalFields?.fee_per_gas || !gasUsed || txFee === null) {
     return null;
   }
 

ui/txs/TxAdditionalInfoContent.tsx

@@ -33,6 +33,8 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
       <Heading as="h4" size="sm" mb={ 6 }>Additional info </Heading>
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Box { ...sectionProps } mb={ 4 }>
+          { (tx.stability_fee !== undefined || tx.fee.value !== null) && (
+            <>
               <Text { ...sectionTitleProps }>Transaction fee</Text>
               { tx.stability_fee ? (
                 <TxFeeStability data={ tx.stability_fee }/>
@@ -48,6 +50,8 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
                   />
                 </Flex>
               ) }
+            </>
+          ) }
         </Box>
       ) }
       { tx.gas_used !== null && (

ui/txs/TxsListItem.tsx

@@ -134,15 +134,19 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Flex mt={ 2 } mb={ 3 } columnGap={ 2 }>
+          { (tx.stability_fee !== undefined || tx.fee.value !== null) && (
+            <>
               <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Fee</Skeleton>
               { tx.stability_fee ? (
                 <TxFeeStability data={ tx.stability_fee } isLoading={ isLoading } hideUsd/>
               ) : (
                 <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary" whiteSpace="pre">
-              { getValueWithUnit(tx.fee.value).toFormat() }
+                  { getValueWithUnit(tx.fee.value || 0).toFormat() }
                   { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }
                 </Skeleton>
               ) }
+            </>
+          ) }
         </Flex>
       ) }
     </ListItemMobile>

ui/txs/TxsTableItem.tsx

@@ -164,10 +164,11 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Td isNumeric>
+          { /* eslint-disable-next-line no-nested-ternary */ }
           { tx.stability_fee ? (
             <TxFeeStability data={ tx.stability_fee } isLoading={ isLoading } accuracy={ 8 } justifyContent="end" hideUsd/>
           ) : (
-            <CurrencyValue value={ tx.fee.value } accuracy={ 8 } isLoading={ isLoading }/>
+            tx.fee.value ? <CurrencyValue value={ tx.fee.value } accuracy={ 8 } isLoading={ isLoading }/> : '-'
           ) }
         </Td>
       ) }