From cff62080b411961fa544cfca8726c4bbaafbce0c Mon Sep 17 00:00:00 2001
From: Alex Panturu <panturu.alexandru@gmail.com>
Date: Fri, 17 May 2024 11:34:21 +0300
Subject: [PATCH] explorer: fix currency types

---
 .../__tests__/TransactionDetails.spec.js      |  6 ++-
 .../__snapshots__/BlockDetails.spec.js.snap   |  9 ++---
 .../TransactionDetails.spec.js.snap           | 38 ++++++++++++++++---
 .../block-details/BlockDetails.svelte         |  4 +-
 .../TransactionDetails.css                    |  4 ++
 .../TransactionDetails.svelte                 | 31 ++++++++++-----
 .../dusk/currency/createCurrencyFormatter.js  |  2 +-
 .../transactions/transaction/+page.svelte     |  4 ++
 8 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/explorer/src/lib/components/__tests__/TransactionDetails.spec.js b/explorer/src/lib/components/__tests__/TransactionDetails.spec.js
index 15a0d379ee..652f110763 100644
--- a/explorer/src/lib/components/__tests__/TransactionDetails.spec.js
+++ b/explorer/src/lib/components/__tests__/TransactionDetails.spec.js
@@ -1,6 +1,6 @@
 import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render } from "@testing-library/svelte";
-import { apiTransaction } from "$lib/mock-data";
+import { apiMarketData, apiTransaction } from "$lib/mock-data";
 import { transformTransaction } from "$lib/chain-info";
 import { TransactionDetails } from "../";
 
@@ -14,6 +14,10 @@ const baseProps = {
   data: transformTransaction(apiTransaction.data[0]),
   error: null,
   loading: false,
+  market: {
+    currentPrice: apiMarketData.market_data.current_price,
+    marketCap: apiMarketData.market_data.market_cap,
+  },
   payload:
     "db0794770322802a22905c4364511f3186e6184085f875dbb9f11a3ae914766c020000000000000014bc23b875c67d0dbecfdd45f5964f3fea7188aff2035730c8802",
 };
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
index c4c919f1fb..1c5ae8ea67 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
@@ -272,8 +272,7 @@ exports[`Block Details > renders the Block Details component 1`] = `
       <dd
         class="details-list__definition"
       >
-        5
-         DUSK
+        5,000,000,000
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
@@ -301,10 +300,8 @@ exports[`Block Details > renders the Block Details component 1`] = `
       <dd
         class="details-list__definition"
       >
-        0.000580718
-         DUSK
-
-        
+        580,718
+         
         <div
           class="dusk-progress-bar block-details__gas-used"
           role="progressbar"
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
index 18014df7b2..d46935375e 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
@@ -84,7 +84,14 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
       <dd
         class="details-list__definition"
       >
-        487,166
+        <a
+          class="dusk-anchor transaction-details__list-anchor"
+          href="/some-base-path/blocks/block?id=3c6e4018cfa86723e50644e33d3990bc27fc794f6b49fbf6290e4d308e07bd2d"
+        >
+          487,166
+        </a>
+        <!--&lt;Anchor&gt;-->
+        <!--&lt;AppAnchor&gt;-->
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
@@ -215,7 +222,10 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
       <dd
         class="details-list__definition"
       >
-        0.000290766 DUSK ($0.000145383)
+        0.000290766 DUSK ($0.0001071037)
+        
+        <!--&lt;DataGuard&gt;-->
+         
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
@@ -243,7 +253,10 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
       <dd
         class="details-list__definition"
       >
