Change network confirmation

src/view/components/ConfirmationDialog/index.tsx

@@ -4,34 +4,52 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
-  Button
+  Button,
+  Typography,
+  Box
 } from '@mui/material'
+import { title } from 'process'
+
+const style = {
+  backgroundColor: 'background.paper'
+}
 
 interface ConfirmationDialogProps {
   open: boolean
   onClose: () => void
   onConfirm: () => void
   message?: string
+  title?: string
 }
 
-const TEXT_CONFIRM = 'Be sure you want to perform this action?'
+const TITLE_CONFIRM = 'Confirm to continue'
+const TEXT_CONFIRM = 'Are you sure you want to continue?'
 
 function ConfirmationDialog({
   open,
   onClose,
   onConfirm,
-  message = TEXT_CONFIRM
+  message = TEXT_CONFIRM,
+  title = TITLE_CONFIRM
 }: ConfirmationDialogProps) {
   return (
     <Dialog open={open} onClose={onClose}>
-      <DialogTitle>Confirm Action</DialogTitle>
-      <DialogContent>
-        <p>{message}</p>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose}>Cancel</Button>
-        <Button onClick={onConfirm}>Confirm</Button>
-      </DialogActions>
+      <Box sx={style}>
+        <DialogTitle>
+          <Typography variant="h5" color="white">
+            {title}
+          </Typography>
+        </DialogTitle>
+        <DialogContent>
+          <Typography variant="body1" color="white">
+            {message}
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose}>Cancel</Button>
+          <Button onClick={onConfirm}>Confirm</Button>
+        </DialogActions>
+      </Box>
     </Dialog>
   )
 }

src/view/components/WalletConnectButton/NetworkSelect.tsx

@@ -112,9 +112,10 @@ export function NetworkSelect({
       <ConfirmationDialog
         open={isOpen}
         onClose={closeModal}
+        title="Change Network confirmation"
+        message="Are you sure you want to change the network?"
         onConfirm={() => {
           closeModal()
-          router.replace(ROUTES.HOME)
           onChange(newChainId)
         }}
       />