Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-11 18:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format code

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-20 09:39:51 +02:00
parent 1ec7be03fd
commit 6e26f582d0
1 changed files with 63 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/components/Group/WalletsAppWrapper.tsx
View File

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