hotfix: bugs in contract-class view (UI)

Author: FilipHarald

services/event-cannon/src/cannon/scenarios/deploy-and-interact-token-contract.ts

@@ -1,13 +1,18 @@
-import { Contract, DeploySentTx, waitForPXE } from "@aztec/aztec.js";
+import {
+  AztecAddress,
+  Contract,
+  DeploySentTx,
+  waitForPXE,
+} from "@aztec/aztec.js";
+import { TokenContract } from "@aztec/noir-contracts.js/Token";
+import * as tokenContractArtifactJson from "@aztec/noir-contracts.js/artifacts/token_contract-Token" assert { type: "json" };
 import { logger } from "../../logger.js";
 import { getAztecNodeClient, getPxe, getWallets } from "../pxe.js";
 import {
   deployContract,
   logAndWaitForTx,
-  registerContractClassArtifact,
+  verifyContractInstanceDeployment,
 } from "./utils/index.js";
-import { TokenContract } from "@aztec/noir-contracts.js/Token";
-import * as tokenContractArtifactJson from "@aztec/noir-contracts.js/artifacts/token_contract-Token" assert { type: "json" };
 
 export async function run() {
   logger.info("===== TOKEN CONTRACT =====");
@@ -19,47 +24,68 @@ export async function run() {
   const tokenAdmin = namedWallets.alice.getAddress();
 
   const contractLoggingName = "Token Contract";
+  const constructorArgs: [AztecAddress, string, string, number] = [
+    tokenAdmin,
+    "lol",
+    "LOL",
+    9,
+  ];
   const tokenContract = await deployContract({
     contractLoggingName,
     deployFn: (): DeploySentTx<TokenContract> => {
       return TokenContract.deploy(
         deployerWallet,
-        tokenAdmin,
-        "lol",
-        "LOL",
-        9
+        constructorArgs[0],
+        constructorArgs[1],
+        constructorArgs[2],
+        constructorArgs[3],
       ).send();
     },
     node: getAztecNodeClient(),
   });
 
-  registerContractClassArtifact(
+  verifyContractInstanceDeployment({
     contractLoggingName,
-    tokenContractArtifactJson,
-    tokenContract.instance.contractClassId.toString(),
-    tokenContract.instance.version
-  ).catch((err) => {
-    logger.error(err);
+    contractInstanceAddress: tokenContract.address.toString(),
+    verifyArgs: {
+      artifactObj: tokenContractArtifactJson,
+      publicKeysString: tokenContract.instance.publicKeys.toString(),
+      deployer: tokenContract.instance.deployer.toString(),
+      salt: tokenContract.instance.salt.toString(),
+      constructorArgs: constructorArgs.map((arg) => arg.toString()),
+    },
+    deployerMetadata: {
+      contractIdentifier: contractLoggingName,
+      details: "Token contract",
+      creatorName: "Event Cannon",
+      creatorContact:
+        "email: [email protected], discord: test#1234, telegram: @test",
+      appUrl: "https://aztec.network",
+      repoUrl: "https://github.com/AztecProtocol/aztec-packages",
+      reviewedAt: new Date(),
+    },
+  }).catch((err) => {
+    logger.error(`Failed to verify contract instance deployment: ${err}`);
   });
 
   await Promise.all([
     logAndWaitForTx(
       tokenContract.methods
         .mint_to_public(namedWallets.alice.getAddress(), 1000)
         .send(),
-      "Mint to Alice"
+      "Mint to Alice",
     ),
     logAndWaitForTx(
       tokenContract.methods
         .mint_to_public(namedWallets.bob.getAddress(), 1000)
         .send(),
-      "Mint to Bob"
+      "Mint to Bob",
     ),
     logAndWaitForTx(
       tokenContract.methods
         .mint_to_public(namedWallets.charlie.getAddress(), 1000)
         .send(),
-      "Mint to Charlie"
+      "Mint to Charlie",
     ),
   ]);
   const [balanceAlice, balanceBob, balanceCharlie] = await Promise.all([
@@ -83,19 +109,19 @@ export async function run() {
   const aliceContract = (await Contract.at(
     tokenContract.address,
     TokenContract.artifact,
-    namedWallets.alice
+    namedWallets.alice,
   )) as TokenContract;
 
   const bobsTokenContract = (await Contract.at(
     tokenContract.address,
     TokenContract.artifact,
-    namedWallets.bob
+    namedWallets.bob,
   )) as TokenContract;
 
   const charliesTokenContract = (await Contract.at(
     tokenContract.address,
     TokenContract.artifact,
-    namedWallets.charlie
+    namedWallets.charlie,
   )) as TokenContract;
 
   let bobNonce = 0;
@@ -105,10 +131,10 @@ export async function run() {
         namedWallets.bob.getAddress(),
         namedWallets.alice.getAddress(),
         100,
-        bobNonce
+        bobNonce,
       )
       .send(),
-    "Public transfer from Alice to Bob"
+    "Public transfer from Alice to Bob",
   );
   bobNonce++;
 
@@ -130,7 +156,7 @@ export async function run() {
     charliesTokenContract.methods
       .transfer_to_private(namedWallets.alice.getAddress(), 100)
       .send(),
-    "Public to private transfer from Charlie to Alice"
+    "Public to private transfer from Charlie to Alice",
   );
 
   let aliceNonce = 0;
@@ -140,10 +166,10 @@ export async function run() {
         namedWallets.alice.getAddress(),
         namedWallets.bob.getAddress(),
         100,
-        aliceNonce
+        aliceNonce,
       )
       .send(),
-    "Private transfer from Bob to Alice"
+    "Private transfer from Bob to Alice",
   );
   aliceNonce++;
 

services/event-cannon/src/cannon/scenarios/deploy-and-interact-vote-contract.ts

@@ -9,7 +9,6 @@ import { getAztecNodeClient, getPxe, getWallets } from "../pxe.js";
 import {
   deployContract,
   logAndWaitForTx,
-  registerContractClassArtifact,
   verifyContractInstanceDeployment,
 } from "./utils/index.js";
 
@@ -25,23 +24,18 @@ export async function run() {
   const votingAdmin = namedWallets.alice.getAddress();
 
   const contractLoggingName = contractId;
+  const constructorArgs = [votingAdmin];
+
   const contract = await deployContract({
     contractLoggingName,
     deployFn: (): DeploySentTx<EasyPrivateVotingContract> =>
-      EasyPrivateVotingContract.deploy(deployerWallet, votingAdmin).send(),
+      EasyPrivateVotingContract.deploy(
+        deployerWallet,
+        constructorArgs[0],
+      ).send(),
     broadcastWithWallet: deployerWallet, // NOTE: comment this out to not broadcast
     node: getAztecNodeClient(),
   });
-  registerContractClassArtifact(
-    contractLoggingName,
-    contractArtifactJson,
-    contract.instance.contractClassId.toString(),
-    contract.instance.version,
-  ).catch((err) => {
-    logger.error(
-      `Failed to register contract class artifact: ${(err as Error).stack}`,
-    );
-  });
 
   verifyContractInstanceDeployment({
     contractLoggingName,
@@ -51,7 +45,7 @@ export async function run() {
       publicKeysString: contract.instance.publicKeys.toString(),
       deployer: contract.instance.deployer.toString(),
       salt: contract.instance.salt.toString(),
-      constructorArgs: [votingAdmin.toString()],
+      constructorArgs: constructorArgs.map((arg) => arg.toString()),
     },
     deployerMetadata: {
       contractIdentifier: contractId,

services/explorer-ui/src/components/info-display/key-value-row.tsx

@@ -56,7 +56,11 @@ export const KeyValueRow: FC<KeyValueRowProps> = ({
       {displayType === DisplayType.HEX && (
         <span className={commonTextClasses}>
           <CopyableText
-            text={truncateHashString(value)}
+            text={
+              value.startsWith("0x") && !value.includes(", ")
+                ? truncateHashString(value)
+                : value
+            }
             toCopy={value}
             additionalClassesIcon="justify-end"
           />

services/explorer-ui/src/pages/contract-class-details/index.tsx

@@ -26,14 +26,14 @@ export const ContractClassDetails: FC = () => {
   const selectedVersion = selectedVersionWithArtifactRes?.data
     ? selectedVersionWithArtifactRes.data
     : contractClassesRes.data?.find(
-        (contract) => contract.version === Number(version)
+        (contract) => contract.version === Number(version),
       );
 
-  const headerStr = `Contract class details - "${
+  const headerStr = `Contract class details${
     selectedVersion?.artifactContractName
-      ? selectedVersion?.artifactContractName
+      ? ` - "${selectedVersion?.artifactContractName}"`
       : ""
-  }"`;
+  }`;
 
   return (
     <div className="mx-auto px-[70px] max-w-[1440px]">

services/explorer-ui/src/pages/contract-class-details/tabs-section.tsx

@@ -25,6 +25,19 @@ interface TabSectionProps {
   contractArtifactError: Error | null;
 }
 
+export const getDataFromMap = (data: SimplifiedViewOfFunc) => {
+  // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+  const result: { [key: string]: { [key: string]: string } } = {};
+  for (const [key, value] of data) {
+    // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+    result[key] = {};
+    for (const [k, v] of value) {
+      result[key][k] = v;
+    }
+  }
+  return result;
+};
+
 export const TabSection: FC<TabSectionProps> = ({
   contractClasses,
   contractClassId,
@@ -38,9 +51,9 @@ export const TabSection: FC<TabSectionProps> = ({
   };
 
   let artifact: SimpleArtifactData;
-  let privFunc: SimplifiedViewOfFunc = {};
-  let pubFunc: SimplifiedViewOfFunc = {};
-  let uncFunc: SimplifiedViewOfFunc = {};
+  let privFunc: SimplifiedViewOfFunc = new Map();
+  let pubFunc: SimplifiedViewOfFunc = new Map();
+  let uncFunc: SimplifiedViewOfFunc = new Map();
 
   if (selectedVersion?.artifactJson) {
     const artifactData = getArtifactData(selectedVersion);
@@ -54,12 +67,9 @@ export const TabSection: FC<TabSectionProps> = ({
     contractVersions: !!contractClasses && !!contractClasses.data?.length,
     contractInstances: !!contractInstances && !!contractInstances.data?.length,
 
-    privateFunctions:
-      !!selectedVersion && privFunc && Object.values(privFunc).length > 1,
-    unconstrainedFunctions:
-      !!selectedVersion && uncFunc && Object.values(uncFunc).length > 1,
-    publicFunctions:
-      !!selectedVersion && pubFunc && Object.values(pubFunc).length > 1,
+    privateFunctions: !!selectedVersion && privFunc && privFunc.size > 1,
+    unconstrainedFunctions: !!selectedVersion && uncFunc && uncFunc.size > 1,
+    publicFunctions: !!selectedVersion && pubFunc && pubFunc.size > 1,
     artifactJson:
       !!selectedVersion &&
       (!!selectedVersion.artifactJson || isContractArtifactLoading),
@@ -73,11 +83,11 @@ export const TabSection: FC<TabSectionProps> = ({
       case "contractInstances":
         return <ContractInstancesTab data={contractInstances} />;
       case "privateFunctions":
-        return <JsonTab data={privFunc} />;
+        return <JsonTab data={getDataFromMap(privFunc)} />;
       case "unconstrainedFunctions":
-        return <JsonTab data={uncFunc} />;
+        return <JsonTab data={getDataFromMap(uncFunc)} />;
       case "publicFunctions":
-        return <JsonTab data={pubFunc} />;
+        return <JsonTab data={getDataFromMap(pubFunc)} />;
       case "artifactJson":
         return isContractArtifactLoading ? (
           <Loader amount={1} />

services/explorer-ui/src/pages/contract-class-details/tabs/json-tab.tsx

@@ -1,8 +1,7 @@
 import { type FC } from "react";
-import { type SimpleArtifactData, type SimplifiedViewOfFunc } from "../util";
 
 interface JsonTabProps {
-  data: SimpleArtifactData | SimplifiedViewOfFunc;
+  data: unknown
 }
 export const JsonTab: FC<JsonTabProps> = ({ data }) => {
   return <pre className="overflow-auto">{JSON.stringify(data, null, 2)}</pre>;