explorer: compose Blocks page

explorer/src/lib/components/__tests__/DataCard.spec.js

@@ -9,7 +9,7 @@ describe("DataCard", () => {
   const baseProps = {
     data: null,
     error: null,
-    headerButtonDetails: { action: () => {}, label: "Button" },
+    headerButtonDetails: { action: () => {}, disabled: false, label: "Button" },
     loading: false,
     title: "Title",
   };
@@ -73,7 +73,11 @@ describe("DataCard", () => {
 
   it("should pass the correct function to the button on click event", async () => {
     const onClickMock = vi.fn();
-    const headerButtonDetails = { action: onClickMock, label: "Back" };
+    const headerButtonDetails = {
+      action: onClickMock,
+      disabled: false,
+      label: "Back",
+    };
     const { getByRole } = render(DataCard, {
       ...baseOptions,
       props: { ...baseProps, headerButtonDetails },
@@ -83,4 +87,19 @@ describe("DataCard", () => {
 
     expect(onClickMock).toHaveBeenCalledTimes(1);
   });
+
+  it("should render the `DataCard` with a disabled button", () => {
+    const headerButtonDetails = {
+      action: () => {},
+      disabled: true,
+      label: "Back",
+    };
+    const { container, getByRole } = render(DataCard, {
+      ...baseOptions,
+      props: { ...baseProps, headerButtonDetails },
+    });
+
+    expect(getByRole("button")).toBeDisabled();
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });

explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
 <div
-  class="table-container"
+  class="table-container blocks-table"
 >
   <table
     class="table"

explorer/src/lib/components/__tests__/__snapshots__/DataCard.spec.js.snap

@@ -229,5 +229,38 @@ exports[`DataCard > should render the \`DataCard\` in the no data state 1`] = `
   <!--&lt;DataAlert&gt;-->
   
    
+</div>
+`;
+
+exports[`DataCard > should render the \`DataCard\` with a disabled button 1`] = `
+<div
+  class="dusk-card data-card"
+>
+  <header
+    class="data-card__header"
+    slot="header"
+  >
+    <h1
+      class="data-card__header-title"
+    >
+      Title
+    </h1>
+     
+    <button
+      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="dusk-button__text"
+      >
+        Back
+      </span>
+    </button>
+    <!--&lt;Button&gt;-->
+  </header>
+   
+  
+   
 </div>
 `;

explorer/src/lib/components/__tests__/__snapshots__/TransactionsTable.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Transactions Table > should render the \`TransactionsTable\` component 1`] = `
 <div
-  class="table-container"
+  class="table-container transactions-table"
 >
   <table
     class="table"

explorer/src/lib/components/block-details/BlockDetails.svelte

@@ -63,7 +63,11 @@
   {loading}
   className={classes}
   title="Block Details - {blockHeight}"
-  headerButtonDetails={{ action: () => history.back(), label: "Back" }}
+  headerButtonDetails={{
+    action: () => history.back(),
+    disabled: false,
+    label: "Back",
+  }}
 >
   <dl class="block-details__list">
     <!-- BLOCK HASH -->

explorer/src/lib/components/blocks-card/BlocksCard.css

@@ -0,0 +1,5 @@
+.blocks-card__table,
+.blocks-card__list {
+  max-height: 600px;
+  overflow-y: auto;
+}

explorer/src/lib/components/blocks-card/BlocksCard.svelte

@@ -2,13 +2,10 @@
 
 <script>
   import { BlocksList, BlocksTable, DataCard } from "$lib/components";
-  import { makeClassName } from "$lib/dusk/string";
-  import { goto } from "$lib/navigation";
 
-  /** @type {string | Undefined} */
-  export let className = undefined;
+  import "./BlocksCard.css";
 
-  /** @type {Block[]}*/
+  /** @type {Block[] | null}*/
   export let blocks;
 
   /** @type {Error | null}*/
@@ -17,10 +14,35 @@
   /** @type {Boolean} */
   export let loading;
 
+  const ITEMS_TO_DISPLAY = 15;
+
+  let itemsToDisplay = ITEMS_TO_DISPLAY;
+
   /** @type {number} */
   let clientWidth;
 
-  $: classes = makeClassName(["blocks-card", className]);
+  /** @type {Block[]}*/
+  let displayedBlocks;
+
+  /** @type {Boolean}*/
+  let disabledLoading = false;
+
+  const loadMoreItems = () => {
+    if (blocks && itemsToDisplay < blocks.length) {
+      itemsToDisplay += ITEMS_TO_DISPLAY;
+    }
+  };
+
+  $: displayedBlocks = blocks ? blocks.slice(0, itemsToDisplay) : [];
+  $: {
+    if (blocks && itemsToDisplay >= blocks.length) {
+      disabledLoading = true;
+    } else if (loading && blocks === null) {
+      disabledLoading = true;
+    } else {
+      disabledLoading = false;
+    }
+  }
 </script>
 
 <svelte:window bind:outerWidth={clientWidth} />
@@ -29,15 +51,20 @@
   data={blocks}
   {error}
   {loading}
-  className={classes}
   title="Blocks"
-  headerButtonDetails={{ action: () => goto("/blocks"), label: "All Blocks" }}
+  headerButtonDetails={{
+    action: () => loadMoreItems(),
+    disabled: disabledLoading,
+    label: "Show More",
+  }}
 >
   {#if clientWidth > 768}
-    <BlocksTable data={blocks} />
+    <BlocksTable data={displayedBlocks} className="blocks-card__table" />
   {:else}
-    {#each blocks as block (block)}
-      <BlocksList data={block} />
-    {/each}
+    <div class="blocks-card__list">
+      {#each displayedBlocks as block (block)}
+        <BlocksList data={block} />
+      {/each}
+    </div>
   {/if}
 </DataCard>

explorer/src/lib/components/blocks-table/BlocksTable.svelte

@@ -11,18 +11,23 @@
   } from "$lib/components/table";
   import { Badge } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
-  import { getRelativeTimeString } from "$lib/dusk/string";
+  import { getRelativeTimeString, makeClassName } from "$lib/dusk/string";
   import { createValueFormatter } from "$lib/dusk/value";
 
   import "./BlocksTable.css";
 
-  /** @type {Block[]}*/
+  /** @type {string | undefined} */
+  export let className = undefined;
+
+  /** @type {Block[]} */
   export let data;
 
   const numberFormatter = createValueFormatter("en");
+
+  $: classes = makeClassName(["blocks-table", className]);
 </script>
 
-<Table>
+<Table className={classes}>
   <TableHead>
     <TableRow>
       <TableCell type="th"># Block</TableCell>

explorer/src/lib/components/data-card/DataCard.svelte

@@ -19,7 +19,7 @@
   /** @type {String}*/
   export let title;
 
-  /** @type {{action:(e: MouseEvent) => void, label: String}}*/
+  /** @type {{action:(e: MouseEvent) => void, disabled:boolean, label: String}}*/
   export let headerButtonDetails;
 
   /** @type {string | Undefined} */
@@ -37,6 +37,7 @@
       on:click={headerButtonDetails.action}
       text={headerButtonDetails.label}
       variant="secondary"
+      disabled={headerButtonDetails.disabled}
     />
   </header>
   {#if loading && data === null}

explorer/src/lib/components/index.js

@@ -9,12 +9,13 @@ export { default as DataCard } from "./data-card/DataCard.svelte";
 export { default as DataGuard } from "./data-guard/DataGuard.svelte";
 export { default as DetailList } from "./detail-list/DetailList.svelte";
 export { default as Footer } from "./footer/Footer.svelte";
+export { default as LatestBlocksCard } from "./latest-blocks-card/LatestBlocksCard.svelte";
+export { default as LatestTransactionsCard } from "./latest-transactions-card/LatestTransactionsCard.svelte";
 export { default as ListItem } from "./list-item/ListItem.svelte";
 export { default as Navbar } from "./navbar/Navbar.svelte";
 export { default as SearchNotification } from "./search-notification/SearchNotification.svelte";
 export { default as TextboxAndButton } from "./textbox-and-button/TextboxAndButton.svelte";
 export { default as TransactionDetails } from "./transaction-details/TransactionDetails.svelte";
-export { default as TransactionsCard } from "./transactions-card/TransactionsCard.svelte";
 export { default as TransactionsList } from "./transactions-list/TransactionsList.svelte";
 export { default as TransactionsTable } from "./transactions-table/TransactionsTable.svelte";
 export { default as WorldMap } from "./world-map/WorldMap.svelte";

explorer/src/lib/components/latest-blocks-card/LatestBlocksCard.svelte

@@ -0,0 +1,47 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { BlocksList, BlocksTable, DataCard } from "$lib/components";
+  import { makeClassName } from "$lib/dusk/string";
+  import { goto } from "$lib/navigation";
+
+  /** @type {string | Undefined} */
+  export let className = undefined;
+
+  /** @type {Block[]}*/
+  export let blocks;
+
+  /** @type {Error | null}*/
+  export let error;
+
+  /** @type {Boolean} */
+  export let loading;
+
+  /** @type {number} */
+  let clientWidth;
+
+  $: classes = makeClassName(["latest-blocks-card", className]);
+</script>
+
+<svelte:window bind:outerWidth={clientWidth} />
+<DataCard
+  on:retry
+  data={blocks}
+  {error}
+  {loading}
+  className={classes}
+  title="Blocks"
+  headerButtonDetails={{
+    action: () => goto("/blocks"),
+    disabled: false,
+    label: "All Blocks",
+  }}
+>
+  {#if clientWidth > 768}
+    <BlocksTable data={blocks} />
+  {:else}
+    {#each blocks as block (block)}
+      <BlocksList data={block} />
+    {/each}
+  {/if}
+</DataCard>

explorer/src/lib/components/transactions-card/TransactionsCard.svelte → explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte

@@ -24,7 +24,7 @@
   /** @type {number} */
   let clientWidth;
 
-  $: classes = makeClassName(["transactions-card", className]);
+  $: classes = makeClassName(["latest-transactions-card", className]);
 </script>
 
 <svelte:window bind:outerWidth={clientWidth} />
@@ -37,6 +37,7 @@
   title="Transactions"
   headerButtonDetails={{
     action: () => goto("/transactions"),
+    disabled: false,
     label: "All Transactions",
   }}
 >

explorer/src/lib/components/table/Table.svelte

@@ -1,8 +1,14 @@
 <script>
+  import { makeClassName } from "$lib/dusk/string";
   import "./Table.css";
+
+  /** @type {string | Undefined} */
+  export let className;
+
+  $: classes = makeClassName(["table-container", className]);
 </script>
 
-<div class="table-container">
+<div class={classes}>
   <table class="table">
     <slot />
   </table>

explorer/src/lib/components/transaction-details/TransactionDetails.svelte

@@ -62,7 +62,11 @@
   {loading}
   className={classes}
   title="Transaction Details"
-  headerButtonDetails={{ action: () => history.back(), label: "Back" }}
+  headerButtonDetails={{
+    action: () => history.back(),
+    disabled: false,
+    label: "Back",
+  }}
 >
   <dl class="transaction-details__list">
     <!-- TRANSACTION ID -->

explorer/src/lib/components/transactions-table/TransactionsTable.svelte

@@ -12,18 +12,27 @@
   import { Badge } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import { createValueFormatter } from "$lib/dusk/value";
-  import { getRelativeTimeString, middleEllipsis } from "$lib/dusk/string";
+  import {
+    getRelativeTimeString,
+    makeClassName,
+    middleEllipsis,
+  } from "$lib/dusk/string";
   import "./TransactionsTable.css";
 
+  /** @type {string | Undefined} */
+  export let className = undefined;
+
   /** @type {Transaction[]}*/
   export let data;
 
   const HASH_CHARS_LENGTH = 10;
 
   const numberFormatter = createValueFormatter("en");
+
+  $: classes = makeClassName(["transactions-table", className]);
 </script>
 
-<Table>
+<Table className={classes}>
   <TableHead>
     <TableRow>
       <TableCell type="th">Hash</TableCell>