fix: Revert boxes update (#4602)

.circleci/config.yml

@@ -510,6 +510,17 @@ jobs:
           name: "Test"
           command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=box-blank-react
 
+  boxes-token:
+    docker:
+      - image: aztecprotocol/alpine-build-image
+    resource_class: small
+    steps:
+      - *checkout
+      - *setup_env
+      - run:
+          name: "Test"
+          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=box-token
+
   end-to-end:
     machine:
       image: ubuntu-2204:2023.07.2
@@ -1284,6 +1295,10 @@ workflows:
           requires:
             - boxes
           <<: *defaults
+      - boxes-token:
+          requires:
+            - boxes
+          <<: *defaults
 
       # End to end tests.
       - e2e-join:
@@ -1370,6 +1385,7 @@ workflows:
             - pxe
             - boxes-blank
             - boxes-blank-react
+            - boxes-token
             - cli-docs-sandbox
             - guides-writing-an-account-contract
             - guides-dapp-testing

boxes/.gitignore

@@ -3,4 +3,4 @@
 
 node_modules
 dest
-src/contracts/target
+src/contracts/target

boxes/.yarnrc.yml

@@ -1,2 +1,6 @@
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-berry.cjs
+logFilters:
+  - code: YN0013
+    level: discard

boxes/blank-react/.eslintrc.cjs

@@ -1,42 +1,63 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
+  parserOptions: {
+    project: './tsconfig.json',
+  },
   extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
-    "prettier",
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'prettier',
   ],
   settings: {
-    "import/resolver": {
+    'import/resolver': {
       typescript: true,
       node: true,
     },
   },
-  ignorePatterns: ["dest", "webpack.config.js", ".eslintrc.cjs"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh"],
+  ignorePatterns: ['dest', 'webpack.config.js', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parserOptions: {
+        project: true,
+      },
+    },
+  ],
   rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/await-thenable": "error",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
-    ],
-    "require-await": 2,
-    "no-console": "warn",
-    "no-constant-condition": "off",
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/await-thenable': 'error',
+    '@typescript-eslint/no-floating-promises': 2,
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    'require-await': 2,
+    'no-console': 'warn',
+    'no-constant-condition': 'off',
     camelcase: 2,
-    "import/no-unresolved": "error",
-    "import/no-extraneous-dependencies": "error",
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['client-dest'],
+            message: "Fix this absolute garbage import. It's your duty to solve it before it spreads.",
+          },
+          {
+            group: ['dest'],
+            message: 'You should not be importing from a build directory. Did you accidentally do a relative import?',
+          },
+        ],
+      },
+    ],
+    'import/no-unresolved': 'error',
+    'import/no-extraneous-dependencies': 'error',
   },
 };

boxes/blank-react/.gitignore

@@ -2,7 +2,6 @@
 !.yarn/releases
 
 node_modules
-dist
-artifacts
-src/contracts/target
-src/contracts/log
+dest
+src/artifacts
+src/contracts/target

boxes/blank-react/README.md

