From 36d1f43fde1daa8e04d628b013fe97776fc4f1d4 Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Mon, 22 Jul 2024 14:05:49 +0200
Subject: [PATCH] feat: Prepend token symbol  (#809)

---
 cypress.config.ts                             |  2 +-
 src/assets/ae-token.svg                       |  6 +-
 ...countActivityDataCellAex9TransferEvent.vue | 15 ++--
 ...untActivityDataCellContractCallTxEvent.vue |  8 +--
 ...ivityDataCellInternalContractCallEvent.vue |  5 +-
 ...tActivityDataCellInternalTransferEvent.vue |  7 +-
 ...ccountActivityDataCellNameClaimTxEvent.vue |  9 +--
 .../AccountActivityDataCellSpendTxEvent.vue   |  4 +-
 src/components/AccountDetailsPanel.vue        |  7 +-
 src/components/AccountTokensTable.vue         | 44 +++++-------
 .../AccountTokensTableCondensed.vue           | 49 ++++++-------
 src/components/AeCoinPanel.vue                |  6 +-
 src/components/ContractDetailsPanel.vue       |  4 +-
 src/components/ContractEventCellAllowance.vue |  8 +--
 src/components/ContractEventCellBurn.vue      |  8 +--
 src/components/ContractEventCellMint.vue      |  8 +--
 src/components/ContractEventCellSwap.vue      |  6 +-
 src/components/ContractEventCellTransfer.vue  |  9 ++-
 src/components/DashboardAuctionsSwiper.vue    |  3 +-
 src/components/DashboardAuctionsTable.vue     |  9 +--
 src/components/DashboardNamesSwiper.vue       |  3 +-
 src/components/DashboardNamesTable.vue        |  9 +--
 .../DashboardStateChannelsSwiper.vue          |  3 +-
 .../DashboardStateChannelsTable.vue           |  3 +-
 src/components/KeyblockDetailsPanel.vue       |  6 +-
 src/components/KeyblockTable.vue              |  6 +-
 src/components/KeyblockTableCondensed.vue     |  6 +-
 src/components/MarketStats.vue                | 20 ++++--
 src/components/NameDetailsPanel.vue           |  6 +-
 .../NameHistoryDataCellNameClaimEvent.vue     |  6 +-
 src/components/NamesActiveTable.vue           | 11 +--
 src/components/NamesActiveTableCondensed.vue  |  6 +-
 src/components/NamesExpiredTable.vue          | 11 +--
 src/components/NamesExpiredTableCondensed.vue |  6 +-
 src/components/NamesInAuctionTable.vue        |  9 +--
 .../NamesInAuctionTableCondensed.vue          |  6 +-
 src/components/OracleDetailsPanel.vue         |  3 +-
 src/components/OracleEventsQueryPanel.vue     |  4 +-
 src/components/OraclesTable.vue               |  3 +-
 src/components/OraclesTableCondensed.vue      |  3 +-
 src/components/PriceLabel.vue                 | 71 +++++++++++++++++++
 src/components/StateChannelDetailsPanel.vue   |  5 +-
 src/components/StateChannelsTable.vue         |  4 +-
 src/components/StatsPanel.vue                 | 37 +++++++---
 src/components/TokenDetailsPanel.vue          | 12 +++-
 src/components/TokenEventsDataCell.vue        | 36 +++++-----
 src/components/TokenHoldersTable.vue          | 20 ++----
 src/components/TokenHoldersTableCondensed.vue | 19 ++---
 src/components/TopAccountsTable.vue           |  5 +-
 .../TransactionCellChannelCloseMutualTx.vue   | 11 +--
 .../TransactionCellChannelCreateTx.vue        | 12 +---
 .../TransactionCellChannelDepositTx.vue       |  7 +-
 .../TransactionCellChannelSettleTx.vue        | 11 +--
 .../TransactionCellChannelWithdrawTx.vue      |  7 +-
 src/components/TransactionCellGAMetaTx.vue    |  6 +-
 src/components/TransactionCellNameClaimTx.vue |  9 +--
 .../TransactionCellOracleRegisterTx.vue       |  7 +-
 src/components/TransactionCellPayingForTx.vue |  6 +-
 src/components/TransactionCellSpendTx.vue     |  7 +-
 src/components/TransactionGeneralPanel.vue    |  4 +-
 ...ansactionTypeTableChannelCloseMutualTx.vue | 32 ++++-----
 .../TransactionTypeTableChannelCreateTx.vue   | 49 ++++++-------
 .../TransactionTypeTableChannelDepositTx.vue  |  4 +-
 .../TransactionTypeTableChannelSettleTx.vue   | 16 +----
 .../TransactionTypeTableChannelWithdrawTx.vue |  4 +-
 .../TransactionTypeTableContractCallTx.vue    | 26 ++++---
 .../TransactionTypeTableContractCreateTx.vue  | 26 ++++---
 .../TransactionTypeTableGAAttachTx.vue        | 24 +++++--
 .../TransactionTypeTableGAMetaTx.vue          |  9 +--
 .../TransactionTypeTableNameClaimTx.vue       |  4 +-
 .../TransactionTypeTableOracleQueryTx.vue     |  4 +-
 .../TransactionTypeTableOracleRegisterTx.vue  |  4 +-
 .../TransactionTypeTableSpendTx.vue           |  4 +-
 src/utils/adapters.js                         | 29 +++++---
 src/utils/format.js                           | 27 +++++--
 75 files changed, 464 insertions(+), 441 deletions(-)
 create mode 100644 src/components/PriceLabel.vue

diff --git a/cypress.config.ts b/cypress.config.ts
index b4d6f9b24..75ae8000f 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -19,5 +19,5 @@ export default defineConfig({
   },
   viewportWidth: 1280,
   viewportHeight: 720,
-  defaultCommandTimeout: 30000,
+  defaultCommandTimeout: 40000,
 })
diff --git a/src/assets/ae-token.svg b/src/assets/ae-token.svg
index 19d3ea8ed..6238f6a50 100644
--- a/src/assets/ae-token.svg
+++ b/src/assets/ae-token.svg
@@ -1 +1,5 @@
-<svg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='16' cy='16' r='16' fill='#fff'/><path d='M21.182 20.39c-2.376 0-3.845-1.692-5.534-4.192-1.688-2.5-2.894-4.066-4.83-4.066a3.668 3.668 0 0 0-2.577 1.036 3.566 3.566 0 0 0-1.084 2.527c.008.951.397 1.86 1.084 2.528a3.668 3.668 0 0 0 2.577 1.035c1.584 0 2.715-1.129 3.78-2.564l.683.998c-1.163 1.494-2.506 2.698-4.463 2.698a4.83 4.83 0 0 1-3.394-1.365A4.696 4.696 0 0 1 6 15.695a4.696 4.696 0 0 1 1.424-3.33A4.83 4.83 0 0 1 10.818 11c2.376 0 3.907 1.768 5.53 4.188 1.622 2.42 2.9 4.07 4.834 4.07.656.001 1.3-.171 1.866-.499a3.64 3.64 0 0 0 1.35-1.365h1.274a4.77 4.77 0 0 1-1.774 2.177 4.872 4.872 0 0 1-2.708.82h-.008Zm-.903-4.128v-1.133h4.517a3.588 3.588 0 0 0-1.25-2.152 3.682 3.682 0 0 0-2.364-.845c-1.584 0-2.715 1.13-3.78 2.566l-.687-.991C17.877 12.209 19.22 11 21.182 11a4.83 4.83 0 0 1 3.394 1.365A4.695 4.695 0 0 1 26 15.695c0 .19-.012.379-.035.567h-5.686Z' fill='#F72A6E'/></svg>
\ No newline at end of file
+<svg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <circle cx='16' cy='16' r='16' fill='#fff'/>
+    <path d='M21.182 20.39c-2.376 0-3.845-1.692-5.534-4.192-1.688-2.5-2.894-4.066-4.83-4.066a3.668 3.668 0 0 0-2.577 1.036 3.566 3.566 0 0 0-1.084 2.527c.008.951.397 1.86 1.084 2.528a3.668 3.668 0 0 0 2.577 1.035c1.584 0 2.715-1.129 3.78-2.564l.683.998c-1.163 1.494-2.506 2.698-4.463 2.698a4.83 4.83 0 0 1-3.394-1.365A4.696 4.696 0 0 1 6 15.695a4.696 4.696 0 0 1 1.424-3.33A4.83 4.83 0 0 1 10.818 11c2.376 0 3.907 1.768 5.53 4.188 1.622 2.42 2.9 4.07 4.834 4.07.656.001 1.3-.171 1.866-.499a3.64 3.64 0 0 0 1.35-1.365h1.274a4.77 4.77 0 0 1-1.774 2.177 4.872 4.872 0 0 1-2.708.82h-.008Zm-.903-4.128v-1.133h4.517a3.588 3.588 0 0 0-1.25-2.152 3.682 3.682 0 0 0-2.364-.845c-1.584 0-2.715 1.13-3.78 2.566l-.687-.991C17.877 12.209 19.22 11 21.182 11a4.83 4.83 0 0 1 3.394 1.365A4.695 4.695 0 0 1 26 15.695c0 .19-.012.379-.035.567h-5.686Z'
+          fill='#F72A6E'/>
+</svg>
diff --git a/src/components/AccountActivityDataCellAex9TransferEvent.vue b/src/components/AccountActivityDataCellAex9TransferEvent.vue
index 6e8aea915..04fbe22fc 100644
--- a/src/components/AccountActivityDataCellAex9TransferEvent.vue
+++ b/src/components/AccountActivityDataCellAex9TransferEvent.vue
@@ -2,15 +2,14 @@
   <value-hash-ellipsed
     :hash="activityPayload.contractId"
     :link-to="`/contracts/${activityPayload.contractId}`"/>
-
-  <app-chip size="sm">
-    {{ tokenValue }}
-  </app-chip>
+  <price-label
+    :price="tokenValue"
+    :contract-id="activityPayload.contractId"
+    :currency="activityPayload.tokenSymbol"/>
 </template>
 
 <script setup>
