From ba44533ca27f37b086bcf2308ae8563686b57a19 Mon Sep 17 00:00:00 2001
From: Alex <panturu.alexandru@gmail.com>
Date: Mon, 13 May 2024 21:20:57 +0300
Subject: [PATCH] explorer: compose Transactions page

---
 explorer/src/lib/components/index.js          |  1 +
 .../transactions-card/TransactionsCard.css    |  5 ++
 .../transactions-card/TransactionsCard.svelte | 77 +++++++++++++++++++
 explorer/src/routes/transactions/+page.svelte | 27 ++++++-
 .../__tests__/__snapshots__/page.spec.js.snap | 14 ----
 .../transactions/__tests__/page.spec.js       | 11 ---
 6 files changed, 109 insertions(+), 26 deletions(-)
 create mode 100644 explorer/src/lib/components/transactions-card/TransactionsCard.css
 create mode 100644 explorer/src/lib/components/transactions-card/TransactionsCard.svelte
 delete mode 100644 explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
 delete mode 100644 explorer/src/routes/transactions/__tests__/page.spec.js

diff --git a/explorer/src/lib/components/index.js b/explorer/src/lib/components/index.js
index a32ac63af..a231b8b92 100644
--- a/explorer/src/lib/components/index.js
+++ b/explorer/src/lib/components/index.js
@@ -15,6 +15,7 @@ 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 TransactionsCard } from "./transactions-card/TransactionsCard.svelte";
 export { default as TransactionDetails } from "./transaction-details/TransactionDetails.svelte";
 export { default as TransactionsList } from "./transactions-list/TransactionsList.svelte";
 export { default as TransactionsTable } from "./transactions-table/TransactionsTable.svelte";
diff --git a/explorer/src/lib/components/transactions-card/TransactionsCard.css b/explorer/src/lib/components/transactions-card/TransactionsCard.css
new file mode 100644
index 000000000..3d8f9712d
--- /dev/null
+++ b/explorer/src/lib/components/transactions-card/TransactionsCard.css
@@ -0,0 +1,5 @@
+.transactions-card__table,
+.transactions-card__list {
+  max-height: 600px;
+  overflow-y: auto;
+}
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 000000000..22b9a6850
--- /dev/null
+++ b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte
@@ -0,0 +1,77 @@
+<svelte:options immutable={true} />
+
+<script>
+  import {
+    DataCard,
+    TransactionsList,
+    TransactionsTable,
+  } from "$lib/components";
+
+  import "./TransactionsCard.css";
+
+  /** @type {Transaction[] | null}*/
+  export let txs;
+
+  /** @type {Error | null}*/
+  export let error;
+
+  /** @type {Boolean} */
+  export let loading;
+
+  const ITEMS_TO_DISPLAY = 15;
+
+  let itemsToDisplay = ITEMS_TO_DISPLAY;
+
+  /** @type {number} */
+  let clientWidth;
+
+  /** @type {Transaction[]}*/
+  let displayedBlocks;
+
+  /** @type {Boolean}*/
+  let disabledLoading = false;
+
+  const loadMoreItems = () => {
+    if (txs && itemsToDisplay < txs.length) {
+      itemsToDisplay += ITEMS_TO_DISPLAY;
+    }
+  };
+
+  $: displayedBlocks = txs ? txs.slice(0, itemsToDisplay) : [];
+  $: {
+    if (txs && itemsToDisplay >= txs.length) {
+      disabledLoading = true;
+    } else if (loading && txs === null) {
+      disabledLoading = true;
+    } else {
+      disabledLoading = false;
+    }
+  }
+</script>
+
+<svelte:window bind:outerWidth={clientWidth} />
+<DataCard
+  on:retry
+  data={txs}
+  {error}
+  {loading}
+  title="Transactions"
+  headerButtonDetails={{
+    action: () => loadMoreItems(),
+    disabled: disabledLoading,
+    label: "Show More",
+  }}
+>
+  {#if clientWidth > 768}
+    <TransactionsTable
+      data={displayedBlocks}
+      className="transactions-card__table"
+    />
+  {:else}
+    <div class="transactions-card__list">
+      {#each displayedBlocks as tx (tx.txid)}
+        <TransactionsList data={tx} />
+      {/each}
+    </div>
+  {/if}
+</DataCard>
diff --git a/explorer/src/routes/transactions/+page.svelte b/explorer/src/routes/transactions/+page.svelte
index 16870c725..c13d953e0 100644
--- a/explorer/src/routes/transactions/+page.svelte
+++ b/explorer/src/routes/transactions/+page.svelte
@@ -1,3 +1,28 @@
+<script>
+  import { TransactionsCard } from "$lib/components";
+  import { duskAPI } from "$lib/services";
+  import { appStore } from "$lib/stores";
+  import { createPollingDataStore } from "$lib/dusk/svelte-stores";
+  import { onNetworkChange } from "$lib/lifecyles";
+
+  const pollingDataStore = createPollingDataStore(
+    duskAPI.getTransactions,
+    $appStore.fetchInterval
+  );
+
+  onNetworkChange((network) => {
+    pollingDataStore.stop();
+    pollingDataStore.start(network);
+  });
+
+  $: ({ data, error, isLoading } = $pollingDataStore);
+</script>
+
 <section class="transactions">
-  <div>All Transactions</div>
+  <TransactionsCard
+    on:retry={pollingDataStore.start}
+    txs={data}
+    {error}
+    loading={isLoading}
+  />
 </section>
diff --git a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
deleted file mode 100644
index dbf68fff7..000000000
--- a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Transactions > should render the Transactions page 1`] = `
-<div>
-  <section
-    class="transactions"
-  >
-    <div>
-      All Transactions
-    </div>
-  </section>
-  <!--&lt;+page&gt;-->
-</div>
-`;
diff --git a/explorer/src/routes/transactions/__tests__/page.spec.js b/explorer/src/routes/transactions/__tests__/page.spec.js
deleted file mode 100644
index 953c16ef4..000000000
--- a/explorer/src/routes/transactions/__tests__/page.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { render } from "@testing-library/svelte";
-import Transactions from "../+page.svelte";
-
-describe("Transactions", () => {
-  it("should render the Transactions page", () => {
-    const { container } = render(Transactions, {});
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});