Release v1.0.7-beta.17

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opex",
-  "version": "v1.0.5-beta.16",
+  "version": "v1.0.7-beta.17",
   "homepage": "",
   "private": true,
   "dependencies": {
@@ -31,7 +31,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

@@ -2,8 +2,12 @@ import React from "react";
 import Icon from "../Icon/Icon";
 import Select from "react-select";
 import classes from "./TextInput.module.css";
-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 DatePicker from "react-multi-date-picker";
 import "react-multi-date-picker/styles/backgrounds/bg-dark.css"
 import {useSelector} from "react-redux";
@@ -28,6 +32,7 @@ const TextInput = (props) => {
     } = props
 
     const theme = useSelector((state) => state.global.theme)
+    const type = useSelector((state) => state.exchange.dateType)
 
     const optionClassHandler = (state) => {
         let className = classes.selectOptions
@@ -42,6 +47,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
     let alertSection = null
@@ -78,8 +98,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}
@@ -121,3 +141,6 @@ const TextInput = (props) => {
 
 
 export default TextInput;
+
+
+

src/index.css

@@ -182,10 +182,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;
@@ -222,10 +224,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,9 @@ 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();
 const rootReducer = combineReducers({
@@ -73,6 +76,59 @@ i18n
     });
 
 
+const Toast = () => {
+    return <Toaster position="top-right" toastOptions={
+        {
+            className: `${i18n.language !== "fa" ? "ltr" : "rtl"}`,
+            style: {
+                width: "100%",
+                padding: "0.3vh 0.8vw 0.3vh 0.8vw",
+                color: "white",
+                lineHeight: "3vh",
+                fontSize: "0.8vw",
+                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()
@@ -85,6 +141,7 @@ root.render(
         {/*<StyleRoot>*/}
         <QueryClientProvider client={queryClient}>
             <Main baseURL={PUBLIC_URL}/>
+            <Toast/>
             <ReactQueryDevtools initialIsOpen={false}/>
         </QueryClientProvider>
         {/*</StyleRoot>*/}

src/main/Browser/Browser.js

@@ -59,35 +59,6 @@ const Browser = () => {
         meta.description.content = description ? description : " "
     }, [title, description])
 
-    const Toast = () => <Toaster position="bottom-right" toastOptions={
-        {
-            className: "rtl",
-            style: {
-                padding: "0.3vh 0.8vw 0.3vh 0.8vw",
-                color: "white",
-                lineHeight: "3vh",
-                fontSize: "0.8vw",
-                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/>
 
     if (hasError) return <FullWidthError/>
@@ -111,7 +82,6 @@ const Browser = () => {
                 </Route>
             </Routes>
             <Tooltip id="opex-tooltip"/>
-            <Toast/>
         </>
     );
 };

src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Security/components/ActiveSessions/ActiveSessions.js

@@ -10,6 +10,7 @@ import Icon from "../../../../../../../../../../../../components/Icon/Icon";
 import {toast} from "react-hot-toast";
 import {useGetUserActiveSessions} from "../../../../../../../../../../../../queries";
 import {expireAllSessionsExceptCurrent} from "js-api-client";
+import Date from "../../../../../../../../../../../../components/Date/Date";
 
 const ActiveSessions = () => {
     const {t} = useTranslation();
@@ -39,7 +40,7 @@ const ActiveSessions = () => {
                       style={{backgroundColor: 'var(--tableHeader)'}}>{t("ActiveSessions.thisSession")}</span>
                 <div className={`row jc-between width-100 py-05 px-1`}>
                     <div className={`col-40 column jc-center ai-center`}>
-                        <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/Browser/Pages/UserPanel/Sections/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-center`}>
-                        <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/Browser/Pages/UserPanel/Sections/Content/components/TransactionHistory/TransactionHistory.js

@@ -12,6 +12,7 @@ import Button from "../../../../../../../../components/Button/Button";
 import Date from "../../../../../../../../components/Date/Date";
 import TransactionHistoryTable from "./components/TransactionHistoryTable/TransactionHistoryTable";
 import ToggleSwitch from "../../../../../../../../components/ToggleSwitch/ToggleSwitch";
+import i18n from "i18next";
 
 const TransactionHistory = () => {
 
@@ -24,8 +25,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
@@ -37,16 +38,6 @@ const TransactionHistory = () => {
         isLastPage: data?.length < query.limit
     }
 
-    /*console.log("Math.max", Math.max())*/
-
-    /*console.log("Math.max", Math.max(...data.map(o => o.y)))
-    console.log("data", data[data?.length-1]?.id)
-    console.log("data", data?.length)
-*/
-    /*useEffect(()=>{
-        refetch()
-    },[query?.ascendingByTime])*/
-
     const isFirst = useRef(true);
 
     useEffect(() => {
@@ -99,27 +90,40 @@ 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 = () => {
         if (isLoading) return <div style={{height: "40vh"}}><Loading/></div>
         if (error) return <div style={{height: "40vh"}}><Error/></div>
         if (data?.length === 0) return <div style={{height: "40vh"}} className={`flex jc-center ai-center`}>{t("noTx")}</div>
-
-
         else return <>
             <TransactionHistoryTable txs={data} offset={query?.offset} />
         </>
     }
 
+    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={`column px-1 pt-1`}>
@@ -136,7 +140,7 @@ const TransactionHistory = () => {
                     value: query?.coin,
                     label:  query?.coin ? t('currency.'+ query?.coin) : t('all'),
                 }}
-                onchange={(e) => setQuery({...query, coin: e.value})}
+                onchange={(e) => setQuery({...query, coin: e.value, offset:0})}
                 customClass={`width-24 ${classes.thisInput}`}
             />
             <TextInput
@@ -149,7 +153,7 @@ const TransactionHistory = () => {
                     value: query?.category,
                     label: query?.category ? t('TransactionCategory.'+ query?.category) : t('all'),
                 }}
-                onchange={(e) => setQuery({...query, category: e.value})}
+                onchange={(e) => setQuery({...query, category: e.value, offset:0})}
                 customClass={`width-24 ${classes.thisInput}`}
             />
             <TextInput
@@ -178,10 +182,13 @@ const TransactionHistory = () => {
                 lead={t('TransactionHistory.period')}
                 type="input"
                 onChange={startDateHandler}
+                /*value={[query.startTime, query.endTime]}*/
                 value={[query.startTime, query.endTime]}
-
                 dateSeparator={" " + t('to') + " "}
                 range
+                hideOnScroll
+                dataPanelPosition="Bottom"
+                position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`}
                 customClass={`width-24 ${classes.thisInput}`}
             />
 
@@ -193,10 +200,7 @@ const TransactionHistory = () => {
                 <div className={`row jc-center ai-center`}>
                     <h3 className={``}>{t("txHistory.title")}</h3>
                     <div className={`row mr-1 text-gray`}>
-                        <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>