9 | {errorMsg ?? t('error')}
10 | {
11 | retryFunc ? : ""
20 | }
21 |
22 | );
23 | };
24 |
25 | export default Error;
--------------------------------------------------------------------------------
/src/components/FullWidthLoading/FullWidthLoading.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classes from './FullWidthError.module.css'
3 |
4 | const FullWidthLoading = () => {
5 | return (
6 |
7 |
14 | );
15 | };
16 |
17 | export default FullWidthLoading;
18 |
19 |
--------------------------------------------------------------------------------
/src/components/HeaderBuilder/HeaderBuilder.module.css:
--------------------------------------------------------------------------------
1 | .container{
2 | height: 12vh;
3 | background-color: var(--menu);
4 | }
5 | .content {
6 | width: 95%;
7 | height: 100%;
8 | }
9 |
10 | .signOut {
11 | width: 5%;
12 | height: 100%;
13 | }
--------------------------------------------------------------------------------
/src/components/Icon/Icon.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Icon = (props) => {
4 | return (
5 |
6 |
7 |
8 | );
9 | };
10 |
11 | export default Icon;
12 |
--------------------------------------------------------------------------------
/src/components/Info/Info.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {useTranslation} from "react-i18next";
3 | import Icon from "../Icon/Icon";
4 | import {useDispatch, useSelector} from "react-redux";
5 | import {setInfoMessage} from "../../store/actions";
6 |
7 | const Info = () => {
8 | const {t} = useTranslation();
9 | const dispatch = useDispatch();
10 | //const type = useSelector((state) => state.global.info.type)
11 | const message = useSelector((state) => state.global.info.message)
12 |
13 | if (!message) return <>
14 |
15 | return (
16 |
8 |
9 |
10 |
11 |
12 |
13 |
17 | {t(message)}
18 | dispatch(setInfoMessage(null, null))}
22 | />
23 |
24 | );
25 | };
26 |
27 | export default Info;
--------------------------------------------------------------------------------
/src/components/Layout/Layout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classes from './Layout.module.css'
3 | import LayoutHeader from "./LayoutHeader/LayoutHeader";
4 | import {Outlet} from "react-router-dom";
5 | import Footer from "../../main/Browser/Pages/UserPanel/Sections/Footer/Footer";
6 | import ScrollBar from "../ScrollBar";
7 |
8 | const Layout = () => {
9 | return (
10 |
11 |
19 | );
20 | };
21 |
22 | export default Layout;
23 |
--------------------------------------------------------------------------------
/src/components/Layout/Layout.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | /*height: 100%;*/
3 | top: 0;
4 | bottom: 0;
5 | background-color: var(--mainContent);
6 | position: absolute;
7 | }
8 | .content {
9 | height: 88%;
10 | }
--------------------------------------------------------------------------------
/src/components/Layout/LayoutHeader/LayoutHeader.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 12%;
3 | background-color: var(--menu);
4 | }
5 | .content {
6 | }
7 |
8 | .thisButton {
9 | background-color: var(--menu);
10 | color: var(--textColor);
11 | }
12 |
13 | .name {
14 | display: -webkit-box;
15 | -webkit-line-clamp: 1;
16 | -webkit-box-orient: vertical;
17 | overflow: hidden;
18 | }
19 |
20 | .icon {
21 | font-size: 2.5rem !important;
22 | }
23 |
24 | .dropBox {
25 | border-bottom: 0.5px solid var(--orange);
26 | }
27 |
28 | .title {
29 | line-height: 2em;
30 | }
--------------------------------------------------------------------------------
/src/components/Loading/Loading.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {useTranslation} from "react-i18next";
3 | import {images} from "../../assets/images";
4 | import {useSelector} from "react-redux";
5 | import {isMobile} from 'react-device-detect';
6 |
7 | const Loading = () => {
8 | const theme = useSelector((state) => state.global.theme)
9 | const {t} = useTranslation();
10 | return (
11 |
13 |
14 |
17 |
18 |
12 | 
13 | {t('loading')}
14 |
15 | );
16 | };
17 | export default Loading;
--------------------------------------------------------------------------------
/src/components/NullMarketStats/NullMarketStats.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Trans, useTranslation} from "react-i18next";
3 |
4 | const NullMarketStats = ({interval}) => {
5 |
6 | const {t} = useTranslation();
7 |
8 | return (
9 |
10 |
19 | {new BN(mostTrades?.tradeCount).toFormat()}
20 |
21 |
22 |
23 | );
24 | };
25 |
26 | export default MostTrades;
27 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/EasyTrading/EasyTrading.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import EasyOrder from "./components/EasyOrder/EasyOrder";
3 |
4 | const EasyTrading = () => {
5 | return
10 |
26 | );
27 | };
28 |
29 | export default ContactUs;
30 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Info/ContactUs/ContactUs.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | min-height: 100%;
3 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Info/Guide/Guide.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | min-height: 100%;
3 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Info/Rules/Rules.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | min-height: 100%;
3 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Info/TransferFees/TransferFees.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | min-height: 100%;
3 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Landing/Landing.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 |
3 | background-repeat: repeat;
4 | background-position: center center;
5 | background-size: 600px 1200px;
6 | }
7 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Landing/components/GeneralInfo/GeneralInfo.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 27%;
3 | width: 90%
4 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Landing/components/MarketInfo/MarketInfo.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | height: 10vh;
3 | }
4 |
5 | /*.title {
6 | background-color: var(--cardBodyAlpha);
7 | }*/
8 |
9 | .active {
10 | background-color: var(--activeTitle);
11 | color: var(--activeTab);
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Landing/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | display: grid;
4 | grid-template-columns: 20% 20% 20% 20% 20%;
5 | }
6 |
7 | .item {
8 | margin: 1vh 0.5vw;
9 | border-radius: 8px;
10 | height: 37vh;
11 | }
12 |
13 | .item:hover {
14 | background-color: var(--container) !important;
15 | }
16 |
17 | .filter {
18 | filter: blur(4px);
19 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Landing/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.module.css:
--------------------------------------------------------------------------------
1 | .row:last-child {
2 | border-bottom: none;
3 | }
4 |
5 | .row:nth-child(odd) {
6 | background-color: var(--tableRow);
7 | }
8 |
9 | .row:hover {
10 | background-color: var(--container);
11 | }
12 |
13 | .filter {
14 | filter: blur(4px);
15 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Landing/components/MarketView/MarketView.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 55vh;
3 | width: 90%
4 | }
5 |
6 | .header {
7 | height: 15%;
8 | }
9 |
10 | .content {
11 | height: 85%;
12 | }
13 |
14 | .thisLoading {
15 | width: 5vw;
16 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Landing/components/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classes from './Spinner.module.css'
3 | import {images} from "../../../../../../assets/images";
4 |
5 | const Spinner = () => {
6 | return (
7 |
11 | {t("contactUs.subTitle1")}
12 | {t("contactUs.text1")}
13 |
14 |
25 |
15 | {t("contactUs.businessEmails")}:
16 | {t("contactUs.businessEmailsValue")}
17 |
18 |
19 |
20 | {t("contactUs.supportRelated")}:
21 | {t("contactUs.supportRelatedValue")}
22 |
23 |
24 |
8 | 
18 |
19 | );
20 | };
21 |
22 | export default Spinner;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Login/components/LoginLoading/LoginFormLoading.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {images} from "../../../../../../assets/images";
3 | import {useSelector} from "react-redux";
4 |
5 | const LoginFormLoading = () => {
6 | const theme = useSelector((state) => state.global.theme)
7 |
8 | return
9 | 
10 |
11 |
12 | 
13 |
14 |
15 | 
16 |
17 |
9 |
11 |
12 | }
13 |
14 | export default LoginFormLoading;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/Login/components/OTPForm/OTPForm.js:
--------------------------------------------------------------------------------
1 | import classes from "../../Login.module.css";
2 | import React from "react";
3 | import TextInput from "../../../../../../components/TextInput/TextInput";
4 | import {useTranslation} from "react-i18next";
5 |
6 |
7 | const OTPForm = ({initialVal, setOTP}) => {
8 | const {t} = useTranslation();
9 |
10 | const OTPInputHandler = (value) => {
11 | const userInput = value.replace(/[^0-9]+/g, "").slice(0, 6)
12 | setOTP(userInput)
13 | }
14 |
15 | return (
16 | <>
17 |
12 |
13 | }/>
14 | }/>
15 |
17 |
18 | );
19 | };
20 |
21 | export default User;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/User/User.module.css:
--------------------------------------------------------------------------------
1 | .container{
2 | /*height: 100vh;*/
3 | background-color: var(--mainContent);
4 | background-repeat: repeat;
5 | background-position: center center;
6 | background-size: 600px 1200px;
7 | top: 0;
8 | bottom: 0;
9 | position: absolute;
10 | }
11 |
12 | .content{
13 | top: 20%;
14 | left: 32.5%;
15 | width: 35%;
16 | height: 60%;
17 | background-color: var(--cardBodyAlpha);
18 | z-index: 7;
19 | }
20 | .content img{
21 | width: 7vw;
22 | }
23 | .thisButton {
24 | width: 100%;
25 | background-color: var(--green);
26 | color: #000 !important;
27 |
28 | }
29 | .forgetPassWordHeader{
30 | height: 18%
31 | }
32 |
33 | .forgetPassWordContent{
34 | height: 64%
35 | }
36 |
37 | .forgetPassWordFooter{
38 | height: 18%
39 | }
40 |
41 |
42 | .passwordInput {
43 | margin: 1vh 0;
44 | width: 100%;
45 | }
46 | .passwordInput :global(.lead) {
47 | width: 45%;
48 | cursor: pointer;
49 | }
50 | .passwordInput :global(.after) {
51 | width: 12.5%;
52 | cursor: pointer;
53 | }
54 | .passwordInput :global(input) {
55 | width: 42.5% !important;
56 | }
57 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/User/components/ForgetPassword/ForgetPassword.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opexdev/web-app/80f728ed33ff4787b717ae3ffc5c502186805791/src/main/Browser/Pages/User/components/ForgetPassword/ForgetPassword.module.css
--------------------------------------------------------------------------------
/src/main/Browser/Pages/User/components/Verify/Verify.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opexdev/web-app/80f728ed33ff4787b717ae3ffc5c502186805791/src/main/Browser/Pages/User/components/Verify/Verify.module.css
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.module.css:
--------------------------------------------------------------------------------
1 | .thisInput :global(.lead) {
2 | width: 30%;
3 | }
4 | .thisInput :global(.selectExternalClass) {
5 | width: 70% !important;
6 | }
7 |
8 | .thisInput :global(.rmdp-container ) {
9 | width: 70%;
10 | height: 100%;
11 | }
12 |
13 |
14 |
15 | .thisButton {
16 | background-color: var(--orange);
17 | color: #000;
18 | }
19 | .disable:disabled,.button[disabled] {
20 | border: 0.3vh solid var(--cardHeader);
21 | background: var(--cardHeader);
22 | color: var(--textColor);
23 | cursor: not-allowed;
24 | }
25 |
26 | .thisButton:disabled,.button[disabled] {
27 | border: 0.3vh solid var(--cardHeader);
28 | background: var(--cardHeader);
29 | color: var(--textColor);
30 | cursor: not-allowed;
31 | }
32 |
33 |
34 |
35 | .header {
36 | height: 10vh;
37 | }
38 |
39 | /*.title {
40 | background-color: var(--cardBodyAlpha);
41 | }*/
42 |
43 | .active {
44 | background-color: var(--activeTitle);
45 | color: var(--activeTab);
46 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.module.css:
--------------------------------------------------------------------------------
1 | .thisButton {
2 | background-color: var(--orange);
3 | color: #000;
4 | }
5 | .disable:disabled,.button[disabled] {
6 | border: 0.3vh solid var(--cardBodyAlpha);
7 | background: var(--cardBodyAlpha);
8 | color: var(--textColor);
9 | cursor: not-allowed;
10 | }
11 |
12 | .thisButton:disabled,.button[disabled] {
13 | border: 0.3vh solid var(--cardBodyAlpha);
14 | background: var(--cardBodyAlpha);
15 | color: var(--textColor);
16 | cursor: not-allowed;
17 | }
18 |
19 | .thisInput :global(.lead) {
20 | width: 30%;
21 | }
22 | .thisInput :global(.selectExternalClass) {
23 | width: 70%;
24 | }
25 | .thisInput :global(.rmdp-container ) {
26 | width: 70%;
27 | }
28 | .thisInput.datePicker :global(.rmdp-container ) {
29 | font-size: 0.85rem;
30 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.module.css:
--------------------------------------------------------------------------------
1 | .striped:nth-child(even) {
2 | background-color: var(--tableRow);
3 | -webkit-transition: background-color 0.4s;
4 | -o-transition: background-color 0.4s;
5 | transition: background-color 0.4s;
6 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.module.css:
--------------------------------------------------------------------------------
1 | .thisButton {
2 | background-color: var(--orange);
3 | color: #000;
4 | }
5 | .disable:disabled,.button[disabled] {
6 | border: 0.3vh solid var(--cardBodyAlpha);
7 | background: var(--cardBodyAlpha);
8 | color: var(--textColor);
9 | cursor: not-allowed;
10 | }
11 |
12 | .thisButton:disabled,.button[disabled] {
13 | border: 0.3vh solid var(--cardBodyAlpha);
14 | background: var(--cardBodyAlpha);
15 | color: var(--textColor);
16 | cursor: not-allowed;
17 | }
18 |
19 |
20 | .thisInput :global(.lead) {
21 | width: 30%;
22 | }
23 | .thisInput :global(.selectExternalClass) {
24 | width: 70%;
25 | }
26 | .thisInput :global(.rmdp-container ) {
27 | width: 70%;
28 | }
29 | .thisInput.datePicker :global(.rmdp-container ) {
30 | font-size: 0.85rem;
31 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.module.css:
--------------------------------------------------------------------------------
1 | .striped:nth-child(even) {
2 | background-color: var(--tableRow);
3 | -webkit-transition: background-color 0.4s;
4 | -o-transition: background-color 0.4s;
5 | transition: background-color 0.4s;
6 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.module.css:
--------------------------------------------------------------------------------
1 | .thisButton {
2 | background-color: var(--orange);
3 | color: #000;
4 | }
5 | .disable:disabled,.button[disabled] {
6 | border: 0.3vh solid var(--cardBodyAlpha);
7 | background: var(--cardBodyAlpha);
8 | color: var(--textColor);
9 | cursor: not-allowed;
10 | }
11 |
12 | .thisButton:disabled,.button[disabled] {
13 | border: 0.3vh solid var(--cardBodyAlpha);
14 | background: var(--cardBodyAlpha);
15 | color: var(--textColor);
16 | cursor: not-allowed;
17 | }
18 |
19 | .thisInput :global(.lead) {
20 | width: 30%;
21 | }
22 | .thisInput :global(.selectExternalClass) {
23 | width: 70%;
24 | }
25 | .thisInput :global(.rmdp-container ) {
26 | width: 70%;
27 | }
28 | .thisInput.datePicker :global(.rmdp-container ) {
29 | font-size: 0.85rem;
30 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.module.css:
--------------------------------------------------------------------------------
1 | .striped:nth-child(even) {
2 | background-color: var(--tableRow);
3 | -webkit-transition: background-color 0.4s;
4 | -o-transition: background-color 0.4s;
5 | transition: background-color 0.4s;
6 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/LastTrades/LastTrades.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 55vh;
3 | }
4 | .header {
5 | height: 12%;
6 | padding: 1vh 1vw;
7 | }
8 | .header span {
9 | width: 50%;
10 | text-align: center;
11 | }
12 | .content {
13 | height: 88%;
14 | }
15 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/LastTrades/components/LastTradesTable/LastTradesTable.module.css:
--------------------------------------------------------------------------------
1 | .container tr:nth-child(even) td {
2 | background-color: var(--tableRow);
3 | transition: background-color 0.4s;
4 | }
5 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/MyOrders/MyOrders.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 55vh;
3 | border-radius: 9px;
4 | }
5 | .iconBG {
6 | vertical-align: middle;
7 | border-radius: 50vw;
8 | }
9 | .close {
10 | max-height: 0;
11 | overflow: hidden;
12 | transition: max-height 0.3s;
13 | opacity: 0;
14 | line-height: 0;
15 | visibility: collapse;
16 | }
17 | .open {
18 | max-height: 2vh;
19 | transition: max-height 0.6s;
20 | }
21 | .safariFlexSize :global(.accordion-header) {
22 | flex: 22;
23 | }
24 | .safariFlexSize :global(.accordion-body) {
25 | flex: 77;
26 | }
27 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/Order/Order.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 78vh;
3 | }
4 | .content {
5 | height: 100%;
6 | padding: 1.8vh 1vw;
7 | }
8 | .thisButton {
9 | width: 100%;
10 | }
11 | .alertSubmit{
12 | background-color: var(--orange);
13 | }
14 | .thisButton.buyOrder {
15 | background-color: var(--darkGreen);
16 | }
17 | .thisButton.sellOrder {
18 | background-color: var(--darkRed);
19 | }
20 | .thisButton:disabled,.button[disabled] {
21 | border: 0.3vh solid var(--cardHeader);
22 | background: var(--cardHeader);
23 | color: var(--textColor);
24 | cursor: not-allowed;
25 | }
26 | .thisLoading{
27 | width: 5vw;
28 | }
29 | .dangerHint span i {
30 | background-color: #6619bf;
31 | width: 1.1vw;
32 | height: 1.1vw;
33 | border-radius: 50vw;
34 | display: flex;
35 | align-items: center;
36 | justify-content: center;
37 | }
38 | .dangerHint :global(.alert) {
39 | font-size: 0.7vw;
40 | color: #6619bf;
41 | }
42 | .stopMarket {
43 | background: var(--cardHeader);
44 | }
45 | .stopMarket input {
46 | cursor: not-allowed;
47 | }
48 | .safariFlexSize :global(.accordion-header) {
49 | flex: 17;
50 | }
51 | .safariFlexSize :global(.accordion-body) {
52 | flex: 83;
53 | }
54 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/OrderBook.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | height: 58vh;
4 | }
5 | .header {
6 | height: 20%;
7 | padding: 1vh 1vw;
8 | }
9 | .header span {
10 | width: 50%;
11 | text-align: center;
12 | }
13 | .content {
14 | height: 80%;
15 | }
16 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTable/OrderBookTable.module.css:
--------------------------------------------------------------------------------
1 | .container .tbody .tbodyRow:nth-child(even) span{
2 | background-color: var(--tableRow);
3 | transition: background-color 0.4s;
4 | }
5 | :global #opex-tooltip {
6 | background-color: var(--toolTipBG);
7 | color: var(--textColor);
8 | border: 0.1vh solid transparent;
9 | border-radius: 5px;
10 | font-size: 0.8vw;
11 | padding: 0.5vh 1vw;
12 | opacity: 1 !important;
13 | z-index: 10;
14 | }
15 | :global .place-bottom::after {
16 | border-bottom-color: var(--toolTipBG) !important;
17 | }
18 | :global .place-left::after {
19 | border-left-color: var(--toolTipBG) !important;
20 | }
21 | :global .place-right::after {
22 | border-right-color: var(--toolTipBG) !important;
23 | }
24 | :global .place-top::after {
25 | border-top-color: var(--toolTipBG) !important;
26 | }
27 | .selected {
28 | background: var(--orangeAlpha) !important;
29 | }
30 | .tbody{
31 | line-height: 4.7vh;
32 | }
33 | .thead{
34 | position: sticky;
35 | top: 0;
36 | z-index: 1;
37 | font-weight: normal;
38 | background-color: var(--tableHeader);
39 | line-height: 4.7vh;
40 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTooltip/OrderBookTooltip.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {useTranslation} from "react-i18next";
3 |
4 | const OrderBookTooltip = (props) => {
5 | const {t} = useTranslation();
6 | return (
7 |
8 |
21 | );
22 | };
23 |
24 | export default OrderBookTooltip;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/Overview/Overview.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classes from "./Overview.module.css";
3 | import {useTranslation} from "react-i18next";
4 | import InformationBlock from "./components/InformationBlock/InformationBlock";
5 | import AccordionBox from "../../../../../../../../../../components/AccordionBox/AccordionBox";
6 |
7 | const Overview = () => {
8 | const {t} = useTranslation();
9 |
10 | const data = [
11 | {title: t("overview.lastDay"), body:
9 | ${t("averagePrice")}:
10 | ${props.price.toLocaleString()}
11 |
12 |
13 | ${t("totalVolume")}:
14 | ${props.amount}
15 |
16 |
17 | ${t("totalPrice")}:
18 | ${props.totalPrice.toLocaleString()}
19 |
20 |
19 |
25 | );
26 | };
27 |
28 |
29 | export default Overview;
30 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/Overview/Overview.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 38vh;
3 | width: 100%;
4 | }
5 | .content {
6 | height: 100%;
7 | }
8 |
9 | .safariFlexSize :global(.accordion-header) {
10 | flex: 4;
11 | }
12 | .safariFlexSize :global(.accordion-body) {
13 | flex: 6;
14 | }
15 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/TradingView.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {useTranslation} from "react-i18next";
3 | import AccordionBox from "../../../../../../../../../../components/AccordionBox/AccordionBox";
4 | import MarketChart from "./components/MarketChart/MarketChart";
5 |
6 | const TradingView = () => {
7 | const {t} = useTranslation();
8 | const charts = [
9 | {title: t("charts.globalChart"), body:
15 |
20 | );
21 | };
22 |
23 | export default TradingView;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/TradingView.module.css:
--------------------------------------------------------------------------------
1 | .chartContainer {
2 | height: 100%;
3 | align-items: center;
4 | justify-content: center;
5 | display: flex;
6 | padding: 0 1vw;
7 | flex-direction: row;
8 | direction: ltr;
9 | position: relative;
10 | }
11 | :global(div[data-highcharts-chart]) {
12 | width: 100%;
13 | height: 100%;
14 | }
15 | :global(.highcharts-container) {
16 | width: 100% !important;
17 | height: 100% !important;
18 | border-radius: 9px;
19 | }
20 | :global(.highcharts-point-up) {
21 | fill: var(--green);
22 | stroke: var(--green);
23 | }
24 | :global(.highcharts-point-down) {
25 | fill: var(--red);
26 | stroke: var(--red);
27 | }
28 | :global(.highcharts-color-1) {
29 | fill: var(--activeTab);
30 | stroke: var(--activeTab);
31 | }
32 | .error {
33 | position: absolute;
34 | top: 50%;
35 | left: 0;
36 | right: 0;
37 | bottom: 0;
38 | text-align: center;
39 | z-index: 2;
40 | vertical-align: text-bottom;
41 | }
42 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/APIKey.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CreateAPIKey from "./components/CreateAPIKey/CreateAPIKey";
3 | import APIKeyList from "./components/APIKeyList/APIKeyList";
4 |
5 | const APIKey = () => {
6 | return (
7 | <>
8 |
11 |
27 | );
28 | };
29 |
30 | export default HelpStep;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Authentication/components/HelpStep/HelpStep.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 75vh;
3 | }
4 | .header {
5 | height: 12%;
6 | }
7 | .content {
8 | height: 88%;
9 | }
10 | .thisButton {
11 | width: 10%;
12 | background-color: var(--darkGreen);
13 | }
14 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 75vh;
3 | }
4 | .header {
5 | height: 12%;
6 | }
7 | .content {
8 | height: 88%;
9 | }
10 | .content :global(.row) {
11 | width: 100%;
12 | }
13 | .addressInput :global(.lead) {
14 | width: 24.5%;
15 | }
16 | .addressInput :global(input) {
17 | width: 75.5%;
18 | }
19 | .thisButton {
20 | width: 20%;
21 | }
22 | .thisButton.prev{
23 | background-color: var(--orange);
24 | }
25 | .thisButton.next{
26 | background-color: var(--darkGreen);
27 | }
28 | .email :global(input){
29 | background-color: var(--cardHeader);
30 | cursor: not-allowed;
31 | }
32 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Authentication/components/SendPhotosStep/SendPhotosStep.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 75vh;
3 | }
4 | .header {
5 | height: 12%;
6 | }
7 | .content {
8 | height: 88%;
9 | }
10 | .thisButton {
11 | width: 30%;
12 | }
13 | .thisButton.prev{
14 | background-color: var(--orange);
15 | }
16 | .thisButton.next{
17 | background-color: var(--darkGreen);
18 | }
19 |
20 | .zoneBox {
21 | width: 22vw;
22 | padding: 2vh 1vw;
23 | border-radius: 10px;
24 | border: 0.3vh dotted var(--cardBorder);
25 | }
26 | .cancel {
27 | top: 0.8vh;
28 | left: 0.1vw;
29 | }
30 | .zone {
31 | padding: 2vh 1vw;
32 | height: 30vh;
33 | border-radius: 10px;
34 | background-repeat: no-repeat;
35 | background-position: center center;
36 | background-size: cover;
37 | background-color: var(--cardHeader);
38 | }
39 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Authentication/components/SendToAdminStep/SendToAdminStep.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 75vh;
3 | }
4 | .header {
5 | height: 12%;
6 | }
7 | .content {
8 | height: 88%;
9 | }
10 | .thisButton {
11 | width: 10%;
12 | }
13 | .thisButton.prev{
14 | background-color: var(--orange);
15 | }
16 | .thisButton.submit{
17 | background-color: var(--darkGreen);
18 | }
19 | .content img{
20 | width: 8vw;
21 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Personalization/Personalization.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PersonalizationForm from "./components/PersonalizationForm/PersonalizationForm";
3 |
4 | const Personalization = () => {
5 | return (
6 |
12 |
16 |
13 |
15 | {t("HelpStep.title")}
14 |
17 | {t("HelpStep.content")}
18 |
26 |
19 |
24 |
25 |
7 |
9 | );
10 | };
11 |
12 | export default Personalization;
13 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Personalization/components/PersonalizationForm/PersonalizationForm.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 35vh;
3 | }
4 | .header {
5 | height: 20%;
6 | padding: 1vh 1vw;
7 | }
8 | .header span {
9 | width: 50%;
10 | text-align: center;
11 | }
12 | .content {
13 | height: 80%;
14 | width: 100%;
15 | }
16 | .content :global(.row) {
17 | width: 100%;
18 | }
19 | .thisButton {
20 | width: 10%;
21 | background-color: var(--darkGreen);
22 | }
23 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Profile/Profile.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PersonalProfile from "./components/PersonalProfile/PersonalProfile";
3 |
4 | const Profile = () => {
5 | return (
6 | <>
7 |
8 |
10 |
11 | );
12 | };
13 |
14 | export default Profile;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Profile/components/PersonalProfile/PersonalProfile.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 65vh;
3 | }
4 | .header {
5 | height: 12%;
6 | }
7 | .content {
8 | height: 88%;
9 | }
10 | .content :global(.row) {
11 | width: 100%;
12 | }
13 | .addressInput :global(.lead) {
14 | width: 24.5%;
15 | }
16 | .addressInput :global(input) {
17 | width: 75.5%;
18 | }
19 | .thisButton {
20 | width: 20%;
21 | }
22 | .thisButton.prev{
23 | background-color: var(--orange);
24 | }
25 | .thisButton.next{
26 | background-color: var(--darkGreen);
27 | }
28 | .content :global(input){
29 | cursor: not-allowed;
30 | }
31 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Profile/components/UserAccountStatus/UserAccountStatus.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 30vh;
3 | }
4 | .header {
5 | height: 30%;
6 | padding: 1vh 1vw;
7 | }
8 | .header span {
9 | text-align: center;
10 | }
11 | .content {
12 | height: 70%;
13 | }
14 | .iconCustomClasss {
15 | display: flex;
16 | justify-content: flex-end;
17 | }
18 |
19 | .content tr:nth-child(even) td {
20 | background-color: var(--tableRow);
21 | transition: background-color 0.4s;
22 | }
23 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Security/Security.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ChangePassword from "./components/ChangePassword/ChangePassword";
3 | import ActiveSessions from "./components/ActiveSessions/ActiveSessions";
4 | import SetTwoStepVerification from "./components/SetTwoStepVerification/SetTwoStepVerification";
5 |
6 | const Security = () => {
7 | return (
8 | <>
9 |
10 |
17 |
11 |
13 |
14 |
16 |
18 |
20 |
21 | );
22 | };
23 |
24 | export default Security;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Security/components/ActiveSessions/ActiveSessions.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 65vh;
3 | }
4 | .header {
5 | height: 15%;
6 | padding: 1vh 1vw;
7 | }
8 | .header span {
9 | width: 50%;
10 | text-align: center;
11 | }
12 | .content {
13 | height: 85%;
14 | }
15 |
16 |
17 | .thisSession {
18 | background: var(--cardHeaderAlpha);
19 | }
20 |
21 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Security/components/ActiveSessions/components/Session/Session.module.css:
--------------------------------------------------------------------------------
1 | .striped:nth-child(even){
2 | background-color: var(--tableRow);
3 | -webkit-transition: background-color 0.4s;
4 | -o-transition: background-color 0.4s;
5 | transition: background-color 0.4s;
6 | }
7 |
8 | .thisLoading{
9 | width: 5vw;
10 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Security/components/ChangePassword/ChangePassword.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 65vh;
3 | }
4 | .header {
5 | height: 15%;
6 | padding: 1vh 1vw;
7 | }
8 | .header span {
9 | width: 50%;
10 | text-align: center;
11 | }
12 | .content {
13 | height: 85%;
14 | }
15 | .content :global(.row) {
16 | width: 100%;
17 | }
18 | .thisButton {
19 | width: 20%;
20 | background-color: var(--darkGreen);
21 | }
22 | .passwordInput :global(.lead) {
23 | width: 50%;
24 | cursor: pointer;
25 | }
26 | .passwordInput :global(.after) {
27 | width: 10%;
28 | cursor: pointer;
29 | }
30 | .passwordInput :global(input) {
31 | width: 40% !important;
32 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Security/components/LoginReports/LoginReports.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classes from "./LoginReports.module.css";
3 | import {useTranslation} from "react-i18next";
4 |
5 | const LoginReports = () => {
6 | const {t} = useTranslation();
7 |
8 | return (
9 |
11 |
21 | );
22 | };
23 |
24 | export default LoginReports;
25 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Security/components/LoginReports/LoginReports.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 30vh;
3 | }
4 | .header {
5 | height: 20%;
6 | padding: 1vh 1vw;
7 | }
8 | .header span {
9 | width: 50%;
10 | text-align: center;
11 | }
12 | .content {
13 | height: 80%;
14 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Security/components/SetTwoStepVerification/SetTwoStepVerification.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 40vh;
3 | }
4 | .header {
5 | height: 23%;
6 | padding: 1vh 1vw;
7 | }
8 | .header span {
9 | width: 50%;
10 | text-align: center;
11 | }
12 | .content {
13 | height: 77%;
14 | }
15 |
16 | .thisLoading{
17 | width: 5vw;
18 | }
19 |
20 | .thisButton {
21 | width: 10%;
22 | background-color: var(--darkGreen);
23 | }
24 | .submit{
25 | width: 15%;
26 | }
27 | .disableOtp{
28 | background-color: var(--darkRed);
29 | width: 15%;
30 | }
31 |
32 | .thisInput :global(.lead) {
33 | width: 35%;
34 | }
35 | .thisInput :global(input) {
36 | width: 75% !important;
37 | letter-spacing: 1rem;
38 | }
39 | /*.thisInput :global(input) {
40 | width: 85% !important;
41 | }*/
42 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/TechnicalChart/TechnicalChart.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import AdvanceTradingView from "../../../../../../../../components/AdvanceTradingView/AdvanceTradingView";
3 |
4 | const TechnicalChart = () => {
5 |
6 |
7 | return (
8 |
13 |
17 |
14 |
16 | {t("LoginReports.title")}
15 |
18 | {t("LoginReports.title")}
19 |
20 |
20 |
26 | );
27 | };
28 |
29 | export default DepositWithdraw;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Deposit/components/IRT/IRT.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opexdev/web-app/80f728ed33ff4787b717ae3ffc5c502186805791/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Deposit/components/IRT/IRT.module.css
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Deposit/components/IRT/components/CallbackPage/CallbackPage.module.css:
--------------------------------------------------------------------------------
1 | .container{
2 | width: 100%;
3 | height: 100%;
4 | position: fixed;
5 | top: 0;
6 | /*background-color: #0304038f;*/
7 | background-color: rgba(0, 0, 0, 0.66);
8 | z-index: 6;
9 | right: 0;
10 | }
11 | .content{
12 | position: fixed;
13 | top: 27.5%;
14 | left: 37.5%;
15 | width: 25%;
16 | height: 45%;
17 | background-color: var(--cardBody);
18 | z-index: 7;
19 | }
20 | .content img{
21 | width: 7vw;
22 | }
23 | .thisButton {
24 | width: 100%;
25 | background-color: var(--orange);
26 | color: #000 !important;
27 |
28 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdrawTx/DepositWithdrawTx.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import DepositTx from "../DepositTx/DepositTx";
3 | import WithdrawTx from "../WithdrawTx/WithdrawTx";
4 |
5 | const DepositWithdrawTx = () => {
6 | return (
7 |
8 |
11 | )
12 | };
13 |
14 | export default DepositWithdrawTx;
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/OrdersTrades/OrdersTrades.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 50vh;
3 | border-radius: 9px;
4 | }
5 | .iconBG {
6 | vertical-align: middle;
7 |
8 | border-radius: 50vw;
9 | }
10 | .close {
11 | max-height: 0;
12 | overflow: hidden;
13 | transition: max-height 0.3s;
14 | opacity: 0;
15 | line-height: 0;
16 | visibility: collapse;
17 | }
18 | .open {
19 | max-height: 2vh;
20 | transition: max-height 0.6s;
21 | }
22 | .safariFlexSize :global(.accordion-header) {
23 | flex: 22;
24 | }
25 | .safariFlexSize :global(.accordion-body) {
26 | flex: 77;
27 | }
28 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | /*height: 60vh;*/
3 | border-radius: 9px;
4 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTxTable/WithdrawTxTable.module.css:
--------------------------------------------------------------------------------
1 | .striped:nth-child(even) {
2 | background-color: var(--tableRow);
3 | -webkit-transition: background-color 0.4s;
4 | -o-transition: background-color 0.4s;
5 | transition: background-color 0.4s;
6 | }
7 |
8 | .thisButton {
9 | width: 100%;
10 | background-color: var(--darkRed);
11 | }
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Footer/Footer.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | background-color: var(--footer);
3 | -webkit-transition: background-color 0.4s;
4 | -o-transition: background-color 0.4s;
5 | transition: background-color 0.4s;
6 | }
7 |
8 | .languages span {
9 | border-left: 0.01vh solid #f58634;
10 | }
11 |
12 | :global(.ltr) .languages span {
13 | border-right: 0.01vh solid #f58634;
14 | border-left: initial;
15 | }
16 |
17 | .languages span:last-child {
18 | border-left: initial;
19 | }
20 | :global(.ltr) .languages span:last-child {
21 | border-left: initial;
22 | border-right: initial;
23 | }
24 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Header/components/Clock/Clock.js:
--------------------------------------------------------------------------------
1 | import moment from "moment-jalaali";
2 | import React, {useState} from "react";
3 | import {useSelector} from "react-redux";
4 | import useInterval from "../../../../../../../../Hooks/useInterval";
5 |
6 | const Clock = () => {
7 | const type = useSelector((state) => state.exchange.dateType)
8 | const calendar = () => {
9 | switch (type) {
10 | case "Jalali":
11 | return moment().format("jYYYY/jMM/jDD - HH:mm:ss");
12 | case "Hijri":
13 | return moment().format("YYYY/MM/DD - HH:mm:ss");
14 | case "Georgian":
15 | return moment().format("iYYYY/iMM/iDD - HH:mm:ss");
16 | default:
17 | return moment().format("YYYY/MM/DD - HH:mm:ss");
18 | }
19 | };
20 |
21 | const [time, setTime] = useState(calendar())
22 |
23 | useInterval(() => {
24 | setTime(calendar())
25 | }, 1000);
26 |
27 | return (<>{time});
28 | };
29 |
30 | export default Clock;
31 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/Header/components/SettingsHeader/SettingsHeader.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {useLocation} from "react-router-dom";
3 | import {useTranslation} from "react-i18next";
4 |
5 | const SettingHeader = () => {
6 | const location = useLocation()
7 | const {t} = useTranslation()
8 |
9 | return 10 | {t("routes." + location.pathname)} 11 |
12 | } 13 | export default SettingHeader; -------------------------------------------------------------------------------- /src/main/Browser/Pages/UserPanel/Sections/Header/components/SettingsHeader/SettingsHeader.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opexdev/web-app/80f728ed33ff4787b717ae3ffc5c502186805791/src/main/Browser/Pages/UserPanel/Sections/Header/components/SettingsHeader/SettingsHeader.module.css -------------------------------------------------------------------------------- /src/main/Browser/Pages/UserPanel/Sections/Header/components/WalletHeader/WalletHeader.module.css: -------------------------------------------------------------------------------- 1 | .border{ 2 | border-right: 0.1vh solid var(--orange); 3 | border-left: 0.1vh solid var(--orange); 4 | } -------------------------------------------------------------------------------- /src/main/Browser/Pages/UserPanel/Sections/SubMenu/SubMenu.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 22%; 3 | height: 100%; 4 | /* height: 100vh;*/ 5 | /*background-color: #fcfeff;*/ 6 | /*right: 5%;*/ 7 | /*position: fixed;*/ 8 | } 9 | :global(.ltr) .container { 10 | /*left: 5%; 11 | right: initial;*/ 12 | } 13 | -------------------------------------------------------------------------------- /src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/MarketSubMenu/MarketSubMenu.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | .content { 6 | height: 100%; 7 | padding: 1.8vh 1vw; 8 | } 9 | 10 | .TitleFontSize { 11 | font-size: 1.5vw; 12 | margin: 1vh 0; 13 | } 14 | .UlMaxWidth { 15 | } 16 | .listBorder { 17 | border-top: 0.1vh solid var(--borderBottom); 18 | /*border-bottom: 0.1vh solid var(--borderBottom);*/ 19 | transition: border 0.4s; 20 | } 21 | 22 | .safariFlexSize :global(.accordion-header) { 23 | flex: 14; 24 | } 25 | .safariFlexSize :global(.accordion-body) { 26 | flex: 86; 27 | } 28 | -------------------------------------------------------------------------------- /src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/MarketSubMenu/components/MarketCard/MarketCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ScrollBar from "../../../../../../../../../../components/ScrollBar"; 3 | import MarketPairCard from "../MarketPairCard/MarketPairCard"; 4 | 5 | const MarketCard = ({type, ...props}) => { 6 | 7 | return ( 8 |
9 |
10 | {props.pairs.map((pair) => )}
11 |
12 |
13 | );
14 | };
15 |
16 | export default MarketCard;
17 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/MessagesSubMenu/MessagesSubMenu.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | height: 100vh;
4 | }
5 | .content {
6 | height: 100%;
7 | padding: 1.8vh 1vw;
8 | }
9 | .safariFlexSize :global(.accordion-header) {
10 | flex: 14;
11 | }
12 | .safariFlexSize :global(.accordion-body) {
13 | flex: 86;
14 | }
15 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/MessagesSubMenu/components/MessagesCard/MessagesCard.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 |
3 | }
4 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/MessagesSubMenu/components/NotifCard/NotifCard.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 5vh;
3 | border-bottom: 0.1vh solid var(--textColor);
4 | }
5 | .notifTime {
6 | border-left: 0.1vh solid var(--black);
7 | }
8 |
--------------------------------------------------------------------------------
/src/main/Browser/Pages/UserPanel/UserPanel.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | top: 0;
3 | bottom: 0;
4 | position: absolute;
5 | }
--------------------------------------------------------------------------------
/src/main/Mobile/Mobile.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {useLocation} from "react-router-dom";
3 |
4 | const Mobile = () => {
5 | let location = useLocation();
6 | const redirectURL = window.env.REACT_APP_MOBILE_URL + location?.pathname + location?.search
7 | window.location.replace(redirectURL);
8 | }
9 | export default Mobile;
--------------------------------------------------------------------------------
/src/main/Mobile/Mobille.css:
--------------------------------------------------------------------------------
1 | @media (max-width: 480px) {
2 |
3 | html,body{
4 | font-size: 3.3vw;
5 | line-height: 3.5vh;
6 | top: 0;
7 | bottom: 0;
8 | left: 0;
9 | right: 0;
10 | position: absolute;
11 |
12 | }
13 |
14 | }
15 |
16 |
17 | @media screen and (orientation: landscape) {
18 | .mobile-view {
19 | font-size: 1vw;
20 | line-height: 14vh;
21 | border: 0.4vw dotted #4a5eab;
22 | }
23 | .mobile-view img {
24 | width: 12vw;
25 | }
26 | .mobile-view h1 {
27 | padding: 5vh 0;
28 | }
29 | }
--------------------------------------------------------------------------------
/src/main/main.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {BrowserRouter as Router} from "react-router-dom";
3 | import {isBrowser} from "react-device-detect";
4 | import Browser from "./Browser/Browser";
5 | import Mobile from "./Mobile/Mobile";
6 |
7 | const Main = ({baseURL}) => {
8 | return