ui changes

server/package.json

@@ -48,7 +48,7 @@
         "web-vitals": "^2.1.4"
     },
     "scripts": {
-        "start server": "node server.js",
+        "start": "npm run build --prefix ../ && node server.js",
         "build": "react-scripts build",
         "test": "react-scripts test",
         "eject": "react-scripts eject",

server/server.js

@@ -102,7 +102,7 @@ async function createDeployment(sdl, wallet, client) {
       groups: groups,
       deposit: {
         denom: "uakt",
-        amount: "600000"
+        amount: "500000"
       },
       version: await sdl.manifestVersion(),
       depositor: accounts[0].address
@@ -133,7 +133,7 @@ console.log({
         amount: "75000"
       }
     ],
-    gas: "3000000"
+    gas: "2000000"
   };
 
   const msg = {
@@ -441,8 +441,8 @@ app.get('/deploymanifest', async (req, res) => {
 app.get('/close', async (req, res) => {
   try {
     const { wallet, client, certificate, sdl } = await loadPrerequisites();
-    closeDeployment(wallet, client, deploymentid);
-    res.send('API endpoint');
+    const status = closeDeployment(wallet, client, deploymentid);
+    res.json(status);
   } catch (error) {
     console.error('Error in /close:', error);
     res.status(500).send('Internal Server Error');

src/App.css

@@ -114,6 +114,237 @@ cursor: pointer;
   cursor: pointer;
 }
 
+/* BotList.css */
+.balance-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 10px;
+  right: 20px;
+  background-color: #f8f9fa;
+  padding: 10px 20px;
+  border-radius: 5px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  font-size: 16px;
+  color: #333;
+  width: auto; /* Specify width if needed */
+}
+
+.balance-display img {
+  width: 42px;
+  height: 42px;
+  margin-right: 8px;
+}
+
+
+.bot-container {
+  margin-top:60px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust card width here */
+  gap: 20px; /* Spacing between cards */
+  padding: 20px;
+  background-color: #fff;
+}
+
+.bot-card {
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 3px rgba(245, 198, 42, 0.726);
+  border-radius: 8px;
+}
+
+.deploy-button {
+  background-color: #0056b3;
+  font-family: "Poetsen One", sans-serif;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.deploy-button:hover {
+  background-color: #003d82;
+}
+
+
+
+.assets .container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+/* Styles for the form, scoped to .assets */
+/* Main container style, scoped to .assets */
+.assets .container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px;
+  background-color: #f0f2f5; /* Light gray background for the entire container */
+  width: 100%; /* Full width */
+}
+
+/* Form styling, scoped to .assets */
+.assets .form-container {
+  width: 90%; /* Width relative to the container */
+  max-width: 600px; /* Maximum width for larger screens */
+  display: flex;
+  justify-content: space-between; /* Distributes space between inputs and button */
+  margin-bottom: 20px;
+}
+
+.assets .input-field {
+  flex-grow: 1; /* Inputs take up available space */
+  margin: 0 10px;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 8px; /* Rounded borders for inputs */
+  font-size: 16px; /* Larger font size for better readability */
+}
+
+.assets .submit-button {
+  padding: 12px 24px;
+  background-color: #007bff; /* Brighter blue for the button */
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold; /* Bold text on the button */
+  transition: background-color 0.3s;
+}
+
+.assets .submit-button:hover {
+  background-color: #0056b3; /* Darker blue on hover */
+}
+
+/* Table styling, scoped to .assets */
+.assets .table {
+  width: 90%; /* Table width relative to the container */
+  max-width: 800px; /* Maximum width for larger screens */
+  border-collapse: collapse;
+  margin-top: 20px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
+}
+
+.assets th, .assets td {
+  border: 1px solid #ddd;
+  padding: 15px; /* More padding for table cells */
+  text-align: left;
+}
+
+.assets th {
+  background-color: #007bff; /* Header background to match button color */
+  color: white; /* White text for headers */
+  font-size: 16px; /* Larger font size for headers */
+}
+
+/* Zebra striping for table rows, scoped to .assets */
+.assets tr:nth-child(odd) {
+  background-color: #f9f9f9;
+}
+
+.assets tr:hover {
+  background-color: #e9ecef; /* Light hover effect for rows */
+}
+
+
+.middle-row {
+  display: flex; /* Establishes a flex container and aligns children in a row */
+  align-items: start; /* Aligns items to the top of the container */
+  justify-content: space-between; /* Distributes space between items */
+  width: 100%; /* Takes full width of the parent container */
+  padding: 10px; /* Optional padding for some spacing */
+  height: 80vh;
+}
+
+.option {
+  height:100%;
+  flex: 1; /* Gives the option panel some flexibility in taking up space */
+  padding: 10px; /* Padding for spacing inside the panel */
+  background-color: #f0f0f0; /* Light grey background for visibility */
+  margin-right: 10px; /* Space between option panel and chat container */
+}
+
+.chat-container {
+  height:100%;
+  flex: 3; /* Allows the chat container to take more space */
+  display: flex;
+  flex-direction: column; /* Stacks the internal chat elements vertically */
+  padding: 10px;
+  background-color: #fff; /* White background for the chat area */
+  border: 1px solid #ccc; /* Border around the chat container */
+  margin-right: 10px; /* Space between chat container and code editor */
+}
+
+.code-container {
+  height:100%;
+  flex: 2; /* Gives the code editor flexibility in taking up space */
+  padding: 10px;
+  background-color: #e8e8e8; /* Slightly different background for distinction */
+}
+
+.flowchart-container {
+  width: 100%; /* Takes full width */
+  padding: 10px;
+  margin-top: 10px; /* Space from the middle row */
+  background-color: #f9f9f9; /* Light background for the flowchart container */
+}
+
+.messages {
+  flex-grow: 1;
+  overflow-y: scroll;
+  padding: 10px;
+}
+
+.message {
+  margin-bottom: 10px;
+  padding: 5px;
+  border-radius: 5px;
+  background-color: #f1f1f1;
+}
+
+.message-info {
+  font-size: 0.8em;
+  color: #666;
+}
+
+.message-text {
+  margin-top: 5px;
+}
+
+.send-message-form {
+  display: flex;
+  padding: 10px;
+  border-top: 1px solid #ccc;
+}
+
+.message-input {
+  flex-grow: 1;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+
+.send-button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.send-button:hover {
+  background-color: #0056b3;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);