Use MUI dialog component for tx error

src/components/TxErrorDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Dialog, Portal, Text } from 'react-native-paper';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography } from '@mui/material';
 
 const TxErrorDialog = ({
   error,
@@ -11,17 +11,15 @@ const TxErrorDialog = ({
   hideDialog: () => void;
 }) => {
   return (
-    <Portal>
-      <Dialog visible={visible} onDismiss={hideDialog}>
-        <Dialog.Title>Transaction Error</Dialog.Title>
-        <Dialog.Content>
-          <Text variant="bodyMedium">{error}</Text>
-        </Dialog.Content>
-        <Dialog.Actions>
-          <Button onPress={hideDialog}>OK</Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
+    <Dialog open={visible} onClose={hideDialog}>
+      <DialogTitle>Transaction Error</DialogTitle>
+      <DialogContent>
+        <Typography variant="body1">{error}</Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={hideDialog}>OK</Button>
+      </DialogActions>
+    </Dialog>
   );
 };
 

src/styles/stylesheet.js

@@ -143,6 +143,7 @@ const styles = StyleSheet.create({
   buttonContainer: {
     flexDirection: 'row',
     marginLeft: 20,
+    marginTop: 10,
     marginBottom: 10,
     justifyContent: 'space-evenly',
   },