diff --git a/gaztec/src/components/common/fnParameter.tsx b/gaztec/src/components/common/fnParameter.tsx index 461b2280acb3..29f185beffc4 100644 --- a/gaztec/src/components/common/fnParameter.tsx +++ b/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)} diff --git a/gaztec/src/components/contract/components/createAuthwitDialog.tsx b/gaztec/src/components/contract/components/createAuthwitDialog.tsx index ee91d5183c6f..518f065d2f14 100644 --- a/gaztec/src/components/contract/components/createAuthwitDialog.tsx +++ b/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({ diff --git a/gaztec/src/components/contract/components/deployContractDialog.tsx b/gaztec/src/components/contract/components/deployContractDialog.tsx index c452397b10e5..75d07cf82680 100644 --- a/gaztec/src/components/contract/components/deployContractDialog.tsx +++ b/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", diff --git a/gaztec/src/components/contract/components/registerContractDialog.tsx b/gaztec/src/components/contract/components/registerContractDialog.tsx index 3dbb8d6b26a8..77bd6a56e1f5 100644 --- a/gaztec/src/components/contract/components/registerContractDialog.tsx +++ b/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", diff --git a/gaztec/src/components/contract/contract.tsx b/gaztec/src/components/contract/contract.tsx index c94db776faf9..e22d6c977cc8 100644 --- a/gaztec/src/components/contract/contract.tsx +++ b/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 (