Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-27 21:37:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

added wallets embed

Browse Source
This commit is contained in:
PhilReact 2025-03-08 20:10:18 +02:00
parent 54b90ed65d
commit 161ab4e761
17 changed files with 299 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/App.tsx
View File

@ -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" />

4
src/atoms/global.ts
View File

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

4
src/components/Apps/AppViewer.tsx
View File

@ -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('')

4
src/components/Apps/AppViewerContainer.tsx
View File

@ -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>
);
});

3
src/components/Apps/AppsCategory.tsx
View File

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

3
src/components/Apps/AppsCategoryDesktop.tsx
View File

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

3
src/components/Apps/AppsLibrary.tsx
View File

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

3
src/components/Apps/AppsLibraryDesktop.tsx
View File

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

6
src/components/Apps/useQortalMessageListener.tsx
View File

@ -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){

30
src/components/Explore/Explore.tsx
View File

@ -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>
);
};

28
src/components/GeneralNotifications.tsx
View File

@ -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={{

2
src/components/Group/Group.tsx
View File

@ -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>
</>
);

163
src/components/Group/WalletsAppWrapper.tsx Normal file
View File

@ -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>
)}
</>
);
};

16
src/hooks/useHandlePaymentNotification.tsx
View File

@ -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,

4
src/messaging/messagesToBackground.tsx
View File

@ -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(() => {

3
src/qortalRequests.ts
View File

@ -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,

5
src/qortalRequests/get.ts
View File

@ -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(