Skip to content

Commit 9c12034

Browse files
KeinbergerKeinberger
authored
Merge pull request #148 from 0xMiden/keinberger/chore/web-client-bech32-formatting
chore(web-client): implement bech32 formatting for web client tutorials
2 parents 4d86a34 + 5425f08 commit 9c12034

11 files changed

+52
-49
lines changed

‎docs/src/web-client/counter_contract_tutorial.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export async function incrementCounterContract(): Promise<void> {
117117

118118
// dynamic import → only in the browser, so WASM is loaded client‑side
119119
const {
120-
AccountId,
120+
Address,
121121
AccountBuilder,
122122
AccountComponent,
123123
AccountStorageMode,
@@ -182,9 +182,9 @@ export async function incrementCounterContract(): Promise<void> {
182182

183183
// Building the counter contract
184184
// Counter contract account id on testnet
185-
const counterContractId = AccountId.fromHex(
186-
'0xe59d8cd3c9ff2a0055da0b83ed6432',
187-
);
185+
const counterContractId = Address.fromBech32(
186+
'mtst1arjemrxne8lj5qz4mg9c8mtyxg954483',
187+
).accountId();
188188

189189
// Reading the public state of the counter contract from testnet,
190190
// and importing it into the WebClient

‎docs/src/web-client/create_deploy_tutorial.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,8 @@ export async function createMintConsume(): Promise<void> {
243243
return;
244244
}
245245

246-
const { WebClient, AccountStorageMode } = await import(
246+
// dynamic import → only in the browser, so WASM is loaded client‑side
247+
const { WebClient, AccountStorageMode, NoteType, Address } = await import(
247248
'@demox-labs/miden-sdk'
248249
);
249250

‎docs/src/web-client/creating_multiple_notes_tutorial.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -267,9 +267,10 @@ export async function multiSendWithDelegatedProver(): Promise<void> {
267267
const {
268268
WebClient,
269269
AccountStorageMode,
270-
AccountId,
270+
Address,
271271
NoteType,
272272
TransactionProver,
273+
NetworkId,
273274
Note,
274275
NoteAssets,
275276
OutputNoteArray,
@@ -346,15 +347,15 @@ export async function multiSendWithDelegatedProver(): Promise<void> {
346347

347348
// ── build 3 P2ID notes (100 MID each) ─────────────────────────────────────────────
348349
const recipientAddresses = [
349-
'0xbf1db1694c83841000008cefd4fce0',
350-
'0xee1a75244282c32000010a29bed5f4',
351-
'0x67dc56bd0cbe629000006f36d81029',
350+
'mtst1aqezqc90x7dkzypr9m5fmlpp85w6cl04',
351+
'mtst1apjg2ul76wrkxyr5qlcnczaskypa4ljn',
352+
'mtst1arpee6y9cm8t7ypn33pc8fzj6gkzz7kd',
352353
];
353354

354355
const assets = new NoteAssets([new FungibleAsset(faucet.id(), BigInt(100))]);
355356

356357
const p2idNotes = recipientAddresses.map((addr) => {
357-
const receiverAccountId = AccountId.fromHex(addr);
358+
const receiverAccountId = Address.fromBech32(addr).accountId();
358359
const note = Note.createP2IDNote(
359360
alice.id(),
360361
receiverAccountId,

‎docs/src/web-client/foreign_procedure_invocation_tutorial.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export async function foreignProcedureInvocation(): Promise<void> {
134134
const {
135135
AccountBuilder,
136136
AccountComponent,
137-
AccountId,
137+
Address,
138138
AccountType,
139139
MidenArrays,
140140
SecretKey,
@@ -218,9 +218,9 @@ export async function foreignProcedureInvocation(): Promise<void> {
218218
console.log('\n[STEP 2] Building counter contract from public state');
219219

220220
// Define the Counter Contract account id from counter contract deploy (same as Rust)
221-
const counterContractId = AccountId.fromHex(
222-
'0xe59d8cd3c9ff2a0055da0b83ed6432',
223-
);
221+
const counterContractId = Address.fromBech32(
222+
'mtst1arjemrxne8lj5qz4mg9c8mtyxg954483',
223+
).accountId();
224224

225225
// Import the counter contract
226226
let counterContractAccount = await client.getAccount(counterContractId);

‎docs/src/web-client/mint_consume_create_tutorial.md‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,14 @@ import { NoteType } from "@demox-labs/miden-sdk";
113113
// ...
114114

115115
// 7. Send tokens from Alice to Bob
116-
const bobAccountId = "0x599a54603f0cf9000000ed7a11e379";
116+
const bobAccountId = Address.fromBech32(
117+
'mtst1apve54rq8ux0jqqqqrkh5y0r0y8cwza6_qruqqypuyph',
118+
).accountId();
117119
console.log("Sending tokens to Bob's account...");
118120

119121
const sendTxRequest = client.newSendTransactionRequest(
120-
alice.id(), // Sender account
121-
AccountId.fromHex(bobAccountId), // Recipient account
122+
alice.id(), // Sender account ID
123+
bobAccountId, // Recipient account ID
122124
faucet.id(), // Asset ID (faucet that created the tokens)
123125
NoteType.Public, // Note visibility
124126
BigInt(100), // Amount to send
@@ -152,23 +154,23 @@ export async function createMintConsume(): Promise<void> {
152154
}
153155

154156
// dynamic import → only in the browser, so WASM is loaded client‑side
155-
const { WebClient, AccountStorageMode, AccountId, NoteType } = await import(
157+
const { WebClient, AccountStorageMode, NoteType, Address } = await import(
156158
'@demox-labs/miden-sdk'
157159
);
158160

159161
const nodeEndpoint = 'https://rpc.testnet.miden.io';
160162
const client = await WebClient.createClient(nodeEndpoint);
161163

162-
// 1. Sync and log block
164+
// 1. Sync with the latest blockchain state
163165
const state = await client.syncState();
164166
console.log('Latest block number:', state.blockNum());
165167

166-
// 2. Create Alice’s account
168+
// 2. Create Alice's account
167169
console.log('Creating account for Alice…');
168170
const alice = await client.newWallet(AccountStorageMode.public(), true, 0);
169171
console.log('Alice ID:', alice.id().toString());
170172

171-
// 3. Deploy faucet
173+
// 3. Deploy a fungible faucet
172174
console.log('Creating faucet…');
173175
const faucet = await client.newFaucet(
174176
AccountStorageMode.public(),
@@ -185,7 +187,7 @@ export async function createMintConsume(): Promise<void> {
185187
// 4. Mint tokens to Alice
186188
await client.syncState();
187189

188-
console.log('Minting 1000 tokens to Alice...');
190+
console.log('Minting tokens to Alice...');
189191
const mintTxRequest = client.newMintTransactionRequest(
190192
alice.id(),
191193
faucet.id(),
@@ -204,7 +206,7 @@ export async function createMintConsume(): Promise<void> {
204206
const mintedNoteIds = mintedNotes.map((n) =>
205207
n.inputNoteRecord().id().toString(),
206208
);
207-
console.log('Consumable note IDs:', mintedNoteIds);
209+
console.log('Minted note IDs:', mintedNoteIds);
208210

209211
// 6. Consume minted notes
210212
console.log('Consuming minted notes...');
@@ -216,11 +218,13 @@ export async function createMintConsume(): Promise<void> {
216218
console.log('Notes consumed.');
217219

218220
// 7. Send tokens to Bob
219-
const bobAccountId = '0x599a54603f0cf9000000ed7a11e379';
221+
const bobAccountId = Address.fromBech32(
222+
'mtst1apve54rq8ux0jqqqqrkh5y0r0y8cwza6_qruqqypuyph',
223+
).accountId();
220224
console.log("Sending tokens to Bob's account...");
221225
const sendTxRequest = client.newSendTransactionRequest(
222226
alice.id(),
223-
AccountId.fromHex(bobAccountId),
227+
bobAccountId,
224228
faucet.id(),
225229
NoteType.Public,
226230
BigInt(100),

‎docs/src/web-client/unauthenticated_note_how_to.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,6 @@ export async function unauthenticatedNoteTransfer(): Promise<void> {
154154
const {
155155
WebClient,
156156
AccountStorageMode,
157-
AccountId,
158157
NoteType,
159158
TransactionProver,
160159
Note,
@@ -255,11 +254,9 @@ export async function unauthenticatedNoteTransfer(): Promise<void> {
255254
console.log('Receiver:', receiver.id().toString());
256255

257256
const assets = new NoteAssets([new FungibleAsset(faucet.id(), BigInt(50))]);
258-
const receiverAccountId = AccountId.fromHex(receiver.id().toString());
259-
260257
const p2idNote = Note.createP2IDNote(
261258
sender.id(),
262-
receiverAccountId,
259+
receiver.id(),
263260
assets,
264261
NoteType.Public,
265262
new Felt(BigInt(0)), // aux value

‎web-client/lib/createMintConsume.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export async function createMintConsume(): Promise<void> {
66
}
77

88
// dynamic import → only in the browser, so WASM is loaded client‑side
9-
const { WebClient, AccountStorageMode, AccountId, NoteType } = await import(
9+
const { WebClient, AccountStorageMode, NoteType, Address } = await import(
1010
'@demox-labs/miden-sdk'
1111
);
1212

@@ -70,11 +70,13 @@ export async function createMintConsume(): Promise<void> {
7070
console.log('Notes consumed.');
7171

7272
// 7. Send tokens to Bob
73-
const bobAccountId = '0x599a54603f0cf9000000ed7a11e379';
73+
const bobAccountId = Address.fromBech32(
74+
'mtst1apve54rq8ux0jqqqqrkh5y0r0y8cwza6_qruqqypuyph',
75+
).accountId();
7476
console.log("Sending tokens to Bob's account...");
7577
const sendTxRequest = client.newSendTransactionRequest(
7678
alice.id(),
77-
AccountId.fromHex(bobAccountId),
79+
bobAccountId,
7880
faucet.id(),
7981
NoteType.Public,
8082
BigInt(100),

‎web-client/lib/foreignProcedureInvocation.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export async function foreignProcedureInvocation(): Promise<void> {
99
const {
1010
AccountBuilder,
1111
AccountComponent,
12-
AccountId,
12+
Address,
1313
AccountType,
1414
MidenArrays,
1515
SecretKey,
@@ -93,9 +93,9 @@ export async function foreignProcedureInvocation(): Promise<void> {
9393
console.log('\n[STEP 2] Building counter contract from public state');
9494

9595
// Define the Counter Contract account id from counter contract deploy (same as Rust)
96-
const counterContractId = AccountId.fromHex(
97-
'0xe59d8cd3c9ff2a0055da0b83ed6432',
98-
);
96+
const counterContractId = Address.fromBech32(
97+
'mtst1arjemrxne8lj5qz4mg9c8mtyxg954483',
98+
).accountId();
9999

100100
// Import the counter contract
101101
let counterContractAccount = await client.getAccount(counterContractId);

‎web-client/lib/incrementCounterContract.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export async function incrementCounterContract(): Promise<void> {
77

88
// dynamic import → only in the browser, so WASM is loaded client‑side
99
const {
10-
AccountId,
10+
Address,
1111
AccountBuilder,
1212
AccountComponent,
1313
AccountStorageMode,
@@ -72,9 +72,9 @@ export async function incrementCounterContract(): Promise<void> {
7272

7373
// Building the counter contract
7474
// Counter contract account id on testnet
75-
const counterContractId = AccountId.fromHex(
76-
'0xe59d8cd3c9ff2a0055da0b83ed6432',
77-
);
75+
const counterContractId = Address.fromBech32(
76+
'mtst1arjemrxne8lj5qz4mg9c8mtyxg954483',
77+
).accountId();
7878

7979
// Reading the public state of the counter contract from testnet,
8080
// and importing it into the WebClient

‎web-client/lib/multiSendWithDelegatedProver.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ export async function multiSendWithDelegatedProver(): Promise<void> {
1111
const {
1212
WebClient,
1313
AccountStorageMode,
14-
AccountId,
14+
Address,
1515
NoteType,
1616
TransactionProver,
17+
NetworkId,
1718
Note,
1819
NoteAssets,
1920
OutputNoteArray,
@@ -90,15 +91,15 @@ export async function multiSendWithDelegatedProver(): Promise<void> {
9091

9192
// ── build 3 P2ID notes (100 MID each) ─────────────────────────────────────────────
9293
const recipientAddresses = [
93-
'0xbf1db1694c83841000008cefd4fce0',
94-
'0xee1a75244282c32000010a29bed5f4',
95-
'0x67dc56bd0cbe629000006f36d81029',
94+
'mtst1aqezqc90x7dkzypr9m5fmlpp85w6cl04',
95+
'mtst1apjg2ul76wrkxyr5qlcnczaskypa4ljn',
96+
'mtst1arpee6y9cm8t7ypn33pc8fzj6gkzz7kd',
9697
];
9798

9899
const assets = new NoteAssets([new FungibleAsset(faucet.id(), BigInt(100))]);
99100

100101
const p2idNotes = recipientAddresses.map((addr) => {
101-
const receiverAccountId = AccountId.fromHex(addr);
102+
const receiverAccountId = Address.fromBech32(addr).accountId();
102103
const note = Note.createP2IDNote(
103104
alice.id(),
104105
receiverAccountId,

0 commit comments

Comments
 (0)