diff --git a/src/components/Grids/Table-styles.tsx b/src/components/Grids/Table-styles.tsx index 82ace53..d7dd8ac 100644 --- a/src/components/Grids/Table-styles.tsx +++ b/src/components/Grids/Table-styles.tsx @@ -1,5 +1,12 @@ import { Box, styled } from "@mui/system"; -import { Typography } from "@mui/material"; +import { Button, Typography } from "@mui/material"; + +export const MainContainer = styled(Box)({ + display: "flex", + flexDirection: "column", + width: "100%", + height: "100%", +}); export const TextTableTitle = styled(Typography)(({ theme }) => ({ fontFamily: "Inter", @@ -11,14 +18,39 @@ export const TextTableTitle = styled(Typography)(({ theme }) => ({ })); export const BuyContainer = styled(Box)({ - width: "calc(100% - 60px)", + position: "fixed", + width: "calc(100% - 14px)", display: "flex", justifyContent: "space-between", alignItems: "center", - position: "fixed", bottom: "0px", height: "100px", - padding: "7px 14px", + padding: "18px 14px 12px 14px", background: "#323336", - zIndex: 3 + zIndex: 3, }); + +export const BuyContainerDivider = styled(Box)({ + position: "absolute", + width: "60%", + height: "1px", + background: "lightgray", + top: "10px", + left: "50%", + transform: "translateX(-50%)", +}); + +export const BuyOrderBtn = styled("button")(({ theme }) => ({ + borderRadius: "8px", + width: "74px", + height: "30px", + background: "#4D7345", + color: "white", + cursor: "pointer", + border: "1px solid #375232", + boxShadow: "0px 2.77px 2.21px 0px #00000005", + marginRight: "10px", + [theme.breakpoints.down("sm")]: { + marginRight: "5px", + } +})); diff --git a/src/components/Grids/TradeOffers.tsx b/src/components/Grids/TradeOffers.tsx index b353bb7..93d2a09 100644 --- a/src/components/Grids/TradeOffers.tsx +++ b/src/components/Grids/TradeOffers.tsx @@ -15,8 +15,6 @@ import { } from "ag-grid-community"; import "ag-grid-community/styles/ag-grid.css"; import "ag-grid-community/styles/ag-theme-alpine.css"; -import axios from "axios"; -import { sendRequestToExtension } from "../../App"; import { Alert, Box, @@ -39,9 +37,15 @@ import { Hourglass } from "react-loader-spinner"; import ErrorIcon from "@mui/icons-material/Error"; import CheckCircleIcon from "@mui/icons-material/CheckCircle"; import { CountdownCircleTimer } from "react-countdown-circle-timer"; -import { BuyContainer } from "./Table-styles"; +import { + BuyContainer, + BuyContainerDivider, + BuyOrderBtn, + ContentArea, + MainContainer, +} from "./Table-styles"; -export const baseLocalHost = window.location.host +export const baseLocalHost = window.location.host; // export const baseLocalHost = "127.0.0.1:12391"; interface RowData { @@ -110,23 +114,7 @@ export const TradeOffers: React.FC = ({ foreignCoinBalance }: any) => { const [open, setOpen] = useState(false); const [info, setInfo] = useState(null); const BuyButton = () => { - return ( - - ); + return BUY; }; const defaultColDef = { @@ -499,13 +487,13 @@ export const TradeOffers: React.FC = ({ foreignCoinBalance }: any) => { const buyOrder = async () => { try { - if(+foreignCoinBalance < +selectedTotalLTC.toFixed(4)){ - setOpen(true) + if (+foreignCoinBalance < +selectedTotalLTC.toFixed(4)) { + setOpen(true); setInfo({ - type: 'error', - message: `You don't have enough ${getCoinLabel()} or your balance was not retrieved` - }) - return + type: "error", + message: `You don't have enough ${getCoinLabel()} or your balance was not retrieved`, + }); + return; } if (selectedOffers?.length < 1) return; @@ -653,11 +641,7 @@ export const TradeOffers: React.FC = ({ foreignCoinBalance }: any) => { }; return ( - +
= ({ foreignCoinBalance }: any) => { )} */} -
-
- - - {selectedTotalQORT?.toFixed(3)} QORT - - foreignCoinBalance ? 'red' : 'white', - }}>{selectedTotalLTC?.toFixed(4)} {`${getCoinLabel()} `} - - +
+
+ + + + + {selectedTotalQORT?.toFixed(3)} QORT + + + foreignCoinBalance ? "red" : "white", + }} + > + {selectedTotalLTC?.toFixed(4)}{" "} + {`${getCoinLabel()} `} + + + + {foreignCoinBalance?.toFixed(4)}{" "} + + {`${getCoinLabel()} `} balance + + - {foreignCoinBalance?.toFixed(4)} {`${getCoinLabel()} `} balance - - {BuyButton()} - - + {BuyButton()} + + = ({ foreignCoinBalance }: any) => { - You can see the progress of your - order in the "Pending" table. + You can see the progress of your order in the "Pending" table. @@ -859,29 +870,34 @@ export const TradeOffers: React.FC = ({ foreignCoinBalance }: any) => { {isUsingGateway && ( <> - - Using gateway: might take up to 3 minutes to submit the buy order. - - - - { - //nothing - }} - size={60} - strokeWidth={4} - > - {({ remainingTime }) => {remainingTime}} - - + + Using gateway: might take up to 3 minutes to submit the + buy order. + + + + { + //nothing + }} + size={60} + strokeWidth={4} + > + {({ remainingTime }) => ( + {remainingTime} + )} + + )} @@ -905,6 +921,6 @@ export const TradeOffers: React.FC = ({ foreignCoinBalance }: any) => { )} - + ); }; diff --git a/src/components/sell/CreateSell.tsx b/src/components/sell/CreateSell.tsx index d4e6c7a..3c6e471 100644 --- a/src/components/sell/CreateSell.tsx +++ b/src/components/sell/CreateSell.tsx @@ -1,10 +1,24 @@ -import { Alert, Box, Button, DialogActions, DialogContent, DialogTitle, IconButton, InputLabel, Snackbar, SnackbarCloseReason, TextField, Typography, styled } from '@mui/material' -import React, { useContext } from 'react' -import { BootstrapDialog } from '../Terms' -import CloseIcon from '@mui/icons-material/Close'; -import { Spacer } from '../common/Spacer'; -import gameContext from '../../contexts/gameContext'; -import TradeBotList from './TradeBotList'; +import { + Alert, + Box, + Button, + DialogActions, + DialogContent, + DialogTitle, + IconButton, + InputLabel, + Snackbar, + SnackbarCloseReason, + TextField, + Typography, + styled, +} from "@mui/material"; +import React, { useContext } from "react"; +import { BootstrapDialog } from "../Terms"; +import CloseIcon from "@mui/icons-material/Close"; +import { Spacer } from "../common/Spacer"; +import gameContext from "../../contexts/gameContext"; +import TradeBotList from "./TradeBotList"; export const CustomLabel = styled(InputLabel)` font-weight: 400; @@ -12,13 +26,12 @@ export const CustomLabel = styled(InputLabel)` font-size: 10px; line-height: 12px; color: rgba(255, 255, 255, 0.5); - -` +`; export const minimumAmountSellTrades = { - 'LITECOIN': { + LITECOIN: { value: 0.01, - ticker: 'LTC' + ticker: "LTC", }, DOGECOIN: { value: 1, @@ -40,168 +53,186 @@ export const minimumAmountSellTrades = { value: 0.0002, ticker: "ARRR", }, -} +}; export const CustomInput = styled(TextField)({ - width: "183px", // Adjust the width as needed - borderRadius: "5px", - // backgroundColor: "rgba(30, 30, 32, 1)", + width: "183px", // Adjust the width as needed + borderRadius: "5px", + // backgroundColor: "rgba(30, 30, 32, 1)", + outline: "none", + input: { + fontSize: 10, + fontFamily: "Inter", + fontWeight: 400, + color: "white", + "&::placeholder": { + fontSize: 16, + color: "rgba(255, 255, 255, 0.2)", + }, outline: "none", - input: { - fontSize: 10, - fontFamily: "Inter", - fontWeight: 400, - color: "white", - "&::placeholder": { - fontSize: 16, - color: "rgba(255, 255, 255, 0.2)", - }, - outline: "none", - padding: "10px", + padding: "10px", + }, + "& .MuiOutlinedInput-root": { + "& fieldset": { + border: "0.5px solid rgba(255, 255, 255, 0.5)", }, - "& .MuiOutlinedInput-root": { - "& fieldset": { - border: '0.5px solid rgba(255, 255, 255, 0.5)', - }, - "&:hover fieldset": { - border: '0.5px solid rgba(255, 255, 255, 0.5)', - }, - "&.Mui-focused fieldset": { - border: '0.5px solid rgba(255, 255, 255, 0.5)', - }, + "&:hover fieldset": { + border: "0.5px solid rgba(255, 255, 255, 0.5)", }, - "& .MuiInput-underline:before": { - borderBottom: "none", + "&.Mui-focused fieldset": { + border: "0.5px solid rgba(255, 255, 255, 0.5)", }, - "& .MuiInput-underline:hover:not(.Mui-disabled):before": { - borderBottom: "none", - }, - "& .MuiInput-underline:after": { - borderBottom: "none", - }, - }); - + }, + "& .MuiInput-underline:before": { + borderBottom: "none", + }, + "& .MuiInput-underline:hover:not(.Mui-disabled):before": { + borderBottom: "none", + }, + "& .MuiInput-underline:after": { + borderBottom: "none", + }, +}); -export const CreateSell = ({qortAddress, show}) => { - const [open, setOpen] = React.useState(false); - const [qortAmount, setQortAmount] = React.useState(0) - const [foreignAmount, setForeignAmount] = React.useState(0) - const {updateTemporaryFailedTradeBots, sellOrders, fetchTemporarySellOrders, isUsingGateway, getCoinLabel, selectedCoin} = useContext(gameContext) - const [openAlert, setOpenAlert] = React.useState(false) - const [info, setInfo] = React.useState(null) - const handleClickOpen = () => { - setOpen(true); - }; - const handleClose = () => { - setOpen(false); - setForeignAmount(0) - setQortAmount(0) - }; +export const CreateSell = ({ qortAddress, show }) => { + const [open, setOpen] = React.useState(false); + const [qortAmount, setQortAmount] = React.useState(0); + const [foreignAmount, setForeignAmount] = React.useState(0); + const { + updateTemporaryFailedTradeBots, + sellOrders, + fetchTemporarySellOrders, + isUsingGateway, + getCoinLabel, + selectedCoin, + } = useContext(gameContext); + const [openAlert, setOpenAlert] = React.useState(false); + const [info, setInfo] = React.useState(null); + const handleClickOpen = () => { + setOpen(true); + }; + const handleClose = () => { + setOpen(false); + setForeignAmount(0); + setQortAmount(0); + }; - const createSellOrder = async() => { - try { - setInfo({ - type: 'info', - message: "Attempting to create sell order. Please wait..." - }) - const res = await qortalRequestWithTimeout({ - action: "CREATE_TRADE_SELL_ORDER", - qortAmount, - foreignBlockchain: selectedCoin, - foreignAmount: qortAmount * foreignAmount - }, 900000); - - if(res?.error && res?.failedTradeBot){ - await updateTemporaryFailedTradeBots({ - atAddress: res?.failedTradeBot?.atAddress, - status: 'FAILED', - qortAddress: res?.failedTradeBot?.creatorAddress, - - }) - fetchTemporarySellOrders() - setOpenAlert(true) - setInfo({ - type: 'error', - message: "Unable to create sell order. Please try again." - }) - } - if(!res?.error){ - setOpenAlert(true) - setForeignAmount(0) - setQortAmount(0) - setOpen(false) + const createSellOrder = async () => { + try { + setInfo({ + type: "info", + message: "Attempting to create sell order. Please wait...", + }); + const res = await qortalRequestWithTimeout( + { + action: "CREATE_TRADE_SELL_ORDER", + qortAmount, + foreignBlockchain: selectedCoin, + foreignAmount: qortAmount * foreignAmount, + }, + 900000 + ); - setInfo({ - type: 'success', - message: "Sell order created. Please wait a couple of minutes for the network to propogate the changes." - }) - } - } catch (error) { - if(error?.error && error?.failedTradeBot){ - await updateTemporaryFailedTradeBots({ - atAddress: error?.failedTradeBot?.atAddress, - status: 'FAILED', - qortAddress: error?.failedTradeBot?.creatorAddress, - - }) - fetchTemporarySellOrders() - setOpenAlert(true) - setInfo({ - type: 'error', - message: "Unable to create sell order. Please try again." - }) - } - } - } - - const handleCloseAlert = ( - event?: React.SyntheticEvent | Event, - reason?: SnackbarCloseReason, - ) => { - if (reason === 'clickaway') { - return; + if (res?.error && res?.failedTradeBot) { + await updateTemporaryFailedTradeBots({ + atAddress: res?.failedTradeBot?.atAddress, + status: "FAILED", + qortAddress: res?.failedTradeBot?.creatorAddress, + }); + fetchTemporarySellOrders(); + setOpenAlert(true); + setInfo({ + type: "error", + message: "Unable to create sell order. Please try again.", + }); } - - setOpenAlert(false); - setInfo(null) - }; - - if(isUsingGateway){ + if (!res?.error) { + setOpenAlert(true); + setForeignAmount(0); + setQortAmount(0); + setOpen(false); - return ( -
- - Managing your sell orders is not possible using a gateway node. Please switch to a local or custom node at the authentication page - -
- ) + setInfo({ + type: "success", + message: + "Sell order created. Please wait a couple of minutes for the network to propogate the changes.", + }); + } + } catch (error) { + if (error?.error && error?.failedTradeBot) { + await updateTemporaryFailedTradeBots({ + atAddress: error?.failedTradeBot?.atAddress, + status: "FAILED", + qortAddress: error?.failedTradeBot?.creatorAddress, + }); + fetchTemporarySellOrders(); + setOpenAlert(true); + setInfo({ + type: "error", + message: "Unable to create sell order. Please try again.", + }); + } } - return ( -
- - item.status === 'FAILED')} /> + }; - { + if (reason === "clickaway") { + return; + } + + setOpenAlert(false); + setInfo(null); + }; + + if (isUsingGateway) { + return ( +
+ + Managing your sell orders is not possible using a gateway node. Please + switch to a local or custom node at the authentication page + +
+ ); + } + return ( +
+ + item.status === "FAILED")} + /> + + @@ -211,7 +242,7 @@ export const CreateSell = ({qortAddress, show}) => { aria-label="close" onClick={handleClose} sx={(theme) => ({ - position: 'absolute', + position: "absolute", right: 8, top: 8, color: theme.palette.grey[500], @@ -220,8 +251,10 @@ export const CreateSell = ({qortAddress, show}) => { - - QORT amount + + + QORT amount + { autoComplete="off" /> - {`${qortAmount * foreignAmount} ${getCoinLabel()}`} for {qortAmount} QORT - Total sell amount needs to be greater than: {minimumAmountSellTrades[selectedCoin]?.value} {' '} {minimumAmountSellTrades[selectedCoin]?.ticker} + + {`${qortAmount * foreignAmount} ${getCoinLabel()}`} for{" "} + {qortAmount} QORT + + + Total sell amount needs to be greater than:{" "} + {minimumAmountSellTrades[selectedCoin]?.value}{" "} + {minimumAmountSellTrades[selectedCoin]?.ticker} + - - - + {info?.message}
- ) -} + ); +}; diff --git a/src/components/sell/TradeBotList.tsx b/src/components/sell/TradeBotList.tsx index c619787..20f6378 100644 --- a/src/components/sell/TradeBotList.tsx +++ b/src/components/sell/TradeBotList.tsx @@ -9,8 +9,15 @@ import React, { useState, } from "react"; import { autoSizeStrategy, baseLocalHost } from "../Grids/TradeOffers"; -import { Alert, Box, Snackbar, SnackbarCloseReason, Typography } from "@mui/material"; +import { + Alert, + Box, + Snackbar, + SnackbarCloseReason, + Typography, +} from "@mui/material"; import gameContext from "../../contexts/gameContext"; +import { BuyContainerDivider } from "../Grids/Table-styles"; const defaultColDef = { resizable: true, // Make columns resizable by default @@ -18,18 +25,22 @@ const defaultColDef = { suppressMovable: true, // Prevent columns from being movable }; - - export default function TradeBotList({ qortAddress, failedTradeBots }) { const [tradeBotList, setTradeBotList] = useState([]); const [selectedTrade, setSelectedTrade] = useState(null); - const tradeBotListRef = useRef([]) + const tradeBotListRef = useRef([]); const offeringTrades = useRef([]); const qortAddressRef = useRef(null); const gridRef = useRef(null); - const {updateTemporaryFailedTradeBots, fetchTemporarySellOrders, deleteTemporarySellOrder, getCoinLabel, selectedCoin} = useContext(gameContext) - const [open, setOpen] = useState(false) - const [info, setInfo] = useState(null) + const { + updateTemporaryFailedTradeBots, + fetchTemporarySellOrders, + deleteTemporarySellOrder, + getCoinLabel, + selectedCoin, + } = useContext(gameContext); + const [open, setOpen] = useState(false); + const [info, setInfo] = useState(null); const filteredOutTradeBotListWithoutFailed = useMemo(() => { const list = tradeBotList.filter( (item) => @@ -37,7 +48,7 @@ export default function TradeBotList({ qortAddress, failedTradeBots }) { (failedItem) => failedItem.atAddress === item.atAddress ) ); - return list + return list; }, [failedTradeBots, tradeBotList]); const onGridReady = useCallback((params: any) => { @@ -48,8 +59,7 @@ export default function TradeBotList({ qortAddress, failedTradeBots }) { params.columnApi.autoSizeColumns(allColumnIds); // Automatically adjust the width to fit content }, []); - - const columnDefs: ColDef[] = useMemo(()=> { + const columnDefs: ColDef[] = useMemo(() => { return [ { headerCheckboxSelection: false, // Adds a checkbox in the header for selecting all rows @@ -91,8 +101,7 @@ export default function TradeBotList({ qortAddress, failedTradeBots }) { resizable: true, }, ]; - - }, [selectedCoin]) + }, [selectedCoin]); useEffect(() => { if (qortAddress) { qortAddressRef.current = qortAddress; @@ -136,7 +145,7 @@ export default function TradeBotList({ qortAddress, failedTradeBots }) { const processTradeBots = (tradeBots) => { let sellTrades = [...tradeBotListRef.current]; // Start with the existing trades - + tradeBots.forEach((trade) => { const status = processTradeBotState(trade); @@ -145,7 +154,7 @@ export default function TradeBotList({ qortAddress, failedTradeBots }) { const existingIndex = sellTrades.findIndex( (existingTrade) => existingTrade.atAddress === trade.atAddress ); - + if (existingIndex > -1) { // Replace the existing trade if it exists sellTrades[existingIndex] = { ...trade, status }; @@ -159,23 +168,25 @@ export default function TradeBotList({ qortAddress, failedTradeBots }) { tradeBotListRef.current = sellTrades; }; - const restartTradeOffers = ()=> { + const restartTradeOffers = () => { if (socketRef.current) { - socketRef.current.close(1000, 'forced'); // Close with a custom reason - socketRef.current = null + socketRef.current.close(1000, "forced"); // Close with a custom reason + socketRef.current = null; } - offeringTrades.current = [] + offeringTrades.current = []; setTradeBotList([]); tradeBotListRef.current = []; - } + }; - const socketRef = useRef(null) + const socketRef = useRef(null); const initTradeOffersWebSocket = (restarted = false) => { let tradeOffersSocketCounter = 0; let socketTimeout: any; // let socketLink = `ws://127.0.0.1:12391/websockets/crosschain/tradebot?foreignBlockchain=LITECOIN`; - let socketLink = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${baseLocalHost}/websockets/crosschain/tradebot?foreignBlockchain=${selectedCoin}`; + let socketLink = `${ + window.location.protocol === "https:" ? "wss:" : "ws:" + }//${baseLocalHost}/websockets/crosschain/tradebot?foreignBlockchain=${selectedCoin}`; socketRef.current = new WebSocket(socketLink); socketRef.current.onopen = () => { setTimeout(pingSocket, 50); @@ -188,8 +199,8 @@ export default function TradeBotList({ qortAddress, failedTradeBots }) { }; socketRef.current.onclose = (event) => { clearTimeout(socketTimeout); - if (event.reason === 'forced') { - return + if (event.reason === "forced") { + return; } restartTradeOffersWebSocket(); }; @@ -203,94 +214,113 @@ export default function TradeBotList({ qortAddress, failedTradeBots }) { }; useEffect(() => { - if(!qortAddress) return - if(selectedCoin === null) return - restartTradeOffers() - - setTimeout(() => { - initTradeOffersWebSocket() + if (!qortAddress) return; + if (selectedCoin === null) return; + restartTradeOffers(); + setTimeout(() => { + initTradeOffersWebSocket(); }, 500); - return () => { - if(socketRef.current){ - socketRef.current.close(1000, 'forced'); + return () => { + if (socketRef.current) { + socketRef.current.close(1000, "forced"); } - } + }; }, [qortAddress, selectedCoin]); const onSelectionChanged = (event: any) => { const selectedRows = event.api.getSelectedRows(); - if(selectedRows[0]){ - setSelectedTrade(selectedRows[0]) + if (selectedRows[0]) { + setSelectedTrade(selectedRows[0]); } else { - setSelectedTrade(null) + setSelectedTrade(null); } }; const handleClose = ( event?: React.SyntheticEvent | Event, - reason?: SnackbarCloseReason, + reason?: SnackbarCloseReason ) => { - if (reason === 'clickaway') { + if (reason === "clickaway") { return; } - + setOpen(false); - setInfo(null) + setInfo(null); }; - - - const cancelSell = async ()=> { + const cancelSell = async () => { try { - if(!selectedTrade) return - setOpen(true) + if (!selectedTrade) return; + setOpen(true); - setInfo({ - type: 'info', - message: "Attempting to cancel sell order" - }) - const res = await qortalRequestWithTimeout({ - action: "CANCEL_TRADE_SELL_ORDER", - qortAmount: selectedTrade.qortAmount, - foreignBlockchain: selectedTrade.foreignBlockchain, - foreignAmount: selectedTrade.foreignAmount, - atAddress: selectedTrade.atAddress - }, 900000); - if(res?.signature){ - await deleteTemporarySellOrder(selectedTrade.atAddress) - - - setSelectedTrade(null) - setOpen(true) - setInfo({ - type: 'success', - message: "Sell order canceled. Please wait a couple of minutes for the network to propogate the changes" - }) - } - if(res?.error && res?.failedTradeBot){ - setOpen(true) - setInfo({ - type: 'error', - message: "Unable to cancel sell order. Please try again." - }) - } - } catch (error) { - if(error?.error && error?.failedTradeBot){ - setOpen(true) setInfo({ - type: 'error', - message: "Unable to cancel sell order. Please try again." - }) - } - } - } + type: "info", + message: "Attempting to cancel sell order", + }); + const res = await qortalRequestWithTimeout( + { + action: "CANCEL_TRADE_SELL_ORDER", + qortAmount: selectedTrade.qortAmount, + foreignBlockchain: selectedTrade.foreignBlockchain, + foreignAmount: selectedTrade.foreignAmount, + atAddress: selectedTrade.atAddress, + }, + 900000 + ); + if (res?.signature) { + await deleteTemporarySellOrder(selectedTrade.atAddress); + + setSelectedTrade(null); + setOpen(true); + setInfo({ + type: "success", + message: + "Sell order canceled. Please wait a couple of minutes for the network to propogate the changes", + }); + } + if (res?.error && res?.failedTradeBot) { + setOpen(true); + setInfo({ + type: "error", + message: "Unable to cancel sell order. Please try again.", + }); + } + } catch (error) { + if (error?.error && error?.failedTradeBot) { + setOpen(true); + setInfo({ + type: "error", + message: "Unable to cancel sell order. Please try again.", + }); + } + } + }; const CancelButton = () => { return ( - ); @@ -329,62 +359,73 @@ export default function TradeBotList({ qortAddress, failedTradeBots }) { )} */}
- - - {/* + + + + {/* {selectedTotalQORT?.toFixed(3)} QORT */} - - {/* + {/* foreignCoinBalance ? 'red' : 'white', }}>{selectedTotalLTC?.toFixed(4)} LTC */} - - - - {/* + {/* {foreignCoinBalance?.toFixed(4)} LTC balance */} + + {CancelButton()} - {CancelButton()} - - + {info?.message} diff --git a/src/pages/Home/Home-Styles.tsx b/src/pages/Home/Home-Styles.tsx index c48d1dc..77890c1 100644 --- a/src/pages/Home/Home-Styles.tsx +++ b/src/pages/Home/Home-Styles.tsx @@ -69,7 +69,6 @@ export const HomeWrapper = styled(Box)({ export const TabsContainer = styled(Box)({ display: "flex", flexDirection: "column", - gap: "15px", alignItems: "flex-start", width: "100%", justifyContent: "center", @@ -78,6 +77,7 @@ export const TabsContainer = styled(Box)({ export const TabsRow = styled(Box)({ display: "flex", flexDirection: "row", + gap: "5px", justifyContent: "space-evenly", alignItems: "center", backgroundColor: "#323336", diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 0396f54..763ae18 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -58,17 +58,17 @@ export const HomePage = () => { setMode("buy")}> Buy QORT - + {/* */} setMode("sell")}> Sell QORT - - */} + {/* setMode("history")} > Trade History - + */}