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,7 +1803,8 @@ export const Group = ({
                             postProcess: 'capitalizeFirstChar',
                           })
                     }
-                    primaryTypographyProps={{
+                    slotProps={{
+                      primary: {
                         style: {
                           color:
                             direct?.address === selectedDirect?.address &&
@@ -1812,14 +1813,15 @@ export const Group = ({
                           overflow: 'hidden',
                           fontSize: '16px',
                         },
-                    }} // Change the color of the primary text
+                      },
-                    secondaryTypographyProps={{
+                      secondary: {
                         style: {
                           color:
                             direct?.address === selectedDirect?.address &&
                             theme.palette.text.primary,
                           fontSize: '12px',
                         },
+                      },
                     }}
                     sx={{
                       width: '150px',
@@ -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,21 +294,23 @@ const GroupItem = React.memo(
                   ? 'no messages'
                   : `last message: ${formatEmailDate(group?.timestamp)}`
               }
-              primaryTypographyProps={{
+              slotProps={{
+                primary: {
                   style: {
                     color:
                       group?.groupId === selectedGroup?.groupId &&
                       theme.palette.text.primary,
                     fontSize: '16px',
                   },
-              }}
+                },
-              secondaryTypographyProps={{
+                secondary: {
                   style: {
                     color:
                       group?.groupId === selectedGroup?.groupId &&
                       theme.palette.text.primary,
                     fontSize: '12px',
                   },
+                },
               }}
               sx={{
                 width: '150px',

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,12 +30,6 @@ const LanguageSelector = () => {
   return (
     <Box ref={selectorRef}>
       {!showSelect && (
-        <Tooltip
-          key={currentLang}
-          title={t('core:action.change_language', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        >
         <Button
           onClick={() => setShowSelect(true)}
           style={{
@@ -48,7 +42,6 @@ const LanguageSelector = () => {
         >
           {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,12 +560,148 @@ 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>
 
+      <Box
+        sx={{
+          bgcolor: theme.palette.background.default,
+          color: theme.palette.text.primary,
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 1,
+          overflowY: 'auto',
+        }}
+      >
+        <Box
+          sx={{ borderBottom: 1, borderColor: theme.palette.text.secondary }}
+        >
+          <Tabs
+            value={valueMintingTab}
+            onChange={handleChange}
+            variant={'fullWidth'}
+            scrollButtons="auto"
+            allowScrollButtonsMobile
+            sx={{
+              '&.MuiTabs-indicator': {
+                backgroundColor: theme.palette.background.default,
+              },
+            }}
+          >
+            <Tab
+              label="Minting Details" // TODO translate
+              sx={{
+                '&.Mui-selected': {
+                  color: theme.palette.text.primary,
+                },
+                fontSize: '1rem',
+              }}
+              {...a11yProps(0)}
+            />
+            <Tab
+              label="Minting Actions"
+              sx={{
+                '&.Mui-selected': {
+                  color: theme.palette.text.primary,
+                },
+                fontSize: '1rem',
+              }}
+              {...a11yProps(1)}
+            />
+          </Tabs>
+        </Box>
+
+        {valueMintingTab === 0 && (
+          <>
+            <DialogContent
+              sx={{
+                position: 'relative',
+              }}
+            >
+              <Container maxWidth="md" sx={{ py: 4 }}>
+                <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
+                  <Typography variant="h6" gutterBottom>
+                    Blockchain Statistics
+                  </Typography>
+
+                  <Grid container spacing={2}>
+                    <StatCard
+                      label="Avg. Qortal Blocktime"
+                      value="72.84 Seconds"
+                    />
+                    <StatCard
+                      label="Avg. Blocks Per Day"
+                      value="1186.16 Blocks"
+                    />
+                    <StatCard
+                      label="Avg. Created QORT Per Day"
+                      value="3558.48 QORT"
+                    />
+                  </Grid>
+                </Paper>
+
+                <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
+                  <Typography variant="h6" gutterBottom>
+                    Minting Account Details
+                  </Typography>
+
+                  <Grid container spacing={2}>
+                    <StatCard label="Current Status" value="(Minting)" />
+                    <StatCard label="Current Level" value="Level 4" />
+                    <StatCard
+                      label="Blocks To Next Level"
+                      value="139467 Blocks"
+                    />
+                  </Grid>
+
+                  <Box mt={2} textAlign="center">
+                    <Typography>
+                      With a 24/7 Minting you will reach level 5 in{' '}
+                      <strong>117.58 days</strong>!
+                    </Typography>
+                  </Box>
+                </Paper>
+
+                <Paper elevation={3} sx={{ p: 3, borderRadius: '10px' }}>
+                  <Typography variant="h6" gutterBottom>
+                    Minting Rewards Info
+                  </Typography>
+
+                  <Grid container spacing={2}>
+                    <StatCard
+                      label="Current Tier"
+                      value="Tier 2 (Level 3 + 4)"
+                    />
+                    <StatCard
+                      label="Total Minters in The Tier"
+                      value="77 Minters"
+                    />
+                    <StatCard label="Tier Share Per Block" value="13%" />
+                    <StatCard
+                      label="Est. Reward Per Block"
+                      value="0.00506494 QORT"
+                    />
+                    <StatCard
+                      label="Est. Reward Per Day"
+                      value="6.00782338 QORT"
+                    />
+                    {/* <StatCard label="AdminInfo" value={adminInfo} /> */}
+                  </Grid>
+                </Paper>
+              </Container>
+            </DialogContent>
+          </>
+        )}
+
+        {valueMintingTab === 1 && (
+          <>
             <DialogContent
               sx={{
                 position: 'relative',
@@ -624,6 +730,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
                   />
                 </Box>
               )}
+
               <Card
                 sx={{
                   backgroundColor: theme.palette.background.default,
@@ -789,9 +896,12 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
 
                 {mintingAccounts?.length > 1 && (
                   <Typography>
-              {t('group:message.generic.minting_keys_per_node_different', {
+                    {t(
+                      'group:message.generic.minting_keys_per_node_different',
+                      {
                         postProcess: 'capitalizeFirstChar',
-              })}
+                      }
+                    )}
                   </Typography>
                 )}
               </Card>
@@ -871,10 +981,16 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
                       textAlign: 'center',
                       color: theme.palette.text.primary,
                       fontWeight: 'bold',
-                opacity: 1, // TODO translate
+                      opacity: 1,
                     }}
                   >
-              {isShowNext ? 'Confirmed' : 'Please Wait'}
+                    {isShowNext
+                      ? t('core:message.generic.confirmed', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                      : t('core:message.generic.wait', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
                   </DialogTitle>
 
                   <DialogContent>
@@ -885,6 +1001,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
                         })}
                       </Typography>
                     )}
+
                     {isShowNext && (
                       <Typography>
                         {t('group:message.success.rewardshare_confirmed', {
@@ -901,12 +1018,17 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
                       onClick={onOk}
                       autoFocus
                     >
-                {t('core:page.next', { postProcess: 'capitalizeFirstChar' })}
+                      {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
-        title={
-          themeMode === 'dark'
-            ? t('core:theme.light_mode', {
-                postProcess: 'capitalizeFirstChar',
-              })
-            : t('core:theme.dark_mode', {
-                postProcess: 'capitalizeFirstChar',
-              })
-        }
-      >
       <IconButton
         onClick={toggleTheme}
         sx={{
-            color: theme.palette.text.secondary,
+          bgcolor: theme.palette.background.default,
+          color: theme.palette.text.primary,
         }}
       >
         {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,6 +162,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
 
   return (
     <DrawerUserLookup open={isOpenDrawerLookup} setOpen={setIsOpenDrawerLookup}>
+      <ClickAwayListener onClickAway={onClose}>
         <Box
           sx={{
             display: 'flex',
@@ -173,7 +176,6 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
             sx={{
               alignItems: 'center',
               display: 'flex',
-            flexShrink: 0,
               gap: '5px',
             }}
           >
@@ -197,7 +199,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
                 postProcess: 'capitalizeFirstChar',
               })}
               options={options}
-            sx={{ width: 300 }}
+              sx={{ flexGrow: 1 }}
               renderInput={(params) => (
                 <TextField
                   autoFocus
@@ -214,21 +216,6 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
                 />
               )}
             />
-
-          <ButtonBase
-            sx={{
-              marginLeft: 'auto',
-            }}
-            onClick={() => {
-              onClose();
-            }}
-          >
-            <CloseFullscreenIcon
-              sx={{
-                color: theme.palette.text.primary,
-              }}
-            />
-          </ButtonBase>
           </Box>
 
           <Box
@@ -521,7 +508,9 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
                   <TableHead>
                     <TableRow>
                       <TableCell>
-                      {t('core:sender', { postProcess: 'capitalizeFirstChar' })}
+                        {t('core:sender', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
                       </TableCell>
                       <TableCell>
                         {t('core:receiver', {
@@ -529,7 +518,9 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
                         })}
                       </TableCell>
                       <TableCell>
-                      {t('core:amount', { postProcess: 'capitalizeFirstChar' })}
+                        {t('core:amount', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
                       </TableCell>
                       <TableCell>
                         {t('core:time.time', {
@@ -622,7 +613,9 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
                           >
                             <ButtonBase
                               onClick={() => {
-                              navigator.clipboard.writeText(payment?.recipient);
+                                navigator.clipboard.writeText(
+                                  payment?.recipient
+                                );
                               }}
                             >
                               {formatAddress(payment?.recipient)}
@@ -643,6 +636,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
             )}
           </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",

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

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": "プロモーションテキスト",

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": "促销文本",

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)',