Skip to content

Commit

Permalink
Fix boxes (again)
Browse files Browse the repository at this point in the history
  • Loading branch information
spalladino committed Feb 23, 2024
1 parent f7afecd commit 2fe8987
Show file tree
Hide file tree
Showing 8 changed files with 43 additions and 64 deletions.
28 changes: 9 additions & 19 deletions boxes/blank-react/src/config.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import {
GrumpkinPrivateKey,
GrumpkinScalar,
createPXEClient,
} from "@aztec/aztec.js";
import { BlankContractArtifact } from "../artifacts/Blank";
import { AccountManager } from "@aztec/aztec.js/account";
import { SingleKeyAccountContract } from "@aztec/accounts/single_key";
import { GrumpkinPrivateKey, GrumpkinScalar, createPXEClient } from '@aztec/aztec.js';
import { BlankContractArtifact } from '../artifacts/Blank';
import { AccountManager } from '@aztec/aztec.js/account';
import { SingleKeyAccountContract } from '@aztec/accounts/single_key';

const GRUMPKIN_KEY = GrumpkinScalar.random();

Expand All @@ -16,15 +12,11 @@ export class PrivateEnv {

constructor(
private privateKey: GrumpkinPrivateKey,
private pxeURL : string,
private pxeURL: string,
) {
this.pxe = createPXEClient(this.pxeURL);
this.accountContract = new SingleKeyAccountContract(privateKey);
this.account = new AccountManager(
this.pxe,
this.privateKey,
this.accountContract,
);
this.account = new AccountManager(this.pxe, this.privateKey, this.accountContract);
}

async getWallet() {
Expand All @@ -33,9 +25,7 @@ export class PrivateEnv {
}
}

export const deployerEnv = new PrivateEnv(GRUMPKIN_KEY, process.env.PXE_URL || "http://localhost:8080");
export const deployerEnv = new PrivateEnv(GRUMPKIN_KEY, process.env.PXE_URL || 'http://localhost:8080');

const IGNORE_FUNCTIONS = ["constructor", "compute_note_hash_and_nullifier"];
export const filteredInterface = BlankContractArtifact.functions.filter(
(f) => !IGNORE_FUNCTIONS.includes(f.name),
);
const IGNORE_FUNCTIONS = ['constructor', 'compute_note_hash_and_nullifier'];
export const filteredInterface = BlankContractArtifact.functions.filter(f => !IGNORE_FUNCTIONS.includes(f.name));
20 changes: 10 additions & 10 deletions boxes/blank-react/src/hooks/useContract.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { useState } from "react";
import { deployerEnv } from "../config";
import { useState } from 'react';
import { deployerEnv } from '../config';

import { Contract, ContractDeployer, Fr } from "@aztec/aztec.js";
import { BlankContract } from "../../artifacts/Blank";
import { toast } from "react-toastify";
import { Contract, ContractDeployer, Fr } from '@aztec/aztec.js';
import { BlankContract } from '../../artifacts/Blank';
import { toast } from 'react-toastify';

export function useContract() {
const { artifact, at } = BlankContract;
Expand All @@ -14,19 +14,19 @@ export function useContract() {
e.preventDefault();

setWait(true);
const contractDeployer = new ContractDeployer(artifact, deployerEnv.pxe);
const wallet = await deployerEnv.getWallet();
const contractDeployer = new ContractDeployer(artifact, wallet);

const salt = Fr.random();
const tx = contractDeployer
.deploy(Fr.random(), wallet.getCompleteAddress().address)
.send({ contractAddressSalt: salt });
const { contractAddress } = await toast.promise(tx.wait(), {
pending: "Deploying contract...",
const { address: contractAddress } = await toast.promise(tx.deployed(), {
pending: 'Deploying contract...',
success: {
render: ({ data }) => `Address: ${data.contractAddress}`,
render: ({ data }) => `Address: ${data.address}`,
},
error: "Error deploying contract",
error: 'Error deploying contract',
});

const deployerWallet = await deployerEnv.getWallet();
Expand Down
12 changes: 5 additions & 7 deletions boxes/blank-react/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { Home } from "./pages/home";
import "react-toastify/dist/ReactToastify.css";
import * as ReactDOM from "react-dom/client";
import { ToastContainer } from "react-toastify";
import { Home } from './pages/home';
import 'react-toastify/dist/ReactToastify.css';
import * as ReactDOM from 'react-dom/client';
import { ToastContainer } from 'react-toastify';

const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement,
);
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<>
<Home />
Expand Down
25 changes: 8 additions & 17 deletions boxes/blank-react/src/pages/contract.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState } from "react";
import { Contract } from "@aztec/aztec.js";
import { useNumber } from "../hooks/useNumber";
import { filteredInterface } from "../config";
import { useState } from 'react';
import { Contract } from '@aztec/aztec.js';
import { useNumber } from '../hooks/useNumber';
import { filteredInterface } from '../config';

export function ContractComponent({ contract }: { contract: Contract }) {
const [showInput, setShowInput] = useState(true);
Expand All @@ -15,7 +15,7 @@ export function ContractComponent({ contract }: { contract: Contract }) {
<select name="viewFunctions" id="viewFunctions">
{filteredInterface.map(
(fn, index) =>
fn.functionType === "unconstrained" && (
fn.functionType === 'unconstrained' && (
<option key={index} value={index}>
{fn.name}
</option>
Expand All @@ -29,26 +29,17 @@ export function ContractComponent({ contract }: { contract: Contract }) {

<form onSubmit={setNumber}>
<label htmlFor="functions">Functions:</label>
<select
name="functions"
id="functions"
onChange={() => setShowInput(true)}
>
<select name="functions" id="functions" onChange={() => setShowInput(true)}>
{filteredInterface.map(
(fn, index) =>
fn.functionType !== "unconstrained" && (
fn.functionType !== 'unconstrained' && (
<option key={index} value={index}>
{fn.name}
</option>
),
)}
</select>
<input
type="number"
name="numberToSet"
id="numberToSet"
hidden={!showInput}
/>
<input type="number" name="numberToSet" id="numberToSet" hidden={!showInput} />
<button type="submit" disabled={wait}>
Write
</button>
Expand Down
4 changes: 2 additions & 2 deletions boxes/blank-react/src/pages/home.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ContractComponent } from "./contract";
import { useContract } from "../hooks/useContract";
import { ContractComponent } from './contract';
import { useContract } from '../hooks/useContract';

export function Home() {
const { contract, deploy, wait } = useContract();
Expand Down
9 changes: 5 additions & 4 deletions boxes/blank-react/tests/blank.contract.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,12 @@ describe('Blank Contract Tests', () => {
beforeAll(async () => {
wallet = await deployerEnv.getWallet();
const pxe = deployerEnv.pxe;
const deployer = new ContractDeployer(artifact, pxe);
const deployer = new ContractDeployer(artifact, wallet);
const salt = Fr.random();
const tx = deployer.deploy(Fr.random(), wallet.getCompleteAddress().address).send({ contractAddressSalt: salt });
await tx.wait();
const { contractAddress } = await tx.getReceipt();
const { address: contractAddress } = await deployer
.deploy(Fr.random(), wallet.getCompleteAddress().address)
.send({ contractAddressSalt: salt })
.deployed();
contract = await BlankContract.at(contractAddress!, wallet);

logger(`L2 contract deployed at ${contractAddress}`);
Expand Down
2 changes: 1 addition & 1 deletion boxes/blank/src/contracts/target/blank-Blank.json

Large diffs are not rendered by default.

7 changes: 3 additions & 4 deletions boxes/blank/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
Fr,
AccountWalletWithPrivateKey,
} from '@aztec/aztec.js';
import { BlankContractArtifact } from './artifacts/Blank.js';

import { SingleKeyAccountContract } from '@aztec/accounts/single_key';
import { BlankContract } from '../artifacts/Blank';
Expand All @@ -28,11 +27,11 @@ document.querySelector('#deploy').addEventListener('click', async ({ target }: a
wallet = await account.register();

const { artifact, at } = BlankContract;
const contractDeployer = new ContractDeployer(artifact, pxe);
const { contractAddress } = await contractDeployer
const contractDeployer = new ContractDeployer(artifact, wallet);
const { address: contractAddress } = await contractDeployer
.deploy(Fr.random(), wallet.getCompleteAddress().address)
.send({ contractAddressSalt: Fr.random() })
.wait();
.deployed();
contract = await at(contractAddress, wallet);
alert(`Contract deployed at ${contractAddress}`);

Expand Down

0 comments on commit 2fe8987

Please sign in to comment.