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 (
{!contractArtifact ? ( -
-
- - - Drag 'n' drop some files here, or click to select files - + !isLoadingArtifact ? ( +
+
+ + + Drag 'n' drop some files here, or click to select files + +
-
+ ) : ( +
+ Loading artifact... + +
+ ) ) : (
diff --git a/gaztec/src/components/home/home.tsx b/gaztec/src/components/home/home.tsx index a20c6a9d7b09..9f5e7c7edd50 100644 --- a/gaztec/src/components/home/home.tsx +++ b/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 ( diff --git a/gaztec/src/components/sidebar/sidebar.tsx b/gaztec/src/components/sidebar/sidebar.tsx index a163f58597dd..fe9e291c5d6d 100644 --- a/gaztec/src/components/sidebar/sidebar.tsx +++ b/gaztec/src/components/sidebar/sidebar.tsx @@ -100,10 +100,10 @@ export function SidebarComponent() { setPXEInitialized, setWalletDB, setWallet, - setCurrentContract, + setCurrentContractAddress, setAztecNode, currentTx, - currentContract, + currentContractAddress, wallet, walletDB, nodeURL, @@ -166,7 +166,7 @@ export function SidebarComponent() { if (walletDB) { refreshContracts(); } - }, [currentContract, walletDB]); + }, [currentContractAddress, walletDB]); useEffect(() => { const refreshAccounts = async () => { @@ -181,7 +181,7 @@ export function SidebarComponent() { useEffect(() => { const refreshTransactions = async () => { const txsPerContract = await walletDB.retrieveTxsPerContract( - currentContract.address + currentContractAddress ); const txHashes = txsPerContract.map((txHash) => TxHash.fromString(convertFromUTF8BufferAsString(txHash)) @@ -190,7 +190,7 @@ export function SidebarComponent() { txHashes.map(async (txHash) => { const txData = await walletDB.retrieveTxData(txHash); return { - contractAddress: currentContract.address, + contractAddress: currentContractAddress, txHash: txData.txHash, status: convertFromUTF8BufferAsString(txData.status), fnName: convertFromUTF8BufferAsString(txData.fnName), @@ -201,7 +201,7 @@ export function SidebarComponent() { txs.sort((a, b) => (b.date >= a.date ? -1 : 1)); if ( currentTx && - currentTx.contractAddress === currentContract.address && + currentTx.contractAddress === currentContractAddress && (!currentTx.txHash || !txs.find((tx) => tx.txHash.equals(currentTx.txHash))) ) { @@ -209,10 +209,10 @@ export function SidebarComponent() { } setTransactions(txs); }; - if (currentContract && walletDB) { + if (currentContractAddress && walletDB) { refreshTransactions(); } - }, [currentContract, currentTx]); + }, [currentContractAddress, currentTx]); const handleAccountChange = async (event: SelectChangeEvent) => { if (event.target.value == "") { @@ -254,18 +254,7 @@ export function SidebarComponent() { return; } const contractAddress = AztecAddress.fromString(event.target.value); - const artifactAsString = await walletDB.retrieveAlias( - `artifacts:${contractAddress}` - ); - const contractArtifact = loadContractArtifact( - JSON.parse(convertFromUTF8BufferAsString(artifactAsString)) - ); - const contract = await Contract.at( - contractAddress, - contractArtifact, - wallet - ); - setCurrentContract(contract); + setCurrentContractAddress(contractAddress); }; const handleSenderAdded = async (sender?: AztecAddress, alias?: string) => { @@ -349,7 +338,7 @@ export function SidebarComponent() { Contracts