Release v1.0.3-beta.6

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opex",
-  "version": "v1.0.1-beta.5",
+  "version": "v1.0.3-beta.6",
   "homepage": "",
   "private": true,
   "dependencies": {
@@ -29,7 +29,7 @@
     "react-dropzone": "^11.3.1",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.2.2",
-    "react-multi-date-picker": "^4.3.1",
+    "react-multi-date-picker": "^4.4.1",
     "react-number-format": "^4.9.3",
     "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",

src/components/TextInput/TextInput.js

@@ -3,8 +3,12 @@ import Icon from "../Icon/Icon";
 import Select from "react-select";
 import classes from "./TextInput.module.css";
 import DatePicker from "react-multi-date-picker";
-import persian_fa from "react-date-object/locales/persian_fa";
+import gregorian from "react-date-object/calendars/gregorian";
 import persian from "react-date-object/calendars/persian";
+import englishGregorian from "react-date-object/locales/gregorian_en";
+import farsiGregorian from "react-date-object/locales/gregorian_fa";
+import englishJalali from "react-date-object/locales/persian_en";
+import farsiJalali from "react-date-object/locales/persian_fa";
 import {useSelector} from "react-redux";
 import i18n from "i18next";
 import "react-multi-date-picker/styles/backgrounds/bg-dark.css"
@@ -13,6 +17,7 @@ const TextInput = (props) => {
     const {customRef,readOnly,onchange,customClass,options, lead, ltr, after ,select ,alerts ,max, datePicker, ...other} = props
 
     const theme = useSelector((state) => state.global.theme)
+    const type = useSelector((state) => state.exchange.dateType)
 
     const optionClassHandler = (state) => {
         let className = classes.selectOptions
@@ -25,6 +30,21 @@ const TextInput = (props) => {
         return className;
     }
 
+    const calenderTypeHandler = () => {
+        if (type === "Hijri" && i18n.language === "en") {
+            return englishGregorian
+        }
+        if (type === "Hijri" && i18n.language === "fa") {
+            return farsiGregorian
+        }
+        if (type === "Jalali" && i18n.language === "en") {
+            return englishJalali
+        }
+        if (type === "Jalali" && i18n.language === "fa") {
+            return farsiJalali
+        }
+    };
+
 
     let leadSection = null
     let afterSection = null
@@ -63,8 +83,8 @@ const TextInput = (props) => {
     if ( datePicker ){
         inputSection = <DatePicker
             className={`${theme === "DARK" && "bg-dark"}`}
-            locale={i18n.language === "fa" ? persian_fa : null}
-            calendar={i18n.language === "fa" ? persian : null}
+            locale={calenderTypeHandler()}
+            calendar={type === "Jalali" ? persian : gregorian}
             onChange={onchange}
             render={<input className={`${classes.datePicker}`}/>}
             {...other}

src/index.css

@@ -155,10 +155,12 @@ html, body {
     --greenAlpha: #18a97978;
     --greenAlphaGradient: #09a16e85;
     --darkGreen: #18a979;
+    --blackGreen: #123f30;
     --red: #d73e36;
     --redAlpha: #d73e3678;
     --redAlphaGradient: #e124175e;
     --darkRed: #d73e36;
+    --blackRed: #79150f;
     --orange: #ff8124;
     --orangeAlpha: #e97b50b0;
     --blue: #0e4095;
@@ -195,10 +197,12 @@ html, body {
     --greenAlpha: #18a97978;
     --greenAlphaGradient: #31cc6a4d;
     --darkGreen: #18a979;
+    --blackGreen: #123f30;
     --red: #ff5555;
     --redAlpha: #d73e3678;
     --redAlphaGradient: #e8201236;
     --darkRed: #d73e36;
+    --blackRed: #79150f;
     --orange: #ff8124;
     --orangeAlpha: #b16649d9;
     --blue: #6f9ffff5;

src/index.js

@@ -20,6 +20,8 @@ import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-http-backend";
 import {initReactI18next} from "react-i18next";
+import toast, {ToastBar, Toaster} from "react-hot-toast";
+import Icon from "./components/Icon/Icon";
 
 
 const sagaMiddleware = createSagaMiddleware();
@@ -72,6 +74,59 @@ i18n
         },
     });
 
+const Toast = () => {
+    return <Toaster position="top-center" toastOptions={
+        {
+            className: `${i18n.language !== "fa" ? "ltr" : "rtl"}`,
+            style: {
+                width: "100%",
+                padding: "0.3vh 0.8vw 0.3vh 0.8vw",
+                color: "white",
+                lineHeight: "3vh",
+                fontSize: "3.3vw",
+                borderRadius: "4px",
+                background: "var(--mainContent)",
+
+            },
+            success: {
+                style: {
+                    background: "var(--darkGreen)",
+                    border: "2px solid var(--darkGreen)"
+                },
+            },
+            error: {
+                style: {
+                    background: "var(--darkRed)",
+                    border: "2px solid var(--darkRed)"
+                },
+            },
+            custom: {
+                style: {
+                    background: "var(--Orange)",
+                },
+            },
+        }} containerStyle={{}}>
+        {(t) => {
+            return <ToastBar toast={t}>
+                {({ icon, message }) => (
+                    <>
+                        {t.type !== 'loading' && (
+                            /*<button >بستن</button>*/
+                            <Icon
+                                iconName="icon-cancel-circle-1 fs-03 flex "
+                                iconClass={`toastIcon cursor-pointer mx-2`}
+                                onClick={() => toast.dismiss(t.id)}
+                            />
+                        )}
+                        {message}
+                    </>
+                )}
+            </ToastBar>
+        }
+        }
+    </Toaster>;
+}
+
 
 //React query client
 const queryClient = new QueryClient()
@@ -84,6 +139,7 @@ root.render(
         <StyleRoot>
             <QueryClientProvider client={queryClient}>
                 <Main baseURL={PUBLIC_URL}/>
+                <Toast/>
                 <ReactQueryDevtools initialIsOpen={false}/>
             </QueryClientProvider>
         </StyleRoot>

src/main/Mobile/Mobile.js

@@ -72,33 +72,6 @@ const Mobile = () => {
         meta.description.content = description ? description : " "
     }, [title, description])
 
-    const Toast = () => <Toaster position="top-center" toastOptions={
-        {
-            className: "rtl",
-            style: {
-                padding: "0.3vh 0.8vw 0.3vh 0",
-                color: "white",
-                lineHeight: "3vh",
-                fontSize: "3.3vw",
-                borderRadius: "4px",
-                background: "var(--mainContent)",
-            },
-            success: {
-                style: {
-                    background: "var(--darkGreen)",
-                },
-            },
-            error: {
-                style: {
-                    background: "var(--darkRed)",
-                },
-            },
-            custom: {
-                style: {
-                    background: "var(--Orange)",
-                },
-            },
-        }} containerStyle={{}}/>
 
     if (isLoading) return <FullWidthLoading/>
 
@@ -123,7 +96,6 @@ const Mobile = () => {
                 </Route>
             </Routes>
             <ReactTooltip data-html={true} data-effect="float"/>
-            <Toast/>
             <SideMenu/>
         </div>
     );

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/ActiveSessions.js

@@ -10,6 +10,7 @@ import Error from "../../../../../../../../../../../../components/Error/Error";
 import Loading from "../../../../../../../../../../../../components/Loading/Loading";
 import moment from "moment-jalaali";
 import Session from "./components/Session/Session";
+import Date from "../../../../../../../../../../../../components/Date/Date";
 
 const ActiveSessions = () => {
 
@@ -39,7 +40,7 @@ const ActiveSessions = () => {
                 <span className={`text-orange mb-05 fs-0-8 width-100 text-center py-05`} style={{backgroundColor: 'var(--tableHeader)'}}>{t("ActiveSessions.thisSession")}</span>
                 <div className={`row jc-between width-100 py-05 px-2`}>
                     <div className={`col-40 column jc-center ai-start pr-05`}>
-                        <span>{moment(current?.lastAccess * 1000).format("HH:mm:ss , jYY/jMM/jDD")}</span>
+                        <span>{moment(current?.lastAccess * 1000).format("HH:mm:ss")} , <Date date={current?.lastAccess * 1000}/></span>
                         {other.length > 0 ?
                             <span className={`cursor-pointer text-red fs-0-7`} onClick={expireAllSessions}>
                             {t("ActiveSessions.closeOtherSessions")}</span> : ""}

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Session/Session.js

@@ -6,6 +6,7 @@ import {Trans, useTranslation} from "react-i18next";
 import {images} from "../../../../../../../../../../../../../../assets/images";
 import {toast} from "react-hot-toast";
 import {expireSessionById} from "js-api-client";
+import Date from "../../../../../../../../../../../../../../components/Date/Date";
 
 const Session = ({list, reloadSessionsList}) => {
     const {t} = useTranslation();
@@ -36,7 +37,7 @@ const Session = ({list, reloadSessionsList}) => {
             <div className={`column ai-end`}>
                 <div className={`row jc-between width-100`}>
                     <div className={`col-40 column jc-center ai-start pr-05`}>
-                        <span>{moment(list?.lastAccess * 1000).format("HH:mm:ss , jYY/jMM/jDD")}</span>
+                        <span>{moment(list?.lastAccess * 1000).format("HH:mm:ss")} , <Date date={list?.lastAccess * 1000}/></span>
                         <span className={`cursor-pointer text-red fs-0-7`} onClick={expireSession}>
                             {isLoading ?
                                 <img className={`${classes.thisLoading}`}

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/TransactionHistory.js

@@ -24,8 +24,8 @@ const TransactionHistory = () => {
     const [query, setQuery] = useState({
         "coin": null, // optional
         "category": null, // optional [DEPOSIT, FEE, TRADE, WITHDRAW, ORDER_CANCEL, ORDER_CREATE, ORDER_FINALIZED]
-        "startTime": moment().subtract(1, 'months').startOf("day").valueOf(),
-        "endTime": moment().endOf("day").valueOf(),
+        "startTime": null,
+        "endTime": null,
         "ascendingByTime": false,
         "limit": 10,
         "offset": 0
@@ -108,13 +108,13 @@ const TransactionHistory = () => {
         })
     }
     const startDateHandler = (dateRange) => {
-        if (dateRange.length === 2) {
-            setQuery({
-                ...query,
-                startTime: moment.unix(dateRange[0].toUnix()).startOf("day").valueOf(),
-                endTime: moment.unix(dateRange[1].toUnix()).endOf("day").valueOf()
-            })
-        }
+        const start = dateRange[0]  ? moment.unix(dateRange[0].toUnix()).startOf("day").valueOf() : null;
+        const end = dateRange[1]  ? moment.unix(dateRange[1].toUnix()).endOf("day").valueOf() : null;
+        setQuery({
+            ...query,
+            startTime: start,
+            endTime: end
+        })
     }
 
     const content = () => {
@@ -126,6 +126,21 @@ const TransactionHistory = () => {
         </>
     }
 
+    const periodTextHandler = () => {
+        if (query?.startTime && query?.endTime) return <>
+            <span className={`mx-05`}>{t("from")}</span>
+            <span><Date date={query?.startTime}/></span>
+            <span className={`mx-05`}>{t("until")}</span>
+            <span><Date date={query?.endTime}/></span>
+        </>
+        if (query?.startTime) return <>
+            <span className={`mx-05`}>{t("from")}</span>
+            <span><Date date={query?.startTime}/></span>
+            <span className={`mx-05`}>{t("until")}</span>
+            <span><Date date={moment().endOf("day").valueOf()}/></span>
+        </>
+    }
+
     return (
         <div className={`width-100 column ai-center jc-start height-100 px-3 py-1 ${classes.container}`}>
             <div className={`width-100 border card-bg px-5 py-2 rounded-8 column jc-between ai-center`}>
@@ -173,14 +188,17 @@ const TransactionHistory = () => {
                 <TextInput
                     datePicker={true}
                     plugins={[
-                        <DatePanel />
+                        <DatePanel position="bottom"/>
                     ]}
                     lead={t('TransactionHistory.period')}
                     type="input"
                     onChange={startDateHandler}
                     value={[query.startTime, query.endTime]}
                     dateSeparator={" " + t('to') + " "}
                     range
+                    hideOnScroll
+                    dataPanelPosition="Bottom"
+                    position="bottom-center"
                     customClass={`width-100 my-1 ${classes.thisInput}`}
                 />
 
@@ -200,10 +218,7 @@ const TransactionHistory = () => {
                         <h3 className={``}>{t("txHistory.title")}</h3>
                     </div>
                     <div className={`row mr-1 text-gray fs-0-8`}>
-                        <span className={`mx-05`}>{t("from")}</span>
-                        <span><Date date={query?.startTime}/></span>
-                        <span className={`mx-05`}>{t("until")}</span>
-                        <span><Date date={query?.endTime}/></span>
+                        {periodTextHandler()}
                     </div>
                 </div>
                 <div>

src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/SubHeader.js

@@ -13,8 +13,10 @@ const SubHeader = (props) => {
     const [expand, setExpand] = useState(false)
     const location = useLocation()
 
+    const expandable = !(location.pathname.includes(RoutesName.SettingsRelative) || location.pathname.includes(RoutesName.TxHistoryRelative))
+
     const clickHandler = () => {
-        if (!(location.pathname.includes(RoutesName.SettingsRelative) || RoutesName.TxHistoryRelative) ) {
+        if (expandable) {
             setExpand(true)
         }
     }

src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/components/MarketSubHeader/MarketSubHeader.js

@@ -21,22 +21,22 @@ const MarketSubHeader = () => {
         <>
             <div className={`width-100 row jc-between ai-center my-05`}>
                <span >{t("header.lastPrice")}</span>
-               <span>{new BN(lastPrices[activePair.symbol] || 0).toFormat()+"  "+t("currency." + activePair.quoteAsset)}</span>
             </div>
-
-            <div className={`width-100 row jc-between ai-center my-05`}>
-                <span>{t("header.availableBalance")}</span>
-                <div className={`row ai-center ${classes.inventory} mt-05`}>
-                    <div className=" flex ai-center jc-end">
-                        {/*<span>{ new BN (base).decimalPlaces(activePair.baseAssetPrecision).toFormat()}</span>*/}
-                        <span className={`pl-05`}>{ new BN (base).toFormat()}</span>
-                        <span className={`pr-05`}>{t("currency." + activePair.baseAsset)}</span>
-                    </div>
-                    <span className={`text-orange mx-2`}>|</span>
-                    <div className=" flex ai-center  jc-start">
-                        <span className={`pl-05`}>{ new BN(quote).toFormat()}</span>
-                        <span className={`pr-05`}>{t("currency." + activePair.quoteAsset)}</span>
-                    </div>
+            <div className={`width-100 row jc-between ai-start mb-1`}>
+                <span>{new BN(lastPrices[activePair.symbol] || 0).toFormat()+"  "+t("currency." + activePair.quoteAsset)}</span>
+            </div>
+            <div className={`width-100 row jc-between ai-start my-05`}>
+                <div>{t("header.availableBalance")}</div>
+            </div>
+            <div className={`width-100 row jc-start ai-start mb-1`}>
+                <div className=" row ai-center jc-end">
+                    <span className={`pl-05`}>{ new BN (base).toFormat()}</span>
+                    <span className={`pr-05`}>{t("currency." + activePair.baseAsset)}</span>
+                </div>
+                <span className={`text-orange mx-3`}>|</span>
+                <div className=" row ai-center  jc-end">
+                    <span className={`pl-05`}>{ new BN(quote).toFormat()}</span>
+                    <span className={`pr-05`}>{t("currency." + activePair.quoteAsset)}</span>
                 </div>
             </div>
         </>