chore: restructure

Author: saleel

.github/workflows/e2e.yml

@@ -28,13 +28,9 @@ jobs:
 
     - name: Set Aztec version and start sandbox
       run: |
-        aztec-up 0.87.2 
+        aztec-up 0.87.4 
         aztec start --sandbox &
 
-    - name: Compile contracts
-      run: script -e -c "${AZTEC_NARGO:-aztec-nargo} compile"
-      working-directory: ./contracts
-
     - name: Install dependencies
       working-directory: ./app
       run: npm install -g yarn && yarn
@@ -43,23 +39,8 @@ jobs:
       working-directory: ./app
       run: yarn playwright install --with-deps
 
-    - name: Deploy contracts
-      working-directory: ./app
-      env:
-        PROVER_ENABLED: false
-      run: yarn deploy-contracts
-
-    - name: Build app
-      working-directory: ./app
+    - name: Build
       run: yarn build
 
     - name: Run tests
-      working-directory: ./app
       run: yarn test
-
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: app/playwright-report/
-        retention-days: 30

.gitignore

@@ -1,14 +1,10 @@
-contracts/target
-codegenCache.json
-
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-lerna-debug.log*
 
 node_modules
 dist
@@ -26,13 +22,19 @@ dist-ssr
 *.sln
 *.sw?
 
-app/scripts/.store
-app/deployed-contract.json
-app/wallet-info.json
+tsconfig.tsbuildinfo
 
+scripts/.store
+./deployed-contract.json
+./wallet-info.json
+
+contracts/target
+codegenCache.json
 
 # Playwright
 test-results/
 playwright-report/
 blob-report/
 playwright/.cache/
+
+.env

README.md

