From 7a32c22c71a67e66ed9f89ac676e9b0aac391bf1 Mon Sep 17 00:00:00 2001
From: Alex Panturu <panturu.alexandru@gmail.com>
Date: Thu, 23 May 2024 17:28:44 +0300
Subject: [PATCH] explorer: disable block height navigation

---
 .../__snapshots__/BlockDetails.spec.js.snap   | 22 ++++++++++++++-----
 .../block-details/BlockDetails.svelte         | 20 ++++++++---------
 .../__tests__/__snapshots__/page.spec.js.snap | 22 ++++++++++++++-----
 3 files changed, 42 insertions(+), 22 deletions(-)

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 65fd87bc42..61719f10fc 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
@@ -85,11 +85,12 @@ exports[`Block Details > renders the Block Details component 1`] = `
         class="details-list__definition"
       >
         <a
-          class="dusk-anchor block-details__list-anchor"
+          aria-disabled="false"
+          class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button block-details__list-anchor"
           href="/some-base-path/blocks/block?id=07b74b35c2c7cf8f41426cd0870bafa1a2c7adee3fdd876643548096186fc4cb"
         >
           <svg
-            class="dusk-icon dusk-icon--size--normal"
+            class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
@@ -99,18 +100,23 @@ exports[`Block Details > renders the Block Details component 1`] = `
           </svg>
           
           <!--&lt;Icon&gt;-->
+           
+          
+          
         </a>
         <!--&lt;Anchor&gt;-->
-        <!--&lt;AppAnchor&gt;-->
+        <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
          
         495,868
          
         <a
-          class="dusk-anchor block-details__list-anchor"
+          aria-disabled="false"
+          class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button block-details__list-anchor"
           href="/some-base-path/blocks/block?id=6011556208a85e6001bd01ccbf936486b91318a7f6cbcf7ab810adf6fae34204"
         >
           <svg
-            class="dusk-icon dusk-icon--size--normal"
+            class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
@@ -120,9 +126,13 @@ exports[`Block Details > renders the Block Details component 1`] = `
           </svg>
           
           <!--&lt;Icon&gt;-->
+           
+          
+          
         </a>
         <!--&lt;Anchor&gt;-->
-        <!--&lt;AppAnchor&gt;-->
+        <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
          
       </dd>
       <!--&lt;ListItem&gt;-->
diff --git a/explorer/src/lib/components/block-details/BlockDetails.svelte b/explorer/src/lib/components/block-details/BlockDetails.svelte
index 965d635206..bff9635df7 100644
--- a/explorer/src/lib/components/block-details/BlockDetails.svelte
+++ b/explorer/src/lib/components/block-details/BlockDetails.svelte
@@ -2,8 +2,8 @@
 
 <script>
   import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
-  import { AppAnchor, DataCard, ListItem } from "$lib/components";
-  import { Icon, ProgressBar } from "$lib/dusk/components";
+  import { AppAnchorButton, DataCard, ListItem } from "$lib/components";
+  import { ProgressBar } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import { createValueFormatter } from "$lib/dusk/value";
   import {
@@ -80,19 +80,19 @@
     >
       <svelte:fragment slot="term">height</svelte:fragment>
       <svelte:fragment slot="definition">
-        <AppAnchor
+        <AppAnchorButton
           className="block-details__list-anchor"
           href="/blocks/block?id={data.header.prevblockhash}"
-        >
-          <Icon path={mdiArrowLeft} />
-        </AppAnchor>
+          icon={{ path: mdiArrowLeft }}
+          disabled={!data.header.prevblockhash}
+        />
         {formatter(data.header.height)}
-        <AppAnchor
+        <AppAnchorButton
           className="block-details__list-anchor"
           href="/blocks/block?id={data.header.nextblockhash}"
-        >
-          <Icon path={mdiArrowRight} />
-        </AppAnchor>
+          icon={{ path: mdiArrowRight }}
+          disabled={!data.header.nextblockhash}
+        />
       </svelte:fragment>
     </ListItem>
 
diff --git a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
index 379f3fc131..25515a14cd 100644
--- a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
@@ -175,11 +175,12 @@ exports[`Block Details > should render the Block Details page and query the nece
             class="details-list__definition"
           >
             <a
-              class="dusk-anchor block-details__list-anchor"
+              aria-disabled="false"
+              class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button block-details__list-anchor"
               href="/some-base-path/blocks/block?id=07b74b35c2c7cf8f41426cd0870bafa1a2c7adee3fdd876643548096186fc4cb"
             >
               <svg
-                class="dusk-icon dusk-icon--size--normal"
+                class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
                 role="graphics-symbol"
                 viewBox="0 0 24 24"
               >
@@ -189,18 +190,23 @@ exports[`Block Details > should render the Block Details page and query the nece
               </svg>
               
               <!--&lt;Icon&gt;-->
+               
+              
+              
             </a>
             <!--&lt;Anchor&gt;-->
-            <!--&lt;AppAnchor&gt;-->
+            <!--&lt;AnchorButton&gt;-->
+            <!--&lt;AppAnchorButton&gt;-->
              
             495,868
              
             <a
-              class="dusk-anchor block-details__list-anchor"
+              aria-disabled="false"
+              class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button block-details__list-anchor"
               href="/some-base-path/blocks/block?id=6011556208a85e6001bd01ccbf936486b91318a7f6cbcf7ab810adf6fae34204"
             >
               <svg
-                class="dusk-icon dusk-icon--size--normal"
+                class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
                 role="graphics-symbol"
                 viewBox="0 0 24 24"
               >
@@ -210,9 +216,13 @@ exports[`Block Details > should render the Block Details page and query the nece
               </svg>
               
               <!--&lt;Icon&gt;-->
+               
+              
+              
             </a>
             <!--&lt;Anchor&gt;-->
-            <!--&lt;AppAnchor&gt;-->
+            <!--&lt;AnchorButton&gt;-->
+            <!--&lt;AppAnchorButton&gt;-->
              
           </dd>
           <!--&lt;ListItem&gt;-->