docs(feat): Aztec js intro page

docs/docs/developers/guides/js_apps/call_view_function.md

@@ -1,6 +1,7 @@
 ---
 title: How to Simulate a Function Call
 tags: [functions]
+sidebar_position: 2
 ---
 
 This guide explains how to `simulate` a function call using Aztec.js.

docs/docs/developers/guides/js_apps/create_account.md

@@ -1,6 +1,7 @@
 ---
 title: How to Create a New Account
 tags: [accounts]
+sidebar_position: 0
 ---
 
 This guide explains how to create a new account using Aztec.js.

docs/docs/developers/guides/js_apps/deploy_contract.md

@@ -1,26 +1,76 @@
 ---
 title: How to Deploy a Contract
 tags: [contracts]
+sidebar_position: 1
 ---
 
-This guide explains how to deploy a smart contract using Aztec.js.
+Once you have [compiled](../smart_contracts/how_to_compile_contract.md) your contracts you can proceed to deploying them using Aztec.js.
+
+You can use this method to deploy your contracts to the sandbox or to a remote network.
 
 ## Prerequisites
 
-You should have a wallet to act as the deployer, and a contract artifact ready to be deployed.
+- Contract artifacts ready (go to [How to Compile Contract](../smart_contracts/how_to_compile_contract.md) for instructions on how to compile contracts)
+- Aztec Sandbox running (go to [Getting Started](../../getting_started.md) for instructions on how to install and run the sandbox)
+
+## Deploy
+
+Contracts can be deployed using the `aztec.js` library.
+
+### Generate the typescript artifact
+
+Compile the contract:
+
+```bash
+aztec-nargo compile
+```
+
+Generate the typescript class:
+
+```bash
+aztec codegen ./aztec-nargo/output/target/path -o src/artifacts
+```
+
+This would create a typescript file like `Example.ts` in `./src/artifacts`.
+
+### Deploying
+
+Import the typescript artifact into your file.
+
+#include_code import_artifact yarn-project/end-to-end/src/sample-dapp/deploy.mjs typescript
+
+Then you can use the `Contract` class **or** the [generated contract class](#using-generated-class) to deploy the contract.
+
+To use the `Contract` class to deploy a contract:
+
+#include_code dapp-deploy yarn-project/end-to-end/src/sample-dapp/deploy.mjs typescript
+
+#### Deploy Arguments
+
+There are several optional arguments that can be passed:
+
+The `deploy(...)` method is generated automatically with the typescript class representing your contract.
+
+Additionally the `.send()` method can have a few optional arguments too, which are specified in an optional object:
 
-You can learn how to create wallets from [this guide](./create_account.md).
+#include_code deploy_options yarn-project/aztec.js/src/contract/deploy_method.ts typescript
 
-You can read about contract artifacts [here](../../../aztec/smart_contracts/contract_structure.md).
+### Using generated contract class
 
-## Import the contract artifact
+As a more complete example, here a `Token` contract deployment whose artifacts are included in the `@aztec/noir-contracts.js` package. You can use similar deployment syntax with your own contract by importing the TS artifact generated with `aztec codegen`. This example uses the generated `TokenContract` to deploy.
 
-In this guide we are using a Token contract artifact.
+```ts
+#include_code create_account_imports yarn-project/end-to-end/src/composed/docs_examples.test.ts raw
+#include_code import_contract yarn-project/end-to-end/src/composed/docs_examples.test.ts raw
+#include_code import_token_contract yarn-project/end-to-end/src/composed/docs_examples.test.ts raw
 
-#include_code import_token_contract yarn-project/end-to-end/src/composed/docs_examples.test.ts typescript
+async function main(){
 
-## Deploy contract
+    #include_code full_deploy yarn-project/end-to-end/src/composed/docs_examples.test.ts raw
 
-#include_code deploy_contract yarn-project/end-to-end/src/composed/docs_examples.test.ts typescript
+}
+```
 
-To learn how to send a transaction from Aztec.js read [this guide](./send_transaction.md). You can also call a `view` function from Aztec.js by reading [this guide](./call_view_function.md).
+:::note
+You can try running the deployment with the same salt the second time in which case the transaction will fail because the address has been already deployed to.
+:::

docs/docs/developers/guides/js_apps/index.md

@@ -0,0 +1,29 @@
+---
+title: Aztec.js
+tags: [aztec.js, javascript, typescript]
+---
+
+import DocCardList from "@theme/DocCardList";
+
+Aztec.js is a library that provides APIs for managing accounts and interacting with contracts on the Aztec network. It communicates with the [Private eXecution Environment (PXE)](../../../aztec/concepts/pxe/index.md) through a `PXE` implementation, allowing developers to easily register new accounts, deploy contracts, view functions, and send transactions.
+
+## Installing
+
+```
+npm install @aztec/aztec.js
+```
+
+## Importing
+
+At the top of your JavaScript file, you can import what you need, eg:
+
+#include_code import_aztecjs yarn-project/end-to-end/src/e2e_simple.test.ts typescript
+
+## Flow
+
+These are some of the important functions you'll need to use in your Aztec.js:
+
+- [Create an account with `@aztec/accounts`](./create_account.md)
+- [Deploy a contract](./deploy_contract.md)
+- [Simulate a function call](./call_view_function.md)
+- [Send a transaction](./send_transaction.md)

docs/docs/developers/guides/js_apps/send_transaction.md

@@ -1,5 +1,6 @@
 ---
 title: How to Send a Transaction
+sidebar_position: 3
 ---
 
 This guide explains how to send a transaction using Aztec.js.

docs/docs/developers/guides/smart_contracts/index.mdx → docs/docs/developers/guides/smart_contracts/index.md

@@ -32,7 +32,7 @@ aztec = { git="https://github.com/AztecProtocol/aztec-packages/", tag="#include_
 4.  Write unit tests [using the TXE](testing.md) and end-to-end
     tests [with typescript](../js_apps/test.md)
 5.  [Compile](how_to_compile_contract.md) your contract
-6.  [Deploy](how_to_deploy_contract.md) your contract
+6.  [Deploy](../js_apps/deploy_contract.md) your contract with Aztec.js
 
 ## Section Contents
 

docs/docs/developers/tutorials/codealong/contract_tutorials/private_voting_contract.md

@@ -175,4 +175,4 @@ Follow the crowdfunding contracts tutorial on the [next page](./crowdfunding_con
 - [Unconstrained functions](../../../../aztec/smart_contracts/functions/attributes.md#unconstrained-functions).
 - [Oracles](../../../../aztec/smart_contracts/oracles/index.md)
 - [Nullifier secrets](../../../../aztec/concepts/accounts/keys.md#nullifier-keys).
-- [How to deploy a contract to the sandbox](../../../guides/smart_contracts/how_to_deploy_contract.md)
+- [How to deploy a contract to the sandbox](../../../guides/js_apps/deploy_contract.md)

docs/docs/developers/tutorials/codealong/js_tutorials/simple_dapp/2_contract_deployment.md

@@ -73,7 +73,7 @@ Here, we are using the `Contract` class with the compiled artifact to send a new
 Note that the token's `constructor()` method expects an `owner` address to set as the contract `admin`. We are using the first account from the Sandbox for this.
 
 :::info
-If you are using the generated typescript classes, you can drop the generic `ContractDeployer` in favor of using the `deploy` method of the generated class, which will automatically load the artifact for you and type-check the constructor arguments. See the [How to deploy a contract](../../../../guides/smart_contracts/how_to_deploy_contract.md) page for more info.
+If you are using the generated typescript classes, you can drop the generic `ContractDeployer` in favor of using the `deploy` method of the generated class, which will automatically load the artifact for you and type-check the constructor arguments. See the [How to deploy a contract](../../../../guides/js_apps/deploy_contract.md) page for more info.
 :::
 
 Run the snippet above as `node src/deploy.mjs`, and you should see the following output, along with a new `addresses.json` file in your project root:

yarn-project/end-to-end/src/e2e_simple.test.ts

@@ -1,5 +1,7 @@
+// docs:start:import_aztecjs
 import type { AztecNodeConfig } from '@aztec/aztec-node';
 import { ContractDeployer, Fr, type Wallet } from '@aztec/aztec.js';
+// docs:end:import_aztecjs
 // eslint-disable-next-line no-restricted-imports
 import { EthAddress } from '@aztec/foundation/eth-address';
 import { StatefulTestContractArtifact } from '@aztec/noir-contracts.js/StatefulTest';

yarn-project/end-to-end/src/sample-dapp/deploy.mjs

@@ -2,7 +2,9 @@
 import { getInitialTestAccountsWallets } from '@aztec/accounts/testing';
 import { Contract, createPXEClient, loadContractArtifact, waitForPXE } from '@aztec/aztec.js';
 // docs:end:deploy-imports
+// docs:start:import_artifact
 import { TokenContractArtifact } from '@aztec/noir-contracts.js/Token';
+// docs:end:import_artifact
 import { TokenContract } from '@aztec/noir-contracts.js/Token';
 
 import { writeFileSync } from 'fs';