feat: cli "unbox" command

yarn-project/README.md

@@ -38,3 +38,5 @@ To add a new package, make sure to add it to the `build_manifest.json`, to the `
 - `package.json`
 - `README.md`
 - `tsconfig.json`
+
+You may also need to modify the [Dockerfile](yarn-project/yarn-project-base/Dockerfile) to copy your new `package.json` into the container to get CI to pass.

yarn-project/aztec.js/package.json

@@ -5,8 +5,8 @@
   "type": "module",
   "exports": {
     "node": "./dest/index.js",
-    "default": "./dest/main.js",
-    "import": "./dest/index.js"
+    "import": "./dest/index.js",
+    "default": "./dest/main.js"
   },
   "typedocOptions": {
     "entryPoints": [

yarn-project/boxes/private-token/.eslintrc.cjs

@@ -0,0 +1,61 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'prettier',
+  ],
+  settings: {
+    'import/resolver': {
+      typescript: true,
+      node: true,
+    },
+  },
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parserOptions: {
+        // hacky workaround for CI not having the same tsconfig setup
+        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-floating-promises': 2,
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    'require-await': 2,
+    'no-console': 'warn',
+    'no-constant-condition': 'off',
+    camelcase: 2,
+    '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',
+  },
+};

yarn-project/boxes/private-token/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

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

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "arrowParens": "avoid"
+}

yarn-project/boxes/private-token/Dockerfile

@@ -0,0 +1,15 @@
+FROM 278380418400.dkr.ecr.eu-west-2.amazonaws.com/yarn-project-base AS builder
+
+COPY . .
+
+WORKDIR /usr/src/yarn-project/boxes/private-token
+RUN yarn build && yarn formatting
+
+# this feels wrong
+RUN yarn cache clean
+RUN yarn workspaces focus --production > /dev/null
+
+FROM node:18-alpine
+COPY --from=builder /usr/src/yarn-project/boxes/private-token /usr/src/yarn-project/boxes/private-token
+WORKDIR /usr/src/yarn-project/boxes/private-token
+ENTRYPOINT ["yarn"] 

yarn-project/boxes/private-token/README.md

@@ -0,0 +1,95 @@
+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 PrivateToken` command so that the repository is copied with needed modifications from the monorepo subpackage.
+
+Some contract specific settings for `PrivateToken` are in a [config](src/config.ts) will require manual updates depending on your changes to the source code. `aztec-cli` can be installed with `npm i -g @aztec/cli`, if you don't have it already.
+
+## Setup
+
+Dependencies can be installed from the root of the package:
+
+```bash
+yarn
+yarn install:noir
+yarn install:sandbox
+yarn build
+```
+
+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 are installed within `yarn install:noir` which executes
+
+```bash
+curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
+
+noirup -v aztec
+```
+
+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` which executes
+
+```bash
+docker pull aztecprotocol/aztec-sandbox:latest
+```
+
+## Getting started
+
+After `yarn build` 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 the PrivateToken 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:
+
+```
+|— README.md
+|— package.json
+|— src
+       |-config.ts - PrivateToken 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
+              |— private_token_contract.json
+              |— private_token.ts
+       |— tests
+              | A simple end2end test deploying and testing the PrivateToken on a local sandbox
+              | using the front end helper methods in app/scripts/
+              | The test requires the sandbox and anvil to be running (yarn start:sandbox).
+              |- privatetoken.test.ts
+```
+
+Most relevant to you is likely `src/contracts/main.nr` (and the build config `src/contracts/Nargo.toml`). This contains the example PrivateToken logic that the frontend interacts with and is a good place to start writing Noir.
+
+The `src/artifacts` folder can be re-generated from the command line with `yarn compile` which is an alias for
+
+```bash
+aztec-cli compile src/contracts --outdir ../artifacts --typescript ../artifacts
+```
+
+This will generate a [Contract ABI](https://www.alchemy.com/overviews/what-is-an-abi-of-a-smart-contract-examples-and-usage) and TypeScript class for the Aztec smart contract in `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 PrivateTokenContractAbiJson from 'PrivateToken.json' assert { type: 'json' };
+// need to update the relative import to
+import PrivateTokenContractAbiJson from './PrivateToken.json' assert { type: 'json' };
+```
+
+After compiling, you can re-deploy the upated noir smart contract from the web UI. The function interaction forms are generated from parsing the ContractABI, 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.
+
+## Deploy on Aztec3
+
+Coming Soon :)

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

@@ -0,0 +1,96 @@
+{
+  "name": "private-token",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dest/index.js",
+  "scripts": {
+    "build": "yarn clean && webpack",
+    "install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v aztec",
+    "install:sandbox": "docker pull aztecprotocol/aztec-sandbox:latest",
+    "clean": "rm -rf ./dest .tsbuildinfo",
+    "start": "serve -p 3000 ./dest",
+    "start:dev": "webpack serve --mode=development",
+    "start:sandbox": "SANDBOX_VERSION=latest /bin/bash -c \"$(curl -fsSL 'https://sandbox.aztec.network')\" ",
+    "formatting": "prettier --check ./src && eslint ./src",
+    "formatting:fix": "prettier -w ./src",
+    "compile": "aztec-cli compile src/contracts --outdir ../artifacts --typescript ../artifacts",
+    "test": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand",
+    "test:integration": "concurrently -k -s first -c reset,dim -n test,anvil \"yarn test\" \"anvil\""
+  },
+  "jest": {
+    "preset": "ts-jest/presets/default-esm",
+    "globals": {
+      "ts-jest": {
+        "useESM": true
+      }
+    },
+    "transform": {
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
+    },
+    "testRegex": "./src/.*\\.test\\.ts$",
+    "rootDir": "./src"
+  },
+  "dependencies": {
+    "@aztec/aztec.js": "workspace:^",
+    "@aztec/circuits.js": "workspace:^",
+    "@aztec/cli": "workspace:^",
+    "@aztec/foundation": "workspace:^",
+    "formik": "^2.4.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "serve": "^14.2.1",
+    "tailwindcss": "^3.3.3",
+    "yup": "^1.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.5.9",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "autoprefixer": "^10.4.15",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.45.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "jest": "^29.6.4",
+    "postcss": "^8.4.29",
+    "postcss-loader": "^7.3.3",
+    "prettier": "^3.0.3",
+    "resolve-typescript-plugin": "^2.0.1",
+    "style-loader": "^3.3.3",
+    "ts-jest": "^29.1.0",
+    "ts-loader": "^9.4.4",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.4",
+    "util": "^0.12.5",
+    "webpack": "^5.88.2",
+    "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": [
+    "dest",
+    "src",
+    "!*.test.*"
+  ],
+  "types": "./dest/index.d.ts"
+}

yarn-project/boxes/private-token/postcss.config.cjs

@@ -0,0 +1,6 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: [tailwindcss('./tailwind.config.cjs'), autoprefixer],
+};

yarn-project/boxes/private-token/src/@types/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

yarn-project/boxes/private-token/src/app/components/banner.tsx

@@ -0,0 +1,43 @@
+interface Props {
+  background: string;
+  direction: string;
+  animated?: boolean;
+}
+
+/**
+ *
+ * @param background - background color, either "black" or "purple"
+ * @returns a moving banner repeating the word PRIVACY
+ */
+export function Banner({ background, direction, animated }: Props) {
+  // Determine direction
+  const start = !animated ? '' : direction === 'reverse' ? 'animate-marquee' : 'animate-marquee3';
+  const end = !animated ? '' : direction === 'reverse' ? 'animate-marquee2' : 'animate-marquee4';
+
+  // Apply relevant color styles
+  const containerStyles =
+    background === 'black'
+      ? `relative flex overflow-x-hidden bg-indigo-950 text-orange-100`
+      : `relative flex overflow-x-hidden bg-orange-100 text-indigo-950`;
+
+  return (
+    <div className={containerStyles}>
+      <div className={`py-2 whitespace-nowrap ${start}`}>
+        {/* Generate text elements */}
+        {Array.from({ length: 50 }, (_, index) => (
+          <span className="mx-4 text-2xl NBInter" key={index}>
+            PRIVACY
+          </span>
+        ))}
+      </div>
+      <div className={`absolute top-0 py-2 whitespace-nowrap ${end}`}>
+        {/* Generate text elements */}
+        {Array.from({ length: 50 }, (_, index) => (
+          <span className="mx-4 text-2xl NBInter" key={index}>
+            PRIVACY
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}