docs(web-client): implement bech32 formatting for v12 tutorials

Author: Keinberger

docs/src/web-client/counter_contract_tutorial.md

@@ -117,7 +117,7 @@ export async function incrementCounterContract(): Promise<void> {
 
   // dynamic import → only in the browser, so WASM is loaded client‑side
   const {
-    AccountId,
+    Address,
     AccountBuilder,
     AccountComponent,
     AccountStorageMode,
@@ -182,9 +182,9 @@ export async function incrementCounterContract(): Promise<void> {
 
   // Building the counter contract
   // Counter contract account id on testnet
-  const counterContractId = AccountId.fromHex(
-    '0xe59d8cd3c9ff2a0055da0b83ed6432',
-  );
+  const counterContractId = Address.fromBech32(
+    'mtst1arjemrxne8lj5qz4mg9c8mtyxg954483',
+  ).accountId();
 
   // Reading the public state of the counter contract from testnet,
   // and importing it into the WebClient

docs/src/web-client/create_deploy_tutorial.md

@@ -243,7 +243,8 @@ export async function createMintConsume(): Promise<void> {
     return;
   }
 
-  const { WebClient, AccountStorageMode } = await import(
+  // dynamic import → only in the browser, so WASM is loaded client‑side
+  const { WebClient, AccountStorageMode, NoteType, Address } = await import(
     '@demox-labs/miden-sdk'
   );
 

docs/src/web-client/creating_multiple_notes_tutorial.md

@@ -267,9 +267,10 @@ export async function multiSendWithDelegatedProver(): Promise<void> {
   const {
     WebClient,
     AccountStorageMode,
-    AccountId,
+    Address,
     NoteType,
     TransactionProver,
+    NetworkId,
     Note,
     NoteAssets,
     OutputNoteArray,
@@ -346,15 +347,15 @@ export async function multiSendWithDelegatedProver(): Promise<void> {
 
   // ── build 3 P2ID notes (100 MID each) ─────────────────────────────────────────────
   const recipientAddresses = [
-    '0xbf1db1694c83841000008cefd4fce0',
-    '0xee1a75244282c32000010a29bed5f4',
-    '0x67dc56bd0cbe629000006f36d81029',
+    'mtst1aqezqc90x7dkzypr9m5fmlpp85w6cl04',
+    'mtst1apjg2ul76wrkxyr5qlcnczaskypa4ljn',
+    'mtst1arpee6y9cm8t7ypn33pc8fzj6gkzz7kd',
   ];
 
   const assets = new NoteAssets([new FungibleAsset(faucet.id(), BigInt(100))]);
 
   const p2idNotes = recipientAddresses.map((addr) => {
-    const receiverAccountId = AccountId.fromHex(addr);
+    const receiverAccountId = Address.fromBech32(addr).accountId();
     const note = Note.createP2IDNote(
       alice.id(),
       receiverAccountId,

docs/src/web-client/foreign_procedure_invocation_tutorial.md

@@ -134,7 +134,7 @@ export async function foreignProcedureInvocation(): Promise<void> {
   const {
     AccountBuilder,
     AccountComponent,
-    AccountId,
+    Address,
     AccountType,
     MidenArrays,
     SecretKey,
@@ -218,9 +218,9 @@ export async function foreignProcedureInvocation(): Promise<void> {
   console.log('\n[STEP 2] Building counter contract from public state');
 
   // Define the Counter Contract account id from counter contract deploy (same as Rust)
-  const counterContractId = AccountId.fromHex(
-    '0xe59d8cd3c9ff2a0055da0b83ed6432',
-  );
+  const counterContractId = Address.fromBech32(
+    'mtst1arjemrxne8lj5qz4mg9c8mtyxg954483',
+  ).accountId();
 
   // Import the counter contract
   let counterContractAccount = await client.getAccount(counterContractId);

docs/src/web-client/mint_consume_create_tutorial.md

@@ -113,12 +113,14 @@ import { NoteType } from "@demox-labs/miden-sdk";
 // ...
 
 // 7. Send tokens from Alice to Bob
-const bobAccountId = "0x599a54603f0cf9000000ed7a11e379";
+const bobAccountId = Address.fromBech32(
+  'mtst1apve54rq8ux0jqqqqrkh5y0r0y8cwza6_qruqqypuyph',
+).accountId();
 console.log("Sending tokens to Bob's account...");
 
 const sendTxRequest = client.newSendTransactionRequest(
   alice.id(),                      // Sender account
-  AccountId.fromHex(bobAccountId), // Recipient account
+  boxAccountId,                    // Recipient account
   faucet.id(),                     // Asset ID (faucet that created the tokens)
   NoteType.Public,                 // Note visibility
   BigInt(100),                     // Amount to send
@@ -152,23 +154,23 @@ export async function createMintConsume(): Promise<void> {
   }
 
   // dynamic import → only in the browser, so WASM is loaded client‑side
-  const { WebClient, AccountStorageMode, AccountId, NoteType } = await import(
+  const { WebClient, AccountStorageMode, NoteType, Address } = await import(
     '@demox-labs/miden-sdk'
   );
 
   const nodeEndpoint = 'https://rpc.testnet.miden.io';
   const client = await WebClient.createClient(nodeEndpoint);
 
-  // 1. Sync and log block
+  // 1. Sync with the latest blockchain state
   const state = await client.syncState();
   console.log('Latest block number:', state.blockNum());
 
-  // 2. Create Alice’s account
+  // 2. Create Alice's account
   console.log('Creating account for Alice…');
   const alice = await client.newWallet(AccountStorageMode.public(), true, 0);
   console.log('Alice ID:', alice.id().toString());
 
-  // 3. Deploy faucet
+  // 3. Deploy a fungible faucet
   console.log('Creating faucet…');
   const faucet = await client.newFaucet(
     AccountStorageMode.public(),
@@ -185,7 +187,7 @@ export async function createMintConsume(): Promise<void> {
   // 4. Mint tokens to Alice
   await client.syncState();
 
-  console.log('Minting 1000 tokens to Alice...');
+  console.log('Minting tokens to Alice...');
   const mintTxRequest = client.newMintTransactionRequest(
     alice.id(),
     faucet.id(),
@@ -204,7 +206,7 @@ export async function createMintConsume(): Promise<void> {
   const mintedNoteIds = mintedNotes.map((n) =>
     n.inputNoteRecord().id().toString(),
   );
-  console.log('Consumable note IDs:', mintedNoteIds);
+  console.log('Minted note IDs:', mintedNoteIds);
 
   // 6. Consume minted notes
   console.log('Consuming minted notes...');
@@ -216,11 +218,13 @@ export async function createMintConsume(): Promise<void> {
   console.log('Notes consumed.');
 
   // 7. Send tokens to Bob
-  const bobAccountId = '0x599a54603f0cf9000000ed7a11e379';
+  const bobAccountId = Address.fromBech32(
+    'mtst1apve54rq8ux0jqqqqrkh5y0r0y8cwza6_qruqqypuyph',
+  ).accountId();
   console.log("Sending tokens to Bob's account...");
   const sendTxRequest = client.newSendTransactionRequest(
     alice.id(),
-    AccountId.fromHex(bobAccountId),
+    bobAccountId,
     faucet.id(),
     NoteType.Public,
     BigInt(100),

docs/src/web-client/unauthenticated_note_how_to.md

@@ -37,18 +37,22 @@ This tutorial assumes you have a basic understanding of Miden assembly. To quick
 ## Step-by-step process
 
 1. **Next.js Project Setup:**
+
    - Create a new Next.js application with TypeScript.
    - Install the Miden WebClient SDK.
 
 2. **WebClient Initialization:**
+
    - Set up the WebClient to connect with the Miden testnet.
    - Configure a delegated prover for improved performance.
 
 3. **Account Creation:**
+
    - Create wallet accounts for Alice and multiple transfer recipients.
    - Deploy a fungible faucet for token minting.
 
 4. **Initial Token Setup:**
+
    - Mint tokens from the faucet to Alice's account.
    - Consume the minted tokens to prepare for transfers.
 
@@ -154,7 +158,6 @@ export async function unauthenticatedNoteTransfer(): Promise<void> {
   const {
     WebClient,
     AccountStorageMode,
-    AccountId,
     NoteType,
     TransactionProver,
     Note,
@@ -255,11 +258,9 @@ export async function unauthenticatedNoteTransfer(): Promise<void> {
     console.log('Receiver:', receiver.id().toString());
 
     const assets = new NoteAssets([new FungibleAsset(faucet.id(), BigInt(50))]);
-    const receiverAccountId = AccountId.fromHex(receiver.id().toString());
-
     const p2idNote = Note.createP2IDNote(
       sender.id(),
-      receiverAccountId,
+      receiver.id(),
       assets,
       NoteType.Public,
       new Felt(BigInt(0)), // aux value