{
);
};
-export const Header = ({
- qortBalance,
- foreignCoinBalance,
- mode,
- setMode,
-}: any) => {
+export const Header = ({ qortBalance, foreignCoinBalance }: any) => {
const [openDropdown, setOpenDropdown] = useState(false);
const dropdownRef = useRef(null);
const buttonRef = useRef(null);
@@ -320,122 +309,82 @@ export const Header = ({
Total Balance
- 
+ {qortBalance} QORT
-
+ >
+
+ {qortBalance} QORT
+
+
+ Send
+ Receive
+
+
- )})
+
-
+ >
+
+ {foreignCoinBalance === null ? "N/A" : foreignCoinBalance}{" "}
+ {getCoinLabel()}
+
+
+ Send
+ Receive
+
+
-
-
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
({
- 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",
@@ -119,4 +64,54 @@ export const HomeWrapper = styled(Box)({
gap: "100px",
height: "90vh",
width: "100%",
-});
\ No newline at end of file
+});
+
+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"
+})(({ 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"
+})(({ theme, activeTab }) => ({
+ width: "1px",
+ height: "25px",
+ margin: "0 3px",
+ backgroundColor: activeTab ? "transparent" : "#a4a4a5",
+}));
\ No newline at end of file
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index bdac02b..f732c34 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -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 = ({}) => {
- 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])
+ const filteredOngoingTrades = useMemo(() => {
+ 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);
}
@@ -55,60 +46,72 @@ export const HomePage: FC = ({}) => {
return (
<>
-
-
-
-
+
-
+
+
+ setMode("buy")}>
+ Buy QORT
+
+ setMode("sell")}>
+ Sell QORT
+
+ setMode("history")}
+ >
+ Trade History
+
+
+
+
+ Open Market Sell Orders
+
+
+
-
-
- {`My Pending Orders: ${filteredOngoingTrades?.length}`}
-
-
-
-
+ {`My Pending Orders: ${filteredOngoingTrades?.length}`}
+
+
+
- Open Market Sell Orders
-
-
-
+