docs: Dapp tutorial #2109

spalladino · 2023-09-07T20:25:52Z

Tutorial on building a dapp. I went for the simplest possible options in order to focus on aztec.js usage and avoid the need for other prior knowledge: I used javascript instead of typescript, and set up a console app instead of a web one. Does not include anything on account creation since that is not a dapp concern but a wallet's responsibility.

Pending:

Add links to the next section on each page of the tutorial
Add a small page on testing (with a link to the longer testing guide)
Run the code on the CI

Fixes #2047
Fixes #2048
Fixes #2049
Fixes #2050
Fixes #2051

PhilWindle · 2023-09-11T12:43:38Z

docs/docs/dev_docs/dapps/tutorials/contract_interaction.md

+Balance of 0x0e1f60e8566e2c6d32378bdcadb7c63696e853281be798c107266b8c3a88ea9b: 0
+
+Awaiting transaction to be mined
+Transaction has been mind on block 4


Should be Transaction has been mined on block 4

PhilWindle · 2023-09-11T12:48:11Z

docs/docs/dev_docs/dapps/tutorials/project_setup.md

+
+We'll use [`yarn`](https://yarnpkg.com/) for managing our project and dependencies, though you can also use `npm` or your Javascript package manager of choice.
+
+1. Ensure node version is 18 or more by running.


Should possibly read 18 or higher?

PhilWindle · 2023-09-11T13:04:26Z

docs/docs/dev_docs/dapps/tutorials/testing.md

