From 295318e52711dd1d5a0384057e7eff0a0ee5c9c0 Mon Sep 17 00:00:00 2001
From: Alex <panturu.alexandru@gmail.com>
Date: Thu, 9 May 2024 17:41:22 +0300
Subject: [PATCH] refactor component structure

---
 explorer/src/lib/components/alert/Alert.css   |   9 ++
 .../src/lib/components/alert/Alert.svelte     |  37 ++++++
 .../components/blocks-card/BlocksCard.svelte  |  51 ++++++++
 .../components/blocks-list/BlocksList.svelte  |   3 +-
 .../components/blocks-table/BlocksTable.css   |  16 +++
 .../blocks-table/BlocksTable.svelte           |  63 ++++++++++
 .../src/lib/components/data-card/DataCard.css |  18 +++
 .../lib/components/data-card/DataCard.svelte  |  32 +++++
 explorer/src/lib/components/index.js          |   7 +-
 .../lib/components/retry-fetch/RetryFetch.css |   9 --
 .../components/retry-fetch/RetryFetch.svelte  |  17 ---
 .../transactions-card/TransactionsCard.svelte |  56 +++++++++
 .../transactions-table/TransactionsTable.css  |  16 +++
 .../TransactionsTable.svelte                  |  66 ++++++++++
 explorer/src/lib/containers/index.js          |   1 -
 .../containers/latest-blocks/LatestBlocks.css |  36 ------
 .../latest-blocks/LatestBlocks.svelte         | 104 ----------------
 .../src/lib/containers/latest-tx/LatestTx.css |  36 ------
 .../lib/containers/latest-tx/LatestTx.svelte  | 113 ------------------
 explorer/src/routes/+page.svelte              |  12 +-
 explorer/src/routes/blocks/block/+page.svelte |  40 ++-----
 21 files changed, 389 insertions(+), 353 deletions(-)
 create mode 100644 explorer/src/lib/components/alert/Alert.css
 create mode 100644 explorer/src/lib/components/alert/Alert.svelte
 create mode 100644 explorer/src/lib/components/blocks-card/BlocksCard.svelte
 create mode 100644 explorer/src/lib/components/blocks-table/BlocksTable.css
 create mode 100644 explorer/src/lib/components/blocks-table/BlocksTable.svelte
 create mode 100644 explorer/src/lib/components/data-card/DataCard.css
 create mode 100644 explorer/src/lib/components/data-card/DataCard.svelte
 delete mode 100644 explorer/src/lib/components/retry-fetch/RetryFetch.css
 delete mode 100644 explorer/src/lib/components/retry-fetch/RetryFetch.svelte
 create mode 100644 explorer/src/lib/components/transactions-card/TransactionsCard.svelte
 create mode 100644 explorer/src/lib/components/transactions-table/TransactionsTable.css
 create mode 100644 explorer/src/lib/components/transactions-table/TransactionsTable.svelte
 delete mode 100644 explorer/src/lib/containers/latest-blocks/LatestBlocks.css
 delete mode 100644 explorer/src/lib/containers/latest-blocks/LatestBlocks.svelte
 delete mode 100644 explorer/src/lib/containers/latest-tx/LatestTx.css
 delete mode 100644 explorer/src/lib/containers/latest-tx/LatestTx.svelte

