Refactor landing with react-layout

README.md

@@ -1,6 +1,6 @@
 
 <p align="center">
-  <img width="256px" src="https://opex.dev/github/opexLogoPlus.svg" alt="Opex" title="Opex">
+  <img width="256px" src="https://opex.dev/github/logo.svg" alt="Opex" title="Opex">
 </p>
 
 # OPEX Web APP

public/assets/locales/en/translation.json

@@ -621,5 +621,102 @@
     "needKYC" : "Access denied for KYC status",
     "reload" : "Try Again",
     "errorText" : "Server connection error"
+  },
+  "aboutUs": {
+    "title": "About US",
+    "text1": "About US content",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "text2": "",
+    "subTitle1": "",
+    "text3": "",
+    "p5": "",
+    "p6": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": "",
+    "subTitle2": "",
+    "text4": "",
+    "subTitle3": "",
+    "p11": "",
+    "p12": "",
+    "p13": "",
+    "text5": ""
+  },
+  "commissions": {
+    "title": "Commission",
+    "subTitle1": "Commission content",
+    "text1": "",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "text2": "",
+    "text3": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "text4": ""
+
+  },
+  "transferFees": {
+    "title": "Transfer Fees",
+    "text1": "Transfer Fees content",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "text2": "",
+    "text3": "",
+    "text4": "",
+    "subTitle1": "",
+    "text5": "",
+    "subTitle2": "",
+    "text6": "",
+    "subTitle3": "",
+    "text7": "",
+    "subTitle4": "",
+    "text8": ""
+  },
+  "guide": {
+    "title": "Guide",
+    "subTitle1": "Guide content",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "subTitle2": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": ""
+  },
+  "rules": {
+    "title": "Rules",
+    "subTitle1": "Rules content",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "subTitle2": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": ""
+  },
+  "contactUs": {
+    "title": "Contact Us",
+    "subTitle1": "Contact Us content",
+    "text1": ""
   }
 }

public/assets/locales/fa/translation.json

@@ -46,7 +46,7 @@
   "unit": "واحد",
   "offline": "اتصال اینترنت را بررسی کنید!",
   "improperMobileView ": "فعلاً برای موبایل بهینه نشده است.",
-  "home": "صفحه‌اصلی",
+  "home": "صفحه اصلی",
   "country": {
     "iran" : "جمهوری اسلامی ایران",
     "germany" : "آلمان",
@@ -621,5 +621,102 @@
     "needKYC" : "دسترسی این بخش فقط برای کاربران احراز هویت شده مجاز است!",
     "reload" : "تلاش مجدد",
     "errorText" : "خطا در ارتباط با سرور"
+  },
+  "aboutUs": {
+    "title": "درباره ما",
+    "text1": "متن درباره ما",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "text2": "",
+    "subTitle1": "",
+    "text3": "",
+    "p5": "",
+    "p6": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": "",
+    "subTitle2": "",
+    "text4": "",
+    "subTitle3": "",
+    "p11": "",
+    "p12": "",
+    "p13": "",
+    "text5": ""
+  },
+  "commissions": {
+    "title": "کارمزد",
+    "subTitle1": "متن کارمزدها",
+    "text1": "",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "text2": "",
+    "text3": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "text4": ""
+
+  },
+  "transferFees": {
+    "title": "کارمزد انتقال",
+    "text1": "متن کارمزد انتقال",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "text2": "",
+    "text3": "",
+    "text4": "",
+    "subTitle1": "",
+    "text5": "",
+    "subTitle2": "",
+    "text6": "",
+    "subTitle3": "",
+    "text7": "",
+    "subTitle4": "",
+    "text8": ""
+  },
+  "guide": {
+    "title": "راهنما",
+    "subTitle1": "متن راهنما",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "subTitle2": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": ""
+  },
+  "rules": {
+    "title": "قوانین",
+    "subTitle1": "متن قوانین",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "subTitle2": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": ""
+  },
+  "contactUs": {
+    "title": "تماس با ما",
+    "subTitle1": "متن تماس با ما",
+    "text1": ""
   }
 }

