From c1a09d20242c86bc825f80bb3d4feb15d65cd00c Mon Sep 17 00:00:00 2001 From: PhilReact Date: Mon, 23 Sep 2024 16:54:02 +0300 Subject: [PATCH] fix ui problems, added terms --- client/src/components/Grids/OngoingTrades.tsx | 6 ++ client/src/components/Grids/TradeOffers.tsx | 36 ++++++-- client/src/components/Terms.tsx | 85 +++++++++++++++++++ .../reusable-modal/ReusableModal-styles.tsx | 1 + client/src/components/header/Header.tsx | 3 +- server/api/transaction.js | 2 +- 6 files changed, 124 insertions(+), 9 deletions(-) create mode 100644 client/src/components/Terms.tsx diff --git a/client/src/components/Grids/OngoingTrades.tsx b/client/src/components/Grids/OngoingTrades.tsx index e9f408d..5a62d42 100644 --- a/client/src/components/Grids/OngoingTrades.tsx +++ b/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 = () => {
= ({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 = ({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 = ({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 = ( {selectedTotalQORT.toFixed(3)} QORT {selectedTotalQORT?.toFixed(3)} QORT + + {selectedTotalLTC.toFixed(4)} ltcBalance ? 'red' : 'white', + }}>{selectedTotalLTC?.toFixed(4)} LTC + + + + {ltcBalance?.toFixed(4)} LTC balance {BuyButton()} diff --git a/client/src/components/Terms.tsx b/client/src/components/Terms.tsx new file mode 100644 index 0000000..4fa22b2 --- /dev/null +++ b/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 ( + + + + + Terms and Conditions + + ({ + position: 'absolute', + right: 8, + top: 8, + color: theme.palette.grey[500], + })} + > + + + + + 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. + + + + 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. + + + + 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. + + + + 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. + + + + + + + + + ); +} diff --git a/client/src/components/common/reusable-modal/ReusableModal-styles.tsx b/client/src/components/common/reusable-modal/ReusableModal-styles.tsx index cba250f..c9358b4 100644 --- a/client/src/components/common/reusable-modal/ReusableModal-styles.tsx +++ b/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", diff --git a/client/src/components/header/Header.tsx b/client/src/components/header/Header.tsx index de5ddb7..e924cc8 100644 --- a/client/src/components/header/Header.tsx +++ b/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" /> - + { 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 } });