From 9d01357de768d43efd48f21803363b89bcdfa8b5 Mon Sep 17 00:00:00 2001
From: Alex Panturu <panturu.alexandru@gmail.com>
Date: Fri, 17 May 2024 12:29:46 +0300
Subject: [PATCH] wip

---
 .../__tests__/TransactionDetails.spec.js      |  1 +
 .../__snapshots__/BlockDetails.spec.js.snap   |  9 ++---
 .../TransactionDetails.spec.js.snap           | 34 ++++++++++++++++---
 .../TransactionDetails.css                    |  4 +++
 .../TransactionDetails.svelte                 | 28 +++++++++------
 .../dusk/currency/createCurrencyFormatter.js  |  2 +-
 .../transactions/transaction/+page.svelte     |  4 +--
 7 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/explorer/src/lib/components/__tests__/TransactionDetails.spec.js b/explorer/src/lib/components/__tests__/TransactionDetails.spec.js
index 15a0d379ee..e8d7b827c1 100644
--- a/explorer/src/lib/components/__tests__/TransactionDetails.spec.js
+++ b/explorer/src/lib/components/__tests__/TransactionDetails.spec.js
@@ -14,6 +14,7 @@ const baseProps = {
   data: transformTransaction(apiTransaction.data[0]),
   error: null,
   loading: false,
+  market: { currentPrice: { usd: 1 } },
   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 60ab0862ff..9505115d30 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 3dfac36e17..b173c77686 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.000290766)
+        
+        <!--&lt;DataGuard&gt;-->
+         
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
@@ -244,6 +254,9 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
         class="details-list__definition"
       >
         0.000000001 DUSK ($0.000000001)
+        
+        <!--&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.000290766)
+        
+        <!--&lt;DataGuard&gt;-->
+         
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
@@ -597,6 +620,9 @@ exports[`Transaction Details > renders the Transaction Details component with th
         class="details-list__definition"
       >
         0.000000001 DUSK ($0.000000001)
+        
+        <!--&lt;DataGuard&gt;-->
+         
       </dd>
       <!--&lt;ListItem&gt;-->
       <dt
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 92e724a835..6d886e5685 100644
--- a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
+++ b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
@@ -33,11 +33,11 @@
   /** @type {String | null} */
   export let payload;
 
-  /** @type {DataStoreContent}*/
+  /** @type {*}*/
   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} */
@@ -89,8 +89,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>
 
@@ -133,17 +137,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 92eb8c3595..bd7820a370 100644
--- a/explorer/src/routes/transactions/transaction/+page.svelte
+++ b/explorer/src/routes/transactions/transaction/+page.svelte
@@ -14,14 +14,14 @@
   const getTransaction = () => {
     dataStore.getData($appStore.network, $page.url.searchParams.get("id"));
     payloadStore.getData($appStore.network, $page.url.searchParams.get("id"));
-    marketStore.getData();
+    marketStore.getData($appStore.network);
   };
 
   onNetworkChange(getTransaction);
 
   $: ({ data, error, isLoading } = $dataStore);
   $: ({ data: payloadData } = $payloadStore);
-  $: ({ data: marketData} = $marketData);
+  $: ({ data: marketData } = $marketStore);
 
   onMount(() => {
     getTransaction();