feat: pxeless playground + embedded wallet (#17030)

First iteration of the PXEless playground. In order to restore full
functionality, it makes use of an `EmbeddedWallet` which besides
implementing the `Wallet` interface allows for the creation of accounts
from the app.

The databases have been separated into two, a `PlaygroundDB` which
contains purely application data and a `WalletDB` that stores accounts
and other misc artifacts related to wallet operation.

The `Wallet` interface has been extended with account retrieval, and
contract registration an updating has been simplified into a single
method.

Author: AztecBot

boxes/boxes/vanilla/app/embedded-wallet.ts

@@ -59,6 +59,15 @@ export class EmbeddedWallet extends BaseWallet {
     return account;
   }
 
+  getAccounts() {
+    return Promise.resolve(
+      Array.from(this.accounts.values()).map((acc) => ({
+        alias: '',
+        item: acc.getAddress(),
+      }))
+    );
+  }
+
   static async initialize(nodeUrl: string) {
     // Create Aztec Node Client
     const aztecNode = await createAztecNodeClient(nodeUrl);
@@ -235,7 +244,7 @@ export class EmbeddedWallet extends BaseWallet {
     const StubAccountContractArtifact = await getStubAccountContractArtifact();
     const instance = await getContractInstanceFromInstantiationParams(
       StubAccountContractArtifact,
-      {}
+      { salt: Fr.random() }
     );
     return {
       account: stubAccount,

boxes/boxes/vanilla/app/main.ts

@@ -54,10 +54,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         constructorArgs: [AztecAddress.fromString(deployerAddress)],
       }
     );
-    await wallet.registerContract({
-      artifact: PrivateVotingContract.artifact,
-      instance,
-    });
+    await wallet.registerContract(instance, PrivateVotingContract.artifact);
 
     // Get existing account
     displayStatusMessage('Checking for existing account...');

boxes/boxes/vanilla/scripts/deploy.ts

@@ -128,10 +128,7 @@ async function deployContract(wallet: Wallet, deployer: AztecAddress) {
     },
   });
   await provenInteraction.send().wait({ timeout: 120 });
-  await wallet.registerContract({
-    instance: contract,
-    artifact: PrivateVotingContract.artifact,
-  });
+  await wallet.registerContract(contract, PrivateVotingContract.artifact);
 
   return {
     contractAddress: contract.address.toString(),
@@ -166,10 +163,10 @@ async function createAccountAndDeployContract() {
   const wallet = new TestWallet(pxe);
 
   // Register the SponsoredFPC contract (for sponsored fee payments)
-  await wallet.registerContract({
-    instance: await getSponsoredPFCContract(),
-    artifact: SponsoredFPCContractArtifact,
-  });
+  await wallet.registerContract(
+    await getSponsoredPFCContract(),
+    SponsoredFPCContractArtifact
+  );
 
   // Create a new account
   const accountAddress = await createAccount(wallet);

playground/.prettierrc.json

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

playground/README.md

@@ -2,21 +2,17 @@
 
 Initial version of an "everything app" that can be used to test and benchmark Aztec.
 
-  * PXE in the browser with client proofs
-  * Connect to local sandbox or any network (scoped data)
-  * Lazy loading of most assets (think contract artifacts) and WASM (bb still loads at start due to top-level await, but in parallel as it is separated from the main index,js)
-  * Bundled by vite, 1MB compressed
-  * Drop any contract artifact, interpret its ABI, simulate and send
-  * Acts as a barebones wallet, managing auth scopes and separating accounts
-  * Stores artifacts, accounts and all that's required to pick up where you left off without having to redeploy everything (indexeddb)
-  * Supports basic aliasing of addresses
-  * Allows loading an artifact, provide the address and go (instead of having to deploy it)
-  * Add senders/contact management
-  * Authwits
-
-Missing:
-
-  * Benchmarking window where simulation/proving stats are displayed
+- Embedded wallet with PXE in the browser and client proofs
+- Connect to local sandbox or any network (scoped data)
+- Lazy loading of most assets (think contract artifacts) and WASM
+- Bundled by vite, 1.6MB compressed
+- Drop any contract artifact, interpret its ABI, simulate and send
+- Stores artifacts, accounts and all that's required to pick up where you left off without having to redeploy everything (indexeddb)
+- Supports aliasing of addresses, senders, contracts, etc
+- Allows loading an artifact, provide the address and go (instead of having to deploy it)
+- Add senders/contact management
+- Authwits
+- Benchmarking window where simulation/proving stats are displayed
 
 ## To run
 
@@ -31,4 +27,4 @@ Production:
 ```
 yarn build
 yarn preview
-``````
+```

playground/eslint.config.js

@@ -1,13 +1,14 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier/flat';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   { ignores: ['dist'] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended, eslintConfigPrettier],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2025,
@@ -19,10 +20,7 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     },
   },
-)
+);

playground/index.html

@@ -8,16 +8,20 @@
 
     <!-- Matomo -->
     <script>
-      var _paq = window._paq = window._paq || [];
+      var _paq = (window._paq = window._paq || []);
       /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
       _paq.push(['trackPageView']);
       _paq.push(['enableLinkTracking']);
