Skip to content

Commit 26ab88f

Browse files
dan-aztecLeilaWang
dan-aztec
and
LeilaWang
authored
feat: cli "unbox" command (#2029)
forking Leila's PR which has much nicer frontend, and copying over the sandbox interaction logic from my PR. currently has everything in a single folder inside `boxes/`, when we add another one i think we can refactor the web stuff out so that it's mostly just a `config.ts` and maybe some pinned artifacts like the ContractAbi that change with each box. there's a bit of hacking around changing paths and package version values inside the `unbox` command, which copies files directly from github (so the user doesnt need the full monorepo). since the command pulls from github directly, it's harder to test this - i've been working with a manual copy of `boxes/private-token` to mimic the copy functionality. the monorepo subpackage does build, but since the command has dependency on github, will need to test post commit to make sure everything works. <img width="1237" alt="image" src="https://github.com/AztecProtocol/aztec-packages/assets/142251406/460cf701-302b-4fc7-800c-7495870507d2"> # Checklist: Remove the checklist to signal you've completed it. Enable auto-merge if the PR is ready to merge. - [ ] I have reviewed my diff in github, line by line and removed unexpected formatting changes, testing logs, or commented-out code. - [x] Every change is related to the PR description. - [x] I have [linked](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue) this pull request to relevant issues (if any exist). --------- Co-authored-by: Leila Wang <leizciw@gmail.com>
1 parent 5e53345 commit 26ab88f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+5200
-76
lines changed

‎yarn-project/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,5 @@ To add a new package, make sure to add it to the `build_manifest.json`, to the `
3838
- `package.json`
3939
- `README.md`
4040
- `tsconfig.json`
41+
42+
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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"type": "module",
66
"exports": {
77
"node": "./dest/index.js",
8-
"default": "./dest/main.js",
9-
"import": "./dest/index.js"
8+
"import": "./dest/index.js",
9+
"default": "./dest/main.js"
1010
},
1111
"typedocOptions": {
1212
"entryPoints": [

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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
'plugin:import/recommended',
9+
'plugin:import/typescript',
10+
'prettier',
11+
],
12+
settings: {
13+
'import/resolver': {
14+
typescript: true,
15+
node: true,
16+
},
17+
},
18+
ignorePatterns: ['dist', '.eslintrc.cjs'],
19+
parser: '@typescript-eslint/parser',
20+
plugins: ['react-refresh'],
21+
overrides: [
22+
{
23+
files: ['*.ts', '*.tsx'],
24+
parserOptions: {
25+
// hacky workaround for CI not having the same tsconfig setup
26+
project: true,
27+
},
28+
},
29+
],
30+
rules: {
31+
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
32+
'@typescript-eslint/explicit-module-boundary-types': 'off',
33+
'@typescript-eslint/no-non-null-assertion': 'off',
34+
'@typescript-eslint/no-explicit-any': 'off',
35+
'@typescript-eslint/no-empty-function': 'off',
36+
'@typescript-eslint/await-thenable': 'error',
37+
'@typescript-eslint/no-floating-promises': 2,
38+
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
39+
'require-await': 2,
40+
'no-console': 'warn',
41+
'no-constant-condition': 'off',
42+
camelcase: 2,
43+
'no-restricted-imports': [
44+
'error',
45+
{
46+
patterns: [
47+
{
48+
group: ['client-dest'],
49+
message: "Fix this absolute garbage import. It's your duty to solve it before it spreads.",
50+
},
51+
{
52+
group: ['dest'],
53+
message: 'You should not be importing from a build directory. Did you accidentally do a relative import?',
54+
},
55+
],
56+
},
57+
],
58+
'import/no-unresolved': 'error',
59+
'import/no-extraneous-dependencies': 'error',
60+
},
61+
};

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all",
4+
"printWidth": 120,
5+
"arrowParens": "avoid"
6+
}

‎yarn-project/boxes/private-token/Dockerfile

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
FROM 278380418400.dkr.ecr.eu-west-2.amazonaws.com/yarn-project-base AS builder
2+
3+
COPY . .
4+
5+
WORKDIR /usr/src/yarn-project/boxes/private-token
6+
RUN yarn build && yarn formatting
7+
8+
# this feels wrong
9+
RUN yarn cache clean
10+
RUN yarn workspaces focus --production > /dev/null
11+
12+
FROM node:18-alpine
13+
COPY --from=builder /usr/src/yarn-project/boxes/private-token /usr/src/yarn-project/boxes/private-token
14+
WORKDIR /usr/src/yarn-project/boxes/private-token
15+
ENTRYPOINT ["yarn"]

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

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
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.
2+
3+
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.
4+
5+
## Setup
6+
7+
Dependencies can be installed from the root of the package:
8+
9+
```bash
10+
yarn
11+
yarn install:noir
12+
yarn install:sandbox
13+
yarn build
14+
```
15+
16+
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`.
17+
18+
The former are installed within `yarn install:noir` which executes
19+
20+
```bash
21+
curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
22+
23+
noirup -v aztec
24+
```
25+
26+
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
27+
28+
```bash
29+
docker pull aztecprotocol/aztec-sandbox:latest
30+
```
31+
32+
## Getting started
33+
34+
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.
35+
36+
At this point, [http://localhost:5173](http://localhost:5173) should provide a minimal smart contract frontend.
37+
38+
This folder should have the following directory structure:
39+
40+
```
41+
|— README.md
42+
|— package.json
43+
|— src
44+
|-config.ts - PrivateToken specific configuration for the frontend.
45+
| You may need to update this if you modify the contract functions.
46+
|— app
47+
|— [frontend React .tsx code files]
48+
|- scripts
49+
|- [helpers for frontend to interact with contract on the sandbox]
50+
|— contracts
51+
|— src
52+
| The Noir smart contract source files are here.
53+
|— main.nr - the cloned noir contract, your starting point
54+
|- interface.nr - autogenerated from main.nr when you compile
55+
|— Nargo.toml [Noir build file, includes Aztec smart contract dependencies]
56+
|— artifacts
57+
| These are both generated from `contracts/` by the compile command
58+
|— private_token_contract.json
59+
|— private_token.ts
60+
|— tests
61+
| A simple end2end test deploying and testing the PrivateToken on a local sandbox
62+
| using the front end helper methods in app/scripts/
63+
| The test requires the sandbox and anvil to be running (yarn start:sandbox).
64+
|- privatetoken.test.ts
65+
```
66+
67+
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.
68+
69+
The `src/artifacts` folder can be re-generated from the command line with `yarn compile` which is an alias for
70+
71+
```bash
72+
aztec-cli compile src/contracts --outdir ../artifacts --typescript ../artifacts
73+
```
74+
75+
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.
76+
77+
Note: the `compile` command seems to generate a Typescript file which needs a single change -
78+
79+
```
80+
import PrivateTokenContractAbiJson from 'PrivateToken.json' assert { type: 'json' };
81+
// need to update the relative import to
82+
import PrivateTokenContractAbiJson from './PrivateToken.json' assert { type: 'json' };
83+
```
84+
85+
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.
86+
87+
## Learn More
88+
89+
To learn more about Noir Smart Contract development, take a look at the following resources:
90+
91+
- [Awesome Noir](https://github.com/noir-lang/awesome-noir) - learn about the Noir programming language.
92+
93+
## Deploy on Aztec3
94+
95+
Coming Soon :)

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

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{
2+
"name": "private-token",
3+
"private": true,
4+
"version": "0.1.0",
5+
"type": "module",
6+
"main": "./dest/index.js",
7+
"scripts": {
8+
"build": "yarn clean && webpack",
9+
"install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v aztec",
10+
"install:sandbox": "docker pull aztecprotocol/aztec-sandbox:latest",
11+
"clean": "rm -rf ./dest .tsbuildinfo",
12+
"start": "serve -p 3000 ./dest",
13+
"start:dev": "webpack serve --mode=development",
14+
"start:sandbox": "SANDBOX_VERSION=latest /bin/bash -c \"$(curl -fsSL 'https://sandbox.aztec.network')\" ",
15+
"formatting": "prettier --check ./src && eslint ./src",
16+
"formatting:fix": "prettier -w ./src",
17+
"compile": "aztec-cli compile src/contracts --outdir ../artifacts --typescript ../artifacts",
18+
"test": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand",
19+
"test:integration": "concurrently -k -s first -c reset,dim -n test,anvil \"yarn test\" \"anvil\""
20+
},
21+
"jest": {
22+
"preset": "ts-jest/presets/default-esm",
23+
"globals": {
24+
"ts-jest": {
25+
"useESM": true
26+
}
27+
},
28+
"transform": {
29+
"^.+\\.(ts|tsx)$": "ts-jest"
30+
},
31+
"moduleNameMapper": {
32+
"^(\\.{1,2}/.*)\\.js$": "$1"
33+
},
34+
"testRegex": "./src/.*\\.test\\.ts$",
35+
"rootDir": "./src"
36+
},
37+
"dependencies": {
38+
"@aztec/aztec.js": "workspace:^",
39+
"@aztec/circuits.js": "workspace:^",
40+
"@aztec/cli": "workspace:^",
41+
"@aztec/foundation": "workspace:^",
42+
"formik": "^2.4.3",
43+
"react": "^18.2.0",
44+
"react-dom": "^18.2.0",
45+
"serve": "^14.2.1",
46+
"tailwindcss": "^3.3.3",
47+
"yup": "^1.2.0"
48+
},
49+
"devDependencies": {
50+
"@types/node": "^20.5.9",
51+
"@types/react": "^18.2.15",
52+
"@types/react-dom": "^18.2.7",
53+
"@typescript-eslint/eslint-plugin": "^6.0.0",
54+
"@typescript-eslint/parser": "^6.0.0",
55+
"autoprefixer": "^10.4.15",
56+
"copy-webpack-plugin": "^11.0.0",
57+
"css-loader": "^6.8.1",
58+
"eslint": "^8.45.0",
59+
"eslint-import-resolver-typescript": "^3.5.5",
60+
"eslint-plugin-import": "^2.27.5",
61+
"eslint-plugin-react-hooks": "^4.6.0",
62+
"eslint-plugin-react-refresh": "^0.4.3",
63+
"jest": "^29.6.4",
64+
"postcss": "^8.4.29",
65+
"postcss-loader": "^7.3.3",
66+
"prettier": "^3.0.3",
67+
"resolve-typescript-plugin": "^2.0.1",
68+
"style-loader": "^3.3.3",
69+
"ts-jest": "^29.1.0",
70+
"ts-loader": "^9.4.4",
71+
"ts-node": "^10.9.1",
72+
"typescript": "^5.0.4",
73+
"util": "^0.12.5",
74+
"webpack": "^5.88.2",
75+
"webpack-cli": "^5.1.4",
76+
"webpack-dev-server": "^4.15.1"
77+
},
78+
"browserslist": {
79+
"production": [
80+
">0.5%",
81+
"not dead",
82+
"not op_mini all"
83+
],
84+
"development": [
85+
"last 1 chrome version",
86+
"last 1 firefox version",
87+
"last 1 safari version"
88+
]
89+
},
90+
"files": [
91+
"dest",
92+
"src",
93+
"!*.test.*"
94+
],
95+
"types": "./dest/index.d.ts"
96+
}

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const tailwindcss = require('tailwindcss');
2+
const autoprefixer = require('autoprefixer');
3+
4+
module.exports = {
5+
plugins: [tailwindcss('./tailwind.config.cjs'), autoprefixer],
6+
};

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.svg' {
2+
const content: any;
3+
export default content;
4+
}

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
interface Props {
2+
background: string;
3+
direction: string;
4+
animated?: boolean;
5+
}
6+
7+
/**
8+
*
9+
* @param background - background color, either "black" or "purple"
10+
* @returns a moving banner repeating the word PRIVACY
11+
*/
12+
export function Banner({ background, direction, animated }: Props) {
13+
// Determine direction
14+
const start = !animated ? '' : direction === 'reverse' ? 'animate-marquee' : 'animate-marquee3';
15+
const end = !animated ? '' : direction === 'reverse' ? 'animate-marquee2' : 'animate-marquee4';
16+
17+
// Apply relevant color styles
18+
const containerStyles =
19+
background === 'black'
20+
? `relative flex overflow-x-hidden bg-indigo-950 text-orange-100`
21+
: `relative flex overflow-x-hidden bg-orange-100 text-indigo-950`;
22+
23+
return (
24+
<div className={containerStyles}>
25+
<div className={`py-2 whitespace-nowrap ${start}`}>
26+
{/* Generate text elements */}
27+
{Array.from({ length: 50 }, (_, index) => (
28+
<span className="mx-4 text-2xl NBInter" key={index}>
29+
PRIVACY
30+
</span>
31+
))}
32+
</div>
33+
<div className={`absolute top-0 py-2 whitespace-nowrap ${end}`}>
34+
{/* Generate text elements */}
35+
{Array.from({ length: 50 }, (_, index) => (
36+
<span className="mx-4 text-2xl NBInter" key={index}>
37+
PRIVACY
38+
</span>
39+
))}
40+
</div>
41+
</div>
42+
);
43+
}

0 commit comments

Comments
 (0)