Skip to content
This repository has been archived by the owner on Aug 21, 2024. It is now read-only.

Commit

Permalink
Address PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
elizabethengelman committed Nov 20, 2023
1 parent 399b09c commit e2c02de
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 49 deletions.
11 changes: 5 additions & 6 deletions docs/getting-started/deploy-incrementor.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ The code itself here is pretty self-explanatory. We import a few methods from `@

Now we can import the component in the frontmatter of `pages/index.astro`:

```diff title="pages/index.astro"
```diff title="src/pages/index.astro"
---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
Expand All @@ -163,7 +163,7 @@ Now we can import the component in the frontmatter of `pages/index.astro`:

And add it right below the `<h1>`:

```diff title="pages/index.astro"
```diff title="src/pages/index.astro"
<h1><span class="text-gradient">{greeting.join(' ')}</span></h1>
+<ConnectFreighter />
```
Expand Down Expand Up @@ -194,8 +194,7 @@ Let's reinstall the dependencies. Remember that `npm i` will also run our `posti
```bash
npm i
```

Now we can import from `incrementor-client` and start using in a new Astro component. Add a new file at `src/components/Counter.astro` with the following contents:
Now let's create a new Astro component called `Counter.astro`, where we'll import and use our newly generated `incrementor-client`. Create a new file at `src/components/Counter.astro` with the following contents:

```html title="src/components/Counter.astro"
<strong>Incrementor</strong><br />
Expand Down Expand Up @@ -239,7 +238,7 @@ Also, notice that you don't need to manually specify Freighter as the wallet in

Now let's use this component. In `pages/index.astro`, first import it:

```diff title="pages/index.astro"
```diff title="src/pages/index.astro"
---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
Expand All @@ -251,7 +250,7 @@ Now let's use this component. In `pages/index.astro`, first import it:

Then use it. Let's replace the contents of the `instructions` paragraph with it:

```diff title="pages/index.astro"
```diff title="src/pages/index.astro"
<p class="instructions">
- To get started, open the directory <code>src/pages</code> in your project.<br />
- <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
Expand Down
85 changes: 44 additions & 41 deletions docs/getting-started/deploy-to-testnet.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,52 @@ echo "C...[your contract id here]" > .soroban/hello-id

Now that we have our contract deployed to Testnet, we can interact with it! This tutorial will go over two ways to interact with Soroban contracts:

- interacting via the generated JavaScript contract clients in a web app
- interacting with the contract directly via the `soroban-cli`
- interacting via the generated JavaScript contract clients in a web app

We'll start with taking a look at interacting with the contract from the `soroban-cli` and then go on to generate JavaScript clients for our contract so that we can interact with it from the Astro web app.

### Call the contract with `soroban-cli`

To call the `hello` method on our `hello-soroban` contract, run the following with the `to` argument set to "CLI".

```bash
soroban contract invoke \
--id $(cat .soroban/hello-id) \
--source alice \
--network testnet \
-- \
hello \
--to CLI
```

We'll start with taking at look at interacting with the contracts from our new Astro web app, using generated JavaScript clients.
The following output should appear.

```json
["Hello", "CLI"]
```

In the background, the CLI is making RPC calls to the Soroban network. For information on that checkout out the [RPC](../reference/rpc.mdx) reference page.

:::info

The `--` double-dash is required!

This is a general [CLI pattern](https://unix.stackexchange.com/questions/11376/what-does-double-dash-mean) used by other commands like [cargo run](https://doc.rust-lang.org/cargo/commands/cargo-run.html). Everything after the `--`, sometimes called [slop](https://github.com/clap-rs/clap/issues/971), is passed to a child process. In this case, `soroban contract invoke` builds an _implicit CLI_ on-the-fly for the `hello` method in your contract. It can do this because Soroban SDK embeds your contract's schema / interface types right in the `.wasm` file that gets deployed on-chain. You can also try:

soroban contract invoke ... -- --help

and

soroban contract invoke ... -- hello --help

:::

### Generate an NPM package for the Hello Soroban contract

To start, we'll need to generate an NPM package for the Hello Soroban 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).
Our suggested way to interact with contracts from frontends is to generate an NPM package for the contracts. 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`. From the `astro-soroban-tutorial` directory, run
To generate a client library for our `hello-soroban` contract, we are going to use the CLI command `soroban contract bindings typescript`. From the `astro-soroban-tutorial` directory, run

