fix ui problems, added terms

client/src/components/Grids/OngoingTrades.tsx

@@ -13,6 +13,11 @@ export const OngoingTrades = () => {
     const { onGoingTrades } = useContext(gameContext);
 
 
+    const defaultColDef = {
+        resizable: true, // Make columns resizable by default
+        sortable: true, // Make columns sortable by default
+        suppressMovable: true, // Prevent columns from being movable
+      };
 
     const columnDefs: ColDef[] = [
         {
@@ -67,6 +72,7 @@ export const OngoingTrades = () => {
         <div className="ag-theme-alpine-dark" style={{ height: 225, width: '100%' }}>
             <AgGridReact
                 columnDefs={columnDefs}
+                defaultColDef={defaultColDef}
                 rowData={onGoingTrades}
                 // onRowClicked={onRowClicked}
                 rowSelection="single"

client/src/components/Grids/TradeOffers.tsx

@@ -55,6 +55,11 @@ export const TradeOffers: React.FC<any> = ({ltcBalance}:any) => {
     );
   };
  
+  const defaultColDef = {
+    resizable: true, // Make columns resizable by default
+    sortable: true, // Make columns sortable by default
+    suppressMovable: true, // Prevent columns from being movable
+  };
 
   const columnDefs: ColDef[] = [
     { 
@@ -75,7 +80,7 @@ export const TradeOffers: React.FC<any> = ({ltcBalance}:any) => {
     minWidth: 150, // Ensure it doesn't shrink too much
     resizable: true },
     { headerName: "Seller", field: "qortalCreator", flex: 1, // Flex makes this column responsive
-    minWidth: 100, // Ensure it doesn't shrink too much
+    minWidth: 300, // Ensure it doesn't shrink too much
     resizable: true },
   ];
 
@@ -301,7 +306,7 @@ export const TradeOffers: React.FC<any> = ({ltcBalance}:any) => {
         setOpen(true)
         setInfo({
           type: 'error',
-          message: "You don't have enough QORT or your balance was not retrieved"
+          message: "You don't have enough LTC or your balance was not retrieved"
         })
         return
       }
@@ -435,6 +440,7 @@ const handleClose = (
       <AgGridReact
         ref={gridRef}
         columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
         rowData={offersWithoutOngoing}
         onRowClicked={onRowClicked}
         onSelectionChanged={onSelectionChanged}
@@ -462,7 +468,7 @@ const handleClose = (
       alignItems: 'center',
       position: 'fixed',
       bottom: '0px',
-      height: '80px',
+      height: '100px',
       padding: '7px',
       background: '#181d1f',
 
@@ -477,13 +483,29 @@ const handleClose = (
           fontSize: '16px',
           color: 'white',
           width: 'calc(100% - 75px)'
-        }}>{selectedTotalQORT.toFixed(3)} QORT</Typography> <Typography sx={{
+        }}>{selectedTotalQORT?.toFixed(3)} QORT</Typography> 
+        <Box sx={{
+        display: 'flex',
+        gap: '20px',
+        alignItems: 'center',
+        width: 'calc(100% - 75px)'
+      }}>
+         <Typography sx={{
           fontSize: '16px',
-          color: 'white',
-          width: 'calc(100% - 75px)'
-        }}><span>{selectedTotalLTC.toFixed(4)}</span> <span style={{
+          color: selectedTotalLTC > ltcBalance ? 'red' : 'white',
+        }}><span>{selectedTotalLTC?.toFixed(4)}</span> <span style={{
           marginLeft: 'auto'
         }}>LTC</span></Typography>
+
+
+        </Box>
+        <Typography sx={{
+          fontSize: '16px',
+          color: 'white',
+          
+        }}><span>{ltcBalance?.toFixed(4)}</span> <span style={{
+          marginLeft: 'auto'
+        }}>LTC balance</span></Typography>
       </Box>
       {BuyButton()}
     </Box>

client/src/components/Terms.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
+
+const BootstrapDialog = styled(Dialog)(({ theme }) => ({
+  '& .MuiDialogContent-root': {
+    padding: theme.spacing(2),
+  },
+  '& .MuiDialogActions-root': {
+    padding: theme.spacing(1),
+  },
+}));
+
+export const Terms =() => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="outlined" onClick={handleClickOpen}>
+        Terms and conditions
+      </Button>
+      <BootstrapDialog
+        onClose={handleClose}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+      >
+        <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
+          Terms and Conditions
+        </DialogTitle>
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={(theme) => ({
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: theme.palette.grey[500],
+          })}
+        >
+          <CloseIcon />
+        </IconButton>
+        <DialogContent dividers>
+        <Typography gutterBottom>
+  The purpose of qort.trade is to make trading LTC for QORT as easy as possible. The maintainers of this site do not profit from its use—there are no additional fees for buying QORT through this site. There are two ways to place a buy order: 
+  1. Use the gateway 
+  2. Use your local node. 
+  By using qort.trade, you agree to the following terms and conditions.
+</Typography>
+
+<Typography gutterBottom>
+  Using the gateway means you trust the maintainer of the node, as your LTC private key will need to be handled by that node to execute a trade order. If you have more than 4 QORT and your public key is already on the blockchain, your LTC private key will be transmitted using q-chat. If not, the message will be encrypted in the same manner as q-chat but stored temporarily in a database to ensure it reaches its destination.
+</Typography>
+
+<Typography gutterBottom>
+  If you are uncomfortable using the gateway, we offer the option to use your local node to buy QORT. When logging into the extension, choose the local node configuration, and use the switch button on qort.trade to connect with your local node.
+</Typography>
+
+<Typography gutterBottom>
+  The maintainers of this site are not responsible for any lost LTC, QORT, or other cryptocurrencies that may result from using this site. This is a hobby project, and mistakes in the code may occur. Please proceed with caution.
+</Typography>
+
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose}>
+            Close
+          </Button>
+        </DialogActions>
+      </BootstrapDialog>
+    </React.Fragment>
+  );
+}

client/src/components/common/reusable-modal/ReusableModal-styles.tsx

@@ -12,6 +12,7 @@ export const ReusableModalContainer = styled(Box)(({ theme }) => ({
   transform: "translate(-50%, -50%)",
   width: "629px",
   minHeight: "446px",
+  maxWidth: '90vw',
   height: "auto",
   borderRadius: "20px",
   border: "20px solid #3F3F3F",

client/src/components/header/Header.tsx

@@ -24,6 +24,7 @@ import logoSVG from '../../assets/SVG/LOGO.svg'
 import { Alert, Avatar, FormControlLabel, Snackbar, SnackbarCloseReason, Switch, styled } from "@mui/material";
 import { getMainEndpoint, setMainEndpoint } from "../../utils/findUsableApi";
 import { sendRequestToExtension } from "../../App";
+import { Terms } from "../Terms";
 
 const checkIfLocal = async () => {
   try {
@@ -196,7 +197,7 @@ export const Header = ({qortBalance, ltcBalance}: any) => {
         onChange={handleChange}  />}
         label="Use Local Node for trades"
       />
-
+  <Terms />
 <Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} open={open} autoHideDuration={6000} onClose={handleClose}>
         <Alert
                 

server/api/transaction.js

@@ -128,7 +128,7 @@ router.get('/buyorders/recent', async (req, res) => {
       res.json([])
       return
     }
-    const thirtyMinutesAgo = new Date(Date.now() - 30 * 60 * 1000);
+    const thirtyMinutesAgo = new Date(Date.now() - 60 * 60 * 1000);
     const recentBuyOrders = await BuyOrder.find({
       createdAt: { $gte: thirtyMinutesAgo }
     });