explorer: compose Transactions page

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

explorer/src/lib/components/transactions-card/TransactionsCard.css

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

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>

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>