Refactor Currency and Pair Management to Use New Services

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/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>

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

@@ -3,7 +3,7 @@ import classes from './AllMarketInfoTable.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 i18n from "i18next";
 import {setActivePairInitiate} from "../../../../../../../../store/actions";
 import {Panel} from "../../../../../../Routes/routes";
@@ -17,6 +17,9 @@ const AllMarketInfTable = ({data, activeCurrency}) => {
     const dispatch = useDispatch();
     const allExchangeSymbols = useSelector((state) => state.exchange.symbols)
 
+    const language = i18n.language
+    const currencies = useSelector((state) => state.exchange.currencies)
+
     const navigateToPanel = (symbol) => {
         const selectedPair = allExchangeSymbols.find( s => s.symbol === symbol)
         dispatch(setActivePairInitiate(selectedPair, 0))
@@ -25,17 +28,17 @@ const AllMarketInfTable = ({data, activeCurrency}) => {
 
     let head = (
         <div className="row text-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
-            <span className="width-15 flex jc-start ai-center">{t("MarketInfo.name")}</span>
+            <span className="width-20 flex jc-start ai-center">{t("MarketInfo.name")}</span>
             <span className="width-11 flex  jc-start ai-center">{t("MarketInfo.lastPrice")}</span>
-            <span className="width-9 flex jc-start ai-center">{t("MarketInfo.priceChange")}</span>
+            <span className="width-11 flex jc-start ai-center">{t("MarketInfo.priceChange")}</span>
             <span className="width-12 flex jc-start ai-center">{t("MarketInfo.lowPrice")}</span>
             <span className="width-12 flex jc-start ai-center">{t("MarketInfo.highPrice")}</span>
-            <span className="width-15 flex jc-start ai-center">{t("MarketInfo.volume")}</span>
+            <span className="width-14 flex jc-start ai-center">{t("MarketInfo.volume")}</span>
             {/*<span className="width-10 flex jc-start ai-center">{t("MarketInfo.lowPrice")}</span>
             <span className="width-10 flex jc-start ai-center">{t("MarketInfo.highPrice")}</span>*/}
-            <span className="width-10 flex jc-start ai-center">{t("MarketInfo.chart")}</span>{/*
-            <span className="width-8 flex jc-center ai-center">{t("MarketInfo.details")}</span>
-            <span className="width-8 flex jc-center ai-center">{t("MarketInfo.trade")}</span>*/}
+            <span className="width-9 flex jc-start ai-center">{t("MarketInfo.chart")}</span>
+            <span className="width-8 flex jc-center ai-center"></span>
+            <span className="width-8 flex jc-center ai-center"></span>
         </div>
     );
 
@@ -44,25 +47,36 @@ const AllMarketInfTable = ({data, activeCurrency}) => {
             {data.map((tr, index) => {
                 return (
                     <div className={`${classes.row} row rounded-5 border-bottom px-2 py-2`} key={index}>
-                         <span className="width-15 row jc-start ai-center">
-                             <img src={images[tr?.base]} alt={tr?.base}
+                        <span className="width-20 row jc-start ai-center">
+                             <img src={currencies[tr?.base]?.icon} alt={tr?.base}
                                   title={tr?.base} className={`img-md-plus ml-05`}/>
-                                 <span className={`fs-01 mr-05`}>{activeCurrency ? t("currency." + tr?.base) : tr?.base + " / " + tr?.quote}</span>
+                                 <span className={`fs-01 mr-05`}>{activeCurrency ?
+                                     <>
+                                         {getCurrencyNameOrAlias(currencies[tr?.base], language)}
+                                         <span className={`text-gray fs-0-8 mr-05`}>{tr?.base}</span>
+                                     </>
+
+                                     : tr?.base + " / " + tr?.quote}</span>
                          </span>
-                        <span className={`width-11 flex jc-start ai-center ${tr?.priceChangePercent > 0 ? "text-green" : "text-red"}`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-05`}>{t("currency." + tr?.quote)}</span></span>
+                        <span className={`width-11 flex jc-start ai-center ${tr?.priceChangePercent > 0 ? "text-green" : "text-red"}`}>{new BN(tr.lastPrice).decimalPlaces(currencies[tr?.quote]?.precision  ?? 0).toFormat()} <span className={`fs-0-7 mr-05`}>{tr?.quote}</span></span>
+
+
+
+
+                        <span className={`width-11 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>
+
 
 
-                        <span className={`width-9 flex ${i18n.language !== "fa" ? 'jc-start' : 'jc-end'} ai-center ${tr?.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(tr?.priceChangePercent).toFormat(2)} %</span>
-                        <span className="width-12 flex jc-start ai-center">{new BN(tr?.lowPrice).toFormat()}</span>
+                        <span className="width-12 flex jc-start ai-center">{new BN(tr?.lowPrice).decimalPlaces(currencies[tr?.quote]?.precision ?? 0).toFormat()} <span className={`fs-0-7 mr-05`}>{tr?.quote}</span></span>
 
-                        <span className={`width-12 flex jc-start ai-center`}>{new BN(tr?.highPrice).toFormat()}</span>
+                        <span className={`width-12 flex jc-start ai-center`}>{new BN(tr?.highPrice).decimalPlaces(currencies[tr?.quote]?.precision ?? 0).toFormat()} <span className={`fs-0-7 mr-05`}>{tr?.quote}</span></span>
 
 
-                        <span className="width-15 flex jc-start ai-center">{new BN(tr?.volume).toFormat()}</span>
+                        <span className="width-14 flex jc-start ai-center">{new BN(tr?.volume).decimalPlaces(currencies[tr?.base]?.precision ?? 0).toFormat()} <span className={`fs-0-7 mr-05`}>{tr?.base}</span></span>
                         {/*<span className="width-10 flex jc-start ai-center">{tr.lowPrice}</span>
                         <span className="width-10 flex jc-start ai-center">{tr.highPrice}</span>*/}
 
-                        <span className="width-10 flex jc-start ai-center position-relative">
+                        <span className="width-9 flex jc-start ai-center position-relative">
                             <img
                                 className={`img-lg-2 ${classes.filter}`}
                                 src={images.chart}

src/main/Browser/Pages/AllMarket/components/PriceInfo/components/MostDecreasedPrice/MostDecreasedPrice.js

@@ -1,26 +1,26 @@
 import React from 'react';
-import {images} from "../../../../../../../../assets/images";
 import i18n from "i18next";
-import {BN} from "../../../../../../../../utils/utils";
-import {useTranslation} from "react-i18next";
+import {BN, getCurrencyNameOrAlias} from "../../../../../../../../utils/utils";
+import {useSelector} from "react-redux";
 
 const MostDecreasedPrice = ({mostDecreasedPrice}) => {
 
-    const {t} = useTranslation();
+    const language = i18n.language
+    const currencies = useSelector((state) => state.exchange.currencies)
 
     return (
         <>
-            <img src={images[mostDecreasedPrice?.pairInfo?.baseAsset]}
+            <img src={currencies[mostDecreasedPrice?.pairInfo?.baseAsset]?.icon}
                  alt={mostDecreasedPrice?.pairInfo?.baseAsset}
                  title={mostDecreasedPrice?.pairInfo?.baseAsset}
                  className={`img-md-plus`}/>
-            <span>{t("currency." + mostDecreasedPrice?.pairInfo?.baseAsset)}</span>
+            <span>{getCurrencyNameOrAlias(currencies[mostDecreasedPrice?.pairInfo?.baseAsset], language)}</span>
             <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100`}>
                 <span className={`${i18n.language !== "fa" ? 'mr-025' : 'ml-025'} fs-0-6`}>{mostDecreasedPrice?.pairInfo?.quoteAsset}</span>
-                <span className={`${i18n.language !== "fa" ? 'mL-025' : 'mr-025'} fs-01`}>{new BN(mostDecreasedPrice?.lastPrice).toFormat()}</span>
+                <span className={`${i18n.language !== "fa" ? 'mL-025' : 'mr-025'} fs-01`}>{new BN(mostDecreasedPrice?.lastPrice).decimalPlaces(currencies[mostDecreasedPrice.pairInfo.quoteAsset]?.precision ?? 0).toFormat()}</span>
             </div>
             <div className={`row jc-center ai-center width-100`}>
-                <span className={`${mostDecreasedPrice?.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %</span>
+                <span className={`${mostDecreasedPrice?.priceChangePercent > 0 ? "text-green" : mostDecreasedPrice?.priceChangePercent < 0 ? "text-red" : ""} direction-ltr`}>{mostDecreasedPrice?.priceChangePercent === 0 ? "0 %" : `${new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %`}</span>
             </div>
         </>
     );