🎨 Adds method to round price data to apprpriate decimal

src/components/Widgets/CryptoWatchList.vue

@@ -9,9 +9,9 @@
     >
       <img class="icon" :src="asset.image" />
       <p class="name">{{ asset.name }}</p>
-      <p class="price">{{ asset.price | currency }}</p>
+      <p class="price">{{ asset.price | formatPrice }}</p>
       <p :class="`percent ${asset.percentChange > 0 ? 'up' : 'down'}`">
-        {{ asset.percentChange | percentage }}
+        {{ asset.percentChange | formatPercentage }}
       </p>
     </div>
   </template>
@@ -22,7 +22,7 @@
 import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import { widgetApiEndpoints } from '@/utils/defaults';
-import { findCurrencySymbol, timestampToDate } from '@/utils/MiscHelpers';
+import { findCurrencySymbol, timestampToDate, roundPrice } from '@/utils/MiscHelpers';
 
 export default {
   mixins: [WidgetMixin],
@@ -68,11 +68,11 @@ export default {
   },
   filters: {
     /* Append currency symbol to price */
-    currency(price) {
-      return `${findCurrencySymbol('usd')}${price}`;
+    formatPrice(price) {
+      return `${findCurrencySymbol('usd')}${roundPrice(price)}`;
     },
     /* Append percentage symbol, and up/ down arrow */
-    percentage(change) {
+    formatPercentage(change) {
       if (!change) return '';
       const symbol = change > 0 ? '↑' : '↓';
       return `${symbol} ${change.toFixed(2)}%`;
@@ -118,7 +118,7 @@ export default {
     tooltip(info) {
       const maxSupply = info.maxSupply ? ` out of max supply of <b>${info.maxSupply}</b>` : '';
       const content = `Rank: <b>${info.rank}</b> with market cap of `
-        + `<b>${this.$options.filters.currency(info.marketCap)}</b>`
+        + `<b>${this.$options.filters.formatPrice(info.marketCap)}</b>`
         + `<br>Circulating Supply: <b>${info.supply} ${info.symbol.toUpperCase()}</b>${maxSupply}`
         + `<br>All-time-high of <b>${info.allTimeHigh}</b> `
         + `at <b>${timestampToDate(info.allTimeHighDate)}</b>`;
@@ -137,6 +137,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   color: var(--widget-text-color);
+  font-size: 0.9rem;
   .icon {
     width: 2rem;
     height: 2rem;
@@ -151,7 +152,7 @@ export default {
     &.down { color: var(--danger); }
   }
   p {
-    width: 25%;
+    width: 28%;
   }
   &:not(:last-child) {
     border-bottom: 1px dashed var(--widget-text-color);

src/utils/MiscHelpers.js

@@ -70,6 +70,7 @@ export const timestampToTime = (timestamp) => {
   return time;
 };
 
+/* Given a timestamp, returns both human Date and Time */
 export const timestampToDateTime = (timestamp) => {
   return `${timestampToDate(timestamp)} at ${timestampToTime(timestamp)}`;
 };
@@ -125,6 +126,19 @@ export const showNumAsThousand = (bigNum) => {
   return `${Math.round(bigNum / 1000)}k`;
 };
 
+/* Capitalizes the first letter of each word within a string */
 export const capitalize = (str) => {
   return str.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
 };
+
+/* Round price to appropriate number of decimals */
+export const roundPrice = (price) => {
+  if (Number.isNaN(price)) return price;
+  let decimals = 2;
+  if (price > 1000) decimals = 0;
+  else if (price > 1) decimals = 2;
+  else if (price > 0.1) decimals = 3;
+  else if (price > 0.01) decimals = 4;
+  else if (price <= 0.01) decimals = 5;
+  return price.toFixed(decimals);
+};