added wallets embed

src/App.tsx

@@ -47,6 +47,7 @@ import Info from "./assets/svgs/Info.svg";
 import CloseIcon from "@mui/icons-material/Close";
 import './utils/seedPhrase/RandomSentenceGenerator';
 import EngineeringIcon from '@mui/icons-material/Engineering';
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
 import {
   createAccount,
   generateRandomSentence,
@@ -1698,13 +1699,46 @@ function App() {
                 />
               </Tooltip>
             </ButtonBase>
+            <Spacer height="20px" />
+            <ButtonBase
+              onClick={() => {
+                executeEvent('openWalletsApp', {})
+              }}
+            >
+              <Tooltip
+                title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>WALLETS</span>} 
+                placement="left"
+                arrow
+                sx={{ fontSize: "24" }}
+                slotProps={{
+                  tooltip: {
+                    sx: {
+                      color: "#ffffff",
+                      backgroundColor: "#444444",
+                    },
+                  },
+                  arrow: {
+                    sx: {
+                      color: "#444444",
+                    },
+                  },
+                }}
+              >
+                <AccountBalanceWalletIcon
+                  sx={{
+                    color: "rgba(255, 255, 255, 0.5)",
+                  }}
+                />
+              </Tooltip>
+            </ButtonBase>
+            
           
             {desktopViewMode !== 'home' && (
               <>
                 <Spacer height="20px" />
              
                <Tooltip
-               title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>WALLET</span>} 
+               title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>YOUR ACCOUNT</span>} 
                placement="left"
                arrow
                sx={{ fontSize: "24" }}
@@ -1733,75 +1767,7 @@ function App() {
               </>
             )}
           
-            {/* {authenticatedMode === "qort" && (
+          
-              <Tooltip
-                title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LITECOIN WALLET</span>} 
-                placement="left"
-                arrow
-                sx={{ fontSize: "24" }}
-                slotProps={{
-                  tooltip: {
-                    sx: {
-                      color: "#ffffff",
-                      backgroundColor: "#444444",
-                    },
-                  },
-                  arrow: {
-                    sx: {
-                      color: "#444444",
-                    },
-                  },
-                }}
-              >
-                <img
-                  onClick={() => {
-                    if(desktopViewMode !== 'home'){
-                      setIsOpenDrawerProfile((prev)=> !prev)
-                    }
-                    setAuthenticatedMode("ltc");
-                  }}
-                  src={ltcLogo}
-                  style={{
-                    cursor: "pointer",
-                    width: "20px",
-                    height: "auto",
-                  }}
-                />
-              </Tooltip>
-            )}
-            {authenticatedMode === "ltc" && (
-              <Tooltip
-                title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>QORTAL WALLET</span>} 
-                placement="left"
-                arrow
-                sx={{ fontSize: "24" }}
-                slotProps={{
-                  tooltip: {
-                    sx: {
-                      color: "#ffffff",
-                      backgroundColor: "#444444",
-                    },
-                  },
-                  arrow: {
-                    sx: {
-                      color: "#444444",
-                    },
-                  },
-                }}
-              >
-                <img
-                  onClick={() => {
-                    setAuthenticatedMode("qort");
-                  }}
-                  src={qortLogo}
-                  style={{
-                    cursor: "pointer",
-                    width: "20px",
-                    height: "auto",
-                  }}
-                />
-              </Tooltip>
-            )} */}
             <Spacer height="20px" />
             <CoreSyncStatus />
             <Spacer height="20px" />

src/atoms/global.ts

@@ -38,6 +38,10 @@ export const sortablePinnedAppsAtom = atom({
   {
     name: 'Q-Mintership',
     service: 'APP'
+  },
+  {
+    name: 'Q-Wallets',
+    service: 'APP'
   }
 ], 
 });

src/components/Apps/AppViewer.tsx

@@ -11,11 +11,11 @@ import { useQortalMessageListener } from "./useQortalMessageListener";
 
 
 
