Release v1.0.0-beta.1

.github/workflows/dev.yml

@@ -1,4 +1,4 @@
-name: Deploy OPEX-Web-APP - Dev
+name: Push images on dev branch update
 
 on:
   push:
@@ -8,13 +8,15 @@ on:
 jobs:
   build:
     runs-on: ubuntu-20.04
-    name: Opex web app build
+    name: OPEX web app build
     env:
-      OPEX_TAG: dev
+      TAG: dev
     steps:
       - name: Checkout Source Code
         uses: actions/checkout@v2
       - name: Build Docker images
+        env:
+          GENERATE_SOURCEMAP: '' 
         run: docker-compose -f docker-compose.build.yml build
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v1

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-name: Deploy OPEX-Web-APP - Demo
+name: Push images on main branch update
 
 on:
   push:
@@ -8,13 +8,15 @@ on:
 jobs:
   build:
     runs-on: ubuntu-20.04
-    name: Opex web app build
+    name: OPEX web app build
     env:
-      OPEX_TAG: latest
+      TAG: latest
     steps:
       - name: Checkout Source Code
         uses: actions/checkout@v2
       - name: Build Docker images
+        env:
+          GENERATE_SOURCEMAP: false 
         run: docker-compose -f docker-compose.build.yml build
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v1

.github/workflows/pr.yml

@@ -7,11 +7,12 @@ on:
 jobs:
   build:
     runs-on: ubuntu-20.04
-    name: Opex web app build
+    name: OPEX web app build
     steps:
       - name: Checkout Source Code
         uses: actions/checkout@v2
       - name: Build Docker images
         env:
-          OPEX_TAG: latest
+          TAG: latest
+          GENERATE_SOURCEMAP: false
         run: docker-compose -f docker-compose.build.yml build

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:lts-fermium AS build
-COPY . /OPEX-Web-APP
-WORKDIR /OPEX-Web-APP
+COPY . /web-app
+WORKDIR /web-app
 ENV NODE_ENV production
 RUN yarn install --immutable
 ARG GENERATE_SOURCEMAP='false'
@@ -9,7 +9,7 @@ RUN yarn build
 
 FROM nginx:1.20.2
 COPY default.conf /etc/nginx/conf.d
-COPY --from=build /OPEX-Web-APP/build /var/www/opex/html
+COPY --from=build /web-app/build /var/www/opex/html
 WORKDIR /var/www/opex/html
 COPY env-map.js .
 CMD cat env-map.js | envsubst > env.js && nginx -g "daemon off;"

docker-compose.build.yml

@@ -1,7 +1,7 @@
 version: "3.8"
 services:
   web-app:
-    image: ghcr.io/opexdev/web-app:$OPEX_TAG
+    image: ghcr.io/opexdev/web-app:$TAG
     build:
       context: .
       args:

docker-compose.yml

@@ -1,7 +1,7 @@
 version: "3.8"
 services:
   web-app:
-    image: ghcr.io/opexdev/web-app:$OPEX_TAG
+    image: ghcr.io/opexdev/web-app
     environment:
       - API_BASE_URL=$API_BASE_URL
       - CLIENT_ID=$CLIENT_ID

package.json

@@ -4,39 +4,36 @@
   "homepage": "",
   "private": true,
   "dependencies": {
-    "@nivo/core": "^0.67.0",
-    "@nivo/line": "^0.67.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.4",
-    "axios": "^0.21.1",
+    "axios": "^0.27.2",
     "bignumber.js": "^9.0.1",
     "faker": "^5.4.0",
-    "i18next": "^19.9.0",
-    "i18next-browser-languagedetector": "^6.0.1",
-    "i18next-http-backend": "^1.1.1",
+    "i18next": "^21.8.0",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next-http-backend": "^1.4.0",
     "jwt-decode": "^3.1.2",
-    "lightweight-charts": "^3.3.0",
+    "lightweight-charts": "^3.8.0",
     "moment-jalaali": "^0.9.2",
     "normalize.css": "^8.0.1",
-    "prettier": "^2.2.1",
-    "rc-scrollbars": "^1.1.2",
+    "rc-scrollbars": "^1.1.3",
     "react": "^17.0.1",
     "react-countdown": "^2.3.2",
     "react-device-detect": "^1.15.0",
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.3.1",
-    "react-hot-toast": "^2.1.1",
-    "react-i18next": "^11.8.8",
-    "react-number-format": "^4.4.4",
-    "react-qr-code": "^2.0.2",
+    "react-hot-toast": "^2.2.0",
+    "react-i18next": "^11.16.9",
+    "react-number-format": "^4.9.3",
+    "react-qr-code": "^2.0.7",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "4.0.1",
-    "react-select": "^4.1.0",
-    "react-tooltip": "^4.2.15",
-    "redux": "^4.0.5",
+    "react-select": "^5.3.2",
+    "react-tooltip": "^4.2.21",
+    "redux": "^4.2.0",
     "redux-saga": "^1.1.3",
     "web-vitals": "^0.2.4"
   },

public/locales/fa/translation.json

