Refactor and use prettier

src/App.tsx

@@ -606,6 +606,7 @@ function App() {
             });
         });
     } catch (error) {
+      console.log(error);
     } finally {
       setIsLoading(false);
     }

src/components/Apps/Apps-styles.tsx

@@ -1,78 +1,78 @@
-import { Typography, Box, ButtonBase } from "@mui/material";
+import { Typography, Box, ButtonBase } from '@mui/material';
-import { styled } from "@mui/system";
+import { styled } from '@mui/system';
 
 export const AppsParent = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  width: "100%",
+  width: '100%',
-  flexDirection: "column",
+  flexDirection: 'column',
-  height: "100%",
+  height: '100%',
-  alignItems: "center",
+  alignItems: 'center',
-  overflow: "auto",
+  overflow: 'auto',
   // For WebKit-based browsers (Chrome, Safari, etc.)
-  "::-webkit-scrollbar": {
+  '::-webkit-scrollbar': {
-    width: "0px", // Set the width to 0 to hide the scrollbar
+    width: '0px', // Set the width to 0 to hide the scrollbar
-    height: "0px", // Set the height to 0 for horizontal scrollbar
+    height: '0px', // Set the height to 0 for horizontal scrollbar
   },
 
   // For Firefox
-  scrollbarWidth: "none", // Hides the scrollbar in Firefox
+  scrollbarWidth: 'none', // Hides the scrollbar in Firefox
 
   // Optional for better cross-browser consistency
-  "-msOverflowStyle": "none", // Hides scrollbar in IE and Edge
+  '-msOverflowStyle': 'none', // Hides scrollbar in IE and Edge
 
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  width: "90%",
+  width: '90%',
-  justifyContent: "space-evenly",
+  justifyContent: 'space-evenly',
-  gap: "24px",
+  gap: '24px',
-  flexWrap: "wrap",
+  flexWrap: 'wrap',
-  alignItems: "flex-start",
+  alignItems: 'flex-start',
-  alignSelf: "center",
+  alignSelf: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  width: "100%",
+  width: '100%',
-  flexDirection: "column",
+  flexDirection: 'column',
-  justifyContent: "flex-start",
+  justifyContent: 'flex-start',
-  alignItems: "center",
+  alignItems: 'center',
   backgroundColor: theme.palette.background.paper,
 }));
 
 export const AppsWidthLimiter = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  width: "90%",
+  width: '90%',
-  flexDirection: "column",
+  flexDirection: 'column',
-  justifyContent: "flex-start",
+  justifyContent: 'flex-start',
-  alignItems: "flex-start",
+  alignItems: 'flex-start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsSearchContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  width: "90%",
+  width: '90%',
-  justifyContent: "space-between",
+  justifyContent: 'space-between',
-  alignItems: "center",
+  alignItems: 'center',
-  borderRadius: "8px",
+  borderRadius: '8px',
-  padding: "0px 10px",
+  padding: '0px 10px',
-  height: "36px",
+  height: '36px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsSearchLeft = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  width: "90%",
+  width: '90%',
-  justifyContent: "flex-start",
+  justifyContent: 'flex-start',
-  alignItems: "center",
+  alignItems: 'center',
-  gap: "10px",
+  gap: '10px',
   flexGrow: 1,
   flexShrink: 0,
   backgroundColor: theme.palette.background.default,
@@ -80,51 +80,50 @@ export const AppsSearchLeft = styled(Box)(({ theme }) => ({
 }));
 
 export const AppsSearchRight = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  width: "90%",
