#716 | display amounts with customizable amount of decimals

src/components/NftTransfersTable.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { indexerApi } from 'src/boot/telosApi';
 
 import TransactionField from 'components/TransactionField.vue';
+import ValueField from 'components/ValueField.vue';
 import MethodField from 'components/MethodField.vue';
 import AddressField from 'components/AddressField.vue';
 import NftItemField from 'components/NftItemField.vue';
@@ -14,12 +15,12 @@ import { formatWei, toChecksumAddress } from 'src/lib/utils';
 import { NftTransferProps, NftTransferData } from 'src/types';
 
 import { loadTransaction, getDirection } from 'src/lib/transaction-utils';
-import { WEI_PRECISION } from 'src/antelope/wallets/utils';
-import { BigNumber } from 'ethers';
-import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
 import { Pagination } from 'src/types';
+import { useStore } from 'vuex';
 
 const { t: $t } = useI18n();
+const $store = useStore();
+const toggleDisplayDecimals = () => $store.dispatch('general/toggleDisplayDecimals');
 
 // ---------------------
 interface TransfersResponse {
@@ -236,41 +237,6 @@ const onRequest = async (settings: { pagination: Pagination}) => {
  loading.value = false;
 };
 
-const locale = useI18n().locale.value;
-function getValueDisplay(value: string, symbol: string, decimals: number) {
- const _decimals = typeof decimals === 'number' ? decimals : parseInt(decimals ?? WEI_PRECISION);
- // value is has this format: xxxxxxx.zzzzzzzzz
- // we force it to have exactly _decimals decimals
- const parts = value.split('.');
- const decimalsDiff = _decimals - (parts[1]?.length ?? 0);
- if (decimalsDiff > 0) {
- parts[1] = parts[1] ?? '';
- parts[1] += '0'.repeat(decimalsDiff);
- } else if (decimalsDiff < 0) {
- parts[1] = parts[1]?.slice(0, _decimals) ?? '';
- }
- const _value = parts.join('.');
-
- try {
- const result = prettyPrintCurrency(
- BigNumber.from(_value.split('.').join('')),
- 4,
- locale,
- false,
- symbol ?? 'UNKNOWN',
- false,
- _decimals,
- false,
- );
- return result;
- } catch (e) {
- console.error('getValueDisplay', e);
- }
-
- return truncatedId(value);
-}
-
-
 const convertToEpoch = (dateString: string | number) => {
  if (typeof dateString === 'number'){
  return dateString / 1000;
@@ -376,6 +342,17 @@ onMounted(() => {
  </q-tooltip>
  </q-icon>
  </div>
+ <div
+ v-else-if="col.name==='value'"
+ class="u-flex--center-y"
+ @click="toggleDisplayDecimals"
+ >
+ <a>{{ col.label }}</a>
+ <q-icon class="info-icon q-ml-xs" name="far fa-question-circle"/>
+ <q-tooltip anchor="bottom middle" self="bottom middle">
+ {{ $t('components.click_to_change_format') }}
+ </q-tooltip>
+ </div>
  <div v-else class="u-flex--center-y">
  {{ col.label }}
  </div>
@@ -444,10 +421,11 @@ onMounted(() => {
  </span>
  </q-td>
  <q-td key="value" :props="props">
- <span class="value">
- {{ getValueDisplay(props.row.value, props.row.contract.symbol, props.row.contract.decimals) }}
- <q-tooltip>{{ props.row.value }}</q-tooltip>
- </span>
+ <ValueField
+ :value="props.row.value"
+ :symbol="props.row.contract.symbol"
+ :decimals="props.row.contract.decimals"
+ />
  </q-td>
  <q-td key="token" :props="props" class="flex items-center">
  <AddressField

src/components/Token/TokenTable.vue

@@ -1,10 +1,12 @@
 <script>
 import AddressField from 'src/components/AddressField';
 import AddToWallet from 'src/components/AddToWallet';
+import ValueField from 'components/ValueField.vue';
+import { mapActions } from 'vuex';
 
 export default {
  name: 'TokenTable',
- components: { AddressField, AddToWallet },
+ components: { AddressField, AddToWallet, ValueField },
  props: {
  tokens: {
  type: Array,
@@ -50,6 +52,12 @@ export default {
  columns,
  };
  },
+ methods: {
+ ...mapActions('general', ['toggleDisplayDecimals']),
+ async showEntry(token) {
+ console.log('showEntry', token);
+ },
+ },
 };
 </script>
 
@@ -69,15 +77,24 @@ export default {
  :key="col.name"
  :props="props"
  >
- <div class="u-flex--center-y">
- {{ col.label }}
+ <div v-if="col.name==='balance'" class="u-flex--center-y" @click="toggleDisplayDecimals">
+ <a>{{ col.label }}</a>
+ <q-icon class="info-icon q-ml-xs" name="far fa-question-circle"/>
+ <q-tooltip anchor="bottom middle" self="bottom middle">
+ {{ $t('components.click_to_change_format') }}
+ </q-tooltip>
  </div>
+ <template v-else>
+ <div class="u-flex--center-y">
+ {{ col.label }}
+ </div>
+ </template>
  </q-th>
  </q-tr>
  </template>
 
  <template v-slot:body="props">
- <q-tr :props="props">
+ <q-tr :props="props" @click="showEntry(props.row)">
  <q-td key="icon" :props="props">
  <q-img :src="props.row.logoURI" class="c-token-icon" />
  </q-td>
@@ -88,9 +105,9 @@ export default {
  {{ props.row.symbol }}
  </q-td>
  <q-td key="balance" :props="props">
- <span v-if="props.row.balance === '0.0000'">{{ '< 0.0001' }}</span>
- <span v-else>{{ props.row.balance }}</span>
- <q-tooltip>{{ props.row.fullBalance }}</q-tooltip>
+ <ValueField
+  :value="props.row.fullBalance"
+ />
  </q-td>
  <q-td key="usd" :props="props">
  <span v-if="props.row.price > 0">

src/components/Transaction/ERCTransferList.vue

@@ -5,21 +5,20 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { BigNumber } from 'ethers';
 
-import { EvmTransactionLog } from 'antelope/types/EvmTransaction';
+import { EvmLogs } from 'src/antelope/types/EvmLog';
 import AddressField from 'components/AddressField.vue';
-import { ERCTransfer, ERC721Transfer, ERC1155Transfer, ERC20Transfer, TokenBasicData } from 'src/types';
-import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
+import ValueField from 'components/ValueField.vue';
+import { ERC721Transfer, ERC1155Transfer, ERC20Transfer, TokenBasicData } from 'src/types';
 
 import { contractManager } from 'src/boot/telosApi';
 import { TRANSFER_SIGNATURES } from 'src/antelope/types';
 
 const $q = useQuasar();
 const { t: $t } = useI18n();
-const locale = useI18n().locale.value;
 
 const props = defineProps({
  logs: {
- type: Array as PropType<ERCTransfer[]>,
+ type: Array as PropType<EvmLogs>,
  required: false,
  default: () => [],
  },
@@ -47,7 +46,7 @@ const loadTransfers = async () => {
  return;
  }
 
- const logs = props.logs as EvmTransactionLog[];
+ const logs = props.logs as EvmLogs;
 
  for (const log of logs) {
  // ERC20, ERC721 & ERC1155 transfers (ERC721 & ERC20 have same first topic but ERC20 has 4 topics for
@@ -146,18 +145,6 @@ function setHighlightAddress(val: string) {
  emit('highlight', val);
 }
 
-const getValueDisplay = (value: string, symbol: string, decimals: number | string) =>
- prettyPrintCurrency(
- BigNumber.from(value),
- 4,
- locale,
- false,
- symbol,
- false,
- typeof decimals === 'string' ? parseInt(decimals) : decimals,
- false,
- );
-
 watch(() => props.logs, async (newTrx) => {
  if (newTrx) {
  await loadTransfers();
@@ -198,7 +185,10 @@ watch(() => props.logs, async (newTrx) => {
  </div>
  <div class="c-erc-transfers__cell c-erc-transfers__cell--c">
  <strong>{{ $t('components.nfts.amount') }}</strong>
- <span>{{ getValueDisplay(transfer.value, '', transfer.token.decimals ) }}</span>
+ <ValueField
+ :value="transfer.value"
+ :decimals="transfer.token.decimals"
+ />
  <AddressField
  :address="transfer.token.address"
  :truncate="15"

src/components/Transaction/TLOSTransferList.vue

@@ -2,17 +2,15 @@
 <script lang="ts" setup>
 import { PropType, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { BigNumber } from 'ethers';
 
 import AddressField from 'components/AddressField.vue';
+import ValueField from 'components/ValueField.vue';
+
 import { EvmTransactionExtended } from 'src/types';
-import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
 import { getParsedInternalTransactions } from 'src/lib/transaction-utils';
-import { WEI_PRECISION } from 'src/lib/utils';
 
 
 const { t: $t } = useI18n();
-const locale = useI18n().locale.value;
 const loading = ref(false);
 const parsedItxs = ref<unknown []>([]);
 const itxs = ref<unknown []>([]);
@@ -71,27 +69,6 @@ function setHighlightAddress(val: string) {
  emit('highlight', val);
 }
 
-function getValueDisplay(value: string, symbol: string, decimals: number | string) {
- const _decimals = typeof decimals === 'number' ? decimals : parseInt(decimals ?? WEI_PRECISION);
- console.log('getValueDisplay', value, symbol, decimals, '[', _decimals, ']');
- try {
- return prettyPrintCurrency(
- BigNumber.from(value.split('.').join('')),
- 4,
- locale,
- false,
- symbol ?? 'UNKNOWN',
- false,
- _decimals,
- false,
- );
- } catch (e) {
- console.error('getValueDisplay', e);
- }
-
- return value;
-}
-
 watch(() => props.transaction, async (newTrx) => {
  if (newTrx) {
  await loadTransfers();
@@ -132,7 +109,11 @@ watch(() => props.transaction, async (newTrx) => {
  </div>
  <div class="c-tlos-transfers__cell c-tlos-transfers__cell--c">
  <strong>{{ $t('components.nfts.amount') }}</strong>
- <span>{{ getValueDisplay(transfer.value, transfer.token.symbol, transfer.token.decimals ) }}</span>
+ <ValueField
+ :value="transfer.value"
+ :symbol="transfer.token.symbol"
+ :decimals="transfer.token.decimals"
+ />
  </div>
  </div>
 </div>

src/components/TransactionOverview.vue

@@ -2,14 +2,13 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { BigNumber } from 'ethers';
 import { BlockData, EvmTransactionExtended } from 'src/types';
 import { WEI_PRECISION } from 'src/lib/utils';
 import { indexerApi } from 'src/boot/telosApi';
-import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
 
 import AddressField from 'components/AddressField.vue';
 import BlockField from 'components/BlockField.vue';
+import ValueField from 'components/ValueField.vue';
 import DateField from 'components/DateField.vue';
 import TransactionAction from 'components/TransactionAction.vue';
 import GasLimitAndUsage from 'components/GasLimitAndUsage.vue';
@@ -20,8 +19,6 @@ import TLOSTransferList from 'components/Transaction/TLOSTransferList.vue';
 
 const { t: $t } = useI18n();
 
-const locale = useI18n().locale.value;
-
 const props = defineProps<{
  trx: EvmTransactionExtended | null,
 }>();
@@ -43,19 +40,6 @@ const showErc20Transfers = ref(true);
 const showTLOSTransfers = ref(true);
 const moreDetailsHeight = ref(0);
 
-const getValueDisplay = (value: string) =>
- prettyPrintCurrency(
- BigNumber.from(value),
- 4,
- locale,
- false,
- 'TLOS',
- false,
- WEI_PRECISION,
- false,
- );
-
-
 const loadBlockData = async () => {
  try {
  if (blockNumber.value) {
@@ -381,7 +365,11 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
  <div class="c-trx-overview__col-val">
  <q-skeleton v-if="!trx" type="text" class="c-trx-overview__skeleton" />
  <template v-else>
- {{ getValueDisplay(trx.value) }}
+ <ValueField
+ :value="trx.value"
+ :symbol="'TLOS'"
+ :decimals="WEI_PRECISION"
+ />
  </template>
  </div>
  </div>