added wallets embed

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) => {
-                     // executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
-          // executeEvent("open-apps-mode", { });
+             onClick={() => {
+              setAnchorEl(null)
+                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>
+      )}
+    </>
+  );
+};