feat: selector of transaction ID format (#1187)

Signed-off-by: Simon Viénot <[email protected]>

src/AppStorage.ts

@@ -249,6 +249,19 @@ export class AppStorage {
         this.setLocalStorageItem(this.SHOW_LOGIC_ABI_KEY, newValue ? "true" : null)
     }
 
+    //
+    // use arobas form of Transaction ID
+    //
+
+    private static readonly USE_DASH_FORM_KEY = 'useDashForm'
+
+    public static getUseDashForm(): boolean {
+        return this.getLocalStorageItem(this.USE_DASH_FORM_KEY) !== null
+    }
+
+    public static setUseDashForm(newValue: boolean): void {
+        this.setLocalStorageItem(this.USE_DASH_FORM_KEY, newValue ? "true" : null)
+    }
 
     //
     // Private

src/components/allowances/ApproveAllowanceDialog.vue

@@ -229,7 +229,6 @@ import {networkRegistry} from "@/schemas/NetworkRegistry";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import {CryptoAllowance, TokenAllowance} from "@/schemas/HederaSchemas";
 import ProgressDialog, {Mode} from "@/components/staking/ProgressDialog.vue";
-import {normalizeTransactionId} from "@/utils/TransactionID";
 import {WalletDriverCancelError, WalletDriverError} from "@/utils/wallet/WalletDriverError";
 import {TokenInfoCache} from "@/utils/cache/TokenInfoCache";
 import {AccountByIdCache} from "@/utils/cache/AccountByIdCache";
@@ -241,6 +240,7 @@ import {
   waitForTransactionRefresh
 } from "@/schemas/HederaUtils";
 import {inputAmount, inputEntityID, inputIntList} from "@/utils/InputUtils";
+import {TransactionID} from "@/utils/TransactionID";
 
 const VALID_ACCOUNT_MESSAGE = "Account found"
 const UNKNOWN_ACCOUNT_MESSAGE = "Unknown account"
@@ -691,17 +691,17 @@ export default defineComponent({
 
           if (allowanceChoice.value === 'hbar') {
             if (selectedHbarAmount.value != null) {
-              tid = normalizeTransactionId(await walletManager.approveHbarAllowance(
+              tid = TransactionID.normalize(await walletManager.approveHbarAllowance(
                   normalizedSpender.value, parseFloat(selectedHbarAmount.value)))
             }
           } else if (allowanceChoice.value === 'token') {
             if (normalizedToken.value != null && rawTokenAmount.value != null) {
-              tid = normalizeTransactionId(await walletManager.approveTokenAllowance(
+              tid = TransactionID.normalize(await walletManager.approveTokenAllowance(
                   normalizedToken.value, normalizedSpender.value, rawTokenAmount.value))
             }
           } else { // 'nft'
             if (normalizedNFT.value != null) {
-              tid = normalizeTransactionId(await walletManager.approveNFTAllowance(
+              tid = TransactionID.normalize(await walletManager.approveNFTAllowance(
                   normalizedNFT.value, normalizedSpender.value, nftSerials.value))
             }
           }

src/components/allowances/DeleteNftAllowanceDialog.vue

@@ -136,7 +136,7 @@ import {walletManager} from "@/router";
 import {Nft, NftAllowance} from "@/schemas/HederaSchemas";
 import {TokenInfoCache} from "@/utils/cache/TokenInfoCache";
 import {makeTokenName, waitForTransactionRefresh} from "@/schemas/HederaUtils";
-import {normalizeTransactionId, TransactionID} from "@/utils/TransactionID";
+import {TransactionID} from "@/utils/TransactionID";
 import {WalletDriverCancelError, WalletDriverError} from "@/utils/wallet/WalletDriverError";
 
 export default defineComponent({
@@ -189,11 +189,11 @@ export default defineComponent({
       try {
 
         if (isApprovedForAll.value && token.value != null && spender.value != null) {
-          tid.value = normalizeTransactionId(
+          tid.value = TransactionID.normalize(
               await walletManager.deleteNftAllSerialsAllowance(token.value, spender.value)
           )
         } else if (token.value != null && serial.value != null) {
-          tid.value = normalizeTransactionId(
+          tid.value = TransactionID.normalize(
               await walletManager.deleteNftAllowance(token.value, serial.value)
           )
         } else {

src/components/staking/ProgressDialog.vue

@@ -111,7 +111,7 @@ export default defineComponent({
     const closeDisabled = computed(() => props.mode == Mode.Busy)
 
     const formattedTransactionId = computed(
-        () => props.extraTransactionId != null ? TransactionID.normalize(props.extraTransactionId, true) : null)
+        () => props.extraTransactionId != null ? TransactionID.normalizeForDisplay(props.extraTransactionId) : null)
 
     return {
       handleClose,

src/components/transaction/NftTransactionAnalyzer.ts

@@ -18,14 +18,9 @@
  *
  */
 
-import {computed, ComputedRef, ref, Ref, watch, WatchStopHandle} from "vue"
-import {
-    NftTransactionTransfer,
-    TokenRelationship,
-    TransactionType,
-} from "@/schemas/HederaSchemas"
+import {computed, ref, Ref, watch, WatchStopHandle} from "vue"
+import {NftTransactionTransfer, TokenRelationship, TransactionType,} from "@/schemas/HederaSchemas"
 import {EntityDescriptor} from "@/utils/EntityDescriptor"
-import {normalizeTransactionId} from "@/utils/TransactionID"
 import {TokenRelationshipCache} from "@/utils/cache/TokenRelationshipCache"
 
 export class NftTransactionAnalyzer {
@@ -69,14 +64,6 @@ export class NftTransactionAnalyzer {
         () => this.transaction.value?.sender_account_id ?? null,
     )
 
-    public readonly formattedTransactionId: ComputedRef<string | null> =
-        computed(() => {
-            const transaction_id = this.transaction.value?.transaction_id
-            return transaction_id
-                ? normalizeTransactionId(transaction_id, true)
-                : null
-        })
-
     public readonly isTokenAssociation = computed(
         () => this.transactionType.value === TransactionType.TOKENASSOCIATE,
     )

src/components/transaction/TransactionAnalyzer.ts

@@ -24,7 +24,7 @@ import {EntityDescriptor} from "@/utils/EntityDescriptor";
 import {computeNetAmount, isSuccessfulResult} from "@/utils/TransactionTools";
 import {base64DecToArr, byteToHex} from "@/utils/B64Utils";
 import {systemContractRegistry} from "@/schemas/SystemContractRegistry";
-import {normalizeTransactionId} from "@/utils/TransactionID";
+import {TransactionID} from "@/utils/TransactionID";
 import {ContractByIdCache} from "@/utils/cache/ContractByIdCache";
 import {BlockByTsCache} from "@/utils/cache/BlockByTsCache";
 import {TokenRelationshipCache} from "@/utils/cache/TokenRelationshipCache";
@@ -84,7 +84,7 @@ export class TransactionAnalyzer {
 
     public readonly formattedTransactionId: ComputedRef<string | null> = computed(() => {
         const transaction_id = this.transaction.value?.transaction_id
-        return transaction_id ? normalizeTransactionId(transaction_id, true) : null
+        return transaction_id ? TransactionID.normalizeForDisplay(transaction_id) : null
     })
 
     public readonly formattedHash: ComputedRef<string | null> = computed(() => {

src/components/values/TransactionIdValue.vue

@@ -0,0 +1,68 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2024 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>
+    <span>{{ transactionId }}</span>
+  </div>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+
+import {defineComponent, PropType, ref, watch} from "vue";
+import {TransactionID} from "@/utils/TransactionID";
+
+export default defineComponent({
+  name: "TransactionIdValue",
+  props: {
+    id: {
+      type: String as PropType<string | null>,
+      default: null
+    }
+  },
+  setup(props) {
+    const transactionId = ref(TransactionID.normalizeForDisplay(props.id ?? ''))
+    watch([() => props.id, TransactionID.useAtForm], () =>
+            transactionId.value = TransactionID.normalizeForDisplay(props.id ?? ''), {immediate: true}
+    )
+    return {
+      transactionId
+    }
+  }
+});
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                       STYLE                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style/>
+

src/components/values/TransactionLabel.vue

@@ -38,7 +38,7 @@
 <script lang="ts">
 
 import {computed, defineComponent} from "vue";
-import {normalizeTransactionId} from "@/utils/TransactionID";
+import {TransactionID} from "@/utils/TransactionID";
 import {isSuccessfulResult} from "@/utils/TransactionTools";
 
 export default defineComponent({
@@ -51,7 +51,7 @@ export default defineComponent({
 
   setup(props) {
     const transactionText = computed(() => {
-      return props.transactionId ? normalizeTransactionId(props.transactionId, true) : ""
+      return props.transactionId ? TransactionID.normalizeForDisplay(props.transactionId) : ""
     })
 
     const errorFlagVisible = computed(() => {

src/components/values/TransactionLink.vue

@@ -24,9 +24,11 @@
 
 <template>
 
-  <div v-if="formattedId && routeToTransaction">
+  <div v-if="formattedId && routeToTransaction" class="is-numeric should-wrap">
     <router-link :to="routeToTransaction">
-      <span class="is-numeric should-wrap">{{ formattedId }}</span>
+      <div>
+        <TransactionIdValue :id="formattedId"/>
+      </div>
     </router-link>
   </div>
 
@@ -51,9 +53,11 @@ import {Timestamp} from "@/utils/Timestamp";
 import {TransactionHash} from "@/utils/TransactionHash";
 import {TransactionByHashCache} from "@/utils/cache/TransactionByHashCache";
 import {TransactionByTsCache} from "@/utils/cache/TransactionByTsCache";
+import TransactionIdValue from "@/components/values/TransactionIdValue.vue";
 
 export default defineComponent({
   name: "TransactionLink",
+  components: {TransactionIdValue},
 
   props: {
     transactionLoc: String as PropType<string | undefined>,
@@ -96,7 +100,7 @@ export default defineComponent({
     onMounted(() => updateNormalizedId())
 
     const formattedId = computed(() => {
-      return normalizedId.value !== null ? TransactionID.normalize(normalizedId.value) : null
+      return normalizedId.value !== null ? TransactionID.normalizeForDisplay(normalizedId.value) : null
     })
 
     const routeToTransaction = computed(() => {

src/pages/Staking.vue

@@ -235,7 +235,7 @@ import RewardsCalculator from "@/components/staking/RewardsCalculator.vue";
 import WalletChooser from "@/components/staking/WalletChooser.vue";
 import {WalletDriver} from "@/utils/wallet/WalletDriver";
 import {WalletDriverCancelError, WalletDriverError} from "@/utils/wallet/WalletDriverError";
-import {normalizeTransactionId} from "@/utils/TransactionID";
+import {TransactionID} from "@/utils/TransactionID";
 import {StakingRewardsTableController} from "@/components/staking/StakingRewardsTableController";
 import DownloadButton from "@/components/DownloadButton.vue";
 import CSVDownloadDialog from "@/components/CSVDownloadDialog.vue";
@@ -426,7 +426,7 @@ export default defineComponent({
         progressExtraMessage.value = "Check your wallet for any approval request"
         progressExtraTransactionId.value = null
         showProgressSpinner.value = false
-        const transactionId = normalizeTransactionId(await walletManager.changeStaking(nodeId, accountId, declineReward))
+        const transactionId = TransactionID.normalize(await walletManager.changeStaking(nodeId, accountId, declineReward))
         progressMainMessage.value = "Completing operation…"
         progressExtraMessage.value = "This may take a few seconds"
         showProgressSpinner.value = true

src/pages/TransactionDetails.vue

@@ -30,24 +30,33 @@
       <template v-slot:title>
         <div class="is-flex is-align-items-center is-flex-wrap-wrap">
           <span class="h-is-primary-title mr-1">Transaction </span>
-          <span class="h-is-secondary-text mr-3">{{ formattedTransactionId ?? "" }}</span>
+          <div class="h-is-secondary-text mr-3">
+            <TransactionIdValue :id="formattedTransactionId"/>
+          </div>
           <div v-if="transaction" class="h-is-text-size-2 mt-1">
             <div v-if="transactionSucceeded" class="h-has-pill has-background-success">SUCCESS</div>
             <div v-else class="h-has-pill has-background-danger">FAILURE</div>
           </div>
         </div>
-        <span v-if="routeToAllTransactions && !isLargeScreen">
-          <router-link :to="routeToAllTransactions">
-            <span class="h-is-property-text has-text-grey">Show all transactions with the same ID</span>
-          </router-link>
-        </span>
       </template>
 
       <template v-slot:control>
-        <router-link v-if="routeToAllTransactions && isLargeScreen" id="allTransactionsLink"
-                     :to="routeToAllTransactions">
-          <span class="h-is-property-text has-text-grey">Show all transactions with the same ID</span>
-        </router-link>
+        <o-select
+            data-cy="select-format"
+            v-model="txIdForm"
+            class="h-is-text-size-3 ml-3"
+        >
+          <option value="atForm">Default format</option>
+          <option value="dashForm">Exchange format</option>
+        </o-select>
+      </template>
+
+      <template v-slot:subtitle>
+        <div v-if="routeToAllTransactions">
+          <router-link :to="routeToAllTransactions" id="allTransactionsLink">
+            <span class="h-is-property-text has-text-grey">Show all transactions with the same ID</span>
+          </router-link>
+        </div>
       </template>
 
       <template v-slot:content>
@@ -253,7 +262,7 @@
 
 <script lang="ts">
 
-import {computed, defineComponent, inject, onBeforeUnmount, onMounted} from 'vue';
+import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch} from 'vue';
 import {getTargetedTokens, makeOperatorAccountLabel, makeTypeLabel} from "@/utils/TransactionTools";
 import AccountLink from "@/components/values/link/AccountLink.vue";
 import HexaValue from "@/components/values/HexaValue.vue";
@@ -281,6 +290,8 @@ import {TransactionAnalyzer} from "@/components/transaction/TransactionAnalyzer"
 import {TransactionGroupCache} from "@/utils/cache/TransactionGroupCache";
 import MirrorLink from "@/components/MirrorLink.vue";
 import TokenExtra from "@/components/values/link/TokenExtra.vue";
+import {TransactionID} from "@/utils/TransactionID";
+import TransactionIdValue from "@/components/values/TransactionIdValue.vue";
 
 const MAX_INLINE_CHILDREN = 10
 
@@ -289,6 +300,7 @@ export default defineComponent({
   name: 'TransactionDetails',
 
   components: {
+    TransactionIdValue,
     TokenExtra,
     MirrorLink,
     TokenLink,
@@ -315,6 +327,9 @@ export default defineComponent({
     const isLargeScreen = inject('isLargeScreen', true)
     const isTouchDevice = inject('isTouchDevice', false)
 
+    const txIdForm = ref(TransactionID.useAtForm.value ? 'atForm' : 'dashForm')
+    watch(txIdForm, () => TransactionID.setUseAtForm(txIdForm.value === 'atForm'))
+
     const transactionLoc = computed(() => props.transactionLoc ?? null)
     const transactionLocParser = new TransactionLocParser(transactionLoc)
     onMounted(() => transactionLocParser.mount())
@@ -324,6 +339,9 @@ export default defineComponent({
     onMounted(() => transactionAnalyzer.mount())
     onBeforeUnmount(() => transactionAnalyzer.unmount())
 
+    const atForm = computed(() => TransactionID.parse(transactionLocParser.transactionId.value ?? '')?.toString(true))
+    const dashForm = computed(() => TransactionID.parse(transactionLocParser.transactionId.value ?? '')?.toString(false))
+
     const transactionGroupLookup = TransactionGroupCache.instance.makeLookup(transactionLocParser.transactionId)
     onMounted(() => transactionGroupLookup.mount())
     onBeforeUnmount(() => transactionGroupLookup.unmount())
@@ -436,10 +454,13 @@ export default defineComponent({
       isMediumScreen,
       isLargeScreen,
       isTouchDevice,
+      txIdForm,
       showMaxFeeTooltip,
       transactionId: transactionLocParser.transactionId,
       transaction: transactionDetail,
       formattedTransactionId: transactionAnalyzer.formattedTransactionId,
+      atForm,
+      dashForm,
       netAmount: transactionAnalyzer.netAmount,
       entity: transactionAnalyzer.entityDescriptor,
       contractId: transactionAnalyzer.contractId,