Merge pull request #722 from Adamant-im/fix/usdt-tx-fee

fix: display fee in ETH

Author: bludnic

src/components/transactions/Erc20Transaction.vue

@@ -12,12 +12,13 @@
     :inconsistent-status="inconsistentStatus"
     :adm-tx="admTx"
     :crypto="crypto"
+    :feeCrypto="AllCryptos.ETH"
     @refetch-status="refetch"
   />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import { useStore } from 'vuex'
 import TransactionTemplate from './TransactionTemplate.vue'
 import { getExplorerTxUrl } from '@/config/utils'
@@ -32,93 +33,66 @@ import { useErc20TransactionQuery } from '@/hooks/queries/transaction'
 import { useClearPendingTransaction } from './hooks/useClearPendingTransaction'
 import { getPartnerAddress } from './utils/getPartnerAddress'
 
-export default defineComponent({
-  name: 'Erc20Transaction',
-  components: {
-    TransactionTemplate
+const props = defineProps({
+  crypto: {
+    required: true,
+    type: String as PropType<CryptoSymbol>
   },
-  props: {
-    crypto: {
-      required: true,
-      type: String as PropType<CryptoSymbol>
-    },
-    id: {
-      required: true,
-      type: String
-    }
-  },
-  setup(props) {
-    const store = useStore()
-
-    const cryptoAddress = computed(() => store.state.eth.address)
+  id: {
+    required: true,
+    type: String
+  }
+})
 
-    const {
-      status: queryStatus,
-      isFetching,
-      data: transaction,
-      refetch
-    } = useErc20TransactionQuery(props.crypto)(props.id)
-    const inconsistentStatus = useInconsistentStatus(transaction, props.crypto)
-    const transactionStatus = useTransactionStatus(isFetching, queryStatus, inconsistentStatus)
-    useClearPendingTransaction(props.crypto, transaction)
+const store = useStore()
 
-    const admTx = useFindAdmTransaction(props.id)
-    const senderAdmAddress = computed(() => admTx.value?.senderId || '')
-    const recipientAdmAddress = computed(() => admTx.value?.recipientId || '')
-    const partnerAdmAddress = computed(() =>
-      admTx.value
-        ? getPartnerAddress(admTx.value?.senderId, admTx.value?.recipientId, cryptoAddress.value)
-        : ''
-    )
+const cryptoAddress = computed(() => store.state.eth.address)
 
-    const senderFormatted = useCryptoAddressPretty(
-      transaction,
-      cryptoAddress,
-      senderAdmAddress,
-      'sender'
-    )
-    const recipientFormatted = useCryptoAddressPretty(
-      transaction,
-      cryptoAddress,
-      recipientAdmAddress,
-      'recipient'
-    )
+const {
+  status: queryStatus,
+  isFetching,
+  data: transaction,
+  refetch
+} = useErc20TransactionQuery(props.crypto)(props.id)
+const inconsistentStatus = useInconsistentStatus(transaction, props.crypto)
+const transactionStatus = useTransactionStatus(isFetching, queryStatus, inconsistentStatus)
+useClearPendingTransaction(props.crypto, transaction)
 
-    const explorerLink = computed(() => getExplorerTxUrl(Cryptos.ETH, props.id))
-    const blockHeight = useBlockHeight('ETH', {
-      enabled: () => transactionStatus.value === 'CONFIRMED'
-    })
-    const confirmations = computed(() => {
-      if (!blockHeight.value || !transaction.value) return NaN
+const admTx = useFindAdmTransaction(props.id)
+const senderAdmAddress = computed(() => admTx.value?.senderId || '')
+const recipientAdmAddress = computed(() => admTx.value?.recipientId || '')
+const partnerAdmAddress = computed(() =>
+  admTx.value
+    ? getPartnerAddress(admTx.value?.senderId, admTx.value?.recipientId, cryptoAddress.value)
+    : ''
+)
 
-      if ('blockNumber' in transaction.value && transaction.value.blockNumber) {
-        return blockHeight.value - transaction.value.blockNumber + 1
-      }
+const senderFormatted = useCryptoAddressPretty(
+  transaction,
+  cryptoAddress,
+  senderAdmAddress,
+  'sender'
+)
+const recipientFormatted = useCryptoAddressPretty(
+  transaction,
+  cryptoAddress,
+  recipientAdmAddress,
+  'recipient'
+)
 
-      return transaction.value?.confirmations
-    })
-    const fee = computed(() => {
-      const ethFee = transaction.value?.fee || 0
-      const currentCurrency = store.state.options.currentRate
-      const currentRate = store.state.rate.rates[`${AllCryptos.ETH}/${currentCurrency}`]
-      const feeRate = (ethFee * currentRate).toFixed(2)
-      return +feeRate
-    })
+const explorerLink = computed(() => getExplorerTxUrl(Cryptos.ETH, props.id))
+const blockHeight = useBlockHeight('ETH', {
+  enabled: () => transactionStatus.value === 'CONFIRMED'
+})
+const confirmations = computed(() => {
+  if (!blockHeight.value || !transaction.value) return NaN
 
-    return {
-      refetch,
-      transaction,
-      fee,
-      senderFormatted,
-      recipientFormatted,
-      partnerAdmAddress,
-      explorerLink,
-      confirmations,
-      admTx,
-      queryStatus,
-      transactionStatus,
-      inconsistentStatus
-    }
+  if ('blockNumber' in transaction.value && transaction.value.blockNumber) {
+    return blockHeight.value - transaction.value.blockNumber + 1
   }
+
+  return transaction.value?.confirmations
 })
+
+const fee = computed(() => transaction.value?.fee)
 </script>

src/components/transactions/TransactionTemplate.vue

@@ -83,7 +83,7 @@
         <v-divider />
 
         <TransactionListItem :title="t('transaction.commission')">
-          {{ typeof fee === 'number' ? formatAmount(fee) + ` ${crypto}` : placeholder }}
+          {{ typeof fee === 'number' ? formatAmount(fee) + ` ${feeCrypto ?? crypto}` : placeholder }}
         </TransactionListItem>
 
         <v-divider />
@@ -236,7 +236,10 @@ export default defineComponent({
     },
     recipientFormatted: {
       type: String
-    }
+    },
+    feeCrypto: {
+      type: String
+    },
   },
   emits: ['refetch-status'],
   setup(props, { emit }) {

src/lib/nodes/eth/utils.ts

@@ -65,7 +65,9 @@ export function normalizeErc20Transaction(
 ): Erc20Transaction {
   const gasPrice = 'gasPrice' in transaction ? transaction.gasPrice : 0
   const effectiveGasPrice = 'effectiveGasPrice' in transaction ? transaction.effectiveGasPrice : 0
-  const fee = utils.calculateFee(transaction.gas, gasPrice.toString())
+  const gasUsed = receipt && 'gasUsed' in receipt ? receipt.gasUsed : 0
+
+  const fee = utils.calculateFee(gasUsed.toString(), gasPrice.toString())
   const direction = transaction.from.toLowerCase() === address.toLowerCase() ? 'from' : 'to'
   const confirmations =
     blockTimestamp && receipt?.blockNumber