Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-10 10:16:58 +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 React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import CloseIcon from "@mui/icons-material/Close";
import AppViewerContainer from "../Apps/AppViewerContainer";
import { Box, ButtonBase, Divider, Typography } from '@mui/material';
import { 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";
} 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.tsx';
import RefreshIcon from '@mui/icons-material/Refresh';
export const WalletsAppWrapper = () => {
const iframeRef = useRef(null);
@ -26,10 +20,10 @@ export const WalletsAppWrapper = () => {
navigationControllerAtom
);
const [selectedTab, setSelectedTab] = useState({
tabId: "5558589",
name: "Q-Wallets",
service: "APP",
path: 'qortal?authOnMount=true'
tabId: '5558589',
name: 'Q-Wallets',
service: 'APP',
path: 'qortal?authOnMount=true',
});
const isDisableBackButton = useMemo(() => {
@ -48,64 +42,64 @@ export const WalletsAppWrapper = () => {
);
useEffect(() => {
subscribeToEvent("openWalletsApp", openWalletsAppFunc);
subscribeToEvent('openWalletsApp', openWalletsAppFunc);
return () => {
unsubscribeFromEvent("openWalletsApp", openWalletsAppFunc);
unsubscribeFromEvent('openWalletsApp', openWalletsAppFunc);
};
}, [openWalletsAppFunc]);
const handleClose = ()=> {
const handleClose = () => {
setIsOpen(false);
iframeRef.current = null
}
iframeRef.current = null;
};
return (
<>
{isOpen && (
<Box
sx={{
position: "fixed",
height: "100vh",
width: "100vw",
backgroundColor: "#27282c",
position: 'fixed',
height: '100vh',
width: '100vw',
backgroundColor: '#27282c', // TODO: set color theme
zIndex: 100,
bottom: 0,
right: 0,
overflow: "hidden",
borderTopLeftRadius: "10px",
borderTopRightRadius: "10px",
overflow: 'hidden',
borderTopLeftRadius: '10px',
borderTopRightRadius: '10px',
boxShadow: 4,
}}
>
<Box
sx={{
height: "100%",
width: "100%",
height: '100%',
width: '100%',
}}
>
<Box
sx={{
height: "40px",
display: "flex",
alignItems: "center",
padding: "5px",
height: '40px',
display: 'flex',
alignItems: 'center',
padding: '5px',
justifyContent: "space-between",
justifyContent: 'space-between',
}}
>
<Typography>Q-Wallets</Typography>
<ButtonBase
onClick={handleClose}
>
<ButtonBase onClick={handleClose}>
<CloseIcon
sx={{
color: "white",
color: 'white',
}}
/>
</ButtonBase>
</Box>
<Divider />
<AppViewerContainer
customHeight="calc(100% - 40px - 60px)"
app={selectedTab}
@ -114,9 +108,11 @@ export const WalletsAppWrapper = () => {
skipAuth={true}
/>
<AppsNavBarParent>
<AppsNavBarLeft sx={{
gap: '25px'
}}>
<AppsNavBarLeft
sx={{
gap: '25px',
}}
>
<ButtonBase
onClick={() => {
executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
@ -124,31 +120,30 @@ export const WalletsAppWrapper = () => {
disabled={isDisableBackButton}
sx={{
opacity: !isDisableBackButton ? 1 : 0.1,
cursor: !isDisableBackButton ? "pointer" : "default",
cursor: !isDisableBackButton ? 'pointer' : 'default',
}}
>
<img src={NavBack} />
<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
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>