imporove disploy of token amount

src/chains/mainnet/provenance.json

@@ -4,7 +4,7 @@
     "api": "https://api.provenance.io",
     "sdk_version": "0.44.3",
     "coin_type": "505",
-    "min_tx_fee": "3000",
+    "min_tx_fee": "400000000",
     "addr_prefix": "pb",
     "logo": "https://raw.githubusercontent.com/provenance-io/provenance/main/docs/pio.svg",
     "assets": [{

src/libs/utils.js

@@ -357,6 +357,12 @@ export function getUnitAmount(amount, tokenDenom) {
   return String(BigInt(Number(amount) * (10 ** exp)))
 }
 
+export function numberWithCommas(x) {
+  const parts = x.toString().split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return parts.join('.')
+}
+
 export function formatTokenAmount(tokenAmount, fraction = 2, tokenDenom = 'uatom') {
   const denom = tokenDenom.denom_trace ? tokenDenom.denom_trace.base_denom : tokenDenom
   let amount = 0
@@ -372,9 +378,9 @@ export function formatTokenAmount(tokenAmount, fraction = 2, tokenDenom = 'uatom
   })
   amount = Number(Number(tokenAmount)) / (10 ** exp)
   if (amount > 10) {
-    return parseFloat(amount.toFixed(fraction))
+    return numberWithCommas(parseFloat(amount.toFixed(fraction)))
   }
-  return parseFloat(amount)
+  return parseFloat(amount.toFixed(fraction))
 }
 
 export function isTestnet() {
@@ -405,7 +411,7 @@ export function formatNumber(count, withAbbr = false, decimals = 2) {
 
 export function tokenFormatter(tokens, denoms = {}) {
   if (Array.isArray(tokens)) {
-    return tokens.map(t => formatToken(t, denoms, 2)).join()
+    return tokens.map(t => formatToken(t, denoms, 2)).join(', ')
   }
   return formatToken(tokens, denoms, 2)
 }

src/views/StakingRewardComponent.vue

@@ -32,9 +32,9 @@
           </b-media-aside>
           <b-media-body>
             <h6 class="transaction-title">
-              {{ formatNumber(d.amount) }}
+              {{ formatDenom(d) }}
             </h6>
-            <small>{{ formatDenom(d.denom) }} </small>
+            <small>{{ formatNumber(d.amount) }}</small>
           </b-media-body>
         </b-media>
         <small
@@ -63,9 +63,9 @@
           </b-media-aside>
           <b-media-body>
             <h6 class="transaction-title">
-              {{ formatNumber(d.amount) }}
+              {{ formatDenom(d) }}
             </h6>
-            <small>{{ formatDenom(d.denom) }}</small>
+            <small>{{ formatNumber(d.amount) }}</small>
           </b-media-body>
         </b-media>
         <small
@@ -98,6 +98,7 @@ import {
 } from 'bootstrap-vue'
 import { sha256 } from '@cosmjs/crypto'
 import { toHex } from '@cosmjs/encoding'
+import { formatToken, numberWithCommas } from '@/libs/utils'
 import OperationWithdrawCommissionComponent from './OperationWithdrawCommissionComponent.vue'
 
 export default {
@@ -142,10 +143,12 @@ export default {
   },
   methods: {
     formatNumber(value) {
-      return Number(value).toFixed(2)
+      if (value < 1) return value
+      // eslint-disable-next-line no-undef
+      return numberWithCommas(BigInt(Number(value).toFixed(0)))
     },
     formatDenom(value) {
-      return value.startsWith('ibc') ? this.denoms[value] : value
+      return formatToken(value, this.denoms, 2)
     },
   },
 }

src/views/SummaryAssetsComponent.vue

@@ -18,7 +18,7 @@
 import { sha256 } from '@cosmjs/crypto'
 import { toHex } from '@cosmjs/encoding'
 import { BTable, BCardTitle, BCard } from 'bootstrap-vue'
-import { formatNumber, formatTokenAmount, formatTokenDenom } from '@/libs/utils'
+import { formatTokenAmount, formatTokenDenom } from '@/libs/utils'
 
 export default {
   components: {
@@ -37,9 +37,9 @@ export default {
           formatter: this.formatDenom,
           tdClass: 'text-nowrap text-truncate overflow-hidden',
         },
-        'abbr',
         {
-          key: 'amount',
+          key: 'abbr',
+          label: 'Amount',
         },
       ],
     }
@@ -48,14 +48,14 @@ export default {
     this.$http.getAllIBCDenoms().then(x => {
       x.denom_traces.forEach(trace => {
         const hash = toHex(sha256(new TextEncoder().encode(`${trace.path}/${trace.base_denom}`)))
-        this.$set(this.denoms, `ibc/${hash.toUpperCase()}`, trace.base_denom)
+        this.$set(this.denoms, `ibc/${hash.toUpperCase()}`, trace)
       })
     })
     this.$http.getBankTotals().then(res => {
       const toshow = res.sort()
       this.assets = toshow.reverse().map(x => {
         const xh = x
-        xh.abbr = x.amount > 1 ? formatNumber(formatTokenAmount(x.amount, 0, x.denom), true, 2) : x.amount
+        xh.abbr = formatTokenAmount(x.amount, 0, x.denom)
         return xh
       })
     })
@@ -65,7 +65,11 @@ export default {
   },
   methods: {
     formatDenom(v) {
-      return formatTokenDenom(this.denoms[v] ? this.denoms[v] : v)
+      if (this.denoms[v]) {
+        const trace = this.denoms[v]
+        return `* ${formatTokenDenom(trace.base_denom)} (${trace.path})`
+      }
+      return v
     },
   },
 }