From dc6504644f9a2fc672898abf437ffd37fe80978a Mon Sep 17 00:00:00 2001 From: Tarek Date: Sat, 22 Jun 2024 16:16:32 +0300 Subject: [PATCH 1/3] feat(frontend): add a button to interact with contracts Signed-off-by: Tarek --- packages/app/assets/index.html | 5 ++++- packages/app/assets/index.module.css | 17 ++++++++++++++--- packages/app/src/app.ts | 5 +++++ 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/packages/app/assets/index.html b/packages/app/assets/index.html index e1954d1..523fdb5 100644 --- a/packages/app/assets/index.html +++ b/packages/app/assets/index.html @@ -30,7 +30,10 @@
- +
+ + +
diff --git a/packages/app/assets/index.module.css b/packages/app/assets/index.module.css index 22e47ba..ca00672 100644 --- a/packages/app/assets/index.module.css +++ b/packages/app/assets/index.module.css @@ -49,16 +49,27 @@ body { } div[id=container] { - display: grid; + display: flex; + flex-direction: column; + justify-content: space-between; width: 75%; height: 90%; min-width: 800px; min-height: 600px; - grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto; - grid-template-columns: repeat(2, minmax(0, 1fr)); margin: auto; } +#buttonContainer { + display: flex; + justify-content: flex-start; + gap: 10px; + margin: 10px 0; +} + +#compile, #interact { + margin: 10px; +} + h1[id=title] { grid-column: 1 / 3; grid-row: 1; diff --git a/packages/app/src/app.ts b/packages/app/src/app.ts index fdd6023..3c09d55 100644 --- a/packages/app/src/app.ts +++ b/packages/app/src/app.ts @@ -176,6 +176,11 @@ export default class App { })(); }); + document.querySelector("#interact")!.addEventListener("click", () => { + console.log("Redirecting to https://ui.use.ink/"); + window.open("https://ui.use.ink/"); + }); + // eslint-disable-next-line @typescript-eslint/require-await client.pushAfterInitializeHook(async () => { From 716177b95402b0e9d5811198a313d3268077bff7 Mon Sep 17 00:00:00 2001 From: Tarek Date: Sat, 22 Jun 2024 17:48:25 +0300 Subject: [PATCH 2/3] feat: update solang docker image version Signed-off-by: Tarek --- Makefile.toml | 2 +- crates/backend/src/services/sandbox.rs | 7 +++++-- sysbox/on-start.sh | 4 ++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/Makefile.toml b/Makefile.toml index 0042e23..4af9c6e 100644 --- a/Makefile.toml +++ b/Makefile.toml @@ -14,7 +14,7 @@ npm install [tasks.deps-docker] script = ''' -docker pull ghcr.io/hyperledger/solang:v0.3.3 +docker pull ghcr.io/hyperledger/solang@sha256:8776a9bd756664f7bf8414710d1a799799bf6fedc1c8f9f0bda17e76749dea7a ''' [tasks.deps] diff --git a/crates/backend/src/services/sandbox.rs b/crates/backend/src/services/sandbox.rs index 9b53186..2de0c54 100644 --- a/crates/backend/src/services/sandbox.rs +++ b/crates/backend/src/services/sandbox.rs @@ -64,8 +64,11 @@ pub fn build_compile_command(input_file: &Path, output_dir: &Path) -> Command { mount_output_dir.push(DOCKER_OUTPUT); cmd.arg("--volume").arg(&mount_output_dir); - // Using the solang image version v0.3.3 - cmd.arg(format!("{}:v0.3.3", DOCKER_IMAGE_BASE_NAME)); + // Using the solang image + cmd.arg(format!( + "{}@sha256:8776a9bd756664f7bf8414710d1a799799bf6fedc1c8f9f0bda17e76749dea7a", + DOCKER_IMAGE_BASE_NAME + )); // Building the compile command let remove_command = format!("rm -rf {}*.wasm {}*.contract", DOCKER_OUTPUT, DOCKER_OUTPUT); diff --git a/sysbox/on-start.sh b/sysbox/on-start.sh index ed62431..06b05a1 100755 --- a/sysbox/on-start.sh +++ b/sysbox/on-start.sh @@ -4,8 +4,8 @@ dockerd > /var/log/dockerd.log 2>&1 & sleep 2 -# pull solang image version v0.3.3 -docker pull ghcr.io/hyperledger/solang:v0.3.3 +# pull solang image +docker pull ghcr.io/hyperledger/solang@sha256:8776a9bd756664f7bf8414710d1a799799bf6fedc1c8f9f0bda17e76749dea7a # start backend server ./app/target/release/backend --port 9000 --host 0.0.0.0 --frontend_folder /app/packages/app/dist From 082e75d354353550cda82894d87fe3063f5d8dab Mon Sep 17 00:00:00 2001 From: Tarek Date: Sat, 22 Jun 2024 18:20:02 +0300 Subject: [PATCH 3/3] docs: add tutorial about interacting with smart contracts Signed-off-by: Tarek --- .dockerignore | 3 +- README.md | 4 ++ docs/interact_with_contracts_on_chain.md | 47 ++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 docs/interact_with_contracts_on_chain.md diff --git a/.dockerignore b/.dockerignore index d8c58fb..846c0a1 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,5 +1,6 @@ .github node_modules packages/*/node_modules +docs target -Dockerfile \ No newline at end of file +Dockerfile diff --git a/README.md b/README.md index 9cb14f1..4a0fee9 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,10 @@ cargo make run By default, the server will be available at `http://localhost:9000`. +## Interacting with Smart Contracts on Chain + +Once you have compiled your smart contracts using Solang Playground, you can deploy and interact with them on-chain. See [tutorial](docs/interact_with_contracts_on_chain.md) for detailed instructions. + ## Testing Solang Playground test suite includes tests for the backend and the frontend. To run all available tests, you have to first start the server with `cargo make run` in a separate terminal, and then run the following command: diff --git a/docs/interact_with_contracts_on_chain.md b/docs/interact_with_contracts_on_chain.md new file mode 100644 index 0000000..ab1af54 --- /dev/null +++ b/docs/interact_with_contracts_on_chain.md @@ -0,0 +1,47 @@ +## Interacting with Smart Contracts on Chain + +This tutorial will guide you through the process of interacting with smart contracts compiled using Solang Playground. Solang Playground uses the official [Solang Docker image](https://github.com/hyperledger/solang/pkgs/container/solang) to compile your contracts. You can easily deploy and interact with these compiled contracts using Contracts UI. Please follow these steps: + +### Prerequisites + +Before you start, ensure you have the necessary setup to run a local node if you choose to deploy on a local network. You can install and run `substrate-contracts-node` as follows: + +1. Follow the installation guide here: [Substrate Contracts Node Installation](https://github.com/use-ink/substrate-contracts-node?tab=readme-ov-file#installation). +2. After installation, run the local dev node with the command: + + ```bash + substrate-contracts-node + ``` + + This will create a new chain in a temporary directory each time the command is executed. + +Once your local node is running, you can connect to it with frontends like [Contracts UI](https://contracts-ui.substrate.io/#/?rpc=ws://127.0.0.1:9944) or [Polkadot-JS Apps](https://polkadot.js.org/apps/#/explorer?rpc=ws://localhost:9944). This tutorial will focus on using Contracts UI due to its user-friendly interface. + +### Compiling Smart Contracts + +1. **Open Solang Playground:** Navigate to [Solang Playground](http://labs.hyperledger.org/solang-playground/). +2. **Write and Compile:** Write your smart contract code in the editor. You can use the provided example or write your own solidity code. +3. **Compile:** Click on the "Compile" button to compile your smart contract. This will generate and download a `result.contract` bundle that you can upload to the chain. +4. **Interact with Compiled Contract:** Click on the "Deploy/Interact with Compiled Contracts on chain" button to interact with the compiled contract. This will redirect you to Contracts UI. + +### Uploading a Contract to the Chain + +1. **Open Contracts UI:** Navigate to [Contracts UI](https://ui.use.ink/). +2. **Select Network:** From the drop-down menu, choose the network you want to deploy your contract on. This could be a live network, a test network, or a local node. +3. **Upload Contract Bundle:** Click on the "Upload a new contract" button. In the "Upload Contract Bundle" section, select the `result.contract` bundle that was generated when you compiled your smart contracts using Solang Playground. +4. **View Contract Information:** You will see information about the compiled contract, including the compiler details and available contract functions. +5. **Upload and Instantiate:** Follow the instructions to upload and instantiate the contract on the chosen network. + +### Interacting with Deployed Contracts + +Once your contract is deployed and instantiated, you will be redirected to a page where you can interact with it. Here’s how to call a specific function on the deployed smart contract: + +1. **Choose Caller Account:** Select the account you want to use to call the contract. +2. **Select Message:** Choose the message to send, which corresponds to the function you want to call on the contract. +3. **Call Contract:** Click "Call contract" to execute the function. + +You can also browse the metadata of the contract to view details about its structure and available functions. + +### Support + +If you encounter any issues during this process, please do not hesitate to file a GitHub issue. Your feedback is valuable, and we are here to help ensure a smooth experience.