chore: fix box noir versioning (#2578)

some small cleanups but main thing is setting the noir version based on
`noir-version.json` instead of using the `noirup -v aztec` which is no
longer recommended

---------

Co-authored-by: josh crites <critesjosh@gmail.com>

yarn-project/boxes/blank-react/.eslintrc.cjs

@@ -1,6 +1,9 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
+  parserOptions: {
+    project: './tsconfig.json',
+  },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
@@ -15,14 +18,13 @@ module.exports = {
       node: true,
     },
   },
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dest', 'webpack.config.js', '.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,
       },
     },

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

@@ -6,7 +6,7 @@
   "main": "./dest/index.js",
   "scripts": {
     "build": "yarn clean && tsc -b && webpack",
-    "install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v aztec",
+    "install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v NOIR_VERSION",
     "install:sandbox": "docker pull aztecprotocol/aztec-sandbox:latest",
     "clean": "rm -rf ./dest .tsbuildinfo",
     "start": "serve -p 3000 ./dest",

yarn-project/boxes/blank-react/src/app/components/contract_function_form.tsx

@@ -3,7 +3,7 @@ import { AztecAddress, CompleteAddress, Fr } from '@aztec/aztec.js';
 import { ContractAbi, FunctionAbi } from '@aztec/foundation/abi';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { CONTRACT_ADDRESS_PARAM_NAMES, rpcClient } from '../../config.js';
+import { CONTRACT_ADDRESS_PARAM_NAMES, pxe } from '../../config.js';
 import { callContractFunction, deployContract, viewContractFunction } from '../../scripts/index.js';
 import { convertArgs } from '../../scripts/util.js';
 import styles from './contract_function_form.module.scss';
@@ -80,20 +80,13 @@ async function handleFunctionCall(
     // for now, dont let user change the salt.  requires some change to the form generation if we want to let user choose one
     // since everything is currently based on parsing the contractABI, and the salt parameter is not present there
     const salt = Fr.random();
-    return await deployContract(wallet, contractAbi, typedArgs, salt, rpcClient);
+    return await deployContract(wallet, contractAbi, typedArgs, salt, pxe);
   }
 
   if (functionAbi.functionType === 'unconstrained') {
-    return await viewContractFunction(contractAddress!, contractAbi, functionName, typedArgs, rpcClient, wallet);
+    return await viewContractFunction(contractAddress!, contractAbi, functionName, typedArgs, pxe, wallet);
   } else {
-    const txnReceipt = await callContractFunction(
-      contractAddress!,
-      contractAbi,
-      functionName,
-      typedArgs,
-      rpcClient,
-      wallet,
-    );
+    const txnReceipt = await callContractFunction(contractAddress!, contractAbi, functionName, typedArgs, pxe, wallet);
     return `Transaction ${txnReceipt.status} on block number ${txnReceipt.blockNumber}`;
   }
 }

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

@@ -1,6 +1,6 @@
-import { BlankContractAbi } from './artifacts/blank.js';
 import { PXE, createPXEClient } from '@aztec/aztec.js';
 import { ContractAbi } from '@aztec/foundation/abi';
+import { BlankContractAbi } from './artifacts/blank.js';
 
 // update this if using a different contract
 
@@ -10,4 +10,3 @@ export const SANDBOX_URL: string = process.env.SANDBOX_URL || 'http://localhost:
 export const pxe: PXE = createPXEClient(SANDBOX_URL);
 
 export const CONTRACT_ADDRESS_PARAM_NAMES = ['address'];
-export const FILTERED_FUNCTION_NAMES = [];

yarn-project/boxes/blank/.eslintrc.cjs

