diff --git a/src/common/Transitions.tsx b/src/common/Transitions.tsx new file mode 100644 index 0000000..bf917f8 --- /dev/null +++ b/src/common/Transitions.tsx @@ -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 +) { + return ; +}); diff --git a/src/components/Apps/AppsDevModeNavBar.tsx b/src/components/Apps/AppsDevModeNavBar.tsx index add58e9..6a39c16 100644 --- a/src/components/Apps/AppsDevModeNavBar.tsx +++ b/src/components/Apps/AppsDevModeNavBar.tsx @@ -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 diff --git a/src/components/Apps/AppsNavBarDesktop.tsx b/src/components/Apps/AppsNavBarDesktop.tsx index 68c72dc..ce358ab 100644 --- a/src/components/Apps/AppsNavBarDesktop.tsx +++ b/src/components/Apps/AppsNavBarDesktop.tsx @@ -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 diff --git a/src/components/Apps/AppsPrivate.tsx b/src/components/Apps/AppsPrivate.tsx index bb1e153..5567785 100644 --- a/src/components/Apps/AppsPrivate.tsx +++ b/src/components/Apps/AppsPrivate.tsx @@ -357,7 +357,7 @@ export const AppsPrivate = ({ myName, myAddress }) => { variant={'fullWidth'} scrollButtons="auto" sx={{ - '& .MuiTabs-indicator': { + '&.MuiTabs-indicator': { backgroundColor: theme.palette.background.default, }, }} diff --git a/src/components/Group/AddGroup.tsx b/src/components/Group/AddGroup.tsx index 90ff47a..dae956d 100644 --- a/src/components/Group/AddGroup.tsx +++ b/src/components/Group/AddGroup.tsx @@ -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 -) { - return ; -}); - 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, }} > @@ -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 }) => { setOpenAdvance((prev) => !prev)} > diff --git a/src/components/Group/ManageMembers.tsx b/src/components/Group/ManageMembers.tsx index 998e145..8e58c21 100644 --- a/src/components/Group/ManageMembers.tsx +++ b/src/components/Group/ManageMembers.tsx @@ -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 diff --git a/src/components/Group/Settings.tsx b/src/components/Group/Settings.tsx index 905dd2d..e94c957 100644 --- a/src/components/Group/Settings.tsx +++ b/src/components/Group/Settings.tsx @@ -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 -) { - return ; -}); - 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, }} > diff --git a/src/components/Minting/Minting.tsx b/src/components/Minting/Minting.tsx index 687d06b..658467f 100644 --- a/src/components/Minting/Minting.tsx +++ b/src/components/Minting/Minting.tsx @@ -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, }} > @@ -575,418 +570,465 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => { - - - - - - - - - {valueMintingTab === 0 && ( - <> - + + - - - - Blockchain Statistics - - - - - - - - - - - - Minting Account Details - - - - - - - - - - - With a 24/7 Minting you will reach level 5 in{' '} - 117.58 days! - - - - - - - Minting Rewards Info - - - - - - - - - {/* */} - - - - - - )} - - {valueMintingTab === 1 && ( - <> - - {isLoading && ( - - - - )} - - + + + + + {valueMintingTab === 0 && ( + <> + - - {t('auth:account.account_one', { - postProcess: 'capitalizeFirstChar', - })} - : {handleNames(accountInfo?.address)} - - - - {t('core:level', { - postProcess: 'capitalizeFirstChar', - })} - : {accountInfo?.level} - - - - {t('group:message.generic.next_level', { - postProcess: 'capitalizeFirstChar', - })}{' '} - {_levelUpBlocks()} - - - - {t('group:message.generic.node_minting', { - postProcess: 'capitalizeFirstChar', - })}{' '} - {nodeInfos?.isMintingPossible?.toString()} - - - - - - {isPartOfMintingGroup && !accountIsMinting && ( - - - - {mintingAccounts?.length > 1 && ( - - {t('group:message.generic.minting_keys_per_node', { - postProcess: 'capitalizeFirstChar', - })} + + + + Blockchain Statistics - )} - - )} - + + + + + + - {mintingAccounts?.length > 0 && ( - - {t('group:message.generic.node_minting_account', { - postProcess: 'capitalizeFirstChar', - })} - - )} - + + Minting Account Details + + + + + + + + + + + With a 24/7 Minting you will reach level 5 in{' '} + 117.58 days! + + + + + + + Minting Rewards Info + + + + + + + + + {/* */} + + + + + + )} + + {valueMintingTab === 1 && ( + <> + - {accountIsMinting && ( + {isLoading && ( - - {t('group:message.generic.node_minting_key', { - postProcess: 'capitalizeFirstChar', - })} - + )} - - - {mintingAccounts?.map((acct) => ( - - - {t('group:message.generic.minting_account', { - postProcess: 'capitalizeFirstChar', - })}{' '} - {handleNames(acct?.mintingAccount)} - - - - - - - - - ))} - - {mintingAccounts?.length > 1 && ( - - {t('group:message.generic.minting_keys_per_node_different', { - postProcess: 'capitalizeFirstChar', - })} - - )} - - - - - {!isPartOfMintingGroup && ( + + {t('auth:account.account_one', { + postProcess: 'capitalizeFirstChar', + })} + : {handleNames(accountInfo?.address)} + + + + {t('core:level', { + postProcess: 'capitalizeFirstChar', + })} + : {accountInfo?.level} + + + + {t('group:message.generic.next_level', { + postProcess: 'capitalizeFirstChar', + })}{' '} + {_levelUpBlocks()} + + + + {t('group:message.generic.node_minting', { + postProcess: 'capitalizeFirstChar', + })}{' '} + {nodeInfos?.isMintingPossible?.toString()} + + + + + + {isPartOfMintingGroup && !accountIsMinting && ( - - {t('group:message.generic.minter_group', { - postProcess: 'capitalizeFirstChar', - })} - - - - {t('group:message.generic.mintership_app', { - postProcess: 'capitalizeFirstChar', - })} - - - - - - - )} - {showWaitDialog && ( - 1 && ( + + {t('group:message.generic.minting_keys_per_node', { + postProcess: 'capitalizeFirstChar', + })} + + )} + + )} + + + + {mintingAccounts?.length > 0 && ( + + {t('group:message.generic.node_minting_account', { + postProcess: 'capitalizeFirstChar', + })} + + )} + - + + {t('group:message.generic.node_minting_key', { + postProcess: 'capitalizeFirstChar', + })} + + + )} + + + + {mintingAccounts?.map((acct) => ( + + + {t('group:message.generic.minting_account', { + postProcess: 'capitalizeFirstChar', + })}{' '} + {handleNames(acct?.mintingAccount)} + + + + + + + + + ))} + + {mintingAccounts?.length > 1 && ( + + {t( + 'group:message.generic.minting_keys_per_node_different', + { + postProcess: 'capitalizeFirstChar', + } + )} + + )} + + + + + {!isPartOfMintingGroup && ( + - {isShowNext - ? t('core:message.generic.confirmed', { - postProcess: 'capitalizeFirstChar', - }) - : t('core:message.generic.wait', { - postProcess: 'capitalizeFirstChar', - })} - - - - {!isShowNext && ( - - {t('group:message.success.rewardshare_creation', { - postProcess: 'capitalizeFirstChar', - })} - - )} - - {isShowNext && ( - - {t('group:message.success.rewardshare_confirmed', { - postProcess: 'capitalizeFirstChar', - })} - - )} - - - - - - - )} - - - )} + + {t('group:message.generic.minter_group', { + postProcess: 'capitalizeFirstChar', + })} + + + + {t('group:message.generic.mintership_app', { + postProcess: 'capitalizeFirstChar', + })} + + + + + + + + )} + + {showWaitDialog && ( + + + {isShowNext + ? t('core:message.generic.confirmed', { + postProcess: 'capitalizeFirstChar', + }) + : t('core:message.generic.wait', { + postProcess: 'capitalizeFirstChar', + })} + + + + {!isShowNext && ( + + {t('group:message.success.rewardshare_creation', { + postProcess: 'capitalizeFirstChar', + })} + + )} + + {isShowNext && ( + + {t('group:message.success.rewardshare_confirmed', { + postProcess: 'capitalizeFirstChar', + })} + + )} + + + + + + + )} + + + )} + { 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 }) => { )} - + {open ? : } diff --git a/src/components/Tutorials/Tutorials.tsx b/src/components/Tutorials/Tutorials.tsx index a32e57a..6b41586 100644 --- a/src/components/Tutorials/Tutorials.tsx +++ b/src/components/Tutorials/Tutorials.tsx @@ -41,7 +41,7 @@ export const Tutorials = () => { >