+  width: '90%',
-  justifyContent: "flex-end",
+  justifyContent: 'flex-end',
-  alignItems: "center",
+  alignItems: 'center',
   flexShrink: 1,
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppCircleContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  flexDirection: "column",
+  flexDirection: 'column',
-  gap: "5px",
+  gap: '5px',
-  alignItems: "center",
+  alignItems: 'center',
-  width: "100%",
+  width: '100%',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const Add = styled(Typography)(({ theme }) => ({
-  fontSize: "36px",
+  fontSize: '36px',
   fontWeight: 500,
-  lineHeight: "43.57px",
+  lineHeight: '43.57px',
-  textAlign: "left",
+  textAlign: 'left',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppCircleLabel = styled(Typography)(({ theme }) => ({
-  fontSize: "14px",
+  '-webkit-box-orient': 'vertical',
-  fontWeight: 500,
+  '-webkit-line-clamp': '2',
-  lineHeight: 1.2,
-  // whiteSpace: 'nowrap',
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  width: "120%",
-  "-webkit-line-clamp": "2",
-  "-webkit-box-orient": "vertical",
-  display: "-webkit-box",
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: '-webkit-box',
+  fontSize: '14px',
+  fontWeight: 500,
+  lineHeight: 1.2,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  width: '120%',
 }));
 
 export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
-  fontSize: "16px",
+  fontSize: '16px',
   fontWeight: 500,
   lineHeight: 1.2,
   backgroundColor: theme.palette.background.default,
@@ -132,58 +131,63 @@ export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
 }));
 
 export const AppCircle = styled(Box)(({ theme }) => ({
-  display: "flex",
+  alignItems: 'center',
-  width: "75px",
-  flexDirection: "column",
-  height: "75px",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "50%",
   backgroundColor: theme.palette.background.default,
+  borderColor:
+    theme.palette.mode === 'dark'
+      ? 'rgb(209, 209, 209)'
+      : 'rgba(41, 41, 43, 1)',
+  borderWidth: '1px',
+  borderRadius: '50%',
+  borderStyle: 'solid',
   color: theme.palette.text.primary,
-  border: "1px solid #FFFFFF",
+  display: 'flex',
+  flexDirection: 'column',
+  height: '75px',
+  justifyContent: 'center',
+  width: '75px',
 }));
 
 export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
+  alignItems: 'center',
-  justifyContent: "space-between",
-  alignItems: "center",
-  width: "100%",
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
 }));
 
 export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({
-  display: "flex",
+  alignItems: 'center',
-  justifyContent: "flex-start",
-  alignItems: "center",
-  gap: "12px",
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  gap: '12px',
+  justifyContent: 'flex-start',
 }));
 
 export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  justifyContent: "flex-end",
+  justifyContent: 'flex-end',
-  alignItems: "center",
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({
-  backgroundColor: "#247C0E",
+  backgroundColor: '#247C0E',
   color: theme.palette.text.primary,
-  width: "101px",
+  width: '101px',
-  height: "29px",
+  height: '29px',
-  display: "flex",
+  display: 'flex',
-  justifyContent: "center",
+  justifyContent: 'center',
-  alignItems: "center",
+  alignItems: 'center',
-  borderRadius: "25px",
+  borderRadius: '25px',
-  alignSelf: "center",
+  alignSelf: 'center',
 }));
 
 export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
-  fontSize: "14px",
+  fontSize: '14px',
   fontWeight: 500,
   lineHeight: 1.2,
   backgroundColor: theme.palette.background.default,
