feat: auto-recompile the boxes and fix broken frontend CompleteAddres…

…s import (#2727)

[forking prior PR to see where e2e tests
failed](#2635), got
in a bad state so splitting into smaller PRs.

This will help keep the boxes up to date by introducing a `bootstrap.sh`
for boxes, which recompiles within the monorepo using the latest local
`aztec-cli compile` command.

The artifact casing changes because `noir-contracts` compile script does
some manual changing to kebab case.

--> changes box contract Nargo.toml to be buildable within monorepo by
using relative paths for deps. These get updated now in the `unbox`
command.

Also discovered `CompleteAddress` was broken in the frontend, Leila
helped resolve import errors. added a test for the in e2e browser. This
means boxes are broken on current release of our packages, so need to
release again after this lands.

Will do a follow up PR for reducing dependencies to just
`@aztec/aztec.js`, as this PR is getting big

yarn-project/aztec.js/src/contract_deployer/contract_deployer.ts

@@ -1,5 +1,5 @@
-import { Point } from '@aztec/circuits.js';
 import { ContractAbi } from '@aztec/foundation/abi';
+import { Point } from '@aztec/foundation/fields';
 import { PXE, PublicKey } from '@aztec/types';
 
 import { DeployMethod } from './deploy_method.js';

yarn-project/bootstrap.sh

@@ -29,6 +29,7 @@ yarn --cwd circuits.js remake-bindings
 yarn --cwd circuits.js remake-constants
 
 (cd noir-contracts && ./bootstrap.sh)
+(cd boxes && ./bootstrap.sh)
 (cd .. && l1-contracts/bootstrap.sh)
 
 # Until we push .yarn/cache, we still need to install.

yarn-project/boxes/README.md

@@ -0,0 +1,3 @@
+This contains the "boxes" that are meant for quickstarts for Aztec smart contract developers, containing simple Noir smart contracts and frontends.
+
+If CI is failing, it may be due to incompatibility with previous build artifacts - running "./bootstrap.sh" inside this boxes folder should regenerate the artifacts.

yarn-project/boxes/blank-react/package.json

@@ -37,7 +37,6 @@
     "@aztec/aztec-ui": "^0.1.14",
     "@aztec/aztec.js": "workspace:^",
     "@aztec/circuits.js": "workspace:^",
-    "@aztec/cli": "workspace:^",
     "@aztec/foundation": "workspace:^",
     "@aztec/types": "workspace:^",
     "classnames": "^2.3.2",

yarn-project/boxes/blank-react/src/artifacts/blank.ts → yarn-project/boxes/blank-react/src/artifacts/Blank.ts

@@ -18,7 +18,7 @@ import {
 import { Fr, Point } from '@aztec/foundation/fields';
 import { PXE, PublicKey } from '@aztec/types';
 import { ContractAbi } from '@aztec/foundation/abi';
-import BlankContractAbiJson from './blank_contract.json' assert { type: 'json' };
+import BlankContractAbiJson from './Blank.json' assert { type: 'json' };
 export const BlankContractAbi = BlankContractAbiJson as ContractAbi;
 
 /**

yarn-project/boxes/blank-react/src/config.ts

@@ -1,6 +1,6 @@
 import { PXE, createPXEClient } from '@aztec/aztec.js';
 import { ContractAbi } from '@aztec/foundation/abi';
-import { BlankContractAbi } from './artifacts/blank.js';
+import { BlankContractAbi } from './artifacts/Blank.js';
 
 // update this if using a different contract
 

yarn-project/boxes/blank-react/src/contracts/Nargo.toml

@@ -5,4 +5,4 @@ compiler_version = "0.1"
 type = "contract"
 
 [dependencies]
-aztec = { git="https://github.com/AztecProtocol/aztec-packages", tag="master", directory="yarn-project/aztec-nr/aztec" }
+aztec = { path = "../../../../aztec-nr/aztec" }

yarn-project/boxes/blank-react/src/tests/blank.contract.test.ts

@@ -1,18 +1,18 @@
-import { BlankContract } from '../artifacts/blank.js';
-import { callContractFunction, deployContract, getWallet } from '../scripts/index.js';
 import {
   AccountWallet,
   AztecAddress,
-  PXE,
   CompleteAddress,
   Contract,
   Fr,
+  PXE,
   TxStatus,
   Wallet,
   createPXEClient,
   waitForSandbox,
 } from '@aztec/aztec.js';
 import { createDebugLogger } from '@aztec/foundation/log';
+import { BlankContract } from '../artifacts/Blank.js';
+import { callContractFunction, deployContract, getWallet } from '../scripts/index.js';
 
 const logger = createDebugLogger('aztec:http-pxe-client');
 

yarn-project/boxes/blank-react/tsconfig.dest.json

@@ -2,7 +2,6 @@
   "extends": ".",
   "references": [
     { "path": "../../aztec.js" },
-    { "path": "../../cli" },
     { "path": "../../foundation" },
     { "path": "../../types" }
   ],

yarn-project/boxes/blank-react/tsconfig.json

@@ -36,9 +36,6 @@
     {
       "path": "../../circuits.js"
     },
-    {
-      "path": "../../cli"
-    },
     {
       "path": "../../foundation"
     },

yarn-project/boxes/blank-react/webpack.config.js

@@ -10,7 +10,7 @@ const require = createRequire(import.meta.url);
 export default (_, argv) => ({
   target: 'web',
   mode: 'production',
-  devtool: false,
+  devtool: 'source-map',
   entry: {
     main: './src/app/index.tsx',
   },

yarn-project/boxes/blank/package.json

@@ -37,7 +37,6 @@
     "@aztec/aztec-ui": "^0.1.14",
     "@aztec/aztec.js": "workspace:^",
     "@aztec/circuits.js": "workspace:^",
-    "@aztec/cli": "workspace:^",
     "@aztec/foundation": "workspace:^",
     "serve": "^14.2.1"
   },

yarn-project/boxes/blank/src/artifacts/blank.ts → yarn-project/boxes/blank/src/artifacts/Blank.ts

@@ -18,7 +18,7 @@ import {
 import { Fr, Point } from '@aztec/foundation/fields';
 import { PXE, PublicKey } from '@aztec/types';
 import { ContractAbi } from '@aztec/foundation/abi';
-import BlankContractAbiJson from './blank_contract.json' assert { type: 'json' };
+import BlankContractAbiJson from './Blank.json' assert { type: 'json' };
 export const BlankContractAbi = BlankContractAbiJson as ContractAbi;
 
 /**

yarn-project/boxes/blank/src/contracts/Nargo.toml

@@ -5,4 +5,4 @@ compiler_version = "0.1"
 type = "contract"
 
 [dependencies]
-aztec = { git="https://github.com/AztecProtocol/aztec-packages", tag="master", directory="yarn-project/aztec-nr/aztec" }
+aztec = { path = "../../../../aztec-nr/aztec" }

yarn-project/boxes/blank/src/index.ts

@@ -12,7 +12,7 @@ import {
 } from '@aztec/aztec.js';
 import { ContractAbi, FunctionAbi, encodeArguments } from '@aztec/foundation/abi';
 import { FieldsOf } from '@aztec/foundation/types';
-import { BlankContractAbi } from './artifacts/blank.js';
+import { BlankContractAbi } from './artifacts/Blank.js';
 export const contractAbi: ContractAbi = BlankContractAbi;
 
 export const PXE_URL: string = process.env.PXE_URL || 'http://localhost:8080';

yarn-project/boxes/blank/src/tests/blank.contract.test.ts

@@ -1,17 +1,17 @@
 import {
   AccountWallet,
   AztecAddress,
-  PXE,
   CompleteAddress,
   Contract,
   Fr,
+  PXE,
   TxStatus,
   Wallet,
   createPXEClient,
   waitForSandbox,
 } from '@aztec/aztec.js';
 import { createDebugLogger } from '@aztec/foundation/log';
-import { BlankContract } from '../artifacts/blank.js';
+import { BlankContract } from '../artifacts/Blank.js';
 import { callContractFunction, deployContract, getWallet } from '../index.js';
 const logger = createDebugLogger('aztec:blank-box-test');
 

yarn-project/boxes/blank/tsconfig.dest.json

@@ -2,7 +2,6 @@
   "extends": ".",
   "references": [
     { "path": "../../aztec.js" },
-    { "path": "../../cli" },
     { "path": "../../foundation" },
     { "path": "../../types" }
   ],

yarn-project/boxes/blank/tsconfig.json

@@ -36,9 +36,6 @@
     {
       "path": "../../circuits.js"
     },
-    {
-      "path": "../../cli"
-    },
     {
       "path": "../../foundation"
     }

yarn-project/boxes/blank/webpack.config.js

@@ -10,7 +10,7 @@ const require = createRequire(import.meta.url);
 export default (_, argv) => ({
   target: 'web',
   mode: 'production',
-  devtool: false,
+  devtool: 'source-map',
   entry: {
     main: './src/index.ts',
   },

yarn-project/boxes/bootstrap.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+
+# should be run from yarn-project/boxes
+original_path=$(pwd)
+
+# Loop through all directories in 'boxes'
+for dir in *; do
+  # Check if it's a directory
+  if [ -d "${dir}" ]; then
+
+    # Run the compile command
+    echo "Running compile command inside ${dir}..."
+
+    # Change directory to ../cli
+    cd ../cli
+
+    # Run ts-node command to use latest "compile" code
+    ts-node --esm src/bin/index.ts compile "${original_path}/${dir}/src/contracts" --outdir "${original_path}/${dir}/src/artifacts" --typescript "${original_path}/${dir}/src/artifacts"
+
+    # Change back to the original directory
+    cd "${original_path}"
+
+  fi
+done

yarn-project/boxes/private-token/package.json

@@ -37,7 +37,6 @@
     "@aztec/aztec-ui": "^0.1.14",
     "@aztec/aztec.js": "workspace:^",
     "@aztec/circuits.js": "workspace:^",
-    "@aztec/cli": "workspace:^",
     "@aztec/foundation": "workspace:^",
     "@aztec/types": "workspace:^",
     "classnames": "^2.3.2",