Add Transaction History

package.json

@@ -29,6 +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-number-format": "^4.9.3",
     "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",

public/assets/locales/en/translation.json

@@ -1,8 +1,8 @@
 {
   "title": "OPEX",
-  "signIn":"Sign In",
+  "signIn": "Sign In",
   "signUp": "Sign Up",
-  "signOut":"Sign Out",
+  "signOut": "Sign Out",
   "date": "Date",
   "time": "Time",
   "volume": "Volume",
@@ -15,9 +15,8 @@
   "max": "Max",
   "buy": "Buy",
   "sell": "Sell",
-  "all": "All",
   "orderType": "Order Type",
-  "status" : "Status",
+  "status": "Status",
   "pleaseLogin" : "Please Log In!",
   "comingSoon" : "Coming Soon!",
   "deposit": "Deposit",
@@ -28,6 +27,12 @@
   "commission": "Commission",
   "nextStep": "Next Step",
   "prevStep": "Prev Step",
+  "next": "next",
+  "all": "all",
+  "prev": "prev",
+  "ask": "ask",
+  "bid": "bid",
+  "to": "to",
   "submit": "Submit",
   "username": "Username",
   "password": "Password",
@@ -44,21 +49,28 @@
   "noTx": "There is no transaction!",
   "close": "Close",
   "unit": "Unit",
+  "from": "from",
+  "row": "Row",
+  "until": "until",
+  "withPrice": "with price",
+  "description": "Description",
+  "first": "First",
   "offline": "Check your connection!",
-  "improperMobileView ": "Not optimized for mobile view.",
+  "improperMobileView": "Not optimized for mobile view.",
   "home": "Home",
   "country": {
-    "iran" : "I. R. IRAN",
-    "germany" : "Germany",
+    "iran": "IRAN",
+    "germany": "Germany",
     "uk": "United Kingdom",
-    "turkey" : "Turkey"
+    "turkey": "Turkey",
+    "uzbekistan": "Uzbekistan"
   },
   "currency": {
-    "IRT" : "IRT",
-    "Euro" : "Euro",
-    "USD" : "USD",
-    "BTC" : "BTC",
-    "ETH" : "ETH",
+    "IRT": "IRT",
+    "Euro": "Euro",
+    "USD": "USD",
+    "BTC": "BTC",
+    "ETH": "ETH",
     "USDT": "USDT",
     "TBTC": "TBTC",
     "TETH": "TETH",
@@ -124,7 +136,7 @@
     "LIMIT_MAKER": "Limit Maker"
   },
   "header": {
-    "lastPrice" : "Last Price",
+    "lastPrice": "Last Price",
     "availableBalance" : "Available Balance",
     "free": "Available",
     "locked": "Locked",
@@ -149,16 +161,20 @@
   "technical": {
     "title": "Technical"
   },
+  "txHistory": {
+    "title": "Transactions History"
+  },
   "messages": {
     "title": "Messages"
   },
   "settings": {
     "title": "Settings"
   },
   "Languages": {
-    "Persian": "فارسی",
-    "English": "English",
-    "Arabic": "عربي"
+    "fa": "فارسی",
+    "en": "English",
+    "ar": "عربي",
+    "uzb": "Oʻzbekcha"
   },
   "Theme": {
     "Light": "Light",
@@ -176,7 +192,7 @@
     "title": "Order",
     "minOrder":  "Minimum allowed order is {{min}} {{currency}}",
     "maxOrder":  "Maximum allowed order is {{max}} {{currency}}",
-    "divisibility": "Divisibility !",
+    "divisibility": "The entered value must be divisible by {{mod}} !",
     "notEnoughBalance": "Insufficient Balance ",
     "availableAmount": "Available Amount",
     "bestOffer": "Best Offer",
@@ -232,6 +248,21 @@
     "showZeroBalance": "Do not show zero balance.",
     "estimateAlert": "The equivalent amount is calculated based on the highest buy offer"
   },
+  "TransactionHistory": {
+    "coin": "Coins",
+    "category": "Categories",
+    "size": "Per page",
+    "period" : "Period"
+  },
+  "TransactionCategory": {
+    "DEPOSIT": "Deposit",
+    "FEE": "Fee",
+    "TRADE": "Trade",
+    "WITHDRAW": "Withdraw",
+    "ORDER_CANCEL": "Cancel Order",
+    "ORDER_CREATE": "Create Order",
+    "ORDER_FINALIZED": "Finalized Order"
+  },
   "DepositWithdraw": {
     "title": "Deposit / Withdraw",
     "success": "The Address is copied.",
@@ -272,7 +303,7 @@
   },
   "IPGErrorCode": {
     "13003": "You are not allowed to pay.",
-    "13004":"You have an unpaid request.",
+    "13004": "You have an unpaid request.",
     "13005": "Request locked.",
     "13007": "Unknown Error"
   },
@@ -608,9 +639,9 @@
   },
   "Footer": {
     "darkMode": "Dark Mode",
-    "aboutUs" : "About Us",
-    "contactUS" : "Contact Us",
-    "blog" : "Blog",
+    "aboutUs": "About Us",
+    "contactUS": "Contact Us",
+    "blog": "Blog",
     "guide": "Guide",
     "rules": "Rules",
     "api": "API",
@@ -628,10 +659,10 @@
     "tooManyFiles": "Uploading more than one photo is not allowed!",
     "errorMsgDefault": "Uploaded photo is not valid!"
   },
-  "errorPage" : {
-    "needKYC" : "Access denied for KYC status",
-    "reload" : "Try Again",
-    "errorText" : "Server connection error"
+  "errorPage": {
+    "needKYC": "Access denied for KYC status",
+    "reload": "Try Again",
+    "errorText": "Server connection error"
   },
   "aboutUs": {
     "title": "About US",
@@ -673,7 +704,6 @@
     "p8": "",
     "p9": "",
     "text4": ""
-
   },
   "transferFees": {
     "title": "Transfer Fees",

public/assets/locales/fa/translation.json

@@ -15,7 +15,6 @@
   "max": "حداکثر",
   "buy": "خرید",
   "sell": "فروش",
-  "all": "همه",
   "orderType": "نوع سفارش",
   "status": "وضعیت",
   "pleaseLogin": "لطفاً وارد شوید!",
@@ -28,6 +27,12 @@
   "commission": "کارمزد",
   "nextStep": "گام بعدی",
   "prevStep": "گام قبلی",
+  "next": "بعدی",
+  "all": "همه موارد",
+  "prev": "قبلی",
+  "ask": "فروش",
+  "bid": "خرید",
+  "to": "تا",
   "submit": "ثبت",
   "username": "نام کاربری",
   "password": "رمز ورود",
@@ -44,14 +49,21 @@
   "noTx": "تراکنشی وجود ندارد.",
   "close": "بستن",
   "unit": "واحد",
+  "from": "از",
+  "row": "ردیف",
+  "until": "تا",
+  "withPrice": "با قیمت",
+  "description": "توضیحات",
+  "first": "ابتدا",
   "offline": "اتصال اینترنت را بررسی کنید!",
-  "improperMobileView ": "فعلاً برای موبایل بهینه نشده است.",
+  "improperMobileView": "فعلاً برای موبایل بهینه نشده است.",
   "home": "صفحه‌ اصلی",
   "country": {
-    "iran" : "ایران",
-    "germany" : "آلمان",
+    "iran": "ایران",
+    "germany": "آلمان",
     "uk": "انگلستان",
-    "turkey" : "ترکیه"
+    "turkey": "ترکیه",
+    "uzbekistan": "ازبکستان"
   },
   "currency": {
     "IRT": "تومان",
@@ -149,16 +161,20 @@
   "technical": {
     "title": "تکنیکال"
   },
+  "txHistory": {
+    "title": "تاریخچه تراکنش‌ ها"
+  },
   "messages": {
     "title": "پیام ها"
   },
   "settings": {
     "title": "تنظیمات"
   },
   "Languages": {
-    "Persian": "فارسی",
-    "English": "English",
-    "Arabic": "عربي"
+    "fa": "فارسی",
+    "en": "English",
+    "ar": "عربي",
+    "uzb": "Oʻzbekcha"
   },
   "Theme": {
     "Light": "روشن",
@@ -194,7 +210,7 @@
     "success": "ثبت سفارش {{type}} {{reqAmount}} {{base}} با قیمت {{pricePerUnit}} {{quote}} با موفقیت انجام شد."
   },
   "LastTrades": {
-    "title": "معامله‌های اخیر"
+    "title": "معامله‌ های اخیر"
   },
   "charts": {
     "title": "نمودار قیمت",
@@ -232,6 +248,21 @@
     "showZeroBalance": "عدم نمایش موجودی صفر",
     "estimateAlert": "مبلغ دارایی معادل براساس بالاترین پیشنهاد خرید محاسبه شده"
   },
+  "TransactionHistory": {
+    "coin" : "ارز",
+    "category" : "نوع تراکنش",
+    "size" : "تعداد",
+    "period" : "بازه زمانی"
+  },
+  "TransactionCategory": {
+    "DEPOSIT" : "واریز",
+    "FEE" : "کارمزد",
+    "TRADE" : "معامله",
+    "WITHDRAW" : "برداشت",
+    "ORDER_CANCEL" : "لغو سفارش",
+    "ORDER_CREATE" : "ثبت سفارش",
+    "ORDER_FINALIZED" : "اتمام سفارش"
+  },
   "DepositWithdraw": {
     "title": "واریز/برداشت",
     "success": "آدرس کپی شد",
@@ -628,10 +659,10 @@
     "tooManyFiles": "آپلود بیشتر از یک عکس مجاز نیست!",
     "errorMsgDefault": "عکس آپلود شده معتبر نیست!"
   },
-  "errorPage" : {
-    "needKYC" : "دسترسی این بخش فقط برای کاربران احراز هویت شده مجاز است!",
-    "reload" : "تلاش مجدد",
-    "errorText" : "خطا در ارتباط با سرور"
+  "errorPage": {
+    "needKYC": "دسترسی این بخش فقط برای کاربران احراز هویت شده مجاز است!",
+    "reload": "تلاش مجدد",
+    "errorText": "خطا در ارتباط با سرور"
   },
   "aboutUs": {
     "title": "درباره ما",
@@ -673,7 +704,6 @@
     "p8": "",
     "p9": "",
     "text4": ""
-
   },
   "transferFees": {
     "title": "کارمزد انتقال",

src/components/TextInput/TextInput.js

@@ -2,9 +2,31 @@ import React from "react";
 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 persian from "react-date-object/calendars/persian";
+import {useSelector} from "react-redux";
+import i18n from "i18next";
+import "react-multi-date-picker/styles/backgrounds/bg-dark.css"
 
 const TextInput = (props) => {
-    const {customRef,readOnly,onchange,customClass,options, lead , after ,select ,alerts ,max , ...other} = props
+    const {customRef,readOnly,onchange,customClass,options, lead, ltr, after ,select ,alerts ,max, datePicker, ...other} = props
+
+    const isDark = useSelector((state) => state.global.isDark)
+
+    console.log("isDark", isDark)
+
+    const optionClassHandler = (state) => {
+        let className = classes.selectOptions
+        if (state.isFocused) {
+            className = className + " " + classes.isFocused
+        }
+        if (state.isSelected) {
+            className = className + " " + classes.isSelected
+        }
+        return className;
+    }
+
 
     let leadSection = null
     let afterSection = null
@@ -15,6 +37,8 @@ const TextInput = (props) => {
         readOnly={readOnly}
         onChange={onchange}
         max={max}
+        className={`${classes.input}`}
+        style={{direction: ltr && 'ltr'}}
         {...other}
     />
 
@@ -24,13 +48,34 @@ const TextInput = (props) => {
 
     if ( select ){
         inputSection = <Select
+            classNames={{
+                option: (state) => optionClassHandler(state),
+                menuList: () => `${classes.menuList}`,
+                menu: () => `${classes.menu}`,
+            }}
             onChange={onchange}
             options={options}
+            ref={customRef}
             classNamePrefix="select"
             className={`${classes.selectBox} select`}
             {...other}
         />
     }
+
+    if ( datePicker ){
+        inputSection = <DatePicker
+            className={`${isDark && "bg-dark"}`}
+
+            /*className="bg-dark"*/
+            locale={i18n.language === "fa" ? persian_fa : null}
+            calendar={i18n.language === "fa" ? persian : null}
+            onChange={onchange}
+            render={<input className={`${classes.datePicker}`}/>}
+            {...other}
+        >
+        </DatePicker>
+    }
+
     if(after){
         afterSection = <span className={`after ${classes.after}`}>{after}</span>
     }