Merge pull request #12 from calimero-network/chore--update-readme

chore:  Update Readme.md file

README.md

@@ -1,38 +1,78 @@
 # Node Multiplatform Wrapper with Tauri
 
-This is a [Tauri](https://tauri.app/) desktop application created using Node.js and Rust.
+This is a [Tauri](https://tauri.app/) desktop application created using Node.js and Rust. The app serves as a GUI for interacting with the Calimero node.
 
 ## Prerequisites
 
 - [Node.js](https://nodejs.org/) (v16 or higher)
 - [Rust](https://www.rust-lang.org/)
+- [pnpm](https://pnpm.js.org/) (as the package manager)
 
 ## Getting Started
 
 1. Clone the repository:
+
    ```bash
    git clone https://github.com/calimero-network/node-multiplatform-tauri.git
    ```
 
 2. Navigate to the project directory:
+
    ```bash
    cd node-multiplatform-tauri
    ```
 
-3. Install the dependencies:
+3. Install the dependencies using pnpm:
    ```bash
-   npm install
+   pnpm install
    ```
 
 4. Run the development environment:
    ```bash
-   npm run tauri dev
+   pnpm run tauri dev
    ```
 
+   - In development mode, the Calimero node binary is stored in the `src-tauri/bin` folder.
+   - Depending on the `--target` flag during the build or the user's operating system, the app automatically downloads the Calimero node binary directly from the github release page.
+
+   The following `--target` flags are supported for different architectures:
+    - `--target aarch64-apple-darwin`: For ARM-based macOS (M1 and above)
+    - `--target x86_64-apple-darwin`: For Intel-based macOS
+    - `--target x86_64-unknown-linux-gnu`: For x86_64 Linux systems
+    - `--target aarch64-unknown-linux-gnu`: For ARM-based Linux systems
+
 ## Build
 
 To create a production build of the application, run:
 
 ```bash
-npm run tauri build
-```
+pnpm run tauri build
+```
+
+- The build process automatically downloads the Calimero node binary directly from the github release page based on the target architecture, if target architecture is not explicitly specified, Tauri will use the host architecture.
+- In production mode, the Calimero node binary is stored in the `resources` folder.
+- The build process will fail if the target architecture is not supported by the Calimero node binary release page.
+- After building process is complete, the Calimero node binary will be stored in the `src-tauri/target` folder, exact path will be displayed in the terminal after build process is complete.
+
+## Features
+
+- The application has commands defined in `src-tauri/src/commands/mod.rs` for interacting with the Calimero node:
+  - **Initialize Node**: Create and initialize a new node with specified parameters.
+  - **Update Node**: Modify the configuration of an existing node.
+  - **Start Node**: Start a specified node.
+  - **Stop Node**: Stop a running node.
+  - **Get Node Log**: Retrieve the log file for a specified node.
+  - **Delete Node**: Remove a specified node from the application.
+  - **Open Dashboard**: Open the admin dashboard for a specified node.
+
+- The frontend of the application is built using **TypeScript** and **React**, providing a modern and responsive user interface.
+- It includes options to run nodes on application startup and to run the application on OS startup.
+- The application features an interactive CLI to interact with started nodes.
+- There are checks in place to ensure that ports are not already in use and to prevent starting a node with the same name as an already running instance outside of the application.
+
+## CI/CD
+
+The project includes a GitHub workflow file that automates the build process for the application on multiple platforms. It builds the application for:
+
+- **macOS** (both aarch64 and x86 architectures)
+- **Linux** (both aarch64 and x86 architectures)

src-tauri/src/main.rs

@@ -6,7 +6,7 @@ use node_multiplatform_tauri::tray::menu::{create_menu, handle_menu_click};
 use node_multiplatform_tauri::tray::{handle_tray_click, update_tray_menu};
 use node_multiplatform_tauri::types::AppState;
 use node_multiplatform_tauri::utils::setup::{
-    run_nodes_on_startup, setup_app_state, setup_auto_launch, setup_store,
+    run_nodes_on_startup, setup_app_folders, setup_app_state, setup_auto_launch, setup_store
 };
 use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, WindowEvent};
 
@@ -22,6 +22,9 @@ fn main() -> eyre::Result<()> {
             // Initialize store
             let store = setup_store(app)?;
 
+            // Initialize app folders
+            setup_app_folders(&app_handle)?;
+
             // Get the run_app_on_startup value from the store
             let run_app_on_startup = store
                 .get("run_app_on_startup")

src-tauri/src/utils/setup.rs

@@ -51,6 +51,14 @@ pub fn setup_app_state(app_handle: AppHandle, store: Store<Wry>) -> Result<AppSt
     })
 }
 
+pub fn setup_app_folders(app_handle: &AppHandle) -> Result<()> {
+    let nodes_dir = get_nodes_dir(app_handle);
+    if !nodes_dir.exists() {
+        fs::create_dir_all(nodes_dir).map_err(|e| eyre!("Failed to create nodes directory: {}", e))?;
+    }
+    Ok(())
+}
+
 // Run start_nodes_on_startup
 pub fn run_nodes_on_startup(state: &State<'_, AppState>) -> Result<(), Box<dyn std::error::Error>> {
     let app_handle_clone = state.app_handle.clone();

src-tauri/tauri.conf.json

@@ -37,8 +37,8 @@
     "windows": [
       {
         "title": "Calimero Node Manager",
-        "width": 800,
-        "height": 600
+        "width": 1200,
+        "height": 800
       }
     ],
     "security": {

src/components/node/nodeInitPopup/index.tsx

@@ -64,11 +64,11 @@ const NodeInitializationPopup: React.FC<NodeInitializationPopupProps> = ({
       <h2>Initialize Node</h2>
       <form onSubmit={handleSubmit}>
         <Input
-          label="Node Name"
+          label="Node Name (max 15 chars)"
           type="text"
           value={nodeName}
           onChange={handleNodeNameChange}
-          placeholder="Enter node name (max 15 chars)"
+          placeholder="e.g. node1"
           required
           maxLength={15}
           noMargin={isShowingCharCount}
@@ -84,15 +84,19 @@ const NodeInitializationPopup: React.FC<NodeInitializationPopupProps> = ({
           type="number"
           value={serverPort}
           onChange={(e) => setServerPort(e.target.value)}
-          placeholder="Enter server port"
+          placeholder="e.g. 2428"
+          min="1024"
+          max="65535"
           required
         />
         <Input
           label="Swarm Port"
           type="number"
           value={swarmPort}
           onChange={(e) => setSwarmPort(e.target.value)}
-          placeholder="Enter swarm port"
+          placeholder="e.g.2528"
+          min="1024"
+          max="65535"
           required
         />
         <Checkbox