+
+Create a new file `src/index.test.mjs` with the imports we'll be using and an empty test suite to begin with:
+
+```ts


Don't know if it makes any difference but should this be js?

PhilWindle

A couple of comments but other than that this looks great!

@PhilWindle

Addresses comments by @PhilWindle on the dapp tutorial in #2109. Damn auto-merge.

@PhilWindle

Addresses comments by @PhilWindle on the dapp tutorial in AztecProtocol/aztec-packages#2109. Damn auto-merge.

🤖 I have created a release *beep* *boop* --- <details><summary>aztec-packages: 0.7.0</summary> ## [0.7.0](aztec-packages-v0.6.7...aztec-packages-v0.7.0) (2023-09-13) ### ⚠ BREAKING CHANGES * **aztec-noir:** rename noir-aztec to aztec-noir ([#2071](#2071)) ### Features * **build:** Use LTS version of ubuntu ([#2239](#2239)) ([ce6671e](ce6671e)) * **ci:** Run nargo test in ci on all packages ([#2197](#2197)) ([cca55f2](cca55f2)) * **cli:** Add commands for generating ts and nr interfaces ([#2241](#2241)) ([c11b70d](c11b70d)), closes [#2183](#2183) * **cli:** Inspect contract command ([#2248](#2248)) ([381706e](381706e)), closes [#2180](#2180) * Define specific Sandbox version when running docker-compose up ([#2238](#2238)) ([71da236](71da236)) * **docs:** Updated docs explaining Sandbox accounts ([#2235](#2235)) ([f560066](f560066)) * Optimise sandbox startup time by only initialising the BB solver once. ([#2240](#2240)) ([e9cac9c](e9cac9c)) * Remove entrypoint collection ([#2148](#2148)) ([e97c94d](e97c94d)) * Validate nargo version against expected one ([#2254](#2254)) ([011c0b7](011c0b7)) ### Bug Fixes * Add cjs-entry to bbjs package files ([#2237](#2237)) ([ae16193](ae16193)) * Add link to example contracts in the monorepo ([#2219](#2219)) ([8aede54](8aede54)) * **build:** Update ubuntu version used in Docker builds ([#2236](#2236)) ([dbe80b7](dbe80b7)) * **docs:** Use code snippet macros in bridge docs ([#2205](#2205)) ([0c3a627](0c3a627)) * Format barretenberg ([#2209](#2209)) ([0801372](0801372)) * Msgpack blowup with bigger objects ([#2207](#2207)) ([b909937](b909937)) * Refactor constraints in scalar mul to use the high limb ([#2161](#2161)) ([1d0e25d](1d0e25d)) * Reinstate v stripping in build ([#2220](#2220)) ([13d34f5](13d34f5)) * Return partial witnesses based on the content of read requests. ([#2164](#2164)) ([a2125f7](a2125f7)) * Try e2e cli timeout bump ([#2210](#2210)) ([a039fdd](a039fdd)) * Try workaround sample dapp ci timeout ([#2208](#2208)) ([e39f6bf](e39f6bf)) ### Miscellaneous * Add a Nargo workspace in `noir-contracts` ([#2083](#2083)) ([728a79c](728a79c)) * Add debugging to run_tests ([#2212](#2212)) ([1c5e78a](1c5e78a)) * **aztec-noir:** Rename noir-aztec to aztec-noir ([#2071](#2071)) ([e1e14d2](e1e14d2)) * **circuits:** Merge and root rollup cbind msgpack ([#2192](#2192)) ([4f3ecee](4f3ecee)) * **noir-contracts:** 1655 - rename functions to make hack clearer for publicly created notes ([#2230](#2230)) ([707bc09](707bc09)) * Run the test for zero division with mul div up ([#2206](#2206)) ([747de6a](747de6a)) * Update url for acir artifacts ([#2231](#2231)) ([5e0abd3](5e0abd3)) * Use workspace build with `nargo compile --workspace` ([#2266](#2266)) ([9ab66a0](9ab66a0)) ### Documentation * Dapp tutorial ([#2109](#2109)) ([573dbc2](573dbc2)), closes [#2051](#2051) * Minor fixes to dapp tutorial ([#2203](#2203)) ([dcc927c](dcc927c)) </details> <details><summary>barretenberg.js: 0.7.0</summary> ## [0.7.0](barretenberg.js-v0.6.7...barretenberg.js-v0.7.0) (2023-09-13) ### Bug Fixes * Add cjs-entry to bbjs package files ([#2237](#2237)) ([ae16193](ae16193)) ### Miscellaneous * Add debugging to run_tests ([#2212](#2212)) ([1c5e78a](1c5e78a)) </details> <details><summary>barretenberg: 0.7.0</summary> ## [0.7.0](barretenberg-v0.6.7...barretenberg-v0.7.0) (2023-09-13) ### ⚠ BREAKING CHANGES * **aztec-noir:** rename noir-aztec to aztec-noir ([#2071](#2071)) ### Features * **build:** Use LTS version of ubuntu ([#2239](#2239)) ([ce6671e](ce6671e)) ### Bug Fixes * **build:** Update ubuntu version used in Docker builds ([#2236](#2236)) ([dbe80b7](dbe80b7)) * Format barretenberg ([#2209](#2209)) ([0801372](0801372)) * Msgpack blowup with bigger objects ([#2207](#2207)) ([b909937](b909937)) * Refactor constraints in scalar mul to use the high limb ([#2161](#2161)) ([1d0e25d](1d0e25d)) ### Miscellaneous * Add debugging to run_tests ([#2212](#2212)) ([1c5e78a](1c5e78a)) * **aztec-noir:** Rename noir-aztec to aztec-noir ([#2071](#2071)) ([e1e14d2](e1e14d2)) * Update url for acir artifacts ([#2231](#2231)) ([5e0abd3](5e0abd3)) </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).

🤖 I have created a release *beep* *boop* --- <details><summary>aztec-packages: 0.7.0</summary> ## [0.7.0](AztecProtocol/aztec-packages@aztec-packages-v0.6.7...aztec-packages-v0.7.0) (2023-09-13) ### ⚠ BREAKING CHANGES * **aztec-noir:** rename noir-aztec to aztec-noir ([#2071](AztecProtocol/aztec-packages#2071)) ### Features * **build:** Use LTS version of ubuntu ([#2239](AztecProtocol/aztec-packages#2239)) ([ce6671e](AztecProtocol/aztec-packages@ce6671e)) * **ci:** Run nargo test in ci on all packages ([#2197](AztecProtocol/aztec-packages#2197)) ([cca55f2](AztecProtocol/aztec-packages@cca55f2)) * **cli:** Add commands for generating ts and nr interfaces ([#2241](AztecProtocol/aztec-packages#2241)) ([c11b70d](AztecProtocol/aztec-packages@c11b70d)), closes [#2183](AztecProtocol/aztec-packages#2183) * **cli:** Inspect contract command ([#2248](AztecProtocol/aztec-packages#2248)) ([381706e](AztecProtocol/aztec-packages@381706e)), closes [#2180](AztecProtocol/aztec-packages#2180) * Define specific Sandbox version when running docker-compose up ([#2238](AztecProtocol/aztec-packages#2238)) ([71da236](AztecProtocol/aztec-packages@71da236)) * **docs:** Updated docs explaining Sandbox accounts ([#2235](AztecProtocol/aztec-packages#2235)) ([f560066](AztecProtocol/aztec-packages@f560066)) * Optimise sandbox startup time by only initialising the BB solver once. ([#2240](AztecProtocol/aztec-packages#2240)) ([e9cac9c](AztecProtocol/aztec-packages@e9cac9c)) * Remove entrypoint collection ([#2148](AztecProtocol/aztec-packages#2148)) ([e97c94d](AztecProtocol/aztec-packages@e97c94d)) * Validate nargo version against expected one ([#2254](AztecProtocol/aztec-packages#2254)) ([011c0b7](AztecProtocol/aztec-packages@011c0b7)) ### Bug Fixes * Add cjs-entry to bbjs package files ([#2237](AztecProtocol/aztec-packages#2237)) ([ae16193](AztecProtocol/aztec-packages@ae16193)) * Add link to example contracts in the monorepo ([#2219](AztecProtocol/aztec-packages#2219)) ([8aede54](AztecProtocol/aztec-packages@8aede54)) * **build:** Update ubuntu version used in Docker builds ([#2236](AztecProtocol/aztec-packages#2236)) ([dbe80b7](AztecProtocol/aztec-packages@dbe80b7)) * **docs:** Use code snippet macros in bridge docs ([#2205](AztecProtocol/aztec-packages#2205)) ([0c3a627](AztecProtocol/aztec-packages@0c3a627)) * Format barretenberg ([#2209](AztecProtocol/aztec-packages#2209)) ([0801372](AztecProtocol/aztec-packages@0801372)) * Msgpack blowup with bigger objects ([#2207](AztecProtocol/aztec-packages#2207)) ([b909937](AztecProtocol/aztec-packages@b909937)) * Refactor constraints in scalar mul to use the high limb ([#2161](AztecProtocol/aztec-packages#2161)) ([1d0e25d](AztecProtocol/aztec-packages@1d0e25d)) * Reinstate v stripping in build ([#2220](AztecProtocol/aztec-packages#2220)) ([13d34f5](AztecProtocol/aztec-packages@13d34f5)) * Return partial witnesses based on the content of read requests. ([#2164](AztecProtocol/aztec-packages#2164)) ([a2125f7](AztecProtocol/aztec-packages@a2125f7)) * Try e2e cli timeout bump ([#2210](AztecProtocol/aztec-packages#2210)) ([a039fdd](AztecProtocol/aztec-packages@a039fdd)) * Try workaround sample dapp ci timeout ([#2208](AztecProtocol/aztec-packages#2208)) ([e39f6bf](AztecProtocol/aztec-packages@e39f6bf)) ### Miscellaneous * Add a Nargo workspace in `noir-contracts` ([#2083](AztecProtocol/aztec-packages#2083)) ([728a79c](AztecProtocol/aztec-packages@728a79c)) * Add debugging to run_tests ([#2212](AztecProtocol/aztec-packages#2212)) ([1c5e78a](AztecProtocol/aztec-packages@1c5e78a)) * **aztec-noir:** Rename noir-aztec to aztec-noir ([#2071](AztecProtocol/aztec-packages#2071)) ([e1e14d2](AztecProtocol/aztec-packages@e1e14d2)) * **circuits:** Merge and root rollup cbind msgpack ([#2192](AztecProtocol/aztec-packages#2192)) ([4f3ecee](AztecProtocol/aztec-packages@4f3ecee)) * **noir-contracts:** 1655 - rename functions to make hack clearer for publicly created notes ([#2230](AztecProtocol/aztec-packages#2230)) ([707bc09](AztecProtocol/aztec-packages@707bc09)) * Run the test for zero division with mul div up ([#2206](AztecProtocol/aztec-packages#2206)) ([747de6a](AztecProtocol/aztec-packages@747de6a)) * Update url for acir artifacts ([#2231](AztecProtocol/aztec-packages#2231)) ([5e0abd3](AztecProtocol/aztec-packages@5e0abd3)) * Use workspace build with `nargo compile --workspace` ([#2266](AztecProtocol/aztec-packages#2266)) ([9ab66a0](AztecProtocol/aztec-packages@9ab66a0)) ### Documentation * Dapp tutorial ([#2109](AztecProtocol/aztec-packages#2109)) ([573dbc2](AztecProtocol/aztec-packages@573dbc2)), closes [#2051](AztecProtocol/aztec-packages#2051) * Minor fixes to dapp tutorial ([#2203](AztecProtocol/aztec-packages#2203)) ([dcc927c](AztecProtocol/aztec-packages@dcc927c)) </details> <details><summary>barretenberg.js: 0.7.0</summary> ## [0.7.0](AztecProtocol/aztec-packages@barretenberg.js-v0.6.7...barretenberg.js-v0.7.0) (2023-09-13) ### Bug Fixes * Add cjs-entry to bbjs package files ([#2237](AztecProtocol/aztec-packages#2237)) ([ae16193](AztecProtocol/aztec-packages@ae16193)) ### Miscellaneous * Add debugging to run_tests ([#2212](AztecProtocol/aztec-packages#2212)) ([1c5e78a](AztecProtocol/aztec-packages@1c5e78a)) </details> <details><summary>barretenberg: 0.7.0</summary> ## [0.7.0](AztecProtocol/aztec-packages@barretenberg-v0.6.7...barretenberg-v0.7.0) (2023-09-13) ### ⚠ BREAKING CHANGES * **aztec-noir:** rename noir-aztec to aztec-noir ([#2071](AztecProtocol/aztec-packages#2071)) ### Features * **build:** Use LTS version of ubuntu ([#2239](AztecProtocol/aztec-packages#2239)) ([ce6671e](AztecProtocol/aztec-packages@ce6671e)) ### Bug Fixes * **build:** Update ubuntu version used in Docker builds ([#2236](AztecProtocol/aztec-packages#2236)) ([dbe80b7](AztecProtocol/aztec-packages@dbe80b7)) * Format barretenberg ([#2209](AztecProtocol/aztec-packages#2209)) ([0801372](AztecProtocol/aztec-packages@0801372)) * Msgpack blowup with bigger objects ([#2207](AztecProtocol/aztec-packages#2207)) ([b909937](AztecProtocol/aztec-packages@b909937)) * Refactor constraints in scalar mul to use the high limb ([#2161](AztecProtocol/aztec-packages#2161)) ([1d0e25d](AztecProtocol/aztec-packages@1d0e25d)) ### Miscellaneous * Add debugging to run_tests ([#2212](AztecProtocol/aztec-packages#2212)) ([1c5e78a](AztecProtocol/aztec-packages@1c5e78a)) * **aztec-noir:** Rename noir-aztec to aztec-noir ([#2071](AztecProtocol/aztec-packages#2071)) ([e1e14d2](AztecProtocol/aztec-packages@e1e14d2)) * Update url for acir artifacts ([#2231](AztecProtocol/aztec-packages#2231)) ([5e0abd3](AztecProtocol/aztec-packages@5e0abd3)) </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).

docs: Dapp tutorial

b1f4816

spalladino requested a review from PhilWindle September 7, 2023 20:25

spalladino added 8 commits September 7, 2023 17:28

Fix doc identifier

17c194c

Add dapp tutorial to CI

f68f21f

Jest to pick tests defined in js files as well

df22e8c

Format

f8f2405

Fix sidebar

c2e14dc

Wait for sandbox to init in dapp e2e test

90eb1d2

Add new testing section and a few new helper functions

308a315

Add links between tutorial sections

2fc1567

spalladino marked this pull request as ready for review September 8, 2023 15:06

spalladino enabled auto-merge (squash) September 8, 2023 15:06

PhilWindle reviewed Sep 11, 2023

View reviewed changes

PhilWindle approved these changes Sep 11, 2023

View reviewed changes

spalladino merged commit 573dbc2 into master Sep 11, 2023

spalladino deleted the palla/dapp-tutorial branch September 11, 2023 14:14

AztecBot mentioned this pull request Sep 11, 2023

chore(master): Release 0.7.0 #2200

Merged

spalladino mentioned this pull request Sep 11, 2023

docs: Minor fixes to dapp tutorial #2203

Merged

PhilWindle pushed a commit that referenced this pull request Sep 11, 2023

docs: Minor fixes to dapp tutorial (#2203)

dcc927c

Addresses comments by @PhilWindle on the dapp tutorial in #2109. Damn auto-merge.

AztecBot pushed a commit to AztecProtocol/docs that referenced this pull request Sep 11, 2023

docs: Minor fixes to dapp tutorial (#2203)

d624ccc

Addresses comments by @PhilWindle on the dapp tutorial in AztecProtocol/aztec-packages#2109. Damn auto-merge.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: Dapp tutorial #2109

docs: Dapp tutorial #2109

spalladino commented Sep 7, 2023 •

edited

Loading

PhilWindle Sep 11, 2023 •

edited

Loading

PhilWindle Sep 11, 2023

PhilWindle Sep 11, 2023

PhilWindle left a comment


		We'll use [`yarn`](https://yarnpkg.com/) for managing our project and dependencies, though you can also use `npm` or your Javascript package manager of choice.

		1. Ensure node version is 18 or more by running.


		Create a new file `src/index.test.mjs` with the imports we'll be using and an empty test suite to begin with:

		```ts

docs: Dapp tutorial #2109

docs: Dapp tutorial #2109

Conversation

spalladino commented Sep 7, 2023 • edited Loading

PhilWindle Sep 11, 2023 • edited Loading

Choose a reason for hiding this comment

PhilWindle Sep 11, 2023

Choose a reason for hiding this comment

PhilWindle Sep 11, 2023

Choose a reason for hiding this comment

PhilWindle left a comment

Choose a reason for hiding this comment

spalladino commented Sep 7, 2023 •

edited

Loading

PhilWindle Sep 11, 2023 •

edited

Loading