From 72e128b4c3530c9f0cf9e7e7faa3393288d7eb28 Mon Sep 17 00:00:00 2001
From: dr-frmr <docterformer@protonmail.com>
Date: Mon, 13 May 2024 17:15:07 -0600
Subject: [PATCH] more improvements for settings page

---
 kinode/packages/settings/pkg/ui/index.html | 12 +++++
 kinode/packages/settings/pkg/ui/script.js  | 62 ++++++++++++++++++++++
 kinode/packages/settings/pkg/ui/style.css  |  7 +++
 3 files changed, 81 insertions(+)

diff --git a/kinode/packages/settings/pkg/ui/index.html b/kinode/packages/settings/pkg/ui/index.html
index cc256626..cf940cde 100644
--- a/kinode/packages/settings/pkg/ui/index.html
+++ b/kinode/packages/settings/pkg/ui/index.html
@@ -47,6 +47,18 @@
 
         <article id="eth-rpc-providers">
             <h2>ETH RPC providers</h2>
+            <div id="provider-edits">
+                <form id="add-eth-provider">
+                    <input type="number" name="chain-id" placeholder="1">
+                    <input type="text" name="rpc-url" placeholder="wss://rpc-url.com">
+                    <button type="submit">add provider</button>
+                </form>
+                <form id="remove-eth-provider">
+                    <input type="number" name="chain-id" placeholder="1">
+                    <input type="text" name="rpc-url" placeholder="wss://rpc-url.com">
+                    <button type="submit">remove provider</button>
+                </form>
+            </div>
             <ul id="providers"></ul>
         </article>
 
diff --git a/kinode/packages/settings/pkg/ui/script.js b/kinode/packages/settings/pkg/ui/script.js
index 27cc51b9..11aecf9a 100644
--- a/kinode/packages/settings/pkg/ui/script.js
+++ b/kinode/packages/settings/pkg/ui/script.js
@@ -119,6 +119,7 @@ document.getElementById('get-peer-pki').addEventListener('submit', (e) => {
             if (data === null) {
                 document.getElementById('peer-pki-response').innerText = "no pki data for peer";
             } else {
+                e.target.reset();
                 document.getElementById('peer-pki-response').innerText = JSON.stringify(data, undefined, 2);
             }
         });
@@ -143,6 +144,7 @@ document.getElementById('ping-peer').addEventListener('submit', (e) => {
     }).then(response => response.json())
         .then(data => {
             if (data === null) {
+                e.target.reset();
                 document.getElementById('peer-ping-response').innerText = "ping successful!";
             } else if (data === "HiTimeout") {
                 document.getElementById('peer-ping-response').innerText = "node timed out";
@@ -152,6 +154,66 @@ document.getElementById('ping-peer').addEventListener('submit', (e) => {
         });
 })
 
+document.getElementById('add-eth-provider').addEventListener('submit', (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const rpc_url = data.get('rpc-url');
+    // validate rpc url
+    if (!rpc_url.startsWith('wss://') && !rpc_url.startsWith('ws://')) {
+        alert('Invalid RPC URL');
+        return;
+    }
+    const body = {
+        "EthConfig": {
+            "AddProvider": {
+                chain_id: Number(data.get('chain-id')),
+                trusted: false,
+                provider: { "RpcUrl": rpc_url },
+            }
+        }
+    };
+    fetch(APP_PATH, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+    }).then(response => response.json())
+        .then(data => {
+            if (data === null) {
+                e.target.reset();
+                return;
+            } else {
+                alert(data);
+            }
+        });
+})
+
+document.getElementById('remove-eth-provider').addEventListener('submit', (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const body = {
+        "EthConfig": {
+            "RemoveProvider": [Number(data.get('chain-id')), data.get('rpc-url')]
+        }
+    };
+    fetch(APP_PATH, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+    }).then(response => response.json())
+        .then(data => {
+            if (data === null) {
+                e.target.reset();
+                return;
+            } else {
+                alert(data);
+            }
+        });
+})
+
 // Setup WebSocket connection
 const wsProtocol = location.protocol === 'https:' ? 'wss://' : 'ws://';
 const ws = new WebSocket(wsProtocol + location.host + "/settings:settings:sys/");
diff --git a/kinode/packages/settings/pkg/ui/style.css b/kinode/packages/settings/pkg/ui/style.css
index d113a7f9..f9c1d579 100644
--- a/kinode/packages/settings/pkg/ui/style.css
+++ b/kinode/packages/settings/pkg/ui/style.css
@@ -127,6 +127,13 @@ article#kernel {
   grid-area: kernel;
 }
 
+div#provider-edits {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px 20px;
+  grid-auto-flow: row;
+}
+
 article {
   background-color: #333;
   border: 1px solid #444;