From 6ace2e63febabf77b1d654881b12a84f7401c774 Mon Sep 17 00:00:00 2001 From: AztecBot Date: Fri, 5 Jun 2026 15:22:51 +0000 Subject: [PATCH 1/2] fix(docs): update webapp-tutorial to current wallets/PXE API + fix vite polyfill resolution --- docs/examples/webapp-tutorial/src/config.ts | 2 +- .../webapp-tutorial/src/embedded-wallet.ts | 47 +++++++------------ docs/examples/webapp-tutorial/vite.config.ts | 23 +++++++-- 3 files changed, 38 insertions(+), 34 deletions(-) diff --git a/docs/examples/webapp-tutorial/src/config.ts b/docs/examples/webapp-tutorial/src/config.ts index 423e7c4b613e..1877a63f7579 100644 --- a/docs/examples/webapp-tutorial/src/config.ts +++ b/docs/examples/webapp-tutorial/src/config.ts @@ -22,7 +22,7 @@ export function getNodeUrl(network: NetworkType): string { export async function createLocalPXE(nodeUrl: string) { const aztecNode = createAztecNodeClient(nodeUrl); const config = getPXEConfig(); - config.l1Contracts = await aztecNode.getL1ContractAddresses(); + // L1 contract addresses are fetched from the node by createPXE. const isLocal = nodeUrl.includes('localhost') || nodeUrl.includes('127.0.0.1'); config.proverEnabled = !isLocal; const pxe = await createPXE(aztecNode, config, {}); diff --git a/docs/examples/webapp-tutorial/src/embedded-wallet.ts b/docs/examples/webapp-tutorial/src/embedded-wallet.ts index 969ccafd839e..d0fa2d28e7c4 100644 --- a/docs/examples/webapp-tutorial/src/embedded-wallet.ts +++ b/docs/examples/webapp-tutorial/src/embedded-wallet.ts @@ -1,16 +1,14 @@ // docs:start:embedded-wallet-imports -import { type NoFrom, NO_FROM } from '@aztec/aztec.js/account'; +import { NO_FROM } from '@aztec/aztec.js/account'; import { AztecAddress } from '@aztec/aztec.js/addresses'; import { getContractInstanceFromInstantiationParams } from '@aztec/aztec.js/contracts'; import { SponsoredFeePaymentMethod } from '@aztec/aztec.js/fee'; import { Fr } from '@aztec/aztec.js/fields'; import { SPONSORED_FPC_SALT } from '@aztec/constants'; import { AccountFeePaymentMethodOptions } from '@aztec/entrypoints/account'; -import type { FieldsOf } from '@aztec/foundation/types'; import { getInitialTestAccountsData } from '@aztec/accounts/testing/lazy'; import type { ContractArtifact } from '@aztec/stdlib/abi'; -import { GasSettings } from '@aztec/stdlib/gas'; -import { type FeeOptions } from '@aztec/wallet-sdk/base-wallet'; +import { type CompleteFeeOptionsConfig, type FeeOptions } from '@aztec/wallet-sdk/base-wallet'; import { EmbeddedWallet as BaseEmbeddedWallet } from '@aztec/wallets/embedded'; // docs:end:embedded-wallet-imports @@ -34,36 +32,25 @@ export class EmbeddedWallet extends BaseEmbeddedWallet { * Uses SponsoredFPC for fee payment by default, so users * don't need to hold fee tokens. */ - override async completeFeeOptions( - from: AztecAddress | NoFrom, - feePayer?: AztecAddress, - gasSettings?: Partial>, - ): Promise { - const maxFeesPerGas = - gasSettings?.maxFeesPerGas ?? - (await this.aztecNode.getCurrentMinFees()).mul(1 + this.minFeePadding); + override async completeFeeOptions(config: CompleteFeeOptionsConfig): Promise { + // Let the base wallet compute gas settings, fee padding and account options. + const feeOptions = await super.completeFeeOptions(config); - let walletFeePaymentMethod; - let accountFeePaymentMethodOptions; - - if (!feePayer) { - const fpc = await EmbeddedWallet.#getSponsoredFPCContract(); - walletFeePaymentMethod = new SponsoredFeePaymentMethod( - fpc.instance.address, - ); - if (from !== NO_FROM) { - accountFeePaymentMethodOptions = AccountFeePaymentMethodOptions.EXTERNAL; - } - } else if (from !== NO_FROM) { - accountFeePaymentMethodOptions = from.equals(feePayer) - ? AccountFeePaymentMethodOptions.FEE_JUICE_WITH_CLAIM - : AccountFeePaymentMethodOptions.EXTERNAL; + // If the caller already provided a fee payer, respect their choice. + if (config.feePayer) { + return feeOptions; } + // Otherwise default to SponsoredFPC so users don't need to hold fee tokens. + const fpc = await EmbeddedWallet.#getSponsoredFPCContract(); return { - gasSettings: GasSettings.default({ ...gasSettings, maxFeesPerGas }), - walletFeePaymentMethod, - accountFeePaymentMethodOptions, + ...feeOptions, + walletFeePaymentMethod: new SponsoredFeePaymentMethod(fpc.instance.address), + // The SponsoredFPC method is external to any account paying for itself. + accountFeePaymentMethodOptions: + config.from !== NO_FROM + ? AccountFeePaymentMethodOptions.EXTERNAL + : feeOptions.accountFeePaymentMethodOptions, }; } // docs:end:fee-options diff --git a/docs/examples/webapp-tutorial/vite.config.ts b/docs/examples/webapp-tutorial/vite.config.ts index 81ada051366f..ea204fa3d77a 100644 --- a/docs/examples/webapp-tutorial/vite.config.ts +++ b/docs/examples/webapp-tutorial/vite.config.ts @@ -1,12 +1,29 @@ // docs:start:vite-config -import { defineConfig } from "vite"; +import { defineConfig, type Plugin } from "vite"; import react from "@vitejs/plugin-react-swc"; -import { nodePolyfills } from "vite-plugin-node-polyfills"; +import { type PolyfillOptions, nodePolyfills } from "vite-plugin-node-polyfills"; + +// vite-plugin-node-polyfills injects imports of its own shims (e.g. +// `vite-plugin-node-polyfills/shims/buffer`) into modules that use Node globals. +// Our @aztec/* dependencies are `link:`ed to the monorepo, so those injected +// specifiers get resolved from the linked package directory, where the plugin is +// not installed, and rollup fails to resolve them. Redirect the shim specifiers +// to the copy installed in this project. +// See https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/81 +const nodePolyfillsFix = (options?: PolyfillOptions): Plugin => ({ + ...nodePolyfills(options), + resolveId(source: string) { + const m = /^vite-plugin-node-polyfills\/shims\/(buffer|global|process)$/.exec(source); + if (m) { + return `./node_modules/vite-plugin-node-polyfills/shims/${m[1]}/dist/index.cjs`; + } + }, +}); export default defineConfig({ plugins: [ react(), - nodePolyfills({ + nodePolyfillsFix({ globals: { process: true, Buffer: true, From 2140164e8b1dcc5e950d035e6b546d7e8291f6f9 Mon Sep 17 00:00:00 2001 From: thunkar Date: Mon, 8 Jun 2026 07:25:10 +0000 Subject: [PATCH 2/2] slop cleanup --- docs/examples/webapp-tutorial/src/config.ts | 21 +++++---- .../webapp-tutorial/src/embedded-wallet.ts | 44 ++++++++++--------- docs/examples/webapp-tutorial/vite.config.ts | 18 ++++---- 3 files changed, 42 insertions(+), 41 deletions(-) diff --git a/docs/examples/webapp-tutorial/src/config.ts b/docs/examples/webapp-tutorial/src/config.ts index 1877a63f7579..27073c0cae6d 100644 --- a/docs/examples/webapp-tutorial/src/config.ts +++ b/docs/examples/webapp-tutorial/src/config.ts @@ -1,17 +1,16 @@ // docs:start:config -import { createAztecNodeClient } from '@aztec/aztec.js/node'; -import { getPXEConfig } from '@aztec/pxe/config'; -import { createPXE } from '@aztec/pxe/client/lazy'; +import { createAztecNodeClient } from "@aztec/aztec.js/node"; +import { getPXEConfig } from "@aztec/pxe/config"; +import { createPXE } from "@aztec/pxe/client/lazy"; - -export type NetworkType = 'local' | 'remote'; +export type NetworkType = "local" | "remote"; export function getNodeUrl(network: NetworkType): string { - if (network === 'local') { - return process.env.AZTEC_NODE_URL || 'http://localhost:8080'; + if (network === "local") { + return process.env.AZTEC_NODE_URL || "http://localhost:8080"; } // For remote networks, the wallet extension manages the node connection - return process.env.AZTEC_NODE_URL || 'http://localhost:8080'; + return process.env.AZTEC_NODE_URL || "http://localhost:8080"; } /** @@ -22,11 +21,11 @@ export function getNodeUrl(network: NetworkType): string { export async function createLocalPXE(nodeUrl: string) { const aztecNode = createAztecNodeClient(nodeUrl); const config = getPXEConfig(); - // L1 contract addresses are fetched from the node by createPXE. - const isLocal = nodeUrl.includes('localhost') || nodeUrl.includes('127.0.0.1'); + const isLocal = + nodeUrl.includes("localhost") || nodeUrl.includes("127.0.0.1"); config.proverEnabled = !isLocal; const pxe = await createPXE(aztecNode, config, {}); - console.log('PXE connected to node at:', nodeUrl); + console.log("PXE connected to node at:", nodeUrl); return { pxe, aztecNode }; } diff --git a/docs/examples/webapp-tutorial/src/embedded-wallet.ts b/docs/examples/webapp-tutorial/src/embedded-wallet.ts index d0fa2d28e7c4..df8515c98d52 100644 --- a/docs/examples/webapp-tutorial/src/embedded-wallet.ts +++ b/docs/examples/webapp-tutorial/src/embedded-wallet.ts @@ -1,15 +1,18 @@ // docs:start:embedded-wallet-imports -import { NO_FROM } from '@aztec/aztec.js/account'; -import { AztecAddress } from '@aztec/aztec.js/addresses'; -import { getContractInstanceFromInstantiationParams } from '@aztec/aztec.js/contracts'; -import { SponsoredFeePaymentMethod } from '@aztec/aztec.js/fee'; -import { Fr } from '@aztec/aztec.js/fields'; -import { SPONSORED_FPC_SALT } from '@aztec/constants'; -import { AccountFeePaymentMethodOptions } from '@aztec/entrypoints/account'; -import { getInitialTestAccountsData } from '@aztec/accounts/testing/lazy'; -import type { ContractArtifact } from '@aztec/stdlib/abi'; -import { type CompleteFeeOptionsConfig, type FeeOptions } from '@aztec/wallet-sdk/base-wallet'; -import { EmbeddedWallet as BaseEmbeddedWallet } from '@aztec/wallets/embedded'; +import { NO_FROM } from "@aztec/aztec.js/account"; +import { AztecAddress } from "@aztec/aztec.js/addresses"; +import { getContractInstanceFromInstantiationParams } from "@aztec/aztec.js/contracts"; +import { SponsoredFeePaymentMethod } from "@aztec/aztec.js/fee"; +import { Fr } from "@aztec/aztec.js/fields"; +import { SPONSORED_FPC_SALT } from "@aztec/constants"; +import { AccountFeePaymentMethodOptions } from "@aztec/entrypoints/account"; +import { getInitialTestAccountsData } from "@aztec/accounts/testing/lazy"; +import type { ContractArtifact } from "@aztec/stdlib/abi"; +import { + type CompleteFeeOptionsConfig, + type FeeOptions, +} from "@aztec/wallet-sdk/base-wallet"; +import { EmbeddedWallet as BaseEmbeddedWallet } from "@aztec/wallets/embedded"; // docs:end:embedded-wallet-imports // docs:start:embedded-wallet-class @@ -32,21 +35,21 @@ export class EmbeddedWallet extends BaseEmbeddedWallet { * Uses SponsoredFPC for fee payment by default, so users * don't need to hold fee tokens. */ - override async completeFeeOptions(config: CompleteFeeOptionsConfig): Promise { - // Let the base wallet compute gas settings, fee padding and account options. + override async completeFeeOptions( + config: CompleteFeeOptionsConfig, + ): Promise { const feeOptions = await super.completeFeeOptions(config); - // If the caller already provided a fee payer, respect their choice. if (config.feePayer) { return feeOptions; } - // Otherwise default to SponsoredFPC so users don't need to hold fee tokens. const fpc = await EmbeddedWallet.#getSponsoredFPCContract(); return { ...feeOptions, - walletFeePaymentMethod: new SponsoredFeePaymentMethod(fpc.instance.address), - // The SponsoredFPC method is external to any account paying for itself. + walletFeePaymentMethod: new SponsoredFeePaymentMethod( + fpc.instance.address, + ), accountFeePaymentMethodOptions: config.from !== NO_FROM ? AccountFeePaymentMethodOptions.EXTERNAL @@ -62,7 +65,7 @@ export class EmbeddedWallet extends BaseEmbeddedWallet { */ static async initialize(nodeUrl: string) { const isLocal = - nodeUrl.includes('localhost') || nodeUrl.includes('127.0.0.1'); + nodeUrl.includes("localhost") || nodeUrl.includes("127.0.0.1"); const wallet = await EmbeddedWallet.create(nodeUrl, { ephemeral: true, pxeConfig: { proverEnabled: !isLocal }, @@ -77,9 +80,8 @@ export class EmbeddedWallet extends BaseEmbeddedWallet { // docs:end:initialize static async #getSponsoredFPCContract() { - const { SponsoredFPCContractArtifact } = await import( - '@aztec/noir-contracts.js/SponsoredFPC' - ); + const { SponsoredFPCContractArtifact } = + await import("@aztec/noir-contracts.js/SponsoredFPC"); const instance = await getContractInstanceFromInstantiationParams( SponsoredFPCContractArtifact, { salt: new Fr(SPONSORED_FPC_SALT) }, diff --git a/docs/examples/webapp-tutorial/vite.config.ts b/docs/examples/webapp-tutorial/vite.config.ts index ea204fa3d77a..5809c3af345a 100644 --- a/docs/examples/webapp-tutorial/vite.config.ts +++ b/docs/examples/webapp-tutorial/vite.config.ts @@ -1,19 +1,19 @@ // docs:start:vite-config import { defineConfig, type Plugin } from "vite"; import react from "@vitejs/plugin-react-swc"; -import { type PolyfillOptions, nodePolyfills } from "vite-plugin-node-polyfills"; +import { + type PolyfillOptions, + nodePolyfills, +} from "vite-plugin-node-polyfills"; -// vite-plugin-node-polyfills injects imports of its own shims (e.g. -// `vite-plugin-node-polyfills/shims/buffer`) into modules that use Node globals. -// Our @aztec/* dependencies are `link:`ed to the monorepo, so those injected -// specifiers get resolved from the linked package directory, where the plugin is -// not installed, and rollup fails to resolve them. Redirect the shim specifiers -// to the copy installed in this project. -// See https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/81 +// Unfortunate, but needed due to https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/81 const nodePolyfillsFix = (options?: PolyfillOptions): Plugin => ({ ...nodePolyfills(options), resolveId(source: string) { - const m = /^vite-plugin-node-polyfills\/shims\/(buffer|global|process)$/.exec(source); + const m = + /^vite-plugin-node-polyfills\/shims\/(buffer|global|process)$/.exec( + source, + ); if (m) { return `./node_modules/vite-plugin-node-polyfills/shims/${m[1]}/dist/index.cjs`; }