fix: Trend sign fix (#837)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>

src/app.vue

@@ -109,6 +109,10 @@ if (import.meta.env.MODE !== 'production') {
   })
 }
 
+function logError(error) {
+  console.error(error)
+}
+
 const detectedHistoryNavigation = ref(null)
 
 router.options.history.listen((_to, _from, meta) => {

src/components/AeCoinPanel.vue

@@ -28,11 +28,7 @@
           </th>
           <td>
             $ {{ formatNullable(price) }}
-            <app-chip
-              class="market-stats__chip"
-              :variant="priceChipVariant">
-              {{ priceChangeSign }}{{ formatNullable(priceChange) }} %
-            </app-chip>
+            <trend-chip :delta="priceChange"/>
           </td>
         </tr>
         <tr class="ae-coin-panel__row">
@@ -92,16 +88,6 @@ await useAsyncData(() => Promise.all([
   fetchMarketStats(),
 ]))
 
-const priceChangeSign = computed(() => {
-  if (priceChange.value > 0) {
-    return '+'
-  } else if (priceChange.value === 0) {
-    return ''
-  } else if (priceChange.value < 0) {
-    return '-'
-  }
-})
-const priceChipVariant = computed(() => priceChange.value > 0 ? 'success' : 'error')
 </script>
 
 <style scoped>

src/components/MarketStats.vue

@@ -12,11 +12,7 @@
         </div>
         <div class="market-stats__value">
           $ {{ formatNullable(price) }}
-          <app-chip
-            class="market-stats__chip"
-            :variant="priceChipVariant">
-            {{ priceChangeSign }}{{ formatNullable(priceChange) }} %
-          </app-chip>
+          <trend-chip :delta="priceChange"/>
         </div>
       </li>
       <li
@@ -50,7 +46,7 @@ import { useRuntimeConfig } from 'nuxt/app'
 import { MAX_AE_DISTRIBUTION } from '@/utils/constants'
 import { formatAePrice, formatNullable, formatNumber } from '@/utils/format'
 import { useMarketStatsStore } from '@/stores/marketStats'
-import AppChip from '@/components/AppChip'
+import TrendChip from '@/components/TrendChip'
 
 const { NETWORK_NAME } = useRuntimeConfig().public
 const selectedNetwork = `${NETWORK_NAME
@@ -66,9 +62,6 @@ const {
   distribution,
   distributionPercentage,
 } = storeToRefs(useMarketStatsStore())
-
-const priceChangeSign = computed(() => priceChange.value > 0 ? '+' : '')
-const priceChipVariant = computed(() => priceChange.value > 0 ? 'success' : 'error')
 </script>
 
 <style scoped>

src/components/TransactionsStatistics.vue

@@ -10,18 +10,14 @@
       <h5>TRANSACTIONS (LAST 24H)</h5>
       <div class="transaction-statistics__value">
         {{ formatNumber(last24hsTransactionsCount) }}
-        <app-chip :variant="getChipVariant(last24hsTransactionsTrend)">
-          {{ last24hsTransactionsTrend }} %
-        </app-chip>
+        <trend-chip :delta="last24hsTransactionsTrend"/>
       </div>
     </app-panel>
     <app-panel class="transaction-statistics__panel">
       <h5>AVG TRANSACTION FEE (LAST 24H)</h5>
       <div class="transaction-statistics__value">
         {{ last24hsAverageTransactionFees }}
-        <app-chip :variant="getChipVariant(feesTrend)">
-          {{ feesTrend }} %
-        </app-chip>
+        <trend-chip :delta="feesTrend"/>
       </div>
     </app-panel>
   </div>
@@ -47,11 +43,6 @@ if (process.client) {
   await fetchTotalTransactionsCount()
   await fetchLast24hsTransactionsStatistics()
 }
-
-function getChipVariant(percentage) {
-  return percentage > 0 ? 'success' : 'error'
-}
-
 </script>
 
 <style scoped>

src/components/TrendChip.vue

@@ -0,0 +1,20 @@
+<template>
+  <app-chip
+    :variant="priceChipVariant">
+    {{ priceChangeSign }}{{ formatNullable(delta) }} %
+  </app-chip>
+</template>
+<script setup>
+const props = defineProps({
+  delta: {
+    type: Number,
+    required: true,
+  },
+})
+
+const priceChangeSign = computed(() => {
+  return props.delta > 0 ? '+' : ''
+})
+
+const priceChipVariant = computed(() => props.delta >= 0 ? 'success' : 'error')
+</script>