-import { formatNumber, formatReduceDecimals } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatReduceDecimals } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
 const props = defineProps({
@@ -26,8 +25,6 @@ const props = defineProps({
 
 const activityPayload = computed(() => props.activity.payload)
 const tokenValue = computed(() =>
-  formatNumber(
-    formatReduceDecimals(activityPayload.value.amount, activityPayload.value.decimals),
-  ) + ` ${activityPayload.value.tokenSymbol}`,
+  formatReduceDecimals(activityPayload.value.amount, activityPayload.value.decimals),
 )
 </script>
diff --git a/src/components/AccountActivityDataCellContractCallTxEvent.vue b/src/components/AccountActivityDataCellContractCallTxEvent.vue
index c855534b3..365283134 100644
--- a/src/components/AccountActivityDataCellContractCallTxEvent.vue
+++ b/src/components/AccountActivityDataCellContractCallTxEvent.vue
@@ -7,17 +7,15 @@
     {{ activity.payload.tx.function }}
   </app-chip>
 
-  <app-chip
+  <price-label
     v-if="activity.payload.tx.amount !== 0"
-    size="sm">
-    {{ formatAePrice(formatAettosToAe(activity.payload.tx.amount)) }}
-  </app-chip>
+    :price="formatAettosToAe(activity.payload.tx.amount)"/>
 </template>
 
 <script setup>
 
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import { formatAettosToAe } from '@/utils/format'
 
 defineProps({
   activity: {
diff --git a/src/components/AccountActivityDataCellInternalContractCallEvent.vue b/src/components/AccountActivityDataCellInternalContractCallEvent.vue
index 4fb8e429e..c037dc55f 100644
--- a/src/components/AccountActivityDataCellInternalContractCallEvent.vue
+++ b/src/components/AccountActivityDataCellInternalContractCallEvent.vue
@@ -4,9 +4,7 @@
     :link-to="`/contracts/${activityPayload.contractId}`"/>
   <template v-if="activityPayload.function === 'Chain.spend'">
     <transaction-arrow-right-icon/>
-    <app-chip size="sm">
-      {{ formatAePrice(formatAettosToAe(activityPayload.internalTx.amount)) }}
-    </app-chip>
+    <price-label :price="formatAettosToAe(activityPayload.internalTx.amount)"/>
   </template>
   <app-chip size="sm">
     {{ activityPayload.function }}
@@ -15,6 +13,7 @@
 
 <script setup>
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
+import { formatAettosToAe } from '@/utils/format'
 
 const props = defineProps({
   activity: {
diff --git a/src/components/AccountActivityDataCellInternalTransferEvent.vue b/src/components/AccountActivityDataCellInternalTransferEvent.vue
index f1c1a26d2..a190fe909 100644
--- a/src/components/AccountActivityDataCellInternalTransferEvent.vue
+++ b/src/components/AccountActivityDataCellInternalTransferEvent.vue
@@ -1,12 +1,9 @@
 <template>
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(activity.payload.amount)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(activity.payload.amount)"/>
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 
 defineProps({
   activity: {
diff --git a/src/components/AccountActivityDataCellNameClaimTxEvent.vue b/src/components/AccountActivityDataCellNameClaimTxEvent.vue
index 80b36dcbb..5e1922885 100644
--- a/src/components/AccountActivityDataCellNameClaimTxEvent.vue
+++ b/src/components/AccountActivityDataCellNameClaimTxEvent.vue
@@ -2,16 +2,13 @@
   <app-link :to="`/names/${activity.payload.tx.name}`">
     {{ activity.payload.tx.name }}
   </app-link>
-  <app-chip
+  <price-label
     v-if="activity.payload.tx.nameFee"
-    size="sm">
-    {{ formatAePrice(formatAettosToAe(activity.payload.tx.nameFee)) }}
-  </app-chip>
+    :price="formatAettosToAe(activity.payload.tx.nameFee)"/>
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 import AppLink from '@/components/AppLink'
 
 defineProps({
diff --git a/src/components/AccountActivityDataCellSpendTxEvent.vue b/src/components/AccountActivityDataCellSpendTxEvent.vue
index 5756dee16..b51197940 100644
--- a/src/components/AccountActivityDataCellSpendTxEvent.vue
+++ b/src/components/AccountActivityDataCellSpendTxEvent.vue
@@ -7,9 +7,7 @@
     v-else
     :hash="activity.payload.tx.senderId"
     :link-to="`/accounts/${activity.payload.tx.senderId}`"/>
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(activity.payload.tx.amount)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(activity.payload.tx.amount)"/>
 </template>
 
 <script setup>
diff --git a/src/components/AccountDetailsPanel.vue b/src/components/AccountDetailsPanel.vue
index 17505ee10..871efc6dc 100644
--- a/src/components/AccountDetailsPanel.vue
+++ b/src/components/AccountDetailsPanel.vue
@@ -45,7 +45,7 @@
             Balance
           </th>
           <td>
-            {{ formatAePrice(accountDetails.balance, null) }}
+            <price-label :price="accountDetails.balance"/>
           </td>
         </tr>
 
@@ -145,10 +145,11 @@ import AppPanel from '@/components/AppPanel'
 import CopyChip from '@/components/CopyChip'
 import AppIcon from '@/components/AppIcon'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatEllipseHash, formatNullable, formatNumber } from '@/utils/format'
+import { formatNumber } from '@/utils/format'
 import { useMarketStatsStore } from '@/stores/marketStats'
 import HintTooltip from '@/components/HintTooltip'
 import AppChip from '@/components/AppChip'
+import PriceLabel from '@/components/PriceLabel'
 
 const { price } = storeToRefs(useMarketStatsStore())
 const { NODE_URL } = useRuntimeConfig().public
@@ -165,7 +166,7 @@ const accountNodeUrl = computed(() =>
 )
 const sanitizedPrice = computed(() =>
   price.value
-    ? `$${formatNullable(formatNumber(props.accountDetails.balance * price.value, 2, 2))}`
+    ? `$${formatNumber(props.accountDetails.balance * price.value, 2, 2)}`
     : '---',
 )
 </script>
diff --git a/src/components/AccountTokensTable.vue b/src/components/AccountTokensTable.vue
index 29ba0ee73..b1872b46c 100644
--- a/src/components/AccountTokensTable.vue
+++ b/src/components/AccountTokensTable.vue
@@ -3,33 +3,27 @@
     <thead>
       <tr>
         <th>
-          Symbol
-          <hint-tooltip>
-            {{ tokensHints.tokenSymbol }}
-          </hint-tooltip>
-        </th>
-        <th>
-          Name
+          Amount
           <hint-tooltip>
-            {{ tokensHints.tokenName }}
+            {{ tokensHints.amount }}
           </hint-tooltip>
         </th>
         <th>
-          Smart Contract
+          Value
           <hint-tooltip>
-            {{ tokensHints.smartContractId }}
+            {{ tokensHints.value }}
           </hint-tooltip>
         </th>
         <th>
-          Amount
+          Name
           <hint-tooltip>
-            {{ tokensHints.amount }}
+            {{ tokensHints.tokenName }}
           </hint-tooltip>
         </th>
         <th>
-          Value
+          Smart Contract
           <hint-tooltip>
-            {{ tokensHints.value }}
+            {{ tokensHints.smartContractId }}
           </hint-tooltip>
         </th>
       </tr>
@@ -39,23 +33,23 @@
         v-for="token in accountTokens?.data"
         :key="token.contractId">
         <td>
-          <app-link :to="`/tokens/${token.contractId}`">
-            {{ token.tokenSymbol }}
-          </app-link>
+          <price-label
+            :price="token.amount"
+            :contract-id="token.contractId"
+            :currency="token.tokenSymbol"/>
         </td>
         <td>
-          {{ token.tokenName }}
+          {{ token.value }}
         </td>
         <td>
-          <value-hash-ellipsed
-            :link-to="`/contracts/${token.contractId}`"
-            :hash="token.contractId "/>
-        </td>
-        <td>
-          {{ formatNumber(token.amount) }}
+          <app-link :to="`/tokens/${token.contractId}`">
+            {{ token.tokenName }}
+          </app-link>
         </td>
         <td>
-          {{ token.value !== null ? `$${formatNumber(token.value,null,null, 7)}` : 'N/A' }}
+          <value-hash-ellipsed
+            :link-to="`/contracts/${token.contractId}`"
+            :hash="token.contractId"/>
         </td>
       </tr>
     </tbody>
diff --git a/src/components/AccountTokensTableCondensed.vue b/src/components/AccountTokensTableCondensed.vue
index 53682963f..17d6e30d0 100644
--- a/src/components/AccountTokensTableCondensed.vue
+++ b/src/components/AccountTokensTableCondensed.vue
@@ -8,70 +8,61 @@
         <tr class="account-tokens-table-condensed__row">
           <th class="account-tokens-table-condensed__header">
             <app-tooltip>
-              Symbol
-              <template #tooltip>
-                {{ tokensHints.tokenSymbol }}
-              </template>
-            </app-tooltip>
-          </th>
-          <td class="account-tokens-table-condensed__data">
-            <app-link :to="`/tokens/${token.contractId}`">
-              {{ token.tokenSymbol }}
-            </app-link>
-          </td>
-        </tr>
-        <tr class="account-tokens-table-condensed__row">
-          <th class="account-tokens-table-condensed__header">
-            <app-tooltip>
-              Name
+              Amount
               <template #tooltip>
-                {{ tokensHints.tokenName }}
+                {{ tokensHints.amount }}
               </template>
             </app-tooltip>
           </th>
           <td class="account-tokens-table-condensed__data">
-            {{ token.tokenName }}
+            <price-label
+              :price="token.amount"
+              :contract-id="token.contractId"
+              :currency="token.tokenSymbol"/>
           </td>
         </tr>
         <tr class="account-tokens-table-condensed__row">
           <th class="account-tokens-table-condensed__header">
             <app-tooltip>
-              Smart Contract
+              Value
               <template #tooltip>
-                {{ tokensHints.smartContractId }}
+                {{ tokensHints.value }}
               </template>
             </app-tooltip>
           </th>
           <td class="account-tokens-table-condensed__data">
-            <value-hash-ellipsed
-              :hash="token.contractId"
-              :link-to="`/contracts/${token.contractId}`"/>
+            {{ token.value }}
           </td>
         </tr>
         <tr class="account-tokens-table-condensed__row">
           <th class="account-tokens-table-condensed__header">
             <app-tooltip>
-              Amount
+              Name
               <template #tooltip>
-                {{ tokensHints.amount }}
+                {{ tokensHints.tokenName }}
               </template>
             </app-tooltip>
           </th>
           <td class="account-tokens-table-condensed__data">
-            {{ formatNumber(token.amount) }}
+            <app-link :to="`/tokens/${token.contractId}`">
+              {{ token.tokenName }}
+            </app-link>
           </td>
         </tr>
+
         <tr class="account-tokens-table-condensed__row">
           <th class="account-tokens-table-condensed__header">
             <app-tooltip>
-              Value
+              Smart Contract
               <template #tooltip>
-                {{ tokensHints.value }}
+                {{ tokensHints.smartContractId }}
               </template>
             </app-tooltip>
           </th>
           <td class="account-tokens-table-condensed__data">
-            {{ token.value !== null ? `$${formatNumber(token.value, null, null, 7)}` : 'N/A' }}
+            <value-hash-ellipsed
+              :hash="token.contractId"
+              :link-to="`/contracts/${token.contractId}`"/>
           </td>
         </tr>
       </tbody>
diff --git a/src/components/AeCoinPanel.vue b/src/components/AeCoinPanel.vue
index 466291b87..e40194736 100644
--- a/src/components/AeCoinPanel.vue
+++ b/src/components/AeCoinPanel.vue
@@ -39,7 +39,7 @@
             Total Supply
           </th>
           <td>
-            {{ formatNullable(formatAePrice(MAX_AE_DISTRIBUTION), 0) }}
+            <price-label :price="MAX_AE_DISTRIBUTION"/>
           </td>
         </tr>
         <tr class="ae-coin-panel__row">
@@ -50,7 +50,7 @@
             Circulating Supply
           </th>
           <td>
-            {{ formatNullable(formatAePrice(totalTokenSupply), 0) }}
+            <price-label :price="totalTokenSupply"/>
           </td>
         </tr>
         <tr class="ae-coin-panel__row">
@@ -70,7 +70,7 @@
 </template>
 
 <script setup>
-import { formatAePrice, formatNullable } from '@/utils/format'
+import { formatNullable } from '@/utils/format'
 import { aeCoinHints } from '@/utils/hints/aeCoinHints'
 import { MAX_AE_DISTRIBUTION } from '@/utils/constants'
 
diff --git a/src/components/ContractDetailsPanel.vue b/src/components/ContractDetailsPanel.vue
index 04ede0c0b..bc9f0f298 100644
--- a/src/components/ContractDetailsPanel.vue
+++ b/src/components/ContractDetailsPanel.vue
@@ -171,7 +171,7 @@
             Smart Contract's Account Balance
           </th>
           <td>
-            {{ formatAePrice(formatAettosToAe(contractDetails.contractAccountBalance), null) }}
+            <price-label :price="0"/>
           </td>
         </tr>
         <tr class="contract-details-panel__row">
@@ -221,7 +221,7 @@ import AppPanel from '@/components/AppPanel'
 import AppIcon from '@/components/AppIcon'
 import AppLink from '@/components/AppLink'
 import CopyChip from '@/components/CopyChip'
-import { formatAePrice, formatAettosToAe, formatEllipseHash } from '@/utils/format'
+import { formatEllipseHash } from '@/utils/format'
 import { contractsHints } from '@/utils/hints/contractsHints'
 import HintTooltip from '@/components/HintTooltip'
 import TokenSymbolIcon from '@/components/TokenSymbolIcon'
diff --git a/src/components/ContractEventCellAllowance.vue b/src/components/ContractEventCellAllowance.vue
index d7a97d0ff..650fd2a95 100644
--- a/src/components/ContractEventCellAllowance.vue
+++ b/src/components/ContractEventCellAllowance.vue
@@ -9,14 +9,14 @@
     :hash="eventData[1]"
     :link-to="`/accounts/${eventData[1]}`"/>
 
-  <app-chip size="sm">
-    {{ tokenValue }}
-  </app-chip>
+  <price-label
+    :price="formatAettosToAe(tokenValue)"
+    :contract-id="contractDetails.tokenDetails.contractId"
+    :currency="contractDetails.symbol"/>
 </template>
 
 <script setup>
 import { formatNumber, formatReduceDecimals } from '@/utils/format'
-import AppChip from '@/components/AppChip'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
diff --git a/src/components/ContractEventCellBurn.vue b/src/components/ContractEventCellBurn.vue
index 46211fcb4..f41ac7475 100644
--- a/src/components/ContractEventCellBurn.vue
+++ b/src/components/ContractEventCellBurn.vue
@@ -1,12 +1,12 @@
 <template>
-  <app-chip size="sm">
-    {{ tokenValue }}
-  </app-chip>
+  <price-label
+    :price="formatAettosToAe(tokenValue)"
+    :contract-id="contractDetails.tokenDetails.contractId"
+    :currency="contractDetails.symbol"/>
 </template>
 
 <script setup>
 import { formatNumber, formatReduceDecimals } from '@/utils/format'
-import AppChip from '@/components/AppChip'
 
 const props = defineProps({
   contractDetails: {
diff --git a/src/components/ContractEventCellMint.vue b/src/components/ContractEventCellMint.vue
index 575600617..be23a9999 100644
--- a/src/components/ContractEventCellMint.vue
+++ b/src/components/ContractEventCellMint.vue
@@ -9,14 +9,14 @@
     :hash="eventData[0]"
     :link-to="`/accounts/${eventData[0]}`"/>
 
-  <app-chip size="sm">
-    {{ tokenValue }}
-  </app-chip>
+  <price-label
+    :price="formatAettosToAe(tokenValue)"
+    :contract-id="contractDetails.tokenDetails.contractId"
+    :currency="contractDetails.symbol"/>
 </template>
 
 <script setup>
 import { formatNumber, formatReduceDecimals } from '@/utils/format'
-import AppChip from '@/components/AppChip'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
diff --git a/src/components/ContractEventCellSwap.vue b/src/components/ContractEventCellSwap.vue
index a3e7b17a3..f4e872f7d 100644
--- a/src/components/ContractEventCellSwap.vue
+++ b/src/components/ContractEventCellSwap.vue
@@ -5,14 +5,10 @@
 
   <transaction-arrow-right-icon/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(eventData[1])) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(eventData[1])"/>
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
diff --git a/src/components/ContractEventCellTransfer.vue b/src/components/ContractEventCellTransfer.vue
index d7a97d0ff..edfeed330 100644
--- a/src/components/ContractEventCellTransfer.vue
+++ b/src/components/ContractEventCellTransfer.vue
@@ -8,15 +8,14 @@
   <value-hash-ellipsed
     :hash="eventData[1]"
     :link-to="`/accounts/${eventData[1]}`"/>
-
-  <app-chip size="sm">
-    {{ tokenValue }}
-  </app-chip>
+  <price-label
+    :price="formatAettosToAe(tokenValue)"
+    :contract-id="contractDetails.tokenDetails.contractId"
+    :currency="contractDetails.symbol"/>
 </template>
 
 <script setup>
 import { formatNumber, formatReduceDecimals } from '@/utils/format'
-import AppChip from '@/components/AppChip'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
diff --git a/src/components/DashboardAuctionsSwiper.vue b/src/components/DashboardAuctionsSwiper.vue
index d185004a9..b7536069d 100644
--- a/src/components/DashboardAuctionsSwiper.vue
+++ b/src/components/DashboardAuctionsSwiper.vue
@@ -45,7 +45,7 @@
               </app-tooltip>
             </th>
             <td class="dashboard-auctions-swiper__data">
-              {{ formatAePrice(auction.bid) }}
+              <price-label :price="auction.bid"/>
             </td>
           </tr>
           <tr>
@@ -76,7 +76,6 @@
 import { storeToRefs } from 'pinia'
 import AppLink from '@/components/AppLink'
 import { useNamesStore } from '@/stores/names'
-import { formatAePrice } from '@/utils/format'
 import { namesHints } from '@/utils/hints/namesHints'
 import AppSwiper from '@/components/AppSwiper'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
diff --git a/src/components/DashboardAuctionsTable.vue b/src/components/DashboardAuctionsTable.vue
index deb6dfc4c..718963d7a 100644
--- a/src/components/DashboardAuctionsTable.vue
+++ b/src/components/DashboardAuctionsTable.vue
@@ -43,9 +43,7 @@
           </div>
         </td>
         <td>
-          <div class="dashboard-auctions-table__value">
-            {{ formatAePrice(auction.bid) }}
-          </div>
+          <price-label :price="auction.bid"/>
         </td>
         <td>
           <div class="dashboard-auctions-table__blocks">
@@ -63,7 +61,6 @@ import { storeToRefs } from 'pinia'
 import AppLink from '@/components/AppLink'
 import { namesHints } from '@/utils/hints/namesHints'
 import { useNamesStore } from '@/stores/names'
-import { formatAePrice } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
 const { auctionsEndingSoon } = storeToRefs(useNamesStore())
@@ -81,10 +78,6 @@ const { auctionsEndingSoon } = storeToRefs(useNamesStore())
     margin: 0 var(--space-0) var(--space-0) 0;
   }
 
-  &__value {
-    font-weight: 700;
-  }
-
   &__blocks {
     margin-bottom: var(--space-0);
   }
diff --git a/src/components/DashboardNamesSwiper.vue b/src/components/DashboardNamesSwiper.vue
index 5259c3586..53f389a0b 100644
--- a/src/components/DashboardNamesSwiper.vue
+++ b/src/components/DashboardNamesSwiper.vue
@@ -45,7 +45,7 @@
               </app-tooltip>
             </th>
             <td class="dashboard-names-swiper__data">
-              {{ formatNullable(formatAePrice(name.price)) }}
+              <price-label :price="name.price"/>
             </td>
           </tr>
           <tr>
@@ -75,7 +75,6 @@
 import { storeToRefs } from 'pinia'
 import AppLink from '@/components/AppLink'
 import { useNamesStore } from '@/stores/names'
-import { formatAePrice, formatNullable } from '@/utils/format'
 import { namesHints } from '@/utils/hints/namesHints'
 import AppSwiper from '@/components/AppSwiper'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
diff --git a/src/components/DashboardNamesTable.vue b/src/components/DashboardNamesTable.vue
index 99ebfe215..c0c0ec8be 100644
--- a/src/components/DashboardNamesTable.vue
+++ b/src/components/DashboardNamesTable.vue
@@ -46,8 +46,8 @@
           <div class="dashboard-names-table__label">
             {{ name.isAuction ? 'Auction' : 'Fixed price' }}
           </div>
-          <div class="dashboard-names-table__name-price">
-            {{ formatNullable(formatAePrice(name.price)) }}
+          <div>
+            <price-label :price="name.price"/>
           </div>
         </td>
         <td>
@@ -66,7 +66,6 @@ import { storeToRefs } from 'pinia'
 import AppLink from '@/components/AppLink'
 import { namesHints } from '@/utils/hints/namesHints'
 import { useNamesStore } from '@/stores/names'
-import { formatAePrice, formatNullable } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
 const { recentlyActivatedNames } = storeToRefs(useNamesStore())
@@ -84,10 +83,6 @@ const { recentlyActivatedNames } = storeToRefs(useNamesStore())
     margin: 0 var(--space-0) var(--space-0) 0;
   }
 
-  &__name-price {
-    font-weight: 700;
-  }
-
   &__blocks {
     margin-bottom: var(--space-0);
   }
diff --git a/src/components/DashboardStateChannelsSwiper.vue b/src/components/DashboardStateChannelsSwiper.vue
index 412987759..2b01e2108 100644
--- a/src/components/DashboardStateChannelsSwiper.vue
+++ b/src/components/DashboardStateChannelsSwiper.vue
@@ -71,7 +71,7 @@
               </app-tooltip>
             </th>
             <td class="dashboard-state-channels-swiper__data">
-              {{ formatAePrice(channel.amount) }}
+              <price-label :price="channel.amount"/>
             </td>
           </tr>
           <tr>
@@ -114,7 +114,6 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useDashboardStateChannelsStore } from '@/stores/dashboardStateChannels'
-import { formatAePrice } from '@/utils/format'
 import AppSwiper from '@/components/AppSwiper'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
diff --git a/src/components/DashboardStateChannelsTable.vue b/src/components/DashboardStateChannelsTable.vue
index 06d1eba4d..1441a2045 100644
--- a/src/components/DashboardStateChannelsTable.vue
+++ b/src/components/DashboardStateChannelsTable.vue
@@ -72,7 +72,7 @@
           {{ channel.updateCount }}
         </td>
         <td>
-          {{ formatAePrice(channel.amount) }}
+          <price-label :price="channel.amount"/>
         </td>
         <td>
           <block-time-cell
@@ -88,7 +88,6 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useDashboardStateChannelsStore } from '@/stores/dashboardStateChannels'
-import { formatAePrice } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
 
diff --git a/src/components/KeyblockDetailsPanel.vue b/src/components/KeyblockDetailsPanel.vue
index 7b0f42982..a1680947e 100644
--- a/src/components/KeyblockDetailsPanel.vue
+++ b/src/components/KeyblockDetailsPanel.vue
@@ -108,7 +108,7 @@
             Beneficiary Reward
           </th>
           <td>
-            {{ formatNullable(formatAePrice(keyblockDetails.blockReward, null)) }}
+            <price-label :price="keyblockDetails.blockReward"/>
           </td>
         </tr>
         <tr class="keyblock-details-panel__row">
@@ -119,7 +119,7 @@
             BRI Reward
           </th>
           <td>
-            {{ formatNullable(formatAePrice(keyblockDetails.devReward, null)) }}
+            <price-label :price="keyblockDetails.devReward"/>
           </td>
         </tr>
         <tr class="keyblock-details-panel__row">
@@ -183,7 +183,7 @@ import AppPanel from '@/components/AppPanel'
 import CopyChip from '@/components/CopyChip'
 import PaginationButton from '@/components/PaginationButton'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatEllipseHash, formatNumber } from '@/utils/format'
+import { formatEllipseHash, formatNumber } from '@/utils/format'
 import { useRecentBlocksStore } from '@/stores/recentBlocks'
 
 const { NODE_URL, MIDDLEWARE_URL } = useRuntimeConfig().public
diff --git a/src/components/KeyblockTable.vue b/src/components/KeyblockTable.vue
index 0801fd952..c6cc9a005 100644
--- a/src/components/KeyblockTable.vue
+++ b/src/components/KeyblockTable.vue
@@ -48,7 +48,7 @@
           </hint-tooltip>
         </th>
         <td class="keyblock-table__data">
-          {{ formatNullable(formatAePrice(stats?.blockReward)) }}
+          <price-label :price="stats?.blockReward"/>
         </td>
       </tr>
 
@@ -69,7 +69,7 @@
           </hint-tooltip>
         </th>
         <td class="keyblock-table__data">
-          {{ formatNullable(formatAePrice(stats?.devReward, null)) }}
+          <price-label :price="formatNullable(stats?.devReward, null)"/>
         </td>
       </tr>
     </tbody>
@@ -78,7 +78,7 @@
 
 <script setup>
 import { keyblocksHints } from '@/utils/hints/keyblocksHints'
-import { formatAePrice, formatNullable } from '@/utils/format'
+import { formatNullable } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import HintTooltip from '@/components/HintTooltip'
 
diff --git a/src/components/KeyblockTableCondensed.vue b/src/components/KeyblockTableCondensed.vue
index a22f3c405..b6f465baa 100644
--- a/src/components/KeyblockTableCondensed.vue
+++ b/src/components/KeyblockTableCondensed.vue
@@ -61,7 +61,7 @@
           </hint-tooltip>
         </th>
         <td class="keyblock-table-condensed__data">
-          {{ formatNullable(formatAePrice(stats?.blockReward)) }}
+          <price-label :price="stats?.blockReward"/>
         </td>
       </tr>
       <tr class="keyblock-table-condensed__row">
@@ -72,7 +72,7 @@
           </hint-tooltip>
         </th>
         <td class="keyblock-table-condensed__data">
-          {{ formatNullable(formatAePrice(stats?.devReward, null)) }}
+          <price-label :price="formatNullable(stats?.devReward, null)"/>
         </td>
       </tr>
     </tbody>
@@ -81,7 +81,7 @@
 
 <script setup>
 import { keyblocksHints } from '@/utils/hints/keyblocksHints'
-import { formatAePrice, formatNullable } from '@/utils/format'
+import { formatNullable } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
 defineProps({
diff --git a/src/components/MarketStats.vue b/src/components/MarketStats.vue
index f0dd5214b..2c8e0b962 100644
--- a/src/components/MarketStats.vue
+++ b/src/components/MarketStats.vue
@@ -32,10 +32,16 @@
           Distribution:
         </div>
         <div class="market-stats__value">
-          {{ formatNullable(formatAePrice(distribution, 0)) }} /
-          {{ formatAePrice(MAX_AE_DISTRIBUTION, 0) }} ({{
-            formatNullable(distributionPercentage)
-          }}%)
+          <div class="market-stats__container">
+            <price-label
+              :has-icon="false"
+              :price="distribution"/>
+            /
+            <price-label
+              :has-icon="false"
+              :price="MAX_AE_DISTRIBUTION"/>
+            ({{ formatNullable(distributionPercentage) }}%)
+          </div>
         </div>
       </li>
     </ul>
@@ -46,7 +52,7 @@
 import { storeToRefs } from 'pinia'
 import { useRuntimeConfig } from 'nuxt/app'
 import { MAX_AE_DISTRIBUTION } from '@/utils/constants'
-import { formatAePrice, formatNullable, formatNumber } from '@/utils/format'
+import { formatNullable, formatNumber } from '@/utils/format'
 import { useMarketStatsStore } from '@/stores/marketStats'
 import TrendChip from '@/components/TrendChip'
 
@@ -127,5 +133,9 @@ const {
       margin: 0 0 0 var(--space-1);
     }
   }
+
+  &__container {
+    gap: 8px;
+  }
 }
 </style>
diff --git a/src/components/NameDetailsPanel.vue b/src/components/NameDetailsPanel.vue
index 9690e8cac..73cb951d5 100644
--- a/src/components/NameDetailsPanel.vue
+++ b/src/components/NameDetailsPanel.vue
@@ -63,7 +63,9 @@
             Highest Bid
           </th>
           <td>
-            {{ formatAePrice(name.bid) }}
+            <price-label
+              class="name-details-panel__data"
+              :price="name.bid"/>
           </td>
         </tr>
         <tr
@@ -151,7 +153,7 @@ import AppChip from '@/components/AppChip'
 import CopyChip from '@/components/CopyChip'
 import HintTooltip from '@/components/HintTooltip'
 import { useNameDetailsStore } from '@/stores/nameDetails'
-import { formatAePrice, formatEllipseHash } from '@/utils/format'
+import { formatEllipseHash } from '@/utils/format'
 
 const { name } = storeToRefs(useNameDetailsStore())
 const state = name.value.state
diff --git a/src/components/NameHistoryDataCellNameClaimEvent.vue b/src/components/NameHistoryDataCellNameClaimEvent.vue
index ff121691f..29633c589 100644
--- a/src/components/NameHistoryDataCellNameClaimEvent.vue
+++ b/src/components/NameHistoryDataCellNameClaimEvent.vue
@@ -4,11 +4,9 @@
     :link-to="`/accounts/${payload.tx.accountId}`"/>
 
   <app-tooltip>
-    <app-chip
+    <price-label
       v-if="formatAettosToAe(payload.tx.nameFee)"
-      size="sm">
-      {{ formatAePrice(formatAettosToAe(payload.tx.nameFee), null) }}
-    </app-chip>
+      :price="formatAettosToAe(payload.tx.nameFee)"/>
     <template #tooltip>
       Fee
     </template>
diff --git a/src/components/NamesActiveTable.vue b/src/components/NamesActiveTable.vue
index 50388eadf..e0cf274e4 100644
--- a/src/components/NamesActiveTable.vue
+++ b/src/components/NamesActiveTable.vue
@@ -61,11 +61,9 @@
               :link-to="`/accounts/${name.buyer}`"/>
           </td>
           <td>
-            <app-chip
-              variant="secondary"
-              class="names-active-table__price-label">
-              {{ formatAePrice(name.fee) }}
-            </app-chip>
+            <price-label
+              class="names-active-table__price-label"
+              :price="name.fee"/>
           </td>
           <td>
             <value-hash-ellipsed
@@ -88,9 +86,7 @@
 
 <script setup>
 import { namesHints } from '@/utils/hints/namesHints'
-import AppChip from '@/components/AppChip'
 import AppLink from '@/components/AppLink'
-import { formatAePrice } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
 defineProps({
@@ -104,7 +100,6 @@ defineProps({
 <style scoped>
 .names-active-table {
   &__price-label {
-    font-weight: 700;
     margin-top: var(--space-0);
   }
 
diff --git a/src/components/NamesActiveTableCondensed.vue b/src/components/NamesActiveTableCondensed.vue
index ff65e41fa..8e29a8365 100644
--- a/src/components/NamesActiveTableCondensed.vue
+++ b/src/components/NamesActiveTableCondensed.vue
@@ -64,9 +64,7 @@
             </app-tooltip>
           </th>
           <td class="names-active-table-condensed__data">
-            <app-chip variant="secondary">
-              {{ formatAePrice(name.fee) }}
-            </app-chip>
+            <price-label :price="name.fee"/>
           </td>
         </tr>
         <tr class="names-active-table-condensed__row">
@@ -114,9 +112,7 @@
 
 <script setup>
 import { namesHints } from '@/utils/hints/namesHints'
-import AppChip from '@/components/AppChip'
 import AppLink from '@/components/AppLink'
-import { formatAePrice } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
 defineProps({
diff --git a/src/components/NamesExpiredTable.vue b/src/components/NamesExpiredTable.vue
index 060984ef3..66f2439a8 100644
--- a/src/components/NamesExpiredTable.vue
+++ b/src/components/NamesExpiredTable.vue
@@ -55,11 +55,9 @@
             :link-to="`/accounts/${name.lastBuyer}`"/>
         </td>
         <td>
-          <app-chip
-            variant="secondary"
-            class="names-expired-table__price-label">
-            {{ formatAePrice(name.fee) }}
-          </app-chip>
+          <price-label
+            class="names-expired-table__price-label"
+            :price="name.fee"/>
         </td>
         <td>
           <value-hash-ellipsed
@@ -72,9 +70,7 @@
 </template>
 
 <script setup>
-import AppChip from '@/components/AppChip'
 import AppLink from '@/components/AppLink'
-import { formatAePrice } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import { namesHints } from '@/utils/hints/namesHints'
 
@@ -89,7 +85,6 @@ defineProps({
 <style scoped>
 .names-expired-table {
   &__price-label {
-    font-weight: 700;
     margin-top: var(--space-0);
   }
 
diff --git a/src/components/NamesExpiredTableCondensed.vue b/src/components/NamesExpiredTableCondensed.vue
index 55f5eec97..945d0c84a 100644
--- a/src/components/NamesExpiredTableCondensed.vue
+++ b/src/components/NamesExpiredTableCondensed.vue
@@ -64,9 +64,7 @@
             </app-tooltip>
           </th>
           <td class="names-expired-table-condensed__data">
-            <app-chip variant="secondary">
-              {{ formatAePrice(name.fee) }}
-            </app-chip>
+            <price-label :price="name.fee"/>
           </td>
         </tr>
         <tr class="names-expired-table-condensed__row">
@@ -90,9 +88,7 @@
 </template>
 
 <script setup>
-import AppChip from '@/components/AppChip'
 import AppLink from '@/components/AppLink'
-import { formatAePrice } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import { namesHints } from '@/utils/hints/namesHints'
 
diff --git a/src/components/NamesInAuctionTable.vue b/src/components/NamesInAuctionTable.vue
index d0e04cc89..e17e1f050 100644
--- a/src/components/NamesInAuctionTable.vue
+++ b/src/components/NamesInAuctionTable.vue
@@ -49,11 +49,9 @@
             :timestamp="name.expiration"/>
         </td>
         <td>
-          <app-chip
-            variant="secondary"
-            class="names-in-auction-table__price-label">
-            {{ formatAePrice(name.bid) }}
-          </app-chip>
+          <price-label
+            :price="name.bid"
+            class="names-in-auction-table__price-label"/>
         </td>
         <td>
           <div>
@@ -86,7 +84,6 @@ defineProps({
 <style scoped>
 .names-in-auction-table {
   &__price-label {
-    font-weight: 700;
     margin-top: var(--space-0);
   }
 }
diff --git a/src/components/NamesInAuctionTableCondensed.vue b/src/components/NamesInAuctionTableCondensed.vue
index 35ccb30d7..33c7ef22a 100644
--- a/src/components/NamesInAuctionTableCondensed.vue
+++ b/src/components/NamesInAuctionTableCondensed.vue
@@ -48,9 +48,7 @@
             </app-tooltip>
           </th>
           <td class="names-in-auction-table-condensed__data">
-            <app-chip variant="secondary">
-              {{ formatAePrice(name.bid) }}
-            </app-chip>
+            <price-label :price="name.bid"/>
           </td>
         </tr>
         <tr class="names-in-auction-table-condensed__row">
@@ -88,9 +86,7 @@
 </template>
 
 <script setup>
-import AppChip from '@/components/AppChip'
 import AppLink from '@/components/AppLink'
-import { formatAePrice } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import { namesHints } from '@/utils/hints/namesHints'
 
diff --git a/src/components/OracleDetailsPanel.vue b/src/components/OracleDetailsPanel.vue
index 3d548b383..37792d030 100644
--- a/src/components/OracleDetailsPanel.vue
+++ b/src/components/OracleDetailsPanel.vue
@@ -127,7 +127,7 @@
             Query Fee
           </th>
           <td>
-            {{ formatAePrice(oracleDetails.fee, null) }}
+            <price-label :price="oracleDetails.fee"/>
           </td>
         </tr>
         <tr class="oracle-details-panel__row">
@@ -203,7 +203,6 @@
 </template>
 
 <script setup>
-import { formatAePrice } from '@/utils/format'
 import { oraclesHints } from '@/utils/hints/oraclesHints'
 import HintTooltip from '@/components/HintTooltip'
 import AppLink from '@/components/AppLink'
diff --git a/src/components/OracleEventsQueryPanel.vue b/src/components/OracleEventsQueryPanel.vue
index e84f56014..f37d01439 100644
--- a/src/components/OracleEventsQueryPanel.vue
+++ b/src/components/OracleEventsQueryPanel.vue
@@ -20,7 +20,9 @@
         </hint-tooltip>
         Query Fee
       </dt>
-      <dd>{{ formatAePrice(event.queryFee) }}</dd>
+      <dd>
+        <price-label :price="event.queryFee"/>
+      </dd>
 
       <dt class="oracle-events-query-panel_term">
         <hint-tooltip variant="dark">
diff --git a/src/components/OraclesTable.vue b/src/components/OraclesTable.vue
index 669a04b08..ed2da8b5c 100644
--- a/src/components/OraclesTable.vue
+++ b/src/components/OraclesTable.vue
@@ -48,7 +48,7 @@
             :timestamp="oracle.expiration"/>
         </td>
         <td class="oracles-table__data">
-          {{ formatAePrice(oracle.queryFee) }}
+          <price-label :price="oracle.queryFee"/>
         </td>
       </tr>
     </tbody>
@@ -58,7 +58,6 @@
 <script setup>
 import { oraclesHints } from '@/utils/hints/oraclesHints'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import { formatAePrice } from '@/utils/format'
 import HintTooltip from '@/components/HintTooltip'
 
 defineProps({
diff --git a/src/components/OraclesTableCondensed.vue b/src/components/OraclesTableCondensed.vue
index 425a81e9f..52e94e3b8 100644
--- a/src/components/OraclesTableCondensed.vue
+++ b/src/components/OraclesTableCondensed.vue
@@ -60,7 +60,7 @@
             </app-tooltip>
           </th>
           <td class="oracles-table-condensed__data">
-            {{ formatAePrice(oracle.queryFee) }}
+            <price-label :price="oracle.queryFee"/>
           </td>
         </tr>
       </tbody>
@@ -70,7 +70,6 @@
 
 <script setup>
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
-import { formatAePrice } from '@/utils/format'
 import { oraclesHints } from '@/utils/hints/oraclesHints'
 
 defineProps({
diff --git a/src/components/PriceLabel.vue b/src/components/PriceLabel.vue
new file mode 100644
index 000000000..f2e586946
--- /dev/null
+++ b/src/components/PriceLabel.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="price-label">
+    <token-symbol-icon
+      v-if="hasIcon"
+      class="price-label__icon"
+      :contract-id="contractId"/>
+    <app-tooltip v-if="isPriceRounded">
+      {{ priceRounded }}
+      <template #tooltip>
+        {{ price }}
+      </template>
+    </app-tooltip>
+    <template v-else>
+      {{ price }}
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { useRuntimeConfig } from 'nuxt/app'
+import { formatNullable } from '@/utils/format'
+import AppTooltip from '@/components/AppTooltip'
+
+const props = defineProps({
+  price: {
+    type: Number,
+    default: null,
+  },
+  maxDigits: {
+    type: Number,
+    required: true,
+  },
+  currency: {
+    type: String,
+    default: undefined,
+  },
+  hasIcon: {
+    type: Boolean,
+    default: true,
+  },
+  contractId: {
+    type: String,
+    default: () => useRuntimeConfig().public.AE_TOKEN_ID,
+  },
+})
+
+const isPriceRounded = computed(() =>
+  priceRounded.value !== price.value,
+)
+const priceRounded = computed(() =>
+  formatNullable(formatAePrice(props.price, props.maxDigits, props.currency)),
+)
+const price = computed(() =>
+  formatNullable(formatAePrice(props.price, null, props.currency)),
+)
+</script>
+
+<style scoped>
+.price-label {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  height: 20px;
+
+  &__icon {
+    width: 20px;
+    height: 20px;
+    margin-right: var(--space-1);
+  }
+}
+</style>
diff --git a/src/components/StateChannelDetailsPanel.vue b/src/components/StateChannelDetailsPanel.vue
index 02285c652..283a4388b 100644
--- a/src/components/StateChannelDetailsPanel.vue
+++ b/src/components/StateChannelDetailsPanel.vue
@@ -59,7 +59,7 @@
             Initial Amount
           </th>
           <td>
-            {{ formatAePrice(stateChannelDetails.initialAmount, null) }}
+            <price-label :price="stateChannelDetails.initialAmount"/>
           </td>
         </tr>
         <tr class="state-channel-details-panel__row">
@@ -128,7 +128,7 @@
             Locked
           </th>
           <td>
-            {{ formatAePrice(stateChannelDetails.aeLocked, null) }}
+            <price-label :price="stateChannelDetails.aeLocked"/>
           </td>
         </tr>
         <tr class="state-channel-details-panel__row">
@@ -201,7 +201,6 @@
 </template>
 
 <script setup>
-import { formatAePrice } from '@/utils/format'
 import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
 import AppLink from '@/components/AppLink'
 import AppChip from '@/components/AppChip'
diff --git a/src/components/StateChannelsTable.vue b/src/components/StateChannelsTable.vue
index fe99e5c21..fb42f105a 100644
--- a/src/components/StateChannelsTable.vue
+++ b/src/components/StateChannelsTable.vue
@@ -71,7 +71,9 @@
           </div>
         </td>
         <td>{{ channel.updateCount }}</td>
-        <td>{{ channel.locked }}</td>
+        <td>
+          <price-label :price="channel.locked"/>
+        </td>
         <td>
           <block-time-cell
             :height="channel.updatedHeight"
diff --git a/src/components/StatsPanel.vue b/src/components/StatsPanel.vue
index 935ea5e66..b0f2548de 100644
--- a/src/components/StatsPanel.vue
+++ b/src/components/StatsPanel.vue
@@ -55,10 +55,20 @@
       title="KEYBLOCK REWARD"
       icon-name="keyblock-reward">
       <div>
-        Beneficiary: <span class="stats-panel__value">{{ formatNullable(formatAePrice(latestReward, 2)) }}</span>
+        Beneficiary:
+        <price-label
+          class="stats-panel__value"
+          :price="latestReward"
+          :max-digits="2"
+          :has-icon="false"/>
       </div>
       <div>
-        BRI: <span class="stats-panel__value">{{ formatNullable(formatAePrice(latestBri, 2)) }}</span>
+        BRI:
+        <price-label
+          class="stats-panel__value"
+          :price="latestBri"
+          :max-digits="2"
+          :has-icon="false"/>
       </div>
       <template #tooltip>
         For each mined keyblock a reward is distributed. The amount of Æ distributed depends on the inflation curve.
@@ -83,15 +93,17 @@
       icon-name="supply">
       <div>
         Burned:
-        <span class="stats-panel__value">
-          {{ formatNullable(formatAePrice(burnedCount, 0)) }}
-        </span>
+        <price-label
+          class="stats-panel__value"
+          :price="burnedCount"
+          :has-icon="false"/>
       </div>
       <div>
         Circulating:
-        <span class="stats-panel__value">
-          {{ formatNullable(formatAePrice(totalTokenSupply, 0)) }}
-        </span>
+        <price-label
+          class="stats-panel__value"
+          :price="totalTokenSupply"
+          :has-icon="false"/>
       </div>
       <template #tooltip>
         Circulating supply is the distributed amount of Æ minus the burned amount of Æ. The protocol automatically burns
@@ -109,7 +121,12 @@
         Active: <span class="stats-panel__value">{{ formatNullable(formatNumber(stateChannelsCount)) }}</span>
       </div>
       <div>
-        Locked: <span class="stats-panel__value">{{ formatNullable(formatAePrice(stateChannelsLockedValue, 2)) }}</span>
+        Locked:
+        <price-label
+          class="stats-panel__value"
+          :price="stateChannelsLockedValue"
+          :max-digits="2"
+          :has-icon="false"/>
       </div>
       <template #tooltip>
         By utilizing
@@ -197,7 +214,7 @@ import { storeToRefs } from 'pinia'
 import AppLink from '@/components/AppLink'
 import AppPanel from '@/components/AppPanel'
 import StatsTile from '@/components/StatsTile'
-import { formatAePrice, formatNullable, formatNumber } from '@/utils/format'
+import { formatNullable, formatNumber } from '@/utils/format'
 import { useBlockchainStatsStore } from '@/stores/blockchainStats'
 import { useRecentBlocksStore } from '@/stores/recentBlocks'
 
diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
index cad9a9ac6..39ef2f918 100644
--- a/src/components/TokenDetailsPanel.vue
+++ b/src/components/TokenDetailsPanel.vue
@@ -40,7 +40,10 @@
             Price
           </th>
           <td>
-            {{ formatAePrice(tokenDetails.price) }} ({{ fiatPrice }})
+            <div class="token-details-panel__container">
+              <price-label :price="tokenDetails.price"/>
+              ({{ fiatPrice }})
+            </div>
           </td>
         </tr>
         <tr
@@ -64,7 +67,10 @@
             Total supply
           </th>
           <td>
-            {{ formatNumber(tokenDetails.totalSupply) }} {{ tokenDetails.symbol }}
+            <price-label
+              :price="tokenDetails.totalSupply"
+              :currency="tokenDetails.symbol"
+              :contract-id="tokenDetails.contractId"/>
           </td>
         </tr>
         <tr class="token-details-panel__row">
@@ -154,7 +160,7 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useMarketStatsStore } from '@/stores/marketStats'
-import { formatAePrice, formatNumber } from '@/utils/format'
+import { formatNumber } from '@/utils/format'
 import TokenSymbolIcon from '@/components/TokenSymbolIcon'
 import { tokensHints } from '@/utils/hints/tokensHints'
 
diff --git a/src/components/TokenEventsDataCell.vue b/src/components/TokenEventsDataCell.vue
index 9fca6c07c..98cc1402f 100644
--- a/src/components/TokenEventsDataCell.vue
+++ b/src/components/TokenEventsDataCell.vue
@@ -4,20 +4,22 @@
       <value-hash-ellipsed
         :hash="args[0]"
         :link-to="`/accounts/${args[0]}`"/>
-      <app-chip class="token-events-data-cell__chip">
-        {{ formatNumber(args[1] / 10 ** tokenDetails.decimals, 0, 4) }}
-        {{ tokenDetails.symbol }}
-      </app-chip>
+      <price-label
+        :price="args[1] / 10 ** tokenDetails.decimals"
+        :max-digits="4"
+        :currency="tokenDetails.symbol"
+        :contract-id="tokenDetails.contractId"/>
     </template>
 
     <template v-else-if="name === 'Burn'">
       <value-hash-ellipsed
         :hash="args[0]"
         :link-to="`/accounts/${args[0]}`"/>
-      <app-chip class="token-events-data-cell__chip">
-        {{ formatNumber(args[1] / 10 ** tokenDetails.decimals, 0, 4) }}
-        {{ tokenDetails.symbol }}
-      </app-chip>
+      <price-label
+        :price="args[1] / 10 ** tokenDetails.decimals"
+        :max-digits="4"
+        :currency="tokenDetails.symbol"
+        :contract-id="tokenDetails.contractId"/>
     </template>
 
     <template v-else-if="name === 'Transfer'">
@@ -28,10 +30,11 @@
       <value-hash-ellipsed
         :hash="args[1]"
         :link-to="`/accounts/${args[1]}`"/>
-      <app-chip class="token-events-data-cell__chip">
-        {{ formatNumber(args[2] / 10 ** tokenDetails.decimals, 0, 4) }}
-        {{ tokenDetails.symbol }}
-      </app-chip>
+      <price-label
+        :price="args[2] / 10 ** tokenDetails.decimals"
+        :max-digits="4"
+        :currency="tokenDetails.symbol"
+        :contract-id="tokenDetails.contractId"/>
     </template>
 
     <template v-else-if="name === 'Allowance'">
@@ -42,10 +45,11 @@
       <value-hash-ellipsed
         :hash="args[1]"
         :link-to="`/accounts/${args[1]}`"/>
-      <app-chip class="token-events-data-cell__chip">
-        {{ formatNumber(args[2] / 10 ** tokenDetails.decimals, 0, 4) }}
-        {{ tokenDetails.symbol }}
-      </app-chip>
+      <price-label
+        :price="args[2] / 10 ** tokenDetails.decimals"
+        :max-digits="4"
+        :currency="tokenDetails.symbol"
+        :contract-id="tokenDetails.contractId"/>
     </template>
     <template v-else>
       N/A
diff --git a/src/components/TokenHoldersTable.vue b/src/components/TokenHoldersTable.vue
index d84b9198e..db7f7705d 100644
--- a/src/components/TokenHoldersTable.vue
+++ b/src/components/TokenHoldersTable.vue
@@ -32,10 +32,13 @@
             :link-to="`/accounts/${holder.address}`"/>
         </td>
         <td>
-          {{ formatNumber(holder.amount, 0, tokenDetails.decimals) }} {{ tokenDetails.symbol }}
+          <price-label
+            :price="holder.amount"
+            :currency="tokenDetails.symbol"
+            :contract-id="holder.contractId"/>
         </td>
         <td>
-          {{ formatPercentage(holder.percentage) }}
+          {{ holder.percentage }}
         </td>
       </tr>
     </tbody>
@@ -43,7 +46,6 @@
 </template>
 
 <script setup>
-import { formatNumber } from '@/utils/format'
 import { tokensHints } from '@/utils/hints/tokensHints'
 
 defineProps({
@@ -56,16 +58,4 @@ defineProps({
     required: true,
   },
 })
-
-function formatPercentage(percentage) {
-  if (percentage >= 0.00001) {
-    return `${formatNumber(percentage)} %`
-  }
-  if (percentage === 0) {
-    return '0 %'
-  }
-  if (percentage < 0.00001) {
-    return '~0 %'
-  }
-}
 </script>
diff --git a/src/components/TokenHoldersTableCondensed.vue b/src/components/TokenHoldersTableCondensed.vue
index 218ee0bef..4ca02c386 100644
--- a/src/components/TokenHoldersTableCondensed.vue
+++ b/src/components/TokenHoldersTableCondensed.vue
@@ -29,7 +29,10 @@
           </app-tooltip>
         </th>
         <td class="token-holders-table-condensed__data">
-          {{ formatNumber(holder.amount, 0, tokenDetails.decimals) }} {{ tokenDetails.symbol }}
+          <price-label
+            :price="holder.amount"
+            :currency="tokenDetails.symbol"
+            :contract-id="holder.contractId"/>
         </td>
       </tr>
       <tr class="token-holders-table-condensed__row">
@@ -42,7 +45,7 @@
           </app-tooltip>
         </th>
         <td class="token-holders-table-condensed__data">
-          {{ formatPercentage(holder.percentage) }}
+          {{ holder.percentage }}
         </td>
       </tr>
     </table>
@@ -50,7 +53,6 @@
 </template>
 
 <script setup>
-import { formatNumber } from '@/utils/format'
 import { tokensHints } from '@/utils/hints/tokensHints'
 
 defineProps({
@@ -64,17 +66,6 @@ defineProps({
   },
 })
 
-function formatPercentage(percentage) {
-  if (percentage >= 0.00001) {
-    return `${formatNumber(percentage)} %`
-  }
-  if (percentage === 0) {
-    return '0 %'
-  }
-  if (percentage < 0.00001) {
-    return '~0 %'
-  }
-}
 </script>
 
 <style scoped>
diff --git a/src/components/TopAccountsTable.vue b/src/components/TopAccountsTable.vue
index ad6a7a6f4..891486c1f 100644
--- a/src/components/TopAccountsTable.vue
+++ b/src/components/TopAccountsTable.vue
@@ -37,7 +37,10 @@
           {{ account.account }}
         </app-link>
       </td>
-      <td>{{ account.balance }}</td>
+      <td>
+        <price-label :price=" account.balance "/>
+      </td>
+
       <td>{{ account.percentage }} %</td>
     </tr>
   </table>
diff --git a/src/components/TransactionCellChannelCloseMutualTx.vue b/src/components/TransactionCellChannelCloseMutualTx.vue
index 399ca18df..136fd12ec 100644
--- a/src/components/TransactionCellChannelCloseMutualTx.vue
+++ b/src/components/TransactionCellChannelCloseMutualTx.vue
@@ -1,13 +1,9 @@
 <template>
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.initiatorAmountFinal)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionData.initiatorAmountFinal)"/>
 
   <transaction-plus-icon/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.responderAmountFinal)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionData.responderAmountFinal)"/>
 
   <value-hash-ellipsed
     :hash="transactionData.channelId"
@@ -15,8 +11,7 @@
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 import TransactionPlusIcon from '@/components/TransactionPlusIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
diff --git a/src/components/TransactionCellChannelCreateTx.vue b/src/components/TransactionCellChannelCreateTx.vue
index 2560bf13a..0218af7c3 100644
--- a/src/components/TransactionCellChannelCreateTx.vue
+++ b/src/components/TransactionCellChannelCreateTx.vue
@@ -3,19 +3,14 @@
     :hash="transactionData.initiatorId"
     :link-to="`/accounts/${transactionData.initiatorId}`"/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.initiatorAmount)) }}
-  </app-chip>
-
+  <price-label :price="formatAettosToAe(transactionData.initiatorAmount)"/>
   <transaction-plus-icon/>
 
   <value-hash-ellipsed
     :hash="transactionData.responderId"
     :link-to="`/accounts/${transactionData.responderId}`"/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.responderAmount)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionData.responderAmount)"/>
 
   <transaction-arrow-right-icon/>
 
@@ -25,8 +20,7 @@
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import TransactionPlusIcon from '@/components/TransactionPlusIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
diff --git a/src/components/TransactionCellChannelDepositTx.vue b/src/components/TransactionCellChannelDepositTx.vue
index e2b3f074b..3a4d0f945 100644
--- a/src/components/TransactionCellChannelDepositTx.vue
+++ b/src/components/TransactionCellChannelDepositTx.vue
@@ -9,14 +9,11 @@
     :hash="transactionData.channelId"
     :link-to="`/state-channels/${transactionData.channelId}`"/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.fee)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionData.fee)"/>
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
diff --git a/src/components/TransactionCellChannelSettleTx.vue b/src/components/TransactionCellChannelSettleTx.vue
index caa09f1f1..6eae91664 100644
--- a/src/components/TransactionCellChannelSettleTx.vue
+++ b/src/components/TransactionCellChannelSettleTx.vue
@@ -3,15 +3,11 @@
     :hash="transactionData.fromId"
     :link-to="`/accounts/${transactionData.fromId}`"/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.initiatorAmountFinal)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionData.initiatorAmountFinal)"/>
 
   <transaction-plus-icon/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.responderAmountFinal)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionData.responderAmountFinal)"/>
 
   <transaction-arrow-right-icon/>
 
@@ -21,8 +17,7 @@
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import TransactionPlusIcon from '@/components/TransactionPlusIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
diff --git a/src/components/TransactionCellChannelWithdrawTx.vue b/src/components/TransactionCellChannelWithdrawTx.vue
index 4e8b46be8..7be59f186 100644
--- a/src/components/TransactionCellChannelWithdrawTx.vue
+++ b/src/components/TransactionCellChannelWithdrawTx.vue
@@ -9,14 +9,11 @@
     :hash="transactionData.channelId"
     :link-to="`/state-channels/${transactionData.channelId}`"/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.amount)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionData.amount)"/>
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 import TransactionArrowLeftIcon from '@/components/TransactionArrowLeftIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
diff --git a/src/components/TransactionCellGAMetaTx.vue b/src/components/TransactionCellGAMetaTx.vue
index 5a788378d..611088edf 100644
--- a/src/components/TransactionCellGAMetaTx.vue
+++ b/src/components/TransactionCellGAMetaTx.vue
@@ -15,13 +15,11 @@
     :hash="transactionDetails.recipientId"
     :link-to="`/accounts/${transactionDetails.recipientId}`"/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionDetails.amount)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionDetails.amount)"/>
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import { formatAettosToAe } from '@/utils/format'
 import AppChip from '@/components/AppChip'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
diff --git a/src/components/TransactionCellNameClaimTx.vue b/src/components/TransactionCellNameClaimTx.vue
index 2d0441885..fa312f7af 100644
--- a/src/components/TransactionCellNameClaimTx.vue
+++ b/src/components/TransactionCellNameClaimTx.vue
@@ -9,16 +9,13 @@
       {{ transactionData.name }}
     </app-link>
   </span>
-  <app-chip
+  <price-label
     v-if="transactionData.nameFee"
-    size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.nameFee)) }}
-  </app-chip>
+    :price="formatAettosToAe(transactionData.nameFee)"/>
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import AppLink from '@/components/AppLink'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
diff --git a/src/components/TransactionCellOracleRegisterTx.vue b/src/components/TransactionCellOracleRegisterTx.vue
index 5dd77d16c..ff5cc7be5 100644
--- a/src/components/TransactionCellOracleRegisterTx.vue
+++ b/src/components/TransactionCellOracleRegisterTx.vue
@@ -4,9 +4,7 @@
     :link-to="`/oracles/${transactionData.oracleId}`"/>
 
   <app-tooltip>
-    <app-chip size="sm">
-      {{ formatAePrice(formatAettosToAe(transactionData.fee)) }}
-    </app-chip>
+    <price-label :price="formatAettosToAe(transactionData.fee)"/>
     <template #tooltip>
       FEE
     </template>
@@ -14,8 +12,7 @@
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 
 defineProps({
diff --git a/src/components/TransactionCellPayingForTx.vue b/src/components/TransactionCellPayingForTx.vue
index 84280768d..6dd3d9d54 100644
--- a/src/components/TransactionCellPayingForTx.vue
+++ b/src/components/TransactionCellPayingForTx.vue
@@ -15,13 +15,11 @@
     :hash="transactionDetails.recipientId"
     :link-to="`/accounts/${transactionDetails.recipientId}`"/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionDetails.amount)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionDetails.amount)"/>
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import { formatAettosToAe } from '@/utils/format'
 import AppChip from '@/components/AppChip'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
diff --git a/src/components/TransactionCellSpendTx.vue b/src/components/TransactionCellSpendTx.vue
index 7b8f911eb..e0fb037e1 100644
--- a/src/components/TransactionCellSpendTx.vue
+++ b/src/components/TransactionCellSpendTx.vue
@@ -15,14 +15,11 @@
     :hash="transactionData.recipientId"
     :link-to="`/accounts/${transactionData.recipientId}`"/>
 
-  <app-chip size="sm">
-    {{ formatAePrice(formatAettosToAe(transactionData.amount)) }}
-  </app-chip>
+  <price-label :price="formatAettosToAe(transactionData.amount)"/>
 </template>
 
 <script setup>
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
-import AppChip from '@/components/AppChip'
+import { formatAettosToAe } from '@/utils/format'
 import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import AppLink from '@/components/AppLink'
diff --git a/src/components/TransactionGeneralPanel.vue b/src/components/TransactionGeneralPanel.vue
index 715fb9125..e00209dbb 100644
--- a/src/components/TransactionGeneralPanel.vue
+++ b/src/components/TransactionGeneralPanel.vue
@@ -121,7 +121,7 @@
             Fee
           </th>
           <td>
-            {{ formatAePrice(formatAettosToAe(transactionDetails.fee), null) }}
+            <price-label :price="formatAettosToAe(transactionDetails.fee)"/>
           </td>
         </tr>
         <tr class="transaction-general-panel__row">
@@ -174,7 +174,7 @@ import AppChip from '@/components/AppChip'
 import AppIcon from '@/components/AppIcon'
 import AppLink from '@/components/AppLink'
 import CopyChip from '@/components/CopyChip'
-import { formatAePrice, formatAettosToAe, formatEllipseHash } from '@/utils/format'
+import { formatAettosToAe, formatEllipseHash } from '@/utils/format'
 
 const { NODE_URL, MIDDLEWARE_URL } = useRuntimeConfig().public
 
diff --git a/src/components/TransactionTypeTableChannelCloseMutualTx.vue b/src/components/TransactionTypeTableChannelCloseMutualTx.vue
index adfe3030e..80c0fb423 100644
--- a/src/components/TransactionTypeTableChannelCloseMutualTx.vue
+++ b/src/components/TransactionTypeTableChannelCloseMutualTx.vue
@@ -26,12 +26,7 @@
             {{ transactionData.channel.initiator }}
           </app-link>
           /
-          {{
-            formatAePrice(
-              formatAettosToAe(transactionData.initiatorAmountFinal),
-              null,
-            )
-          }}
+          <price-label :price="formatAettosToAe(transactionData.initiatorAmountFinal)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-channel-close-mutual-tx__row">
@@ -42,16 +37,13 @@
           Responder / Amount
         </th>
         <td class="transaction-type-panel-channel-close-mutual-tx__data">
-          <app-link :to="`/accounts/${transactionData.channel.responder}`">
-            {{ transactionData.channel.responder }}
-          </app-link>
-          /
-          {{
-            formatAePrice(
-              formatAettosToAe(transactionData.responderAmountFinal),
-              null,
-            )
-          }}
+          <div class="transaction-type-panel-channel-close-mutual-tx__container">
+            <app-link :to="`/accounts/${transactionData.channel.responder}`">
+              {{ transactionData.channel.responder }}
+            </app-link>
+            /
+            <price-label :price="formatAettosToAe(transactionData.responderAmountFinal)"/>
+          </div>
         </td>
       </tr>
       <tr class="transaction-type-panel-channel-close-mutual-tx__row">
@@ -74,7 +66,7 @@
 <script setup>
 import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import { formatAettosToAe } from '@/utils/format'
 
 defineProps({
   transactionData: {
@@ -105,5 +97,11 @@ defineProps({
   &__row:last-of-type &__table-header {
     border-bottom: 0;
   }
+
+  &__container {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--space-0);
+  }
 }
 </style>
diff --git a/src/components/TransactionTypeTableChannelCreateTx.vue b/src/components/TransactionTypeTableChannelCreateTx.vue
index 3ea74ea69..585cbfecf 100644
--- a/src/components/TransactionTypeTableChannelCreateTx.vue
+++ b/src/components/TransactionTypeTableChannelCreateTx.vue
@@ -22,12 +22,7 @@
           Channel Reserve
         </th>
         <td class="transaction-type-panel-channel-create-tx__data">
-          {{
-            formatAePrice(
-              formatAettosToAe(transactionData.channelReserve),
-              null,
-            )
-          }}
+          <price-label :price="formatAettosToAe(transactionData.channelReserve)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-channel-create-tx__row">
@@ -38,16 +33,13 @@
           Initiator / Amount
         </th>
         <td class="transaction-type-panel-channel-create-tx__data">
-          <app-link :to="`/accounts/${transactionData.initiatorId}`">
-            {{ transactionData.initiatorId }}
-          </app-link>
-          /
-          {{
-            formatAePrice(
-              formatAettosToAe(transactionData.initiatorAmount),
-              null,
-            )
-          }}
+          <div class="transaction-type-panel-channel-create-tx__container">
+            <app-link :to="`/accounts/${transactionData.initiatorId}`">
+              {{ transactionData.initiatorId }}
+            </app-link>
+            /
+            <price-label :price="formatAettosToAe(transactionData.initiatorAmount)"/>
+          </div>
         </td>
       </tr>
       <tr class="transaction-type-panel-channel-create-tx__row">
@@ -69,16 +61,13 @@
           Responder / Amount
         </th>
         <td class="transaction-type-panel-channel-create-tx__data">
-          <app-link :to="`/accounts/${transactionData.responderId}`">
-            {{ transactionData.responderId }}
-          </app-link>
-          /
-          {{
-            formatAePrice(
-              formatAettosToAe(transactionData.responderAmount),
-              null,
-            )
-          }}
+          <div class="transaction-type-panel-channel-create-tx__container">
+            <app-link :to="`/accounts/${transactionData.responderId}`">
+              {{ transactionData.responderId }}
+            </app-link>
+            /
+            <price-label :price="formatAettosToAe(transactionData.responderAmount)"/>
+          </div>
         </td>
       </tr>
       <tr class="transaction-type-panel-channel-create-tx__row">
@@ -110,7 +99,7 @@
 <script setup>
 import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import { formatAettosToAe } from '@/utils/format'
 
 defineProps({
   transactionData: {
@@ -141,5 +130,11 @@ defineProps({
   &__row:last-of-type &__table-header {
     border-bottom: 0;
   }
+
+  &__container {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--space-0);
+  }
 }
 </style>
diff --git a/src/components/TransactionTypeTableChannelDepositTx.vue b/src/components/TransactionTypeTableChannelDepositTx.vue
index d7eaf4ac9..4fa6f14b6 100644
--- a/src/components/TransactionTypeTableChannelDepositTx.vue
+++ b/src/components/TransactionTypeTableChannelDepositTx.vue
@@ -46,7 +46,7 @@
           Amount
         </th>
         <td class="transaction-type-panel-channel-deposit-tx__data">
-          {{ formatAePrice(formatAettosToAe(transactionData.amount), null) }}
+          <price-label :price="formatAettosToAe(transactionData.amount)"/>
         </td>
       </tr>
     </tbody>
@@ -56,7 +56,7 @@
 <script setup>
 import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import { formatAettosToAe } from '@/utils/format'
 
 defineProps({
   transactionData: {
diff --git a/src/components/TransactionTypeTableChannelSettleTx.vue b/src/components/TransactionTypeTableChannelSettleTx.vue
index 475966849..1cdd2ff09 100644
--- a/src/components/TransactionTypeTableChannelSettleTx.vue
+++ b/src/components/TransactionTypeTableChannelSettleTx.vue
@@ -26,12 +26,7 @@
             {{ transactionData.channel.initiator }}
           </app-link>
           /
-          {{
-            formatAePrice(
-              formatAettosToAe(transactionData.initiatorAmountFinal),
-              null,
-            )
-          }}
+          <price-label :price="formatAettosToAe(transactionData.initiatorAmountFinal)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-channel-settle-tx__row">
@@ -46,12 +41,7 @@
             {{ transactionData.channel.responder }}
           </app-link>
           /
-          {{
-            formatAePrice(
-              formatAettosToAe(transactionData.responderAmountFinal),
-              null,
-            )
-          }}
+          <price-label :price="formatAettosToAe(transactionData.responderAmountFinal)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-channel-settle-tx__row">
@@ -74,7 +64,7 @@
 <script setup>
 import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import { formatAettosToAe } from '@/utils/format'
 
 defineProps({
   transactionData: {
diff --git a/src/components/TransactionTypeTableChannelWithdrawTx.vue b/src/components/TransactionTypeTableChannelWithdrawTx.vue
index e8fae0500..edfde0be0 100644
--- a/src/components/TransactionTypeTableChannelWithdrawTx.vue
+++ b/src/components/TransactionTypeTableChannelWithdrawTx.vue
@@ -46,7 +46,7 @@
           Amount
         </th>
         <td class="transaction-type-panel-channel-withdraw-tx__data">
-          {{ formatAePrice(formatAettosToAe(transactionData.amount), null) }}
+          <price-label :price="formatAettosToAe(transactionData.amount)"/>
         </td>
       </tr>
     </tbody>
@@ -56,7 +56,7 @@
 <script setup>
 import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import { formatAettosToAe } from '@/utils/format'
 
 defineProps({
   transactionData: {
diff --git a/src/components/TransactionTypeTableContractCallTx.vue b/src/components/TransactionTypeTableContractCallTx.vue
index 4216f0823..adfb1b6fb 100644
--- a/src/components/TransactionTypeTableContractCallTx.vue
+++ b/src/components/TransactionTypeTableContractCallTx.vue
@@ -46,7 +46,7 @@
           Amount
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
-          {{ formatAePrice(formatAettosToAe(transactionData.amount), null) }}
+          <price-label :price="formatAettosToAe(transactionData.amount)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-contract-call-tx__row">
@@ -115,9 +115,11 @@
           Gas Price
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
-          {{ transactionData.gas }}
-          /
-          {{ formatAePrice(formatAettosToAe(transactionData.gasPrice), null) }}
+          <div class="transaction-type-panel-contract-call-tx__container">
+            <price-label :price="transactionData.gas"/>
+            /
+            <price-label :price="formatAettosToAe(transactionData.gasPrice)"/>
+          </div>
         </td>
       </tr>
       <tr class="transaction-type-panel-contract-call-tx__row">
@@ -135,9 +137,11 @@
           Gas Costs
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
-          {{ formatNullable(transactionData.gasUsed) }}
-          /
-          {{ formatNullable(formatAePrice(formatAettosToAe(gasCosts), null)) }}
+          <div class="transaction-type-panel-contract-call-tx__container">
+            <price-label :price="transactionData.gasUsed"/>
+            /
+            <price-label :price="formatAettosToAe(gasCosts)"/>
+          </div>
         </td>
       </tr>
     </tbody>
@@ -148,7 +152,7 @@
 import { contractsHints } from '@/utils/hints/contractsHints'
 import AppLink from '@/components/AppLink'
 import TransactionTypeStatusLabel from '@/components/TransactionTypeStatusLabel'
-import { formatAePrice, formatAettosToAe, formatNullable } from '@/utils/format'
+import { formatAettosToAe, formatNullable } from '@/utils/format'
 import AppChip from '@/components/AppChip'
 
 const isCollapsed = ref(true)
@@ -192,5 +196,11 @@ const gasCosts = computed(() =>
   &__row:last-of-type &__table-header {
     border-bottom: 0;
   }
+
+  &__container {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--space-0);
+  }
 }
 </style>
diff --git a/src/components/TransactionTypeTableContractCreateTx.vue b/src/components/TransactionTypeTableContractCreateTx.vue
index a15b76919..cb85ce9c2 100644
--- a/src/components/TransactionTypeTableContractCreateTx.vue
+++ b/src/components/TransactionTypeTableContractCreateTx.vue
@@ -46,7 +46,7 @@
           Amount
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
-          {{ formatAePrice(formatAettosToAe(transactionData.amount), null) }}
+          <price-label :price="formatAettosToAe(transactionData.amount)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-contract-create-tx__row">
@@ -74,9 +74,11 @@
           Gas Price
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
-          {{ transactionData.gas }}
-          /
-          {{ formatAePrice(formatAettosToAe(transactionData.gasPrice), null) }}
+          <div class="transaction-type-panel-contract-create-tx__container">
+            <price-label :price="transactionData.gas"/>
+            /
+            <price-label :price="formatAettosToAe(transactionData.gasPrice)"/>
+          </div>
         </td>
       </tr>
       <tr class="transaction-type-panel-contract-create-tx__row">
@@ -94,9 +96,11 @@
           Gas Costs
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
-          {{ formatNullable(transactionData.gasUsed) }}
-          /
-          {{ formatNullable(formatAePrice(formatAettosToAe(gasCosts), null)) }}
+          <div class="transaction-type-panel-contract-create-tx__container">
+            <price-label :price="transactionData.gasUsed"/>
+            /
+            <price-label :price="formatAettosToAe(gasCosts)"/>
+          </div>
         </td>
       </tr>
     </tbody>
@@ -106,7 +110,7 @@
 <script setup>
 import AppLink from '@/components/AppLink'
 import TransactionTypeStatusLabel from '@/components/TransactionTypeStatusLabel'
-import { formatAePrice, formatAettosToAe, formatNullable } from '@/utils/format'
+import { formatAettosToAe, formatNullable } from '@/utils/format'
 import { contractsHints } from '@/utils/hints/contractsHints'
 
 const props = defineProps({
@@ -142,5 +146,11 @@ const gasCosts = computed(() =>
   &__row:last-of-type &__table-header {
     border-bottom: 0;
   }
+
+  &__container {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--space-0);
+  }
 }
 </style>
diff --git a/src/components/TransactionTypeTableGAAttachTx.vue b/src/components/TransactionTypeTableGAAttachTx.vue
index 8ffaa852f..a907c825f 100644
--- a/src/components/TransactionTypeTableGAAttachTx.vue
+++ b/src/components/TransactionTypeTableGAAttachTx.vue
@@ -75,9 +75,11 @@
           Gas Price
         </th>
         <td class="transaction-type-panel-ga-attach-tx__data">
-          {{ formatNullable(transactionData.gas) }}
-          /
-          {{ formatAePrice(formatAettosToAe(transactionData.gasPrice), null) }}
+          <div class="transaction-type-panel-ga-attach-tx__container">
+            <price-label :price="transactionData.gas"/>
+            /
+            <price-label :price="formatAettosToAe(transactionData.gasPrice)"/>
+          </div>
         </td>
       </tr>
       <tr class="transaction-type-panel-ga-attach-tx__row">
@@ -95,9 +97,11 @@
           Gas Costs
         </th>
         <td class="transaction-type-panel-ga-attach-tx__data">
-          {{ formatNullable(transactionData.gasUsed) }}
-          /
-          {{ formatNullable(formatAePrice(formatAettosToAe(gasCosts), null)) }}
+          <div class="transaction-type-panel-ga-attach-tx__container">
+            <price-label :price="transactionData.gasUsed"/>
+            /
+            <price-label :price="formatAettosToAe(gasCosts)"/>
+          </div>
         </td>
       </tr>
     </tbody>
@@ -108,7 +112,7 @@
 import { transactionsHints } from '@/utils/hints/transactionsHints'
 import AppLink from '@/components/AppLink'
 import TransactionTypeStatusLabel from '@/components/TransactionTypeStatusLabel'
-import { formatAePrice, formatAettosToAe, formatNullable } from '@/utils/format'
+import { formatAettosToAe, formatNullable } from '@/utils/format'
 
 const props = defineProps({
   transactionData: {
@@ -143,5 +147,11 @@ const gasCosts = computed(() =>
   &__row:last-of-type &__table-header {
     border-bottom: 0;
   }
+
+  &__container {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--space-0);
+  }
 }
 </style>
diff --git a/src/components/TransactionTypeTableGAMetaTx.vue b/src/components/TransactionTypeTableGAMetaTx.vue
index 3e90f377a..26e4cca06 100644
--- a/src/components/TransactionTypeTableGAMetaTx.vue
+++ b/src/components/TransactionTypeTableGAMetaTx.vue
@@ -35,12 +35,7 @@
           Amount
         </th>
         <td class="transaction-type-panel-ga-meta-tx__data">
-          {{
-            formatAePrice(
-              formatAettosToAe(innerTransactionDetails.amount, null),
-              null,
-            )
-          }}
+          <price-label :price="formatAettosToAe(innerTransactionDetails.amount)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-ga-meta-tx__row">
@@ -61,7 +56,7 @@
 <script setup>
 import { decode } from '@aeternity/aepp-sdk'
 import { transactionsHints } from '@/utils/hints/transactionsHints'
-import { formatAePrice, formatAettosToAe, formatNullable } from '@/utils/format'
+import { formatAettosToAe, formatNullable } from '@/utils/format'
 import AppLink from '@/components/AppLink'
 
 const props = defineProps({
diff --git a/src/components/TransactionTypeTableNameClaimTx.vue b/src/components/TransactionTypeTableNameClaimTx.vue
index 7c404fd76..9c579f06d 100644
--- a/src/components/TransactionTypeTableNameClaimTx.vue
+++ b/src/components/TransactionTypeTableNameClaimTx.vue
@@ -37,7 +37,7 @@
           Activation Price
         </th>
         <td class="transaction-type-panel-name-claim-tx__data">
-          {{ formatAePrice(formatAettosToAe(transactionData.nameFee), null) }}
+          <price-label :price="formatAettosToAe(transactionData.nameFee)"/>
         </td>
       </tr>
     </tbody>
@@ -47,7 +47,7 @@
 <script setup>
 import { namesHints } from '@/utils/hints/namesHints'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import { formatAettosToAe } from '@/utils/format'
 
 defineProps({
   transactionData: {
diff --git a/src/components/TransactionTypeTableOracleQueryTx.vue b/src/components/TransactionTypeTableOracleQueryTx.vue
index e80209f41..4595cac8a 100644
--- a/src/components/TransactionTypeTableOracleQueryTx.vue
+++ b/src/components/TransactionTypeTableOracleQueryTx.vue
@@ -57,7 +57,7 @@
           Query Fee
         </th>
         <td class="transaction-type-panel-oracle-query-tx__data">
-          {{ formatAePrice(formatAettosToAe(transactionData.queryFee), null) }}
+          <price-label :price="formatAettosToAe(transactionData.queryFee)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-oracle-query-tx__row">
@@ -93,7 +93,7 @@
 <script setup>
 import { oraclesHints } from '@/utils/hints/oraclesHints'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatAettosToAe, formatNullable } from '@/utils/format'
+import { formatAettosToAe, formatNullable } from '@/utils/format'
 
 defineProps({
   transactionData: {
diff --git a/src/components/TransactionTypeTableOracleRegisterTx.vue b/src/components/TransactionTypeTableOracleRegisterTx.vue
index bdc00ea59..a766822ed 100644
--- a/src/components/TransactionTypeTableOracleRegisterTx.vue
+++ b/src/components/TransactionTypeTableOracleRegisterTx.vue
@@ -35,7 +35,7 @@
           Query Fee
         </th>
         <td class="transaction-type-panel-oracle-register-tx__data">
-          {{ formatAePrice(formatAettosToAe(transactionData.queryFee), null) }}
+          <price-label :price="formatAettosToAe(transactionData.queryFee)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-oracle-register-tx__row">
@@ -66,7 +66,7 @@
 
 <script setup>
 import { oraclesHints } from '@/utils/hints/oraclesHints'
-import { formatAePrice, formatAettosToAe, formatNullable } from '@/utils/format'
+import { formatAettosToAe, formatNullable } from '@/utils/format'
 
 defineProps({
   transactionData: {
diff --git a/src/components/TransactionTypeTableSpendTx.vue b/src/components/TransactionTypeTableSpendTx.vue
index b2bed1e47..485a889dc 100644
--- a/src/components/TransactionTypeTableSpendTx.vue
+++ b/src/components/TransactionTypeTableSpendTx.vue
@@ -52,7 +52,7 @@
           Amount
         </th>
         <td class="transaction-type-panel-spend-tx__data">
-          {{ formatAePrice(formatAettosToAe(transactionData.amount), null) }}
+          <price-label :price="formatAettosToAe(transactionData.amount)"/>
         </td>
       </tr>
       <tr class="transaction-type-panel-spend-tx__row">
@@ -73,7 +73,7 @@
 <script setup>
 import { decode } from '@aeternity/aepp-sdk'
 import { transactionsHints } from '@/utils/hints/transactionsHints'
-import { formatAePrice, formatAettosToAe, formatEllipseHash } from '@/utils/format'
+import { formatAettosToAe, formatEllipseHash } from '@/utils/format'
 import AppLink from '@/components/AppLink'
 
 defineProps({
diff --git a/src/utils/adapters.js b/src/utils/adapters.js
index 3e9f09152..c3c09baab 100644
--- a/src/utils/adapters.js
+++ b/src/utils/adapters.js
@@ -8,6 +8,8 @@ import {
   formatDecodeBase64,
   formatIsAuction,
   formatNameState,
+  formatNumber,
+  formatPercentage,
   formatTemplateLimit,
   formatTokenLimit,
 } from '@/utils/format'
@@ -182,8 +184,10 @@ export function adaptAccountTokens(tokens, tokenPrices, aeFiatPrice) {
       contractId: token.contractId,
       amount,
       value: tokenAePrice !== null
-        ? (new BigNumber(amount)).multipliedBy(tokenAePrice).multipliedBy(aeFiatPrice).toNumber()
-        : null,
+        ? `$${formatNumber(
+          (new BigNumber(amount)).multipliedBy(tokenAePrice).multipliedBy(aeFiatPrice).toNumber(),
+          null, null, 7)}`
+        : 'N/A',
     }
   })
   return {
@@ -433,13 +437,18 @@ export function adaptTokenEvents(events) {
 }
 
 export function adaptTokenHolders(tokenHolders, tokenDetails) {
-  const formattedData = tokenHolders.data.map(holder => ({
-    address: holder.accountId,
-    amount: (new BigNumber(holder.amount)).dividedBy(10 ** tokenDetails.decimals).toNumber(),
-    percentage: (new BigNumber(holder.amount)
-      .dividedBy(10 ** (tokenDetails.decimals - 2)))
-      .dividedBy(tokenDetails.totalSupply).toNumber(),
-  }))
+  const formattedData = tokenHolders.data
+    .map(holder => {
+      const percentage = (new BigNumber(holder.amount)
+        .dividedBy(10 ** (tokenDetails.decimals - 2)))
+        .dividedBy(tokenDetails.totalSupply).toNumber()
+      return {
+        address: holder.accountId,
+        contractId: holder.contractId,
+        amount: (new BigNumber(holder.amount)).dividedBy(10 ** tokenDetails.decimals).toNumber(),
+        percentage: formatPercentage(percentage),
+      }
+    })
 
   return {
     next: tokenHolders.next,
@@ -554,7 +563,7 @@ export function adaptStateChannels(stateChannels) {
         initiator: channel.initiator,
         responder: channel.responder,
         updateCount: channel.updatesCount,
-        locked: formatAePrice(formatAettosToAe(channel.amount)),
+        locked: formatAettosToAe(channel.amount),
         updatedHeight: channel.lastUpdatedHeight,
         updated: DateTime.fromMillis(channel.lastUpdatedTime),
         lastTxType: channel.lastUpdatedTxType,
diff --git a/src/utils/format.js b/src/utils/format.js
index 3ade5ae59..868b6e1c0 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -35,13 +35,13 @@ export function formatNumber(
   }).format(number)
 }
 
-export function formatAePrice(price, maxDigits = 8) {
+export function formatAePrice(price, maxDigits = 8, currency = 'AE') {
   if (isNaN(price) || price === null) {
     return price
   }
 
   if (maxDigits === null) {
-    return `${formatNumber(price, 0, MAXIMUM_FRACTION_DIGITS)} AE`
+    return `${formatNumber(price, 0, MAXIMUM_FRACTION_DIGITS)} ${currency}`
   }
 
   const truncatedPrice = new BigNumber(price).toFixed(
@@ -56,10 +56,17 @@ export function formatAePrice(price, maxDigits = 8) {
   decimals = decimals?.replace(/0+$/, '')
 
   if (!decimals) {
-    return integers === '0' ? `~${integers} AE` : `${formatNumber(integers)} AE`
+    if (price === 0) {
+      return `0 ${currency}`
+    }
+    if (integers === '0') {
+      return `~${integers} ${currency}`
+    } else {
+      return `${formatNumber(integers)} ${currency}`
+    }
   }
 
-  return `${formatNumber(truncatedPrice, decimals.length, maxDigits)} AE`
+  return `${formatNumber(truncatedPrice, decimals.length, maxDigits)} ${currency}`
 }
 
 export function formatReduceDecimals(tokenAmount, numberOfDecimals) {
@@ -126,6 +133,18 @@ export function formatIsAuction(name) {
   return name.length - suffixLength < auctionLength
 }
 
+export function formatPercentage(percentage) {
+  if (percentage >= 0.00001) {
+    return `${formatNumber(percentage)} %`
+  }
+  if (percentage === 0) {
+    return '0 %'
+  }
+  if (percentage < 0.00001) {
+    return '~0 %'
+  }
+}
+
 export function formatTokenLimit(extensions, tokenLimit) {
   if (extensions.includes('mintable') && extensions.includes('mintable_limit')) {
     return tokenLimit