mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-14 20:11:22 +00:00
Move transition in a separate file
This commit is contained in:
parent
274c8d1048
commit
df49f327f1
12
src/common/Transitions.tsx
Normal file
12
src/common/Transitions.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import { Slide } from '@mui/material';
|
||||
import { TransitionProps } from '@mui/material/transitions';
|
||||
import { forwardRef, ReactElement, Ref } from 'react';
|
||||
|
||||
export const TransitionUp = forwardRef(function Transition(
|
||||
props: TransitionProps & {
|
||||
children: ReactElement;
|
||||
},
|
||||
ref: Ref<unknown>
|
||||
) {
|
||||
return <Slide direction="up" ref={ref} {...props} />;
|
||||
});
|
@ -111,7 +111,7 @@ export const AppsDevModeNavBar = () => {
|
||||
variant="scrollable" // Make tabs scrollable
|
||||
scrollButtons={true}
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
'&.MuiTabs-indicator': {
|
||||
backgroundColor: theme.palette.text.primary,
|
||||
},
|
||||
maxHeight: `275px`, // Ensure the tabs container fits within the available space
|
||||
|
@ -193,7 +193,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
|
||||
variant="scrollable" // Make tabs scrollable
|
||||
scrollButtons={true}
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
'&.MuiTabs-indicator': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
maxHeight: `275px`, // Ensure the tabs container fits within the available space
|
||||
|
@ -357,7 +357,7 @@ export const AppsPrivate = ({ myName, myAddress }) => {
|
||||
variant={'fullWidth'}
|
||||
scrollButtons="auto"
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
'&.MuiTabs-indicator': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
|
@ -1,8 +1,5 @@
|
||||
import {
|
||||
forwardRef,
|
||||
Fragment,
|
||||
ReactElement,
|
||||
Ref,
|
||||
SyntheticEvent,
|
||||
useContext,
|
||||
useEffect,
|
||||
@ -17,8 +14,6 @@ import Typography from '@mui/material/Typography';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import ExpandLess from '@mui/icons-material/ExpandLess';
|
||||
import ExpandMore from '@mui/icons-material/ExpandMore';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import { TransitionProps } from '@mui/material/transitions';
|
||||
import {
|
||||
Box,
|
||||
Collapse,
|
||||
@ -40,6 +35,7 @@ import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { txListAtom } from '../../atoms/global';
|
||||
import { TransitionUp } from '../../common/Transitions.tsx';
|
||||
|
||||
export const Label = styled('label')`
|
||||
display: block;
|
||||
@ -49,15 +45,6 @@ export const Label = styled('label')`
|
||||
margin-bottom: 4px;
|
||||
`;
|
||||
|
||||
const Transition = forwardRef(function Transition(
|
||||
props: TransitionProps & {
|
||||
children: ReactElement;
|
||||
},
|
||||
ref: Ref<unknown>
|
||||
) {
|
||||
return <Slide direction="up" ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
export const AddGroup = ({ address, open, setOpen }) => {
|
||||
const { show } = useContext(QORTAL_APP_CONTEXT);
|
||||
const setTxList = useSetAtom(txListAtom);
|
||||
@ -228,13 +215,12 @@ export const AddGroup = ({ address, open, setOpen }) => {
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
slots={{
|
||||
transition: Transition,
|
||||
transition: TransitionUp,
|
||||
}}
|
||||
>
|
||||
<AppBar
|
||||
sx={{
|
||||
position: 'relative',
|
||||
bgcolor: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Toolbar>
|
||||
@ -281,7 +267,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
|
||||
scrollButtons="auto"
|
||||
allowScrollButtonsMobile
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
'&.MuiTabs-indicator': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
@ -421,10 +407,10 @@ export const AddGroup = ({ address, open, setOpen }) => {
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '15px',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
gap: '15px',
|
||||
}}
|
||||
onClick={() => setOpenAdvance((prev) => !prev)}
|
||||
>
|
||||
|
@ -255,7 +255,7 @@ export const ManageMembers = ({
|
||||
scrollButtons="auto" // Show scroll buttons automatically
|
||||
allowScrollButtonsMobile // Show scroll buttons on mobile as well
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
'&.MuiTabs-indicator': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
maxWidth: '100%', // Ensure the tabs container fits within the available space
|
||||
|
@ -40,6 +40,7 @@ import { walletVersion } from '../../background/background.ts';
|
||||
import Base58 from '../../encryption/Base58.ts';
|
||||
import { QORTAL_APP_CONTEXT } from '../../App';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TransitionUp } from '../../common/Transitions.tsx';
|
||||
|
||||
const LocalNodeSwitch = styled(Switch)(({ theme }) => ({
|
||||
padding: 8,
|
||||
@ -74,15 +75,6 @@ const LocalNodeSwitch = styled(Switch)(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const Transition = forwardRef(function Transition(
|
||||
props: TransitionProps & {
|
||||
children: ReactElement;
|
||||
},
|
||||
ref: Ref<unknown>
|
||||
) {
|
||||
return <Slide direction="up" ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
export const Settings = ({ open, setOpen, rawWallet }) => {
|
||||
const [checked, setChecked] = useState(false);
|
||||
const [isEnabledDevMode, setIsEnabledDevMode] = useAtom(enabledDevModeAtom);
|
||||
@ -163,7 +155,7 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
slots={{
|
||||
transition: Transition,
|
||||
transition: TransitionUp,
|
||||
}}
|
||||
>
|
||||
<AppBar sx={{ position: 'relative' }}>
|
||||
|
@ -41,6 +41,7 @@ import { useModal } from '../../hooks/useModal.tsx';
|
||||
import { useAtom, useSetAtom } from 'jotai';
|
||||
import { memberGroupsAtom, txListAtom } from '../../atoms/global';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TransitionUp } from '../../common/Transitions.tsx';
|
||||
|
||||
export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
|
||||
const setTxList = useSetAtom(txListAtom);
|
||||
@ -540,14 +541,8 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
|
||||
maxWidth="lg"
|
||||
fullWidth
|
||||
fullScreen
|
||||
sx={{
|
||||
'& .MuiDialog-paper': {
|
||||
height: '100vh',
|
||||
margin: 0,
|
||||
maxWidth: '100%',
|
||||
overflow: 'hidden', // Prevent scrollbars
|
||||
width: '100%',
|
||||
},
|
||||
slots={{
|
||||
transition: TransitionUp,
|
||||
}}
|
||||
>
|
||||
<AppBar sx={{ position: 'relative' }}>
|
||||
@ -575,418 +570,465 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs value={setValueMintingTab} onChange={handleChange}>
|
||||
<Tab label="Minting Details" {...a11yProps(0)} />
|
||||
<Tab label="Item Two" {...a11yProps(1)} />
|
||||
<Tab label="Item Three" {...a11yProps(2)} />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{valueMintingTab === 0 && (
|
||||
<>
|
||||
<DialogContent
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{ borderBottom: 1, borderColor: theme.palette.text.secondary }}
|
||||
>
|
||||
<Tabs
|
||||
value={setValueMintingTab}
|
||||
onChange={handleChange}
|
||||
variant={'fullWidth'}
|
||||
scrollButtons="auto"
|
||||
allowScrollButtonsMobile
|
||||
sx={{
|
||||
position: 'relative',
|
||||
'&.MuiTabs-indicator': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Blockchain Statistics
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<StatCard
|
||||
label="Avg. Qortal Blocktime"
|
||||
value="72.84 Seconds"
|
||||
/>
|
||||
<StatCard
|
||||
label="Avg. Blocks Per Day"
|
||||
value="1186.16 Blocks"
|
||||
/>
|
||||
<StatCard
|
||||
label="Avg. Created QORT Per Day"
|
||||
value="3558.48 QORT"
|
||||
/>
|
||||
</Grid>
|
||||
</Paper>
|
||||
|
||||
<Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Minting Account Details
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<StatCard label="Current Status" value="(Minting)" />
|
||||
<StatCard label="Current Level" value="Level 4" />
|
||||
<StatCard
|
||||
label="Blocks To Next Level"
|
||||
value="139467 Blocks"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Box mt={2} textAlign="center">
|
||||
<Typography>
|
||||
With a 24/7 Minting you will reach level 5 in{' '}
|
||||
<strong>117.58 days</strong>!
|
||||
</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper elevation={3} sx={{ p: 3, borderRadius: '10px' }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Minting Rewards Info
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<StatCard label="Current Tier" value="Tier 2 (Level 3 + 4)" />
|
||||
<StatCard
|
||||
label="Total Minters in The Tier"
|
||||
value="77 Minters"
|
||||
/>
|
||||
<StatCard label="Tier Share Per Block" value="13%" />
|
||||
<StatCard
|
||||
label="Est. Reward Per Block"
|
||||
value="0.00506494 QORT"
|
||||
/>
|
||||
<StatCard
|
||||
label="Est. Reward Per Day"
|
||||
value="6.00782338 QORT"
|
||||
/>
|
||||
{/* <StatCard label="AdminInfo" value={adminInfo} /> */}
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Container>
|
||||
</DialogContent>
|
||||
</>
|
||||
)}
|
||||
|
||||
{valueMintingTab === 1 && (
|
||||
<>
|
||||
<DialogContent
|
||||
sx={{
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{isLoading && (
|
||||
<Box
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
}}
|
||||
>
|
||||
<FidgetSpinner
|
||||
ariaLabel="fidget-spinner-loading"
|
||||
height="80"
|
||||
visible={true}
|
||||
width="80"
|
||||
wrapperClass="fidget-spinner-wrapper"
|
||||
wrapperStyle={{}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Card
|
||||
<Tab
|
||||
label="Minting Details"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: '10px',
|
||||
'&.Mui-selected': {
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
{...a11yProps(0)}
|
||||
/>
|
||||
<Tab
|
||||
label="Minting Actions"
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
{...a11yProps(1)}
|
||||
/>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{valueMintingTab === 0 && (
|
||||
<>
|
||||
<DialogContent
|
||||
sx={{
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{t('auth:account.account_one', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
: {handleNames(accountInfo?.address)}
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
{t('core:level', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
: {accountInfo?.level}
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
{t('group:message.generic.next_level', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}{' '}
|
||||
{_levelUpBlocks()}
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
{t('group:message.generic.node_minting', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}{' '}
|
||||
{nodeInfos?.isMintingPossible?.toString()}
|
||||
</Typography>
|
||||
</Card>
|
||||
|
||||
<Spacer height="10px" />
|
||||
|
||||
{isPartOfMintingGroup && !accountIsMinting && (
|
||||
<Box
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => {
|
||||
startMinting();
|
||||
}}
|
||||
disabled={mintingAccounts?.length > 1}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.other.positive,
|
||||
color: 'black',
|
||||
fontWeight: 'bold',
|
||||
opacity: 0.7,
|
||||
maxWidth: '90%',
|
||||
width: '200px',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.other.positive,
|
||||
color: 'black',
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
{t('core:action.start_minting', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Button>
|
||||
|
||||
{mintingAccounts?.length > 1 && (
|
||||
<Typography>
|
||||
{t('group:message.generic.minting_keys_per_node', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Blockchain Statistics
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Spacer height="10px" />
|
||||
<Grid container spacing={2}>
|
||||
<StatCard
|
||||
label="Avg. Qortal Blocktime"
|
||||
value="72.84 Seconds"
|
||||
/>
|
||||
<StatCard
|
||||
label="Avg. Blocks Per Day"
|
||||
value="1186.16 Blocks"
|
||||
/>
|
||||
<StatCard
|
||||
label="Avg. Created QORT Per Day"
|
||||
value="3558.48 QORT"
|
||||
/>
|
||||
</Grid>
|
||||
</Paper>
|
||||
|
||||
{mintingAccounts?.length > 0 && (
|
||||
<Typography>
|
||||
{t('group:message.generic.node_minting_account', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
<Card
|
||||
<Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Minting Account Details
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<StatCard label="Current Status" value="(Minting)" />
|
||||
<StatCard label="Current Level" value="Level 4" />
|
||||
<StatCard
|
||||
label="Blocks To Next Level"
|
||||
value="139467 Blocks"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Box mt={2} textAlign="center">
|
||||
<Typography>
|
||||
With a 24/7 Minting you will reach level 5 in{' '}
|
||||
<strong>117.58 days</strong>!
|
||||
</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper elevation={3} sx={{ p: 3, borderRadius: '10px' }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Minting Rewards Info
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<StatCard
|
||||
label="Current Tier"
|
||||
value="Tier 2 (Level 3 + 4)"
|
||||
/>
|
||||
<StatCard
|
||||
label="Total Minters in The Tier"
|
||||
value="77 Minters"
|
||||
/>
|
||||
<StatCard label="Tier Share Per Block" value="13%" />
|
||||
<StatCard
|
||||
label="Est. Reward Per Block"
|
||||
value="0.00506494 QORT"
|
||||
/>
|
||||
<StatCard
|
||||
label="Est. Reward Per Day"
|
||||
value="6.00782338 QORT"
|
||||
/>
|
||||
{/* <StatCard label="AdminInfo" value={adminInfo} /> */}
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Container>
|
||||
</DialogContent>
|
||||
</>
|
||||
)}
|
||||
|
||||
{valueMintingTab === 1 && (
|
||||
<>
|
||||
<DialogContent
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: '10px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{accountIsMinting && (
|
||||
{isLoading && (
|
||||
<Box
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
gap: '5px',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{t('group:message.generic.node_minting_key', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
<FidgetSpinner
|
||||
ariaLabel="fidget-spinner-loading"
|
||||
height="80"
|
||||
visible={true}
|
||||
width="80"
|
||||
wrapperClass="fidget-spinner-wrapper"
|
||||
wrapperStyle={{}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Spacer height="10px" />
|
||||
|
||||
{mintingAccounts?.map((acct) => (
|
||||
<Box
|
||||
key={acct?.mintingAccount}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{t('group:message.generic.minting_account', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}{' '}
|
||||
{handleNames(acct?.mintingAccount)}
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.other.danger,
|
||||
color: theme.palette.text.primary,
|
||||
fontWeight: 'bold',
|
||||
maxWidth: '90%',
|
||||
opacity: 0.7,
|
||||
width: '200px',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.other.danger,
|
||||
color: theme.palette.text.primary,
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
removeMintingAccount(acct.publicKey, acct);
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
{t('group:action.remove_minting_account', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Button>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Spacer height="10px" />
|
||||
</Box>
|
||||
))}
|
||||
|
||||
{mintingAccounts?.length > 1 && (
|
||||
<Typography>
|
||||
{t('group:message.generic.minting_keys_per_node_different', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Spacer height="20px" />
|
||||
|
||||
{!isPartOfMintingGroup && (
|
||||
<Card
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{t('auth:account.account_one', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
: {handleNames(accountInfo?.address)}
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
{t('core:level', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
: {accountInfo?.level}
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
{t('group:message.generic.next_level', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}{' '}
|
||||
{_levelUpBlocks()}
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
{t('group:message.generic.node_minting', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}{' '}
|
||||
{nodeInfos?.isMintingPossible?.toString()}
|
||||
</Typography>
|
||||
</Card>
|
||||
|
||||
<Spacer height="10px" />
|
||||
|
||||
{isPartOfMintingGroup && !accountIsMinting && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '5px',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{t('group:message.generic.minter_group', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
{t('group:message.generic.mintership_app', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
|
||||
<Spacer height="10px" />
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => {
|
||||
startMinting();
|
||||
}}
|
||||
disabled={mintingAccounts?.length > 1}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.other.positive,
|
||||
color: theme.palette.text.primary,
|
||||
color: 'black',
|
||||
fontWeight: 'bold',
|
||||
opacity: 0.7,
|
||||
|
||||
maxWidth: '90%',
|
||||
width: '200px',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.other.positive,
|
||||
color: 'black',
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
executeEvent('addTab', {
|
||||
data: { service: 'APP', name: 'q-mintership' },
|
||||
});
|
||||
executeEvent('open-apps-mode', {});
|
||||
setIsOpenMinting(false);
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
{t('group:action.visit_q_mintership', {
|
||||
{t('core:action.start_minting', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{showWaitDialog && (
|
||||
<Dialog
|
||||
open={showWaitDialog}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
{mintingAccounts?.length > 1 && (
|
||||
<Typography>
|
||||
{t('group:message.generic.minting_keys_per_node', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Spacer height="10px" />
|
||||
|
||||
{mintingAccounts?.length > 0 && (
|
||||
<Typography>
|
||||
{t('group:message.generic.node_minting_account', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
<Card
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
<DialogTitle
|
||||
id="alert-dialog-title"
|
||||
{accountIsMinting && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '5px',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{t('group:message.generic.node_minting_key', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Spacer height="10px" />
|
||||
|
||||
{mintingAccounts?.map((acct) => (
|
||||
<Box
|
||||
key={acct?.mintingAccount}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{t('group:message.generic.minting_account', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}{' '}
|
||||
{handleNames(acct?.mintingAccount)}
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.other.danger,
|
||||
color: theme.palette.text.primary,
|
||||
fontWeight: 'bold',
|
||||
maxWidth: '90%',
|
||||
opacity: 0.7,
|
||||
width: '200px',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.other.danger,
|
||||
color: theme.palette.text.primary,
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
removeMintingAccount(acct.publicKey, acct);
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
{t('group:action.remove_minting_account', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Button>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Spacer height="10px" />
|
||||
</Box>
|
||||
))}
|
||||
|
||||
{mintingAccounts?.length > 1 && (
|
||||
<Typography>
|
||||
{t(
|
||||
'group:message.generic.minting_keys_per_node_different',
|
||||
{
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
}
|
||||
)}
|
||||
</Typography>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Spacer height="20px" />
|
||||
|
||||
{!isPartOfMintingGroup && (
|
||||
<Card
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
color: theme.palette.text.primary,
|
||||
fontWeight: 'bold',
|
||||
opacity: 1,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
{isShowNext
|
||||
? t('core:message.generic.confirmed', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})
|
||||
: t('core:message.generic.wait', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
{!isShowNext && (
|
||||
<Typography>
|
||||
{t('group:message.success.rewardshare_creation', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{isShowNext && (
|
||||
<Typography>
|
||||
{t('group:message.success.rewardshare_confirmed', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button
|
||||
disabled={!isShowNext}
|
||||
variant="contained"
|
||||
onClick={onOk}
|
||||
autoFocus
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '5px',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{t('core:page.next', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)}
|
||||
</DialogContent>
|
||||
</>
|
||||
)}
|
||||
<Typography>
|
||||
{t('group:message.generic.minter_group', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
{t('group:message.generic.mintership_app', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
|
||||
<Spacer height="10px" />
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.other.positive,
|
||||
color: theme.palette.text.primary,
|
||||
fontWeight: 'bold',
|
||||
opacity: 0.7,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.other.positive,
|
||||
color: 'black',
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
executeEvent('addTab', {
|
||||
data: { service: 'APP', name: 'q-mintership' },
|
||||
});
|
||||
executeEvent('open-apps-mode', {});
|
||||
setIsOpenMinting(false);
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
{t('group:action.visit_q_mintership', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{showWaitDialog && (
|
||||
<Dialog
|
||||
open={showWaitDialog}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
>
|
||||
<DialogTitle
|
||||
id="alert-dialog-title"
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
color: theme.palette.text.primary,
|
||||
fontWeight: 'bold',
|
||||
opacity: 1,
|
||||
}}
|
||||
>
|
||||
{isShowNext
|
||||
? t('core:message.generic.confirmed', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})
|
||||
: t('core:message.generic.wait', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
{!isShowNext && (
|
||||
<Typography>
|
||||
{t('group:message.success.rewardshare_creation', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{isShowNext && (
|
||||
<Typography>
|
||||
{t('group:message.success.rewardshare_confirmed', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button
|
||||
disabled={!isShowNext}
|
||||
variant="contained"
|
||||
onClick={onOk}
|
||||
autoFocus
|
||||
>
|
||||
{t('core:page.next', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)}
|
||||
</DialogContent>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Snackbar
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
||||
|
@ -16,15 +16,21 @@ import { getBaseApiReact } from '../../App';
|
||||
import { executeEvent } from '../../utils/events';
|
||||
import { useAtom } from 'jotai';
|
||||
import { memberGroupsAtom, txListAtom } from '../../atoms/global';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const TaskManager = ({ getUserInfo }) => {
|
||||
const [memberGroups] = useAtom(memberGroupsAtom);
|
||||
|
||||
const [txList, setTxList] = useAtom(txListAtom);
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const intervals = useRef({});
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation([
|
||||
'auth',
|
||||
'core',
|
||||
'group',
|
||||
'question',
|
||||
'tutorial',
|
||||
]);
|
||||
|
||||
const handleClick = () => {
|
||||
setOpen((prev) => !prev);
|
||||
@ -199,7 +205,11 @@ export const TaskManager = ({ getUserInfo }) => {
|
||||
)}
|
||||
</ListItemIcon>
|
||||
|
||||
<ListItemText primary="Ongoing Transactions" />
|
||||
<ListItemText
|
||||
primary={t('core:message.generic.ongoing_transactions', {
|
||||
postProcess: 'capitalizeFirstChar',
|
||||
})}
|
||||
/>
|
||||
{open ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItemButton>
|
||||
|
||||
|
@ -41,7 +41,7 @@ export const Tutorials = () => {
|
||||
>
|
||||
<Tabs
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': {
|
||||
'&.MuiTabs-indicator': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
|
Loading…
x
Reference in New Issue
Block a user