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,16 +65,18 @@ const TxDetailsWrapped = ({ data }: Props) => {
           flexWrap="wrap"
         />
       </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Transaction fee"
-        hint="Total transaction fee"
-      >
-        <CurrencyValue
-          value={ data.fee.value }
-          currency={ config.chain.currency.symbol }
-          flexWrap="wrap"
-        />
-      </DetailsInfoItem>
+      { data.fee.value !== null && (
+        <DetailsInfoItem
+          title="Transaction fee"
+          hint="Total transaction fee"
+        >
+          <CurrencyValue
+            value={ data.fee.value }
+            currency={ config.chain.currency.symbol }
+            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,20 +33,24 @@ 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 }>
-          <Text { ...sectionTitleProps }>Transaction fee</Text>
-          { tx.stability_fee ? (
-            <TxFeeStability data={ tx.stability_fee }/>
-          ) : (
-            <Flex>
-              <CurrencyValue
-                value={ tx.fee.value }
-                currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : config.chain.currency.symbol }
-                exchangeRate={ tx.exchange_rate }
-                accuracyUsd={ 2 }
-                flexWrap="wrap"
-                rowGap={ 0 }
-              />
-            </Flex>
+          { (tx.stability_fee !== undefined || tx.fee.value !== null) && (
+            <>
+              <Text { ...sectionTitleProps }>Transaction fee</Text>
+              { tx.stability_fee ? (
+                <TxFeeStability data={ tx.stability_fee }/>
+              ) : (
+                <Flex>
+                  <CurrencyValue
+                    value={ tx.fee.value }
+                    currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : config.chain.currency.symbol }
+                    exchangeRate={ tx.exchange_rate }
+                    accuracyUsd={ 2 }
+                    flexWrap="wrap"
+                    rowGap={ 0 }
+                  />
+                </Flex>
+              ) }
+            </>
           ) }
         </Box>
       ) }

ui/txs/TxsListItem.tsx

@@ -134,14 +134,18 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Flex mt={ 2 } mb={ 3 } columnGap={ 2 }>
-          <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() }
-              { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }
-            </Skeleton>
+          { (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 || 0).toFormat() }
+                  { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }
+                </Skeleton>
+              ) }
+            </>
           ) }
         </Flex>
       ) }

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>
       ) }