@@ -1,6 +1,9 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
+  parserOptions: {
+    project: './tsconfig.json',
+  },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
@@ -14,14 +17,13 @@ module.exports = {
       node: true,
     },
   },
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dest', 'webpack.config.js', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: [],
   overrides: [
     {
       files: ['*.ts', '*.tsx'],
       parserOptions: {
-        // hacky workaround for CI not having the same tsconfig setup
         project: true,
       },
     },

yarn-project/boxes/blank/package.json

@@ -6,7 +6,7 @@
   "main": "./dest/index.js",
   "scripts": {
     "build": "yarn clean && tsc -b && webpack",
-    "install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v aztec",
+    "install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v NOIR_VERSION",
     "install:sandbox": "docker pull aztecprotocol/aztec-sandbox:latest",
     "clean": "rm -rf ./dest .tsbuildinfo",
     "start": "serve -p 3000 ./dest",

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

@@ -1,11 +1,11 @@
 import {
   AccountWallet,
   AztecAddress,
-  PXE,
   CompleteAddress,
   Contract,
   DeployMethod,
   Fr,
+  PXE,
   TxReceipt,
   createPXEClient,
   getSandboxAccountsWallets,
@@ -18,27 +18,25 @@ export const contractAbi: ContractAbi = BlankContractAbi;
 export const SANDBOX_URL: string = process.env.SANDBOX_URL || 'http://localhost:8080';
 export const pxe: PXE = createPXEClient(SANDBOX_URL);
 
-export const CONTRACT_ADDRESS_PARAM_NAMES = ['owner', 'contract_address', 'recipient'];
-export const FILTERED_FUNCTION_NAMES = [];
-
-export const DEFAULT_PUBLIC_ADDRESS: string = '0x25048e8c1b7dea68053d597ac2d920637c99523651edfb123d0632da785970d0';
-
 let contractAddress: string = '';
 
 // interaction with the buttons, but conditional check so node env can also import from this file
 if (typeof document !== 'undefined') {
   document.getElementById('deploy')?.addEventListener('click', async () => {
     contractAddress = await handleDeployClick();
+    // eslint-disable-next-line no-console
     console.log('Deploy Succeeded, contract deployed at', contractAddress);
   });
 
   document.getElementById('interact')?.addEventListener('click', async () => {
     const interactionResult = await handleInteractClick(contractAddress);
+    // eslint-disable-next-line no-console
     console.log('Interaction transaction succeeded', interactionResult);
   });
 }
 
 export async function handleDeployClick(): Promise<string> {
+  // eslint-disable-next-line no-console
   console.log('Deploying Contract');
   const [wallet, ..._rest] = await getSandboxAccountsWallets(pxe);
 
@@ -52,6 +50,8 @@ export async function handleInteractClick(contractAddress: string) {
   const callArgs = { address: wallet.getCompleteAddress().address };
   const getPkAbi = getFunctionAbi(BlankContractAbi, 'getPublicKey');
   const typedArgs = convertArgs(getPkAbi, callArgs);
+
+  // eslint-disable-next-line no-console
   console.log('Interacting with Contract');
 
   return await callContractFunction(
@@ -81,7 +81,10 @@ export async function callContractFunction(
   // selectedWallet is how we specify the "sender" of the transaction
   const selectedWallet = await getWallet(wallet, pxe);
 
-  // TODO: switch to the generated typescript class?
+  // Note: when you start implementing the contract with more methods, it may be useful
+  // to use the typescript class for your contract generated by the `yarn compile` command,
+  // which provides an object with methods corresponding to the noir contract functions
+  // that are named and typed and can be called directly.
   const contract = await Contract.at(address, abi, selectedWallet);
 
   return contract.methods[functionName](...typedArgs)

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

@@ -1,6 +1,9 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
+  parserOptions: {
+    project: './tsconfig.json',
+  },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
@@ -15,7 +18,7 @@ module.exports = {
       node: true,
     },
   },
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dest', 'webpack.config.js', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   overrides: [

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

@@ -6,7 +6,7 @@
   "main": "./dest/index.js",
   "scripts": {
     "build": "yarn clean && tsc -b && webpack",
-    "install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v aztec",
+    "install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v NOIR_VERSION",
     "install:sandbox": "docker pull aztecprotocol/aztec-sandbox:latest",
     "clean": "rm -rf ./dest .tsbuildinfo",
     "start": "serve -p 3000 ./dest",