Update Solang Docker Image, Add Contract Interaction Button, and Detailed Tutorial

.dockerignore

@@ -1,5 +1,6 @@
 .github
 node_modules
 packages/*/node_modules
+docs
 target
-Dockerfile
+Dockerfile

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]

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:

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);

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.

packages/app/assets/index.html

@@ -30,7 +30,10 @@
 </head>
 <body>
   <div id="container">
-    <button id="compile">Compile</button>
+    <div id="buttonContainer">
+      <button id="compile">Compile for Polkadot Target</button>
+      <button id="interact">Deploy/Interact with Compiled Contracts on chain</button>
+    </div>
     <div id="cell-editor">
       <label for="editor">editor</label>
       <div id="editor"></div>

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;

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 () => {

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