mirror of
https://github.com/Qortal/q-trade.git
synced 2025-06-20 13:11:21 +00:00
Initial UI changes
This commit is contained in:
Justin Ferrari
parent
bf186b797b
commit
842b109b0d
@ -2,13 +2,12 @@ import { Box } from "@mui/material";
|
||||
import { styled } from "@mui/system";
|
||||
|
||||
export const AppContainer = styled(Box)(({ theme }) => ({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
padding: "1em 0",
|
||||
paddingBottom: '50px'
|
||||
padding: "20px 30px 0 30px",
|
||||
backgroundColor: "#323336"
|
||||
}));
|
||||
|
||||
export const MainContainer = styled(Box)`
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { styled } from "@mui/system";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { Box, styled } from "@mui/system";
|
||||
import { Typography } from "@mui/material";
|
||||
|
||||
export const TextTableTitle = styled(Typography)(({ theme }) => ({
|
||||
fontFamily: "Inter",
|
||||
@ -9,3 +9,15 @@ export const TextTableTitle = styled(Typography)(({ theme }) => ({
|
||||
lineHeight: "40px",
|
||||
userSelect: "none",
|
||||
}));
|
||||
|
||||
export const BuyContainer = styled(Box)({
|
||||
width: "calc(100% - 60px)",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
bottom: "0px",
|
||||
height: "100px",
|
||||
padding: "7px 14px",
|
||||
background: "#323336",
|
||||
});
|
||||
|
||||
@ -10,6 +10,7 @@ import gameContext from '../../contexts/gameContext';
|
||||
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
|
||||
import { useModal } from '../common/useModal';
|
||||
import FileSaver from 'file-saver';
|
||||
import { BuyContainer } from './Table-styles';
|
||||
|
||||
export const baseLocalHost = window.location.host
|
||||
// export const baseLocalHost = '127.0.0.1:12391'
|
||||
@ -587,18 +588,7 @@ const handleClose = (
|
||||
<div style={{
|
||||
height: '120px'
|
||||
}} />
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
position: 'fixed',
|
||||
bottom: '0px',
|
||||
height: '100px',
|
||||
padding: '7px',
|
||||
background: '#181d1f',
|
||||
|
||||
}}>
|
||||
<BuyContainer>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '5px',
|
||||
@ -634,7 +624,7 @@ const handleClose = (
|
||||
}}>{`${getCoinLabel()} `} balance</span></Typography>
|
||||
</Box>
|
||||
{BuyButton()}
|
||||
</Box>
|
||||
</BuyContainer>
|
||||
<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} open={open} onClose={handleClose}>
|
||||
<Alert
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { styled } from "@mui/system";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import { HomeSVG } from "../common/icons/HomeSVG";
|
||||
import { QortalLogoSVG } from "../common/icons/QortalLogoSVG";
|
||||
import { CaretDownSVG } from "../common/icons/CaretDownSVG";
|
||||
@ -16,6 +16,14 @@ export const HeaderNav = styled(Box)(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
export const BubbleCardColored1 = styled(Box)({
|
||||
height: "77px",
|
||||
width: "77px",
|
||||
background: "linear-gradient(124.49deg, #70BAFF 7.03%, #F29999 94.22%)",
|
||||
boxShadow: "0px 0px 25.8px -1px #1C5A93",
|
||||
borderRadius: "50%",
|
||||
});
|
||||
|
||||
export const HomeIcon = styled(HomeSVG)({
|
||||
cursor: "pointer",
|
||||
});
|
||||
@ -135,7 +143,7 @@ export const RightColumn = styled(Box)({
|
||||
flexDirection: "row",
|
||||
gap: "10px",
|
||||
alignItems: "flex-start",
|
||||
padding: '10px'
|
||||
padding: "10px",
|
||||
});
|
||||
export const AvatarCircle = styled("img")({
|
||||
borderRadius: "50%",
|
||||
@ -145,12 +153,67 @@ export const AvatarCircle = styled("img")({
|
||||
userSelect: "none",
|
||||
});
|
||||
|
||||
|
||||
export const HeaderText = styled(Typography)(({ theme }) => ({
|
||||
fontFamily: "Inter",
|
||||
color: theme.palette.text.primary,
|
||||
textAlign: "center",
|
||||
fontWeight: 500,
|
||||
fontSize: "16px",
|
||||
lineHeight: 1.2,
|
||||
userSelect: "none",
|
||||
}));
|
||||
|
||||
export const TotalCol = styled(Box)({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
});
|
||||
|
||||
export const CoinActionsRow = styled(Box)({
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: "5px",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
});
|
||||
|
||||
export const CoinSendBtn = styled(Button)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: "#000000",
|
||||
border: `1px solid ${theme.palette.primary.main}`,
|
||||
fontFamily: "Inter, sans-serif",
|
||||
fontWeight: 500,
|
||||
fontSize: "14px",
|
||||
lineHeight: "16px",
|
||||
padding: "5px 10px",
|
||||
borderRadius: "0px",
|
||||
transition: "all 0.3s ease-in-out",
|
||||
"&:hover": {
|
||||
border: `1px solid ${theme.palette.text.primary}`,
|
||||
backgroundColor: theme.palette.text.primary,
|
||||
},
|
||||
}));
|
||||
|
||||
export const CoinReceiveBtn = styled(Button)(({ theme }) => ({
|
||||
backgroundColor: "transparent",
|
||||
color: theme.palette.text.primary,
|
||||
border: `1px solid ${theme.palette.text.primary}`,
|
||||
fontFamily: "Inter, sans-serif",
|
||||
fontWeight: 500,
|
||||
fontSize: "14px",
|
||||
lineHeight: "16px",
|
||||
padding: "5px 10px",
|
||||
borderRadius: "0px",
|
||||
transition: "all 0.3s ease-in-out",
|
||||
"&:hover": {
|
||||
color: "#000000",
|
||||
backgroundColor: theme.palette.text.primary,
|
||||
},
|
||||
}));
|
||||
|
||||
export const CoinSelectRow = styled(Box)({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
alignSelf: "flex-start",
|
||||
});
|
||||
|
||||
@ -1,25 +1,21 @@
|
||||
import { useState, useEffect, useRef, useContext, ChangeEvent } from "react";
|
||||
import ReactGA from "react-ga4";
|
||||
import {
|
||||
AvatarCircle,
|
||||
CaretDownIcon,
|
||||
DropdownContainer,
|
||||
GameSelectDropdown,
|
||||
GameSelectDropdownMenu,
|
||||
GameSelectDropdownMenuItem,
|
||||
BubbleCardColored1,
|
||||
CoinActionsRow,
|
||||
CoinReceiveBtn,
|
||||
CoinSelectRow,
|
||||
CoinSendBtn,
|
||||
HeaderNav,
|
||||
HeaderText,
|
||||
HomeIcon,
|
||||
LogoColumn,
|
||||
NameRow,
|
||||
QortalLogoIcon,
|
||||
RightColumn,
|
||||
TotalCol,
|
||||
Username,
|
||||
} from "./Header-styles";
|
||||
import gameContext from "../../contexts/gameContext";
|
||||
import { UserContext } from "../../contexts/userContext";
|
||||
import { cropAddress } from "../../utils/cropAddress";
|
||||
import { BubbleCardColored1 } from "../../pages/Home/Home-Styles";
|
||||
import qtradeLogo from "../../components/common/icons/qtradeLogo.png";
|
||||
import qortIcon from "../../assets/img/qort.png";
|
||||
import {
|
||||
@ -27,7 +23,6 @@ import {
|
||||
AppBar,
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
FormControlLabel,
|
||||
@ -97,12 +92,11 @@ const getCoinIcon = (coin)=> {
|
||||
default:
|
||||
null;
|
||||
}
|
||||
return img
|
||||
}
|
||||
return img;
|
||||
};
|
||||
|
||||
const SelectRow = ({ coin }) => {
|
||||
let img = getCoinIcon(coin)
|
||||
|
||||
let img = getCoinIcon(coin);
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -125,12 +119,7 @@ const SelectRow = ({ coin }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Header = ({
|
||||
qortBalance,
|
||||
foreignCoinBalance,
|
||||
mode,
|
||||
setMode,
|
||||
}: any) => {
|
||||
export const Header = ({ qortBalance, foreignCoinBalance }: any) => {
|
||||
const [openDropdown, setOpenDropdown] = useState<boolean>(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const buttonRef = useRef<HTMLDivElement>(null);
|
||||
@ -320,10 +309,11 @@ export const Header = ({
|
||||
<CardContent>
|
||||
<HeaderText>Total Balance</HeaderText>
|
||||
<Spacer height="10px" />
|
||||
<TotalCol>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
@ -336,11 +326,17 @@ export const Header = ({
|
||||
/>
|
||||
<HeaderText>{qortBalance} QORT</HeaderText>
|
||||
</Box>
|
||||
<CoinActionsRow>
|
||||
<CoinSendBtn>Send</CoinSendBtn>
|
||||
<CoinReceiveBtn>Receive</CoinReceiveBtn>
|
||||
</CoinActionsRow>
|
||||
</TotalCol>
|
||||
<Spacer height="10px" />
|
||||
<TotalCol>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
@ -354,27 +350,16 @@ export const Header = ({
|
||||
{foreignCoinBalance === null ? "N/A" : foreignCoinBalance}{" "}
|
||||
{getCoinLabel()}
|
||||
</Box>
|
||||
|
||||
<CoinActionsRow>
|
||||
<CoinSendBtn>Send</CoinSendBtn>
|
||||
<CoinReceiveBtn>Receive</CoinReceiveBtn>
|
||||
</CoinActionsRow>
|
||||
</TotalCol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightColumn>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
}}
|
||||
>
|
||||
<CoinSelectRow>
|
||||
<Select
|
||||
size="small"
|
||||
value={selectedCoin}
|
||||
@ -399,43 +384,7 @@ export const Header = ({
|
||||
<SelectRow coin="ARRR" />
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
opacity: 0.8,
|
||||
"&:hover": {
|
||||
background: mode === "buy" ? "#0085ff" : "unset",
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
variant={mode === "buy" ? "contained" : "text"}
|
||||
onClick={() => setMode("buy")}
|
||||
>
|
||||
Buy QORT
|
||||
</Button>
|
||||
<Button
|
||||
sx={{
|
||||
opacity: 0.8,
|
||||
"&:hover": {
|
||||
background: mode === "sell" ? "#0085ff" : "unset",
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
variant={mode === "sell" ? "contained" : "text"}
|
||||
onClick={() => setMode("sell")}
|
||||
>
|
||||
SELL QORT
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</CoinSelectRow>
|
||||
<Snackbar
|
||||
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
|
||||
open={open}
|
||||
|
||||
@ -1,64 +1,9 @@
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import { styled } from "@mui/system";
|
||||
|
||||
export const BubbleBoard = styled(Box)({
|
||||
position: "relative",
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(9, 1fr)",
|
||||
gridTemplateRows: "repeat(4, 1fr)",
|
||||
gap: "15px",
|
||||
width: "815px",
|
||||
height: "353px",
|
||||
});
|
||||
|
||||
export const BubbleCard = styled(Box)(({ theme }) => ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "77px",
|
||||
width: "77px",
|
||||
background: "#ffffff05",
|
||||
borderRadius: "50%",
|
||||
fontFamily: "Fredoka One, sans-serif",
|
||||
fontWeight: 500,
|
||||
fontSize: "40px",
|
||||
lineHeight: "48.4px",
|
||||
textAlign: "center",
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
|
||||
export const BubbleCardColored1 = styled(Box)({
|
||||
height: "77px",
|
||||
width: "77px",
|
||||
background: "linear-gradient(124.49deg, #70BAFF 7.03%, #F29999 94.22%)",
|
||||
boxShadow: "0px 0px 25.8px -1px #1C5A93",
|
||||
borderRadius: "50%",
|
||||
});
|
||||
|
||||
export const BubbleCardColored2 = styled(Box)({
|
||||
height: "77px",
|
||||
width: "77px",
|
||||
background: "linear-gradient(36.5deg, #70BAFF 19.69%, #F29999 90.73%)",
|
||||
boxShadow: "0px 0px 25.8px -1px #1C5A93",
|
||||
borderRadius: "50%",
|
||||
});
|
||||
|
||||
export const BubbleCardColored3 = styled(Box)({
|
||||
height: "77px",
|
||||
width: "77px",
|
||||
background: "linear-gradient(180deg, #70BAFF -24.68%, #ACABD0 25.49%, #F29999 74.03%)",
|
||||
boxShadow: "0px 0px 25.8px -1px #1C5A93",
|
||||
borderRadius: "50%",
|
||||
});
|
||||
|
||||
export const BubbleCardColored4 = styled(Box)({
|
||||
height: "77px",
|
||||
width: "77px",
|
||||
background: "linear-gradient(275.71deg, #70BAFF 35.99%, #F29999 95.61%)",
|
||||
boxShadow: "0px 0px 25.8px -1px #1C5A93",
|
||||
borderRadius: "50%",
|
||||
});
|
||||
type TabProp = {
|
||||
activeTab: boolean;
|
||||
};
|
||||
|
||||
export const MainCol = styled(Box)({
|
||||
display: "flex",
|
||||
@ -120,3 +65,53 @@ export const HomeWrapper = styled(Box)({
|
||||
height: "90vh",
|
||||
width: "100%",
|
||||
});
|
||||
|
||||
export const TabsContainer = styled(Box)({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "15px",
|
||||
alignItems: "flex-start",
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
});
|
||||
|
||||
export const TabsRow = styled(Box)({
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-evenly",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#323336",
|
||||
width: "fit-content",
|
||||
borderRadius: "5px",
|
||||
padding: "3px 0",
|
||||
});
|
||||
|
||||
export const Tab = styled(Box, {
|
||||
shouldForwardProp: (prop) => prop !== "activeTab"
|
||||
})<TabProp>(({ theme, activeTab }) => ({
|
||||
color: activeTab ? "#323336" : "#e8e8e8",
|
||||
fontFamily: "Inter, sans-serif",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19.2px",
|
||||
fontWeight: 400,
|
||||
backgroundColor: activeTab ? "#e8e8e8" : "transparent",
|
||||
padding: "5px 10px",
|
||||
borderRadius: "5px",
|
||||
height: "auto",
|
||||
transition: "all 0.4s ease-in-out",
|
||||
userSelect: "none",
|
||||
"&:hover": {
|
||||
color: "#323336",
|
||||
backgroundColor: "#babbbc",
|
||||
cursor: activeTab ? "auto" : "pointer",
|
||||
},
|
||||
}));
|
||||
|
||||
export const TabDivider = styled(Box, {
|
||||
shouldForwardProp: (prop) => prop !== "activeTab"
|
||||
})<TabProp>(({ theme, activeTab }) => ({
|
||||
width: "1px",
|
||||
height: "25px",
|
||||
margin: "0 3px",
|
||||
backgroundColor: activeTab ? "transparent" : "#a4a4a5",
|
||||
}));
|
||||
@ -1,49 +1,40 @@
|
||||
import { FC, useContext, useEffect, useMemo, useState } from "react";
|
||||
import { useContext, useEffect, useMemo, useState } from "react";
|
||||
import { AppContainer } from "../../App-styles";
|
||||
|
||||
import axios from "axios";
|
||||
import { Header } from "../../components/header/Header";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import gameContext from "../../contexts/gameContext";
|
||||
import { Link } from "react-router-dom";
|
||||
import { NotificationContext } from "../../contexts/notificationContext";
|
||||
|
||||
import { TradeOffers } from "../../components/Grids/TradeOffers";
|
||||
import { OngoingTrades } from "../../components/Grids/OngoingTrades";
|
||||
import { Box, Button, CircularProgress } from "@mui/material";
|
||||
import { Box } from "@mui/material";
|
||||
import { TextTableTitle } from "../../components/Grids/Table-styles";
|
||||
import { Spacer } from "../../components/common/Spacer";
|
||||
import { ReusableModal } from "../../components/common/reusable-modal/ReusableModal";
|
||||
import { OAuthButton, OAuthButtonRow } from "./Home-Styles";
|
||||
import { Tab, TabDivider, TabsContainer, TabsRow } from "./Home-Styles";
|
||||
import { CreateSell } from "../../components/sell/CreateSell";
|
||||
|
||||
interface IsInstalledProps {}
|
||||
|
||||
export const HomePage: FC<IsInstalledProps> = ({}) => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
export const HomePage = () => {
|
||||
const {
|
||||
qortBalance,
|
||||
foreignCoinBalance,
|
||||
userInfo,
|
||||
isAuthenticated,
|
||||
setIsAuthenticated,
|
||||
OAuthLoading,
|
||||
setOAuthLoading,
|
||||
onGoingTrades,
|
||||
selectedCoin
|
||||
selectedCoin,
|
||||
} = useContext(gameContext);
|
||||
const { setNotification } = useContext(NotificationContext);
|
||||
const [mode, setMode] = useState("buy");
|
||||
const filteredOngoingTrades = useMemo(() => {
|
||||
return onGoingTrades?.filter((item)=> item?.tradeInfo?.foreignBlockchain === selectedCoin)
|
||||
}, [onGoingTrades, selectedCoin])
|
||||
return onGoingTrades?.filter(
|
||||
(item) => item?.tradeInfo?.foreignBlockchain === selectedCoin
|
||||
);
|
||||
}, [onGoingTrades, selectedCoin]);
|
||||
const checkIfAuthenticated = async () => {
|
||||
try {
|
||||
setOAuthLoading(true);
|
||||
|
||||
setIsAuthenticated(true);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setOAuthLoading(false);
|
||||
}
|
||||
@ -58,13 +49,27 @@ export const HomePage: FC<IsInstalledProps> = ({}) => {
|
||||
<Header
|
||||
qortBalance={qortBalance}
|
||||
foreignCoinBalance={foreignCoinBalance}
|
||||
mode={mode}
|
||||
setMode={setMode}
|
||||
/>
|
||||
|
||||
<AppContainer>
|
||||
|
||||
|
||||
<TabsContainer>
|
||||
<TabsRow>
|
||||
<Tab activeTab={mode === "buy"} onClick={() => setMode("buy")}>
|
||||
Buy QORT
|
||||
</Tab>
|
||||
<TabDivider activeTab={mode === "buy" || mode === "sell"} />
|
||||
<Tab activeTab={mode === "sell"} onClick={() => setMode("sell")}>
|
||||
Sell QORT
|
||||
</Tab>
|
||||
<TabDivider activeTab={mode === "sell" || mode === "history"} />
|
||||
<Tab
|
||||
activeTab={mode === "history"}
|
||||
onClick={() => setMode("history")}
|
||||
>
|
||||
Trade History
|
||||
</Tab>
|
||||
</TabsRow>
|
||||
</TabsContainer>
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
@ -74,7 +79,6 @@ export const HomePage: FC<IsInstalledProps> = ({}) => {
|
||||
<Spacer height="10px" />
|
||||
<Box
|
||||
sx={{
|
||||
padding: "0 10px",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
@ -91,7 +95,6 @@ export const HomePage: FC<IsInstalledProps> = ({}) => {
|
||||
<Spacer height="10px" />
|
||||
<Box
|
||||
sx={{
|
||||
padding: "0 10px",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user