explorer: Show the error message for failed transactions

explorer/CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Show the error message for failed transactions [#2220]
+
 ### Changed
 
 ### Fixed
@@ -55,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2059]: https://github.com/dusk-network/rusk/issues/2059
 [#2061]: https://github.com/dusk-network/rusk/issues/2061
 [#2159]: https://github.com/dusk-network/rusk/issues/2159
+[#2220]: https://github.com/dusk-network/rusk/issues/2220
 
 <!-- VERSIONS -->
 

explorer/src/lib/components/__tests__/TransactionStatus.spec.js

@@ -0,0 +1,67 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+
+import { TransactionStatus } from "..";
+
+describe("TransactionStatus", () => {
+  const baseProps = {
+    errorMessage: "",
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  it("should render the transaction status", () => {
+    const { container } = render(TransactionStatus, baseOptions);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should pass additional class names to the rendered `Badge` component", () => {
+    const props = {
+      ...baseProps,
+      className: "foo bar",
+    };
+
+    const { container } = render(TransactionStatus, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should render the status as error if it receives an error message", () => {
+    const props = {
+      ...baseProps,
+      errorMessage: "Transaction failed",
+    };
+
+    const { container } = render(TransactionStatus, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should add tooltip info if it receives an error message and the related property is set", () => {
+    const props = {
+      ...baseProps,
+      errorMessage: "Transaction failed",
+      showErrorTooltip: true,
+    };
+
+    const { container } = render(TransactionStatus, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("shouldn't add tooltip info if there's no error message, even if the related property is set to `true`", () => {
+    const props = {
+      ...baseProps,
+      showErrorTooltip: true,
+    };
+
+    const { container } = render(TransactionStatus, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap

@@ -104,7 +104,7 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
         class="details-list__definition"
       >
         <span
-          class="dusk-badge dusk-badge--variant-success transaction-details__status explorer-badge"
+          class="dusk-badge dusk-badge--variant-success transaction-status transaction-details__status explorer-badge"
         >
           success
         </span>
@@ -430,7 +430,7 @@ exports[`Transaction Details > renders the Transaction Details component with th
         class="details-list__definition"
       >
         <span
-          class="dusk-badge dusk-badge--variant-success transaction-details__status explorer-badge"
+          class="dusk-badge dusk-badge--variant-success transaction-status transaction-details__status explorer-badge"
         >
           success
         </span>

explorer/src/lib/components/__tests__/__snapshots__/TransactionStatus.spec.js.snap

@@ -0,0 +1,44 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TransactionStatus > should add tooltip info if it receives an error message and the related property is set 1`] = `
+<span
+  class="dusk-badge dusk-badge--variant-error transaction-status"
+  data-tooltip-id="main-tooltip"
+  data-tooltip-text="Transaction failed"
+  data-tooltip-type="error"
+>
+  failed
+</span>
+`;
+
+exports[`TransactionStatus > should pass additional class names to the rendered \`Badge\` component 1`] = `
+<span
+  class="dusk-badge dusk-badge--variant-success transaction-status foo bar"
+>
+  success
+</span>
+`;
+
+exports[`TransactionStatus > should render the status as error if it receives an error message 1`] = `
+<span
+  class="dusk-badge dusk-badge--variant-error transaction-status"
+>
+  failed
+</span>
+`;
+
+exports[`TransactionStatus > should render the transaction status 1`] = `
+<span
+  class="dusk-badge dusk-badge--variant-success transaction-status"
+>
+  success
+</span>
+`;
+
+exports[`TransactionStatus > shouldn't add tooltip info if there's no error message, even if the related property is set to \`true\` 1`] = `
+<span
+  class="dusk-badge dusk-badge--variant-success transaction-status"
+>
+  success
+</span>
+`;

explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap

@@ -179,7 +179,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-success transaction-status"
               >
                 success
               </span>
@@ -254,9 +254,9 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-error transaction-status"
               >
-                success
+                failed
               </span>
             </td>
 
@@ -329,7 +329,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-success transaction-status"
               >
                 success
               </span>
@@ -404,7 +404,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-success transaction-status"
               >
                 success
               </span>
@@ -479,7 +479,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-success transaction-status"
               >
                 success
               </span>
@@ -554,7 +554,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-success transaction-status"
               >
                 success
               </span>
@@ -629,7 +629,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-success transaction-status"
               >
                 success
               </span>
@@ -704,7 +704,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-success transaction-status"
               >
                 success
               </span>
@@ -779,7 +779,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-success transaction-status"
               >
                 success
               </span>
@@ -854,7 +854,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
               class="table__data-cell"
             >
               <span
-                class="dusk-badge dusk-badge--variant-success"
+                class="dusk-badge dusk-badge--variant-success transaction-status"
               >
                 success
               </span>

explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap

@@ -67,11 +67,10 @@ exports[`Transactions List > should render the \`TransactionsList\` component in
     class="details-list__definition details-list__definition--table"
   >
     <span
-      class="dusk-badge dusk-badge--variant-success explorer-badge"
+      class="dusk-badge dusk-badge--variant-success transaction-status explorer-badge"
     >
       success
     </span>
-
   </dd>
 
   <dt
@@ -186,11 +185,10 @@ exports[`Transactions List > should render the \`TransactionsList\` component in
     class="details-list__definition details-list__definition--table"
   >
     <span
-      class="dusk-badge dusk-badge--variant-success explorer-badge"
+      class="dusk-badge dusk-badge--variant-success transaction-status explorer-badge"
     >
       success
     </span>
-
   </dd>
 
   <dt