-        0.000000001 DUSK ($0.000000001)
+        0.000000001 DUSK ($0.0000000004)
+        
+        <!--&lt;DataGuard&gt;-->
+         
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
@@ -437,7 +450,14 @@ exports[`Transaction Details > renders the Transaction Details component with th
       <dd
         class="details-list__definition"
       >
-        487,166
+        <a
+          class="dusk-anchor transaction-details__list-anchor"
+          href="/some-base-path/blocks/block?id=3c6e4018cfa86723e50644e33d3990bc27fc794f6b49fbf6290e4d308e07bd2d"
+        >
+          487,166
+        </a>
+        <!--&lt;Anchor&gt;-->
+        <!--&lt;AppAnchor&gt;-->
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
@@ -568,7 +588,10 @@ exports[`Transaction Details > renders the Transaction Details component with th
       <dd
         class="details-list__definition"
       >
-        0.000290766 DUSK ($0.000145383)
+        0.000290766 DUSK ($0.0001071037)
+        
+        <!--&lt;DataGuard&gt;-->
+         
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
@@ -596,7 +619,10 @@ exports[`Transaction Details > renders the Transaction Details component with th
       <dd
         class="details-list__definition"
       >
-        0.000000001 DUSK ($0.000000001)
+        0.000000001 DUSK ($0.0000000004)
+        
+        <!--&lt;DataGuard&gt;-->
+         
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
diff --git a/explorer/src/lib/components/block-details/BlockDetails.svelte b/explorer/src/lib/components/block-details/BlockDetails.svelte
index 30c27bf557..b6b3a3fc8d 100644
--- a/explorer/src/lib/components/block-details/BlockDetails.svelte
+++ b/explorer/src/lib/components/block-details/BlockDetails.svelte
@@ -137,7 +137,7 @@
     <ListItem tooltipText="The block gas limit">
       <svelte:fragment slot="term">block gas limit</svelte:fragment>
       <svelte:fragment slot="definition"
-        >{formatter(luxToDusk(data.transactions.stats.gasLimit))} DUSK</svelte:fragment
+        >{formatter(data.transactions.stats.gasLimit)}</svelte:fragment
       >
     </ListItem>
 
@@ -145,7 +145,7 @@
     <ListItem tooltipText="The amount of gas used generating the block">
       <svelte:fragment slot="term">gas used</svelte:fragment>
       <svelte:fragment slot="definition">
-        {formatter(luxToDusk(data.transactions.stats.gasUsed))} DUSK
+        {formatter(data.transactions.stats.gasUsed)}
 
         <ProgressBar
           currentPercentage={(data.transactions.stats.gasUsed /
diff --git a/explorer/src/lib/components/transaction-details/TransactionDetails.css b/explorer/src/lib/components/transaction-details/TransactionDetails.css
index 395fbe72f6..9166d08926 100644
--- a/explorer/src/lib/components/transaction-details/TransactionDetails.css
+++ b/explorer/src/lib/components/transaction-details/TransactionDetails.css
@@ -11,6 +11,10 @@
   width: 100%;
 }
 
+.transaction-details__list-anchor {
+  text-decoration: none;
+}
+
 .transaction-details__list-timestamp {
   text-transform: uppercase;
 }
diff --git a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
index 92b3f483d2..c717735e37 100644
--- a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
+++ b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
@@ -1,7 +1,7 @@
 <svelte:options immutable={true} />
 
 <script>
-  import { DataCard, DataGuard, ListItem } from "$lib/components";
+  import { AppAnchor, DataCard, DataGuard, ListItem } from "$lib/components";
   import { Badge, Card, Switch } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
   import {
@@ -33,8 +33,11 @@
   /** @type {String | null} */
   export let payload;
 
+  /** @type {MarketData}*/ //Can also be null
+  export let market;
+
   const formatter = createValueFormatter("en");
-  const currencyFormatter = createCurrencyFormatter("en", "usd", 9);
+  const currencyFormatter = createCurrencyFormatter("en", "usd", 10);
   const feeFormatter = createFeeFormatter("en");
 
   /** @type {number} */
@@ -87,8 +90,12 @@
     <!-- BLOCK HEIGHT -->
     <ListItem tooltipText="The block height this transaction belongs to">
       <svelte:fragment slot="term">block height</svelte:fragment>
-      <svelte:fragment slot="definition"
-        >{formatter(data.blockheight)}</svelte:fragment
+      <svelte:fragment slot="definition">
+        <AppAnchor
+          className="transaction-details__list-anchor"
+          href="/blocks/block?id={data.blockhash}"
+          >{formatter(data.blockheight)}</AppAnchor
+        ></svelte:fragment
       >
     </ListItem>
 
@@ -131,17 +138,21 @@
     <!-- TRANSACTION FEE -->
     <ListItem tooltipText="The fee paid for the transaction">
       <svelte:fragment slot="term">transaction fee</svelte:fragment>
-      <svelte:fragment slot="definition"
-        >{`${feeFormatter(luxToDusk(data.feepaid))} DUSK (${currencyFormatter(luxToDusk(data.feepaid) * 0.5)})`}</svelte:fragment
-      >
+      <svelte:fragment slot="definition">
+        <DataGuard data={market?.currentPrice.usd}>
+          {`${feeFormatter(luxToDusk(data.feepaid))} DUSK (${currencyFormatter(luxToDusk(data.feepaid) * market.currentPrice.usd)})`}
+        </DataGuard>
+      </svelte:fragment>
     </ListItem>
 
     <!-- GAS PRICE -->
     <ListItem tooltipText="The transaction gas price">
       <svelte:fragment slot="term">gas price</svelte:fragment>
-      <svelte:fragment slot="definition"
-        >{`${feeFormatter(luxToDusk(data.gasprice))} DUSK (${currencyFormatter(luxToDusk(data.gasprice) * 0.5)})`}</svelte:fragment
-      >
+      <svelte:fragment slot="definition">
+        <DataGuard data={market?.currentPrice.usd}>
+          {`${feeFormatter(luxToDusk(data.gasprice))} DUSK (${currencyFormatter(luxToDusk(data.gasprice) * market.currentPrice.usd)})`}
+        </DataGuard>
+      </svelte:fragment>
     </ListItem>
 
     <!-- GAS LIMIT -->
diff --git a/explorer/src/lib/dusk/currency/createCurrencyFormatter.js b/explorer/src/lib/dusk/currency/createCurrencyFormatter.js
index e2d9694a05..1caa098e6f 100644
--- a/explorer/src/lib/dusk/currency/createCurrencyFormatter.js
+++ b/explorer/src/lib/dusk/currency/createCurrencyFormatter.js
@@ -12,7 +12,7 @@ const createFormatter = (locale, currency, digits) => {
       ? new Intl.NumberFormat(locale, { minimumFractionDigits: digits })
       : new Intl.NumberFormat(locale, {
           currency: currency,
-          maximumFractionDigits: 9,
+          maximumFractionDigits: 10,
           minimumFractionDigits: 2,
           style: "currency",
         });
diff --git a/explorer/src/routes/transactions/transaction/+page.svelte b/explorer/src/routes/transactions/transaction/+page.svelte
index 8f5c7a8919..bd7820a370 100644
--- a/explorer/src/routes/transactions/transaction/+page.svelte
+++ b/explorer/src/routes/transactions/transaction/+page.svelte
@@ -9,16 +9,19 @@
 
   const dataStore = createDataStore(duskAPI.getTransaction);
   const payloadStore = createDataStore(duskAPI.getTransactionDetails);
+  const marketStore = createDataStore(duskAPI.getMarketData);
 
   const getTransaction = () => {
     dataStore.getData($appStore.network, $page.url.searchParams.get("id"));
     payloadStore.getData($appStore.network, $page.url.searchParams.get("id"));
+    marketStore.getData($appStore.network);
   };
 
   onNetworkChange(getTransaction);
 
   $: ({ data, error, isLoading } = $dataStore);
   $: ({ data: payloadData } = $payloadStore);
+  $: ({ data: marketData } = $marketStore);
 
   onMount(() => {
     getTransaction();
@@ -32,5 +35,6 @@
     {error}
     loading={isLoading}
     payload={payloadData}
+    market={marketData}
   />
 </section>