@@ -121,6 +121,7 @@
     "ETH/BTC": "اتر/بیتکوین",
     "BTC/USDT": "بیتکوین/تتر",
     "TBTC/TUSDT": "بیتکوین (ت)/تتر (ت)",
+    "TBTC/IRT": "بیتکوین (ت)/تومان",
     "TETH/TUSDT": "اتر (ت)/تتر (ت)",
     "LTC/BTC": "لایت کوین/بیتکوین",
     "DOGE/BTC": "دوج کوین/بیتکوین",
@@ -136,6 +137,9 @@
     "DOGE/USDT": "دوج کوین/تتر",
     "BCH/USDT": "بیتکوین کش/تتر",
     "NLN/BTC": "اپکس/بیتکوین",
+    "BTC/BUSD": "بیتکوین/دلار بایننس",
+    "ETH/BUSD": "اتر/دلار بایننس",
+    "BNB/BUSD": "بایننس/دلار بایننس",
     "NLN/USDT": "اپکس/تتر"
   },
 
@@ -248,6 +252,8 @@
     "stopOrderTime": "زمان آخرین معامله",
     "startOrderTime": "زمان ثبت سفارش",
     "cancelOrder": "لغو سفارش",
+    "cancelSuccess": "سفارش با موفقیت لغو شد!",
+    "cancelError": "خطا در لغو سفارش",
     "orders": "معامله ها"
   },
 

src/components/AccordionBox/AccordionBox.js

@@ -1,6 +1,5 @@
 import React, {useState, useEffect} from "react";
 import classes from "./AccordionBox.module.css";
