|
| 1 | +# echo-ts DApp |
| 2 | + |
| 3 | +echo-ts is a customized DApp written in Typescript, which originally resembles the one provided by the sample [Echo Python DApp](https://github.com/cartesi/rollups-examples/tree/main/echo-python). |
| 4 | + |
| 5 | +The documentation below reflects the original application code, and should also be used as a basis for documenting any DApp created with this mechanism. |
| 6 | + |
| 7 | +## Requirements |
| 8 | + |
| 9 | +Please refer to the [rollups-examples requirements](https://github.com/cartesi/rollups-examples/tree/main/README.md#requirements). |
| 10 | + |
| 11 | +## Building |
| 12 | + |
| 13 | +First update git submodule |
| 14 | + |
| 15 | +```shell |
| 16 | +git submodule update |
| 17 | +``` |
| 18 | + |
| 19 | +Then to build the application, run the following command: |
| 20 | + |
| 21 | +```shell |
| 22 | +docker buildx bake -f docker-bake.hcl -f docker-bake.override.hcl --load |
| 23 | +``` |
| 24 | + |
| 25 | +## Running |
| 26 | + |
| 27 | +To start the application, execute the following command: |
| 28 | + |
| 29 | +```shell |
| 30 | +docker compose -f ../docker-compose.yml -f ./docker-compose.override.yml up |
| 31 | +``` |
| 32 | + |
| 33 | +The application can afterwards be shut down with the following command: |
| 34 | + |
| 35 | +```shell |
| 36 | +docker compose -f ../docker-compose.yml -f ./docker-compose.override.yml down -v |
| 37 | +``` |
| 38 | + |
| 39 | +## Interacting with the application |
| 40 | + |
| 41 | +We can use the rollups-examples [frontend-console](https://github.com/cartesi/rollups-examples/tree/main/frontend-console) application to interact with the DApp. |
| 42 | +Ensure that the [application has already been built](https://github.com/cartesi/rollups-examples/tree/main/frontend-console/README.md#building) before using it. |
| 43 | + |
| 44 | +From within the `frontend-console` directory, you can send an input as follows: |
| 45 | + |
| 46 | +```shell |
| 47 | +yarn start send --input "Hello there" |
| 48 | +``` |
| 49 | + |
| 50 | +In order to verify the notices generated by your inputs, run the command: |
| 51 | + |
| 52 | +```shell |
| 53 | +yarn start notices |
| 54 | +``` |
| 55 | + |
| 56 | +The response should be something like this: |
| 57 | + |
| 58 | +```shell |
| 59 | +[ { epoch: '0', input: '1', notice: '0', payload: 'Hello there' } ] |
| 60 | +``` |
| 61 | +
|
| 62 | +## Deploying to a testnet |
| 63 | +
|
| 64 | +Deploying the application to a blockchain requires creating a smart contract on that network, as well as running a validator node for the DApp. |
| 65 | +
|
| 66 | +The first step is to build the DApp's back-end machine, which will produce a hash that serves as a unique identifier. |
| 67 | +
|
| 68 | +```shell |
| 69 | +docker buildx bake -f docker-bake.hcl -f docker-bake.override.hcl machine --load |
| 70 | +``` |
| 71 | +
|
| 72 | +Once the machine docker image is ready, we can use it to deploy a corresponding Rollups smart contract. This requires you to define a few environment variables to specify which network you are deploying to, which account to use, and which RPC gateway to use when submitting the deploy transaction. |
| 73 | +
|
| 74 | +```shell |
| 75 | +export NETWORK=<network> |
| 76 | +export MNEMONIC=<user sequence of twelve words> |
| 77 | +export RPC_URL=<https://your.rpc.gateway> |
| 78 | +``` |
| 79 | +
|
| 80 | +For example, to deploy to the Goerli testnet using an Alchemy RPC node, you could execute: |
| 81 | +
|
| 82 | +```shell |
| 83 | +export NETWORK=goerli |
| 84 | +export MNEMONIC=<user sequence of twelve words> |
| 85 | +export RPC_URL=https://eth-goerli.alchemyapi.io/v2/<USER_KEY> |
| 86 | +``` |
| 87 | +
|
| 88 | +With that in place, you can submit a deploy transaction to the Cartesi DApp Factory contract on the target network by executing the following command: |
| 89 | +
|
| 90 | +```shell |
| 91 | +DAPP_NAME=echo-ts docker compose -f ./deploy-testnet.yml up |
| 92 | +``` |
| 93 | +
|
| 94 | +This will create a file at `./deployments/<network>/echo-ts.address` with the deployed contract's address. |
| 95 | +Once the command finishes, it is advisable to stop the docker compose and remove the volumes created when executing it. |
| 96 | +
|
| 97 | +```shell |
| 98 | +DAPP_NAME=echo-ts docker compose -f ./deploy-testnet.yml down -v |
| 99 | +``` |
| 100 | +
|
| 101 | +After that, a corresponding Cartesi Validator Node must also be instantiated in order to interact with the deployed smart contract on the target network and handle the back-end logic of the DApp. |
| 102 | +Aside from the environment variables defined above, the node will also need a secure websocket endpoint for the RPC gateway (WSS URL) and the chain ID of the target network. |
| 103 | +
|
| 104 | +For example, for Goerli and Alchemy, you would set the following additional variables: |
| 105 | +
|
| 106 | +```shell |
| 107 | +export WSS_URL=wss://eth-goerli.alchemyapi.io/v2/<USER_KEY> |
| 108 | +export CHAIN_ID=5 |
| 109 | +``` |
| 110 | +
|
| 111 | +Then, the node itself can be started by running a docker compose as follows: |
| 112 | +
|
| 113 | +```shell |
| 114 | +DAPP_NAME=mydapp docker compose -f ./docker-compose-testnet.yml -f ./docker-compose.override.yml up |
| 115 | +``` |
| 116 | +
|
| 117 | +## Interacting with the deployed application |
| 118 | +
|
| 119 | +With the node running, you can interact with the deployed DApp using the [frontend-console](https://github.com/cartesi/rollups-examples/tree/main/frontend-console), as described [previously](#interacting-with-the-application). |
| 120 | +This time, however, you need to specify the appropriate connectivity configurations. |
| 121 | +
|
| 122 | +First of all, in the separate terminal for the frontend-console, define the `MNEMONIC` and `RPC_URL` variables as before: |
| 123 | +
|
| 124 | +```shell |
| 125 | +export MNEMONIC=<user sequence of twelve words> |
| 126 | +export RPC_URL=<https://your.rpc.gateway> |
| 127 | +``` |
| 128 | +
|
| 129 | +Then, inputs can be sent by specifying the DApp contract's address, as follows: |
| 130 | +
|
| 131 | +```shell |
| 132 | +yarn start send --input "Hello there" --addressFile path/to/echo-ts/deployments/<network>/echo-ts.address |
| 133 | +``` |
| 134 | +
|
| 135 | +Resulting notices can then be retrieved by querying the local Cartesi Node, as before: |
| 136 | +
|
| 137 | +```shell |
| 138 | +yarn start notices |
| 139 | +``` |
| 140 | +
|
| 141 | +## Running the back-end in host mode |
| 142 | +
|
| 143 | +When developing an application, it is often important to easily test and debug it. For that matter, it is possible to run the Cartesi Rollups environment in [host mode](https://github.com/cartesi/rollups-examples/tree/main/README.md#host-mode), so that the DApp's back-end can be executed directly on the host machine, allowing it to be debugged using regular development tools such as an IDE. |
| 144 | +
|
| 145 | +This DApp's back-end is written in `Typescript` that ofc compiles to `Javascript` and using `QuickJS` engine, so to run it in your machine you need to have `QuickJS` and `npm` installed. |
| 146 | +
|
| 147 | +In order to start the back-end, run the following commands in a dedicated terminal: |
| 148 | +
|
| 149 | +```shell |
| 150 | +# DIR ../echo-ts/ |
| 151 | +npm ci |
| 152 | +npm run build |
| 153 | +ROLLUP_HTTP_SERVER_URL="http://127.0.0.1:5004" qjs server/dist/echo-ts.js |
| 154 | +``` |
| 155 | +
|
| 156 | +You can also run below command to restart the back-end automatically when the code changes. |
| 157 | +```shell |
| 158 | +ROLLUP_HTTP_SERVER_URL="http://127.0.0.1:5004" npm run watch |
| 159 | +``` |
| 160 | +
|
| 161 | +The final command will effectively run the back-end and send corresponding outputs to port `5004`. |
| 162 | +
|
| 163 | +After the back-end successfully starts, it should print an output like the following: |
| 164 | +
|
| 165 | +```log |
| 166 | +HTTP rollup_server url is http://127.0.0.1:5004 |
| 167 | +Sending finish |
| 168 | +``` |
| 169 | +
|
| 170 | +After that, you can interact with the application normally [as explained above](#interacting-with-the-application). |
0 commit comments