added apps to dev mode

src/assets/svgs/swagger.svg

@@ -0,0 +1 @@
+<svg height="256" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" width="256" xmlns="http://www.w3.org/2000/svg"><path d="m127.059657 255.996921c-68.2090026-.470449-127.51673062-57.078479-127.05700194-128.998618.44199434-69.2024402 57.94900474-127.46727058 129.10736494-126.99545745 69.157108.45954053 127.503089 57.86392555 126.885116 128.19135345.572955 69.689254-58.060868 128.29499-128.935479 127.802722zm0 0c-68.2090026-.470449-127.51673062-57.078479-127.05700194-128.998618.44199434-69.2024402 57.94900474-127.46727058 129.10736494-126.99545745 69.157108.45954053 127.503089 57.86392555 126.885116 128.19135345.572955 69.689254-58.060868 128.29499-128.935479 127.802722z" fill="#fff"/><path d="m127.184644 238.997327c-59.1522675-.408056-110.5810349-49.498583-110.1823412-111.865899.3837257-60.0128327 50.2530972-110.5397174 111.9608142-110.1289408 59.971427.3985349 110.568788 50.1800369 110.032661 111.1667638.496666 60.43313-50.348348 111.255175-111.811134 110.828076zm0 0c-59.1522675-.408056-110.5810349-49.498583-110.1823412-111.865899.3837257-60.0128327 50.2530972-110.5397174 111.9608142-110.1289408 59.971427.3985349 110.568788 50.1800369 110.032661 111.1667638.496666 60.43313-50.348348 111.255175-111.811134 110.828076z" fill="#49a32b"/><path d="m169.327319 127.956161c-.284596 5.290212-4.906213 9.683063-9.461106 8.916425-.021787 0-.044936 0-.068085 0-5.045107.006809-9.139745-4.078298-9.145192-9.123404.171575-5.058724 4.366979-9.045787 9.427064-8.96 5.045106.02451 9.51966 4.288 9.247319 9.166979zm-81.1261275 51.264c1.9022979.055829 3.8059574.014978 5.9996596.014978v13.785873c-13.6347234 2.305361-24.8660426-1.565958-27.6221277-13.091405-.9436596-4.237617-1.5237447-8.548766-1.7361702-12.885787-.292766-4.591659.2137872-9.235064-.1361702-13.818553-.9695319-12.612085-2.6035745-16.917787-14.706383-17.514213v-15.69634c.8674043-.202894 1.7470638-.352681 2.6321702-.452085 6.6355745-.326809 9.4325107-2.361192 10.916766-8.897362.6754042-3.672511 1.0757447-7.389958 1.1942127-11.1223831.5256171-7.2170212.3390639-14.5511489 1.5414468-21.6510638 1.737532-10.267234 8.1116596-15.2551489 18.6403405-15.8134468 2.9957447-.1606808 6.0010212-.0245106 9.3957447-.0245106v14.0908936c-1.3971064.0994042-2.6771064.3022979-3.9489362.2641702-8.5800851-.2628085-9.024 2.6594043-9.650383 9.7620426-.3908085 4.4541276.1484255 8.9845106-.155234 13.453617-.3172766 4.4473189-.9123405 8.8714889-1.7811064 13.2452769-1.2377873 6.338723-5.1349787 11.052936-10.5354894 15.053617 10.4837447 6.822127 11.6765958 17.422978 12.3574468 28.187234.3662979 5.78451.1988085 11.609872.7857022 17.365787.4575319 4.467745 2.1950638 5.607489 6.8085106 5.74366zm8.8360851-60.430979h.1620425c5.0124259.083064 9.0103829 4.213106 8.9273189 9.226893 0 .164766-.005447.328171-.014978.491575-.281873 4.899404-4.481362 8.641362-9.3807664 8.359489-.1974468.004085-.3935319 0-.5909787-.009532-4.9892766-.247829-8.8333617-4.493617-8.5855319-9.482893.2478298-4.989277 4.493617-8.833362 9.4828936-8.585532zm31.2360854 0c5.482212-.042213 9.123404 3.510468 9.152 8.930042.029957 5.565277-3.421958 9.126128-8.868766 9.149277-5.539405.024511-9.186043-3.479149-9.216-8.866043-.016341-.275063-.020426-.550127-.012256-.825191.153873-4.786383 4.158639-8.541958 8.945022-8.388085zm65.399829-6.865702c1.458383 5.446808 4.297532 7.361361 10.03166 7.622808.939575.043575 1.875064.202894 3.163234.345873v15.692255c-.697191.228766-1.412085.40034-2.137872.512-7.684085.477957-11.186383 3.630298-11.962553 11.334808-.49566 4.918468-.454809 9.891405-.795234 14.827575-.142979 5.419574-.635915 10.82417-1.476086 16.179745-1.960851 9.703489-8.019063 14.54434-18.028936 15.135319-3.221787.190638-6.466723.029957-9.940425.029957v-14.025532c1.869617-.115744 3.52-.275064 5.174468-.314553 5.980596-.142979 8.095319-2.071149 8.388085-8.010894.324085-6.525276.465702-13.058723.757106-19.585361.42349-9.433873 3.006639-17.861447 11.795064-23.745362-5.028766-3.585362-9.066213-7.92783-10.112-13.783149-1.265021-7.097191-1.673532-14.3509787-2.354383-21.5475744-.33634-3.597617-.32-7.2265532-.671319-10.8214468-.378553-3.8808511-3.044766-5.2234894-6.577021-5.3106383-2.02349-.0490213-4.055149-.0095319-6.642383-.0095319v-13.696c16.509276-2.7411064 27.913532 2.752 28.972936 18.5477446.443915 6.6328511.378553 13.2970213.803404 19.9298728.186553 3.60851.725787 7.189787 1.612255 10.692085z" fill="#fff"/></svg>