@@ -191,50 +195,50 @@ export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
 }));
 
 export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({
-  gap: "10px",
+  gap: '10px',
-  flexWrap: "wrap",
+  flexWrap: 'wrap',
-  justifyContent: "flex-start",
+  justifyContent: 'flex-start',
-  width: "100%",
+  width: '100%',
-  display: "flex",
+  display: 'flex',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  flexDirection: "column",
+  flexDirection: 'column',
-  justifyContent: "center",
+  justifyContent: 'center',
-  alignItems: "flex-start",
+  alignItems: 'flex-start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppInfoAppName = styled(Typography)(({ theme }) => ({
-  fontSize: "16px",
+  fontSize: '16px',
   fontWeight: 500,
   lineHeight: 1.2,
-  textAlign: "start",
+  textAlign: 'start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppInfoUserName = styled(Typography)(({ theme }) => ({
-  fontSize: "13px",
+  fontSize: '13px',
   fontWeight: 400,
   lineHeight: 1.2,
-  textAlign: "start",
+  textAlign: 'start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsNavBarParent = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  justifyContent: "space-between",
+  justifyContent: 'space-between',
-  alignItems: "center",
+  alignItems: 'center',
-  width: "100%",
+  width: '100%',
-  height: "60px",
+  height: '60px',
-  padding: "0px 10px",
+  padding: '0px 10px',
-  position: "fixed",
+  position: 'fixed',
   bottom: 0,
   zIndex: 1,
   backgroundColor: theme.palette.background.default,
@@ -242,120 +246,120 @@ export const AppsNavBarParent = styled(Box)(({ theme }) => ({
 }));
 
 export const AppsNavBarLeft = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  justifyContent: "flex-start",
+  justifyContent: 'flex-start',
-  alignItems: "center",
+  alignItems: 'center',
   flexGrow: 1,
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsNavBarRight = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  justifyContent: "flex-end",
+  justifyContent: 'flex-end',
-  alignItems: "center",
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const TabParent = styled(Box)(({ theme }) => ({
-  height: "36px",
+  height: '36px',
-  width: "36px",
+  width: '36px',
-  position: "relative",
+  position: 'relative',
-  borderRadius: "50%",
+  borderRadius: '50%',
-  display: "flex",
+  display: 'flex',
-  alignItems: "center",
+  alignItems: 'center',
-  justifyContent: "center",
+  justifyContent: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  justifyContent: "space-between",
+  justifyContent: 'space-between',
-  alignItems: "center",
+  alignItems: 'center',
-  width: "100%",
+  width: '100%',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  justifyContent: "flex-start",
+  justifyContent: 'flex-start',
-  alignItems: "center",
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  justifyContent: "flex-end",
+  justifyContent: 'flex-end',
-  alignItems: "center",
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
-  width: "101px",
+  width: '101px',
-  height: "29px",
+  height: '29px',
-  display: "flex",
+  display: 'flex',
-  justifyContent: "center",
+  justifyContent: 'center',
-  alignItems: "center",
+  alignItems: 'center',
-  borderRadius: "25px",
+  borderRadius: '25px',
-  border: "1px solid #FFFFFF",
+  border: '1px solid #FFFFFF',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  justifyContent: "center",
+  justifyContent: 'center',
-  alignItems: "center",
+  alignItems: 'center',
-  width: "60px",
+  width: '60px',
-  height: "60px",
+  height: '60px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
-  fontSize: "10px",
+  fontSize: '10px',
   fontWeight: 400,
   lineHeight: 1.2,
-  fontStyle: "italic",
+  fontStyle: 'italic',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({
-  width: "101px",
+  width: '101px',
-  height: "30px",
+  height: '30px',
-  display: "flex",
+  display: 'flex',
-  justifyContent: "center",
+  justifyContent: 'center',
-  alignItems: "center",
+  alignItems: 'center',
-  borderRadius: "5px",
+  borderRadius: '5px',
   fontWeight: 600,
-  fontSize: "10px",
+  fontSize: '10px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsCategoryInfo = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  alignItems: "center",
+  alignItems: 'center',
-  width: "100%",
+  width: '100%',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsCategoryInfoSub = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
-  flexDirection: "column",
+  flexDirection: 'column',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({
-  fontSize: "12px",
+  fontSize: '12px',
   fontWeight: 700,
   lineHeight: 1.2,
   backgroundColor: theme.palette.background.default,
@@ -363,7 +367,7 @@ export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({
 }));
 
 export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({
-  fontSize: "12px",
+  fontSize: '12px',
   fontWeight: 500,
   lineHeight: 1.2,
   backgroundColor: theme.palette.background.default,
@@ -371,11 +375,11 @@ export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({
 }));
 
 export const AppsInfoDescription = styled(Typography)(({ theme }) => ({
-  fontSize: "13px",
+  fontSize: '13px',
   fontWeight: 300,
   lineHeight: 1.2,
-  width: "90%",
+  width: '90%',
-  textAlign: "start",
+  textAlign: 'start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));

src/components/Apps/AppsDevModeTabComponent.tsx

@@ -1,22 +1,21 @@
-import React from "react";
+import { TabParent } from './Apps-styles';
-import { TabParent } from "./Apps-styles";
+import NavCloseTab from '../../assets/svgs/NavCloseTab.svg';
-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 LogoSelected from "../../assets/svgs/LogoSelected.svg";
+import { executeEvent } from '../../utils/events';
-import { executeEvent } from "../../utils/events";
 
 export const AppsDevModeTabComponent = ({ isSelected, app }) => {
   return (
     <ButtonBase
       onClick={() => {
         if (isSelected) {
-          executeEvent("removeTabDevMode", {
+          executeEvent('removeTabDevMode', {
             data: app,
           });
           return;
         }
-        executeEvent("setSelectedTabDevMode", {
+        executeEvent('setSelectedTabDevMode', {
           data: app,
           isDevMode: true,
         });
@@ -24,15 +23,15 @@ export const AppsDevModeTabComponent = ({ isSelected, app }) => {
     >
       <TabParent
         sx={{
-          border: isSelected && "1px solid #FFFFFF",
+          border: isSelected && '1px solid #FFFFFF',
         }}
       >
         {isSelected && (
           <img
             style={{
-              position: "absolute",
+              position: 'absolute',
-              top: "-5px",
+              top: '-5px',
-              right: "-5px",
+              right: '-5px',
               zIndex: 1,
             }}
             src={NavCloseTab}
@@ -40,23 +39,25 @@ export const AppsDevModeTabComponent = ({ isSelected, app }) => {
         )}
         <Avatar
           sx={{
-            height: "28px",
+            height: '28px',
-            width: "28px",
+            width: '28px',
           }}
           alt=""
           src={``}
         >
           <img
             style={{
-              width: "28px",
+              width: '28px',
-              height: "auto",
+              height: 'auto',
             }}
-            src={ app?.customIcon ? app?.customIcon :
+            src={
-              app?.service
+              app?.customIcon
-                ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                ? app?.customIcon
-                    app?.name
+                : app?.service
-                  }/qortal_avatar?async=true`
+                  ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
-                : LogoSelected
+                      app?.name
+                    }/qortal_avatar?async=true`
+                  : LogoSelected
             }
             alt="center-icon"
           />

src/components/Apps/AppsHome.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState } from 'react';
 import {
   AppCircle,
   AppCircleContainer,
@@ -6,52 +6,51 @@ import {
   AppLibrarySubTitle,
   AppsContainer,
   AppsParent,
-} from "./Apps-styles";
+} from './Apps-styles';
-import { Avatar, ButtonBase } from "@mui/material";
+import { Avatar, ButtonBase } from '@mui/material';
-import { Add } from "@mui/icons-material";
+import { Add } from '@mui/icons-material';
-import { getBaseApiReact, isMobile } from "../../App";
+import { getBaseApiReact, isMobile } from '../../App';
-import LogoSelected from "../../assets/svgs/LogoSelected.svg";
+import LogoSelected from '../../assets/svgs/LogoSelected.svg';
-import { executeEvent } from "../../utils/events";
+import { executeEvent } from '../../utils/events';
-import { SortablePinnedApps } from "./SortablePinnedApps";
+import { SortablePinnedApps } from './SortablePinnedApps';
-import { Spacer } from "../../common/Spacer";
+import { Spacer } from '../../common/Spacer';
 
-export const AppsHome = ({  setMode, myApp, myWebsite, availableQapps  }) => {
+export const AppsHome = ({ setMode, myApp, myWebsite, availableQapps }) => {
   return (
     <>
-    <AppsContainer
+      <AppsContainer
         sx={{
-        
+          justifyContent: 'flex-start',
-          justifyContent: "flex-start",
         }}
       >
-    <AppLibrarySubTitle
+        <AppLibrarySubTitle>Apps Dashboard</AppLibrarySubTitle>
-   
+      </AppsContainer>
-  >
+      <Spacer height="20px" />
-    Apps Dashboard
-
-  </AppLibrarySubTitle>
-  </AppsContainer>
-  <Spacer height="20px" />
 
       <AppsContainer>
         <ButtonBase
           onClick={() => {
-            setMode("library");
+            setMode('library');
           }}
         >
-          <AppCircleContainer sx={{
+          <AppCircleContainer
-              gap: !isMobile ? "10px" : "5px",
+            sx={{
-            }}>
+              gap: !isMobile ? '10px' : '5px',
+            }}
+          >
             <AppCircle>
               <Add>+</Add>
             </AppCircle>
             <AppCircleLabel>Library</AppCircleLabel>
           </AppCircleContainer>
         </ButtonBase>
-       
+
-        <SortablePinnedApps availableQapps={availableQapps} myWebsite={myWebsite} myApp={myApp}  />
+        <SortablePinnedApps
-    
+          availableQapps={availableQapps}
+          myWebsite={myWebsite}
+          myApp={myApp}
+        />
       </AppsContainer>
-      </>
+    </>
   );
 };

src/components/Apps/AppsLibrary.tsx

@@ -58,6 +58,8 @@ const officialAppList = [
   'q-search',
 ];
 
+// TODO: apply dark/light style
+
 const ScrollerStyled = styled('div')({
   // Hide scrollbar for WebKit browsers (Chrome, Safari)
   '::-webkit-scrollbar': {