@@ -10,19 +10,15 @@ This is an example web app that demonstrates how to interact with an Aztec contr
 
 1. Install the Aztec tools from the first few steps in [Quick Start Guide](https://docs.aztec.network/developers/getting_started).
 
-Please note that this project uses `0.87.2` version of Aztec SDK. If you wish to use a different version, please update the dependencies in the `app/package.json` and in `contracts/Nargo.toml` file to match your version.
+Please note that this project uses `latest` version of Aztec SDK. If you wish to use a different version, please update the dependencies in the `app/package.json` and in `contracts/Nargo.toml` file to match your version.
 
-Alternatively, you can install `0.87.2` version of Aztec tools by running the below commands:
+You can install a specific version of Aztec tools by running `aztec-up 0.X.X`
 
-```sh
-aztec-up 0.87.2
-aztec start --sandbox
-```
 
 2. Compile smart contracts in `/contracts`:
 
 ```sh
-(cd contracts && ./build.sh)
+yarn build-contracts
 ```
 
 The build script compiles the contract and generates the artifacts.
@@ -32,19 +28,20 @@ The build script compiles the contract and generates the artifacts.
 Run the JS deploy script to deploy the contracts (NodeJS v20.0):
 
 ```sh
-(cd app && yarn install)
-(cd app && yarn deploy-contracts)
+yarn install
+yarn deploy-contracts
 ```
 
-This will deploy the contracts and save the deployment info to `app/deployed-contract.json`.
-The full process involves `Generating Client IVC proof`, and may take a few moments. For faster development the sandbox does not verify proofs, so this can optionally be disabled [here](#disable-client-proofs). 
+The deploy script generates a random account and deploys the voting contract with it. It also uses the SponsoredFPC contract for fee payment. This is sufficient for testing with Sandbox, but is not suitable for production setup.
+
+The script also writes the deployment info to `.env` (which our web-app reads from).
 
-> Important: For a production app, you need to back up the deployment info file to a secure location as without it, you will not be able to recover the contract address.
+> Note that the script generates client proofs and it may take a couple of seconds. For faster development, you can disable proving by calling with `PROVER_ENABLED=false` (Sandbox accepts transactions without a valid proof).
 
-4. Run the app:
+4. Run the app (development mode):
 
 ```sh
-(cd app && yarn dev)
+yarn dev
 ```
 
 ### Test the app
@@ -62,7 +59,7 @@ You can now interact with the deployed contract using the web app:
 You can also run the E2E tests:
 
 ```sh
-(cd app && yarn test)
+yarn test
 ```
 
 <br />
@@ -77,8 +74,4 @@ To disable proving in the deploy script, run:
 PXE_PROVER=none ./deploy.sh
 ```
 
-To disable proving in the web app, you can add the following line in `app/src/embedded-wallet.ts` (uncomment the existing line):
-
-```ts
-config.proverEnabled = false;
-```
+To disable proving in the web app, you can set `PROVER_ENABLED` to `false` in `embedded-wallet.ts` file.

app/.env

@@ -7,14 +7,19 @@ import {
   ContractFunctionInteraction,
   SponsoredFeePaymentMethod,
   type PXE,
+  AccountWallet,
 } from '@aztec/aztec.js';
 import { SponsoredFPCContractArtifact } from '@aztec/noir-contracts.js/SponsoredFPC';
 import { SPONSORED_FPC_SALT } from '@aztec/constants';
 import { randomBytes } from '@aztec/foundation/crypto';
 import { getEcdsaRAccount } from '@aztec/accounts/ecdsa/lazy';
+import { getSchnorrAccount } from '@aztec/accounts/schnorr/lazy';
 import { getPXEServiceConfig } from '@aztec/pxe/config';
 import { createPXEService } from '@aztec/pxe/client/lazy';
-import { ContractArtifact, getDefaultInitializer } from '@aztec/stdlib/abi';
+import { type ContractArtifact, getDefaultInitializer } from '@aztec/stdlib/abi';
+import { getInitialTestAccounts } from '@aztec/accounts/testing';
+
+const PROVER_ENABLED = true;
 
 const logger = createLogger('wallet');
 const LocalStorageKey = 'aztec-account';
@@ -24,6 +29,7 @@ const LocalStorageKey = 'aztec-account';
 // This is not meant for production use
 export class EmbeddedWallet {
   private pxe!: PXE;
+  connectedAccount: AccountWallet | null = null;
 
   constructor(private nodeUrl: string) {}
 
@@ -34,12 +40,12 @@ export class EmbeddedWallet {
     // Create PXE Service
     const config = getPXEServiceConfig();
     config.l1Contracts = await aztecNode.getL1ContractAddresses();
-    // config.proverEnabled = false;
+    config.proverEnabled = PROVER_ENABLED;
     this.pxe = await createPXEService(aztecNode, config);
 
     // Register Sponsored FPC Contract with PXE
     await this.pxe.registerContract({
-      instance: await this.getSponsoredPFCContract(),
+      instance: await this.#getSponsoredPFCContract(),
       artifact: SponsoredFPCContractArtifact,
     });
 
@@ -49,7 +55,7 @@ export class EmbeddedWallet {
   }
 
   // Internal method to use the Sponsored FPC Contract for fee payment
-  async getSponsoredPFCContract() {
+  async #getSponsoredPFCContract() {
     const instance = await getContractInstanceFromDeployParams(
       SponsoredFPCContractArtifact,
       {
@@ -60,8 +66,27 @@ export class EmbeddedWallet {
     return instance;
   }
 
+  getConnectedAccount() {
+    if (!this.connectedAccount) {
+      return null;
+    }
+    return this.connectedAccount;
+  }
+
+  async connectTestAccount(index: number) {
+    const testAccounts = await getInitialTestAccounts();
+    const account = testAccounts[index];
+    const schnorrAccount = await getSchnorrAccount(this.pxe, account.secret, account.signingKey, account.salt);
+
+    await schnorrAccount.register();
+    const wallet = await schnorrAccount.getWallet();
+
+    this.connectedAccount = wallet;
+    return wallet;
+  }
+
   // Create a new account
-  async createAccount() {
+  async createAccountAndConnect() {
     if (!this.pxe) {
       throw new Error('PXE not initialized');
     }
@@ -81,7 +106,7 @@ export class EmbeddedWallet {
 
     // Deploy the account
     const deployMethod = await ecdsaAccount.getDeployMethod();
-    const sponsoredPFCContract = await this.getSponsoredPFCContract();
+    const sponsoredPFCContract = await this.#getSponsoredPFCContract();
     const deployOpts = {
       contractAddressSalt: Fr.fromString(ecdsaAccount.salt.toString()),
       fee: {
@@ -93,6 +118,7 @@ export class EmbeddedWallet {
       skipClassRegistration: true,
       skipPublicDeployment: true,
     };
+
     const provenInteraction = await deployMethod.prove(deployOpts);
     const receipt = await provenInteraction.send().wait({ timeout: 120 });
 
@@ -112,10 +138,12 @@ export class EmbeddedWallet {
 
     // Register the account with PXE
     await ecdsaAccount.register();
+    this.connectedAccount = ecdsaWallet;
+
     return ecdsaWallet;
   }
 
-  async getAccount() {
+  async connectExistingAccount() {
     // Read key from local storage and create the account
     const account = localStorage.getItem(LocalStorageKey);
     if (!account) {
@@ -132,6 +160,8 @@ export class EmbeddedWallet {
 
     await ecdsaAccount.register();
     const ecdsaWallet = await ecdsaAccount.getWallet();
+
+    this.connectedAccount = ecdsaWallet;
     return ecdsaWallet;
   }
 
@@ -157,7 +187,7 @@ export class EmbeddedWallet {
 
   // Send a transaction with the Sponsored FPC Contract for fee payment
   async sendTransaction(interaction: ContractFunctionInteraction) {
-    const sponsoredPFCContract = await this.getSponsoredPFCContract();
+    const sponsoredPFCContract = await this.#getSponsoredPFCContract();
     const provenInteraction = await interaction.prove({
       fee: {
         paymentMethod: new SponsoredFeePaymentMethod(

app/.prettierrc

@@ -4,16 +4,27 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Private Voting on Aztec</title>
-    <link rel="stylesheet" href="./src/style.css" />
   </head>
 
   <body>
     <nav class="navbar">
       <div class="nav-title">Private Voting</div>
-      <div id="account-display" class="account-display"></div>
-      <button id="create-account" type="button" style="display: none">
-        Create Account
-      </button>
+
+      <div style="display: flex; align-items: center; gap: 1rem;">
+        <div id="account-display" class="account-display"></div>
+
+        <select id="test-account-number" style="display: none">
+          <option value="1">Account 1</option>
+          <option value="2">Account 2</option>
+          <option value="3">Account 3</option>
+        </select>
+        <button id="connect-test-account" type="button" style="display: none">
+          Connect Test Account
+        </button>
+        <button id="create-account" type="button" style="display: none">
+          Create Account
+        </button>
+      </div>
     </nav>
 
     <main class="main-content">
@@ -39,7 +50,5 @@ <h4>Cast Vote</h4>
 
       <div id="status-message" class="status-message"></div>
     </main>
-
-    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>