Move transition in a separate file

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<unknown>
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});

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

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

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

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

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

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<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' }}>

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={{
+      slots={{
-        '& .MuiDialog-paper': {
+        transition: TransitionUp,
-          height: '100vh',
-          margin: 0,
-          maxWidth: '100%',
-          overflow: 'hidden', // Prevent scrollbars
-          width: '100%',
-        },
       }}
     >
       <AppBar sx={{ position: 'relative' }}>
@@ -575,418 +570,465 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
         </Toolbar>
       </AppBar>
 
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+      <Box
-        <Tabs value={setValueMintingTab} onChange={handleChange}>
+        sx={{
-          <Tab label="Minting Details" {...a11yProps(0)} />
+          bgcolor: theme.palette.background.default,
-          <Tab label="Item Two" {...a11yProps(1)} />
+          color: theme.palette.text.primary,
-          <Tab label="Item Three" {...a11yProps(2)} />
+          display: 'flex',
-        </Tabs>
+          flexDirection: 'column',
-      </Box>
+          flexGrow: 1,
-
+          overflowY: 'auto',
-      {valueMintingTab === 0 && (
+        }}
-        <>
+      >
-          <DialogContent
+        <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 }}>
+            <Tab
-              <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
+              label="Minting Details"
-                <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
               sx={{
-                backgroundColor: theme.palette.background.default,
+                '&.Mui-selected': {
-                padding: '10px',
+                  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>
+              <Container maxWidth="md" sx={{ py: 4 }}>
-                {t('auth:account.account_one', {
+                <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
-                  postProcess: 'capitalizeFirstChar',
+                  <Typography variant="h6" gutterBottom>
-                })}
+                    Blockchain Statistics
-                : {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',
-                    })}
                   </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 && (
+                <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
-              <Typography>
+                  <Typography variant="h6" gutterBottom>
-                {t('group:message.generic.node_minting_account', {
+                    Minting Account Details
-                  postProcess: 'capitalizeFirstChar',
+                  </Typography>
-                })}
+
-              </Typography>
+                  <Grid container spacing={2}>
-            )}
+                    <StatCard label="Current Status" value="(Minting)" />
-            <Card
+                    <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,
+                position: 'relative',
-                padding: '10px',
               }}
             >
-              {accountIsMinting && (
+              {isLoading && (
                 <Box
                   sx={{
+                    alignItems: 'center',
+                    bottom: 0,
                     display: 'flex',
-                    gap: '5px',
+                    justifyContent: 'center',
-                    flexDirection: 'column',
+                    left: 0,
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
                   }}
                 >
-                  <Typography>
+                  <FidgetSpinner
-                    {t('group:message.generic.node_minting_key', {
+                    ariaLabel="fidget-spinner-loading"
-                      postProcess: 'capitalizeFirstChar',
+                    height="80"
-                    })}
+                    visible={true}
-                  </Typography>
+                    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 && (
+                  {mintingAccounts?.length > 1 && (
-              <Dialog
+                    <Typography>
-                open={showWaitDialog}
+                      {t('group:message.generic.minting_keys_per_node', {
-                aria-labelledby="alert-dialog-title"
+                        postProcess: 'capitalizeFirstChar',
-                aria-describedby="alert-dialog-description"
+                      })}
+                    </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
+                {accountIsMinting && (
-                  id="alert-dialog-title"
+                  <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',
+                    backgroundColor: theme.palette.background.default,
-                    color: theme.palette.text.primary,
+                    padding: '10px',
-                    fontWeight: 'bold',
-                    opacity: 1,
                   }}
                 >
-                  {isShowNext
+                  <Box
-                    ? t('core:message.generic.confirmed', {
+                    sx={{
-                        postProcess: 'capitalizeFirstChar',
+                      display: 'flex',
-                      })
+                      gap: '5px',
-                    : t('core:message.generic.wait', {
+                      flexDirection: 'column',
-                        postProcess: 'capitalizeFirstChar',
+                      width: '100%',
-                      })}
+                      alignItems: 'center',
-                </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', {
+                    <Typography>
-                      postProcess: 'capitalizeFirstChar',
+                      {t('group:message.generic.minter_group', {
-                    })}
+                        postProcess: 'capitalizeFirstChar',
-                  </Button>
+                      })}
-                </DialogActions>
+                    </Typography>
-              </Dialog>
+
-            )}
+                    <Typography>
-          </DialogContent>
+                      {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' }}

src/components/TaskManager/TaskManager.tsx

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

src/components/Tutorials/Tutorials.tsx

@@ -41,7 +41,7 @@ export const Tutorials = () => {
       >
         <Tabs
           sx={{
-            '& .MuiTabs-indicator': {
+            '&.MuiTabs-indicator': {
               backgroundColor: theme.palette.background.default,
             },
           }}