Initial UI changes

src/App-styles.tsx

@@ -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",
+  padding: "20px 30px 0 30px",
-  paddingBottom: '50px'
+  backgroundColor: "#323336"
 }));
 
 export const MainContainer = styled(Box)`

src/components/Grids/Table-styles.tsx

@@ -1,11 +1,23 @@
-import { styled } from "@mui/system";
+import { Box, styled } from "@mui/system";
-import { Box, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 
 export const TextTableTitle = styled(Typography)(({ theme }) => ({
-    fontFamily: "Inter",
+  fontFamily: "Inter",
-    color: theme.palette.text.primary,
+  color: theme.palette.text.primary,
-    fontWeight: 400,
+  fontWeight: 400,
-    fontSize: "20px",
+  fontSize: "20px",
-    lineHeight: "40px",
+  lineHeight: "40px",
-    userSelect: "none",
+  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",
+});

src/components/Grids/TradeOffers.tsx

@@ -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={{
+    <BuyContainer>
-      width: '100%',
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      position: 'fixed',
-      bottom: '0px',
-      height: '100px',
-      padding: '7px',
-      background: '#181d1f',
-
-    }}>
       <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
                 

src/components/header/Header-styles.tsx

@@ -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",
+});

src/components/header/Header.tsx

@@ -1,25 +1,21 @@
 import { useState, useEffect, useRef, useContext, ChangeEvent } from "react";
-import ReactGA from "react-ga4";
 import {
-  AvatarCircle,
+  BubbleCardColored1,
-  CaretDownIcon,
+  CoinActionsRow,
-  DropdownContainer,
+  CoinReceiveBtn,
-  GameSelectDropdown,
+  CoinSelectRow,
-  GameSelectDropdownMenu,
+  CoinSendBtn,
-  GameSelectDropdownMenuItem,
   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,
@@ -70,7 +65,7 @@ export const Label = styled("label")(
   `
 );
 
