explorer: Look-up transaction in mempool

Resolves #2877

explorer/CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add decode feature for `memo` field [#2527]
 - Add top node info in StatisticsPanel [#2613]
 - Add Provisioners page [#2649]
+- Check if transaction exists in mempool [#2877]
 
 ### Changed
 
@@ -96,6 +97,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2662]: https://github.com/dusk-network/rusk/issues/2662
 [#3038]: https://github.com/dusk-network/rusk/issues/3038
 [#3064]: https://github.com/dusk-network/rusk/issues/3064
+[#2877]: https://github.com/dusk-network/rusk/issues/2877
 
 <!-- VERSIONS -->
 

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

@@ -26,7 +26,6 @@
   export let className = undefined;
 
   $: classes = makeClassName(["data-card", className]);
-
   $: hasEmptyData = Array.isArray(data) && data.length === 0;
 </script>
 

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

@@ -57,8 +57,6 @@
   /** @type {boolean} */
   let isMemoDecoded = false;
 
-  $: classes = makeClassName(["transaction-details", className]);
-
   onMount(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
@@ -70,6 +68,8 @@
 
     return () => resizeObserver.disconnect();
   });
+
+  $: classes = makeClassName(["transaction-details", className]);
 </script>
 
 <DataCard

explorer/src/lib/dusk/components/banner/Banner.css

@@ -0,0 +1,46 @@
+.dusk-banner {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 1em 1.25em;
+  border-radius: 12px;
+  font-size: 0.875em;
+  border-style: solid;
+  border-width: 1px;
+  line-height: 1.5;
+}
+
+.dusk-banner .dusk-banner--info {
+  border-color: var(--banner-info-color);
+}
+
+.dusk-banner .dusk-banner--warning {
+  border-color: var(--banner-warning-color);
+}
+
+.dusk-banner .dusk-banner--error {
+  border-color: var(--banner-error-color);
+}
+
+.dusk-banner .dusk-banner__title {
+  font-weight: 500;
+  font-size: 1.1em;
+  display: block;
+}
+
+.dusk-banner .dusk-banner__icon {
+  margin-right: var(--default-gap);
+  flex-shrink: 0;
+}
+
+.dusk-banner .dusk-banner__icon--info {
+  fill: var(--banner-info-color);
+}
+
+.dusk-banner .dusk-banner__icon--warning {
+  fill: var(--banner-warning-color);
+}
+
+.dusk-banner .dusk-banner__icon--error {
+  fill: var(--banner-error-color);
+}

explorer/src/lib/dusk/components/banner/Banner.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { makeClassName } from "$lib/dusk/string";
+  import { Icon } from "$lib/dusk/components";
+  import {
+    mdiAlertCircleOutline,
+    mdiAlertDecagramOutline,
+    mdiAlertOutline,
+  } from "@mdi/js";
+
+  import "./Banner.css";
+
+  /** @type {string} */
+  export let title;
+
+  /** @type {String | Undefined} */
+  export let className = undefined;
+
+  /** @type {BannerVariant} */
+  export let variant = "info";
+
+  function getBannerIconPath() {
+    switch (variant) {
+      case "warning":
+        return mdiAlertOutline;
+      case "error":
+        return mdiAlertDecagramOutline;
+      default:
+        return mdiAlertCircleOutline;
+    }
+  }
+
+  $: classes = makeClassName([
+    "dusk-banner",
+    `dusk-banner--${variant}`,
+    className,
+  ]);
+</script>
+
+<div {...$$restProps} class={classes}>
+  <Icon
+    path={getBannerIconPath()}
+    size="large"
+    className="dusk-banner__icon dusk-banner__icon--{variant}"
+  />
+  <div>
+    <strong class="dusk-banner__title">{title}</strong>
+    <slot>
+      <p>No banner content provided.</p>
+    </slot>
+  </div>
+</div>

explorer/src/lib/dusk/components/dusk.components.d.ts

@@ -1,5 +1,7 @@
 type BadgeVariant = "neutral" | "success" | "warning" | "error" | "alt";
 
+type BannerVariant = "info" | "warning" | "error";
+
 type ButtonSize = "normal" | "small";
 
 type ButtonVariant = "primary" | "secondary" | "tertiary";

explorer/src/lib/dusk/components/index.js

@@ -1,5 +1,6 @@
 export { default as Anchor } from "./anchor/Anchor.svelte";
 export { default as AnchorButton } from "./anchor-button/AnchorButton.svelte";
+export { default as Banner } from "./banner/Banner.svelte";
 export { default as Badge } from "./badge/Badge.svelte";
 export { default as Button } from "./button/Button.svelte";
 export { default as Card } from "./card/Card.svelte";

explorer/src/lib/mock-data/gql-chain-info.d.ts

@@ -48,7 +48,6 @@ type GQLTransaction = {
     gasLimit: number;
     gasPrice: number;
     id: string;
-    isDeploy: boolean;
     memo: string;
     txType: string;
   };

explorer/src/lib/services/duskAPI.js

@@ -230,12 +230,26 @@ const duskAPI = {
 
   /**
    * @param {string} id
-   * @returns {Promise<Transaction>}
+   * @returns {Promise<Transaction | String>}
    */
   getTransaction(id) {
     return gqlGet(gqlQueries.getTransactionQueryInfo(id))
       .then(getKey("tx"))
-      .then(transformTransaction);
+      .then((tx) => {
+        if (tx === null) {
+          return gqlGet(gqlQueries.getMempoolTx(id))
+            .then(getKey("mempoolTx"))
+            .then((mempoolTx) => {
+              if (mempoolTx) {
+                return "This transaction is currently in the mempool and has not yet been confirmed. The transaction details will be displayed after confirmation.";
+              } else {
+                throw new Error("Transaction not found");
+              }
+            });
+        } else {
+          return transformTransaction(tx);
+        }
+      });
   },
 
   /**

explorer/src/lib/services/gql-queries.js

@@ -16,7 +16,7 @@ fragment TransactionInfo on SpentTransaction {
     gasPrice,
     id,
     isDeploy,
-    memo
+    memo,
     txType
   }
 }
@@ -86,6 +86,12 @@ export const getLatestChainQueryInfo = (amount) => ({
   variables: { amount },
 });
 
+/** @param {string} id */
+export const getMempoolTx = (id) => ({
+  query: "query($id: String!) { mempoolTx(hash: $id) { json } }",
+  variables: { id },
+});
+
 /** @param {string} id */
 export const getTransactionQueryInfo = (id) => ({
   query: `
@@ -106,7 +112,7 @@ export const getTransactionsQueryInfo = (amount) => ({
 
 /** @param {string} id */
 export const getTransactionDetailsQueryInfo = (id) => ({
-  query: "query($id: String!) { tx(hash: $id) { tx {json} } }",
+  query: "query($id: String!) { tx(hash: $id) { tx { json } } }",
   variables: { id },
 });
 

explorer/src/routes/transactions/transaction/+page.svelte

@@ -2,16 +2,17 @@
   import { onMount } from "svelte";
   import { navigating, page } from "$app/stores";
   import { TransactionDetails } from "$lib/components/";
+  import { Banner } from "$lib/dusk/components/";
   import { duskAPI } from "$lib/services";
   import { marketDataStore } from "$lib/stores";
   import { createDataStore } from "$lib/dusk/svelte-stores";
 
+  const id = $page.url.searchParams.get("id");
   const dataStore = createDataStore(duskAPI.getTransaction);
   const payloadStore = createDataStore(duskAPI.getTransactionDetails);
-
   const getTransaction = () => {
-    dataStore.getData($page.url.searchParams.get("id"));
-    payloadStore.getData($page.url.searchParams.get("id"));
+    dataStore.getData(id);
+    payloadStore.getData(id);
   };
 
   onMount(getTransaction);
@@ -28,12 +29,18 @@
 </script>
 
 <section class="transaction">
-  <TransactionDetails
-    on:retry={getTransaction}
-    {data}
-    {error}
-    loading={isLoading}
-    payload={payloadData}
-    market={marketData}
-  />
+  {#if typeof data === "string"}
+    <Banner title="This transaction is being processed" variant="info">
+      {data}
+    </Banner>
+  {:else}
+    <TransactionDetails
+      on:retry={getTransaction}
+      {data}
+      {error}
+      loading={isLoading}
+      payload={payloadData}
+      market={marketData}
+    />
+  {/if}
 </section>

explorer/src/style/dusk/colors.css

@@ -27,4 +27,13 @@
   --warning: #ffcf23;
   --error: #ed254e;
   --info: #71b1ff;
+
+  --success-500: #16db93;
+  --success-700: #0f9363;
+  --warning-500: #ffcf23;
+  --warning-700: #d1a300;
+  --error-500: #ed254e;
+  --error-700: #8e112c;
+  --info-500: #71b1ff;
+  --info-700: #0863d1;
 }

explorer/src/style/dusk/language.css

@@ -10,10 +10,14 @@
   --secondary-color-variant-light: var(--cornflower-light);
   --surface-color: var(--magnolia);
   --danger-color: var(--error);
-  --error-color: var(--error);
-  --info-color: var(--info);
-  --success-color: var(--success);
-  --warning-color: var(--warning);
+  --error-color: var(--error-500);
+  --error-color-variant-dark: var(--error-700);
+  --info-color: var(--info-500);
+  --info-color-variant-dark: var(--info-700);
+  --success-color: var(--success-500);
+  --success-color-variant-dark: var(--success-700);
+  --warning-color: var(--warning-500);
+  --warning-color-variant-dark: var(--warning-700);
 
   --on-background-color: var(--smokey-black);
   --on-primary-color: var(--light-grey);
@@ -100,6 +104,12 @@
   /* Dividers */
 
   --divider-color-primary: var(--taupe-grey);
+
+  /* Banner */
+
+  --banner-info-color: var(--info-color-variant-dark);
+  --banner-warning-color: var(--warning-color-variant-dark);
+  --banner-error-color: var(--error-color-variant-dark);
 }
 
 :root.dark {
@@ -134,4 +144,10 @@
 
   --checkbox-control-border-color: var(--light-grey);
   --checkbox-control-checked-bg-color: var(--light-grey);
+
+  /* Banner */
+
+  --banner-info-color: var(--info-color);
+  --banner-warning-color: var(--warning-color);
+  --banner-error-color: var(--error-color);
 }