From 51c2ae73c14bb787c613ac8a4418db344eed0f26 Mon Sep 17 00:00:00 2001
From: isstuev <natix.naf@gmail.com>
Date: Thu, 7 Dec 2023 16:22:26 +0100
Subject: [PATCH] tx fee can be null

---
 lib/tx/sortTxs.ts                    |  4 ++--
 types/api/fee.ts                     |  2 +-
 ui/home/LatestTxsItem.tsx            |  2 +-
 ui/home/LatestTxsItemMobile.tsx      |  2 +-
 ui/tx/TxDetailsWrapped.tsx           | 22 ++++++++++---------
 ui/tx/details/TxDetailsFeePerGas.tsx |  4 ++--
 ui/txs/TxAdditionalInfoContent.tsx   | 32 ++++++++++++++++------------
 ui/txs/TxsListItem.tsx               | 20 ++++++++++-------
 ui/txs/TxsTableItem.tsx              |  3 ++-
 9 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/lib/tx/sortTxs.ts b/lib/tx/sortTxs.ts
index 776638afe7..4caf89332b 100644
--- a/lib/tx/sortTxs.ts
+++ b/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;
   }
diff --git a/types/api/fee.ts b/types/api/fee.ts
index aafda5a6ba..82ad5c5b8b 100644
--- a/types/api/fee.ts
+++ b/types/api/fee.ts
@@ -1,4 +1,4 @@
 export interface Fee {
   type: string;
-  value: string;
+  value: string | null;
 }
diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx
index 9d04d7ea25..994b7ccd05 100644
--- a/ui/home/LatestTxsItem.tsx
+++ b/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>
         ) }
diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx
index b6ced44217..454661554f 100644
--- a/ui/home/LatestTxsItemMobile.tsx
+++ b/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>
       ) }
diff --git a/ui/tx/TxDetailsWrapped.tsx b/ui/tx/TxDetailsWrapped.tsx
index 77cbdd2f9b..aba295159c 100644
--- a/ui/tx/TxDetailsWrapped.tsx
+++ b/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
diff --git a/ui/tx/details/TxDetailsFeePerGas.tsx b/ui/tx/details/TxDetailsFeePerGas.tsx
index f76736d40a..fa20c03906 100644
--- a/ui/tx/details/TxDetailsFeePerGas.tsx
+++ b/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;
   }
 
diff --git a/ui/txs/TxAdditionalInfoContent.tsx b/ui/txs/TxAdditionalInfoContent.tsx
index b9e2ed66f9..e16a768439 100644
--- a/ui/txs/TxAdditionalInfoContent.tsx
+++ b/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>
       ) }
diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx
index 4d1b72eb69..13f5319e8d 100644
--- a/ui/txs/TxsListItem.tsx
+++ b/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>
       ) }
diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx
index 42443476ef..46d720f3a1 100644
--- a/ui/txs/TxsTableItem.tsx
+++ b/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>
       ) }