explorer: add support for transaction's blob hashes

explorer/CHANGELOG.md

@@ -11,10 +11,12 @@ and this project adheres to
 ### Added
 
 - Add Tokens page [#3415]
+- Add support for transactions' blob hashes [#3804]
 
 ### Changed
 
 - Use supply.dusk.network for circulating supply [#3757]
+- The `from` and `to` fields are now always shown in moonlight transactions regardless of the transaction's type [#3804]
 
 ### Removed
 
@@ -261,6 +263,7 @@ and this project adheres to
 [#3720]: https://github.com/dusk-network/rusk/issues/3720
 [#3739]: https://github.com/dusk-network/rusk/issues/3739
 [#3757]: https://github.com/dusk-network/rusk/issues/3757
+[#3804]: https://github.com/dusk-network/rusk/issues/3804
 
 <!-- VERSIONS -->
 

explorer/README.md

@@ -36,6 +36,7 @@ VITE_RUSK_PATH="" # Optional, set to '/rusk' for dev mode
 VITE_STATS_REFETCH_INTERVAL=1000
 VITE_TRANSACTIONS_LIST_ENTRIES=100
 VITE_FEATURE_TOKENS=true
+VITE_FEATURE_BLOB_HASHES=true # requires node version >= 1.3.1-alpha.1
 ```
 
 ## Environment variables and dev mode

explorer/src/lib/chain-info/__tests__/transformBlock.spec.js

@@ -25,35 +25,45 @@ describe("transformBlock", () => {
     transactions: {
       data: [
         {
+          amount: undefined,
+          blobHashes: [],
           blockhash:
             "bd5c99bb720b03500e89f103fe66113ba62f2e124ed9651563f38fd15977719f",
           blockheight: 495868,
           date: new Date(blockData.transactions[0].blockTimestamp * 1000),
           feepaid: 290866,
+          from: undefined,
           gaslimit: 500000000,
           gasprice: 1,
           gasspent: 290866,
           memo: blockData.transactions[0].tx.memo,
           method: "transfer",
+          nonce: undefined,
           payload: {},
           success: true,
+          to: undefined,
           txerror: "",
           txid: "3a3f6f90a1012ae751b4448bcb8e98def0ba2b18170239bd69fcf8e2e37f0602",
           txtype: "Moonlight",
         },
         {
+          amount: undefined,
+          blobHashes: [],
           blockhash:
             "bd5c99bb720b03500e89f103fe66113ba62f2e124ed9651563f38fd15977719f",
           blockheight: 495868,
           date: new Date(blockData.transactions[1].blockTimestamp * 1000),
           feepaid: 289852,
+          from: undefined,
           gaslimit: 500000000,
           gasprice: 1,
           gasspent: 289852,
           memo: blockData.transactions[1].tx.memo,
           method: "transfer",
+          nonce: undefined,
           payload: {},
           success: true,
+          to: undefined,
           txerror: "",
           txid: "07bfabea1d94c16f2dc3697fa642f6cecea6e81bf76b9644efbb6e2723b76d00",
           txtype: "Phoenix",

explorer/src/lib/chain-info/__tests__/transformTransaction.spec.js

@@ -8,6 +8,7 @@ describe("transformTransaction", () => {
   const tx = gqlTransaction.tx;
   const expectedTx = {
     amount: 9812378912731,
+    blobHashes: [],
     blockhash:
       "3c6e4018cfa86723e50644e33d3990bc27fc794f6b49fbf6290e4d308e07bd2d",
     blockheight: 487166,
@@ -83,7 +84,7 @@ describe("transformTransaction", () => {
         callData: {
           contractId:
             "0200000000000000000000000000000000000000000000000000000000000000",
-          fnName: "transfer",
+          fnName: "stake",
         },
         isDeploy: true,
       },
@@ -104,6 +105,32 @@ describe("transformTransaction", () => {
     expect(transformTransaction(dataB)).toStrictEqual(expected);
   });
 
+  it('should set the method to "blob" if the transaction has blob hashes, regardless of the `isDeploy` or the `callData.fnName` fields', () => {
+    const data = {
+      ...tx,
+      tx: {
+        ...tx.tx,
+        blobHashes: [
+          "3656d71948baff2091090423f3b07701223b00d1a10942e44afe644a30865423",
+          "d26d6ebba9bfb0504040eadec111627f9f562c358f40e035ea9011b48ed7b55b",
+        ],
+        callData: {
+          contractId:
+            "0200000000000000000000000000000000000000000000000000000000000000",
+          fnName: "stake",
+        },
+        isDeploy: true,
+      },
+    };
+    const expected = {
+      ...expectedTx,
+      blobHashes: data.tx.blobHashes,
+      method: "blob",
+    };
+
+    expect(transformTransaction(data)).toStrictEqual(expected);
+  });
+
   it("should set the success property to `false` if the an error is present and use the message in the `txerror` property", () => {
     const data = {
       ...tx,

explorer/src/lib/chain-info/chain-info.d.ts

@@ -35,9 +35,10 @@ type SearchResult = {
 };
 
 type Transaction = {
-  amount?: number;
-  from?: string;
-  to?: string;
+  amount: number | undefined;
+  blobHashes: string[];
+  from: string | undefined;
+  to: string | undefined;
   blockhash: string;
   blockheight: number;
   date: Date;
@@ -52,5 +53,5 @@ type Transaction = {
   txid: string;
   txtype: string;
   payload: string;
-  nonce?: number;
+  nonce: number | undefined;
 };

explorer/src/lib/chain-info/transformTransaction.js

@@ -1,45 +1,39 @@
 import { unixTsToDate } from "$lib/dusk/date";
 
+/** @type {(tx: GQLTransaction["tx"]) => string} */
+const getTransactionMethod = (tx) =>
+  tx.blobHashes && tx.blobHashes.length
+    ? "blob"
+    : tx.isDeploy
+      ? "deploy"
+      : (tx.callData?.fnName ?? "transfer");
+
 /** @type {(v: GQLTransaction) => Transaction} */
 const transformTransaction = (tx) => {
   const payloadString = tx.tx.json ?? "{}";
   const payload = JSON.parse(payloadString);
 
-  /** @type {Transaction} */
-  const transaction = {
+  return {
+    amount: payload.value,
+    blobHashes: tx.tx.blobHashes ?? [],
     blockhash: tx.blockHash,
     blockheight: tx.blockHeight,
     date: unixTsToDate(tx.blockTimestamp),
     feepaid: tx.gasSpent * tx.tx.gasPrice,
+    from: payload.sender,
     gaslimit: tx.tx.gasLimit,
     gasprice: tx.tx.gasPrice,
     gasspent: tx.gasSpent,
     memo: tx.tx.memo ?? "",
-    method: tx.tx.isDeploy ? "deploy" : (tx.tx.callData?.fnName ?? "transfer"),
+    method: getTransactionMethod(tx.tx),
+    nonce: payload.nonce,
     payload,
     success: tx.err === null,
+    to: payload.receiver,
     txerror: tx.err ?? "",
     txid: tx.id,
     txtype: tx.tx.txType,
   };
-
-  if (payload.value !== undefined) {
-    transaction.amount = payload.value;
-  }
-
-  if (payload.sender !== undefined) {
-    transaction.from = payload.sender;
-  }
-
-  if (payload.receiver !== undefined) {
-    transaction.to = payload.receiver;
-  }
-
-  if (payload.nonce !== undefined) {
-    transaction.nonce = payload.nonce;
-  }
-
-  return transaction;
 };
 
 export default transformTransaction;

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

@@ -47,4 +47,22 @@ describe("Transaction Details", () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("should be able to render the details when they contain blob hashes", () => {
+    const props = {
+      ...baseProps,
+      data: {
+        ...baseProps.data,
+        blobHashes: [
+          "0261047715f0e937f3ab3d6bdfb1bf1894995f89f64ed19a26a1d59bb2d7b629",
+          "b3d5296139ba0f44912b87a19b47ea7f229131182405d9f082c5fbbeed8c121b",
+          "8f6bce4e1f233d6de022e3ac1ab3a262695991460e9f78eca288fd623083142f",
+        ],
+      },
+    };
+
+    const { container } = render(TransactionDetails, props);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });