Merge 0fdacbd5bf7dcaf2886bfb46ebbd942a094b53ce into 3da85a5078019bcf9f3987f29098706a3fc3d4ae

src/common/BoundedNumericTextField.tsx

@@ -135,6 +135,10 @@ export const BoundedNumericTextField = ({
             <IconButton
               size="small"
               onClick={() => changeValueWithIncDecButton(1)}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <AddIcon
                 sx={{
@@ -145,6 +149,10 @@ export const BoundedNumericTextField = ({
             <IconButton
               size="small"
               onClick={() => changeValueWithIncDecButton(-1)}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <RemoveIcon
                 sx={{

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

@@ -108,13 +108,10 @@ export const AppsDevModeNavBar = () => {
         <Tabs
           orientation="vertical"
           ref={tabsRef}
-          aria-label={t('core:basic_tabs_example', {
-            postProcess: 'capitalizeFirstChar',
-          })}
           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

@@ -190,11 +190,10 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
         <Tabs
           orientation="vertical"
           ref={tabsRef}
-          aria-label={t('core:basic_tabs_example')}
           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

@@ -1,4 +1,5 @@
-import React, {
+import {
+  SyntheticEvent,
   useCallback,
   useContext,
   useEffect,
@@ -265,7 +266,7 @@ export const AppsPrivate = ({ myName, myAddress }) => {
     }
   };
 
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
     setValueTabPrivateApp(newValue);
   };
 
@@ -353,13 +354,10 @@ export const AppsPrivate = ({ myName, myAddress }) => {
             <Tabs
               value={valueTabPrivateApp}
               onChange={handleChange}
-              aria-label={t('core:basic_tabs_example', {
-                postProcess: 'capitalizeFirstChar',
-              })}
               variant={'fullWidth'}
               scrollButtons="auto"
               sx={{
-                '& .MuiTabs-indicator': {
+                '&.MuiTabs-indicator': {
                   backgroundColor: theme.palette.background.default,
                 },
               }}

src/components/Chat/ChatDirect.tsx

@@ -546,7 +546,7 @@ export const ChatDirect = ({
   }, []);
 
   return (
-    <div
+    <Box
       style={{
         background: theme.palette.background.default,
         display: 'flex',
@@ -615,7 +615,7 @@ export const ChatDirect = ({
         tempChatReferences={tempChatReferences}
       />
 
-      <div
+      <Box
         style={{
           backgroundColor: theme.palette.background.default,
           bottom: isFocusedParent ? '0px' : 'unset',
@@ -632,7 +632,7 @@ export const ChatDirect = ({
           zIndex: isFocusedParent ? 5 : 'unset',
         }}
       >
-        <div
+        <Box
           style={{
             display: 'flex',
             flexDirection: 'column',
@@ -720,7 +720,7 @@ export const ChatDirect = ({
               </Typography>
             </Box>
           )}
-        </div>
+        </Box>
 
         <Box
           sx={{
@@ -766,7 +766,7 @@ export const ChatDirect = ({
             {` Send`}
           </CustomButton>
         </Box>
-      </div>
+      </Box>
 
       <LoadingSnackbar
         open={isLoading}
@@ -783,6 +783,6 @@ export const ChatDirect = ({
         info={infoSnack}
         setInfo={setInfoSnack}
       />
-    </div>
+    </Box>
   );
 };

src/components/Chat/ChatList.tsx

@@ -206,7 +206,7 @@ export const ChatList = ({
         width: '100%',
       }}
     >
-      <div
+      <Box
         style={{
           display: 'flex',
           flexDirection: 'column',
@@ -215,9 +215,8 @@ export const ChatList = ({
           width: '100%',
         }}
       >
-        <div
+        <Box
           ref={parentRef}
-          className="List"
           style={{
             display: 'flex',
             flexGrow: 1,
@@ -226,14 +225,14 @@ export const ChatList = ({
             position: 'relative',
           }}
         >
-          <div
+          <Box
-            style={{
+            sx={{
               height: rowVirtualizer.getTotalSize(),
               width: '100%',
             }}
           >
-            <div
+            <Box
-              style={{
+              sx={{
                 left: 0,
                 position: 'absolute',
                 top: 0,
@@ -325,9 +324,9 @@ export const ChatList = ({
                 // Render fallback if message is null
                 if (!message) {
                   return (
-                    <div
+                    <Box
                       key={virtualRow.index}
-                      style={{
+                      sx={{
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column',
@@ -345,16 +344,16 @@ export const ChatList = ({
                           postProcess: 'capitalizeFirstChar',
                         })}
                       </Typography>
-                    </div>
+                    </Box>
                   );
                 }
 
                 return (
-                  <div
+                  <Box
                     data-index={virtualRow.index} //needed for dynamic row height measurement
                     ref={rowVirtualizer.measureElement} //measure dynamic row height
                     key={message.signature}
-                    style={{
+                    sx={{
                       alignItems: 'center',
                       display: 'flex',
                       flexDirection: 'column',
@@ -395,17 +394,17 @@ export const ChatList = ({
                         scrollToItem={goToMessage}
                       />
                     </ErrorBoundary>
-                  </div>
+                  </Box>
                 );
               })}
-            </div>
+            </Box>
-          </div>
+          </Box>
-        </div>
+        </Box>
 
         {showScrollButton && (
           <Button
             onClick={() => scrollToBottom()}
-            style={{
+            sx={{
               backgroundColor: theme.palette.other.unread,
               border: 'none',
               borderRadius: '20px',
@@ -428,15 +427,15 @@ export const ChatList = ({
         {showScrollDownButton && !showScrollButton && (
           <Button
             onClick={() => scrollToBottom()}
-            style={{
+            sx={{
               backgroundColor: theme.palette.background.paper,
-              outline: `1px solid ${theme.palette.primary.light}`,
               border: 'none',
               borderRadius: '20px',
               bottom: 20,
               color: theme.palette.text.primary,
               cursor: 'pointer',
               fontSize: '16px',
+              outline: `1px solid ${theme.palette.primary.light}`,
               padding: '10px 20px',
               position: 'absolute',
               right: 20,
@@ -449,7 +448,7 @@ export const ChatList = ({
             })}
           </Button>
         )}
-      </div>
+      </Box>
 
       {enableMentions && (hasSecretKey || isPrivate === false) && (
         <ChatOptions

src/components/Chat/ChatOptions.tsx

@@ -786,6 +786,7 @@ const ShowMessage = ({ message, goToMessage, messages }) => {
       <Box
         sx={{
           alignItems: 'center',
+          background: theme.palette.background.surface,
           display: 'flex',
           justifyContent: 'space-between',
           width: '100%',

src/components/Chat/CreateCommonSecret.tsx

@@ -213,7 +213,7 @@ export const CreateCommonSecret = ({
   return (
     <Box
       sx={{
-        background: theme.palette.background.default,
+        background: theme.palette.background.paper,
         display: 'flex',
         flexDirection: 'column',
         gap: '25px',

src/components/Chat/MessageItem.tsx

@@ -228,8 +228,8 @@ export const MessageItemComponent = ({
         isLast={isLast}
         onSeen={onSeenFunc}
       >
-        <div
+        <Box
-          style={{
+          sx={{
             backgroundColor: theme.palette.background.paper,
             borderRadius: '7px',
             display: 'flex',
@@ -664,7 +664,7 @@ export const MessageItemComponent = ({
               </Box>
             </Box>
           </Box>
-        </div>
+        </Box>
       </MessageWragger>
     </>
   );

src/components/ContextMenu.tsx

@@ -185,4 +185,4 @@ export const ContextMenu = ({ children, groupId, getUserSettings }) => {
       </CustomStyledMenu>
     </div>
   );
-};
+}; // TODO translate

src/components/Embeds/ImageEmbed.tsx

@@ -269,11 +269,12 @@ export function ImageViewer({ src = null, alt = '' }) {
           <IconButton
             onClick={handleCloseFullscreen}
             sx={{
-              position: 'absolute',
+              bgcolor: theme.palette.background.default,
-              top: 8,
-              right: 8,
-              zIndex: 10,
               color: theme.palette.text.primary,
+              position: 'absolute',
+              right: 8,
+              top: 8,
+              zIndex: 10,
             }}
           >
             <CloseIcon />

src/components/Embeds/VideoPlayer.tsx

@@ -57,27 +57,27 @@ const ControlsContainer = styled(Box)`
 `;
 
 interface VideoPlayerProps {
-  src?: string;
-  poster?: string;
-  name?: string;
-  identifier?: string;
-  service?: string;
   autoplay?: boolean;
-  from?: string | null;
   customStyle?: any;
+  from?: string | null;
+  identifier?: string;
+  name?: string;
+  poster?: string;
+  service?: string;
+  src?: string | null;
   user?: string;
 }
 
 // TODO translate and theme (optional)
 export const VideoPlayer: FC<VideoPlayerProps> = ({
-  poster,
-  name,
-  identifier,
-  service,
   autoplay = true,
-  from = null,
   customStyle = {},
+  from = null,
+  identifier,
+  name,
   node,
+  poster,
+  service,
 }) => {
   const keyIdentifier = useMemo(() => {
     if (name && identifier && service) {
@@ -549,22 +549,22 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({
       )}
       {((!src && !isLoading) || !startPlay) && (
         <Box
-          position="absolute"
+          alignItems="center"
-          top={0}
+          bgcolor="rgba(0, 0, 0, 0.6)"
-          left={0}
-          right={0}
           bottom={0}
           display="flex"
           justifyContent="center"
-          alignItems="center"
+          left={0}
-          zIndex={500}
-          bgcolor="rgba(0, 0, 0, 0.6)"
           onClick={() => {
             togglePlay();
           }}
+          position="absolute"
+          right={0}
           sx={{
             cursor: 'pointer',
           }}
+          top={0}
+          zIndex={500}
         >
           <PlayArrow
             sx={{
@@ -587,7 +587,9 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({
         <VideoElement
           id={identifier}
           ref={videoRef}
-          src={!startPlay ? '' : resourceStatus?.status === 'READY' ? src : ''}
+          src={
+            !startPlay ? null : resourceStatus?.status === 'READY' ? src : null
+          }
           poster={!startPlay ? poster : ''}
           onTimeUpdate={updateProgress}
           autoPlay={autoplay}

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,7 +35,7 @@ import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 import { useTranslation } from 'react-i18next';
 import { useSetAtom } from 'jotai';
 import { txListAtom } from '../../atoms/global';
-import { ErrorRounded } from '@mui/icons-material';
+import { TransitionUp } from '../../common/Transitions.tsx';
 
 export const Label = styled('label')`
   display: block;
@@ -50,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);
@@ -229,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>
@@ -252,6 +237,10 @@ export const AddGroup = ({ address, open, setOpen }) => {
               color="inherit"
               edge="start"
               onClick={handleClose}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <CloseIcon />
             </IconButton>
@@ -274,14 +263,11 @@ export const AddGroup = ({ address, open, setOpen }) => {
             <Tabs
               value={value}
               onChange={handleChange}
-              aria-label={t('core:basic_tabs_example', {
-                postProcess: 'capitalizeFirstChar',
-              })}
               variant={'fullWidth'}
               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/BlockedUsersModal.tsx

@@ -406,10 +406,11 @@ export const BlockedUsersModal = () => {
           })}
           onClick={onCancel}
           sx={{
+            bgcolor: theme.palette.background.default,
+            color: theme.palette.text.primary,
             position: 'absolute',
             right: 8,
             top: 8,
-            color: theme.palette.text.primary,
           }}
         >
           <CloseIcon />

src/components/Group/Group.tsx

@@ -1632,10 +1632,10 @@ export const Group = ({
 
   const renderDirects = () => {
     return (
-      <div
+      <Box
         style={{
           alignItems: 'flex-start',
-          background: theme.palette.background.default,
+          background: theme.palette.background.surface,
           borderRadius: '0px 15px 15px 0px',
           display: 'flex',
           flexDirection: 'column',
@@ -1718,8 +1718,8 @@ export const Group = ({
           </ButtonBase>
         </Box>
 
-        <div
+        <Box
-          style={{
+          sx={{
             alignItems: 'flex-start',
             display: 'flex',
             flexDirection: 'column',
@@ -1763,7 +1763,7 @@ export const Group = ({
                 sx={{
                   background:
                     direct?.address === selectedDirect?.address &&
-                    theme.palette.background.default,
+                    theme.palette.background.surface,
                   borderRadius: '2px',
                   cursor: 'pointer',
                   display: 'flex',
@@ -1782,7 +1782,7 @@ export const Group = ({
                   <ListItemAvatar>
                     <Avatar
                       sx={{
-                        background: theme.palette.background.default,
+                        background: theme.palette.background.surface,
                         color: theme.palette.text.primary,
                       }}
                       alt={direct?.name || direct?.address}
@@ -1803,22 +1803,24 @@ export const Group = ({
                             postProcess: 'capitalizeFirstChar',
                           })
                     }
-                    primaryTypographyProps={{
+                    slotProps={{
-                      style: {
+                      primary: {
-                        color:
+                        style: {
-                          direct?.address === selectedDirect?.address &&
+                          color:
-                          theme.palette.text.primary,
+                            direct?.address === selectedDirect?.address &&
-                        textWrap: 'wrap',
+                            theme.palette.text.primary,
-                        overflow: 'hidden',
+                          textWrap: 'wrap',
-                        fontSize: '16px',
+                          overflow: 'hidden',
+                          fontSize: '16px',
+                        },
                       },
-                    }} // Change the color of the primary text
+                      secondary: {
-                    secondaryTypographyProps={{
+                        style: {
-                      style: {
+                          color:
-                        color:
+                            direct?.address === selectedDirect?.address &&
-                          direct?.address === selectedDirect?.address &&
+                            theme.palette.text.primary,
-                          theme.palette.text.primary,
+                          fontSize: '12px',
-                        fontSize: '12px',
+                        },
                       },
                     }}
                     sx={{
@@ -1827,6 +1829,7 @@ export const Group = ({
                       fontSize: '16px',
                     }}
                   />
+
                   {direct?.sender !== myAddress &&
                     direct?.timestamp &&
                     ((!timestampEnterData[direct?.address] &&
@@ -1844,10 +1847,10 @@ export const Group = ({
               </ListItem>
             </List>
           ))}
-        </div>
+        </Box>
 
-        <div
+        <Box
-          style={{
+          sx={{
             display: 'flex',
             width: '100%',
             gap: '10px',
@@ -1871,6 +1874,7 @@ export const Group = ({
               postProcess: 'capitalizeFirstChar',
             })}
           </CustomButton>
+
           {!isRunningPublicNode && (
             <CustomButton
               onClick={() => {
@@ -1888,8 +1892,8 @@ export const Group = ({
               />
             </CustomButton>
           )}
-        </div>
+        </Box>
-      </div>
+      </Box>
     );
   };
 
@@ -1936,7 +1940,7 @@ export const Group = ({
         setInfo={setInfoSnack}
       />
 
-      <div // TODO use Box
+      <Box
         style={{
           alignItems: 'flex-start',
           display: 'flex',
@@ -2004,7 +2008,7 @@ export const Group = ({
             <>
               <Box
                 sx={{
-                  background: theme.palette.background.default,
+                  background: theme.palette.background.surface,
                   bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
                   left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
                   opacity: !(desktopViewMode === 'chat') ? 0 : 1,
@@ -2458,7 +2462,7 @@ export const Group = ({
           }}
         />
         <WalletsAppWrapper />
-      </div>
+      </Box>
     </>
   );
 };

src/components/Group/GroupInvites.tsx

@@ -173,6 +173,10 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
                       aria-label={t('core:comment_other', {
                         postProcess: 'capitalizeFirstChar',
                       })}
+                      sx={{
+                        bgcolor: theme.palette.background.default,
+                        color: theme.palette.text.primary,
+                      }}
                     >
                       <GroupAddIcon
                         sx={{

src/components/Group/GroupJoinRequests.tsx

@@ -256,6 +256,10 @@ export const GroupJoinRequests = ({
                       aria-label={t('core:comment_other', {
                         postProcess: 'capitalizeFirstChar',
                       })}
+                      sx={{
+                        bgcolor: theme.palette.background.default,
+                        color: theme.palette.text.primary,
+                      }}
                     >
                       <GroupAddIcon
                         sx={{

src/components/Group/GroupList.tsx

@@ -59,8 +59,8 @@ export const GroupList = ({
   const [isRunningPublicNode] = useAtom(isRunningPublicNodeAtom);
 
   return (
-    <div
+    <Box
-      style={{
+      sx={{
         alignItems: 'flex-start',
         background: theme.palette.background.surface,
         borderRadius: '0px 15px 15px 0px',
@@ -145,8 +145,8 @@ export const GroupList = ({
         </ButtonBase>
       </Box>
 
-      <div
+      <Box
-        style={{
+        sx={{
           alignItems: 'flex-start',
           display: 'flex',
           flexDirection: 'column',
@@ -176,10 +176,10 @@ export const GroupList = ({
             />
           ))}
         </List>
-      </div>
+      </Box>
 
-      <div
+      <Box
-        style={{
+        sx={{
           display: 'flex',
           gap: '10px',
           justifyContent: 'center',
@@ -195,7 +195,7 @@ export const GroupList = ({
           >
             <AddCircleOutlineIcon
               sx={{
-                color: theme.palette.text.primary,
+                color: theme.palette.text.secondary,
               }}
             />
             {t('group:group.group', { postProcess: 'capitalizeFirstChar' })}
@@ -213,14 +213,14 @@ export const GroupList = ({
             >
               <PersonOffIcon
                 sx={{
-                  color: theme.palette.text.primary,
+                  color: theme.palette.text.secondary,
                 }}
               />
             </CustomButton>
           )}
         </>
-      </div>
+      </Box>
-    </div>
+    </Box>
   );
 };
 
@@ -294,20 +294,22 @@ const GroupItem = React.memo(
                   ? 'no messages'
                   : `last message: ${formatEmailDate(group?.timestamp)}`
               }
-              primaryTypographyProps={{
+              slotProps={{
-                style: {
+                primary: {
-                  color:
+                  style: {
-                    group?.groupId === selectedGroup?.groupId &&
+                    color:
-                    theme.palette.text.primary,
+                      group?.groupId === selectedGroup?.groupId &&
-                  fontSize: '16px',
+                      theme.palette.text.primary,
+                    fontSize: '16px',
+                  },
                 },
-              }}
+                secondary: {
-              secondaryTypographyProps={{
+                  style: {
-                style: {
+                    color:
-                  color:
+                      group?.groupId === selectedGroup?.groupId &&
-                    group?.groupId === selectedGroup?.groupId &&
+                      theme.palette.text.primary,
-                    theme.palette.text.primary,
+                    fontSize: '12px',
-                  fontSize: '12px',
+                  },
                 },
               }}
               sx={{

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -5,7 +5,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import IconButton from '@mui/material/IconButton';
 import { executeEvent } from '../../utils/events';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useTheme } from '@mui/material';
 import { Spacer } from '../../common/Spacer';
 import { CustomLoader } from '../../common/CustomLoader';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 export const ListOfThreadPostsWatched = () => {
   const [posts, setPosts] = useState([]);
   const [loading, setLoading] = useState(true);
+  const theme = useTheme();
   const { t } = useTranslation([
     'auth',
     'core',
@@ -175,6 +176,10 @@ export const ListOfThreadPostsWatched = () => {
                       aria-label={t('core:comment_other', {
                         postProcess: 'capitalizeFirstChar',
                       })}
+                      sx={{
+                        bgcolor: theme.palette.background.default,
+                        color: theme.palette.text.primary,
+                      }}
                     >
                       <VisibilityIcon
                         sx={{

src/components/Group/ManageMembers.tsx

@@ -229,6 +229,10 @@ export const ManageMembers = ({
               color="inherit"
               edge="start"
               onClick={handleClose}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <CloseIcon />
             </IconButton>
@@ -247,14 +251,11 @@ export const ManageMembers = ({
             <Tabs
               value={value}
               onChange={handleChange}
-              aria-label={t('core:basic_tabs_example', {
-                postProcess: 'capitalizeFirstChar',
-              })}
               variant="scrollable" // Make tabs scrollable
               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' }}>
@@ -181,6 +173,10 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
               aria-label={t('core:action.close', {
                 postProcess: 'capitalizeFirstChar',
               })}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <CloseIcon />
             </IconButton>

src/components/Language/LanguageSelector.tsx

@@ -30,25 +30,18 @@ const LanguageSelector = () => {
   return (
     <Box ref={selectorRef}>
       {!showSelect && (
-        <Tooltip
+        <Button
-          key={currentLang}
+          onClick={() => setShowSelect(true)}
-          title={t('core:action.change_language', {
+          style={{
+            fontSize: '1.3rem',
+          }}
+          aria-label={t('core:current_language', {
+            language: name,
             postProcess: 'capitalizeFirstChar',
           })}
         >
-          <Button
+          {flag}
-            onClick={() => setShowSelect(true)}
+        </Button>
-            style={{
-              fontSize: '1.3rem',
-            }}
-            aria-label={t('core:current_language', {
-              language: name,
-              postProcess: 'capitalizeFirstChar',
-            })}
-          >
-            {flag}
-          </Button>
-        </Tooltip>
       )}
 
       {showSelect && (

src/components/Minting/Minting.tsx

@@ -4,18 +4,29 @@ import {
   Box,
   Button,
   Card,
+  Container,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
   Divider,
   IconButton,
+  Paper,
   Snackbar,
+  Tab,
+  Tabs,
   Toolbar,
   Typography,
   useTheme,
 } from '@mui/material';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import Grid from '@mui/material/Grid';
+import {
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import { getBaseApiReact } from '../../App';
 import {
@@ -30,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);
@@ -37,14 +49,13 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
 
   const [mintingAccounts, setMintingAccounts] = useState([]);
   const [accountInfo, setAccountInfo] = useState(null);
-  const [rewardSharePublicKey, setRewardSharePublicKey] = useState('');
   const [mintingKey, setMintingKey] = useState('');
-  const [rewardsharekey, setRewardsharekey] = useState('');
   const [rewardShares, setRewardShares] = useState([]);
   const [nodeInfos, setNodeInfos] = useState({});
   const [openSnack, setOpenSnack] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const { show: showKey, message } = useModal();
+  const [adminInfo, setAdminInfo] = useState({});
+  const [valueMintingTab, setValueMintingTab] = useState(0);
   const { isShow: isShowNext, onOk, show: showNext } = useModal();
   const theme = useTheme();
   const { t } = useTranslation([
@@ -86,9 +97,8 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
 
   const getName = async (address) => {
     try {
-      const response = await fetch(
+      const url = `${getBaseApiReact()}/names/primary/${address}`;
-        `${getBaseApiReact()}/names/primary/${address}`
+      const response = await fetch(url);
-      );
       const nameData = await response.json();
       if (nameData?.name) {
         setNames((prev) => {
@@ -110,6 +120,13 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     }
   };
 
+  function a11yProps(index: number) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+
   const getAccountInfo = async (address: string, others?: boolean) => {
     try {
       if (!others) {
@@ -161,20 +178,6 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     return address;
   };
 
-  const handleAccountInfos = (address, field) => {
-    if (!address) return undefined;
-    if (accountInfos[address]) return accountInfos[address]?.[field];
-    if (accountInfos[address] === null) return undefined;
-    getAccountInfo(address, true);
-    return undefined;
-  };
-
-  const calculateBlocksRemainingToLevel1 = (address) => {
-    if (!address) return undefined;
-    if (!accountInfos[address]) return undefined;
-    return 7200 - accountInfos[address]?.blocksMinted || 0;
-  };
-
   const getNodeInfos = async () => {
     try {
       const url = `${getBaseApiReact()}/admin/status`;
@@ -206,6 +209,17 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     }
   }, []);
 
+  const getAdminInfo = async () => {
+    try {
+      const url = `${getBaseApiReact()}/admin/info`;
+      const response = await fetch(url);
+      const data = await response.json();
+      setAdminInfo(data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   const addMintingAccount = useCallback(async (val) => {
     try {
       setIsLoading(true);
@@ -308,6 +322,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
 
   const createRewardShare = useCallback(async (publicKey, recipient) => {
     const fee = await getFee('REWARD_SHARE');
+
     await show({
       message: t('core:message.question.perform_transaction', {
         action: 'REWARD_SHARE',
@@ -315,6 +330,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
       }),
       publishFee: fee.fee + ' QORT',
     });
+
     return await new Promise((res, rej) => {
       window
         .sendMessage('createRewardShare', {
@@ -382,7 +398,6 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
   const waitUntilRewardShareIsConfirmed = async (timeoutMs = 600000) => {
     const pollingInterval = 30000;
     const startTime = Date.now();
-
     const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
 
     while (Date.now() - startTime < timeoutMs) {
@@ -424,9 +439,11 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
         await showNext({
           message: '',
         });
+
         const privateRewardShare = await getRewardSharePrivateKey(
           accountInfo?.publicKey
         );
+
         setShowWaitDialog(false);
         addMintingAccount(privateRewardShare);
       }
@@ -446,62 +463,6 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     }
   };
 
-  const getPublicKeyFromAddress = async (address) => {
-    const url = `${getBaseApiReact()}/addresses/publickey/${address}`;
-    const response = await fetch(url);
-    const data = await response.text();
-    return data;
-  };
-
-  const checkIfMinterGroup = async (address) => {
-    const url = `${getBaseApiReact()}/groups/member/${address}`;
-    const response = await fetch(url);
-    const data = await response.json();
-    return !!data?.find((grp) => grp?.groupId?.toString() === '694');
-  };
-
-  const removeRewardShare = useCallback(async (rewardShare) => {
-    return await new Promise((res, rej) => {
-      window
-        .sendMessage('removeRewardShare', {
-          rewardShareKeyPairPublicKey: rewardShare.rewardSharePublicKey,
-          recipient: rewardShare.recipient,
-          percentageShare: -1,
-        })
-        .then((response) => {
-          if (!response?.error) {
-            res(response);
-            setTxList((prev) => [
-              {
-                ...rewardShare,
-                ...response,
-                type: 'remove-rewardShare',
-                label: t('group:message.success.rewardshare_remove', {
-                  postProcess: 'capitalizeFirstChar',
-                }),
-                labelDone: t('group:message.success.rewardshare_remove_label', {
-                  postProcess: 'capitalizeFirstChar',
-                }),
-                done: false,
-              },
-              ...prev,
-            ]);
-            return;
-          }
-          rej({ message: response.error });
-        })
-        .catch((error) => {
-          rej({
-            message:
-              error.message ||
-              t('core:message.error.generic', {
-                postProcess: 'capitalizeFirstChar',
-              }),
-          });
-        });
-    });
-  }, []);
-
   useEffect(() => {
     getNodeInfos();
     getMintingAccounts();
@@ -559,20 +520,29 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     return '' + countBlocksString;
   };
 
+  const StatCard = ({ label, value }: { label: string; value: string }) => (
+    <Grid size={{ xs: 12, sm: 6 }}>
+      <Box textAlign="center">
+        <Typography variant="subtitle1" fontWeight="bold">
+          {label}
+        </Typography>
+        <Typography>{value}</Typography>
+      </Box>
+    </Grid>
+  );
+
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    setValueMintingTab(newValue);
+  };
+
   return (
     <Dialog
       open={true}
       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' }}>
@@ -590,323 +560,475 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
             aria-label={t('core:action.close', {
               postProcess: 'capitalizeFirstChar',
             })}
+            sx={{
+              bgcolor: theme.palette.background.default,
+              color: theme.palette.text.primary,
+            }}
           >
             <CloseIcon />
           </IconButton>
         </Toolbar>
       </AppBar>
 
-      <DialogContent
+      <Box
         sx={{
-          position: 'relative',
+          bgcolor: theme.palette.background.default,
+          color: theme.palette.text.primary,
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 1,
+          overflowY: 'auto',
         }}
       >
-        {isLoading && (
+        <Box
-          <Box
+          sx={{ borderBottom: 1, borderColor: theme.palette.text.secondary }}
-            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,
-            padding: '10px',
-          }}
         >
-          <Typography>
+          <Tabs
-            {t('auth:account.account_one', {
+            value={valueMintingTab}
-              postProcess: 'capitalizeFirstChar',
+            onChange={handleChange}
-            })}
+            variant={'fullWidth'}
-            : {handleNames(accountInfo?.address)}
+            scrollButtons="auto"
-          </Typography>
+            allowScrollButtonsMobile
-
-          <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',
+              '&.MuiTabs-indicator': {
-              display: 'flex',
+                backgroundColor: theme.palette.background.default,
-              flexDirection: 'column',
+              },
-              gap: '5px',
-              width: '100%',
             }}
           >
-            <Button
+            <Tab
-              size="small"
+              label="Minting Details" // TODO translate
-              onClick={() => {
-                startMinting();
-              }}
-              disabled={mintingAccounts?.length > 1}
               sx={{
-                backgroundColor: theme.palette.other.positive,
+                '&.Mui-selected': {
-                color: 'black',
+                  color: theme.palette.text.primary,
-                fontWeight: 'bold',
-                opacity: 0.7,
-                maxWidth: '90%',
-                width: '200px',
-                '&:hover': {
-                  backgroundColor: theme.palette.other.positive,
-                  color: 'black',
-                  opacity: 1,
                 },
+                fontSize: '1rem',
               }}
-              variant="contained"
+              {...a11yProps(0)}
-            >
+            />
-              {t('core:action.start_minting', {
+            <Tab
-                postProcess: 'capitalizeFirstChar',
+              label="Minting Actions"
-              })}
-            </Button>
-
-            {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',
-          }}
-        >
-          {accountIsMinting && (
-            <Box
               sx={{
-                display: 'flex',
+                '&.Mui-selected': {
-                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%',
+                fontSize: '1rem',
-                  opacity: 0.7,
+              }}
-                  width: '200px',
+              {...a11yProps(1)}
-                  '&:hover': {
+            />
-                    backgroundColor: theme.palette.other.danger,
+          </Tabs>
-                    color: theme.palette.text.primary,
+        </Box>
-                    opacity: 1,
-                  },
-                }}
-                onClick={() => {
-                  removeMintingAccount(acct.publicKey, acct);
-                }}
-                variant="contained"
-              >
-                {t('group:action.remove_minting_account', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Button>
 
-              <Divider />
+        {valueMintingTab === 0 && (
-
+          <>
-              <Spacer height="10px" />
+            <DialogContent
-            </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',
-            }}
-          >
-            <Box
               sx={{
-                display: 'flex',
+                position: 'relative',
-                gap: '5px',
-                flexDirection: 'column',
-                width: '100%',
-                alignItems: 'center',
               }}
             >
-              <Typography>
+              <Container maxWidth="md" sx={{ py: 4 }}>
-                {t('group:message.generic.minter_group', {
+                <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
-                  postProcess: 'capitalizeFirstChar',
+                  <Typography variant="h6" gutterBottom>
-                })}
+                    Blockchain Statistics
-              </Typography>
+                  </Typography>
 
-              <Typography>
+                  <Grid container spacing={2}>
-                {t('group:message.generic.mintership_app', {
+                    <StatCard
-                  postProcess: 'capitalizeFirstChar',
+                      label="Avg. Qortal Blocktime"
-                })}
+                      value="72.84 Seconds"
-              </Typography>
+                    />
+                    <StatCard
+                      label="Avg. Blocks Per Day"
+                      value="1186.16 Blocks"
+                    />
+                    <StatCard
+                      label="Avg. Created QORT Per Day"
+                      value="3558.48 QORT"
+                    />
+                  </Grid>
+                </Paper>
 
-              <Spacer height="10px" />
+                <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
+                  <Typography variant="h6" gutterBottom>
+                    Minting Account Details
+                  </Typography>
 
-              <Button
+                  <Grid container spacing={2}>
-                size="small"
+                    <StatCard label="Current Status" value="(Minting)" />
-                sx={{
+                    <StatCard label="Current Level" value="Level 4" />
-                  backgroundColor: theme.palette.other.positive,
+                    <StatCard
-                  color: theme.palette.text.primary,
+                      label="Blocks To Next Level"
-                  fontWeight: 'bold',
+                      value="139467 Blocks"
-                  opacity: 0.7,
+                    />
+                  </Grid>
 
-                  '&:hover': {
+                  <Box mt={2} textAlign="center">
-                    backgroundColor: theme.palette.other.positive,
+                    <Typography>
-                    color: 'black',
+                      With a 24/7 Minting you will reach level 5 in{' '}
-                    opacity: 1,
+                      <strong>117.58 days</strong>!
-                  },
+                    </Typography>
-                }}
+                  </Box>
-                onClick={() => {
+                </Paper>
-                  executeEvent('addTab', {
+
-                    data: { service: 'APP', name: 'q-mintership' },
+                <Paper elevation={3} sx={{ p: 3, borderRadius: '10px' }}>
-                  });
+                  <Typography variant="h6" gutterBottom>
-                  executeEvent('open-apps-mode', {});
+                    Minting Rewards Info
-                  setIsOpenMinting(false);
+                  </Typography>
-                }}
+
-                variant="contained"
+                  <Grid container spacing={2}>
-              >
+                    <StatCard
-                {t('group:action.visit_q_mintership', {
+                      label="Current Tier"
-                  postProcess: 'capitalizeFirstChar',
+                      value="Tier 2 (Level 3 + 4)"
-                })}
+                    />
-              </Button>
+                    <StatCard
-            </Box>
+                      label="Total Minters in The Tier"
-          </Card>
+                      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>
+          </>
         )}
 
-        {showWaitDialog && (
+        {valueMintingTab === 1 && (
-          <Dialog
+          <>
-            open={showWaitDialog}
+            <DialogContent
-            aria-labelledby="alert-dialog-title"
-            aria-describedby="alert-dialog-description"
-          >
-            <DialogTitle
-              id="alert-dialog-title"
               sx={{
-                textAlign: 'center',
+                position: 'relative',
-                color: theme.palette.text.primary,
-                fontWeight: 'bold',
-                opacity: 1, // TODO translate
               }}
             >
-              {isShowNext ? 'Confirmed' : 'Please Wait'}
+              {isLoading && (
-            </DialogTitle>
+                <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>
+              )}
 
-            <DialogContent>
+              <Card
-              {!isShowNext && (
+                sx={{
+                  backgroundColor: theme.palette.background.default,
+                  padding: '10px',
+                }}
+              >
                 <Typography>
-                  {t('group:message.success.rewardshare_creation', {
+                  {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',
+                      })}
+                    </Typography>
+                  )}
+                </Box>
+              )}
+
+              <Spacer height="10px" />
+
+              {mintingAccounts?.length > 0 && (
+                <Typography>
+                  {t('group:message.generic.node_minting_account', {
                     postProcess: 'capitalizeFirstChar',
                   })}
                 </Typography>
               )}
-              {isShowNext && (
+              <Card
-                <Typography>
+                sx={{
-                  {t('group:message.success.rewardshare_confirmed', {
+                  backgroundColor: theme.palette.background.default,
-                    postProcess: 'capitalizeFirstChar',
+                  padding: '10px',
-                  })}
+                }}
-                </Typography>
+              >
+                {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={{
+                    backgroundColor: theme.palette.background.default,
+                    padding: '10px',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      gap: '5px',
+                      flexDirection: 'column',
+                      width: '100%',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <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>
-
+          </>
-            <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/NotAuthenticated.tsx

@@ -515,9 +515,9 @@ export const NotAuthenticated = ({
 
       <Box
         sx={{
+          alignItems: 'center',
           display: 'flex',
           gap: '10px',
-          alignItems: 'center',
         }}
       >
         <HtmlTooltip
@@ -550,9 +550,9 @@ export const NotAuthenticated = ({
 
       <Box
         sx={{
+          alignItems: 'center',
           display: 'flex',
           gap: '10px',
-          alignItems: 'center',
         }}
       >
         <HtmlTooltip
@@ -628,18 +628,18 @@ export const NotAuthenticated = ({
 
         <Box
           sx={{
-            display: 'flex',
-            gap: '10px',
             alignItems: 'center',
+            borderRadius: '8px',
+            display: 'flex',
             flexDirection: 'column',
-            outlineWidth: '0.5px',
+            gap: '10px',
             outlineStyle: 'solid',
+            outlineWidth: '0.5px',
             outlineColor:
               theme.palette.mode === 'dark'
                 ? 'rgba(255, 255, 255, 0.5)'
                 : 'rgba(0, 0, 0, 0.3)',
             padding: '20px 30px',
-            borderRadius: '8px',
           }}
         >
           <>
@@ -795,11 +795,11 @@ export const NotAuthenticated = ({
           <DialogContent>
             <Box
               sx={{
-                width: '100% !important',
-                overflow: 'auto',
-                height: '60vh',
                 display: 'flex',
                 flexDirection: 'column',
+                height: '60vh',
+                overflow: 'auto',
+                width: '100% !important',
               }}
             >
               {mode === 'list' && (
@@ -894,10 +894,10 @@ export const NotAuthenticated = ({
 
                         <Box
                           sx={{
+                            alignItems: 'center',
                             display: 'flex',
                             gap: '10px',
                             justifyContent: 'space-between',
-                            alignItems: 'center',
                           }}
                         >
                           <Button

src/components/RegisterName.tsx

@@ -293,9 +293,9 @@ export const RegisterName = ({
           {isNameAvailable === Availability.AVAILABLE && (
             <Box
               sx={{
+                alignItems: 'center',
                 display: 'flex',
                 gap: '5px',
-                alignItems: 'center',
               }}
             >
               <CheckIcon

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/Theme/ThemeSelector.tsx

@@ -19,26 +19,15 @@ const ThemeSelector = () => {
 
   return (
     <Box ref={selectorRef}>
-      <Tooltip
+      <IconButton
-        title={
+        onClick={toggleTheme}
-          themeMode === 'dark'
+        sx={{
-            ? t('core:theme.light_mode', {
+          bgcolor: theme.palette.background.default,
-                postProcess: 'capitalizeFirstChar',
+          color: theme.palette.text.primary,
-              })
+        }}
-            : t('core:theme.dark_mode', {
-                postProcess: 'capitalizeFirstChar',
-              })
-        }
       >
-        <IconButton
+        {themeMode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
-          onClick={toggleTheme}
+      </IconButton>
-          sx={{
-            color: theme.palette.text.secondary,
-          }}
-        >
-          {themeMode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
-        </IconButton>
-      </Tooltip>
     </Box>
   );
 };

src/components/Tutorials/Tutorials.tsx

@@ -41,15 +41,12 @@ export const Tutorials = () => {
       >
         <Tabs
           sx={{
-            '& .MuiTabs-indicator': {
+            '&.MuiTabs-indicator': {
               backgroundColor: theme.palette.background.default,
             },
           }}
           value={multiNumber}
           onChange={(e, value) => setMultiNumber(value)}
-          aria-label={t('core:basic_tabs_example', {
-            postProcess: 'capitalizeFirstChar',
-          })}
         >
           {openTutorialModal?.multi?.map((item, index) => {
             return (
@@ -75,10 +72,11 @@ export const Tutorials = () => {
           })}
           onClick={handleClose}
           sx={{
+            bgcolor: theme.palette.background.default,
+            color: theme.palette.text.primary,
             position: 'absolute',
             right: 8,
             top: 8,
-            color: theme.palette.text.primary,
           }}
         >
           <CloseIcon />
@@ -123,10 +121,11 @@ export const Tutorials = () => {
           })}
           onClick={handleClose}
           sx={{
+            bgcolor: theme.palette.background.default,
+            color: theme.palette.text.primary,
             position: 'absolute',
             right: 8,
             top: 8,
-            color: theme.palette.text.primary,
           }}
         >
           <CloseIcon />

src/components/UserLookup.tsx/UserLookup.tsx

@@ -18,6 +18,8 @@ import {
   CircularProgress,
   useTheme,
   Autocomplete,
+  IconButton,
+  ClickAwayListener,
 } from '@mui/material';
 import {
   getAddressInfo,
@@ -28,7 +30,7 @@ import { getNameInfo } from '../Group/Group';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import { Spacer } from '../../common/Spacer';
 import { formatTimestamp } from '../../utils/time';
-import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
+import CloseIcon from '@mui/icons-material/Close';
 import {
   executeEvent,
   subscribeToEvent,
@@ -160,489 +162,481 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
 
   return (
     <DrawerUserLookup open={isOpenDrawerLookup} setOpen={setIsOpenDrawerLookup}>
-      <Box
+      <ClickAwayListener onClickAway={onClose}>
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          height: '100vh',
-          overflow: 'hidden',
-          padding: '15px',
-        }}
-      >
-        <Box
-          sx={{
-            alignItems: 'center',
-            display: 'flex',
-            flexShrink: 0,
-            gap: '5px',
-          }}
-        >
-          <Autocomplete
-            value={nameOrAddress}
-            onChange={(event: any, newValue: string | null) => {
-              if (!newValue) {
-                setNameOrAddress('');
-                return;
-              }
-              setNameOrAddress(newValue);
-              lookupFunc(newValue);
-            }}
-            inputValue={inputValue}
-            onInputChange={(event, newInputValue) => {
-              setInputValue(newInputValue);
-            }}
-            id="controllable-states-demo"
-            loading={isLoading}
-            noOptionsText={t('core:option_no', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            options={options}
-            sx={{ width: 300 }}
-            renderInput={(params) => (
-              <TextField
-                autoFocus
-                autoComplete="off"
-                {...params}
-                label={t('auth:address_name', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && nameOrAddress) {
-                    lookupFunc(inputValue);
-                  }
-                }}
-              />
-            )}
-          />
-
-          <ButtonBase
-            sx={{
-              marginLeft: 'auto',
-            }}
-            onClick={() => {
-              onClose();
-            }}
-          >
-            <CloseFullscreenIcon
-              sx={{
-                color: theme.palette.text.primary,
-              }}
-            />
-          </ButtonBase>
-        </Box>
-
         <Box
           sx={{
             display: 'flex',
             flexDirection: 'column',
-            flexGrow: 1,
+            height: '100vh',
-            overflow: 'auto',
+            overflow: 'hidden',
+            padding: '15px',
           }}
         >
-          {!isLoadingUser && errorMessage && (
+          <Box
-            <Box
+            sx={{
-              sx={{
+              alignItems: 'center',
-                display: 'flex',
+              display: 'flex',
-                justifyContent: 'center',
+              gap: '5px',
-                marginTop: '40px',
+            }}
-                width: '100%',
+          >
+            <Autocomplete
+              value={nameOrAddress}
+              onChange={(event: any, newValue: string | null) => {
+                if (!newValue) {
+                  setNameOrAddress('');
+                  return;
+                }
+                setNameOrAddress(newValue);
+                lookupFunc(newValue);
               }}
-            >
+              inputValue={inputValue}
-              <Typography>{errorMessage}</Typography>
+              onInputChange={(event, newInputValue) => {
-            </Box>
+                setInputValue(newInputValue);
-          )}
-
-          {isLoadingUser && (
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                marginTop: '40px',
-                width: '100%',
               }}
-            >
+              id="controllable-states-demo"
-              <CircularProgress
+              loading={isLoading}
-                sx={{
+              noOptionsText={t('core:option_no', {
-                  color: theme.palette.text.primary,
+                postProcess: 'capitalizeFirstChar',
-                }}
+              })}
-              />
+              options={options}
-            </Box>
+              sx={{ flexGrow: 1 }}
-          )}
+              renderInput={(params) => (
+                <TextField
+                  autoFocus
+                  autoComplete="off"
+                  {...params}
+                  label={t('auth:address_name', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && nameOrAddress) {
+                      lookupFunc(inputValue);
+                    }
+                  }}
+                />
+              )}
+            />
+          </Box>
 
-          {!isLoadingUser && addressInfo && (
+          <Box
-            <>
+            sx={{
-              <Spacer height="30px" />
+              display: 'flex',
+              flexDirection: 'column',
+              flexGrow: 1,
+              overflow: 'auto',
+            }}
+          >
+            {!isLoadingUser && errorMessage && (
               <Box
                 sx={{
                   display: 'flex',
-                  flexDirection: 'row',
-                  flexWrap: 'wrap',
-                  gap: '20px',
                   justifyContent: 'center',
+                  marginTop: '40px',
                   width: '100%',
                 }}
               >
-                <Card
+                <Typography>{errorMessage}</Typography>
+              </Box>
+            )}
+
+            {isLoadingUser && (
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  marginTop: '40px',
+                  width: '100%',
+                }}
+              >
+                <CircularProgress
+                  sx={{
+                    color: theme.palette.text.primary,
+                  }}
+                />
+              </Box>
+            )}
+
+            {!isLoadingUser && addressInfo && (
+              <>
+                <Spacer height="30px" />
+                <Box
                   sx={{
-                    alignItems: 'center',
-                    background: theme.palette.background.default,
                     display: 'flex',
-                    flexDirection: 'column',
+                    flexDirection: 'row',
-                    minHeight: '200px',
+                    flexWrap: 'wrap',
-                    minWidth: '320px',
+                    gap: '20px',
-                    padding: '15px',
+                    justifyContent: 'center',
+                    width: '100%',
                   }}
                 >
-                  <Typography
+                  <Card
                     sx={{
-                      textAlign: 'center',
+                      alignItems: 'center',
+                      background: theme.palette.background.default,
+                      display: 'flex',
+                      flexDirection: 'column',
+                      minHeight: '200px',
+                      minWidth: '320px',
+                      padding: '15px',
                     }}
                   >
-                    {addressInfo?.name ??
+                    <Typography
-                      t('auth:message.error.name_not_registered', {
+                      sx={{
-                        postProcess: 'capitalizeFirstChar',
+                        textAlign: 'center',
-                      })}
+                      }}
-                  </Typography>
+                    >
+                      {addressInfo?.name ??
+                        t('auth:message.error.name_not_registered', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                    </Typography>
 
-                  <Spacer height="20px" />
+                    <Spacer height="20px" />
 
-                  <Divider>
+                    <Divider>
-                    {addressInfo?.name ? (
+                      {addressInfo?.name ? (
-                      <Avatar
+                        <Avatar
-                        sx={{
+                          sx={{
-                          height: '50px',
+                            height: '50px',
-                          width: '50px',
+                            width: '50px',
-                          '& img': {
+                            '& img': {
-                            objectFit: 'fill',
+                              objectFit: 'fill',
-                          },
+                            },
-                        }}
+                          }}
-                        alt={addressInfo?.name}
+                          alt={addressInfo?.name}
-                        src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                          src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
-                          addressInfo?.name
+                            addressInfo?.name
-                        }/qortal_avatar?async=true`}
+                          }/qortal_avatar?async=true`}
-                      >
+                        >
+                          <AccountCircleIcon
+                            sx={{
+                              fontSize: '50px',
+                            }}
+                          />
+                        </Avatar>
+                      ) : (
                         <AccountCircleIcon
                           sx={{
                             fontSize: '50px',
                           }}
                         />
-                      </Avatar>
+                      )}
-                    ) : (
+                    </Divider>
-                      <AccountCircleIcon
-                        sx={{
-                          fontSize: '50px',
-                        }}
-                      />
-                    )}
-                  </Divider>
 
-                  <Spacer height="20px" />
+                    <Spacer height="20px" />
 
-                  <Typography
+                    <Typography
-                    sx={{
+                      sx={{
-                      textAlign: 'center',
+                        textAlign: 'center',
-                    }}
+                      }}
-                  >
+                    >
-                    {t('core:level', { postProcess: 'capitalizeFirstChar' })}{' '}
+                      {t('core:level', { postProcess: 'capitalizeFirstChar' })}{' '}
-                    {addressInfo?.level}
+                      {addressInfo?.level}
-                  </Typography>
+                    </Typography>
-                </Card>
+                  </Card>
-
+
-                <Card
+                  <Card
-                  sx={{
-                    background: theme.palette.background.default,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '20px',
-                    minHeight: '200px',
-                    minWidth: '320px',
-                    padding: '15px',
-                  }}
-                >
-                  <Box
                     sx={{
+                      background: theme.palette.background.default,
                       display: 'flex',
+                      flexDirection: 'column',
                       gap: '20px',
-                      justifyContent: 'space-between',
+                      minHeight: '200px',
-                      width: '100%',
+                      minWidth: '320px',
+                      padding: '15px',
                     }}
                   >
                     <Box
                       sx={{
                         display: 'flex',
-                        flexShrink: 0,
+                        gap: '20px',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          flexShrink: 0,
+                        }}
+                      >
+                        <Typography>
+                          {t('auth:address', {
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                        </Typography>
+                      </Box>
+
+                      <Tooltip
+                        title={
+                          <span
+                            style={{
+                              color: theme.palette.text.primary,
+                              fontSize: '14px',
+                              fontWeight: 700,
+                            }}
+                          >
+                            {t('auth:action.copy_address', {
+                              postProcess: 'capitalizeFirstChar',
+                            })}
+                          </span>
+                        }
+                        placement="bottom"
+                        arrow
+                        sx={{ fontSize: '24' }}
+                        slotProps={{
+                          tooltip: {
+                            sx: {
+                              color: theme.palette.text.primary,
+                              backgroundColor: theme.palette.background.default,
+                            },
+                          },
+                          arrow: {
+                            sx: {
+                              color: theme.palette.text.primary,
+                            },
+                          },
+                        }}
+                      >
+                        <ButtonBase
+                          onClick={() => {
+                            navigator.clipboard.writeText(addressInfo?.address);
+                          }}
+                        >
+                          <Typography
+                            sx={{
+                              textAlign: 'end',
+                            }}
+                          >
+                            {addressInfo?.address}
+                          </Typography>
+                        </ButtonBase>
+                      </Tooltip>
+                    </Box>
+
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        gap: '20px',
+                        justifyContent: 'space-between',
+                        width: '100%',
                       }}
                     >
                       <Typography>
-                        {t('auth:address', {
+                        {t('core:balance', {
                           postProcess: 'capitalizeFirstChar',
                         })}
                       </Typography>
+
+                      <Typography>{addressInfo?.balance}</Typography>
                     </Box>
 
-                    <Tooltip
+                    <Spacer height="20px" />
-                      title={
+
-                        <span
+                    <Button
-                          style={{
+                      variant="contained"
-                            color: theme.palette.text.primary,
+                      onClick={() => {
-                            fontSize: '14px',
+                        executeEvent('openPaymentInternal', {
-                            fontWeight: 700,
+                          address: addressInfo?.address,
-                          }}
+                          name: addressInfo?.name,
-                        >
+                        });
-                          {t('auth:action.copy_address', {
-                            postProcess: 'capitalizeFirstChar',
-                          })}
-                        </span>
-                      }
-                      placement="bottom"
-                      arrow
-                      sx={{ fontSize: '24' }}
-                      slotProps={{
-                        tooltip: {
-                          sx: {
-                            color: theme.palette.text.primary,
-                            backgroundColor: theme.palette.background.default,
-                          },
-                        },
-                        arrow: {
-                          sx: {
-                            color: theme.palette.text.primary,
-                          },
-                        },
                       }}
                     >
-                      <ButtonBase
+                      {t('core:action.send_qort', {
-                        onClick={() => {
+                        postProcess: 'capitalizeFirstChar',
-                          navigator.clipboard.writeText(addressInfo?.address);
+                      })}
-                        }}
+                    </Button>
-                      >
+                  </Card>
-                        <Typography
+                </Box>
-                          sx={{
+              </>
-                            textAlign: 'end',
+            )}
-                          }}
-                        >
-                          {addressInfo?.address}
-                        </Typography>
-                      </ButtonBase>
-                    </Tooltip>
-                  </Box>
 
+            <Spacer height="40px" />
+
+            {isLoadingPayments && (
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  width: '100%',
+                }}
+              >
+                <CircularProgress
+                  sx={{
+                    color: theme.palette.text.primary,
+                  }}
+                />
+              </Box>
+            )}
+
+            {!isLoadingPayments && addressInfo && (
+              <Card
+                sx={{
+                  background: theme.palette.background.default,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  overflow: 'auto',
+                  padding: '15px',
+                }}
+              >
+                <Typography>
+                  {t('core:message.generic.most_recent_payment', {
+                    count: 20,
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+
+                <Spacer height="20px" />
+
+                {!isLoadingPayments && payments?.length === 0 && (
                   <Box
                     sx={{
                       display: 'flex',
-                      gap: '20px',
+                      justifyContent: 'center',
-                      justifyContent: 'space-between',
                       width: '100%',
                     }}
                   >
                     <Typography>
-                      {t('core:balance', {
+                      {t('core:message.generic.no_payments', {
                         postProcess: 'capitalizeFirstChar',
                       })}
                     </Typography>
-
-                    <Typography>{addressInfo?.balance}</Typography>
                   </Box>
+                )}
 
-                  <Spacer height="20px" />
+                <Table>
-
+                  <TableHead>
-                  <Button
+                    <TableRow>
-                    variant="contained"
-                    onClick={() => {
-                      executeEvent('openPaymentInternal', {
-                        address: addressInfo?.address,
-                        name: addressInfo?.name,
-                      });
-                    }}
-                  >
-                    {t('core:action.send_qort', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Button>
-                </Card>
-              </Box>
-            </>
-          )}
-
-          <Spacer height="40px" />
-
-          {isLoadingPayments && (
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                width: '100%',
-              }}
-            >
-              <CircularProgress
-                sx={{
-                  color: theme.palette.text.primary,
-                }}
-              />
-            </Box>
-          )}
-
-          {!isLoadingPayments && addressInfo && (
-            <Card
-              sx={{
-                background: theme.palette.background.default,
-                display: 'flex',
-                flexDirection: 'column',
-                overflow: 'auto',
-                padding: '15px',
-              }}
-            >
-              <Typography>
-                {t('core:message.generic.most_recent_payment', {
-                  count: 20,
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Typography>
-
-              <Spacer height="20px" />
-
-              {!isLoadingPayments && payments?.length === 0 && (
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    width: '100%',
-                  }}
-                >
-                  <Typography>
-                    {t('core:message.generic.no_payments', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                </Box>
-              )}
-
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableCell>
-                      {t('core:sender', { postProcess: 'capitalizeFirstChar' })}
-                    </TableCell>
-                    <TableCell>
-                      {t('core:receiver', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </TableCell>
-                    <TableCell>
-                      {t('core:amount', { postProcess: 'capitalizeFirstChar' })}
-                    </TableCell>
-                    <TableCell>
-                      {t('core:time.time', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </TableCell>
-                  </TableRow>
-                </TableHead>
-
-                <TableBody>
-                  {payments.map((payment, index) => (
-                    <TableRow key={payment?.signature}>
                       <TableCell>
-                        <Tooltip
+                        {t('core:sender', {
-                          title={
+                          postProcess: 'capitalizeFirstChar',
-                            <span
+                        })}
-                              style={{
-                                color: theme.palette.text.primary,
-                                fontSize: '14px',
-                                fontWeight: 700,
-                              }}
-                            >
-                              {t('auth:action.copy_address', {
-                                postProcess: 'capitalizeFirstChar',
-                              })}
-                            </span>
-                          }
-                          placement="bottom"
-                          arrow
-                          sx={{ fontSize: '24' }}
-                          slotProps={{
-                            tooltip: {
-                              sx: {
-                                color: theme.palette.text.primary,
-                                backgroundColor:
-                                  theme.palette.background.default,
-                              },
-                            },
-                            arrow: {
-                              sx: {
-                                color: theme.palette.text.primary,
-                              },
-                            },
-                          }}
-                        >
-                          <ButtonBase
-                            onClick={() => {
-                              navigator.clipboard.writeText(
-                                payment?.creatorAddress
-                              );
-                            }}
-                          >
-                            {formatAddress(payment?.creatorAddress)}
-                          </ButtonBase>
-                        </Tooltip>
                       </TableCell>
-
                       <TableCell>
-                        <Tooltip
+                        {t('core:receiver', {
-                          title={
+                          postProcess: 'capitalizeFirstChar',
-                            <span
+                        })}
-                              style={{
-                                color: theme.palette.text.primary,
-                                fontSize: '14px',
-                                fontWeight: 700,
-                              }}
-                            >
-                              {t('auth:action.copy_address', {
-                                postProcess: 'capitalizeFirstChar',
-                              })}
-                            </span>
-                          }
-                          placement="bottom"
-                          arrow
-                          sx={{ fontSize: '24' }}
-                          slotProps={{
-                            tooltip: {
-                              sx: {
-                                color: theme.palette.text.primary,
-                                backgroundColor:
-                                  theme.palette.background.default,
-                              },
-                            },
-                            arrow: {
-                              sx: {
-                                color: theme.palette.text.primary,
-                              },
-                            },
-                          }}
-                        >
-                          <ButtonBase
-                            onClick={() => {
-                              navigator.clipboard.writeText(payment?.recipient);
-                            }}
-                          >
-                            {formatAddress(payment?.recipient)}
-                          </ButtonBase>
-                        </Tooltip>
                       </TableCell>
-
-                      <TableCell>{payment?.amount}</TableCell>
-
                       <TableCell>
-                        {formatTimestamp(payment?.timestamp)}
+                        {t('core:amount', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </TableCell>
+                      <TableCell>
+                        {t('core:time.time', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
                       </TableCell>
                     </TableRow>
-                  ))}
+                  </TableHead>
-                </TableBody>
+
-              </Table>
+                  <TableBody>
-            </Card>
+                    {payments.map((payment, index) => (
-          )}
+                      <TableRow key={payment?.signature}>
+                        <TableCell>
+                          <Tooltip
+                            title={
+                              <span
+                                style={{
+                                  color: theme.palette.text.primary,
+                                  fontSize: '14px',
+                                  fontWeight: 700,
+                                }}
+                              >
+                                {t('auth:action.copy_address', {
+                                  postProcess: 'capitalizeFirstChar',
+                                })}
+                              </span>
+                            }
+                            placement="bottom"
+                            arrow
+                            sx={{ fontSize: '24' }}
+                            slotProps={{
+                              tooltip: {
+                                sx: {
+                                  color: theme.palette.text.primary,
+                                  backgroundColor:
+                                    theme.palette.background.default,
+                                },
+                              },
+                              arrow: {
+                                sx: {
+                                  color: theme.palette.text.primary,
+                                },
+                              },
+                            }}
+                          >
+                            <ButtonBase
+                              onClick={() => {
+                                navigator.clipboard.writeText(
+                                  payment?.creatorAddress
+                                );
+                              }}
+                            >
+                              {formatAddress(payment?.creatorAddress)}
+                            </ButtonBase>
+                          </Tooltip>
+                        </TableCell>
+
+                        <TableCell>
+                          <Tooltip
+                            title={
+                              <span
+                                style={{
+                                  color: theme.palette.text.primary,
+                                  fontSize: '14px',
+                                  fontWeight: 700,
+                                }}
+                              >
+                                {t('auth:action.copy_address', {
+                                  postProcess: 'capitalizeFirstChar',
+                                })}
+                              </span>
+                            }
+                            placement="bottom"
+                            arrow
+                            sx={{ fontSize: '24' }}
+                            slotProps={{
+                              tooltip: {
+                                sx: {
+                                  color: theme.palette.text.primary,
+                                  backgroundColor:
+                                    theme.palette.background.default,
+                                },
+                              },
+                              arrow: {
+                                sx: {
+                                  color: theme.palette.text.primary,
+                                },
+                              },
+                            }}
+                          >
+                            <ButtonBase
+                              onClick={() => {
+                                navigator.clipboard.writeText(
+                                  payment?.recipient
+                                );
+                              }}
+                            >
+                              {formatAddress(payment?.recipient)}
+                            </ButtonBase>
+                          </Tooltip>
+                        </TableCell>
+
+                        <TableCell>{payment?.amount}</TableCell>
+
+                        <TableCell>
+                          {formatTimestamp(payment?.timestamp)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </Card>
+            )}
+          </Box>
         </Box>
-      </Box>
+      </ClickAwayListener>
     </DrawerUserLookup>
   );
 };

src/components/Wallets.tsx

@@ -207,7 +207,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
   if (isLoading) return null;
 
   return (
-    <div>
+    <Box>
       {wallets?.length === 0 || !wallets ? (
         <>
           <Typography>
@@ -469,7 +469,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
           </Typography>
         </DialogActions>
       </Dialog>
-    </div>
+    </Box>
   );
 };
 
@@ -562,6 +562,8 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
         <IconButton
           sx={{
             alignSelf: 'flex-start',
+            bgcolor: theme.palette.background.default,
+            color: theme.palette.text.primary,
           }}
           onClick={(e) => {
             e.stopPropagation();

src/i18n/locales/de/core.json

@@ -116,7 +116,6 @@
   "apps_official": "offizielle Apps",
   "attachment": "Anhang",
   "balance": "Gleichgewicht:",
-  "basic_tabs_example": "Basic Tabs Beispiel",
   "category": "Kategorie",
   "category_other": "Kategorien",
   "chat": "Chat",
@@ -256,6 +255,7 @@
       "no_pinned_changes": "Sie haben derzeit keine Änderungen an Ihren angestellten Apps",
       "no_results": "Keine Ergebnisse",
       "one_app_per_name": "Hinweis: Derzeit ist pro Namen nur eine App und Website zulässig.",
+      "ongoing_transactions": "laufende Transaktionen",
       "opened": "geöffnet",
       "overwrite_qdn": "überschreibt zu QDN",
       "password_confirm": "Bitte bestätigen Sie ein Passwort",
@@ -280,8 +280,9 @@
       "settings": "Sie verwenden den Export-/Import -Weg zum Speichern von Einstellungen.",
       "space_for_admins": "Entschuldigung, dieser Raum gilt nur für Administratoren.",
       "unread_messages": "ungelesene Nachrichten unten",
-      "unsaved_changes": "Sie haben nicht gespeicherte Änderungen an Ihren angestellten Apps. Speichern Sie sie bei QDN.",
+      "unsaved_changes": "sie haben nicht gespeicherte Änderungen an Ihren angestellten Apps. Speichern Sie sie bei QDN.",
-      "updating": "Aktualisierung"
+      "updating": "aktualisierung",
+      "wait": "bitte warten"
     },
     "message": "Nachricht",
     "promotion_text": "Promotionstext",

src/i18n/locales/en/core.json

@@ -116,7 +116,6 @@
   "apps_official": "official Apps",
   "attachment": "attachment",
   "balance": "balance:",
-  "basic_tabs_example": "basic tabs example",
   "category": "category",
   "category_other": "categories",
   "chat": "chat",
@@ -220,6 +219,7 @@
       "benefits_qort": "benefits of having QORT",
       "building": "building",
       "building_app": "building app",
+      "confirmed": "confirmed",
       "created_by": "created by {{ owner }}",
       "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
       "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
@@ -256,6 +256,7 @@
       "no_pinned_changes": "you currently do not have any changes to your pinned apps",
       "no_results": "no results",
       "one_app_per_name": "note: Currently, only one App and Website is allowed per Name.",
+      "ongoing_transactions": "ongoing transactions",
       "opened": "opened",
       "overwrite_qdn": "overwrite to QDN",
       "password_confirm": "please confirm a password",
@@ -281,7 +282,8 @@
       "space_for_admins": "sorry, this space is only for Admins.",
       "unread_messages": "unread messages below",
       "unsaved_changes": "you have unsaved changes to your pinned apps. Save them to QDN.",
-      "updating": "updating"
+      "updating": "updating",
+      "wait": "please wait"
     },
     "message": "message",
     "promotion_text": "promotion text",

src/i18n/locales/es/core.json

@@ -116,7 +116,6 @@
   "apps_official": "aplicaciones oficiales",
   "attachment": "adjunto",
   "balance": "balance:",
-  "basic_tabs_example": "Ejemplo de pestañas básicas",
   "category": "categoría",
   "category_other": "categorías",
   "chat": "charlar",
@@ -219,7 +218,8 @@
       "avatar_size": "{{ size }} KB max. for GIFS",
       "benefits_qort": "beneficios de tener Qort",
       "building": "edificio",
-      "building_app": "Aplicación de construcción",
+      "building_app": "aplicación de construcción",
+      "confirmed": "confirmado",
       "created_by": "created by {{ owner }}",
       "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
       "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
@@ -256,6 +256,7 @@
       "no_pinned_changes": "Actualmente no tiene ningún cambio en sus aplicaciones fijadas",
       "no_results": "Sin resultados",
       "one_app_per_name": "Nota: Actualmente, solo se permite una aplicación y un sitio web por nombre.",
+      "ongoing_transactions": "transacciones en curso",
       "opened": "abierto",
       "overwrite_qdn": "sobrescribir a QDN",
       "password_confirm": "Confirme una contraseña",
@@ -277,11 +278,12 @@
       "select_image": "Seleccione una imagen para un logotipo",
       "select_zip": "Seleccione el archivo .zip que contenga contenido estático:",
       "sending": "envío...",
-      "settings": "Está utilizando la forma de exportación/importación de la configuración de ahorro.",
+      "settings": "está utilizando la forma de exportación/importación de la configuración de ahorro.",
-      "space_for_admins": "Lo siento, este espacio es solo para administradores.",
+      "space_for_admins": "lo siento, este espacio es solo para administradores.",
-      "unread_messages": "Mensajes no leídos a continuación",
+      "unread_messages": "mensajes no leídos a continuación",
-      "unsaved_changes": "Tiene cambios no salvos en sus aplicaciones fijadas. Guárdelos a QDN.",
+      "unsaved_changes": "tiene cambios no salvos en sus aplicaciones fijadas. Guárdelos a QDN.",
-      "updating": "actualización"
+      "updating": "actualización",
+      "wait": "espera por favor"
     },
     "message": "mensaje",
     "promotion_text": "texto de promoción",
@@ -393,4 +395,4 @@
   },
   "website": "sitio web",
   "welcome": "bienvenido"
-}
+}

src/i18n/locales/fr/core.json

@@ -116,7 +116,6 @@
   "apps_official": "Applications officielles",
   "attachment": "pièce jointe",
   "balance": "équilibre:",
-  "basic_tabs_example": "Exemple de base des onglets",
   "category": "catégorie",
   "category_other": "catégories",
   "chat": "chat",
@@ -220,6 +219,7 @@
       "benefits_qort": "Avantages d'avoir QORT",
       "building": "bâtiment",
       "building_app": "application de construction",
+      "confirmed": "confirmé",
       "created_by": "created by {{ owner }}",
       "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
       "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
@@ -256,6 +256,7 @@
       "no_pinned_changes": "Vous n'avez actuellement aucune modification à vos applications épinglées",
       "no_results": "Aucun résultat",
       "one_app_per_name": "Remarque: Actuellement, une seule application et site Web est autorisée par nom.",
+      "ongoing_transactions": "transactions en cours",
       "opened": "ouvert",
       "overwrite_qdn": "Écraser à QDN",
       "password_confirm": "Veuillez confirmer un mot de passe",
@@ -277,11 +278,12 @@
       "select_image": "Veuillez sélectionner une image pour un logo",
       "select_zip": "Sélectionnez un fichier .zip contenant du contenu statique:",
       "sending": "envoi...",
-      "settings": "Vous utilisez la manière d'exportation / l'importation d'enregistrer les paramètres.",
+      "settings": "vous utilisez la manière d'exportation / importation d'enregistrement des paramètres.",
-      "space_for_admins": "Désolé, cet espace est uniquement pour les administrateurs.",
+      "space_for_admins": "désolé, cet espace est uniquement pour les administrateurs.",
-      "unread_messages": "Messages non lus ci-dessous",
+      "unread_messages": "messages non lus ci-dessous",
-      "unsaved_changes": "Vous avez des modifications non enregistrées à vos applications épinglées. Enregistrez-les sur QDN.",
+      "unsaved_changes": "vous avez des modifications non enregistrées à vos applications épinglées. Enregistrez-les sur QDN.",
-      "updating": "mise à jour"
+      "updating": "mise à jour",
+      "wait": "attendez s'il vous plaît"
     },
     "message": "message",
     "promotion_text": "texte de promotion",
@@ -393,4 +395,4 @@
   },
   "website": "site web",
   "welcome": "accueillir"
-}
+}

src/i18n/locales/it/core.json

@@ -116,7 +116,6 @@
   "apps_official": "app ufficiali",
   "attachment": "allegato",
   "balance": "bilancio:",
-  "basic_tabs_example": "esempio di schede base",
   "category": "categoria",
   "category_other": "categorie",
   "chat": "chat",
@@ -220,6 +219,7 @@
       "benefits_qort": "vantaggi di avere QORT",
       "building": "creazione",
       "building_app": "creazione app",
+      "confirmed": "confermato",
       "created_by": "creato da {{ owner }}",
       "buy_order_request": "l'applicazione <br/><italic>{{hostname}}</italic> <br/><span>sta effettuando {{count}} ordine d'acquisto</span>.",
       "buy_order_request_other": "l'applicazione <br/><italic>{{hostname}}</italic> <br/><span>sta effettuando {{count}} ordini d'acquisto</span>.",
@@ -255,6 +255,7 @@
       "no_pinned_changes": "per ora non ci sono modifiche alle app bloccate",
       "no_results": "nessun risultato",
       "one_app_per_name": "nota: per adesso sono consentiti solo un'app e un sito Web per nome.",
+      "ongoing_transactions": "transazioni in corso",
       "opened": "aperto",
       "overwrite_qdn": "sovrascrivi a QDN",
       "password_confirm": "si prega di confermare una password",
@@ -280,7 +281,8 @@
       "space_for_admins": "mi dispiace, questo spazio è solo per gli amministratori.",
       "unread_messages": "messaggi non letti qua sotto",
       "unsaved_changes": "hai cambiato modifiche alle app bloccate. Salvali su QDN.",
-      "updating": "aggiornamento"
+      "updating": "aggiornamento",
+      "wait": "attendere per favore"
     },
     "message": "messaggio",
     "promotion_text": "testo di promozione",

src/i18n/locales/it/group.json

@@ -71,7 +71,7 @@
       "block_delay_maximum": "ritardo massimo del blocco per le approvazioni delle transazioni di gruppo",
       "closed_group": "questo è un gruppo chiuso/privato, quindi occorre attendere fino a quando un amministratore accetta la richiesta",
       "descrypt_wallet": "decrittazione del wallet ...",
-      "encryption_key": "la prima chiave di crittografia comune del gruppo è in fase di creazione. Si prega di attendere qualche minuto per essere recuperato dalla rete. Controllo ogni 2 minuti ...",
+      "encryption_key": "la prima chiave di crittografia comune del gruppo è in fase di creazione. Si prega di attendere qualche minuto per il suo recupero dalla rete. Controllo ogni 2 minuti ...",
       "group_announcement": "annunci di gruppo",
       "group_approval_threshold": "soglia di approvazione del gruppo (numero / percentuale di amministratori che devono approvare una transazione)",
       "group_encrypted": "gruppo crittografato",

src/i18n/locales/ja/core.json

@@ -116,7 +116,6 @@
   "apps_official": "公式アプリ",
   "attachment": "添付ファイル",
   "balance": "バランス：",
-  "basic_tabs_example": "基本的なタブの例",
   "category": "カテゴリ",
   "category_other": "カテゴリ",
   "chat": "チャット",
@@ -220,6 +219,7 @@
       "benefits_qort": "QORTを持つことの利点",
       "building": "建物",
       "building_app": "ビルディングアプリ",
+      "confirmed": "確認済み",
       "created_by": "created by {{ owner }}",
       "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
       "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
@@ -256,6 +256,7 @@
       "no_pinned_changes": "現在、ピン留めアプリに変更がありません",
       "no_results": "結果はありません",
       "one_app_per_name": "注：現在、名前ごとに1つのアプリとWebサイトのみが許可されています。",
+      "ongoing_transactions": "継続中の取引",
       "opened": "オープン",
       "overwrite_qdn": "QDNに上書きします",
       "password_confirm": "パスワードを確認してください",
@@ -281,7 +282,8 @@
       "space_for_admins": "申し訳ありませんが、このスペースは管理者専用です。",
       "unread_messages": "以下の未読メッセージ",
       "unsaved_changes": "ピン留めアプリに救われていない変更があります。それらをqdnに保存します。",
-      "updating": "更新"
+      "updating": "更新",
+      "wait": "お待ちください"
     },
     "message": "メッセージ",
     "promotion_text": "プロモーションテキスト",
@@ -393,4 +395,4 @@
   },
   "website": "Webサイト",
   "welcome": "いらっしゃいませ"
-}
+}

src/i18n/locales/ru/core.json

@@ -116,7 +116,6 @@
   "apps_official": "официальные приложения",
   "attachment": "вложение",
   "balance": "баланс:",
-  "basic_tabs_example": "Основные вкладки",
   "category": "категория",
   "category_other": "категории",
   "chat": "чат",
@@ -220,6 +219,7 @@
       "benefits_qort": "Преимущества наличия qort",
       "building": "здание",
       "building_app": "строительство приложения",
+      "confirmed": "подтвержденный",
       "created_by": "created by {{ owner }}",
       "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
       "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
@@ -256,6 +256,7 @@
       "no_pinned_changes": "В настоящее время у вас нет никаких изменений в ваших приложениях",
       "no_results": "Нет результатов",
       "one_app_per_name": "ПРИМЕЧАНИЕ. В настоящее время только одно приложение и веб -сайт разрешены для имени.",
+      "ongoing_transactions": "текущие операции",
       "opened": "открыл",
       "overwrite_qdn": "перезаписать в QDN",
       "password_confirm": "Пожалуйста, подтвердите пароль",
@@ -281,7 +282,8 @@
       "space_for_admins": "Извините, это пространство только для администраторов.",
       "unread_messages": "Непрочитанные сообщения ниже",
       "unsaved_changes": "У вас есть неспасенные изменения в ваши приложения. Сохраните их в QDN.",
-      "updating": "обновление"
+      "updating": "обновление",
+      "wait": "пожалуйста, подождите"
     },
     "message": "сообщение",
     "promotion_text": "Текст продвижения",

src/i18n/locales/zh/core.json

@@ -116,7 +116,6 @@
   "apps_official": "官方应用程序",
   "attachment": "依恋",
   "balance": "平衡：",
-  "basic_tabs_example": "基本标签示例",
   "category": "类别",
   "category_other": "类别",
   "chat": "聊天",
@@ -220,9 +219,10 @@
       "benefits_qort": "Qort的好处",
       "building": "建筑",
       "building_app": "建筑应用",
-      "created_by": "created by {{ owner }}",
+      "confirmed": "已确认",
-      "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
+      "created_by": "创建人 {{ owner }}",
-      "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
+      "buy_order_request": "应用程序<br/><italic>{{hostname}}</italic><br/><span>正在请求{{count}}购买订单</span>",
+      "buy_order_request_other": "应用程序<br/><italic>{{hostname}}</italic><br/><span>正在请求{{count}}购买订单</span>",
       "devmode_local_node": "请使用您的本地节点进行开发模式！注销并使用本地节点。",
       "downloading": "下载",
       "downloading_decrypting_app": "下载和解密私人应用程序。",
@@ -256,6 +256,7 @@
       "no_pinned_changes": "您目前对固定应用程序没有任何更改",
       "no_results": "没有结果",
       "one_app_per_name": "注意：目前，每个名称只允许一个应用程序和网站。",
+      "ongoing_transactions": "正在进行的交易",
       "opened": "打开",
       "overwrite_qdn": "覆盖为QDN",
       "password_confirm": "请确认密码",
@@ -281,7 +282,8 @@
       "space_for_admins": "抱歉，这个空间仅适用于管理员。",
       "unread_messages": "下面未读消息",
       "unsaved_changes": "您对固定应用程序有未保存的更改。将它们保存到QDN。",
-      "updating": "更新"
+      "updating": "更新",
+      "wait": "请稍等"
     },
     "message": "信息",
     "promotion_text": "促销文本",
@@ -393,4 +395,4 @@
   },
   "website": "网站",
   "welcome": "欢迎"
-}
+}

src/qortal/get.ts

@@ -2463,7 +2463,6 @@ export const saveFile = async (data, sender, isFromExtension, snackMethods) => {
     const filename = data.filename;
     const blob = data.blob;
 
-    const mimeType = blob.type || data.mimeType;
     const resPermission = await getUserPermission(
       {
         text1: i18n.t('question:download_file', {
@@ -2474,17 +2473,6 @@ export const saveFile = async (data, sender, isFromExtension, snackMethods) => {
       isFromExtension
     );
     const { accepted } = resPermission;
-    if (!accepted) throw new Error('User declined to save file'); // TODO translate
-    showSaveFilePicker(
-      {
-        filename,
-        mimeType,
-        blob,
-      },
-      snackMethods
-    );
-
-    return true;
 
     if (accepted) {
       const mimeType = blob.type || data.mimeType;

src/styles/theme-dark.ts

@@ -16,7 +16,7 @@ export const darkThemeOptions: ThemeOptions = {
     background: {
       default: 'rgb(49, 51, 56)',
       surface: 'rgb(58, 60, 65)',
-      paper: 'rgb(62, 64, 68)',
+      paper: 'rgb(77, 80, 85)',
     },
     text: {
       primary: 'rgb(255, 255, 255)',