src/components/HeaderBuilder/HeaderBuilder.js

@@ -61,6 +61,11 @@ const HeaderBuilder = ({children}) => {
                         to={Routes.AllMarket}
                         className={({ isActive }) => isActive ? 'text-orange mx-1 cursor-pointer hover-text' : 'mx-1 cursor-pointer hover-text'}
                     >{t("market.title")}</NavLink>
+                    <NavLink
+                        to={Routes.Info}
+                        className={({ isActive }) => isActive ? 'text-orange mx-1 cursor-pointer hover-text' : 'mx-1 cursor-pointer hover-text'}
+                    >{t("info.title")}
+                    </NavLink>
 
                 </div>
                 <div className={`column ai-end width-15`}>

src/components/Layout/Layout.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import classes from './Layout.module.css'
+import {images} from "../../assets/images";
+import LayoutHeader from "./LayoutHeader/LayoutHeader";
+import {Outlet} from "react-router-dom";
+import Footer from "../../main/Browser/Pages/UserPanel/Sections/Footer/Footer";
+import ScrollBar from "../ScrollBar";
+
+const Layout = () => {
+    return (
+        <div className={`${classes.container} width-100 column text-color`}>
+            <LayoutHeader/>
+            <div className={`${classes.content} column`}>
+                <ScrollBar>
+                    <Outlet/>
+                    <Footer/>
+                </ScrollBar>
+            </div>
+        </div>
+    );
+};
+
+export default Layout;

src/components/Layout/Layout.module.css

@@ -0,0 +1,8 @@
+.container {
+    height: 100vh;
+    background-color: var(--mainContent);
+    position: relative;
+}
+.content {
+    height: 88vh;
+}

src/components/Layout/LayoutHeader/LayoutHeader.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import classes from './LayoutHeader.module.css';
+import {useTranslation} from "react-i18next";
+import {Link, NavLink, Route, Routes, useLocation, useParams} from "react-router-dom";
+import * as RoutesName from "../../../main/Browser/Routes/routes";
+import {Commission, Login} from "../../../main/Browser/Routes/routes";
+import {toAbsoluteUrl} from "../../../utils/utils";
+import Clock from "../../../main/Browser/Pages/UserPanel/Sections/Header/components/Clock/Clock";
+import {images} from "../../../assets/images";
+import {useDispatch, useSelector} from "react-redux";
+import {logout} from "js-api-client";
+import {toast} from "react-hot-toast";
+import {setLogoutInitiate} from "../../../store/actions";
+import AboutUs from "../../../main/Browser/Pages/Info/AboutUs/AboutUs";
+
+const LayoutHeader = () => {
+    const {t} = useTranslation();
+
+    const dispatch = useDispatch();
+
+    const isLogin = useSelector((state) => state.auth.isLogin)
+    const firstName = useSelector((state) => state.auth.firstName)
+    const lastName = useSelector((state) => state.auth.lastName)
+    const location = useLocation();
+
+    const interval = useSelector((state) => state.global.marketInterval)
+
+    const logOutHandler = async () => {
+        logout().then(() => {
+            toast.success(t("header.logOutSuccess"))
+            dispatch(setLogoutInitiate())
+        }).catch(() => {
+            toast.error(t("header.logOutError"));
+        })
+    }
+
+    return (
+        <div className={`width-100 flex jc-center ai-center ${classes.container}`}>
+            <div className={`${classes.content} width-90 height-100 row jc-center ai-center`}>
+                <Link to={RoutesName.Landing} className={`flex jc-start ai-center width-20`}>
+                    <img src={toAbsoluteUrl('/assets/logo/logo.svg')} alt={t("title")} title={t("title")} className={`img-lg-plus`}/>
+                </Link>
+                <div className={`width-45 `}>
+                    <Routes>
+                        <Route path={RoutesName.Landing} element={<h2>{t("Landing.title")}</h2>}/>
+                        <Route path={RoutesName.Commission} element={<h2>{t("commissions.title")}</h2>}/>
+                        <Route path={RoutesName.AboutUs} element={<h2>{t("aboutUs.title")}</h2>}/>
+                        <Route path={RoutesName.TransferFees} element={<h2>{t("transferFees.title")}</h2>}/>
+                        <Route path={RoutesName.Guide} element={<h2>{t("guide.title")}</h2>}/>
+                        <Route path={RoutesName.Rules} element={<h2>{t("rules.title")}</h2>}/>
+                        <Route path={RoutesName.ContactUs} element={<h2>{t("contactUs.title")}</h2>}/>
+                        <Route path={RoutesName.AllMarket} element={<div className={`row jc-start ai-baseline`}>
+                            <h2 className={`ml-025`}>{t("market.title")}</h2>
+                            <span className={`fs-0-8 mr-025`}>( {t("marketInterval." + interval)} )</span>
+                        </div>}/>
+                    </Routes>
+                </div>
+                <div className={`width-45 text-center row jc-end ai-center`}>
+
+                    <NavLink
+                        to={RoutesName.Landing}
+                        className={({ isActive }) => isActive ? 'text-orange mx-1 cursor-pointer hover-text' : 'mx-1 cursor-pointer hover-text'}
+                    >{t("home")}</NavLink>
+                    {/* <NavLink
+                        to="#"
+                        className={`mx-1 cursor-pointer hover-text`}
+                    >{t("MarketTitle.easyTrading")}</NavLink>*/}
+                    <NavLink
+                        to={RoutesName.Panel}
+                        className={({ isActive }) => isActive ? 'text-orange mx-1 cursor-pointer hover-text' : 'mx-1 cursor-pointer hover-text'}
+                    >{t("MarketTitle.advancedTrading")}</NavLink>
+                    <NavLink
+                        to={RoutesName.AllMarket}
+                        className={({ isActive }) => isActive ? 'text-orange mx-1 cursor-pointer hover-text' : 'mx-1 cursor-pointer hover-text'}
+                    >{t("market.title")}</NavLink>
+
+                </div>
+                <div className={`column ai-end width-15`}>
+                    {firstName === null ? (
+                        <Link to={Login} state={{from: location}} className="hover-text">
+                            <p>{t("signIn")} | {t("signUp")}</p>
+                        </Link>
+                    ) : (
+                        <p className="mb-05">
+                            {firstName + " " + lastName}
+                        </p>
+                    )}
+                    {/*<p style={{direction: "ltr"}}>
+                        <Clock/>
+                    </p>*/}
+
+                </div>
+
+                <div className={`flex jc-end ai-center width-5`}>
+                    {isLogin ? (
+                        <img
+                            className="img-md-plus cursor-pointer"
+                            src={images.signOut}
+                            alt={t("signOut")}
+                            onClick={logOutHandler}
+                            data-tooltip-place="right"
+                            data-tooltip-id="opex-tooltip"
+                            data-tooltip-float={true}
+                            data-tooltip-html={`<span class="column jc-between col-100">${t("signOut")}</span>`}
+                        />
+                    ) : (
+                        <Link to={Login} state={{from: location}} className="flex">
+                            <img
+                                className="img-md-plus cursor-pointer"
+                                src={images.signIn}
+                                data-tooltip-html={`<span class="column jc-between col-100">${t("signIn")}</span>`}
+                                alt={t("signIn")}
+                                data-tooltip-id="opex-tooltip"
+                                data-tooltip-place="right"
+                            />
+                        </Link>
+                    )}
+                </div>
+
+
+
+            </div>
+        </div>
+    );
+};
+
+export default LayoutHeader;