feat: improve the summary of parent CONTRACTCALL transactions (#1887)

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>

Author: svienot

src/components/transaction/TransactionAnalyzer.ts

@@ -61,6 +61,16 @@ export class TransactionAnalyzer {
             ? computeNetAmount(this.transaction.value?.transfers, this.transaction.value?.charged_tx_fee)
             : 0)
 
+    public readonly hasRewardTransfers: ComputedRef<boolean> = computed(() =>
+        this.transaction.value ? this.transaction.value.staking_reward_transfers.length >= 1 : false
+    )
+    public readonly hasNftTransfers: ComputedRef<boolean> = computed(() =>
+        this.transaction.value ? this.transaction.value.nft_transfers.length >= 1 : false
+    )
+    public readonly hasTokenTransfers: ComputedRef<boolean> = computed(() =>
+        this.transaction.value ? this.transaction.value.token_transfers.length >= 1 : false
+    )
+
     public readonly operatorAccount: ComputedRef<string | null> = computed(() =>
         this.transaction.value ? makeOperatorAccountLabel(this.transaction.value) : null
     )

src/components/transaction/TransactionSummary.vue

@@ -7,7 +7,7 @@
 <template>
   <template v-if="transaction">
     <TransferGraphSection v-if="shouldGraph"
-                          v-bind:transaction="transactionDetail"
+                          v-bind:analyzer="transactionAnalyzer"
                           v-bind:compact="true"/>
     <div v-else-if="isTokenAssociation">
       {{ transaction?.entity_id }}
@@ -56,7 +56,16 @@ const props = defineProps({
 })
 
 const shouldGraph = computed(() => {
-  return props.transaction?.name && GRAPH_TRANSACTION_TYPES.indexOf(props.transaction.name) != -1
+  let result: boolean
+  if (props.transaction?.name) {
+    const alwaysGraph = GRAPH_TRANSACTION_TYPES.indexOf(props.transaction.name) != -1
+    const contractCallWithTransfer = props.transaction.name === TransactionType.CONTRACTCALL
+        && (netAmount.value > 0 || hasTokenTransfers.value || hasNftTransfers.value)
+    result = alwaysGraph || contractCallWithTransfer
+  } else {
+    result = false
+  }
+  return result
 })
 
 const transactionAnalyzer = new TransactionAnalyzer(computed(() => props.transaction ?? null))
@@ -82,6 +91,9 @@ const transactionDetail = computed(() => {
   return props.transaction as TransactionDetail | undefined
 })
 
+const netAmount = transactionAnalyzer.netAmount
+const hasTokenTransfers = transactionAnalyzer.hasTokenTransfers
+const hasNftTransfers = transactionAnalyzer.hasNftTransfers
 const isTokenAssociation = transactionAnalyzer.isTokenAssociation
 const isEthereumTransaction = transactionAnalyzer.isEthereumTransaction
 const tokens = transactionAnalyzer.tokens

src/components/transfer_graphs/TransferGraphSection.vue

@@ -10,38 +10,38 @@
     <HbarTransferGraphC
         v-if="netAmount > 0"
         data-cy="hbarTransfers"
-        v-bind:transaction="transaction"/>
+        v-bind:transaction="transaction ?? undefined"/>
   </template>
   <template v-else>
     <HbarTransferGraphF
         data-cy="hbarTransfers"
         title="Hbar Transfers"
         v-bind:class="{'mb-4': displayRewardTransfers || displayNftTransfers || displayTokenTransfers}"
-        v-bind:transaction="transaction"/>
+        v-bind:transaction="transaction ?? undefined"/>
   </template>
 
   <NftTransferGraph
       data-cy="nftTransfers"
       v-bind:class="{'mb-4': !compact && (displayTokenTransfers || displayRewardTransfers)}"
-      v-bind:transaction="transaction"
+      v-bind:transaction="transaction ?? undefined"
       v-bind:compact="compact"/>
 
   <template v-if="compact">
     <TokenTransferGraphC
         data-cy="tokenTransfers"
-        v-bind:transaction="transaction"/>
+        v-bind:transaction="transaction ?? undefined"/>
   </template>
   <template v-else>
     <TokenTransferGraphF
         data-cy="tokenTransfers"
         v-bind:class="{'mb-4': displayRewardTransfers}"
-        v-bind:transaction="transaction"/>
+        v-bind:transaction="transaction ?? undefined"/>
   </template>
 
   <template v-if="!compact">
     <RewardTransferGraph
         data-cy="rewardTransfers"
-        v-bind:transaction="transaction"/>
+        v-bind:transaction="transaction ?? undefined"/>
   </template>
 
 </template>
@@ -52,31 +52,32 @@
 
 <script setup lang="ts">
 
-import {computed, PropType} from "vue";
+import {PropType, Ref} from "vue";
 import {TransactionDetail} from "@/schemas/MirrorNodeSchemas";
 import HbarTransferGraphC from "@/components/transfer_graphs/HbarTransferGraphC.vue";
 import HbarTransferGraphF from "@/components/transfer_graphs/HbarTransferGraphF.vue";
 import NftTransferGraph from "@/components/transfer_graphs/NftTransferGraph.vue";
 import TokenTransferGraphC from "@/components/transfer_graphs/TokenTransferGraphC.vue";
 import TokenTransferGraphF from "@/components/transfer_graphs/TokenTransferGraphF.vue";
-import {computeNetAmount} from "@/utils/TransactionTools";
 import RewardTransferGraph from "@/components/transfer_graphs/RewardTransferGraph.vue";
+import {TransactionAnalyzer} from "@/components/transaction/TransactionAnalyzer.ts";
 
 const props = defineProps({
-  transaction: Object as PropType<TransactionDetail>,
+  analyzer: {
+    type: Object as PropType<TransactionAnalyzer>,
+    required: true
+  },
   compact: {
     type: Boolean,
     default: false
   }
 })
 
-const netAmount = computed(() => {
-  return props.transaction ? computeNetAmount(props.transaction.transfers, props.transaction.charged_tx_fee) : 0
-})
-
-const displayRewardTransfers = computed(() => props.transaction?.staking_reward_transfers && props.transaction?.staking_reward_transfers.length >= 1)
-const displayNftTransfers = computed(() => props.transaction?.nft_transfers && props.transaction?.nft_transfers.length >= 1)
-const displayTokenTransfers = computed(() => props.transaction?.token_transfers && props.transaction?.token_transfers.length >= 1)
+const transaction = props.analyzer.transaction as Ref<TransactionDetail | null>
+const netAmount = props.analyzer.netAmount
+const displayRewardTransfers = props.analyzer.hasRewardTransfers
+const displayNftTransfers = props.analyzer.hasNftTransfers
+const displayTokenTransfers = props.analyzer.hasTokenTransfers
 
 </script>
 

src/pages/TransactionDetails.vue

@@ -281,7 +281,7 @@
       </template>
       <template #content>
         <div>
-          <TransferGraphSection :transaction="transaction ?? undefined"/>
+          <TransferGraphSection :analyzer="transactionAnalyzer ?? undefined"/>
         </div>
       </template>
     </DashboardCardV2>

tests/unit/Mocks.ts

@@ -2011,10 +2011,6 @@ export const SAMPLE_BATCH_TRANSACTION: TransactionResponse = {
     }
 }
 
