added save settings to qdn

src/App.tsx

@@ -99,6 +99,7 @@ import { AddressQRCode } from "./components/AddressQRCode";
 import { Settings } from "./components/Group/Settings";
 import { MainAvatar } from "./components/MainAvatar";
 import { useRetrieveDataLocalStorage } from "./useRetrieveDataLocalStorage";
+import { useQortalGetSaveSettings } from "./useQortalGetSaveSettings";
 
 type extStates =
   | "not-authenticated"
@@ -324,6 +325,7 @@ function App() {
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const qortalRequestCheckbox1Ref = useRef(null);
   useRetrieveDataLocalStorage()
+  useQortalGetSaveSettings(userInfo?.name)
   useEffect(() => {
     if (!isMobile) return;
     // Function to set the height of the app to the viewport height

src/assets/svgs/SaveIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const SaveIcon = ({color = '#8F8F91'}) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.18182 0C0.976833 0 0 0.976833 0 2.18182V21.8182C0 23.0232 0.976833 24 2.18182 24H21.8182C23.0232 24 24 23.0232 24 21.8182V7.4492C24 6.87053 23.7701 6.31559 23.3609 5.90641L18.0936 0.639044C17.6844 0.229866 17.1295 0 16.5508 0H16.3636C15.7611 0 15.2727 0.488422 15.2727 1.09091V5.45455C15.2727 6.65953 14.2959 7.63636 13.0909 7.63636H6.54545C5.34047 7.63636 4.36364 6.65953 4.36364 5.45455V1.09091C4.36364 0.488422 3.87521 0 3.27273 0H2.18182ZM12 18.5455C13.8075 18.5455 15.2727 17.0803 15.2727 15.2727C15.2727 13.4652 13.8075 12 12 12C10.1925 12 8.72727 13.4652 8.72727 15.2727C8.72727 17.0803 10.1925 18.5455 12 18.5455Z" fill={color}/>
+</svg>
+
+  )
+}

src/atoms/global.ts

@@ -4,4 +4,9 @@ import { atom } from 'recoil';
 export const sortablePinnedAppsAtom = atom({
   key: 'sortablePinnedAppsFromAtom', 
   default: [], 
+});
+
+export const canSaveSettingToQdnAtom = atom({
+  key: 'canSaveSettingToQdnAtom', 
+  default: false, 
 });

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}
+      />
+    </>
+    
   )
 }

src/useQortalGetSaveSettings.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useEffect } from 'react'
+import { useSetRecoilState } from 'recoil';
+import { canSaveSettingToQdnAtom, sortablePinnedAppsAtom } from './atoms/global';
+import { getArbitraryEndpointReact, getBaseApiReact } from './App';
+import { decryptResource } from './components/Group/Group';
+import { base64ToUint8Array, uint8ArrayToObject } from './backgroundFunctions/encryption';
+
+function fetchFromLocalStorage(key) {
+    try {
+        const serializedValue = localStorage.getItem(key);
+        if (serializedValue === null) {
+            console.log(`No data found for key: ${key}`);
+            return null;
+        }
+        return JSON.parse(serializedValue);
+    } catch (error) {
+        console.error('Error fetching from localStorage:', error);
+        return null;
+    }
+}
+
+const getPublishRecord = async (myName) => {
+    // const validApi = await findUsableApi();
+    const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT_PRIVATE&identifier=ext_saved_settings&exactmatchnames=true&limit=1&prefix=true&name=${myName}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error("network error");
+    }
+    const publishData = await response.json();
+
+    if(publishData?.length > 0) return true
+
+    return false
+  };
+  const getPublish = async (myName) => {
+    let data
+    const res = await fetch(
+        `${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${myName}/ext_saved_settings?encoding=base64`
+      );
+      data = await res.text();
+    
+
+    if(!data) throw new Error('Unable to fetch publish')
+
+    const decryptedKey: any = await decryptResource(data);
+
+    const dataint8Array = base64ToUint8Array(decryptedKey.data);
+    const decryptedKeyToObject = uint8ArrayToObject(dataint8Array);
+    return decryptedKeyToObject
+  };
+
+export const useQortalGetSaveSettings = (myName) => {
+    const setSortablePinnedApps = useSetRecoilState(sortablePinnedAppsAtom);
+    const setCanSave = useSetRecoilState(canSaveSettingToQdnAtom);
+
+    
+    const getSavedSettings = useCallback(async (myName)=> {
+        try {
+         const hasPublishRecord =    await getPublishRecord(myName)
+         if(hasPublishRecord){
+            const settings = await getPublish(myName)
+            if(settings?.sortablePinnedApps){
+                fetchFromLocalStorage('sortablePinnedApps', settings.sortablePinnedApps)
+                setSortablePinnedApps(settings.sortablePinnedApps)
+            }
+         }
+         setCanSave(true)
+        } catch (error) {
+            
+        }
+    }, [])
+    useEffect(()=> {
+        if(!myName) return
+        getSavedSettings(myName)
+    }, [getSavedSettings, myName])
+ 
+}