src/components/Apps/AppsDevMode.tsx

@@ -332,7 +332,7 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
             isSelected={tab?.tabId === selectedTab?.tabId}
             app={tab}
             ref={iframeRefs.current[tab.tabId]}
-            isDevMode={true}
+            isDevMode={tab?.service ? false : true}
           />
         );
       })}

src/components/Apps/AppsDevModeHome.tsx

@@ -7,7 +7,7 @@ import {
   AppsContainer,
   AppsParent,
 } from "./Apps-styles";
-import {Buffer} from 'buffer'
+import { Buffer } from "buffer";
 
 import {
   Avatar,
@@ -29,15 +29,17 @@ import { Spacer } from "../../common/Spacer";
 import { useModal } from "../../common/useModal";
 import { createEndpoint, isUsingLocal } from "../../background";
 import { Label } from "../Group/AddGroup";
+import ShortUniqueId from "short-unique-id";
+import swaggerSVG from '../../assets/svgs/swagger.svg'
+const uid = new ShortUniqueId({ length: 8 });
 
 export const AppsDevModeHome = ({
   setMode,
   myApp,
   myWebsite,
   availableQapps,
-  myName
+  myName,
 }) => {
-
   const [domain, setDomain] = useState("127.0.0.1");
   const [port, setPort] = useState("");
   const [selectedPreviewFile, setSelectedPreviewFile] = useState(null);
@@ -51,23 +53,21 @@ export const AppsDevModeHome = ({
   } = useContext(MyContext);
 
   const handleSelectFile = async (existingFilePath) => {
-      const filePath = existingFilePath || await window.electron.selectFile();
+    const filePath = existingFilePath || (await window.electron.selectFile());
     if (filePath) {
-        
       const content = await window.electron.readFile(filePath);
-        return {buffer: content, filePath}
+      return { buffer: content, filePath };
     } else {
-        console.log('No file selected.');
+      console.log("No file selected.");
     }
   };
   const handleSelectDirectry = async (existingDirectoryPath) => {
-      const {buffer, directoryPath} =  await window.electron.selectAndZipDirectory(existingDirectoryPath);
+    const { buffer, directoryPath } =
+      await window.electron.selectAndZipDirectory(existingDirectoryPath);
     if (buffer) {
-        
+      return { buffer, directoryPath };
-     
-        return {buffer, directoryPath}
     } else {
-        console.log('No file selected.');
+      console.log("No file selected.");
     }
   };
 
@@ -84,7 +84,7 @@ export const AppsDevModeHome = ({
         });
         return;
       }
-        const {portVal, domainVal} = await show({
+      const { portVal, domainVal } = await show({
         message: "",
         publishFee: "",
       });
@@ -126,67 +126,62 @@ export const AppsDevModeHome = ({
 
         setInfoSnackCustom({
           type: "error",
-            message:
+          message: "You need a name to use preview",
-              "You need a name to use preview",
         });
         return;
       }
 
-      
+      const { buffer, filePath } = await handleSelectFile(existingFilePath);
-        const {buffer, filePath} = await handleSelectFile(existingFilePath)
 
       if (!buffer) {
         setOpenSnackGlobal(true);
 
         setInfoSnackCustom({
           type: "error",
-            message:
+          message: "Please select a file",
-              "Please select a file",
         });
         return;
       }
-       const postBody = Buffer.from(buffer).toString('base64')
+      const postBody = Buffer.from(buffer).toString("base64");
 
-          const endpoint = await createEndpoint(`/arbitrary/APP/${myName}/zip?preview=true`)
+      const endpoint = await createEndpoint(
-        const response = await fetch(
+        `/arbitrary/APP/${myName}/zip?preview=true`
-          endpoint
+      );
-          ,
+      const response = await fetch(endpoint, {
-          {
         method: "POST",
         headers: {
           "Content-Type": "text/plain",
         },
         body: postBody,
-          }
+      });
-        );
+      if (!response?.ok) throw new Error("Invalid zip");
-        if(!response?.ok) throw new Error('Invalid zip')
       const previewPath = await response.text();
-      if(tabId){
+      if (tabId) {
         executeEvent("appsDevModeUpdateTab", {
           data: {
             url: "http://127.0.0.1:12391" + previewPath,
             isPreview: true,
             filePath,
-            refreshFunc: (tabId)=> {
+            refreshFunc: (tabId) => {
-              addPreviewApp(true, filePath, tabId)
+              addPreviewApp(true, filePath, tabId);
             },
-            tabId
+            tabId,
           },
         });
-        return
+        return;
       }
       executeEvent("appsDevModeAddTab", {
         data: {
           url: "http://127.0.0.1:12391" + previewPath,
           isPreview: true,
           filePath,
-            refreshFunc: (tabId)=> {
+          refreshFunc: (tabId) => {
-              addPreviewApp(true, filePath, tabId)
+            addPreviewApp(true, filePath, tabId);
-            }
+          },
         },
       });
     } catch (error) {
-        console.error(error)
+      console.error(error);
     }
   };
 
@@ -208,67 +203,62 @@ export const AppsDevModeHome = ({
 
         setInfoSnackCustom({
           type: "error",
-            message:
+          message: "You need a name to use preview",
-              "You need a name to use preview",
         });
         return;
       }
 
-      
+      const { buffer, directoryPath } = await handleSelectDirectry(existingDir);
-        const {buffer, directoryPath} = await handleSelectDirectry(existingDir)
 
       if (!buffer) {
         setOpenSnackGlobal(true);
 
         setInfoSnackCustom({
           type: "error",
-            message:
+          message: "Please select a file",
-              "Please select a file",
         });
         return;
       }
-       const postBody = Buffer.from(buffer).toString('base64')
+      const postBody = Buffer.from(buffer).toString("base64");
 
-          const endpoint = await createEndpoint(`/arbitrary/APP/${myName}/zip?preview=true`)
+      const endpoint = await createEndpoint(
-        const response = await fetch(
+        `/arbitrary/APP/${myName}/zip?preview=true`
-          endpoint
+      );
-          ,
+      const response = await fetch(endpoint, {
-          {
         method: "POST",
         headers: {
           "Content-Type": "text/plain",
         },
         body: postBody,
-          }
+      });
-        );
+      if (!response?.ok) throw new Error("Invalid zip");
-        if(!response?.ok) throw new Error('Invalid zip')
       const previewPath = await response.text();
-      if(tabId){
+      if (tabId) {
         executeEvent("appsDevModeUpdateTab", {
           data: {
             url: "http://127.0.0.1:12391" + previewPath,
             isPreview: true,
             directoryPath,
-            refreshFunc: (tabId)=> {
+            refreshFunc: (tabId) => {
-              addPreviewAppWithDirectory(true, directoryPath, tabId)
+              addPreviewAppWithDirectory(true, directoryPath, tabId);
             },
-            tabId
+            tabId,
           },
         });
-        return
+        return;
       }
       executeEvent("appsDevModeAddTab", {
         data: {
           url: "http://127.0.0.1:12391" + previewPath,
           isPreview: true,
           directoryPath,
-            refreshFunc: (tabId)=> {
+          refreshFunc: (tabId) => {
-              addPreviewAppWithDirectory(true, directoryPath, tabId)
+            addPreviewAppWithDirectory(true, directoryPath, tabId);
-            }
+          },
         },
       });
     } catch (error) {
-        console.error(error)
+      console.error(error);
     }
   };
 
@@ -342,6 +332,86 @@ export const AppsDevModeHome = ({
             <AppCircleLabel>Directory</AppCircleLabel>
           </AppCircleContainer>
         </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            executeEvent("appsDevModeAddTab", {
+              data: {
+                service: "APP",
+                name: "Q-Sandbox",
+                tabId: uid.rnd(),
+              },
+            });
+          }}
+        >
+          <AppCircleContainer
+            sx={{
+              gap: !isMobile ? "10px" : "5px",
+            }}
+          >
+            <AppCircle>
+              <Avatar
+                sx={{
+                  height: "42px",
+                  width: "42px",
+                  "& img": {
+                    objectFit: "fill",
+                  },
+                }}
+                alt="Q-Sandbox"
+                src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/Q-Sandbox/qortal_avatar?async=true`}
+              >
+                <img
+                  style={{
+                    width: "31px",
+                    height: "auto",
+                  }}
+                  alt="center-icon"
+                />
+              </Avatar>
+            </AppCircle>
+            <AppCircleLabel>Q-Sandbox</AppCircleLabel>
+          </AppCircleContainer>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            executeEvent("appsDevModeAddTab", {
+              data: {
+                url: "http://127.0.0.1:12391",
+                isPreview: false,
+                customIcon: swaggerSVG
+              },
+            });
+          }}
+        >
+          <AppCircleContainer
+            sx={{
+              gap: !isMobile ? "10px" : "5px",
+            }}
+          >
+            <AppCircle>
+              <Avatar
+                sx={{
+                  height: "42px",
+                  width: "42px",
+                  "& img": {
+                    objectFit: "fill",
+                  },
+                }}
+                alt="API"
+                src={swaggerSVG}
+              >
+                <img
+                  style={{
+                    width: "31px",
+                    height: "auto",
+                  }}
+                  alt="center-icon"
+                />
+              </Avatar>
+            </AppCircle>
+            <AppCircleLabel>API</AppCircleLabel>
+          </AppCircleContainer>
+        </ButtonBase>
       </AppsContainer>
       {isShow && (
         <Dialog
@@ -349,7 +419,7 @@ export const AppsDevModeHome = ({
           aria-labelledby="alert-dialog-title"
           aria-describedby="alert-dialog-description"
           onKeyDown={(e) => {
-         if (e.key === 'Enter' && domain && port) {
+            if (e.key === "Enter" && domain && port) {
               onOk({ portVal: port, domainVal: domain });
             }
           }}
@@ -377,7 +447,7 @@ export const AppsDevModeHome = ({
                 display: "flex",
                 flexDirection: "column",
                 gap: "5px",
-             marginTop: '15px'
+                marginTop: "15px",
               }}
             >
               <Label>Port</Label>
@@ -402,7 +472,6 @@ export const AppsDevModeHome = ({
             </Button>
           </DialogActions>
         </Dialog>
-     
       )}
     </>
   );

src/components/Apps/AppsDevModeTabComponent.tsx

@@ -1,46 +1,49 @@
-import React from 'react'
+import React from "react";
-import { TabParent } from './Apps-styles'
+import { TabParent } from "./Apps-styles";
 import NavCloseTab from "../../assets/svgs/NavCloseTab.svg";
-import { getBaseApiReact } from '../../App';
+import { getBaseApiReact } from "../../App";
-import { Avatar, ButtonBase } from '@mui/material';
+import { Avatar, ButtonBase } from "@mui/material";
 import LogoSelected from "../../assets/svgs/LogoSelected.svg";
-import { executeEvent } from '../../utils/events';
+import { executeEvent } from "../../utils/events";
 
-export const AppsDevModeTabComponent = ({isSelected, app}) => {
+export const AppsDevModeTabComponent = ({ isSelected, app }) => {
   return (
-    <ButtonBase onClick={()=> {
+    <ButtonBase
-        if(isSelected){
+      onClick={() => {
-            executeEvent('removeTabDevMode', {
+        if (isSelected) {
-                data: app
+          executeEvent("removeTabDevMode", {
-            })
-            return
-        }
-        executeEvent('setSelectedTabDevMode', {
             data: app,
-            isDevMode: true
+          });
-        })
+          return;
-    }}>
-    <TabParent sx={{
-        border: isSelected && '1px solid #FFFFFF'
-    }}>
-        {isSelected && (
-            
-            <img style={
-                {
-                    position: 'absolute',
-                    top: '-5px',
-                    right: '-5px',
-                    zIndex: 1
         }
-            } src={NavCloseTab}/>
+        executeEvent("setSelectedTabDevMode", {
-           
+          data: app,
-        ) }
+          isDevMode: true,
+        });
+      }}
+    >
+      <TabParent
+        sx={{
+          border: isSelected && "1px solid #FFFFFF",
+        }}
+      >
+        {isSelected && (
+          <img
+            style={{
+              position: "absolute",
+              top: "-5px",
+              right: "-5px",
+              zIndex: 1,
+            }}
+            src={NavCloseTab}
+          />
+        )}
         <Avatar
           sx={{
             height: "28px",
             width: "28px",
           }}
-                          alt=''
+          alt=""
           src={``}
         >
           <img
@@ -48,12 +51,17 @@ export const AppsDevModeTabComponent = ({isSelected, app}) => {
               width: "28px",
               height: "auto",
             }}
-                            src={LogoSelected}
+            src={ app?.customIcon ? app?.customIcon :
+              app?.service
+                ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                    app?.name
+                  }/qortal_avatar?async=true`
+                : LogoSelected
+            }
             alt="center-icon"
           />
         </Avatar>
       </TabParent>
     </ButtonBase>
-  )
+  );
-}
+};
-