Fix fees not showing in transaction details (#1313)

* Add outgoing transaction fees in transaction details

* Convert fee from wei only when showing extended transaction

* Fix incoming transactions fee value to display correct value

* Add ETH symbol to fee on details

src/logic/contracts/generateBatchRequests.ts

@@ -40,6 +40,7 @@ const generateBatchRequests = ({ abi, address, batch, context, methods }: any):
           request = contractInstance.methods[method](...args).call.request(resolver)
         }
 
+        // If batch was provided add to external batch
         batch ? batch.add(request) : localBatch.add(request)
       } catch (e) {
         resolve(null)
@@ -47,6 +48,10 @@ const generateBatchRequests = ({ abi, address, batch, context, methods }: any):
     })
   })
 
+  // TODO fix this so all batch.execute() are handled here
+  // If batch was created locally we can already execute it
+  // If batch was provided we should execute once we finish to generate the batch,
+  // in the outside function where the batch object is created.
   !batch && localBatch.execute()
 
   const returnValues = context ? [context, ...values] : values

src/logic/safe/store/actions/transactions/fetchTransactions/loadIncomingTransactions.ts

@@ -45,7 +45,12 @@ const batchIncomingTxsTokenDataRequest = (txs: IncomingTxServiceModel[]) => {
   const batch = new web3ReadOnly.BatchRequest()
 
   const whenTxsValues = txs.map((tx) => {
-    const methods = ['symbol', 'decimals', { method: 'getTransaction', args: [tx.transactionHash], type: 'eth' }]
+    const methods = [
+      'symbol',
+      'decimals',
+      { method: 'getTransaction', args: [tx.transactionHash], type: 'eth' },
+      { method: 'getTransactionReceipt', args: [tx.transactionHash], type: 'eth' },
+    ]
 
     return generateBatchRequests({
       abi: ALTERNATIVE_TOKEN_ABI,
@@ -59,11 +64,11 @@ const batchIncomingTxsTokenDataRequest = (txs: IncomingTxServiceModel[]) => {
   batch.execute()
 
   return Promise.all(whenTxsValues).then((txsValues) =>
-    txsValues.map(([tx, symbol, decimals, { gas, gasPrice }]) => [
+    txsValues.map(([tx, symbol, decimals, { gasPrice }, { gasUsed }]) => [
       tx,
       symbol === null ? 'ETH' : symbol,
       decimals === null ? '18' : decimals,
-      new bn(gas).div(gasPrice).toFixed(),
+      new bn(gasPrice).times(gasUsed),
     ]),
   )
 }

src/logic/safe/store/actions/transactions/utils/transactionHelpers.ts

@@ -282,6 +282,7 @@ export const buildTx = async ({
     executionDate: tx.executionDate,
     executionTxHash: tx.transactionHash,
     executor: tx.executor,
+    fee: tx.fee,
     gasPrice: tx.gasPrice,
     gasToken: tx.gasToken || ZERO_ADDRESS,
     isCancellationTx,

src/logic/safe/transactions/incomingTxHistory.ts

@@ -1,7 +1,7 @@
 import { getIncomingTxServiceUriTo, getTxServiceHost } from 'src/config'
 import { checksumAddress } from 'src/utils/checksumAddress'
 
-export const buildIncomingTxServiceUrl = (safeAddress) => {
+export const buildIncomingTxServiceUrl = (safeAddress: string): string => {
   const host = getTxServiceHost()
   const address = checksumAddress(safeAddress)
   const base = getIncomingTxServiceUriTo(address)

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx

@@ -21,6 +21,7 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import Span from 'src/components/layout/Span'
+import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import { INCOMING_TX_TYPES } from 'src/logic/safe/store/models/incomingTransaction'
 import { safeNonceSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { Transaction, TransactionTypes } from 'src/logic/safe/store/models/types/transaction'
@@ -34,6 +35,8 @@ interface ExpandedTxProps {
 }
 
 const ExpandedTx = ({ cancelTx, tx }: ExpandedTxProps): React.ReactElement => {
+  const { fromWei, toBN } = getWeb3().utils
+
   const classes = useStyles()
   const nonce = useSelector(safeNonceSelector)
   const threshold = useSelector(safeThresholdSelector) as number
@@ -85,7 +88,7 @@ const ExpandedTx = ({ cancelTx, tx }: ExpandedTxProps): React.ReactElement => {
               {!isCreationTx ? (
                 <Paragraph noMargin>
                   <Bold>Fee: </Bold>
-                  {tx.fee ? tx.fee : 'n/a'}
+                  {tx.fee ? fromWei(toBN(tx.fee)) + ' ETH' : 'n/a'}
                 </Paragraph>
               ) : null}
               <CreationTx tx={tx} />