feat: Prepend token symbol (#809)

aeternity · Jul 22, 2024 · 36d1f43 · 36d1f43
1 parent fe1cc94
commit 36d1f43
Show file tree

Hide file tree

Showing 75 changed files with 464 additions and 441 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'