diff --git a/src/App.tsx b/src/App.tsx index 57623f6..1713985 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -52,7 +52,7 @@ import EngineeringIcon from '@mui/icons-material/Engineering'; import WarningIcon from '@mui/icons-material/Warning'; import { DrawerUserLookup } from "./components/Drawer/DrawerUserLookup"; import { UserLookup } from "./components/UserLookup.tsx/UserLookup"; - +import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'; import { createAccount, generateRandomSentence, @@ -1756,12 +1756,45 @@ function App() { /> + + { + executeEvent('openWalletsApp', {}) + }} + > + WALLETS} + placement="left" + arrow + sx={{ fontSize: "24" }} + slotProps={{ + tooltip: { + sx: { + color: "#ffffff", + backgroundColor: "#444444", + }, + }, + arrow: { + sx: { + color: "#444444", + }, + }, + }} + > + + + + {desktopViewMode !== 'home' && ( <> WALLET} + title={YOUR ACCOUNT} placement="left" arrow sx={{ fontSize: "24" }} diff --git a/src/atoms/global.ts b/src/atoms/global.ts index d941560..c34a9fa 100644 --- a/src/atoms/global.ts +++ b/src/atoms/global.ts @@ -33,6 +33,10 @@ export const sortablePinnedAppsAtom = atom({ { name: 'Q-Mintership', service: 'APP' + }, + { + name: 'Q-Wallets', + service: 'APP' } ], }); diff --git a/src/components/Apps/AppViewer.tsx b/src/components/Apps/AppViewer.tsx index 902c6d8..cd9cf94 100644 --- a/src/components/Apps/AppViewer.tsx +++ b/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('') diff --git a/src/components/Apps/AppViewerContainer.tsx b/src/components/Apps/AppViewerContainer.tsx index 674a9a7..79097ba 100644 --- a/src/components/Apps/AppViewerContainer.tsx +++ b/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', }} > - + ); }); diff --git a/src/components/Apps/AppsLibrary.tsx b/src/components/Apps/AppsLibrary.tsx index 7274d9b..09f9eff 100644 --- a/src/components/Apps/AppsLibrary.tsx +++ b/src/components/Apps/AppsLibrary.tsx @@ -43,6 +43,7 @@ const officialAppList = [ "q-shop", "q-trade", "q-support", + "q-wallets" ]; const ScrollerStyled = styled('div')({ diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index b96abf0..3c0d62b 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -59,7 +59,8 @@ const officialAppList = [ "q-trade", "q-support", "q-mintership", - "q-manager" + "q-manager", + "q-wallets" ]; const ScrollerStyled = styled("div")({ diff --git a/src/components/Apps/useQortalMessageListener.tsx b/src/components/Apps/useQortalMessageListener.tsx index 156cae1..61c4ff7 100644 --- a/src/components/Apps/useQortalMessageListener.tsx +++ b/src/components/Apps/useQortalMessageListener.tsx @@ -424,7 +424,7 @@ const UIQortalRequests = [ return obj; // Updated object with references to stored files } -export const useQortalMessageListener = (frameWindow, iframeRef, tabId, appName, appService) => { +export const useQortalMessageListener = (frameWindow, iframeRef, tabId, isDevMode, appName, appService, skipAuth) => { const [path, setPath] = useState('') const [history, setHistory] = useState({ customQDNHistoryPaths: [], @@ -530,7 +530,7 @@ isDOMContentLoaded: false sendMessageToRuntime( { action: event.data.action, type: 'qortalRequest', payload: event.data, isExtension: true, appInfo: { name: appName, service: appService - } }, + }, skipAuth }, event.ports[0] ); } else if ( @@ -578,7 +578,9 @@ isDOMContentLoaded: false // response } ); - } + } else if(appName?.toLowerCase() === 'q-wallets'){ + executeEvent('setLastEnteredTimestampPaymentEvent', {}) + } } else if(event?.data?.action === 'NAVIGATION_HISTORY'){ if(event?.data?.payload?.isDOMContentLoaded){ setHistory((prev)=> { diff --git a/src/components/Chat/useBlockUsers.tsx b/src/components/Chat/useBlockUsers.tsx index 13615d5..aaef617 100644 --- a/src/components/Chat/useBlockUsers.tsx +++ b/src/components/Chat/useBlockUsers.tsx @@ -160,7 +160,6 @@ export const useBlockedAddresses = () => { }, }, (response) => { - console.log('response', response) if (response.error) { rej(response?.message); return; diff --git a/src/components/Explore/Explore.tsx b/src/components/Explore/Explore.tsx index 7cc96a0..61037d7 100644 --- a/src/components/Explore/Explore.tsx +++ b/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 ( { General Chat + { + executeEvent("openWalletsApp", { + + }); + }} + > + + + Wallets + + ); }; diff --git a/src/components/GeneralNotifications.tsx b/src/components/GeneralNotifications.tsx index 532c0e6..b22244a 100644 --- a/src/components/GeneralNotifications.tsx +++ b/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={{}} > + PAYMENT NOTIFICATION} + placement="left" + arrow + sx={{ fontSize: "24" }} + slotProps={{ + tooltip: { + sx: { + color: "#ffffff", + backgroundColor: "#444444", + }, + }, + arrow: { + sx: { + color: "#444444", + }, + }, + }} + > + { 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', {}) + }} > )} - + + {!isMobile && ( { + 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 && ( + + + + Q-Wallets + + + + + + + + + { + executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}); + }} + disabled={isDisableBackButton} + sx={{ + opacity: !isDisableBackButton ? 1 : 0.1, + cursor: !isDisableBackButton ? "pointer" : "default", + }} + > + + + { + if (selectedTab?.refreshFunc) { + selectedTab.refreshFunc(selectedTab?.tabId); + + } else { + executeEvent("refreshApp", { + tabId: selectedTab?.tabId, + }); + } + + + }}> + + + + + + + )} + + ); +}; diff --git a/src/hooks/useHandlePaymentNotification.tsx b/src/hooks/useHandlePaymentNotification.tsx index fbd6bb3..9ba4a31 100644 --- a/src/hooks/useHandlePaymentNotification.tsx +++ b/src/hooks/useHandlePaymentNotification.tsx @@ -3,6 +3,7 @@ import { getBaseApiReact } from '../App'; import { addTimestampLatestPayment, checkDifference, getNameInfoForOthers, getTimestampLatestPayment } 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); @@ -54,16 +55,12 @@ export const useHandlePaymentNotification = (address) => { return false; }, [lastEnteredTimestampPayment, latestTx]); - console.log('hasNewPayment', hasNewPayment) const getLastSeenData = useCallback(async () => { try { if (!address) return; - console.log('address', address) - const key = `last-seen-payment-${address}`; const res = await getTimestampLatestPayment().catch(() => null); - console.log('res', res) if (res) { setLastEnteredTimestampPayment(res); } @@ -73,7 +70,6 @@ export const useHandlePaymentNotification = (address) => { ); const responseData = await response.json(); - console.log('responseData', responseData) const latestTx = responseData.filter( (tx) => tx?.creatorAddress !== address && tx?.recipient === address )[0]; @@ -92,12 +88,26 @@ export const useHandlePaymentNotification = (address) => { getLastSeenData(); chrome?.runtime?.onMessage.addListener((message, sender, sendResponse) => { - console.log('message', message) if (message?.action === "SET_PAYMENT_ANNOUNCEMENT" && message?.payload) { setLatestTx(message.payload); } }); }, [getLastSeenData]); + + const setLastEnteredTimestampPaymentEventFunc = useCallback( + (e) => { + setLastEnteredTimestampPayment(Date.now) + }, + [setLastEnteredTimestampPayment] + ); + + useEffect(() => { + subscribeToEvent("setLastEnteredTimestampPaymentEvent", setLastEnteredTimestampPaymentEventFunc); + + return () => { + unsubscribeFromEvent("setLastEnteredTimestampPaymentEvent", setLastEnteredTimestampPaymentEventFunc); + }; + }, [setLastEnteredTimestampPaymentEventFunc]); return { latestTx, getNameOrAddressOfSenderMiddle, diff --git a/src/qortalRequests.ts b/src/qortalRequests.ts index c860914..e564ba6 100644 --- a/src/qortalRequests.ts +++ b/src/qortalRequests.ts @@ -155,9 +155,10 @@ chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => { if (request) { const isFromExtension = request?.isExtension const appInfo = request?.appInfo; + const skipAuth = request?.skipAuth switch (request.action) { case "GET_USER_ACCOUNT": { - getUserAccount({isFromExtension, appInfo}) + getUserAccount({isFromExtension, appInfo, skipAuth}) .then((res) => { sendResponse(res); }) diff --git a/src/qortalRequests/get.ts b/src/qortalRequests/get.ts index 07d1fa4..ccc2e17 100644 --- a/src/qortalRequests/get.ts +++ b/src/qortalRequests/get.ts @@ -545,13 +545,16 @@ async function getUserPermission(payload: any, isFromExtension?: boolean) { }); } -export const getUserAccount = async ({isFromExtension, appInfo}) => { +export const getUserAccount = async ({isFromExtension, appInfo, skipAuth}) => { try { const value = (await getPermission(`qAPPAutoAuth-${appInfo?.name}`)) || false; let skip = false; if (value) { skip = true; } + if(skipAuth){ + skip = true + } let resPermission if(!skip){ resPermission = await getUserPermission({