-import PropTypes from "prop-types";
 import {isMobile, isSafari} from "react-device-detect";
 
 const AccordionBox = ({title, customClass, content, activeTab, setActiveTab ,...props}) => {
@@ -20,11 +19,7 @@ const AccordionBox = ({title, customClass, content, activeTab, setActiveTab ,...
     }, [active]);
 
     return (
-        <div
-
-            className={`${customClass} ${classes.container} ${
-                isSafari ? props.safari : ""
-            }`}>
+        <div className={`${customClass} ${classes.container} ${isSafari ? props.safari : ""}`}>
             <div className={`card-header-bg accordion-header ${classes.header}`}>
                 {isMobile ? "" : <h3 className={`${props.titleClassName} ${classes.title}`}>{title}</h3>}
                 <div className={`${classes.items} ${props.headerClassName}`}>
@@ -49,10 +44,4 @@ const AccordionBox = ({title, customClass, content, activeTab, setActiveTab ,...
     );
 };
 
-AccordionBox.prototype = {
-    title: PropTypes.string,
-    customClass: PropTypes.array,
-    content: PropTypes.array,
-};
-
 export default AccordionBox;

src/components/Popup/Popup.js

@@ -102,7 +102,7 @@ const mapStateToProps = (state) => {
     return {
         isLogin: state.auth.isLogin,
         accessToken: state.auth.accessToken,
-        activePair: state.global.activePair
+        activePair: state.exchange.activePair
     };
 };
 const mapDispatchToProps = (dispatch) => {

src/index.js

@@ -13,9 +13,11 @@ import "./assets/fontIcon/opex-icon/css/opex-icon.css";
 import Main from "./main/main";
 import setupAxios from "./setup/axios/setupAxios";
 import axios from "axios";
+import exchangeReducer from "./store/reducers/exchangeReducer";
 
 const sagaMiddleware = createSagaMiddleware();
 const rootReducer = combineReducers({
+    exchange: exchangeReducer,
     global: globalReducer,
     auth: authReducer,
 });
@@ -27,7 +29,6 @@ const rootReducer = combineReducers({
  */
 const {PUBLIC_URL} = process.env
 
-
 const composeEnhancers = (process.env.NODE_ENV === "development" &&
     typeof window !== 'undefined' &&
     window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||

src/main/Browser/Browser.js

@@ -13,13 +13,21 @@ import SubMenu from "./Sections/SubMenu/SubMenu";
 import Header from "./Sections/Header/Header";
 import Content from "./Sections/Content/Content";
 import FullWidthLoading from "../../components/FullWidthLoading/FullWidthLoading";
-import {loadConfig, setInfoMessage, setLoading, setUserAccountInfoInitiate, setUserInfo} from "../../store/actions";
+import {
+    loadConfig,
+    loadImpersonate,
+    setInfoMessage,
+    setLoading,
+    setUserAccountInfoInitiate,
+    setUserInfo
+} from "../../store/actions";
 import TechnicalChart from "./Sections/Content/components/TechnicalChart/TechnicalChart";
 import "./Browser.css"
 import useQuery from "../../Hooks/useQuery";
 import useInterval from "../../Hooks/useInterval";
 import {setImpersonateTokens} from "../../store/actions/auth";
 import jwtDecode from "jwt-decode";
+import {setLastPriceInitiate} from "../../store/actions/exchange";
 import Info from "../../components/Info/Info";
 
 
@@ -36,13 +44,8 @@ const Browser = () => {
 
     useEffect(() => {
         const impersonate = query.get("impersonate");
-        if (impersonate) getLoginByAdminToken(impersonate)
-            .catch((err) => console.log(err))
-            .finally(() => {
-                dispatch(setLoading(false))
-                history.push("/")
-            })
-        if (!impersonate) dispatch(loadConfig())
+        if (impersonate) getLoginByAdminToken(impersonate).catch((err) => console.log(err))
+        impersonate ? dispatch(loadImpersonate()) : dispatch(loadConfig())
         i18n.language !== "fa" ? document.body.classList.add('ltr') : document.body.classList.remove('ltr');
         i18n.on("languageChanged", (lng) => {
             lng !== "fa" ? document.body.classList.add('ltr') : document.body.classList.remove('ltr');
@@ -58,7 +61,7 @@ const Browser = () => {
     }, []);
 
     const getLoginByAdminToken = async (token) => {
-        dispatch(setImpersonateTokens(token))
+        await dispatch(setImpersonateTokens(token))
         const jwt = jwtDecode(token)
         dispatch(setUserInfo(jwt));
         dispatch(setUserAccountInfoInitiate())
@@ -68,6 +71,10 @@ const Browser = () => {
         dispatch(setUserAccountInfoInitiate());
     }, isLogin ? 3000 : null)
 
+    useInterval(() => {
+        dispatch(setLastPriceInitiate());
+    },  3000)
+
     const Toast = () => <Toaster position="bottom-right" toastOptions={
         {
             className: "rtl",

src/main/Browser/Sections/Content/components/Dashboard/Dashboard.js

@@ -33,7 +33,7 @@ const Dashboard = () => {
 };
 const mapStateToProps = (state) => {
     return {
-        activePair: state.global.activePair,
+        activePair: state.exchange.activePair,
     };
 };
 

src/main/Browser/Sections/Content/components/Dashboard/components/LastTrades/LastTrades.js

@@ -1,32 +1,33 @@
-import React, {useState, useEffect, useMemo} from "react";
-import {connect} from "react-redux";
+import React, {useEffect, useState} from "react";
+import {useDispatch, useSelector} from "react-redux";
 import {useTranslation} from "react-i18next";
 import classes from "./LastTrades.module.css";
 import {getLastTrades} from "./api/lastTrades";
 import LastTradesTable from "./components/LastTradesTable/LastTradesTable";
 import useInterval from "../../../../../../../../Hooks/useInterval";
 import Error from "../../../../../../../../components/Error/Error";
 import Loading from "../../../../../../../../components/Loading/Loading";
-import {setLastTradePrice} from "../../../../../../../../store/actions/global";
+import {setLastTradePrice} from "../../../../../../../../store/actions";
 
-const LastTrades = (props) => {
+const LastTrades = () => {
     const {t} = useTranslation();
-    const {activePair, setLastTradePrice} = props
+    const dispatch = useDispatch();
 
     const [error, setError] = useState(false);
     const [lastTrades, setLastTrades] = useState(null);
 
+    const activePair = useSelector((state) => state.exchange.activePair)
+
     const getLastTradesData = async () => {
-        const lastTradesReq = await getLastTrades(activePair);
-        if (lastTradesReq && lastTradesReq.status === 200) {
+        getLastTrades(activePair).then((res) => {
             setError(false)
-            if (JSON.stringify(lastTradesReq.data) !== JSON.stringify(lastTrades)) {
-                setLastTrades(lastTradesReq.data)
-                if (lastTradesReq.data.length) setLastTradePrice(lastTradesReq.data[0].price)
+            if (JSON.stringify(res.data) !== JSON.stringify(lastTrades)) {
+                setLastTrades(res.data)
+                if (res.data.length) dispatch(setLastTradePrice(res.data[0].price))
             }
-        } else {
+        }).catch(() => {
             setError(true)
-        }
+        });
     }
 
     useEffect(() => {
@@ -70,14 +71,4 @@ const LastTrades = (props) => {
     );
 };
 
-const mapStateToProps = (state) => {
-    return {
-        activePair: state.global.activePair,
-    };
-};
-const mapDispatchToProps = (dispatch) => {
-    return {
-        setLastTradePrice: (lastTradePrice) => dispatch(setLastTradePrice(lastTradePrice)),
-    };
-};
-export default connect(mapStateToProps, mapDispatchToProps)(LastTrades);
+export default LastTrades;

src/main/Browser/Sections/Content/components/Dashboard/components/LastTrades/api/lastTrades.js

@@ -6,13 +6,5 @@ export const getLastTrades = async (activePair) => {
     params.append('limit', "25");
     return await axios.get(`/api/v3/trades?${params.toString()}`, {
         data:params,
-    }).then((res) => {
-        return res;
-    }).catch((e) => {
-        if (!e.response) {
-            return false;
-        }
-        return e.response;
     })
-
 }

src/main/Browser/Sections/Content/components/Dashboard/components/LastTrades/components/LastTradesTable/LastTradesTable.js

@@ -56,7 +56,7 @@ const LastTradesTable = (props) => {
 
 const mapStateToProps = (state) => {
   return {
-    activePair: state.global.activePair,
+    activePair: state.exchange.activePair,
   };
 };