00529 rewards subsection

src/components/contract/ContractTransactionTable.vue

@@ -60,7 +60,7 @@
 
     <o-table-column field="transfers" label="Net Amount" v-slot="props">
       <span v-if="showPositiveNetAmount(props.row) > 0">
-        <HbarAmount v-bind:amount="computeNetAmount(props.row)"/>
+        <HbarAmount v-bind:amount="computeNetAmount(props.row.transfers, props.row.charged_tx_fee)"/>
       </span>
     </o-table-column>
 

src/components/transaction/TransactionAnalyzer.ts

@@ -69,7 +69,9 @@
     public readonly hasSucceeded: ComputedRef<boolean> = computed(() => this.result.value == "SUCCESS")
 
     public readonly netAmount: ComputedRef<number> = computed(
-        () => this.transaction.value !== null ? computeNetAmount(this.transaction.value) : 0)
+        () => this.transaction.value !== null
+            ? computeNetAmount(this.transaction.value?.transfers, this.transaction.value?.charged_tx_fee)
+            : 0)
 
     public readonly maxFee: ComputedRef<number> = computed(() => {
         const result = this.transaction.value?.max_fee ? Number.parseFloat(this.transaction.value?.max_fee) : 0

src/components/transfer_graphs/HbarTransferGraphF.vue

@@ -23,11 +23,8 @@
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
 <template>
-  <div>
-  <p class="h-is-tertiary-text mb-2">{{ title }}</p>
-
-  <div  v-if="hbarTransferLayout.rowCount >= 1">
-
+  <div v-if="hbarTransferLayout.rowCount >= 1">
+    <p class="h-is-tertiary-text mb-2">{{ title }}</p>
     <div class="graph-container" v-bind:class="{'graph-container-8': dollarVisible }">
 
       <template v-if="dollarVisible">
@@ -69,7 +66,7 @@
           <div class="justify-end">
             <HbarExtra v-if="i <= hbarTransferLayout.sources.length"
                        v-bind:tbarAmount="hbarTransferLayout.sources[i-1].transfer.amount"
-                       v-bind:timestamp="transaction.consensus_timestamp"/>
+                       v-bind:timestamp="transaction?.consensus_timestamp"/>
           </div>
 
         </template>
@@ -103,7 +100,7 @@
           <div class="justify-end" v-bind:class="{'h-has-low-contrast': hasLowContrast(i-1)}">
             <HbarExtra v-if="i <= hbarTransferLayout.destinations.length"
                        v-bind:tbarAmount="hbarTransferLayout.destinations[i-1].transfer.amount"
-                       v-bind:timestamp="transaction.consensus_timestamp"/>
+                       v-bind:timestamp="transaction?.consensus_timestamp"/>
           </div>
 
           <!-- #7 : description -->
@@ -118,11 +115,6 @@
       </template>
 
     </div>
-
-  </div>
-
-  <p v-else-if="showNone" class="has-text-grey">None</p>
-
   </div>
 </template>
 

src/components/transfer_graphs/NftTransferGraph.vue

@@ -24,11 +24,9 @@
 
 <template>
 
-  <div>
+  <div v-if="nftTransferLayout.length >= 1">
     <div v-if="!compact" class="h-is-tertiary-text mb-2">NFT Transfers</div>
 
-    <div  v-if="nftTransferLayout.length >= 1">
-
     <div class="graph-container" v-bind:class="{'graph-container-6': !compact && descriptionVisible}">
 
       <template v-if="!compact">
@@ -60,7 +58,7 @@
         <!-- #2 : nfts -->
         <div>
           <TokenLink
-              v-bind:token-id="nftTransferLayout[i-1].token_id"
+              v-bind:token-id="nftTransferLayout[i-1].token_id ?? undefined"
               v-bind:show-extra="true"
               v-bind:no-anchor="compact"
               data-cy="nft"/>
@@ -95,9 +93,6 @@
       </template>
 
     </div>
-    </div>
-
-    <div v-else-if="!compact" class="has-text-grey">None</div>
   </div>
 
 </template>

src/components/transfer_graphs/RewardTransferGraph.vue

@@ -0,0 +1,152 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -
+  -->
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+  <div v-if="rewardTransferLayout.destinations.length >= 1">
+    <p class="h-is-tertiary-text mb-2">Staking Rewards</p>
+
+    <div class="graph-container" v-bind:class="{'graph-container-8': dollarVisible }">
+
+      <template v-if="dollarVisible">
+        <div style="grid-column-end: span 2" class="h-is-text-size-3 has-text-grey-light has-text-weight-light mb-2">Reward Account</div>
+        <div/>
+        <div style="grid-column-end: span 1" class="h-is-text-size-3 has-text-grey-light has-text-weight-light mb-2">Account</div>
+        <div style="grid-column-end: span 2" class="h-is-text-size-3 has-text-grey-light has-text-weight-light mb-2">Amount Rewarded</div>
+        <div/>
+        <div/>
+      </template>
+      <template v-else>
+        <div style="grid-column-end: span 1" class="h-is-text-size-3 has-text-grey-light has-text-weight-light mb-2">Account</div>
+        <div/>
+        <div style="grid-column-end: span 1" class="h-is-text-size-3 has-text-grey-light has-text-weight-light mb-2">Account</div>
+        <div style="grid-column-end: span 1" class="h-is-text-size-3 has-text-grey-light has-text-weight-light mb-2">Amount Rewarded</div>
+        <div/>
+      </template>
+
+      <template v-for="i in rewardTransferLayout.destinations.length" v-bind:key="i">
+
+        <!-- #0 : account id -->
+        <div>
+          <AccountLink v-if="i === 1" account-id="0.0.800" data-cy="awardSourceAccount"/>
+          <div v-else/>
+        </div>
+        <div/>
+
+        <!-- #1 : arrow -->
+        <div  style="position: relative">
+          <ArrowSegment
+              :source-count="1"
+              :dest-count="rewardTransferLayout.destinations.length"
+              :row-index="i-1"/>
+        </div>
+
+        <!-- #2 : account id -->
+        <div>
+          <AccountLink v-if="i <= rewardTransferLayout.destinations.length"
+                       v-bind:account-id="rewardTransferLayout.destinations[i-1].account"
+                       data-cy="destinationAccount"/>
+        </div>
+
+        <!-- #3 : reward amount -->
+        <div class="justify-end">
+          <HbarAmount v-if="i <= rewardTransferLayout.destinations.length"
+                      v-bind:amount="rewardTransferLayout.destinations[i-1].amount"
+                      v-bind:colored="true"/>
+        </div>
+
+        <template v-if="dollarVisible">
+
+          <!-- #4 : dollar amount -->
+          <div class="justify-end">
+            <HbarExtra v-if="i <= rewardTransferLayout.destinations.length"
+                       v-bind:tbarAmount="rewardTransferLayout.destinations[i-1].amount"
+                       v-bind:timestamp="transaction?.consensus_timestamp ?? undefined"/>
+          </div>
+
+        </template>
+        <div/>
+        <div/>
+
+      </template>
+
+    </div>
+  </div>
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+
+import {computed, defineComponent, inject, PropType} from "vue";
+import AccountLink from "@/components/values/AccountLink.vue";
+import ArrowSegment from "@/components/transfer_graphs/ArrowSegment.vue";
+import HbarAmount from "@/components/values/HbarAmount.vue";
+import HbarExtra from "@/components/values/HbarExtra.vue";
+import {Transaction} from "@/schemas/HederaSchemas";
+import {RewardTransferLayout} from "@/components/transfer_graphs/layout/RewardTransferLayout";
+
+export default defineComponent({
+  name: "RewardTransferGraph",
+  components: {HbarAmount, HbarExtra, ArrowSegment, AccountLink},
+  props: {
+    transaction: Object as PropType<Transaction>,
+  },
+  setup(props) {
+
+    const rewardTransferLayout = computed(() => new RewardTransferLayout(props.transaction))
+
+    const dollarVisible = inject("isSmallScreen", true)
+
+    return {
+      rewardTransferLayout,
+      dollarVisible
+    }
+  }
+})
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      STYLE                                                      -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style scoped>
+
+.graph-container {
+  display: inline-grid;
+  grid-template-columns: repeat(5, auto);
+  column-gap: 1em;
+}
+
+.graph-container-8 {
+  grid-template-columns: repeat(8, auto);
+}
+
+div.graph-container > div.justify-end {
+  justify-self: end;
+}
+
+</style>

src/components/transfer_graphs/TokenTransferGraphC.vue

@@ -24,9 +24,7 @@
 
 <template>
 
-  <div v-if="tokenTransferLayout.length >= 1">
-
-    <div class="graph-container">
+    <div v-if="tokenTransferLayout.length >= 1" class="graph-container">
 
       <template v-for="s in tokenTransferLayout.length" v-bind:key="s">
 
@@ -54,7 +52,7 @@
           <div class="justify-end">
             <TokenAmount v-if="i === 1"
                          v-bind:amount="BigInt(tokenTransferLayout[s-1].netAmount)"
-                         v-bind:token-id="tokenTransferLayout[s-1].tokenId"
+                         v-bind:token-id="tokenTransferLayout[s-1].tokenId ?? undefined"
                          v-bind:show-extra="true"/>
           </div>
 
@@ -83,8 +81,6 @@
 
     </div>
 
-  </div>
-
 </template>
 
 <!-- --------------------------------------------------------------------------------------------------------------- -->

src/components/transfer_graphs/TokenTransferGraphF.vue

@@ -24,11 +24,9 @@
 
 <template>
 
-  <div>
+  <div v-if="tokenTransferLayout.length >= 1">
     <p class="h-is-tertiary-text mb-2">Token Transfers</p>
 
-    <div v-if="tokenTransferLayout.length >= 1">
-
     <div class="graph-container" v-bind:class="{'graph-container-8': symbolVisible}">
 
       <template v-if="symbolVisible">
@@ -64,14 +62,14 @@
           <div class="justify-end">
             <TokenAmount v-if="i <= tokenTransferLayout[s-1].sources.length"
                          v-bind:amount="BigInt(tokenTransferLayout[s-1].sources[i-1].amount)"
-                         v-bind:token-id="tokenTransferLayout[s-1].tokenId"/>
+                         v-bind:token-id="tokenTransferLayout[s-1].tokenId ?? undefined"/>
           </div>
 
           <!-- #2 : token symbol -->
           <template v-if="symbolVisible">
             <div data-cy="tokenExtra">
               <TokenExtra v-if="i <= tokenTransferLayout[s-1].sources.length"
-                          v-bind:token-id="tokenTransferLayout[s-1].tokenId"
+                          v-bind:token-id="tokenTransferLayout[s-1].tokenId ?? undefined"
                           v-bind:use-anchor="true"/>
             </div>
           </template>
@@ -97,15 +95,15 @@
           <div>
             <TokenAmount v-if="i <= tokenTransferLayout[s-1].destinations.length"
                          v-bind:amount="BigInt(tokenTransferLayout[s-1].destinations[i-1].amount)"
-                         v-bind:token-id="tokenTransferLayout[s-1].tokenId"/>
+                         v-bind:token-id="tokenTransferLayout[s-1].tokenId ?? undefined"/>
           </div>
 
           <template v-if="symbolVisible">
 
             <!-- #6 : token symbol -->
             <div data-cy="tokenExtra">
               <TokenExtra v-if="i <= tokenTransferLayout[s-1].destinations.length"
-                          v-bind:token-id="tokenTransferLayout[s-1].tokenId"
+                          v-bind:token-id="tokenTransferLayout[s-1].tokenId ?? undefined"
                           v-bind:use-anchor="true"/>
             </div>
 
@@ -123,10 +121,6 @@
       </template>
 
     </div>
-
-    </div>
-
-    <p v-else class="has-text-grey">None</p>
   </div>
 
 </template>