explorer: Show the generator and a call's method, and release v1.7.3

CHANGELOG.md

@@ -16,6 +16,17 @@ and this project adheres to
 
 ### Fixed
 
+## [1.7.3] - 2026-11-03
+
+### Changed
+
+- Show who generated each block on the home page, and a contract call's method in transaction rows and on the transaction page
+- Show a chevron on technical details
+
+### Fixed
+
+- Keep a long hash inside its tooltip
+
 ## [1.7.2] - 2026-11-03
 
 ### Changed
@@ -428,6 +439,7 @@ dusk-network/rusk#3985: https://github.com/dusk-network/rusk/issues/3985
 <!-- VERSIONS -->
 
 [Unreleased]: https://github.com/dusk-network/explorer/tree/main
+[1.7.3]: https://github.com/dusk-network/explorer/tree/explorer-v1.7.3
 [1.7.2]: https://github.com/dusk-network/explorer/tree/explorer-v1.7.2
 [1.7.1]: https://github.com/dusk-network/explorer/tree/explorer-v1.7.1
 [1.7.0]: https://github.com/dusk-network/explorer/tree/explorer-v1.7.0

package.json

@@ -37,7 +37,7 @@
     "typecheck:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch --fail-on-warnings"
   },
   "type": "module",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "overrides": {
     "cookie": "0.7.2"
   },

src/lib/components/__tests__/BlocksList.spec.js

@@ -75,8 +75,12 @@ describe("Blocks List", () => {
 
     await rerender({ brief: true, data: block });
 
-    expect(line()).toBe(getRelativeTimeString(block.header.date, "long"));
+    // The home page's short row says who made it too, and no fees.
+    expect(line()).toContain(getRelativeTimeString(block.header.date, "long"));
     expect(end()).toBe("16 DUSK 2 transactions");
-    expect(container.querySelector(".transaction-party")).toBeNull();
+    expect(container.querySelector(".transaction-party")).toHaveAttribute(
+      "href",
+      `/some-base-path/accounts/?key=${key}`
+    );
   });
 });

src/lib/components/__tests__/BlocksTable.spec.js

@@ -70,12 +70,16 @@ describe("Blocks Table", () => {
 
     await rerender({ ...baseProps, brief: true });
 
+    // The home page's short list says who made each block too.
     expect(getHeaders(container)).toStrictEqual([
       "Block",
+      "Generated by",
       "Transactions",
       "Reward",
     ]);
-    expect(container.querySelector("a[href*='/accounts/']")).toBeNull();
+    expect(container.querySelectorAll("a[href*='/accounts/']")).toHaveLength(
+      data.length
+    );
   });
 
   it("should say how full a block with transactions was and the fees it took, and nothing more for an empty one", () => {

src/lib/components/__tests__/TransactionDetails.spec.js

@@ -202,6 +202,33 @@ describe("Transaction Details", () => {
     ]);
   });
 
+  it("should show a call's method among the main rows, not folded away", () => {
+    const { container } = render(TransactionDetails, {
+      ...baseProps,
+      data: {
+        ...baseProps.data,
+        contract:
+          "590429da249cbb6f0a680e1d5f6ecdc885912fc836589c38bb8fd5e6ea4f722c",
+        method: "schedule",
+      },
+    });
+    const terms = getTerms(container);
+
+    expect(terms[terms.indexOf("type") + 1]).toBe("method");
+    expect(getDefinition(container, "method")).toBe("schedule");
+    expect(
+      Array.from(
+        /** @type {HTMLElement} */ (
+          container.querySelector("details")
+        ).querySelectorAll("dt"),
+        termOf
+      )
+    ).not.toContain("method");
+    expect(
+      container.querySelector("summary .detail-technical__chevron")
+    ).toBeInTheDocument();
+  });
+
   it("should lead with one sentence: who sent how much to whom, the status, and the time in the viewer's zone", async () => {
     vi.mocked(getPrimaryName).mockImplementation(async (address) =>
       address === baseProps.data.from
@@ -634,13 +661,10 @@ describe("Transaction Details", () => {
       expect(getDefinition(container, "contract")).toBe(
         `Stake contract ${stake}`
       );
-      // Plain words for the type; the method is a technical detail.
+      // Plain words for the type; the method has its own row.
       expect(getDefinition(container, "type")).toBe("Claim rewards");
     });
     expect(getTerms(container)).not.toContain("to");
-    expect(
-      container.querySelector(".transaction-details__technical dl dt")
-    ).toHaveTextContent("Method");
     expect(getDefinition(container, "method")).toBe("withdraw");
   });
 

src/lib/components/__tests__/TransactionType.spec.js

@@ -37,6 +37,47 @@ describe("TransactionType", () => {
     );
   });
 
