From bf67347bf785a174aa5be407b168efc888fe006a Mon Sep 17 00:00:00 2001 From: Dan Lee Date: Mon, 21 Aug 2023 12:42:35 -0700 Subject: [PATCH] add aztec banner fix colorscheme fix banner aztec logo prettier working? add api endpoint switch to cjs file parse contract functions, but no working form delete unneeded text comments slightly cleaner form slightly better css fix: Remove automatic update to `AztecProtocol/dev-bb.js` (#1712) Related to #1711 Remove the checklist to signal you've completed it. Enable auto-merge if the PR is ready to merge. - [ ] If the pull request requires a cryptography review (e.g. cryptographic algorithm implementations) I have added the 'crypto' tag. - [ ] I have reviewed my diff in github, line by line and removed unexpected formatting changes, testing logs, or commented-out code. - [ ] Every change is related to the PR description. - [ ] 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). git subrepo push --branch=master circuits/cpp/barretenberg subrepo: subdir: "circuits/cpp/barretenberg" merged: "d883900f9" upstream: origin: "https://github.com/AztecProtocol/barretenberg" branch: "master" commit: "d883900f9" git-subrepo: version: "0.4.6" origin: "???" commit: "???" chore: sync bb master (#1713) Ran: ``` ./scripts/git_subrepo.sh pull circuits/cpp/barretenberg git checkout origin/master -- .gitmodules ``` Remove the checklist to signal you've completed it. Enable auto-merge if the PR is ready to merge. - [ ] If the pull request requires a cryptography review (e.g. cryptographic algorithm implementations) I have added the 'crypto' tag. - [ ] I have reviewed my diff in github, line by line and removed unexpected formatting changes, testing logs, or commented-out code. - [ ] Every change is related to the PR description. - [ ] 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). copy the contract ABI into the new subdirectory fix output json name --- .../.github/workflows/release-please.yml | 18 -- circuits/cpp/barretenberg/.gitrepo | 4 +- .../.release-please-manifest.json | 2 +- circuits/cpp/barretenberg/CHANGELOG.md | 7 + circuits/cpp/barretenberg/VERSION | 2 +- .../cpp/barretenberg/barretenberg-wasm.nix | 2 +- circuits/cpp/barretenberg/barretenberg.nix | 2 +- circuits/cpp/barretenberg/cpp/CMakeLists.txt | 2 +- circuits/cpp/barretenberg/ts/CHANGELOG.md | 7 + circuits/cpp/barretenberg/ts/package.json | 2 +- yarn-project/aztec-cli/src/unbox.ts | 111 ++++++------- yarn-project/aztec-cli/src/utils.ts | 50 +++--- yarn-project/starter-kit/.eslintrc.cjs | 1 + .../{next.config.js => next.config.cjs} | 0 yarn-project/starter-kit/package.json | 27 ++- .../{postcss.config.js => postcss.config.cjs} | 0 yarn-project/starter-kit/public/logo.svg | 8 + yarn-project/starter-kit/public/next.svg | 1 - yarn-project/starter-kit/src/app/banner.tsx | 32 ++++ .../starter-kit/src/app/contractForm.tsx | 70 ++++++++ yarn-project/starter-kit/src/app/layout.tsx | 11 +- yarn-project/starter-kit/src/app/page.tsx | 155 +++++++----------- .../starter-kit/src/pages/api/contractAbi.ts | 36 ++++ .../src/pages/api/deployContract.ts | 20 +++ .../starter-kit/src/pages/api/hello.ts | 8 + yarn-project/starter-kit/tailwind.config.ts | 24 +++ yarn-project/yarn.lock | 111 ++++++++++++- 27 files changed, 502 insertions(+), 211 deletions(-) create mode 100644 yarn-project/starter-kit/.eslintrc.cjs rename yarn-project/starter-kit/{next.config.js => next.config.cjs} (100%) rename yarn-project/starter-kit/{postcss.config.js => postcss.config.cjs} (100%) create mode 100644 yarn-project/starter-kit/public/logo.svg delete mode 100644 yarn-project/starter-kit/public/next.svg create mode 100644 yarn-project/starter-kit/src/app/banner.tsx create mode 100644 yarn-project/starter-kit/src/app/contractForm.tsx create mode 100644 yarn-project/starter-kit/src/pages/api/contractAbi.ts create mode 100644 yarn-project/starter-kit/src/pages/api/deployContract.ts create mode 100644 yarn-project/starter-kit/src/pages/api/hello.ts diff --git a/circuits/cpp/barretenberg/.github/workflows/release-please.yml b/circuits/cpp/barretenberg/.github/workflows/release-please.yml index bdee1e1ccc1..d515310d4cb 100644 --- a/circuits/cpp/barretenberg/.github/workflows/release-please.yml +++ b/circuits/cpp/barretenberg/.github/workflows/release-please.yml @@ -73,24 +73,6 @@ jobs: cd ts yarn install && yarn && yarn build - - name: Checkout destination repository - uses: actions/checkout@v3 - with: - repository: AztecProtocol/dev-bb.js - path: ./dev-bb.js - token: ${{ secrets.AZTEC_BOT_GITHUB_TOKEN }} - - - name: Push to destination repository - run: | - cd ./dev-bb.js - cp -R ../ts/dest/* . - git config --global user.name AztecBot - git config --global user.email tech@aztecprotocol.com - git checkout -b dev || git checkout dev - git add . - git commit -m "Tracking changes" - git push origin dev - - name: Tar and GZip barretenberg.wasm run: tar -cvzf barretenberg.wasm.tar.gz cpp/build-wasm/bin/barretenberg.wasm diff --git a/circuits/cpp/barretenberg/.gitrepo b/circuits/cpp/barretenberg/.gitrepo index b11f3830901..cfb4e7d738e 100644 --- a/circuits/cpp/barretenberg/.gitrepo +++ b/circuits/cpp/barretenberg/.gitrepo @@ -6,7 +6,7 @@ [subrepo] remote = https://github.com/AztecProtocol/barretenberg branch = master - commit = a7331d4b8e1f8e0ee2564dbca1ef1d0d35a67d6f - parent = 6ea24b149cd53edc2c565932ce58fab6707f25f3 + commit = 9b6fc607d7c7de57033d10fd8a3e1c424e400a5b + parent = 0039c4fdf7c713d9f375d6abda15353325e38d56 method = merge cmdver = 0.4.6 diff --git a/circuits/cpp/barretenberg/.release-please-manifest.json b/circuits/cpp/barretenberg/.release-please-manifest.json index 85205fce9fb..b1b85db09cd 100644 --- a/circuits/cpp/barretenberg/.release-please-manifest.json +++ b/circuits/cpp/barretenberg/.release-please-manifest.json @@ -1 +1 @@ -{".":"0.4.1","ts":"0.4.1"} \ No newline at end of file +{".":"0.4.2","ts":"0.4.2"} \ No newline at end of file diff --git a/circuits/cpp/barretenberg/CHANGELOG.md b/circuits/cpp/barretenberg/CHANGELOG.md index 29487f63606..16aef118aac 100644 --- a/circuits/cpp/barretenberg/CHANGELOG.md +++ b/circuits/cpp/barretenberg/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## [0.4.2](https://github.com/AztecProtocol/barretenberg/compare/barretenberg-v0.4.1...barretenberg-v0.4.2) (2023-08-21) + + +### Bug Fixes + +* Remove automatic update to `AztecProtocol/dev-bb.js` ([#1712](https://github.com/AztecProtocol/barretenberg/issues/1712)) ([d883900](https://github.com/AztecProtocol/barretenberg/commit/d883900f9b297f659d14583ac93eede5160f9aae)) + ## [0.4.1](https://github.com/AztecProtocol/barretenberg/compare/barretenberg-v0.4.0...barretenberg-v0.4.1) (2023-08-21) diff --git a/circuits/cpp/barretenberg/VERSION b/circuits/cpp/barretenberg/VERSION index 48fe1d823b0..04449497853 100644 --- a/circuits/cpp/barretenberg/VERSION +++ b/circuits/cpp/barretenberg/VERSION @@ -1 +1 @@ -v0.4.1 x-release-please-version +v0.4.2 x-release-please-version diff --git a/circuits/cpp/barretenberg/barretenberg-wasm.nix b/circuits/cpp/barretenberg/barretenberg-wasm.nix index 0eac4664821..933569143b1 100644 --- a/circuits/cpp/barretenberg/barretenberg-wasm.nix +++ b/circuits/cpp/barretenberg/barretenberg-wasm.nix @@ -6,7 +6,7 @@ in stdenv.mkDerivation { pname = "barretenberg.wasm"; - version = "0.4.1"; # x-release-please-version + version = "0.4.2"; # x-release-please-version src = ./cpp; diff --git a/circuits/cpp/barretenberg/barretenberg.nix b/circuits/cpp/barretenberg/barretenberg.nix index ad575b82934..be832ca6116 100644 --- a/circuits/cpp/barretenberg/barretenberg.nix +++ b/circuits/cpp/barretenberg/barretenberg.nix @@ -14,7 +14,7 @@ in buildEnv.mkDerivation { pname = "libbarretenberg"; - version = "0.4.1"; # x-release-please-version + version = "0.4.2"; # x-release-please-version src = ./cpp; diff --git a/circuits/cpp/barretenberg/cpp/CMakeLists.txt b/circuits/cpp/barretenberg/cpp/CMakeLists.txt index ccf328663e6..9106212f0dd 100644 --- a/circuits/cpp/barretenberg/cpp/CMakeLists.txt +++ b/circuits/cpp/barretenberg/cpp/CMakeLists.txt @@ -6,7 +6,7 @@ cmake_minimum_required(VERSION 3.24) project( Barretenberg DESCRIPTION "BN254 elliptic curve library, and PLONK SNARK prover" - VERSION 0.4.1 # x-release-please-version + VERSION 0.4.2 # x-release-please-version LANGUAGES CXX C ) diff --git a/circuits/cpp/barretenberg/ts/CHANGELOG.md b/circuits/cpp/barretenberg/ts/CHANGELOG.md index fb70d30b749..58967dd0cb8 100644 --- a/circuits/cpp/barretenberg/ts/CHANGELOG.md +++ b/circuits/cpp/barretenberg/ts/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## [0.4.2](https://github.com/AztecProtocol/barretenberg/compare/barretenberg.js-v0.4.1...barretenberg.js-v0.4.2) (2023-08-21) + + +### Miscellaneous Chores + +* **barretenberg.js:** Synchronize barretenberg versions + ## [0.4.1](https://github.com/AztecProtocol/barretenberg/compare/barretenberg.js-v0.4.0...barretenberg.js-v0.4.1) (2023-08-21) diff --git a/circuits/cpp/barretenberg/ts/package.json b/circuits/cpp/barretenberg/ts/package.json index 1f37d5fdd79..8518682c056 100644 --- a/circuits/cpp/barretenberg/ts/package.json +++ b/circuits/cpp/barretenberg/ts/package.json @@ -1,6 +1,6 @@ { "name": "@aztec/bb.js", - "version": "0.4.1", + "version": "0.4.2", "homepage": "https://github.com/AztecProtocol/aztec-packages/tree/master/circuits/cpp/barretenberg/ts", "license": "MIT", "type": "module", diff --git a/yarn-project/aztec-cli/src/unbox.ts b/yarn-project/aztec-cli/src/unbox.ts index 24ae2c421b5..c6bf9c527fb 100644 --- a/yarn-project/aztec-cli/src/unbox.ts +++ b/yarn-project/aztec-cli/src/unbox.ts @@ -1,91 +1,92 @@ // heavily inspired by https://github.com/trufflesuite/truffle/blob/develop/packages/box/lib/utils/unbox.ts -import fetch from 'node-fetch'; -import JSZip from 'jszip'; import { promises as fs } from 'fs'; +import JSZip from 'jszip'; +import fetch from 'node-fetch'; const GITHUB_OWNER = 'AztecProtocol'; const GITHUB_REPO = 'aztec-packages'; -const NOIR_CONTRACTS_PATH = 'yarn-project/noir-contracts/src/contracts' -const STARTER_KIT_PATH = 'yarn-project/starter-kit' +const NOIR_CONTRACTS_PATH = 'yarn-project/noir-contracts/src/contracts'; +const STARTER_KIT_PATH = 'yarn-project/starter-kit'; /** * Converts a contract name in "upper camel case" to a folder name in snake case. * @param contractName - The contract name. * @returns The folder name. * */ -function contractNameToFolder(contractName: string): string { - - return contractName - .replace(/[\w]([A-Z])/g, (m) => m[0] + "_" + m[1]) - .toLowerCase(); +export function contractNameToFolder(contractName: string): string { + return contractName.replace(/[\w]([A-Z])/g, m => m[0] + '_' + m[1]).toLowerCase(); } /** - * + * * @param contractName - The contract name, in upper camel case. * @param outputPath - The output path, by default this is the current working directory * @returns The path to the downloaded contract. */ export async function downloadContractFromGithub( - contractName: string='PrivateToken', - outputPath: string + contractName: string = 'PrivateToken', + outputPath: string, ): Promise { - // small string conversion, in the ABI the contract name looks like PrivateToken - // but in the repostory it looks like private_token - const contractFolder = `${NOIR_CONTRACTS_PATH}/${contractNameToFolder(contractName)}_contract`; - await _downloadNoirFilesFromGithub(contractFolder, outputPath); -} + // small string conversion, in the ABI the contract name looks like PrivateToken + // but in the repostory it looks like private_token + const contractFolder = `${NOIR_CONTRACTS_PATH}/${contractNameToFolder(contractName)}_contract`; + await _downloadNoirFilesFromGithub(contractFolder, outputPath); +} /** * Not flexible at at all, but quick fix to download a noir smart contract from our * monorepo on github. this will copy over the `yarn-projects/starter-kit` folder in its entirey - * as well as the specfieid directoryPath, which should point to a single noir contract in + * as well as the specfieid directoryPath, which should point to a single noir contract in * `yarn-projects/noir-contracts/src/contracts/...` * @param directoryPath - path to the directory in the github repo * @param outputPath - local path that we will copy the noir contracts and web3 starter kit to - * @returns + * @returns */ async function _downloadNoirFilesFromGithub( - directoryPath: string, - outputPath: string, - outputPrefix: string = 'starter-kit' + directoryPath: string, + outputPath: string, + outputPrefix: string = 'starter-kit', ): Promise { - const owner = GITHUB_OWNER; - const repo = GITHUB_REPO; - // Step 1: Fetch the ZIP from GitHub, hardcoded to the master branch - const url = `https://github.com/${owner}/${repo}/archive/refs/heads/master.zip`; - const response = await fetch(url); - const buffer = await response.arrayBuffer(); + const owner = GITHUB_OWNER; + const repo = GITHUB_REPO; + // Step 1: Fetch the ZIP from GitHub, hardcoded to the master branch + const url = `https://github.com/${owner}/${repo}/archive/refs/heads/master.zip`; + const response = await fetch(url); + const buffer = await response.arrayBuffer(); + + // Step 2: Use JSZip to read the ZIP contents + const zip = new JSZip(); + const data = await zip.loadAsync(buffer); - // Step 2: Use JSZip to read the ZIP contents - const zip = new JSZip(); - const data = await zip.loadAsync(buffer); + // Step 3: Extract the specific directory from the ZIP + const repoDirectoryPrefix = `${repo}-master/`; + const fullDirectoryPath = `${repoDirectoryPrefix}${directoryPath}/`; + const starterKitPath = `${repoDirectoryPrefix}${STARTER_KIT_PATH}/`; - // Step 3: Extract the specific directory from the ZIP - const repoDirectoryPrefix = `${repo}-master/`; - const fullDirectoryPath = `${repoDirectoryPrefix}${directoryPath}/`; - const starterKitPath = `${repoDirectoryPrefix}${STARTER_KIT_PATH}/`; + const contractFiles = Object.values(data.files).filter(file => { + return file.dir && (file.name.startsWith(fullDirectoryPath) || file.name.startsWith(starterKitPath)); + }); - const contractFiles = Object.values(data.files).filter(file => { - return file.dir && (file.name.startsWith(fullDirectoryPath) || file.name.startsWith(starterKitPath)); - }); - - for (const file of contractFiles) { - // note that we strip out the entire "directoryPath"! - const relativePath = file.name.replace(fullDirectoryPath, `${outputPrefix}/noir-contracts/`).replace(starterKitPath, `${outputPrefix}/`); - const targetPath = `${outputPath}/${relativePath}`; - await fs.mkdir(targetPath, { recursive: true }); - } + for (const file of contractFiles) { + // note that we strip out the entire "directoryPath"! + const relativePath = file.name + .replace(fullDirectoryPath, `${outputPrefix}/noir-contracts/`) + .replace(starterKitPath, `${outputPrefix}/`); + const targetPath = `${outputPath}/${relativePath}`; + await fs.mkdir(targetPath, { recursive: true }); + } - const directoryFiles = Object.values(data.files).filter(file => { - return !file.dir && (file.name.startsWith(fullDirectoryPath) || file.name.startsWith(starterKitPath)); - }); + const directoryFiles = Object.values(data.files).filter(file => { + return !file.dir && (file.name.startsWith(fullDirectoryPath) || file.name.startsWith(starterKitPath)); + }); - for (const file of directoryFiles) { - const relativePath = file.name.replace(fullDirectoryPath, `${outputPrefix}/noir-contracts/`).replace(starterKitPath, `${outputPrefix}/`); - const targetPath = `${outputPath}/${relativePath}`; - const content = await file.async("nodebuffer"); - await fs.writeFile(targetPath, content); - } - return Promise.resolve(`${outputPath}/${outputPrefix}`); + for (const file of directoryFiles) { + const relativePath = file.name + .replace(fullDirectoryPath, `${outputPrefix}/noir-contracts/`) + .replace(starterKitPath, `${outputPrefix}/`); + const targetPath = `${outputPath}/${relativePath}`; + const content = await file.async('nodebuffer'); + await fs.writeFile(targetPath, content); + } + return Promise.resolve(`${outputPath}/${outputPrefix}`); } diff --git a/yarn-project/aztec-cli/src/utils.ts b/yarn-project/aztec-cli/src/utils.ts index 0754d5065a6..6384e221b22 100644 --- a/yarn-project/aztec-cli/src/utils.ts +++ b/yarn-project/aztec-cli/src/utils.ts @@ -3,12 +3,13 @@ import { createEthereumChain, deployL1Contracts } from '@aztec/ethereum'; import { ContractAbi } from '@aztec/foundation/abi'; import { DebugLogger, LogFn } from '@aztec/foundation/log'; +import { assert } from 'console'; import fs from 'fs'; +import * as path from 'path'; import { mnemonicToAccount, privateKeyToAccount } from 'viem/accounts'; import { encodeArgs } from './encoding.js'; -import { assert } from 'console'; -import { downloadContractFromGithub } from './unbox.js'; +import { contractNameToFolder, downloadContractFromGithub } from './unbox.js'; /** * Helper type to dynamically import contracts. @@ -153,27 +154,32 @@ export async function prepTx( * TODO: 4. Frontend parses the contract ABI and generates a UI to interact with the contract. * @param contractName - name of contract from `@aztec/noir-contracts` */ -export async function unboxContract( - contractName: string, - log: LogFn, -) { - const contracts = await import('@aztec/noir-contracts/artifacts'); +export async function unboxContract(contractName: string, log: LogFn) { + const contracts = await import('@aztec/noir-contracts/artifacts'); //console.log(contracts); - const contractNames = Object.values(contracts).map((contract) => contract.name); + const contractNames = Object.values(contracts).map(contract => contract.name); // console.log(contractNames); - assert(contractNames.includes(contractName), - `Contract ${contractName} not found in @aztec/noir-contracts: ${contractNames} - We recommend "PrivateToken" as a default.`); - - // download the noir source code into `starter-kit`, along with the starter-kit subpackage. - // TODO: add the jest tests - await downloadContractFromGithub(contractName, process.cwd()); - log(`Downloaded ${contractName} from @aztec/noir-contracts. to ${process.cwd()}/starter-kit`); - return; - - const chosenContractAbi = Object.values(contracts).filter((contract) => contract.name === contractName)[0]; - console.log(chosenContractAbi); - + assert( + contractNames.includes(contractName), + `Contract ${contractName} not found in @aztec/noir-contracts: ${contractNames} + We recommend "PrivateToken" as a default.`, + ); + + // downloads the selected contract's noir source code into `starter-kit`, along with the @aztec/starter-kit subpackage. + // TODO: add the jest tests + await downloadContractFromGithub(contractName, process.cwd()); + log(`Downloaded ${contractName} from @aztec/noir-contracts. to ${process.cwd()}/starter-kit`); + + const chosenContractAbi = Object.values(contracts).filter(contract => contract.name === contractName)[0]; + const outputPath = path.join( + process.cwd(), + 'starter-kit', + 'noir-contracts', + `${contractNameToFolder(contractName)}_contract.json`, + ); + // TODO: confirm naming convention will match what will be compiled when the contract is recompiled + fs.writeFileSync(outputPath, JSON.stringify(chosenContractAbi, null, 4)); + log(`copied contract ABI to ${outputPath}`); return; -} \ No newline at end of file +} diff --git a/yarn-project/starter-kit/.eslintrc.cjs b/yarn-project/starter-kit/.eslintrc.cjs new file mode 100644 index 00000000000..e659927475c --- /dev/null +++ b/yarn-project/starter-kit/.eslintrc.cjs @@ -0,0 +1 @@ +module.exports = require('@aztec/foundation/eslint'); diff --git a/yarn-project/starter-kit/next.config.js b/yarn-project/starter-kit/next.config.cjs similarity index 100% rename from yarn-project/starter-kit/next.config.js rename to yarn-project/starter-kit/next.config.cjs diff --git a/yarn-project/starter-kit/package.json b/yarn-project/starter-kit/package.json index 4dbc8c2a126..2d696468c98 100644 --- a/yarn-project/starter-kit/package.json +++ b/yarn-project/starter-kit/package.json @@ -1,25 +1,46 @@ { "name": "starter-kit", "version": "0.1.0", - "private": true, + "packageManager": "yarn@3.4.1", + "type": "module", + "exports": { + "./prettier": "./.prettierrc.json" + }, "scripts": { "dev": "next dev", "build": "next build", + "build:dev": "tsc -b --watch", "start": "next start", - "lint": "next lint" + "clean": "rm -rf ./dest .tsbuildinfo", + "prepare": "node ../yarn-project-base/scripts/update_build_manifest.mjs package.json", + "prepare:check": "node ../yarn-project-base/scripts/update_build_manifest.mjs package.json --check", + "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write", + "formatting": "run -T prettier --check ./src && run -T eslint ./src", + "formatting:fix": "run -T prettier -w ./src" }, + "inherits": [ + "../package.common.json", + "./package.local.json" + ], "dependencies": { + "@aztec/aztec.js": "0.1.0", + "@aztec/foundation": "0.1.0", "@types/node": "20.5.1", "@types/react": "18.2.20", "@types/react-dom": "18.2.7", "autoprefixer": "10.4.15", "eslint": "8.47.0", "eslint-config-next": "13.4.19", + "formik": "^2.4.3", "next": "13.4.19", "postcss": "8.4.28", "react": "18.2.0", "react-dom": "18.2.0", "tailwindcss": "3.3.3", - "typescript": "5.1.6" + "typescript": "5.1.6", + "yup": "^1.2.0" + }, + "engines": { + "node": ">=18" } } diff --git a/yarn-project/starter-kit/postcss.config.js b/yarn-project/starter-kit/postcss.config.cjs similarity index 100% rename from yarn-project/starter-kit/postcss.config.js rename to yarn-project/starter-kit/postcss.config.cjs diff --git a/yarn-project/starter-kit/public/logo.svg b/yarn-project/starter-kit/public/logo.svg new file mode 100644 index 00000000000..64a3648326d --- /dev/null +++ b/yarn-project/starter-kit/public/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/yarn-project/starter-kit/public/next.svg b/yarn-project/starter-kit/public/next.svg deleted file mode 100644 index 5174b28c565..00000000000 --- a/yarn-project/starter-kit/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/yarn-project/starter-kit/src/app/banner.tsx b/yarn-project/starter-kit/src/app/banner.tsx new file mode 100644 index 00000000000..d5bd0438c2b --- /dev/null +++ b/yarn-project/starter-kit/src/app/banner.tsx @@ -0,0 +1,32 @@ +/** + * + * @param background - background color, either "black" or "purple" + * @returns a moving banner repeating the word PRIVACY + */ +export default function Banner({ + background, direction +}: { + background: string; + direction: string; +}) { + // Determine direction + const start = direction === "reverse" ? "animate-marquee" : "animate-marquee3" + const end = direction === "reverse" ? "animate-marquee2" : "animate-marquee4" + + // Apply relevant color styles + let 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 ( +
+
+ {/* Generate text elements */} + {Array.from({ length: 50 }, (_, index) => PRIVACY)} +
+
+ {/* Generate text elements */} + {Array.from({ length: 50 }, (_, index) => PRIVACY)} +
+
+ + ) +} \ No newline at end of file diff --git a/yarn-project/starter-kit/src/app/contractForm.tsx b/yarn-project/starter-kit/src/app/contractForm.tsx new file mode 100644 index 00000000000..29952ce6618 --- /dev/null +++ b/yarn-project/starter-kit/src/app/contractForm.tsx @@ -0,0 +1,70 @@ +import { ContractAbi } from "@aztec/foundation/abi"; +import { useFormik } from 'formik'; +import * as Yup from 'yup'; + + +/** + * Not working... + * @param contractAbi - contract ABI JSON, parsed as a ContractAbi object + * @returns a formik form for interacting with the contract + */ +export default function DynamicContractForm({ contractAbi }: { contractAbi: ContractAbi }) { + return ( +
+

{contractAbi.name + ' Noir Smart Contract'}

+ {contractAbi.functions.map(func => { + // Create validation schema for this function + const validationSchema = Yup.object().shape( + func.parameters.reduce((acc, input) => { + acc[input.name] = Yup.string().required('Required').nonNullable(); + return acc; + }, {}) + ); + + const initialValues = func.parameters.reduce((acc, input) => { + acc[input.name] = '111'; + return acc; + }, {}); + + const formik = useFormik({ + initialValues: initialValues, + validationSchema: validationSchema, + onSubmit: values => { + console.log(`Function ${func.name} called with:`, values); + }, + }); + + return ( +
+

{func.name}

+
+
+ {func.parameters.map(input => ( +
+ +
+ +
+ {formik.touched[input.name] && formik.errors[input.name] && ( +
{formik.errors[input.name]}
+ )} +
+ ))} + +
+
+
+ ); + })} +
+ ); +} \ No newline at end of file diff --git a/yarn-project/starter-kit/src/app/layout.tsx b/yarn-project/starter-kit/src/app/layout.tsx index ae845621236..b0cda0dd43b 100644 --- a/yarn-project/starter-kit/src/app/layout.tsx +++ b/yarn-project/starter-kit/src/app/layout.tsx @@ -1,14 +1,19 @@ -import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' +import './globals.css' const inter = Inter({ subsets: ['latin'] }) + export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', + title: 'Noir Smart Contract Starter Kit', + description: 'Generated by @aztec/aztec-cli unbox {smart contract name}', } +/** + * @param children - page contents + * @returns site layout + */ export default function RootLayout({ children, }: { diff --git a/yarn-project/starter-kit/src/app/page.tsx b/yarn-project/starter-kit/src/app/page.tsx index e38c626e160..67de3e21dec 100644 --- a/yarn-project/starter-kit/src/app/page.tsx +++ b/yarn-project/starter-kit/src/app/page.tsx @@ -1,113 +1,72 @@ -import Image from 'next/image' +"use client"; + +import { ContractAbi } from '@aztec/foundation/abi'; +import { useEffect, useState } from 'react'; + +import Image from 'next/image'; +import Banner from './banner'; +import DynamicContractForm from './contractForm'; +// TODO: make this read a noir contract ABI and generate a simple frontend based on that input + + +type HomePageProps = { + jsonData: ContractAbi[]; // Again, consider using a more specific type than `any` if you know the structure of your JSON data +}; + +export default function Home({ ContractAbiData}: {ContractAbiData: HomePageProps}) { + const [abi, setAbi] = useState(null); + + + useEffect(() => { + // Fetch the ABI data from the API route + async function fetchAbi() { + try { + const response = await fetch('/api/contractAbi'); + const data = await response.json(); + setAbi(data); + } catch (error) { + console.error("Failed to fetch ABI:", error); + } + } + fetchAbi(); + }, []); + -export default function Home() { return ( -
+ +
+
+ + +
+
-

- Get started by editing  - src/app/page.tsx -

+
- Next.js Logo -
- +
+ {abi ? : ''} +
+ + + +
+ + +
+ ) } diff --git a/yarn-project/starter-kit/src/pages/api/contractAbi.ts b/yarn-project/starter-kit/src/pages/api/contractAbi.ts new file mode 100644 index 00000000000..2c938bdb07b --- /dev/null +++ b/yarn-project/starter-kit/src/pages/api/contractAbi.ts @@ -0,0 +1,36 @@ +import { ContractAbi } from '@aztec/foundation/abi'; + +import fs from 'fs'; +import path from 'path'; + +const dataDirectory = path.join(process.cwd(), 'noir-contracts'); + +/** + * Reads all JSON files in the `noir-contracts` subdirectory and returns them as an array. + * There should only be one - TODO: make this more robust. + * @returns An array of JSON data. + */ +function getAllJsonData(): ContractAbi[] { + // Consider using a more specific type than `any` if you know the structure of your JSON data + const fileNames = fs.readdirSync(dataDirectory); + + const allData = fileNames + .filter(fileName => /\.json$/.test(fileName)) + .map(fileName => { + const fullPath = path.join(dataDirectory, fileName); + const fileContents = fs.readFileSync(fullPath, 'utf8'); + + return JSON.parse(fileContents); + }); + + return allData; +} + +/** + * Simple api route that returns all ABI JSON found in the noir-contracts/ subdirectory. + * @param req - the request object + * @param res - the response object + */ +export default function handler(req, res) { + res.status(200).json(getAllJsonData()); +} diff --git a/yarn-project/starter-kit/src/pages/api/deployContract.ts b/yarn-project/starter-kit/src/pages/api/deployContract.ts new file mode 100644 index 00000000000..fcdfcc7f3e8 --- /dev/null +++ b/yarn-project/starter-kit/src/pages/api/deployContract.ts @@ -0,0 +1,20 @@ +import { ContractDeployer } from '@aztec/aztec.js'; + +/** + * NOT WORKING/TESTED YET - need sandbox, anvil, etc up and running + * as well as proper use of aztec.js + * Deploys a contract to the RPC server. + * @param req + * @param res + */ +export async function POST(req, res) { + const { contractAbi, constructorArgs, aztecRpcServer } = req.body; + const deployer = new ContractDeployer(contractAbi, aztecRpcServer); + const tx = deployer.deploy(constructorArgs[0], constructorArgs[1]).send(); + await tx.isMined(); + console.log('Contract deployed!'); + + const receipt = await tx.getReceipt(); + console.log(`Contract address: ${receipt.contractAddress}`); + res.status(200).json({ contractAddress: receipt.contractAddress }); +} diff --git a/yarn-project/starter-kit/src/pages/api/hello.ts b/yarn-project/starter-kit/src/pages/api/hello.ts new file mode 100644 index 00000000000..3b0484919ee --- /dev/null +++ b/yarn-project/starter-kit/src/pages/api/hello.ts @@ -0,0 +1,8 @@ +/** + * this is me learning next.js - delete this api route before committing + * @param req + * @param res + */ +export default function handler(req, res) { + res.status(200).json({ text: 'Hello' }); +} diff --git a/yarn-project/starter-kit/tailwind.config.ts b/yarn-project/starter-kit/tailwind.config.ts index 1af3b8f0193..7de85552c37 100644 --- a/yarn-project/starter-kit/tailwind.config.ts +++ b/yarn-project/starter-kit/tailwind.config.ts @@ -8,6 +8,30 @@ const config: Config = { ], theme: { extend: { + animation: { + marquee: 'marquee 120s linear infinite', + marquee2: 'marquee2 120s linear infinite', + marquee3: 'marquee3 120s linear infinite', + marquee4: 'marquee4 120s linear infinite' + }, + keyframes: { + marquee: { + '0%': { transform: 'translateX(0%)' }, + '100%': { transform: 'translateX(-100%)' }, + }, + marquee2: { + '0%': { transform: 'translateX(100%)' }, + '100%': { transform: 'translateX(0%)' }, + }, + marquee3: { + '0%': { transform: 'translateX(-100%)' }, + '100%': { transform: 'translateX(0%)' }, + }, + marquee4: { + '0%': { transform: 'translateX(0%)' }, + '100%': { transform: 'translateX(100%)' }, + }, + }, backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 'gradient-conic': diff --git a/yarn-project/yarn.lock b/yarn-project/yarn.lock index 30b393c0e83..0655a676c9b 100644 --- a/yarn-project/yarn.lock +++ b/yarn-project/yarn.lock @@ -217,7 +217,7 @@ __metadata: languageName: unknown linkType: soft -"@aztec/aztec.js@workspace:^, @aztec/aztec.js@workspace:aztec.js": +"@aztec/aztec.js@0.1.0, @aztec/aztec.js@workspace:^, @aztec/aztec.js@workspace:aztec.js": version: 0.0.0-use.local resolution: "@aztec/aztec.js@workspace:aztec.js" dependencies: @@ -426,7 +426,7 @@ __metadata: languageName: unknown linkType: soft -"@aztec/foundation@workspace:^, @aztec/foundation@workspace:foundation": +"@aztec/foundation@0.1.0, @aztec/foundation@workspace:^, @aztec/foundation@workspace:foundation": version: 0.0.0-use.local resolution: "@aztec/foundation@workspace:foundation" dependencies: @@ -5766,6 +5766,13 @@ __metadata: languageName: node linkType: hard +"deepmerge@npm:^2.1.1": + version: 2.2.1 + resolution: "deepmerge@npm:2.2.1" + checksum: 284b71065079e66096229f735a9a0222463c9ca9ee9dda7d5e9a0545bf254906dbc7377e3499ca3b2212073672b1a430d80587993b43b87d8de17edc6af649a8 + languageName: node + linkType: hard + "deepmerge@npm:^4.2.2": version: 4.3.1 resolution: "deepmerge@npm:4.3.1" @@ -7145,6 +7152,23 @@ __metadata: languageName: node linkType: hard +"formik@npm:^2.4.3": + version: 2.4.3 + resolution: "formik@npm:2.4.3" + dependencies: + deepmerge: ^2.1.1 + hoist-non-react-statics: ^3.3.0 + lodash: ^4.17.21 + lodash-es: ^4.17.21 + react-fast-compare: ^2.0.1 + tiny-warning: ^1.0.2 + tslib: ^2.0.0 + peerDependencies: + react: ">=16.8.0" + checksum: d98dabfce97beb5cf2ff10bdaff61e0cb9e1d29090cfcad706efc793d06674cfe65299d432d32518a2756a58b6b6bfe85ceec8b47b4f5f9dcc375bcd7a37107a + languageName: node + linkType: hard + "fraction.js@npm:^4.2.0": version: 4.2.1 resolution: "fraction.js@npm:4.2.1" @@ -7668,6 +7692,15 @@ __metadata: languageName: node linkType: hard +"hoist-non-react-statics@npm:^3.3.0": + version: 3.3.2 + resolution: "hoist-non-react-statics@npm:3.3.2" + dependencies: + react-is: ^16.7.0 + checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8 + languageName: node + linkType: hard + "hosted-git-info@npm:^2.1.4": version: 2.8.9 resolution: "hosted-git-info@npm:2.8.9" @@ -9630,6 +9663,13 @@ __metadata: languageName: node linkType: hard +"lodash-es@npm:^4.17.21": + version: 4.17.21 + resolution: "lodash-es@npm:4.17.21" + checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2 + languageName: node + linkType: hard + "lodash.camelcase@npm:^4.3.0": version: 4.3.0 resolution: "lodash.camelcase@npm:4.3.0" @@ -11252,6 +11292,13 @@ __metadata: languageName: node linkType: hard +"property-expr@npm:^2.0.5": + version: 2.0.5 + resolution: "property-expr@npm:2.0.5" + checksum: 4ebe82ce45aaf1527e96e2ab84d75d25217167ec3ff6378cf83a84fb4abc746e7c65768a79d275881602ae82f168f9a6dfaa7f5e331d0fcc83d692770bcce5f1 + languageName: node + linkType: hard + "protobufjs@npm:^7.0.0": version: 7.2.4 resolution: "protobufjs@npm:7.2.4" @@ -11466,7 +11513,14 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^16.13.1": +"react-fast-compare@npm:^2.0.1": + version: 2.0.4 + resolution: "react-fast-compare@npm:2.0.4" + checksum: 06046595f90a4e3e3a56f40a8078c00aa71bdb064ddb98343f577f546aa22e888831fd45f009c93b34707cc842b4c637737e956fd13d6f80607ee92fb9cf9a1c + languageName: node + linkType: hard + +"react-is@npm:^16.13.1, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f @@ -12318,18 +12372,22 @@ __metadata: version: 0.0.0-use.local resolution: "starter-kit@workspace:starter-kit" dependencies: + "@aztec/aztec.js": 0.1.0 + "@aztec/foundation": 0.1.0 "@types/node": 20.5.1 "@types/react": 18.2.20 "@types/react-dom": 18.2.7 autoprefixer: 10.4.15 eslint: 8.47.0 eslint-config-next: 13.4.19 + formik: ^2.4.3 next: 13.4.19 postcss: 8.4.28 react: 18.2.0 react-dom: 18.2.0 tailwindcss: 3.3.3 typescript: 5.1.6 + yup: ^1.2.0 languageName: unknown linkType: soft @@ -12821,6 +12879,20 @@ __metadata: languageName: node linkType: hard +"tiny-case@npm:^1.0.3": + version: 1.0.3 + resolution: "tiny-case@npm:1.0.3" + checksum: 3f7a30c39d5b0e1bc097b0b271bec14eb5b836093db034f35a0de26c14422380b50dc12bfd37498cf35b192f5df06f28a710712c87ead68872a9e37ad6f6049d + languageName: node + linkType: hard + +"tiny-warning@npm:^1.0.2": + version: 1.0.3 + resolution: "tiny-warning@npm:1.0.3" + checksum: da62c4acac565902f0624b123eed6dd3509bc9a8d30c06e017104bedcf5d35810da8ff72864400ad19c5c7806fc0a8323c68baf3e326af7cb7d969f846100d71 + languageName: node + linkType: hard + "titleize@npm:^3.0.0": version: 3.0.0 resolution: "titleize@npm:3.0.0" @@ -12865,6 +12937,13 @@ __metadata: languageName: node linkType: hard +"toposort@npm:^2.0.2": + version: 2.0.2 + resolution: "toposort@npm:2.0.2" + checksum: d64c74b570391c9432873f48e231b439ee56bc49f7cb9780b505cfdf5cb832f808d0bae072515d93834dd6bceca5bb34448b5b4b408335e4d4716eaf68195dcb + languageName: node + linkType: hard + "tr46@npm:~0.0.3": version: 0.0.3 resolution: "tr46@npm:0.0.3" @@ -13050,6 +13129,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:^2.0.0": + version: 2.6.2 + resolution: "tslib@npm:2.6.2" + checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad + languageName: node + linkType: hard + "tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.0": version: 2.6.1 resolution: "tslib@npm:2.6.1" @@ -13122,6 +13208,13 @@ __metadata: languageName: node linkType: hard +"type-fest@npm:^2.19.0": + version: 2.19.0 + resolution: "type-fest@npm:2.19.0" + checksum: a4ef07ece297c9fba78fc1bd6d85dff4472fe043ede98bd4710d2615d15776902b595abf62bd78339ed6278f021235fb28a96361f8be86ed754f778973a0d278 + languageName: node + linkType: hard + "type-is@npm:^1.6.16, type-is@npm:^1.6.18": version: 1.6.18 resolution: "type-is@npm:1.6.18" @@ -13951,6 +14044,18 @@ __metadata: languageName: node linkType: hard +"yup@npm:^1.2.0": + version: 1.2.0 + resolution: "yup@npm:1.2.0" + dependencies: + property-expr: ^2.0.5 + tiny-case: ^1.0.3 + toposort: ^2.0.2 + type-fest: ^2.19.0 + checksum: f0cdceb144e358c6155670f3e27404b65b090cc12594fde6db2699523661e13542aaf87ebe8e542b67f29a5f3f9bc5f23a3a3bb09e17f10d125353d35b841fac + languageName: node + linkType: hard + "zod@npm:3.21.4": version: 3.21.4 resolution: "zod@npm:3.21.4"