added save settings to qdn

src/components/Apps/AppViewerContainer.tsx

@@ -42,7 +42,7 @@ const AppViewerContainer = ({app, isSelected, hide}) => {
           </style>
         </>
       } style={{
-          height: `calc(${rootHeight} - 60px - 45px)`,
+          height: `calc(${rootHeight} - 60px - 45px  - 20px)`,
           border: 'none',
           width: '100%',
           display: (!isSelected || hide) && 'none'

src/components/Apps/Apps.tsx

@@ -236,6 +236,7 @@ export const Apps = ({ mode, setMode, show , myName}) => {
 
   const setNewTabWindowFunc = (e) => {
     setIsNewTabWindow(true);
+    setSelectedTab(null)
   };
 
   useEffect(() => {
@@ -252,18 +253,19 @@ export const Apps = ({ mode, setMode, show , myName}) => {
         display: !show && "none",
       }}
     >
-      {mode !== "viewer" && <Spacer height="30px" />}
+      {mode !== "viewer" && !selectedTab  && <Spacer height="30px" />}
       {mode === "home" && (
         <AppsHome availableQapps={availableQapps}  setMode={setMode} myApp={myApp} myWebsite={myWebsite} />
       )}
-      {mode === "library" && (
+    
         <AppsLibrary
+        isShow={mode === "library" && !selectedTab}
           availableQapps={availableQapps}
           setMode={setMode}
           myName={myName}
           hasPublishApp={!!(myApp || myWebsite)}
         />
-      )}
+   
       {mode === "appInfo" && <AppInfo app={selectedAppInfo} myName={myName} />}
       {mode === "publish" && <AppPublish names={myName ?  [myName] : []} categories={categories} />}
 
@@ -283,7 +285,7 @@ export const Apps = ({ mode, setMode, show , myName}) => {
           <AppsHome availableQapps={availableQapps} setMode={setMode} myApp={myApp} myWebsite={myWebsite} />
         </>
       )}
-      {mode !== "viewer" && <Spacer height="180px" />}
+      {mode !== "viewer" && !selectedTab  && <Spacer height="180px" />}
     </AppsParent>
   );
 };

src/components/Apps/AppsLibrary.tsx

@@ -74,7 +74,7 @@ const ScrollerStyled = styled('div')({
     "-ms-overflow-style": "none",
   });
 
-export const AppsLibrary = ({  availableQapps, setMode, myName, hasPublishApp }) => {
+export const AppsLibrary = ({  availableQapps, setMode, myName, hasPublishApp, isShow }) => {
   const [searchValue, setSearchValue] = useState("");
   const virtuosoRef = useRef();
   const { rootHeight } = useContext(MyContext);
@@ -133,7 +133,9 @@ export const AppsLibrary = ({  availableQapps, setMode, myName, hasPublishApp })
 
 
   return (
-      <AppsLibraryContainer>
+      <AppsLibraryContainer sx={{
+        display: !isShow && 'none'
+      }}>
         <AppsWidthLimiter>
         <Box
           sx={{

src/components/Apps/AppsNavBar.tsx

@@ -124,6 +124,7 @@ export const AppsNavBar = () => {
           }} src={NavAdd} />
         </ButtonBase>
         <ButtonBase onClick={(e)=> {
+          if(!selectedTab) return
           handleClick(e)
         }}>
           <img style={{

src/components/Mobile/MobileHeader.tsx

@@ -122,35 +122,25 @@ const Header = ({
           >
             {/* Right Logout Icon */}
 
-            <IconButton
+            <ButtonBase
               onClick={() => {
                 setMobileViewModeKeepOpen("messaging");
               }}
-              edge="end"
-              color="inherit"
-              aria-label="logout"
-
-              // onClick={onLogoutClick}
             >
               <MessagingIcon2    height={20}              color={hasUnreadDirects ? "var(--unread)" : "rgba(145, 145, 147, 1)"}
                 
               />
-            </IconButton>
+            </ButtonBase>
             <Save />
-            <IconButton
+            <ButtonBase
               onClick={logoutFunc}
-              edge="end"
-              color="inherit"
-              aria-label="logout"
-
-              // onClick={onLogoutClick}
             >
               <LogoutIcon
                 height={20}
                 width={21}
                 color="rgba(145, 145, 147, 1)"
               />
-            </IconButton>
+            </ButtonBase>
           </Box>
         </Toolbar>
         <Menu

src/components/Save/Save.tsx

@@ -1,16 +1,135 @@
-import React, { useMemo, useState } from 'react'
+import React, { useContext, useMemo, useState } from 'react'
 import { useRecoilState } from 'recoil';
 import isEqual from 'lodash/isEqual'; // Import deep comparison utility
-import { sortablePinnedAppsAtom } from '../../atoms/global';
+import { canSaveSettingToQdnAtom, sortablePinnedAppsAtom } from '../../atoms/global';
+import { ButtonBase } from '@mui/material';
+import { objectToBase64 } from '../../qdn/encryption/group-encryption';
+import { MyContext } from '../../App';
+import { getFee } from '../../background';
+import { CustomizedSnackbars } from '../Snackbar/Snackbar';
+import { SaveIcon } from '../../assets/svgs/SaveIcon';
 export const Save = () => {
     const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom);
+    const [canSave, _] = useRecoilState(canSaveSettingToQdnAtom);
+    const [openSnack, setOpenSnack] = useState(false);
+    const [isLoading, setIsLoading] = useState(false)
+  const [infoSnack, setInfoSnack] = useState(null);
     const [oldPinnedApps, setOldPinnedApps] = useState(pinnedApps)
     console.log('oldpin', {oldPinnedApps, pinnedApps})
+    const { show } = useContext(MyContext);
 
     const hasChanged = useMemo(()=> {
-        return !isEqual(pinnedApps, oldPinnedApps)
+      const newChanges = {
+        sortablePinnedApps: pinnedApps.map((item)=> {
+          return {
+            name: item?.name,
+            service: item?.service
+          }
+        })
+      }
+      const oldChanges = {
+        sortablePinnedApps: oldPinnedApps.map((item)=> {
+          return {
+            name: item?.name,
+            service: item?.service
+          }
+        })
+      }
+        return !isEqual(oldChanges, newChanges)
     }, [oldPinnedApps, pinnedApps])
+
+    const saveToQdn = async ()=> {
+      try {
+        setIsLoading(true)
+        const data64 = await objectToBase64({
+          sortablePinnedApps: pinnedApps
+        })
+        const encryptData = await new Promise((res, rej) => {
+          chrome?.runtime?.sendMessage(
+            {
+              action: "ENCRYPT_DATA",
+              type: "qortalRequest",
+              payload: {
+                data64
+              },
+            },
+            (response) => {
+              console.log("response", response);
+              if (response.error) {
+                rej(response?.message);
+                return;
+              } else {
+                res(response);
+                
+              }
+            }
+          );
+        });
+        if(encryptData && !encryptData?.error){
+          const fee = await getFee('ARBITRARY')
+
+          await show({
+            message: "Would you like to publish your settings to QDN (encrypted) ?" ,
+            publishFee: fee.fee + ' QORT'
+          })
+         const response =  await new Promise((res, rej) => {
+            chrome?.runtime?.sendMessage(
+              {
+                action: "publishOnQDN",
+                payload: {
+                  data: encryptData,
+                  identifier: "ext_saved_settings",
+                  service: 'DOCUMENT_PRIVATE'
+                },
+              },
+              (response) => {
+             
+                if (!response?.error) {
+                  res(response);
+                  return
+                }
+                rej(response.error);
+              }
+            );
+          });
+          console.log('saved', response)
+          if(response?.identifier){
+            setOldPinnedApps(pinnedApps)
+            setInfoSnack({
+              type: "success",
+              message:
+                 "Sucessfully published to QDN",
+            });
+            setOpenSnack(true);
+          }
+        }
+        console.log('save encryptedData', encryptData)
+      } catch (error) {
+        setInfoSnack({
+          type: "error",
+          message:
+            error?.message || "Unable to save to QDN",
+        });
+        setOpenSnack(true);
+      } finally {
+        setIsLoading(false)
+      }
+    }
   return (
-    <div>{hasChanged && 'Save'}</div>
+    <>
+    <ButtonBase  onClick={saveToQdn} disabled={!hasChanged || !canSave || isLoading}>
+      <SaveIcon
+        color={(hasChanged && !isLoading) ? '#5EB049' : '#8F8F91'}
+       />
+      </ButtonBase>
+     <CustomizedSnackbars
+        duration={3500}
+        open={openSnack}
+        setOpen={setOpenSnack}
+        info={infoSnack}
+        setInfo={setInfoSnack}
+      />
+    </>
+    
   )
 }