-const getCoinIcon = (coin)=> {
+const getCoinIcon = (coin) => {
   let img;
 
   switch (coin) {
@@ -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 = ({
+export const Header = ({ qortBalance, foreignCoinBalance }: any) => {
-  qortBalance,
-  foreignCoinBalance,
-  mode,
-  setMode,
-}: any) => {
   const [openDropdown, setOpenDropdown] = useState<boolean>(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLDivElement>(null);
@@ -320,122 +309,82 @@ export const Header = ({
             <CardContent>
               <HeaderText>Total Balance</HeaderText>
               <Spacer height="10px" />
-              <Box
+              <TotalCol>
-                sx={{
+                <Box
-                  display: "flex",
+                  sx={{
-                  gap: "20px",
+                    display: "flex",
-                  alignItems: "center",
+                    gap: "10px",
-                }}
+                    alignItems: "center",
-              >
-                <img
-                  src={qortIcon}
-                  style={{
-                    height: "25px",
-                    width: "auto",
                   }}
-                />
+                >
-                <HeaderText>{qortBalance} QORT</HeaderText>
+                  <img
-              </Box>
+                    src={qortIcon}
+                    style={{
+                      height: "25px",
+                      width: "auto",
+                    }}
+                  />
+                  <HeaderText>{qortBalance} QORT</HeaderText>
+                </Box>
+                <CoinActionsRow>
+                  <CoinSendBtn>Send</CoinSendBtn>
+                  <CoinReceiveBtn>Receive</CoinReceiveBtn>
+                </CoinActionsRow>
+              </TotalCol>
               <Spacer height="10px" />
-              <Box
+              <TotalCol>
-                sx={{
+                <Box
-                  display: "flex",
+                  sx={{
-                  gap: "20px",
+                    display: "flex",
-                  alignItems: "center",
+                    gap: "10px",
-                }}
+                    alignItems: "center",
-              >
-                <img
-                  src={getCoinIcon(getCoinLabel())}
-                  style={{
-                    height: "25px",
-                    width: "auto",
                   }}
-                />
+                >
-                 {foreignCoinBalance === null ? "N/A" : foreignCoinBalance}{" "}
+                  <img
-                {getCoinLabel()}
+                    src={getCoinIcon(getCoinLabel())}
-              </Box>
+                    style={{
-            
+                      height: "25px",
+                      width: "auto",
+                    }}
+                  />
+                  {foreignCoinBalance === null ? "N/A" : foreignCoinBalance}{" "}
+                  {getCoinLabel()}
+                </Box>
+                <CoinActionsRow>
+                  <CoinSendBtn>Send</CoinSendBtn>
+                  <CoinReceiveBtn>Receive</CoinReceiveBtn>
+                </CoinActionsRow>
+              </TotalCol>
             </CardContent>
           </Card>
         </RightColumn>
 
-        <Box
+        <CoinSelectRow>
-          sx={{
+          <Select
-            display: "flex",
+            size="small"
-            gap: "20px",
+            value={selectedCoin}
-            alignItems: "center",
+            onChange={(e) => setSelectedCoin(e.target.value)}
-            width: "100%",
-            justifyContent: "space-between",
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              gap: "5px",
-            }}
           >
-            <Select
+            <MenuItem value={"LITECOIN"}>
-              size="small"
+              <SelectRow coin="LTC" />
-              value={selectedCoin}
+            </MenuItem>
-              onChange={(e) => setSelectedCoin(e.target.value)}
+            <MenuItem value={"DOGECOIN"}>
-            >
+              <SelectRow coin="DOGE" />
-              <MenuItem value={"LITECOIN"}>
+            </MenuItem>
-                <SelectRow coin="LTC" />
+            <MenuItem value={"BITCOIN"}>
-              </MenuItem>
+              <SelectRow coin="BTC" />
-              <MenuItem value={"DOGECOIN"}>
+            </MenuItem>
-                <SelectRow coin="DOGE" />
+            <MenuItem value={"DIGIBYTE"}>
-              </MenuItem>
+              <SelectRow coin="DGB" />
-              <MenuItem value={"BITCOIN"}>
+            </MenuItem>
-                <SelectRow coin="BTC" />
+            <MenuItem value={"RAVENCOIN"}>
-              </MenuItem>
+              <SelectRow coin="RVN" />
-              <MenuItem value={"DIGIBYTE"}>
+            </MenuItem>
-                <SelectRow coin="DGB" />
+            <MenuItem value={"PIRATECHAIN"}>
-              </MenuItem>
+              <SelectRow coin="ARRR" />
-              <MenuItem value={"RAVENCOIN"}>
+            </MenuItem>
-                <SelectRow coin="RVN" />
+          </Select>
-              </MenuItem>
+        </CoinSelectRow>
-              <MenuItem value={"PIRATECHAIN"}>
-                <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>
-
         <Snackbar
           anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
           open={open}

src/pages/Home/Home-Styles.tsx

@@ -1,64 +1,9 @@
 import { Box, Button, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 
-export const BubbleBoard = styled(Box)({
+type TabProp = {
-  position: "relative",
+  activeTab: boolean;
-  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%",
-});
 
 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",
+}));

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 = () => {
-
-export const HomePage: FC<IsInstalledProps> = ({}) => {
-  const location = useLocation();
-  const navigate = useNavigate();
   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(()=> {
+  const filteredOngoingTrades = useMemo(() => {
-    return onGoingTrades?.filter((item)=> item?.tradeInfo?.foreignBlockchain === selectedCoin)
+    return onGoingTrades?.filter(
-  }, [onGoingTrades, selectedCoin])
+      (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<IsInstalledProps> = ({}) => {
 
   return (
     <>
-     <Header
+      <Header
         qortBalance={qortBalance}
         foreignCoinBalance={foreignCoinBalance}
-        mode={mode}
-        setMode={setMode}
       />
 
-    <AppContainer>
+      <AppContainer>
-     
+        <TabsContainer>
-
+          <TabsRow>
-      <div
+            <Tab activeTab={mode === "buy"} onClick={() => setMode("buy")}>
-        style={{
+              Buy QORT
-          width: "100%",
+            </Tab>
-          display: mode === "buy" ? "block" : "none",
+            <TabDivider activeTab={mode === "buy" || mode === "sell"} />
-        }}
+            <Tab activeTab={mode === "sell"} onClick={() => setMode("sell")}>
-      >
+              Sell QORT
-        <Spacer height="10px" />
+            </Tab>
-        <Box
+            <TabDivider activeTab={mode === "sell" || mode === "history"} />
-          sx={{
+            <Tab
-            padding: "0 10px",
+              activeTab={mode === "history"}
+              onClick={() => setMode("history")}
+            >
+              Trade History
+            </Tab>
+          </TabsRow>
+        </TabsContainer>
+        <div
+          style={{
             width: "100%",
+            display: mode === "buy" ? "block" : "none",
           }}
         >
-          <TextTableTitle
+          <Spacer height="10px" />
+          <Box
             sx={{
-              fontSize: "16px",
+              width: "100%",
             }}
           >
-            {`My Pending Orders: ${filteredOngoingTrades?.length}`}
+            <TextTableTitle
-          </TextTableTitle>
+              sx={{
-        </Box>
+                fontSize: "16px",
-        <Spacer height="10px" />
+              }}
-        <OngoingTrades />
+            >
-        <Spacer height="10px" />
+              {`My Pending Orders: ${filteredOngoingTrades?.length}`}
-        <Box
+            </TextTableTitle>
-          sx={{
+          </Box>
-            padding: "0 10px",
+          <Spacer height="10px" />
-            width: "100%",
+          <OngoingTrades />
-          }}
+          <Spacer height="10px" />
-        >
+          <Box
-          <TextTableTitle
             sx={{
-              fontSize: "16px",
+              width: "100%",
             }}
           >
-            Open Market Sell Orders
+            <TextTableTitle
-          </TextTableTitle>
+              sx={{
-        </Box>
+                fontSize: "16px",
-        <Spacer height="10px" />
+              }}
-        <TradeOffers foreignCoinBalance={foreignCoinBalance} />
+            >
-      </div>
+              Open Market Sell Orders
+            </TextTableTitle>
+          </Box>
+          <Spacer height="10px" />
+          <TradeOffers foreignCoinBalance={foreignCoinBalance} />
+        </div>
 
-      <CreateSell show={mode === "sell"} qortAddress={userInfo?.address} />
+        <CreateSell show={mode === "sell"} qortAddress={userInfo?.address} />
-    </AppContainer>
+      </AppContainer>
     </>
   );
 };