fix(aztec.js)!: remove field from aztec address like

gaztec/src/components/common/fnParameter.tsx

@@ -1,4 +1,9 @@
-import { ABIParameter, AbiType, isAddressStruct } from "@aztec/foundation/abi";
+import {
+  ABIParameter,
+  AbiType,
+  isAddressStruct,
+  isU128Struct,
+} from "@aztec/foundation/abi";
 import {
   Autocomplete,
   CircularProgress,
@@ -29,7 +34,7 @@ export function FunctionParameter({
   onParameterChange,
 }: {
   parameter: ABIParameter;
-  onParameterChange: (value: string) => void;
+  onParameterChange: (value: any) => void;
 }) {
   const { walletDB } = useContext(AztecContext);
 
@@ -42,6 +47,13 @@ export function FunctionParameter({
         onParameterChange(BigInt(value).toString(16));
         break;
       }
+      case "struct": {
+        if (isU128Struct(type)) {
+          onParameterChange(BigInt(value));
+          break;
+        }
+        // Otherwise fall through
+      }
       default: {
         onParameterChange(value);
         break;
@@ -111,7 +123,10 @@ export function FunctionParameter({
           fullWidth
           css={css}
           variant="outlined"
-          disabled={["array", "struct", "tuple"].includes(parameter.type.kind)}
+          disabled={
+            ["array", "struct", "tuple"].includes(parameter.type.kind) &&
+            !(isAddressStruct(parameter.type) || isU128Struct(parameter.type))
+          }
           key={parameter.name}
           type="text"
           label={capitalize(parameter.name)}

gaztec/src/components/contract/components/createAuthwitDialog.tsx

@@ -12,7 +12,6 @@ import {
 } from "@mui/material";
 import { useContext, useState } from "react";
 import { AztecContext } from "../../home/home";
-import { prepTx } from "../../../utils/interactions";
 import { FunctionParameter } from "../../common/fnParameter";
 
 const creationForm = css({
@@ -54,13 +53,7 @@ export function CreateAuthwitDialog({
 
   const createAuthwit = async () => {
     setCreating(true);
-    const { encodedArgs } = await prepTx(
-      currentContract.artifact,
-      fnName,
-      args
-    );
-    const action = currentContract.methods[fnName](...encodedArgs);
-    console.log(`Creating authwit for ${fnName} with args:`, args);
+    const action = currentContract.methods[fnName](...args);
     let witness;
     if (isPrivate) {
       witness = await wallet.createAuthWit({

gaztec/src/components/contract/components/deployContractDialog.tsx

@@ -25,10 +25,10 @@ import {
   getDefaultInitializer,
   getInitializer,
 } from "@aztec/foundation/abi";
-import { GITHUB_TAG_PREFIX } from "../../../utils/interactions";
 import { AztecContext } from "../../home/home";
 import { parseAliasedBuffersAsString } from "../../../utils/conversion";
 import { FunctionParameter } from "../../common/fnParameter";
+import { GITHUB_TAG_PREFIX } from "../../../utils/constants";
 
 const creationForm = css({
   display: "flex",

gaztec/src/components/contract/components/registerContractDialog.tsx

@@ -16,8 +16,8 @@ import {
   css,
 } from "@mui/material";
 import { useContext, useState } from "react";
-import { GITHUB_TAG_PREFIX } from "../../../utils/interactions";
 import { AztecContext } from "../../home/home";
+import { GITHUB_TAG_PREFIX } from "../../../utils/constants";
 
 const creationForm = css({
   display: "flex",

gaztec/src/components/contract/contract.tsx

@@ -25,8 +25,10 @@ import {
   Typography,
 } from "@mui/material";
 import FindInPageIcon from "@mui/icons-material/FindInPage";
-import { prepTx } from "../../utils/interactions";
-import { formatFrAsString } from "../../utils/conversion";
+import {
+  convertFromUTF8BufferAsString,
+  formatFrAsString,
+} from "../../utils/conversion";
 import { DeployContractDialog } from "./components/deployContractDialog";
 import { FunctionParameter } from "../common/fnParameter";
 import ClearIcon from "@mui/icons-material/Clear";
@@ -81,6 +83,15 @@ const checkBoxLabel = css({
   height: "1.5rem",
 });
 
+const loadingArtifactContainer = css({
+  display: "flex",
+  flexDirection: "column",
+  textAlign: "center",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "2rem",
+});
+
 const FORBIDDEN_FUNCTIONS = [
   "process_log",
   "compute_note_hash_and_optionally_a_nullifier",
@@ -98,6 +109,8 @@ export function ContractComponent() {
     unconstrained: true,
   });
 
+  const [isLoadingArtifact, setIsLoadingArtifact] = useState(false);
+
   const [isWorking, setIsWorking] = useState(false);
 
   const [simulationResults, setSimulationResults] = useState({});
@@ -117,32 +130,52 @@ export function ContractComponent() {
   const {
     wallet,
     walletDB,
+    currentContractAddress,
     currentContract,
     setCurrentContract,
     setCurrentTx,
   } = useContext(AztecContext);
 
   useEffect(() => {
-    if (currentContract) {
-      setContractArtifact(currentContract.artifact);
+    const loadCurrentContract = async () => {
+      setIsLoadingArtifact(true);
+      const artifactAsString = await walletDB.retrieveAlias(
+        `artifacts:${currentContractAddress}`
+      );
+      const contractArtifact = loadContractArtifact(
+        JSON.parse(convertFromUTF8BufferAsString(artifactAsString))
+      );
+      const contract = await Contract.at(
+        currentContractAddress,
+        contractArtifact,
+        wallet
+      );
+      setCurrentContract(contract);
+      setContractArtifact(contract.artifact);
       setFilters({
         searchTerm: "",
         private: true,
         public: true,
         unconstrained: true,
       });
+      setIsLoadingArtifact(false);
+    };
+    if (currentContractAddress) {
+      loadCurrentContract();
     }
-  }, [currentContract]);
+  }, [currentContractAddress]);
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: async (files) => {
       const file = files[0];
       const reader = new FileReader();
+      setIsLoadingArtifact(true);
       reader.onload = async (e) => {
         const contractArtifact = loadContractArtifact(
           JSON.parse(e.target?.result as string)
         );
         setContractArtifact(contractArtifact);
+        setIsLoadingArtifact(false);
       };
       reader.readAsText(file);
     },
@@ -177,12 +210,7 @@ export function ContractComponent() {
     setIsWorking(true);
     let result;
     try {
-      const { encodedArgs } = await prepTx(
-        contractArtifact,
-        fnName,
-        parameters[fnName]
-      );
-      const call = currentContract.methods[fnName](...encodedArgs);
+      const call = currentContract.methods[fnName](...parameters[fnName]);
 
       result = await call.simulate();
       setSimulationResults({
@@ -210,12 +238,7 @@ export function ContractComponent() {
     };
     setCurrentTx(currentTx);
     try {
-      const { encodedArgs } = await prepTx(
-        contractArtifact,
-        fnName,
-        parameters[fnName]
-      );
-      const call = currentContract.methods[fnName](...encodedArgs);
+      const call = currentContract.methods[fnName](...parameters[fnName]);
 
       const provenCall = await call.prove();
       txHash = provenCall.getTxHash();
@@ -240,6 +263,7 @@ export function ContractComponent() {
         },
       });
     } catch (e) {
+      console.error(e);
       setCurrentTx({
         ...currentTx,
         ...{
@@ -277,14 +301,21 @@ export function ContractComponent() {
   return (
     <div css={container}>
       {!contractArtifact ? (
-        <div css={dropZoneContainer}>
-          <div {...getRootProps({ className: "dropzone" })}>
-            <input {...getInputProps()} />
-            <Typography>
-              Drag 'n' drop some files here, or click to select files
-            </Typography>
+        !isLoadingArtifact ? (
+          <div css={dropZoneContainer}>
+            <div {...getRootProps({ className: "dropzone" })}>
+              <input {...getInputProps()} />
+              <Typography>
+                Drag 'n' drop some files here, or click to select files
+              </Typography>
+            </div>
           </div>
-        </div>
+        ) : (
+          <div css={loadingArtifactContainer}>
+            <Typography variant="h5">Loading artifact...</Typography>
+            <CircularProgress size={100} />
+          </div>
+        )
       ) : (
         <div css={contractFnContainer}>
           <div css={header}>

gaztec/src/components/home/home.tsx

@@ -7,6 +7,7 @@ import {
   type AccountWalletWithSecretKey,
   Contract,
   AztecNode,
+  AztecAddress,
 } from "@aztec/aztec.js";
 import { type WalletDB } from "../../utils/storage";
 import { ContractFunctionInteractionTx } from "../../utils/txs";
@@ -24,6 +25,7 @@ export const AztecContext = createContext<{
   wallet: AccountWalletWithSecretKey | null;
   isPXEInitialized: boolean;
   walletDB: WalletDB | null;
+  currentContractAddress: AztecAddress;
   currentContract: Contract;
   currentTx: ContractFunctionInteractionTx;
   setWalletDB: (walletDB: WalletDB) => void;
@@ -34,6 +36,7 @@ export const AztecContext = createContext<{
   setNodeURL: (nodeURL: string) => void;
   setCurrentTx: (currentTx: ContractFunctionInteractionTx) => void;
   setCurrentContract: (currentContract: Contract) => void;
+  setCurrentContractAddress: (currentContractAddress: AztecAddress) => void;
 }>({
   pxe: null,
   nodeURL: "",
@@ -42,6 +45,7 @@ export const AztecContext = createContext<{
   isPXEInitialized: false,
   walletDB: null,
   currentContract: null,
+  currentContractAddress: null,
   currentTx: null,
   setWalletDB: (walletDB: WalletDB) => {},
   setPXEInitialized: (isPXEInitialized: boolean) => {},
@@ -51,6 +55,7 @@ export const AztecContext = createContext<{
   setAztecNode: (node: AztecNode) => {},
   setCurrentTx: (currentTx: ContractFunctionInteractionTx) => {},
   setCurrentContract: (currentContract: Contract) => {},
+  setCurrentContractAddress: (currentContractAddress: AztecAddress) => {},
 });
 
 export function Home() {
@@ -63,6 +68,7 @@ export function Home() {
   const [walletDB, setWalletDB] = useState(null);
   const [currentContract, setCurrentContract] = useState(null);
   const [currentTx, setCurrentTx] = useState(null);
+  const [currentContractAddress, setCurrentContractAddress] = useState(null);
 
   const AztecContextInitialValue = {
     pxe,
@@ -74,6 +80,7 @@ export function Home() {
     currentContract,
     currentTx,
     node,
+    currentContractAddress,
     setAztecNode,
     setCurrentTx,
     setWalletDB,
@@ -83,6 +90,7 @@ export function Home() {
     setNodeURL,
     setWalletAlias,
     setCurrentContract,
+    setCurrentContractAddress,
   };
 
   return (