-//
-// https://mainnet-public.mirrornode.hedera.com/api/v1/transactions/0.0.48113503-1662470948-432078184
-//
-
 export const SAMPLE_PARENT_CHILD_TRANSACTIONS: TransactionResponse = {
     "transactions":
         [{
@@ -2035,11 +2031,11 @@ export const SAMPLE_PARENT_CHILD_TRANSACTIONS: TransactionResponse = {
             "token_transfers": [],
             "transaction_hash": "jthcv17LsslWUAzQkuIzeVMFpwJ3Uf5g6sSp1aZ8qqSWTz52XhPaMGAzt/5UgYob",
             "transaction_id": "0.0.48113503-1662470948-432078184",
-            "transfers": [{"account": "0.0.98", "amount": 160800000, "is_approval": false}, {
-                "account": "0.0.48113503",
-                "amount": -5160800000,
-                "is_approval": false
-            }, {"account": "0.0.48193749", "amount": 5000000000, "is_approval": false}],
+            "transfers": [
+                {"account": "0.0.98", "amount": 160800000, "is_approval": false},
+                {"account": "0.0.48113503", "amount": -5160800000, "is_approval": false},
+                {"account": "0.0.48193749", "amount": 5000000000, "is_approval": false}
+            ],
             "valid_duration_seconds": "120",
             "valid_start_timestamp": "1662470948.432078184"
         }, {

tests/unit/transaction/TransactionByIdTable.spec.ts

@@ -52,9 +52,9 @@ describe("TransactionByIdTable.vue", () => {
 
         expect(wrapper.find('thead').text()).toBe("Time Type Content Relationship Nonce".toUpperCase())
         expect(wrapper.find('tbody').text()).toBe(
-            "1:29:17.0144 PMSep 6, 2022, UTCCONTRACT CALLContract ID: 0.0.48193749Parent0" +
-            "1:29:17.0144 PMSep 6, 2022, UTCTOKEN MINTMINT\n\n0.0.48193741RSSE\n\n0.0.48113503Child1" +
-            "1:29:17.0144 PMSep 6, 2022, UTCCRYPTO TRANSFER0.0.48113503\n\n0.0.48193741RSSE\n\n0.0.48193739Child2"
+            "1:29:17.0144 PMSep 6, 2022, UTC" + "CONTRACT CALL" + "0.0.48113503\n\n" + "50.00000000ℏ\n\n" + "0.0.48193749" + "Parent" + "0" +
+            "1:29:17.0144 PMSep 6, 2022, UTC" + "TOKEN MINT" + "MINT\n\n" + "0.0.48193741" + "RSSE\n\n" + "0.0.48113503" + "Child" + "1" +
+            "1:29:17.0144 PMSep 6, 2022, UTC" + "CRYPTO TRANSFER" + "0.0.48113503\n\n" + "0.0.48193741" + "RSSE\n\n" + "0.0.48193739" + "Child" + "2"
         )
 
         mock.restore()