refactor component structure

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;
+}

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>

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>

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";
 

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;
+}

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>

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%;
+}

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>

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";

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>

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;
+}