Use Box instead of div

src/App.tsx

@@ -143,7 +143,6 @@ import { CopyIcon } from './assets/Icons/CopyIcon.tsx';
 import { SuccessIcon } from './assets/Icons/SuccessIcon.tsx';
 import { useAtom, useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
-import MintingDetailsPage from './components/Minting/Minting-new.tsx';
 
 type extStates =
   | 'authenticated'
@@ -3978,13 +3977,11 @@ function App() {
       )}
 
       {isOpenMinting && (
-        // <Minting
-        //   setIsOpenMinting={setIsOpenMinting}
-        //   myAddress={address}
-        //   show={show}
-        // />
-
-        <MintingDetailsPage />
+        <Minting
+          setIsOpenMinting={setIsOpenMinting}
+          myAddress={address}
+          show={show}
+        />
       )}
 
       {!isAuthenticated && (

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,7 +215,7 @@ export const ChatList = ({
           width: '100%',
         }}
       >
-        <div
+        <Box
           ref={parentRef}
           className="List"
           style={{
@@ -226,13 +226,13 @@ export const ChatList = ({
             position: 'relative',
           }}
         >
-          <div
+          <Box
             style={{
               height: rowVirtualizer.getTotalSize(),
               width: '100%',
             }}
           >
-            <div
+            <Box
               style={{
                 left: 0,
                 position: 'absolute',
@@ -325,7 +325,7 @@ export const ChatList = ({
                 // Render fallback if message is null
                 if (!message) {
                   return (
-                    <div
+                    <Box
                       key={virtualRow.index}
                       style={{
                         alignItems: 'center',
@@ -345,12 +345,12 @@ 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}
@@ -395,12 +395,12 @@ export const ChatList = ({
                         scrollToItem={goToMessage}
                       />
                     </ErrorBoundary>
-                  </div>
+                  </Box>
                 );
               })}
-            </div>
-          </div>
-        </div>
+            </Box>
+          </Box>
+        </Box>
 
         {showScrollButton && (
           <Button
@@ -449,7 +449,7 @@ export const ChatList = ({
             })}
           </Button>
         )}
-      </div>
+      </Box>
 
       {enableMentions && (hasSecretKey || isPrivate === false) && (
         <ChatOptions

src/components/Group/GroupList.tsx

@@ -145,7 +145,7 @@ export const GroupList = ({
         </ButtonBase>
       </Box>
 
-      <div
+      <Box
         style={{
           alignItems: 'flex-start',
           display: 'flex',
@@ -176,7 +176,7 @@ export const GroupList = ({
             />
           ))}
         </List>
-      </div>
+      </Box>
 
       <Box
         sx={{