diff --git a/docs/getting-started/create-an-app.mdx b/docs/getting-started/create-an-app.mdx index 6b8fcf4c..a20c5aeb 100644 --- a/docs/getting-started/create-an-app.mdx +++ b/docs/getting-started/create-an-app.mdx @@ -1,6 +1,6 @@ --- -sidebar_position: 5 -title: 4. Create an App +sidebar_position: 6 +title: 5. Create an App description: Make a frontend web app that interacts with your smart contracts. --- @@ -16,7 +16,7 @@ Let's get started. You're going to need [Node.js](https://nodejs.org/en/download/package-manager/) v18.14.1 or greater. If you haven't yet, install it now. -Then we want to initialize the current directory, `soroban-tutorial`, as an Astro project, but Astro doesn't like that. It wants to create a new directory. So let's go ahead and do that, then move all the contents of the new directory into their parent directory: +Then we want to initialize the current directory, `soroban-tutorial`, as an Astro project, but Astro doesn't like that. It wants to create a new directory. So let's go ahead and do that, then move all the contents of the new directory into its parent directory. From the original `soroban-tutorial` directory, run: ```bash npm create astro@4.0.1 soroban-tutorial -- --template basics --install --no-git --typescript strictest @@ -43,74 +43,27 @@ git commit -m "Initialize Astro project" Before we even open the new frontend files, let's generate an NPM package for the Hello World contract. This is our suggested way to interact with contracts from frontends. These generated libraries work with any JavaScript project (not a specific UI like React), and make it easy to work with some of the trickiest bits of Soroban, like encoding [XDR](https://soroban.stellar.org/docs/fundamentals-and-concepts/fully-typed-contracts). -This is going to use the CLI command `soroban contract bindings typescript`. Unfortunately, the version of `bindings typescript` packaged with CLI v0.9.4 has some bugs, and the fix can't be released yet because the `main` branch of the CLI is broken with futurenet. To work around this, we're going to install a pinned version of the CLI from a fixed-and-still-futurenet-compatible fork. Create a directory called `.cargo` (with the dot; it's a hidden folder): - - mkdir .cargo - -Then add one file to it, `config.toml`. Paste these contents into it: - -```toml -[alias] # command aliases -install_soroban = "install --git https://github.com/AhaLabs/soroban-tools --branch smartdeploy --root ./target soroban-cli --debug" -``` - -Now install the pinned version by using the alias you just set up: - - cargo install_soroban - -This will take a couple minutes; it builds a local version from the `smartdeploy` branch into `target/bin/soroban`. Once it's done, check that it worked: - -```bash -ls target/bin/soroban -``` - -And check the version info of this `smartdeploy` install: - -```bash -./target/bin/soroban --version -``` - -If you want, you can add `./target/bin/` [to your PATH](https://unix.stackexchange.com/questions/26047/how-to-correctly-add-a-path-to-path), so that anytime you're in a project with a locally-installed version of `soroban` in its `target/bin` directory, you'll automatically use it (rather than your global version) when you just type `soroban`. For this project, let's also add a `soroban` script in the root of the project that automatically installs the pinned version if it's not there, then uses it. This will make it easier for your collaborators to work with you. Create a file called just `soroban` and paste the following contents: +This is going to use the CLI command `soroban contract bindings typescript`: ```bash -#!/bin/bash -if [ ! -f ./target/bin/soroban ]; then - cargo install_soroban -fi -./target/bin/soroban "$@" # `$@` expands to all arguments passed to this script -``` - -Make sure it's executable: - -```bash -chmod +x soroban -``` - -Ok, now you can finally generate that NPM package: - -```bash -./soroban contract bindings typescript \ +soroban contract bindings typescript \ --network testnet \ --contract-id $(cat .soroban/hello-id) \ - --output-dir hello-soroban-client + --output-dir node_modules/hello-soroban-client ``` We attempt to keep the code in these generated libraries readable, so go ahead and look around. Open up the new `hello-soroban-client` directory in your editor. If you've built or contributed to Node projects, it will all look familiar. You'll see a `package.json` file, a `src` directory, a `tsconfig.json`, and even a README. The README is a great place to start. Go ahead and give it a read. -As it says, when using local libraries, we've had the [most success](https://github.com/stellar/soroban-example-dapp/pull/117#discussion_r1232873560) when generating them directly into the `node_modules` folder, and leaving them out of the `dependencies` section. Yes, this is surprising, but it works the best. Go ahead and move this new library there: - -```bash -mv hello-soroban-client node_modules -``` +As it says, when using local libraries, we've had the [most success](https://github.com/stellar/soroban-example-dapp/pull/117#discussion_r1232873560) when generating them directly into the `node_modules` folder, and leaving them out of the `dependencies` section. Yes, this is surprising, but it works the best. -And then let's update the `package.json` in your `soroban-tutorial` project with a `postinstall` script to make sure the generated library stays up-to-date: +Let's update the `package.json` in your `soroban-tutorial` project with a `postinstall` script to make sure the generated library stays up-to-date: -```diff +```diff title="package.json" "scripts": { ... - "astro": "astro" + "astro": "astro", -+ "postinstall": "./soroban contract bindings typescript --network testnet --contract-id $(cat .soroban/hello-id) --output-dir node_modules/hello-soroban-client" ++ "postinstall": "soroban contract bindings typescript --network testnet --contract-id $(cat .soroban/hello-id) --output-dir node_modules/hello-soroban-client" } ``` @@ -118,7 +71,7 @@ And then let's update the `package.json` in your `soroban-tutorial` project with Now let's open up `src/pages/index.astro` and add some code to call the contract. We'll start by importing the generated library: -```diff +```diff title="src/pages/index.astro" --- import Layout from '../layouts/Layout.astro'; import Card from '../components/Card.astro'; @@ -135,7 +88,7 @@ Now let's open up `src/pages/index.astro` and add some code to call the contract Then find the `

` tag and replace its contents with the greeting: -```diff +```diff title="src/pages/index.astro" -

Welcome to Astro

+

{greeting.join(' ')}

``` @@ -146,7 +99,7 @@ Now start the dev server: npm run dev ``` -And open [http://localhost:3000](http://localhost:3000) in your browser. You should see the greeting from the contract! +And open [http://localhost:4321](http://localhost:4321) in your browser. You should see the greeting from the contract! You can try updating the `{ to: 'Soroban' }` argument. When you save the file, the page will automatically update. @@ -177,10 +130,11 @@ While `hello` is a simple view-only/read method, `increment` changes on-chain st The way signing works in a browser is with a _wallet_. Wallets can be web apps, browser extensions, standalone apps, or even separate hardware devices. -Right now, the wallet that best supports Soroban is -[Freighter](../reference/freighter.mdx). It's a Chrome extension. Go ahead and [install it now](https://freighter.app). +Right now, the wallet that best supports Soroban is [Freighter](../reference/freighter.mdx). It is available as a Firefox Add-on, as well as extensions for Chrome and Brave. Go ahead and [install it now](https://freighter.app). -Once it's installed, open it up, go to Settings (the gear icon) → Preferences and toggle the switch to Enable Experimental Mode. Then go back to its home screen and select "Future Net" from the top-right dropdown. Finally, if it shows the message that your Stellar address is not funded, go ahead and click the "Fund with Friendbot" button. +Once it's installed, open it up by clicking the extension icon. If this is your first time using Freighter, you will need to create a new wallet. Go through the prompts to create a password and save your recovery passphrase. + +Go to Settings (the gear icon) → Preferences and toggle the switch to Enable Experimental Mode. Then go back to its home screen and select "Test Net" from the top-right dropdown. Finally, if it shows the message that your Stellar address is not funded, go ahead and click the "Fund with Friendbot" button. Now you're all set up to use Freighter as a user, and you can add it to your app. @@ -202,7 +156,7 @@ npm run postinstall Now let's add a new component to the `src/components` directory called `ConnectFreighter.astro` with the following contents: -```html +```html title="src/components/ConnectFreighter.astro"
@@ -270,7 +224,7 @@ Before we add this to our index page, let's make the buttons look better. Open ` -```css +```css title="layouts/Layout.astro" button { border: 1px solid rgb(var(--accent)); background-color: #23262d; @@ -302,7 +256,7 @@ This copies the styles from the `Card` components that Astro included in the tem Now we can import the component in the frontmatter of `pages/index.astro`: -```diff +```diff title="pages/index.astro" --- import Layout from '../layouts/Layout.astro'; import Card from '../components/Card.astro'; @@ -313,7 +267,7 @@ Now we can import the component in the frontmatter of `pages/index.astro`: And add it right below the `

`: -```diff +```diff title="pages/index.astro"

{greeting.join(' ')}

+ ``` @@ -330,11 +284,11 @@ Now you're ready to sign the call to `increment`! ### Call `increment` -We're going to generate a contract client for the incrementor contract with a similar command to the one we used before. Let's move the `hello` bindings generation to its own script, add this one, and call them both from `postinstall` using a double ampersand ([&&](https://stackoverflow.com/a/25669618/249801)): +We're going to generate a contract client for the incrementor contract with a similar command to the one we used before. Let's move the `hello` bindings generation to its own script, add one for incrementor, and call them both from `postinstall` using a double ampersand ([&&](https://stackoverflow.com/a/25669618/249801)): -```json -"bindings:hello": "./soroban contract bindings typescript --network testnet --contract-id $(cat .soroban/hello-id) --output-dir node_modules/hello-soroban-client", -"bindings:incrementor": "./soroban contract bindings typescript --network testnet --contract-id $(cat .soroban/incrementor-id) --output-dir node_modules/incrementor-client", +```json title="package.json" +"bindings:hello": "soroban contract bindings typescript --network testnet --contract-id $(cat .soroban/hello-id) --output-dir node_modules/hello-soroban-client", +"bindings:incrementor": "soroban contract bindings typescript --network testnet --contract-id $(cat .soroban/incrementor-id) --output-dir node_modules/incrementor-client", "postinstall": "npm run bindings:hello && npm run bindings:incrementor" ``` @@ -346,14 +300,19 @@ npm i Now we can import from `incrementor-client` and start using it. We'll again create a new Astro component. Create a new file at `src/components/Counter.astro` with the following contents: -```html +```html title="src/components/Counter.astro" Incrementor
Current value: ???