+  it("should show the function a call ran, unless its words already say it", async () => {
+    const contract =
+      "590429da249cbb6f0a680e1d5f6ecdc885912fc836589c38bb8fd5e6ea4f722c";
+    const stake =
+      "0200000000000000000000000000000000000000000000000000000000000000";
+    const words = async (/** @type {Partial<Transaction>} */ call) => {
+      cleanup();
+
+      const { container } = render(TransactionType, {
+        props: { data: { ...transaction, ...call }, showPrivacy: false },
+      });
+
+      await vi.waitFor(() =>
+        expect(
+          container.querySelector(".transaction-type__label")
+        ).toBeInTheDocument()
+      );
+
+      return [
+        container.querySelector(".transaction-type__label")?.textContent,
+        container.querySelector(".transaction-type__method")?.textContent,
+      ];
+    };
+
+    expect(await words({ contract, method: "schedule" })).toStrictEqual([
+      "Contract call",
+      "schedule",
+    ]);
+    expect(await words({ contract: stake, method: "stake" })).toStrictEqual([
+      "Stake",
+      undefined,
+    ]);
+    expect(await words({ contract: stake, method: "withdraw" })).toStrictEqual([
+      "Claim rewards",
+      "withdraw",
+    ]);
+    expect(
+      await words({ contract: undefined, method: "transfer" })
+    ).toStrictEqual(["Transfer", undefined]);
+  });
+
   it("should say what a shielded call hides, and what it shows", () => {
     const shielded = { ...transaction, txtype: "Phoenix" };
     const stake =

src/lib/components/__tests__/TransactionsList.spec.js

@@ -101,16 +101,16 @@ describe("Transactions List", () => {
       data: { ...call, amount: 1_000_000_000, to: transaction.to },
     }).container;
 
-    // Plain words only: the function's name is for the transaction page.
+    // Plain words, and the function it ran.
     await vi.waitFor(() => {
       expect(
         toContract.querySelector(".transaction-row__line")
-      ).toHaveTextContent(/^Contract call$/);
+      ).toHaveTextContent(/^Contract call · \S+$/);
       expect(
         toAccount.querySelector(".transaction-row__line")
-      ).toHaveTextContent(/^Transfer contract$/);
+      ).toHaveTextContent(/^Transfer contract · \S+$/);
     });
-    expect(toContract.querySelector("code")).toBeNull();
+    expect(toContract.querySelector("code")).toHaveTextContent(/^convert$/);
     expect(
       toAccount.querySelector(".transaction-row__parties")
     ).toHaveTextContent(`To ${shortAddress(String(transaction.to))}`);
@@ -137,7 +137,7 @@ describe("Transactions List", () => {
     await vi.waitFor(() =>
       expect(
         lines.map((line) => line?.textContent?.replace(/\s+/g, " ").trim())
-      ).toStrictEqual(["Stake", "Unstake", "Claim rewards"])
+      ).toStrictEqual(["Stake", "Unstake", "Claim rewards · withdraw"])
     );
   });
 
@@ -197,7 +197,7 @@ describe("Transactions List", () => {
         rows[1]
           .closest(".transaction-row")
           ?.querySelector(".transaction-row__line")
-      ).toHaveTextContent(/^Contract call$/)
+      ).toHaveTextContent(/^Contract call · \S+$/)
     );
 
     // On testnet, whose file labels both.

src/lib/components/__tests__/TransactionsTable.spec.js

@@ -150,7 +150,7 @@ describe("Transactions Table", () => {
         );
         // A failure says so first, and what failed sent nothing: its amount is muted.
         expect(textOf(rows[1], ".transaction__line")).toBe(
-          "Failed · Claim rewards"
+          "Failed · Claim rewards · withdraw"
         );
       });
       expect(getCells(/** @type {HTMLElement} */ (rows[1]))[4]).toBe("0 DUSK");
@@ -189,12 +189,14 @@ describe("Transactions Table", () => {
           / To Transfer contract$/
         );
         // Plain words only: the function's name is for the transaction page.
-        expect(textOf(toContract, ".transaction__line")).toBe("Contract call");
+        expect(textOf(toContract, ".transaction__line")).toBe(
+          "Contract call · convert"
+        );
         expect(readOut(toAccount, ".transaction__parties")).toMatch(
           ` To ${transfer.to?.slice(0, 6)}…${transfer.to?.slice(-6)}`
         );
         expect(textOf(toAccount, ".transaction__line")).toBe(
-          "Transfer contract"
+          "Transfer contract · convert"
         );
       });
     });
@@ -338,7 +340,7 @@ describe("Transactions Table", () => {
       expect(textOf(rows[0], ".transaction__line")).not.toContain("Failed");
       await vi.waitFor(() =>
         expect(textOf(rows[1], ".transaction__line")).toBe(
-          "Failed · Claim rewards"
+          "Failed · Claim rewards · withdraw"
         )
       );
       expect(

src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap

@@ -388,6 +388,18 @@ exports[`Block Details > renders the Block Details component 1`] = `
         class="block-details__technical-summary detail-technical__summary"
       >
         Technical details
+        <!---->
+        <svg
+          class="dusk-icon dusk-icon--size--default detail-technical__chevron"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          />
+        </svg>
+
+        <!---->
       </summary>
 
       <dl
@@ -904,6 +916,18 @@ exports[`Block Details > should render the Block Details component with the payl
         class="block-details__technical-summary detail-technical__summary"
       >
         Technical details
+        <!---->
+        <svg
+          class="dusk-icon dusk-icon--size--default detail-technical__chevron"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          />
+        </svg>
+
+        <!---->
       </summary>
 
       <dl