feat(pools): minor updates to displaying and error handling

src/components/explore/PriceHistoryGraph.vue

@@ -10,8 +10,18 @@
       {{ label }}
     </ButtonDefault>
   </div>
-  <Bar v-if="showBar" :data="graphData" :options="options" />
-  <Line v-else :data="graphData" :options="options" />
+  <div class="relative">
+    <Bar v-if="showBar" :data="graphData" :options="options" />
+    <Line v-else :data="graphData" :options="options" />
+    <div
+      v-if="showNoData"
+      class="absolute flex justify-center items-center w-full h-full top-0 left-0 text-3xl"
+      @click.prevent
+    >
+      No Data
+    </div>
+  </div>
+
   <div class="flex gap-2 mt-3">
     <ButtonDefault
       v-for="time in Object.keys(timeFrames)"
@@ -84,6 +94,12 @@ export default {
     };
   },
   computed: {
+    showNoData() {
+      return (
+        !this.graphData?.datasets?.[0]?.data?.length ||
+        this.graphData?.datasets?.[0]?.data?.every((d) => d === 0)
+      );
+    },
     options() {
       return {
         responsive: true,
@@ -229,7 +245,6 @@ export default {
             data: [...filteredData, filteredData[filteredData.length - 1]].map((y) => Number(y)),
             borderColor: 'rgb(0 255 157 / 80%)',
             backgroundColor: 'rgb(0 255 157 / 80%)',
-            fill: true,
           },
         ],
       };

src/components/explore/TransactionTable.vue

@@ -26,7 +26,7 @@
             </a>
           </th>
           <td class="px-6 py-4">
-            {{ `$${formatAmountPretty(tx.txUsdValue, 0)}` }}
+            {{ formatUsdPretty(tx.txUsdValue, 0) }}
           </td>
           <td class="px-6 py-4">
             {{ formatAmountPretty(tx.deltaReserve0, token0.decimals) }}
@@ -64,7 +64,7 @@
 import { formatDistance } from 'date-fns';
 import { mapGetters } from 'vuex';
 import ExternalLinkIcon from '@/assets/external-link.svg';
-import { formatAmountPretty, shortenAddress } from '@/lib/utils';
+import { formatAmountPretty, formatUsdPretty, shortenAddress } from '@/lib/utils';
 
 export default {
   name: 'TransactionTable',
@@ -87,6 +87,7 @@ export default {
     ...mapGetters(['activeNetwork']),
   },
   methods: {
+    formatUsdPretty,
     shortenAddress,
     formatDistance,
     formatAmountPretty,

src/lib/utils.js

@@ -198,10 +198,16 @@ export const shortenAddress = (address, lengthStart = 6, lengthEnd = 3) =>
   address ? `${address.slice(0, lengthStart)}...${address.slice(-lengthEnd)}` : '';
 
 export const formatAmountPretty = (amount, decimals) => {
+  if (amount === null) return 'N/A';
   const formattedAmount = new BigNumber(amount).div(new BigNumber(10).pow(decimals)).abs();
   return formattedAmount
     .toFixed(Math.max(0, 5 - formattedAmount.toFixed(0).length))
     .replace(/\.0*$/, '') // remove trailing .0
     .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',') // add 000,000 seperator
     .replace(/(\.\d*[1-9])0+$/, '$1'); // move to 0.0001 instead of 0.00010000
 };
+
+export const formatUsdPretty = (amount, decimals) => {
+  const formattedAmount = formatAmountPretty(amount, decimals);
+  return formattedAmount === 'N/A' ? formattedAmount : `$${formattedAmount}`;
+};

src/views/PoolDetailView.vue

@@ -1,6 +1,6 @@
 <template>
   <ExploreWrapper>
-    <div class="flex flex-row p-6 items-center">
+    <div class="flex flex-row px-6 pt-6 items-center">
       <span v-if="pairId" class="logo"><AddressAvatar :address="pairId" /></span>
       <h1 class="text-2xl">{{ pair?.token0.symbol }} / {{ pair?.token1.symbol }}</h1>
     </div>
@@ -26,14 +26,17 @@
           </ButtonDefault>
         </div>
         <div>
-          <StatElement title="TVL" :value="`$${tvl}`" />
+          <StatElement title="TVL" :value="tvl" />
           <StatElement
-            title="Locked"
+            title="Pool Balances"
             :value="`${token0Amount} ${pair?.token0.symbol}`"
             :value2="`${token1Amount} ${pair?.token1.symbol}`"
           />
-          <StatElement title="Volume (24h)" :value="`$${volume}`" />
-          <StatElement title="Fees (24h)" :value="`$${fees}`" />
+          <StatElement title="Volume (24h)" :value="volume" />
+          <StatElement title="Fees (24h)" :value="fees" />
+        </div>
+        <div>
+          <!-- TODO add links here -->
         </div>
       </div>
     </div>
@@ -115,7 +118,7 @@ import AddressAvatar from '@/components/AddressAvatar.vue';
 import PriceHistoryGraph from '@/components/explore/PriceHistoryGraph.vue';
 import ButtonDefault from '@/components/ButtonDefault.vue';
 import StatElement from '@/components/explore/StatElement.vue';
-import { formatAmountPretty, shortenAddress } from '@/lib/utils';
+import { formatAmountPretty, formatUsdPretty, shortenAddress } from '@/lib/utils';
 import { mapGetters } from 'vuex';
 import ExternalLinkIcon from '@/assets/external-link.svg';
 import TransactionTable from '@/components/explore/TransactionTable.vue';
@@ -151,11 +154,11 @@ export default defineComponent({
     tvl() {
       const tx = this.history[this.history.length - 1];
       if (!tx || !this.pair) return '0';
-      return formatAmountPretty(tx.reserveUsd, 0);
+      return formatUsdPretty(tx.reserveUsd, 0);
     },
     volume() {
-      if (!this.last24hTransactions.length) return '0';
-      return formatAmountPretty(
+      if (!this.last24hTransactions.length) return '$0';
+      return formatUsdPretty(
         this.last24hTransactions.reduce(
           (acc, tx) => acc.plus(tx.txUsdValue || 0),
           new BigNumber(0),
@@ -164,8 +167,8 @@ export default defineComponent({
       );
     },
     fees() {
-      if (!this.last24hTransactions.length) return '0';
-      return formatAmountPretty(
+      if (!this.last24hTransactions.length) return '$0';
+      return formatUsdPretty(
         this.last24hTransactions.reduce((acc, tx) => acc.plus(tx.txUsdFee || 0), new BigNumber(0)),
         0,
       );