-export const AppViewer = React.forwardRef(({ app , hide, isDevMode}, iframeRef) => {
+export const AppViewer = React.forwardRef(({ app , hide, isDevMode, skipAuth}, iframeRef) => {
   const { rootHeight } = useContext(MyContext);
   // const iframeRef = useRef(null);
   const { document, window: frameWindow } = useFrame();
-  const {path, history, changeCurrentIndex, resetHistory} = useQortalMessageListener(frameWindow, iframeRef, app?.tabId, isDevMode, app?.name, app?.service) 
+  const {path, history, changeCurrentIndex, resetHistory} = useQortalMessageListener(frameWindow, iframeRef, app?.tabId, isDevMode, app?.name, app?.service, skipAuth) 
   const [url, setUrl] = useState('')
 
 

src/components/Apps/AppViewerContainer.tsx

@@ -3,7 +3,7 @@ import { AppViewer } from './AppViewer';
 import Frame from 'react-frame-component';
 import { MyContext, isMobile } from '../../App';
 
-const AppViewerContainer = React.forwardRef(({ app, isSelected, hide, isDevMode, customHeight }, ref) => {
+const AppViewerContainer = React.forwardRef(({ app, isSelected, hide, isDevMode, customHeight, skipAuth }, ref) => {
   const { rootHeight } = useContext(MyContext);
 
 
@@ -42,7 +42,7 @@ const AppViewerContainer = React.forwardRef(({ app, isSelected, hide, isDevMode,
         overflow: 'hidden',
       }}
     >
-      <AppViewer app={app}  ref={ref} hide={!isSelected || hide} isDevMode={isDevMode} />
+      <AppViewer skipAuth={skipAuth} app={app}  ref={ref} hide={!isSelected || hide} isDevMode={isDevMode} />
     </Frame>
   );
 });

src/components/Apps/AppsCategory.tsx

@@ -40,7 +40,8 @@ const officialAppList = [
   "q-shop",
   "q-trade",
   "q-support",
-  "q-manager"
+  "q-manager",
+  "q-wallets"
 ];
 
 const ScrollerStyled = styled('div')({

src/components/Apps/AppsCategoryDesktop.tsx

@@ -48,7 +48,8 @@ const officialAppList = [
   "q-shop",
   "q-trade",
   "q-support",
-  "q-manager"
+  "q-manager",
+  "q-wallets"
 ];
 
 const ScrollerStyled = styled("div")({

src/components/Apps/AppsLibrary.tsx

@@ -42,7 +42,8 @@ const officialAppList = [
   "q-shop",
    "q-trade",
    "q-support",
-  "q-manager"
+  "q-manager",
+  "q-wallets"
 ];
 
 const ScrollerStyled = styled('div')({

src/components/Apps/AppsLibraryDesktop.tsx

@@ -58,7 +58,8 @@ const officialAppList = [
   "q-trade",
   "q-support",
   "q-manager",
-  "q-mintership"
+  "q-mintership",
+  "q-wallets"
 ];
 
 const ScrollerStyled = styled("div")({

src/components/Apps/useQortalMessageListener.tsx

@@ -507,7 +507,7 @@ export const UIQortalRequests = [
     return obj; // Updated object with references to stored files
   }
 
-export const useQortalMessageListener = (frameWindow, iframeRef, tabId, isDevMode, appName, appService) => {
+export const useQortalMessageListener = (frameWindow, iframeRef, tabId, isDevMode, appName, appService, skipAuth) => {
   const [path, setPath] = useState('')
   const [history, setHistory] = useState({
     customQDNHistoryPaths: [],
@@ -564,7 +564,7 @@ isDOMContentLoaded: false
       const sendMessageToRuntime = (message, eventPort) => {
         window.sendMessage(message.action, message.payload, 300000, message.isExtension, {
           name: appName, service: appService
-        })
+        }, skipAuth)
         .then((response) => {
           if (response.error) {
             eventPort.postMessage({
@@ -633,6 +633,8 @@ isDOMContentLoaded: false
           window.sendMessage("addEnteredQmailTimestamp").catch((error) => {
             // error
           });
+        } else if(appName?.toLowerCase() === 'q-wallets'){
+         executeEvent('setLastEnteredTimestampPaymentEvent', {})
         }
       } else if(event?.data?.action === 'NAVIGATION_HISTORY'){
         if(event?.data?.payload?.isDOMContentLoaded){

src/components/Explore/Explore.tsx

@@ -4,6 +4,9 @@ import ChatIcon from "@mui/icons-material/Chat";
 import qTradeLogo from "../../assets/Icons/q-trade-logo.webp";
 import AppsIcon from "@mui/icons-material/Apps";
 import { executeEvent } from "../../utils/events";
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
+
+
 export const Explore = ({setDesktopViewMode}) => {
   return (
     <Box
@@ -96,6 +99,33 @@ export const Explore = ({setDesktopViewMode}) => {
           General Chat
         </Typography>
       </ButtonBase>
+      <ButtonBase
+        sx={{
+          "&:hover": { backgroundColor: "secondary.main" },
+          transition: "all 0.1s ease-in-out",
+          padding: "5px",
+          borderRadius: "5px",
+          gap: "5px",
+        }}
+        onClick={async () => {
+            executeEvent("openWalletsApp", {
+           
+            });
+          }}
+      >
+        <AccountBalanceWalletIcon
+          sx={{
+            color: "white",
+          }}
+        />
+        <Typography
+          sx={{
+            fontSize: "1rem",
+          }}
+        >
+          Wallets
+        </Typography>
+      </ButtonBase>
     </Box>
   );
 };

src/components/GeneralNotifications.tsx

@@ -13,6 +13,7 @@ import NotificationsIcon from "@mui/icons-material/Notifications";
 import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
 import { formatDate } from "../utils/time";
 import { useHandlePaymentNotification } from "../hooks/useHandlePaymentNotification";
+import { executeEvent } from "../utils/events";
 
 export const GeneralNotifications = ({ address }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -35,11 +36,31 @@ export const GeneralNotifications = ({ address }) => {
         }}
         style={{}}
       >
+         <Tooltip
+                title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>PAYMENT NOTIFICATION</span>} 
+                placement="left"
+                arrow
+                sx={{ fontSize: "24" }}
+                slotProps={{
+                  tooltip: {
+                    sx: {
+                      color: "#ffffff",
+                      backgroundColor: "#444444",
+                    },
+                  },
+                  arrow: {
+                    sx: {
+                      color: "#444444",
+                    },
+                  },
+                }}
+              >
         <NotificationsIcon
           sx={{
             color: hasNewPayment ? "var(--unread)" : "rgba(255, 255, 255, 0.5)",
           }}
         />
+        </Tooltip>
       </ButtonBase>
 
       <Popover
@@ -77,11 +98,10 @@ export const GeneralNotifications = ({ address }) => {
                 width: "100%",
                 alignItems: "flex-start",
                 textWrap: "auto",
-                cursor: 'default'
               }}
-              onClick={(e) => {
+             onClick={() => {
-                     // executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
+              setAnchorEl(null)
-          // executeEvent("open-apps-mode", { });
+                executeEvent('openWalletsApp', {})
               }}
             >
               <Card sx={{

src/components/Group/Group.tsx

@@ -81,6 +81,7 @@ import BlockIcon from '@mui/icons-material/Block';
 import LockIcon from '@mui/icons-material/Lock';
 import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
 import { BlockedUsersModal } from "./BlockedUsersModal";
+import { WalletsAppWrapper } from "./WalletsAppWrapper";
 
 
 export const getPublishesFromAdmins = async (admins: string[], groupId) => {
@@ -2579,6 +2580,7 @@ export const Group = ({
             message: "Setting up groups... please wait.",
           }}
         />
+        <WalletsAppWrapper />
       </div>
     </>
   );

src/components/Group/WalletsAppWrapper.tsx

@@ -0,0 +1,163 @@
+import { Box, ButtonBase, Divider, Typography } from "@mui/material";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import AppViewerContainer from "../Apps/AppViewerContainer";
+import {
+  executeEvent,
+  subscribeToEvent,
+  unsubscribeFromEvent,
+} from "../../utils/events";
+import { useRecoilState } from "recoil";
+import { navigationControllerAtom } from "../../atoms/global";
+import { AppsNavBarLeft, AppsNavBarParent } from "../Apps/Apps-styles";
+import NavBack from "../../assets/svgs/NavBack.svg";
+import RefreshIcon from "@mui/icons-material/Refresh";
+
+export const WalletsAppWrapper = () => {
+  const iframeRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [navigationController, setNavigationController] = useRecoilState(
+    navigationControllerAtom
+  );
+  const [selectedTab, setSelectedTab] = useState({
+    tabId: "5558589",
+    name: "Q-Wallets",
+    service: "APP",
+    path: '/qortal'
+  });
+
+  const isDisableBackButton = useMemo(() => {
+    if (selectedTab && navigationController[selectedTab?.tabId]?.hasBack)
+      return false;
+    if (selectedTab && !navigationController[selectedTab?.tabId]?.hasBack)
+      return true;
+    return false;
+  }, [navigationController, selectedTab]);
+
+  const openWalletsAppFunc = useCallback(
+    (e) => {
+      setIsOpen(true);
+    },
+    [setIsOpen]
+  );
+
+  useEffect(() => {
+    subscribeToEvent("openWalletsApp", openWalletsAppFunc);
+
+    return () => {
+      unsubscribeFromEvent("openWalletsApp", openWalletsAppFunc);
+    };
+  }, [openWalletsAppFunc]);
+
+  const handleClose = ()=> {
+    setIsOpen(false);
+    iframeRef.current = null
+  }
+
+  return (
+    <>
+      {isOpen && (
+        <Box
+          sx={{
+            position: "fixed",
+            height: "1000px",
+
+            maxHeight: "100vh",
+            width: "1200px",
+            maxWidth: "100vw",
+            backgroundColor: "#27282c",
+            zIndex: 100,
+            bottom: 0,
+            right: 0,
+            overflow: "hidden",
+            borderTopLeftRadius: "10px",
+            borderTopRightRadius: "10px",
+            boxShadow: 4,
+          }}
+        >
+          <Box
+            sx={{
+              height: "100%",
+              width: "100%",
+            }}
+          >
+            <Box
+              sx={{
+                height: "40px",
+                display: "flex",
+                alignItems: "center",
+                padding: "5px",
+
+                justifyContent: "space-between",
+              }}
+            >
+              <Typography>Q-Wallets</Typography>
+              <ButtonBase
+                onClick={handleClose}
+              >
+                <CloseIcon
+                  sx={{
+                    color: "white",
+                  }}
+                />
+              </ButtonBase>
+            </Box>
+            <Divider />
+            <AppViewerContainer
+              customHeight="calc(100% - 40px - 60px)"
+              app={selectedTab}
+              isSelected
+              ref={iframeRef}
+              skipAuth={true}
+            />
+            <AppsNavBarParent>
+              <AppsNavBarLeft sx={{
+                gap: '25px'
+              }}>
+                <ButtonBase
+                  onClick={() => {
+                    executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
+                  }}
+                  disabled={isDisableBackButton}
+                  sx={{
+                    opacity: !isDisableBackButton ? 1 : 0.1,
+                    cursor: !isDisableBackButton ? "pointer" : "default",
+                  }}
+                >
+                  <img src={NavBack} />
+                </ButtonBase>
+                <ButtonBase  onClick={() => {
+            if (selectedTab?.refreshFunc) {
+              selectedTab.refreshFunc(selectedTab?.tabId);
+            
+            } else {
+              executeEvent("refreshApp", {
+                tabId: selectedTab?.tabId,
+              });
+            }
+            
+            
+          }}>
+                <RefreshIcon
+              height={20}
+              sx={{
+                color: "rgba(250, 250, 250, 0.5)",
+                height: '30px',
+                width: 'auto'
+              }}
+            />
+                </ButtonBase>
+              </AppsNavBarLeft>
+            </AppsNavBarParent>
+          </Box>
+        </Box>
+      )}
+    </>
+  );
+};

src/hooks/useHandlePaymentNotification.tsx

@@ -4,6 +4,7 @@ import { getData, storeData } from '../utils/chromeStorage';
 import { checkDifference, getNameInfoForOthers } from '../background';
 import { useRecoilState } from 'recoil';
 import { lastPaymentSeenTimestampAtom } from '../atoms/global';
+import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
 
 export const useHandlePaymentNotification = (address) => {
     const [latestTx, setLatestTx] = useState(null);
@@ -106,6 +107,21 @@ export const useHandlePaymentNotification = (address) => {
         window.removeEventListener("message", messageHandler);
       };
       }, [getLastSeenData]);
+
+      const setLastEnteredTimestampPaymentEventFunc = useCallback(
+        (e) => {
+            setLastEnteredTimestampPayment(Date.now)
+        },
+        [setLastEnteredTimestampPayment]
+      );
+    
+      useEffect(() => {
+        subscribeToEvent("setLastEnteredTimestampPaymentEvent", setLastEnteredTimestampPaymentEventFunc);
+    
+        return () => {
+          unsubscribeFromEvent("setLastEnteredTimestampPaymentEvent", setLastEnteredTimestampPaymentEventFunc);
+        };
+      }, [setLastEnteredTimestampPaymentEventFunc]);
   return {
     latestTx,
     getNameOrAddressOfSenderMiddle,

src/messaging/messagesToBackground.tsx

@@ -24,13 +24,13 @@ window.addEventListener("message", (event) => {
   }
 });
 
-export const sendMessageBackground = (action, data = {}, timeout = 180000, isExtension, appInfo) => {
+export const sendMessageBackground = (action, data = {}, timeout = 180000, isExtension, appInfo, skipAuth) => {
   return new Promise((resolve, reject) => {
     const requestId = generateRequestId(); // Unique ID for each request
     callbackMap.set(requestId, { resolve, reject }); // Store both resolve and reject callbacks
     const targetOrigin = window.location.origin
     // Send the message with `backgroundMessage` type
-    window.postMessage({ type: "backgroundMessage", action, requestId, payload: data, isExtension, appInfo }, targetOrigin);
+    window.postMessage({ type: "backgroundMessage", action, requestId, payload: data, isExtension, appInfo, skipAuth }, targetOrigin);
 
     // Set up a timeout to automatically reject if no response is received
     const timeoutId = setTimeout(() => {

src/qortalRequests.ts

@@ -70,6 +70,7 @@ export const isRunningGateway = async ()=> {
       // Ensure the message is from a trusted source
       const isFromExtension = request?.isExtension;
       const appInfo = request?.appInfo;
+      const skipAuth = request?.skipAuth || false
       if (request?.type !== "backgroundMessage") return; // Only process messages of type 'backgroundMessage'
   
   
@@ -77,7 +78,7 @@ export const isRunningGateway = async ()=> {
       switch (request.action) {
         case "GET_USER_ACCOUNT": {
           try {
-            const res = await getUserAccount({isFromExtension, appInfo});
+            const res = await getUserAccount({isFromExtension, appInfo, skipAuth});
             event.source.postMessage({
               requestId: request.requestId,
               action: request.action,

src/qortalRequests/get.ts

@@ -371,7 +371,7 @@ async function getUserPermission(payload, isFromExtension) {
   });
 }
 
-export const getUserAccount = async ({ isFromExtension, appInfo }) => {
+export const getUserAccount = async ({ isFromExtension, appInfo, skipAuth }) => {
   try {
     const value =
       (await getPermission(`qAPPAutoAuth-${appInfo?.name}`)) || false;
@@ -379,6 +379,9 @@ export const getUserAccount = async ({ isFromExtension, appInfo }) => {
     if (value) {
       skip = true;
     }
+    if(skipAuth){
+      skip = true
+    }
     let resPermission;
     if (!skip) {
       resPermission = await getUserPermission(