diff --git a/explorer/src/lib/components/alert/Alert.css b/explorer/src/lib/components/alert/Alert.css
new file mode 100644
index 0000000000..53f38788c3
--- /dev/null
+++ b/explorer/src/lib/components/alert/Alert.css
@@ -0,0 +1,9 @@
+.alert {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 400px;
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+}
diff --git a/explorer/src/lib/components/alert/Alert.svelte b/explorer/src/lib/components/alert/Alert.svelte
new file mode 100644
index 0000000000..1778c29be5
--- /dev/null
+++ b/explorer/src/lib/components/alert/Alert.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { mdiAlertOutline, mdiReload } from "@mdi/js";
+  import { Button, Icon } from "$lib/dusk/components";
+  import { createEventDispatcher } from "svelte";
+  import "./Alert.css";
+
+  /** @type {Error | null}*/
+  export let error;
+
+  /** @type {Boolean}*/
+  export let hasEmptyData;
+
+  const dispatch = createEventDispatcher();
+
+  $: error = error || null;
+</script>
+
+<div class="alert">
+  <Icon path={mdiAlertOutline} size="large" />
+  <header>
+    {#if error}
+      <h1>There was an error fetching the data.</h1>
+      <p>{error?.message ?? ""}</p>
+    {:else if hasEmptyData}
+      <h1>No data to display</h1>
+    {/if}
+  </header>
+  {#if error}
+    <Button
+      on:click={() => {
+        dispatch("retry");
+      }}
+      icon={{ path: mdiReload, size: "large" }}
+      variant="secondary"
+    />
+  {/if}
+</div>
diff --git a/explorer/src/lib/components/blocks-card/BlocksCard.svelte b/explorer/src/lib/components/blocks-card/BlocksCard.svelte
new file mode 100644
index 0000000000..1713a8864d
--- /dev/null
+++ b/explorer/src/lib/components/blocks-card/BlocksCard.svelte
@@ -0,0 +1,51 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { Alert, BlocksList, BlocksTable, DataCard } from "$lib/components";
+  import { makeClassName } from "$lib/dusk/string";
+
+  /** @type {string | Undefined} */
+  export let className = undefined;
+
+  /** @type {Block[]}*/
+  export let blocks;
+
+  /** @type {Error | null}*/
+  export let error;
+
+  /** @type {Boolean} */
+  export let loading;
+
+  /** @type {Boolean} */
+  let hasEmptyData;
+
+  /** @type {number} */
+  let clientWidth;
+
+  $: {
+    hasEmptyData = Array.isArray(blocks) && blocks.length === 0;
+  }
+
+  $: classes = makeClassName(["blocks-card", className]);
+</script>
+
+<svelte:window bind:outerWidth={clientWidth} />
+<DataCard
+  className={classes}
+  title="Blocks"
+  action={{ href: "/blocks", label: "All Blocks" }}
+>
+  {#if error || hasEmptyData}
+    <Alert on:retry {error} {hasEmptyData} />
+  {:else if blocks}
+    {#if clientWidth > 768}
+      <BlocksTable data={blocks} />
+    {:else}
+      <div class="blocks-mobile">
+        {#each blocks as block (block)}
+          <BlocksList data={block} />
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</DataCard>
diff --git a/explorer/src/lib/components/blocks-list/BlocksList.svelte b/explorer/src/lib/components/blocks-list/BlocksList.svelte
index 1bdc450be2..5fb8b794e9 100644
--- a/explorer/src/lib/components/blocks-list/BlocksList.svelte
+++ b/explorer/src/lib/components/blocks-list/BlocksList.svelte
@@ -2,10 +2,9 @@
 
 <script>
   import { DataGuard, DetailList, ListItem } from "$lib/components";
-  import { Badge } from "$lib/dusk/components";
+  import { Badge, ProgressBar } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
   import { getRelativeTimeString } from "$lib/dusk/string";
-  import { ProgressBar } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import "./BlocksList.css";
 
diff --git a/explorer/src/lib/components/blocks-table/BlocksTable.css b/explorer/src/lib/components/blocks-table/BlocksTable.css
new file mode 100644
index 0000000000..ffd509f8d8
--- /dev/null
+++ b/explorer/src/lib/components/blocks-table/BlocksTable.css
@@ -0,0 +1,16 @@
+.block__link {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.block__fee-avg-label,
+.block__fee-total-label {
+  font-weight: 500;
+}
+
+.block__time {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-top: 0.2rem;
+}
diff --git a/explorer/src/lib/components/blocks-table/BlocksTable.svelte b/explorer/src/lib/components/blocks-table/BlocksTable.svelte
new file mode 100644
index 0000000000..b7fd2a7f07
--- /dev/null
+++ b/explorer/src/lib/components/blocks-table/BlocksTable.svelte
@@ -0,0 +1,63 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { AppAnchor } from "$lib/components";
+  import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+  } from "$lib/components/table";
+  import { Badge } from "$lib/dusk/components";
+  import { luxToDusk } from "$lib/dusk/currency";
+  import { getRelativeTimeString } from "$lib/dusk/string";
+  import { createValueFormatter } from "$lib/dusk/value";
+
+  import "./BlocksTable.css";
+
+  /** @type {Block[]}*/
+  export let data;
+
+  const numberFormatter = createValueFormatter("en");
+</script>
+
+<Table>
+  <TableHead>
+    <TableRow>
+      <TableCell type="th"># Block</TableCell>
+      <TableCell type="th">Fee</TableCell>
+      <TableCell type="th">Txn(s)</TableCell>
+      <TableCell type="th">Rewards</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    {#each data as block (block)}
+      <TableRow>
+        <TableCell>
+          <AppAnchor
+            className="block__link"
+            href={`/blocks/block?id=${block.header.hash}`}
+            >{numberFormatter(block.header.height)}</AppAnchor
+          >
+          <small class="block__time"
+            >{getRelativeTimeString(block.header.date, "long")}</small
+          >
+        </TableCell>
+        <TableCell>
+          <b class="block__fee-avg-label">AVG:</b>
+          {numberFormatter(block.transactions.stats.averageGasPrice)}<br />
+          <b class="block__fee-total-label">TOTAL:</b>
+          {numberFormatter(block.transactions.stats.gasUsed)}
+        </TableCell>
+        <TableCell>{numberFormatter(block.transactions.data.length)}</TableCell>
+        <TableCell
+          ><Badge
+            variant="alt"
+            text={`${numberFormatter(luxToDusk(block.header.reward))} Dusk`}
+          /></TableCell
+        >
+      </TableRow>
+    {/each}
+  </TableBody>
+</Table>
diff --git a/explorer/src/lib/components/data-card/DataCard.css b/explorer/src/lib/components/data-card/DataCard.css
new file mode 100644
index 0000000000..2f690a17e8
--- /dev/null
+++ b/explorer/src/lib/components/data-card/DataCard.css
@@ -0,0 +1,18 @@
+.data-card {
+  padding: 1rem 0;
+}
+
+.data-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1.125rem 1rem;
+}
+
+.data-card__header-title {
+  font-weight: 400;
+  text-transform: uppercase;
+  font-size: 1.125rem;
+  line-height: 32.2px;
+  letter-spacing: -1%;
+}
diff --git a/explorer/src/lib/components/data-card/DataCard.svelte b/explorer/src/lib/components/data-card/DataCard.svelte
new file mode 100644
index 0000000000..8cacb8e6b3
--- /dev/null
+++ b/explorer/src/lib/components/data-card/DataCard.svelte
@@ -0,0 +1,32 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { Button, Card } from "$lib/dusk/components";
+  import { makeClassName } from "$lib/dusk/string";
+  import { goto } from "$lib/navigation";
+
+  import "./DataCard.css";
+
+  /** @type {string}*/
+  export let title;
+
+  /** @type { {label:string, href:string} }*/
+  export let action;
+
+  /** @type {string | Undefined} */
+  export let className = undefined;
+
+  $: classes = makeClassName(["data-card", className]);
+</script>
+
+<Card className={classes}>
+  <header slot="header" class="data-card__header">
+    <h1 class="data-card__header-title">{title}</h1>
+    <Button
+      on:click={() => goto(action.href)}
+      text={action.label}
+      variant="secondary"
+    />
+  </header>
+  <slot />
+</Card>
diff --git a/explorer/src/lib/components/index.js b/explorer/src/lib/components/index.js
index 1f7900e1a9..8db3bcb982 100644
--- a/explorer/src/lib/components/index.js
+++ b/explorer/src/lib/components/index.js
@@ -1,15 +1,20 @@
+export { default as Alert } from "./alert/Alert.svelte";
 export { default as AppAnchor } from "./app-anchor/AppAnchor.svelte";
 export { default as AppImage } from "./app-image/AppImage.svelte";
 export { default as BlockDetails } from "./block-details/BlockDetails.svelte";
+export { default as BlocksCard } from "./blocks-card/BlocksCard.svelte";
 export { default as BlocksList } from "./blocks-list/BlocksList.svelte";
+export { default as BlocksTable } from "./blocks-table/BlocksTable.svelte";
+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 ListItem } from "./list-item/ListItem.svelte";
 export { default as Navbar } from "./navbar/Navbar.svelte";
-export { default as RetryFetch } from "./retry-fetch/RetryFetch.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";
diff --git a/explorer/src/lib/components/retry-fetch/RetryFetch.css b/explorer/src/lib/components/retry-fetch/RetryFetch.css
deleted file mode 100644
index 08a8f4e722..0000000000
--- a/explorer/src/lib/components/retry-fetch/RetryFetch.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.retry-fetch {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 788px;
-    justify-content: center;
-    align-items: center;
-    gap: 0.625rem;
-}
\ No newline at end of file
diff --git a/explorer/src/lib/components/retry-fetch/RetryFetch.svelte b/explorer/src/lib/components/retry-fetch/RetryFetch.svelte
deleted file mode 100644
index 0f334d18cb..0000000000
--- a/explorer/src/lib/components/retry-fetch/RetryFetch.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-      import { mdiAlertOutline, mdiReload  } from "@mdi/js";
-  import { Button, Icon } from "$lib/dusk/components";
-  import { createEventDispatcher } from "svelte";
-import "./RetryFetch.css";
-
-const dispatch = createEventDispatcher();
-</script>
-<div class="retry-fetch">
-    <Icon path={mdiAlertOutline} size="large"/>
-    <span>There was an error fetching the data.</span>
-    <Button 
-        on:click={()=>{dispatch('retry')}}
-        icon={{path:mdiReload, size:"large"}}
-        variant="secondary"
-    />
-</div>
\ No newline at end of file
diff --git a/explorer/src/lib/components/transactions-card/TransactionsCard.svelte b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte
new file mode 100644
index 0000000000..9dbed83cbc
--- /dev/null
+++ b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte
@@ -0,0 +1,56 @@
+<svelte:options immutable={true} />
+
+<script>
+  import {
+    Alert,
+    DataCard,
+    TransactionsList,
+    TransactionsTable,
+  } from "$lib/components";
+  import { makeClassName } from "$lib/dusk/string";
+
+  /** @type {string | Undefined} */
+  export let className = undefined;
+
+  /** @type {Transaction[]}*/
+  export let txs;
+
+  /** @type {Error | null}*/
+  export let error;
+
+  /** @type {Boolean} */
+  export let loading;
+
+  /** @type {Boolean} */
+  let hasEmptyData;
+
+  /** @type {number} */
+  let clientWidth;
+
+  $: {
+    hasEmptyData = Array.isArray(txs) && txs.length === 0;
+  }
+
+  $: classes = makeClassName(["transactions-card", className]);
+</script>
+
+<svelte:window bind:outerWidth={clientWidth} />
+<DataCard
+  className={classes}
+  title="Transactions"
+  action={{ href: "/transactions", label: "All Transactions" }}
+>
+  {#if error || hasEmptyData}
+    <Alert on:retry {error} {hasEmptyData} />
+  {:else if txs}
+    {#if clientWidth > 768}
+      <TransactionsTable data={txs} />
+    {:else}
+      <div class="blocks-mobile">
+        {#each txs as tx (tx)}
+          <TransactionsList data={tx} />
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</DataCard>
diff --git a/explorer/src/lib/components/transactions-table/TransactionsTable.css b/explorer/src/lib/components/transactions-table/TransactionsTable.css
new file mode 100644
index 0000000000..73fbef722c
--- /dev/null
+++ b/explorer/src/lib/components/transactions-table/TransactionsTable.css
@@ -0,0 +1,16 @@
+.transaction__link {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.transaction__fee-price-label,
+.transaction__fee-limit-label {
+  font-weight: 500;
+}
+
+.transaction__time {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-top: 0.2rem;
+}
diff --git a/explorer/src/lib/components/transactions-table/TransactionsTable.svelte b/explorer/src/lib/components/transactions-table/TransactionsTable.svelte
new file mode 100644
index 0000000000..154f98b4c6
--- /dev/null
+++ b/explorer/src/lib/components/transactions-table/TransactionsTable.svelte
@@ -0,0 +1,66 @@
+<svelte:options immutable={true} />
+
+<script>
+  import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+  } from "$lib/components/table";
+  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 "./TransactionsTable.css";
+
+  /** @type {Transaction[]}*/
+  export let data;
+
+  const HASH_CHARS_LENGTH = 10;
+
+  const numberFormatter = createValueFormatter("en");
+</script>
+
+<Table>
+  <TableHead>
+    <TableRow>
+      <TableCell type="th">Hash</TableCell>
+      <TableCell type="th">Gas</TableCell>
+      <TableCell type="th">Fee</TableCell>
+      <TableCell type="th">Status</TableCell>
+      <TableCell type="th">Type</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    {#each data as transaction (transaction)}
+      <TableRow>
+        <TableCell>
+          {middleEllipsis(transaction.blockhash, HASH_CHARS_LENGTH)}
+          <small class="transaction__time"
+            >{getRelativeTimeString(transaction.date, "long")}</small
+          >
+        </TableCell>
+        <TableCell>
+          <b class="transaction__fee-price-label">PRICE:</b>
+          {numberFormatter(transaction.gasprice)}<br />
+          <b class="transaction__fee-limit-label">LIMIT:</b>
+          {numberFormatter(transaction.gaslimit)}
+        </TableCell>
+        <TableCell
+          ><Badge
+            variant="alt"
+            text={`${numberFormatter(luxToDusk(transaction.feepaid))} Dusk`}
+          /></TableCell
+        >
+        <TableCell>
+          <Badge
+            variant={transaction.success ? "success" : "error"}
+            text={transaction.success ? "success" : "failed"}
+          />
+        </TableCell>
+        <TableCell><Badge text={transaction.method} /></TableCell>
+      </TableRow>
+    {/each}
+  </TableBody>
+</Table>
diff --git a/explorer/src/lib/containers/index.js b/explorer/src/lib/containers/index.js
index 8cebf2ab1d..0293d57451 100644
--- a/explorer/src/lib/containers/index.js
+++ b/explorer/src/lib/containers/index.js
@@ -1,3 +1,2 @@
-export { default as LatestBlocks } from "./latest-blocks/LatestBlocks.svelte";
 export { default as SearchField } from "./search-field/SearchField.svelte";
 export { default as StatisticsPanel } from "./statistics-panel/StatisticsPanel.svelte";
diff --git a/explorer/src/lib/containers/latest-blocks/LatestBlocks.css b/explorer/src/lib/containers/latest-blocks/LatestBlocks.css
deleted file mode 100644
index 03606cdaeb..0000000000
--- a/explorer/src/lib/containers/latest-blocks/LatestBlocks.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.blocks {
-  padding: 1rem 0;
-}
-
-.blocks-mobile {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-}
-
-.blocks__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 1.125rem 1rem;
-}
-
-.blocks__header-title {
-  font-weight: 400;
-  text-transform: uppercase;
-  font-size: 1.125rem;
-  line-height: 32.2px;
-  letter-spacing: -1%;
-}
-
-.block__fee-avg-label,
-.block__fee-total-label {
-  font-weight: 500;
-}
-
-.block__time {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  margin-top: 0.2rem;
-}
diff --git a/explorer/src/lib/containers/latest-blocks/LatestBlocks.svelte b/explorer/src/lib/containers/latest-blocks/LatestBlocks.svelte
deleted file mode 100644
index 208a6d723a..0000000000
--- a/explorer/src/lib/containers/latest-blocks/LatestBlocks.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script>
-  import { BlocksList, RetryFetch } from "$lib/components";
-  import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableRow,
-  } from "$lib/components/table";
-  import { Badge, Button, Card } from "$lib/dusk/components";
-  import { luxToDusk } from "$lib/dusk/currency";
-  import { getRelativeTimeString, makeClassName } from "$lib/dusk/string";
-  import { createValueFormatter } from "$lib/dusk/value";
-  import { goto } from "$lib/navigation";
-
-  import "./LatestBlocks.css";
-
-  /** @type {string | Undefined} */
-  export let className = undefined;
-
-  /** @type {Block[]}*/
-  export let blocks;
-
-  export let error;
-
-  /** @type {Boolean} */
-  export let loading;
-
-  /** @type {Boolean} */
-  let hasEmptyData;
-
-  /** @type {number} */
-  let clientWidth;
-
-  const numberFormatter = createValueFormatter("en");
-
-  $: {
-    hasEmptyData = Array.isArray(blocks) && blocks.length === 0;
-  }
-
-  $: classes = makeClassName(["blocks", className]);
-</script>
-
-<svelte:window bind:outerWidth={clientWidth} />
-<Card className={classes}>
-  <header slot="header" class="blocks__header">
-    <h1 class="blocks__header-title">Blocks</h1>
-    <Button
-      on:click={() => goto("/blocks")}
-      text={"All Blocks"}
-      variant="secondary"
-    />
-  </header>
-  {#if error}
-    <RetryFetch on:retry/>
-  {:else if blocks}
-    {#if clientWidth > 768}
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell type="th"># Block</TableCell>
-            <TableCell type="th">Fee</TableCell>
-            <TableCell type="th">Txn(s)</TableCell>
-            <TableCell type="th">Rewards</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {#each blocks as block (block)}
-            <TableRow>
-              <TableCell>
-                {numberFormatter(block.header.height)}
-                <small class="block__time"
-                  >{getRelativeTimeString(block.header.date, "long")}</small
-                >
-              </TableCell>
-              <TableCell>
-                <b class="block__fee-avg-label">AVG:</b>
-                {numberFormatter(block.transactions.stats.averageGasPrice)}<br
-                />
-                <b class="block__fee-total-label">TOTAL:</b>
-                {numberFormatter(block.transactions.stats.gasUsed)}
-              </TableCell>
-              <TableCell
-                >{numberFormatter(block.transactions.data.length)}</TableCell
-              >
-              <TableCell
-                ><Badge
-                  variant="alt"
-                  text={`${numberFormatter(luxToDusk(block.header.reward))} Dusk`}
-                /></TableCell
-              >
-            </TableRow>
-          {/each}
-        </TableBody>
-      </Table>
-    {:else}
-      <div class="blocks-mobile">
-        {#each blocks as block (block)}
-          <BlocksList data={block} />
-        {/each}
-      </div>
-    {/if}
-  {/if}
-</Card>
diff --git a/explorer/src/lib/containers/latest-tx/LatestTx.css b/explorer/src/lib/containers/latest-tx/LatestTx.css
deleted file mode 100644
index 4ef58434bf..0000000000
--- a/explorer/src/lib/containers/latest-tx/LatestTx.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.transactions {
-  padding: 1rem 0;
-}
-
-.transactions-mobile {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-}
-
-.transactions__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 1.125rem 1rem;
-}
-
-.transactions__header-title {
-  font-weight: 400;
-  text-transform: uppercase;
-  font-size: 1.125rem;
-  line-height: 32.2px;
-  letter-spacing: -1%;
-}
-
-.transaction__fee-price-label,
-.transaction__fee-limit-label {
-  font-weight: 500;
-}
-
-.transaction__time {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  margin-top: 0.2rem;
-}
diff --git a/explorer/src/lib/containers/latest-tx/LatestTx.svelte b/explorer/src/lib/containers/latest-tx/LatestTx.svelte
deleted file mode 100644
index 82b35c361e..0000000000
--- a/explorer/src/lib/containers/latest-tx/LatestTx.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-  import { TransactionsList, RetryFetch } from "$lib/components";
-  import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableRow,
-  } from "$lib/components/table";
-  import { Badge, Button, Card } from "$lib/dusk/components";
-  import { luxToDusk } from "$lib/dusk/currency";
-  import {
-    getRelativeTimeString,
-    makeClassName,
-    middleEllipsis,
-  } from "$lib/dusk/string";
-  import { createValueFormatter } from "$lib/dusk/value";
-  import { goto } from "$lib/navigation";
-  import "./LatestTx.css";
-
-  /** @type {string | Undefined} */
-  export let className = undefined;
-
-  /** @type {Transaction[]}*/
-  export let txs;
-
-  export let error;
-
-  /** @type {Boolean} */
-  export let loading;
-
-  /** @type {Boolean} */
-  let hasEmptyData;
-
-  /** @type {number} */
-  let clientWidth;
-
-  const HASH_CHARS_LENGTH = 10;
-
-  const numberFormatter = createValueFormatter("en");
-
-  $: {
-    hasEmptyData = Array.isArray(txs) && txs.length === 0;
-  }
-
-  $: classes = makeClassName(["transactions", className]);
-</script>
-
-<svelte:window bind:outerWidth={clientWidth} />
-<Card className={classes}>
-  <div slot="header" class="transactions__header">
-    <h1 class="transactions__header-title">Transactions</h1>
-    <Button
-      on:click={() => goto("/transactions")}
-      text={"All Transactions"}
-      variant="secondary"
-    />
-  </div>
-  {#if error}
-    <RetryFetch on:retry/>
-  {:else if txs}
-    {#if clientWidth > 768}
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell type="th">Hash</TableCell>
-            <TableCell type="th">Gas</TableCell>
-            <TableCell type="th">Fee</TableCell>
-            <TableCell type="th">Status</TableCell>
-            <TableCell type="th">Type</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {#each txs as transaction (transaction)}
-            <TableRow>
-              <TableCell>
-                {middleEllipsis(transaction.blockhash, HASH_CHARS_LENGTH)}
-                <small class="transaction__time"
-                  >{getRelativeTimeString(transaction.date, "long")}</small
-                >
-              </TableCell>
-              <TableCell>
-                <b class="transaction__fee-price-label">PRICE:</b>
-                {numberFormatter(transaction.gasprice)}<br />
-                <b class="transaction__fee-limit-label">LIMIT:</b>
-                {numberFormatter(transaction.gaslimit)}
-              </TableCell>
-              <TableCell
-                ><Badge
-                  variant="alt"
-                  text={`${numberFormatter(luxToDusk(transaction.feepaid))} Dusk`}
-                /></TableCell
-              >
-              <TableCell>
-                <Badge
-                  variant={transaction.success ? "success" : "error"}
-                  text={transaction.success ? "success" : "failed"}
-                />
-              </TableCell>
-              <TableCell><Badge text={transaction.method} /></TableCell>
-            </TableRow>
-          {/each}
-        </TableBody>
-      </Table>
-    {:else}
-      <div class="transactions-mobile">
-        {#each txs as transaction (transaction)}
-          <TransactionsList data={transaction} />
-        {/each}
-      </div>
-    {/if}
-  {/if}
-</Card>
diff --git a/explorer/src/routes/+page.svelte b/explorer/src/routes/+page.svelte
index 7653c93cc7..e7c03ac5ef 100644
--- a/explorer/src/routes/+page.svelte
+++ b/explorer/src/routes/+page.svelte
@@ -1,12 +1,10 @@
 <script>
+  import { BlocksCard, TransactionsCard } from "$lib/components";
   import { StatisticsPanel } from "$lib/containers";
-
   import { duskAPI } from "$lib/services";
   import { appStore } from "$lib/stores";
   import { createPollingDataStore } from "$lib/dusk/svelte-stores";
   import { onNetworkChange } from "$lib/lifecyles";
-  import LatestBlocks from "$lib/containers/latest-blocks/LatestBlocks.svelte";
-  import LatestTx from "$lib/containers/latest-tx/LatestTx.svelte";
 
   const pollingDataStore = createPollingDataStore(
     duskAPI.getLatestChainInfo,
@@ -14,7 +12,6 @@
   );
 
   onNetworkChange(pollingDataStore.start);
-  $: console.log($pollingDataStore)
 </script>
 
 <section class="chain-info">
@@ -22,15 +19,16 @@
 </section>
 
 <section class="tables">
-  <LatestBlocks
-    on:retry="{()=>pollingDataStore.stop()}"
+  <BlocksCard
+    on:retry={() => pollingDataStore.start()}
     className="tables-layout"
     blocks={$pollingDataStore.data?.blocks}
     error={$pollingDataStore.error}
     loading={$pollingDataStore.isLoading}
   />
 
-  <LatestTx
+  <TransactionsCard
+    on:retry={() => pollingDataStore.start()}
     className="tables-layout"
     txs={$pollingDataStore.data?.transactions}
     error={$pollingDataStore.error}
diff --git a/explorer/src/routes/blocks/block/+page.svelte b/explorer/src/routes/blocks/block/+page.svelte
index cdaebacf28..23e6baf784 100644
--- a/explorer/src/routes/blocks/block/+page.svelte
+++ b/explorer/src/routes/blocks/block/+page.svelte
@@ -1,37 +1,23 @@
 <script>
+  import { browser } from "$app/environment";
+  import { page } from "$app/stores";
   import { BlockDetails } from "$lib/components";
+  import { duskAPI } from "$lib/services";
+  import { appStore } from "$lib/stores";
+  import { createDataStore } from "$lib/dusk/svelte-stores";
+  import { onNetworkChange } from "$lib/lifecyles";
 
-  const data = {
-    header: {
-      feespaid: 0,
-      hash: "2f37fec165e3891e6f6beb329f0262cd0538edcb478a3db2154381ecf45150aa",
-      height: 488911,
-      nextblockhash:
-        "b95069bdd0ff5b564f8fd6fafb01c6fa75ea69ef6b0325115c65da171538f214",
-      prevblockhash:
-        "64ea046bf4a86e692d79dd8dccffa2114e2dc2c82e2d6cd737da4aa818629b6d",
-      reward: 16000000000,
-      seed: "8e3b249b5d2915ab190630c2a2e5c5d42d9d2ed8dea5a3702797eae3651e809a4cc9809047fecc602e4aa865fdb2fe33",
-      statehash:
-        "fb4c93bcc64914203b4312cf09e02c230ed3bc013408b124d5679c6cf583efd8",
-      timestamp: "2024-04-16 09:26:17 +0000 UTC",
-      ts: 1,
-      version: "0",
-    },
-    transactions: {
-      data: [],
-      stats: {
-        averageGasPrice: 0,
-        gasLimit: 5000000000,
-        gasUsed: 0,
-      },
-    },
-  };
+  const dataStore = createDataStore(duskAPI.getBlock);
+
+  $: {
+    browser && dataStore.getData($appStore.network, $page.url.searchParams.get("id"))
+  }
+  $:console.log($dataStore)
 </script>
 
 <section class="block">
   <div class="block__details">
-    <BlockDetails {data} />
+    <BlockDetails {$dataStore.data} />
   </div>
   <div class="block__transactions">Block transactions</div>
 </section>