@@ -1,31 +1,80 @@
-# Aztec Box
+This is a minimal [Aztec](https://aztec.network/) Noir smart contract and frontend bootstrapped with [`aztec-cli unbox`](https://github.com/AztecProtocol/aztec-packages/tree/master/yarn-project/cli). It is recommended you use the `aztec-cli unbox blank-react` command so that the repository is copied with needed modifications from the monorepo subpackage.
 
-This box is a one-stop-shop for Aztec that will deploy a blank React Page. You can use it as a boilerplate to start developing your own Aztec app in seconds!
+## Setup
 
-## Prerequisites
+Dependencies can be installed from the root of the package:
 
-- You should have Docker installed. If you don't, follow [this guide](https://docs.aztec.network/dev_docs/getting_started/quickstart#install-docker).
+```bash
+yarn
+yarn install:noir
+yarn install:sandbox
+```
 
-## Installation
+This sandbox requires [Docker](https://www.docker.com/) to be installed _and running_ locally. In the event the image needs updating, you can run `yarn install:sandbox` (see [sandbox docs](https://docs.aztec.network/developers/cli/main) for more information.)
 
-Run `npx create-aztec-app` and follow the instructions to clone this repo, install the sandbox and run it on port 8080.
+In addition to the usual javascript dependencies, this project requires `nargo` (package manager) and `noir` (Aztec ZK smart contract language) in addition to `@aztec/aztec-cli`. The former two are installed by `yarn install:noir`.
 
-### 1. Install dependencies
+## Getting started
 
-Run:
+After `yarn` has run,`yarn start:sandbox` in one terminal will launch a local instance of the Aztec sandbox via Docker Compose and `yarn start:dev` will launch a frontend app for deploying and interacting with an empty Aztec smart contract.
+
+At this point, [http://localhost:5173](http://localhost:5173) should provide a minimal smart contract frontend.
+
+This folder should have the following directory structure:
 
-```bash
-yarn
 ```
+|— README.md
+|— package.json
+|— src
+       |-config.ts - Blank Contract specific configuration for the frontend.
+       |             You may need to update this if you modify the contract functions.
+       |— app
+              |— [frontend React .tsx code files]
+       |- scripts
+              |- [helpers for frontend to interact with contract on the sandbox]
+       |— contracts
+              |— src
+                     | The Noir smart contract source files are here.
+                     |— main.nr - the cloned noir contract, your starting point
+                     |- interface.nr - autogenerated from main.nr when you compile
+               |— Nargo.toml [Noir build file, includes Aztec smart contract dependencies]
+       |— artifacts
+              |  These are both generated from `contracts/` by the compile command
+              |— blank_contract.json
+              |— blank.ts
+       |— tests
+              | A simple end2end test deploying and testing the Blank contract deploys on a local sandbox
+              | The test requires the sandbox and anvil to be running (`yarn start:sandbox`).
+              | You can run the tests with `yarn test:integration`
+              |- blank.contract.test.ts
+```
+
+Most relevant to you is likely `src/contracts/main.nr` (and the build config `src/contracts/Nargo.toml`). This contains the example blank contract logic that the frontend interacts with and is a good place to start writing Noir.
 
-Time to build. Run:
+The `src/artifacts` folder can be re-generated from the command line
 
 ```bash
-yarn dev
+yarn compile
 ```
 
-Your React app is waiting for you on port 5176. Time to make it your own!
+This will generate a [Contract ABI](src/artifacts/test_contract.json) and TypeScript class for the [Aztec smart contract](src/contracts/main.nr), which the frontend uses to generate the UI.
+
+Note: the `compile` command seems to generate a Typescript file which needs a single change -
+
+```
+import TestContractArtifactJson from 'text_contract.json' assert { type: 'json' };
+// need to update the relative import to
+import TestContractArtifactJson from './test_contract.json' assert { type: 'json' };
+```
+
+After compiling, you can re-deploy the updated noir smart contract from the web UI. The function interaction forms are generated from parsing the contract artifacts, so they should update automatically after you recompile.
+
+## Learn More
+
+To learn more about Noir Smart Contract development, take a look at the following resources:
+
+- [Awesome Noir](https://github.com/noir-lang/awesome-noir) - learn about the Noir programming language.
 
-[Read the full Sandbox reference](https://docs.aztec.network/dev_docs/cli/sandbox-reference) for more info on what exactly is happening on your machine!
+## Deploy on Aztec3
 
-Visit the [Aztec Docs](https://docs.aztec.network) for more information on how Aztec works, and the [Awesome Aztec Repository](https://github.com/AztecProtocol/awesome-aztec) for more cool projects, boilerplates and tooling.
+Coming Soon :)

boxes/blank-react/package.json

@@ -3,18 +3,17 @@
   "private": true,
   "version": "0.1.0",
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "./dest/index.js",
   "scripts": {
-    "compile": "cd src/contracts && ${AZTEC_NARGO:-aztec-nargo} compile",
-    "codegen": "${AZTEC_CLI:-aztec-cli} codegen src/contracts/target -o artifacts --ts",
-    "clean": "rm -rf ./dist .tsbuildinfo ./artifacts ./src/contracts/target",
-    "prep": "yarn clean && yarn compile && yarn codegen",
-    "dev": "yarn prep && webpack serve --mode development",
-    "build": "yarn prep && webpack",
-    "serve": "serve -p 3000 ./dist",
+    "build": "yarn clean && yarn compile && yarn codegen && tsc -b && webpack",
+    "clean": "rm -rf ./dest .tsbuildinfo ./src/artifacts ./src/contracts/target",
+    "start": "serve -p 3000 ./dest",
+    "start:dev": "webpack serve --mode=development",
     "formatting": "prettier --check ./src && eslint ./src",
     "formatting:fix": "prettier -w ./src",
-    "test": "yarn prep && NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand"
+    "compile": "cd src/contracts && ${AZTEC_NARGO:-aztec-nargo} compile",
+    "codegen": "${AZTEC_CLI:-aztec-cli} codegen src/contracts/target -o src/artifacts --ts",
+    "test": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand"
   },
   "jest": {
     "preset": "ts-jest/presets/default-esm",
@@ -29,12 +28,13 @@
     "moduleNameMapper": {
       "^(\\.{1,2}/.*)\\.js$": "$1"
     },
-    "testRegex": "tests/.*\\.test\\.ts$",
-    "rootDir": "./"
+    "testRegex": "./src/.*\\.test\\.ts$",
+    "rootDir": "./src"
   },
   "dependencies": {
-    "@aztec/accounts": "latest",
-    "@aztec/aztec.js": "latest",
+    "@aztec/accounts": "^0.16.9",
+    "@aztec/aztec-ui": "^0.1.14",
+    "@aztec/aztec.js": "^0.16.9",
     "classnames": "^2.3.2",
     "formik": "^2.4.3",
     "node-sass": "^9.0.0",
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.0",
+    "@types/mocha": "^10.0.3",
     "@types/node": "^20.5.9",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
@@ -61,12 +62,10 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "html-webpack-plugin": "^5.6.0",
     "jest": "^29.6.4",
     "postcss": "^8.4.29",
     "postcss-loader": "^7.3.3",
     "prettier": "^3.1.1",
-    "react-toastify": "^10.0.4",
     "resolve-typescript-plugin": "^2.0.1",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.3",
@@ -80,11 +79,23 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "files": [
-    "dist",
+    "dest",
     "src",
     "!*.test.*"
   ],
-  "types": "./dist/index.d.ts",
+  "types": "./dest/index.d.ts",
   "packageManager": "[email protected]"
 }

boxes/blank-react/src/@types/index.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.module.scss' {
+  const content: { [className: string]: string };
+  export = content;
+}