refresh apps

src/atoms/global.ts

@@ -24,6 +24,10 @@ export const sortablePinnedAppsAtom = atom({
   },{
     name: 'Qombo',
     service: 'APP'
+  },
+  {
+    name: 'Q-Trade',
+    service: 'APP'
   }
 ], 
 });

src/components/Apps/AppsCategoryDesktop.tsx

@@ -47,6 +47,7 @@ const officialAppList = [
   "qombo",
   "q-fund",
   "q-shop",
+  "q-trade"
 ];
 
 const ScrollerStyled = styled("div")({

src/components/Apps/AppsDesktop.tsx

@@ -117,9 +117,18 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
     }
   }, []);
   useEffect(() => {
-    getQapps();
     getCategories()
-  }, [getQapps, getCategories]);
+  }, [getCategories]);
+
+  useEffect(() => {
+    getQapps();
+
+    const interval = setInterval(() => {
+      getQapps();
+    }, 20 * 60 * 1000); // 20 minutes in milliseconds
+
+    return () => clearInterval(interval);
+  }, [getQapps]);
 
   const selectedAppInfoFunc = (e) => {
     const data = e.detail?.data;
@@ -445,6 +454,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
           myName={myName}
           hasPublishApp={!!(myApp || myWebsite)}
           categories={categories}
+          getQapps={getQapps}
         />
    
       {mode === "appInfo" && !selectedTab && <AppInfo app={selectedAppInfo} myName={myName} />}

src/components/Apps/AppsLibrary.tsx

@@ -41,6 +41,7 @@ const officialAppList = [
   "qombo",
   "q-fund",
   "q-shop",
+   "q-trade"
 ];
 
 const ScrollerStyled = styled('div')({

src/components/Apps/AppsLibraryDesktop.tsx

@@ -32,6 +32,7 @@ import IconSearch from "../../assets/svgs/Search.svg";
 import IconClearInput from "../../assets/svgs/ClearInput.svg";
 import qappDevelopText from "../../assets/svgs/qappDevelopText.svg";
 import qappLibraryText from "../../assets/svgs/qappLibraryText.svg";
+import RefreshIcon from "@mui/icons-material/Refresh";
 
 import qappDots from "../../assets/svgs/qappDots.svg";
 
@@ -55,6 +56,7 @@ const officialAppList = [
   "qombo",
   "q-fund",
   "q-shop",
+  "q-trade"
 ];
 
 const ScrollerStyled = styled("div")({
@@ -96,7 +98,8 @@ export const AppsLibraryDesktop = ({
   myName,
   hasPublishApp,
   isShow,
-  categories
+  categories,
+  getQapps
 }) => {
   const [searchValue, setSearchValue] = useState("");
   const virtuosoRef = useRef();
@@ -169,6 +172,11 @@ export const AppsLibraryDesktop = ({
             }}
           >
             <img src={qappLibraryText} />
+            <Box sx={{
+              display: 'flex',
+              gap: '20px',
+              alignItems: 'center'
+            }}>
             <AppsSearchContainer
               sx={{
                 width: "412px",
@@ -200,6 +208,22 @@ export const AppsLibraryDesktop = ({
                 )}
               </AppsSearchRight>
             </AppsSearchContainer>
+            <ButtonBase
+          onClick={(e) => {
+            getQapps()
+          }}
+        >
+          <RefreshIcon
+             
+              sx={{
+                color: "rgba(250, 250, 250, 0.5)",
+                width: '40px',
+                height: 'auto'
+              }}
+            />
+        </ButtonBase>
+            </Box>
+        
           </Box>
         </AppsWidthLimiter>
       </AppsDesktopLibraryHeader>