```bash
soroban contract bindings typescript \
Expand All @@ -75,7 +111,7 @@ soroban contract bindings typescript \

:::note

This again makes use of [command expansion](https://www.gnu.org/software/bash/manual/html_node/Command-Substitution.html), which only works with bash-compatible shells. If you are using Windows or some other shell, you will need to copy the output of `soroban config…` and paste it into the `curl` command, or figure out how command expansion works in your shell.
This again makes use of [command expansion](https://www.gnu.org/software/bash/manual/html_node/Command-Substitution.html), which only works with bash-compatible shells. If you are using Windows or some other shell, you will need to copy the contract id from `.soroban/hello-id` and paste it into this command, or figure out how command expansion works in your shell.

:::

Expand Down Expand Up @@ -133,7 +169,7 @@ This is part of Astro's philosophy: the frontend should ship with as few assets
When using the development server with `npm run dev`, it runs the frontmatter code on the server, and injects the resulting values into the page on the client.
In this case, our `greeter.hello({ to: 'Soroban' });` method is making an RPC call on the server, and the response from that call is being injected onto our index page where we put `{greeting.join(' ')}`. For information about RPC calls, checkout out the [RPC](../reference/rpc.mdx) reference page.
In this case, our `greeter.hello({ to: 'Soroban' });` method is making an RPC call on the server, and the response from that call is being injected onto our index page where we put `{greeting.join(' ')}`.
You can try building to see this more dramatically:
Expand All @@ -145,45 +181,12 @@ Then check the `dist` folder. You'll see that it built an HTML and CSS file, but

During the build, Astro made a single call to your contract, then injected the static result into the page. This is great for contract methods that don't change, but probably won't work for most contract methods. In the next section we'll create a new contract that has interactive methods, so we can explore how to handle that with Astro.

### Call the contract with `soroban-cli`

To call the `hello` method on our `hello-soroban` contract, run the following with the `to` argument set to "RPC".

```bash
soroban contract invoke \
--id $(cat .soroban/hello-id) \
--source alice \
--network testnet \
-- \
hello \
--to CLI
```

The following output should appear.

```json
["Hello", "CLI"]
```

:::info

The `--` double-dash is required!

This is a general [CLI pattern](https://unix.stackexchange.com/questions/11376/what-does-double-dash-mean) used by other commands like [cargo run](https://doc.rust-lang.org/cargo/commands/cargo-run.html). Everything after the `--`, sometimes called [slop](https://github.com/clap-rs/clap/issues/971), is passed to a child process. In this case, `soroban contract invoke` builds an _implicit CLI_ on-the-fly for the `hello` method in your contract. It can do this because Soroban SDK embeds your contract's schema / interface types right in the `.wasm` file that gets deployed on-chain. You can also try:

soroban contract invoke ... -- --help

and

soroban contract invoke ... -- hello --help

:::

## Summary

In this lesson, we learned how to:

- deploy a contract to Testnet
- interact with a deployed contract
- interact with a deployed contract from `soroban-cli`
- generate an NPM client library for our contract and interact with it from the frontend app

Next we'll add a new contract to this project, which will show off a little bit of Soroban's storage capabilities.
10 changes: 8 additions & 2 deletions docs/getting-started/hello-world.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ Astro's project initializer allows us to pass in a `template` argument. If we us
So let's go ahead and do that:

```sh
npm create astro@latest astro-soroban-tutorial -- --template AhaLabs/soroban-tutorial-project#template --no-install --typescript strictest
npm create astro@latest astro-soroban-tutorial \
-- --template AhaLabs/soroban-tutorial-project#template \
--no-install --typescript strictest
```

Let's take a brief tour of the `astro-soroban-tutorial` project that we just created.
Expand Down Expand Up @@ -342,9 +344,13 @@ Building optimized contracts is only necessary when deploying to a network with

## Summary

In this section, we reviewed a simple contract that can be deployed to a Soroban network.
In this section we:
- initialized a frontend Astro project
- set up a Rust workspace that is capable of managing multiple Soroban contracts
- reviewed a simple contract that can be deployed to a Soroban network

Next we'll learn to deploy the hello-soroban contract to Soroban's Testnet network and interact with it over RPC from both a JavaScript web app as well as from the CLI.

[Build]: hello-world.mdx#build
[Rust unit tests]: https://doc.rust-lang.org/rust-by-example/testing/unit_testing.html
[`soroban-cli`]: setup.mdx#install-the-soroban-cli

0 comments on commit e2c02de

Please sign in to comment.