Refactor Deposit & Withdrawal Based on Gateway Concept and New Currency Service

public/assets/locales/fa/translation.json

@@ -337,8 +337,6 @@
     "cancel": "لغو",
     "seconds": "ثانیه",
     "submitPaymentReq": "ثبت درخواست واریز",
-    "noInventory": "موجودی کافی نیست !",
-    "allowableWithdraw": "حداقل مقدار مجاز برداشت رعایت نشده است.",
     "fillAddress": "وارد کردن آدرس الزامیست.",
     "important": "مهم",
     "DepositTETHContentBefore": "فقط ETH تستی شبکه Ropsten مورد قبول قرار می گیرد! برای دریافت رایگان به ",
@@ -354,7 +352,11 @@
     "network": "شبکه",
     "selectNetwork": " شبکه را انتخاب کنید",
     "gettingAddress": "درحال گرفتن آدرس...",
-    "errorGettingAddress": "خطا در گرفتن آدرس"
+    "errorGettingAddress": "خطا در گرفتن آدرس",
+
+    "noInventory": "موجودی کافی نیست !",
+    "noInventorywithdrawFee": "با احتساب کارمزد، موجودی کافی نیست !",
+    "allowableWithdraw": "حداقل مقدار مجاز برداشت رعایت نشده است."
   },
   "CallbackPage": {
     "ok": "واریز وجه با موفقیت انجام شد.",
@@ -380,6 +382,7 @@
     "inventory": "موجودی بعد  از تراکنش",
     "freeWallet": "موجودی قابل برداشت",
     "minWithdraw": "حداقل مقدار برداشت",
+    "maxWithdrawal": "حداکثر مقدار برداشت",
     "minDeposit": "حداقل مقدار واریز",
     "maxWithdraw": "سقف برداشت روزانه شما",
     "maxMonthWithdraw": "سقف برداشت ماهانه شما",

src/components/NumberInput/NumberInput.js

@@ -62,7 +62,7 @@ const NumberInput = (props) => {
                 customClass="hint-icon"
             />
             <div className="column pt-05">
-                { alerts.map((alert , index) => <span key={index} className={`${classes.alert} pr-05 `}>{alert}</span>) }
+                { alerts?.map((alert , index) => <span key={index} className={`${classes.alert} pr-05 `}>{alert}</span>) }
             </div>
         </div>
     }

src/components/Popup/Popup.js

@@ -11,13 +11,17 @@ import {useGetCurrencyInfo} from "../../queries";
 import Loading from "../Loading/Loading";
 import Error from "../Error/Error";
 import PopupAddress from "./PopupAddress/PopupAddress";
+import i18n from "i18next";
+import {getCurrencyNameOrAlias} from "../../utils/utils";
 
 const Popup = ({currency, closePopup}) => {
 
     const {t} = useTranslation();
 
     const isLogin = useSelector((state) => state.auth.isLogin)
 
+    const language = i18n.language
+    const currencies = useSelector((state) => state.exchange.currencies)
 
     const [networkName, setNetworkName] = useState({value: 0, error: []});
 
@@ -75,7 +79,7 @@ const Popup = ({currency, closePopup}) => {
     return (
         <div className={`width-100 column jc-between ai-center px-1 py-1 appear-animation card-border ${classes.container}`}>
             <div className={`${classes.header} width-100`}>
-                <h3>{t("deposit")} <span>{t("currency." + currency)}</span></h3>
+                <h3>{t("deposit")} <span>{getCurrencyNameOrAlias(currencies[currency], language)}</span></h3>
             </div>
             <div className={`${classes.content} width-100 column jc-center ai-center`}>
                 {content()}

src/components/TextInput/TextInput.js

@@ -35,17 +35,21 @@ const TextInput = (props) => {
     const type = useSelector((state) => state.exchange.dateType)
 
     const optionClassHandler = (state) => {
-        let className = classes.selectOptions
+        let className = classes.selectOptions;
 
         if (state.isFocused) {
-            className = className + " " + classes.isFocused
+            className += " " + classes.isFocused;
         }
         if (state.isSelected) {
-            className = className + " " + classes.isSelected
+            className += " " + classes.isSelected;
+        }
+        if (state.isDisabled) {
+            className += " " + classes.disabledOption; // اضافه کردن کلاس برای گزینه‌های غیرفعال
         }
 
         return className;
-    }
+    };
+
 
     const calenderTypeHandler = () => {
         if (type === "Hijri" && i18n.language === "en") {

src/components/TextInput/TextInput.module.css

@@ -209,4 +209,10 @@
     /*width: 1px !important;*/
 }
 
+.disabledOption {
+    color: var(--gray) !important;
+    background-color: var(--deActive) !important;
+    cursor: not-allowed !important;
+}
+
 

src/index.js

@@ -76,6 +76,7 @@ i18n
     });
 
 
+
 const Toast = () => {
     return <Toaster position="top-right" toastOptions={
         {

src/main/Browser/Browser.js

@@ -23,6 +23,7 @@ import Guide from "./Pages/Info/Guide/Guide";
 import Rules from "./Pages/Info/Rules/Rules";
 import ContactUs from "./Pages/Info/ContactUs/ContactUs";
 import EasyTrading from "./Pages/EasyTrading/EasyTrading";
+import axios from "axios";
 
 const Browser = () => {
     const query = useQuery();
@@ -34,6 +35,8 @@ const Browser = () => {
     const title = useSelector((state) => state.exchange.title)
     const description = useSelector((state) => state.exchange.description)
 
+    const currencies = useSelector((state) => state.exchange.currencies)
+    const fees = useSelector((state) => state.exchange.fees)
 
     theme === "DARK" ? document.body.classList.add('dark') : document.body.classList.remove('dark');
 

src/main/Browser/Pages/AllMarket/components/AllMarketInfo/AllMarketInfo.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import classes from './AllMarketInfo.module.css'
 import Icon from "../../../../../../components/Icon/Icon";
 import AllMarketInfoCard from "./components/AllMarketInfoCard/AllMarketInfoCard";
@@ -9,6 +9,8 @@ import Loading from "../../../../../../components/Loading/Loading";
 import Error from "../../../../../../components/Error/Error";
 import {setMarketInterval} from "../../../../../../store/actions";
 import {useTranslation} from "react-i18next";
+import i18n from "i18next";
+import {getCurrencyNameOrAlias} from "../../../../../../utils/utils";
 
 const AllMarketInfo = () => {
 
@@ -21,13 +23,22 @@ const AllMarketInfo = () => {
     const interval = useSelector((state) => state.global.marketInterval)
     const quote = activeCurrency === "" ? null : activeCurrency
 
+    const language = i18n.language
+    const currencies = useSelector((state) => state.exchange.currencies)
+
     const {data: overview, isLoading, error} = useOverview(null, interval, quote)
-    const {data: currencies} = useGetQuoteCurrencies()
+    const {data: quoteCurrencies, isLoading:quoteCurrenciesIsLoading, error:quoteCurrenciesError} = useGetQuoteCurrencies()
+
+    useEffect(() => {
+        if (quoteCurrencies?.length > 0) {
+            setActiveCurrency(quoteCurrencies[0]);
+        }
+    }, [quoteCurrencies]);
 
 
     const content = () => {
-        if (isLoading) return <div style={{height: "40vh"}}><Loading/></div>
-        if (error) return <div style={{height: "40vh"}}><Error/></div>
+        if (isLoading || quoteCurrenciesIsLoading) return <div style={{height: "40vh"}}><Loading/></div>
+        if (error || quoteCurrenciesError) return <div style={{height: "40vh"}}><Error/></div>
         else return <>
             {card ?
                 <AllMarketInfoCard data={overview} activeCurrency={activeCurrency}/>
@@ -44,8 +55,8 @@ const AllMarketInfo = () => {
                     <Icon iconName={`${card ? 'icon-row' : 'icon-grid'} fs-02 flex cursor-pointer hover-text`} customClass={`ml-05`} onClick={()=>setCard(prevState => !prevState)}/>
                     <h1 className={`mr-05 ml-025 cursor-pointer hover-text`}  onClick={()=>setActiveCurrency("")}>{t("market.title")}</h1>
                     <div className={`row jc-center ai-center fs-0-8 mr-1`}>
-                        {currencies?.map((currency) =>
-                            <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeCurrency === currency && classes.active}`} onClick={() => setActiveCurrency(currency)} key={currency}>{t("currency." + currency)}</span>
+                        {quoteCurrencies?.map((currency) =>
+                            <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeCurrency === currency && classes.active}`} onClick={() => setActiveCurrency(currency)} key={currency}>{getCurrencyNameOrAlias(currencies[currency], language)}</span>
                         )}
                     </div>
                 </div>

src/main/Browser/Pages/AllMarket/components/AllMarketInfo/components/AllMarketInfoCard/AllMarketInfoCard.js

@@ -3,7 +3,7 @@ import classes from './AllMarketInfoCard.module.css'
 import {useTranslation} from "react-i18next";
 import {images} from "../../../../../../../../assets/images";
 import Button from "../../../../../../../../components/Button/Button";
-import {BN} from "../../../../../../../../utils/utils";
+import {BN, getCurrencyNameOrAlias} from "../../../../../../../../utils/utils";
 import {setActivePairInitiate} from "../../../../../../../../store/actions";
 import {Panel} from "../../../../../../Routes/routes";
 import {useNavigate} from "react-router-dom";
@@ -16,6 +16,8 @@ const AllMarketInfoCard = ({data, activeCurrency}) => {
     const {t} = useTranslation();
     const navigate = useNavigate();
     const dispatch = useDispatch();
+    const language = i18n.language
+    const currencies = useSelector((state) => state.exchange.currencies)
     const allExchangeSymbols = useSelector((state) => state.exchange.symbols)
 
     const [showButton, setShowButton] = useState(null)
@@ -53,33 +55,38 @@ const AllMarketInfoCard = ({data, activeCurrency}) => {
                     <div key={index} className={`${classes.item} card-border card-bg column cursor-pointer`} style={backgroundBar(tr.priceChangePercent.toString())}
                          onMouseEnter={()=>MouseEnterEventHandler(index)} onMouseLeave={MouseLeaveEventHandler}>
                         <div className={`column jc-between ai-center pt-2 pb-3`} style={{height:"80%"}}>
-                            <div className={`row jc-between ai-center width-100 px-1`}>
+                            <div className={`column jc-start ai-start width-100 px-1`}>
                                 <div className={`row jc-center ai-center`}>
-                                    <img  src={images[tr?.base]} alt={tr?.base}
+                                    <img src={currencies[tr?.base]?.icon} alt={tr?.base}
                                           title={tr?.base} className={`img-md-plus ml-05`}/>
 
-                                    <span className={`fs-01`}>{activeCurrency ? t("currency." + tr?.base) : tr?.base + " / " + tr?.quote}</span>
+                                    <span className={`fs-01`}>{activeCurrency ?
+                                        <>
+                                            {getCurrencyNameOrAlias(currencies[tr?.base], language)}
+                                            <span className={`text-gray fs-0-8 mr-05`}>{tr?.base}</span>
+                                        </>
+                                        : tr?.base + " / " + tr?.quote}</span>
                                 </div>
                                 <div className={`flex jc-end ai-center fs-0-6`}>
-                                        <span className={`${tr.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr mr-05`}>{new BN(tr.priceChangePercent).toFormat(2)} %</span>
+                                    <span className={`flex ${i18n.language !== "fa" ? 'jc-start' : 'jc-end'} ai-center ${tr.priceChangePercent > 0 ? "text-green" : tr.priceChangePercent < 0 ? "text-red" : ""} direction-ltr`}>{tr.priceChangePercent === 0 ? "0 %" : `${new BN(tr.priceChangePercent).toFormat(2)} %`}</span>
                                 </div>
                             </div>
                             <div className={`column px-1 width-100 fs-0-7`}>
                                 <div className={`row jc-between ai-center`}>
                                     <span className={``}>{t("MarketInfo.lastPrice")}:</span>
-                                    <span className={`${tr.priceChangePercent > 0 ? "text-green" : "text-red"} fs-01`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-025`}>{t("currency." + tr?.quote)}</span></span>
+                                    <span className={`${tr.priceChangePercent > 0 ? "text-green" : "text-red"} fs-01`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-025`}>{tr?.quote}</span></span>
                                 </div>
                                 <div className={`row jc-between ai-center`}>
                                     <span className={`text-gray`}>{t("MarketInfo.lowPrice")}:</span>
-                                    <span>{new BN(tr.lowPrice).toFormat()}</span>
+                                    <span>{new BN(tr.lowPrice).decimalPlaces(currencies[tr?.quote]?.precision ?? 0).toFormat()} <span className={`fs-0-7 mr-05`}>{tr?.quote}</span></span>
                                 </div>
                                 <div className={`row jc-between ai-center`}>
                                     <span className={`text-gray`}>{t("MarketInfo.highPrice")}:</span>
-                                    <span>{new BN(tr.highPrice).toFormat()}</span>
+                                    <span>{new BN(tr.highPrice).decimalPlaces(currencies[tr?.quote]?.precision ?? 0).toFormat()} <span className={`fs-0-7 mr-05`}>{tr?.quote}</span></span>
                                 </div>
                                 <div className={`row jc-between ai-center`}>
                                     <span className={`text-gray`}>{t("MarketInfo.volume")}:</span>
-                                    <span>{new BN(tr.volume).toFormat()}</span>
+                                    <span>{new BN(tr.volume).decimalPlaces(currencies[tr?.base]?.precision ?? 0).toFormat()} <span className={`fs-0-7 mr-05`}>{tr?.base}</span></span>
                                 </div>
                             </div>
                         </div>