-      (function() {
-        var u="https://azteclabs.matomo.cloud/";
-        _paq.push(['setTrackerUrl', u+'matomo.php']);
+      (function () {
+        var u = 'https://azteclabs.matomo.cloud/';
+        _paq.push(['setTrackerUrl', u + 'matomo.php']);
         _paq.push(['setSiteId', '10']);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.async=true; g.src='https://cdn.matomo.cloud/azteclabs.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
+        var d = document,
+          g = d.createElement('script'),
+          s = d.getElementsByTagName('script')[0];
+        g.async = true;
+        g.src = 'https://cdn.matomo.cloud/azteclabs.matomo.cloud/matomo.js';
+        s.parentNode.insertBefore(g, s);
       })();
     </script>
     <!-- End Matomo Code -->

playground/package.json

@@ -14,7 +14,6 @@
     "formatting:fix": "run -T eslint --fix ./src && run -T prettier -w ./src",
     "test": "playwright test"
   },
-  "prettier": "@aztec/foundation/prettier",
   "dependencies": {
     "@aztec/accounts": "link:../yarn-project/accounts",
     "@aztec/aztec.js": "link:../yarn-project/aztec.js",
@@ -51,6 +50,7 @@
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "globals": "^15.14.0",

playground/src/App.tsx

@@ -6,12 +6,14 @@ import Home from './components/home/Home';
 
 function App() {
   return (
-    <NotificationsProvider slotProps={{
-      snackbar: {
-        anchorOrigin: { vertical: 'top', horizontal: 'right' },
-        autoHideDuration: 5000,
-      }
-    }}>
+    <NotificationsProvider
+      slotProps={{
+        snackbar: {
+          anchorOrigin: { vertical: 'top', horizontal: 'right' },
+          autoHideDuration: 5000,
+        },
+      }}
+    >
       <ThemeProvider theme={theme}>
         <Global styles={globalStyle}></Global>
         <Home />

playground/src/aztecContext.ts

@@ -0,0 +1,75 @@
+import { AztecAddress, type AztecNode, type ContractArtifact, type Wallet } from '@aztec/aztec.js';
+
+import { createContext } from 'react';
+import { type UserTx } from './utils/txs';
+import type { Network } from './utils/networks';
+import { PlaygroundDB } from './utils/storage';
+import { type Log } from './utils/web_logger';
+
+export const AztecContext = createContext<{
+  network: Network;
+  node: AztecNode;
+  wallet: Wallet | null;
+  playgroundDB: PlaygroundDB;
+  from: AztecAddress;
+  currentContractAddress: AztecAddress;
+  currentTx: UserTx;
+  showContractInterface: boolean;
+  currentContractArtifact: ContractArtifact;
+  defaultContractCreationParams: Record<string, unknown>;
+  pendingTxUpdateCounter: number;
+  isNetworkCongested: boolean;
+  logs: Log[];
+  totalLogCount: number;
+  logsOpen: boolean;
+  embeddedWalletSelected: boolean;
+  setIsEmbeddedWalletSelected: (selected: boolean) => void;
+  setLogsOpen: (open: boolean) => void;
+  setLogs: (logs: Log[]) => void;
+  setTotalLogCount: (count: number) => void;
+  setShowContractInterface: (showContractInterface: boolean) => void;
+  setNode: (node: AztecNode) => void;
+  setWallet: (wallet: Wallet) => void;
+  setPlaygroundDB: (playgroundDB: PlaygroundDB) => void;
+  setFrom: (address: AztecAddress) => void;
+  setNetwork: (network: Network) => void;
+  setCurrentTx: (currentTx: UserTx) => void;
+  setCurrentContractArtifact: (currentContract: ContractArtifact) => void;
+  setCurrentContractAddress: (currentContractAddress: AztecAddress) => void;
+  setDefaultContractCreationParams: (defaultContractCreationParams: Record<string, unknown>) => void;
+  setPendingTxUpdateCounter: (pendingTxUpdateCounter: number) => void;
+  setIsNetworkCongested: (isNetworkCongested: boolean) => void;
+}>({
+  network: null,
+  node: null,
+  wallet: null,
+  playgroundDB: null,
+  from: null,
+  currentContractArtifact: null,
+  currentContractAddress: null,
+  currentTx: null,
+  showContractInterface: false,
+  defaultContractCreationParams: {},
+  pendingTxUpdateCounter: 0,
+  isNetworkCongested: false,
+  totalLogCount: 0,
+  logs: [],
+  logsOpen: false,
+  embeddedWalletSelected: false,
+  setIsEmbeddedWalletSelected: () => {},
+  setLogsOpen: () => {},
+  setLogs: () => {},
+  setTotalLogCount: () => {},
+  setShowContractInterface: () => {},
+  setWallet: () => {},
+  setNode: () => {},
+  setPlaygroundDB: () => {},
+  setFrom: () => {},
+  setNetwork: () => {},
+  setCurrentTx: () => {},
+  setCurrentContractArtifact: () => {},
+  setCurrentContractAddress: () => {},
+  setDefaultContractCreationParams: () => {},
+  setPendingTxUpdateCounter: () => {},
+  setIsNetworkCongested: () => {},
+});