Refactor Currency and Pair Management to Use New Services

public/assets/locales/en/translation.json

@@ -286,6 +286,13 @@
   "depositStatus": {
     "DONE": "Done"
   },
+  "withdrawStatus": {
+    "CREATED": "Created",
+    "PROCESSING": "Processing",
+    "CANCELED": "Canceled",
+    "REJECTED": "Rejected",
+    "DONE": "Done"
+  },
   "HistoryStatus": {
     "DONE": "Done",
     "CREATED": "Created",

public/assets/locales/fa/translation.json

@@ -286,6 +286,13 @@
   "depositStatus": {
     "DONE": "انجام شده"
   },
+  "withdrawStatus": {
+    "CREATED": "جاری شده",
+    "PROCESSING": "در حال انجام",
+    "CANCELED": "لغو شده",
+    "REJECTED": "رد شده",
+    "DONE": "انجام شده"
+  },
   "HistoryStatus": {
     "DONE" : "انجام شده",
     "CREATED": "جاری شده",

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

@@ -1,11 +1,13 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useTranslation} from "react-i18next";
 import classes from "./AllMarketInfo.module.css"
 import {useSelector} from "react-redux";
 import {useGetQuoteCurrencies, useOverview} from "../../../../../../queries";
 import AllMarketInfoTable from "./components/AllMarketInfoTable/AllMarketInfoTable";
 import Loading from "../../../../../../components/Loading/Loading";
 import Error from "../../../../../../components/Error/Error";
+import {getCurrencyNameOrAlias} from "../../../../../../utils/utils";
+import i18n from "i18next";
 
 const AllMarketInfo = () => {
 
@@ -17,17 +19,26 @@ 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 ?
-                <AllMarketInfoTable data={overview} activeCurrency={activeCurrency}/>
+                <AllMarketInfoTable data={overview} activeCurrency={activeCurrency} interval={interval}/>
                 :
-                <AllMarketInfoTable data={overview} activeCurrency={activeCurrency}/>
+                <AllMarketInfoTable data={overview} activeCurrency={activeCurrency} interval={interval}/>
             }
         </>
     }
@@ -42,8 +53,10 @@ const AllMarketInfo = () => {
                 </div>
 
                 <div className={`row jc-center ai-center mr-1 fs-0-8`}>
-                    {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>
 

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

@@ -4,28 +4,36 @@ import {useNavigate} from "react-router-dom";
 import {useTranslation} from "react-i18next";
 import {useDispatch, useSelector} from "react-redux";
 import {setActivePairInitiate} from "../../../../../../../../store/actions";
-import {images} from "../../../../../../../../assets/images";
 import i18n from "i18next";
-import {BN} from "../../../../../../../../utils/utils";
+import {BN, getCurrencyNameOrAlias} from "../../../../../../../../utils/utils";
 import {Order} from "../../../../../../Routes/routes";
 import Button from "../../../../../../../../components/Button/Button";
 import Icon from "../../../../../../../../components/Icon/Icon";
 import {LeadingActions, SwipeableList, SwipeableListItem, SwipeAction, TrailingActions} from "react-swipeable-list";
+import {useGetChartData} from "../../../../../../../../queries";
 
-const AllMarketInfoTable = ({data, activeCurrency}) => {
+const AllMarketInfoTable = ({data, activeCurrency, interval}) => {
 
     const {t} = useTranslation();
 
     const navigate = useNavigate();
     const dispatch = useDispatch();
     const allExchangeSymbols = useSelector((state) => state.exchange.symbols)
 
+    const language = i18n.language
+    const currencies = useSelector((state) => state.exchange.currencies)
+
+    const pairsList = useSelector((state) => state.exchange.pairsList)
+    const symbols = Object.keys(pairsList);
+
+    const { data: ChartData, isLoading: ChartDataIsLoading, error: ChartDataError } = useGetChartData(symbols, interval);
+
     const [swipeRight, setSwipeRight] = useState(null);
     const [swipeLeft, setSwipeLeft] = useState(null);
 
-    const navigateToPanel = (symbol) => {
-        const selectedPair = allExchangeSymbols.find( s => s.symbol === symbol)
-        dispatch(setActivePairInitiate(selectedPair, 0))
+    const navigateToPanel = (baseAsset, quoteAsset) => {
+        const pairSymbolFormatted = `${baseAsset}_${quoteAsset}`;
+        dispatch(setActivePairInitiate(`${baseAsset}_${quoteAsset}`, 0));
         navigate(Order)
     }
 
@@ -81,9 +89,20 @@ const AllMarketInfoTable = ({data, activeCurrency}) => {
         </div>
     );
 
+    const chartView = (chartInfo) => {
+        if (ChartDataIsLoading) {
+            return <span className="flashit ">-----</span>
+        }
+        if (ChartDataError || !(chartInfo?.svgData)) {
+            return
+        }
+        return <img src={`data:image/svg+xml;base64,${chartInfo?.svgData}`} alt={chartInfo?.symbol} className={`${classes.chart} ${chartInfo?.isTrendUp ? classes.filterUp : classes.filterDown }`}/>
+    }
+
     let body = (
         <>
             {data.map((tr, index) => {
+                const chartInfo = ChartData?.find(chart => chart.symbol.replace("_", "") === tr.symbol);
                 return (
                     <SwipeableList threshold={0.01}>
                         <SwipeableListItem
@@ -95,31 +114,31 @@ const AllMarketInfoTable = ({data, activeCurrency}) => {
                                     <div className={`row width-100`}>
                                         <div className="width-50 row jc-start ai-center">
                                             <img
-                                                 src={images[tr?.base]}
+                                                src={currencies[tr?.base]?.icon}
                                                  alt={tr?.base}
                                                  title={tr?.baseAsset}
                                                  className={`img-md ml-1`}
                                             />
-                                            <span className={`mr-1`}>{activeCurrency ? t("currency." + tr?.base) : tr?.base + " / " + tr?.quote}</span>
+                                            <span className={`mr-1`}>{activeCurrency ? getCurrencyNameOrAlias(currencies[tr?.base], language) : tr?.base + " / " + tr?.quote}</span>
                                         </div>
                                         <div className={`width-50 column jc-center ai-end`}>
                                             <div className={`row jc-center ai-center`}>
-                                                <span className={`fs-0-6 ml-3 ${tr.priceChange > 0 ? "text-green" : "text-red"}`}>{tr.priceChange} %</span>
-                                                <span className={`mr-1 ${tr.priceChange > 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={`fs-0-6 ml-3 ${tr.priceChangePercent > 0 ? "text-green" : tr.priceChangePercent < 0 ? "text-red" : ""}`}>{tr.priceChangePercent === 0 ? "0 %" : `${new BN(tr.priceChangePercent).toFormat(2)} %`}</span>
+                                                <span className={`mr-1 ${tr.priceChangePercent > 0 ? "text-green" : tr.priceChangePercent < 0 ? "text-red" : ""}`}>{new BN(tr.lastPrice).decimalPlaces(currencies[tr?.quote]?.precision  ?? 0).toFormat()} <span className={`fs-0-7 mr-05`}>{tr?.quote}</span></span>
                                             </div>
-                                            <span className={`fs-0-8`}>{new BN(tr.volume).toFormat()}</span>
+                                            <span className={`fs-0-8`}>{new BN(tr?.volume).decimalPlaces(currencies[tr?.base]?.precision ?? 0).toFormat()}</span>
                                         </div>
                                     </div>
                                     <div className={`width-100 row`}>
                                         <div className="width-100 row jc-between ai-start">
 
                                             <div className={`row jc-center ai-center`}>
-                                                <Icon iconName="icon-up-micro fs-02 flex  text-green"/>
-                                                <span className={`mr-05 fs-0-8`}>{new BN(tr?.highPrice).toFormat()}</span>
+                                                <Icon iconName="icon-up-micro fs-02 flex text-green"/>
+                                                <span className={`mr-05 fs-0-8`}>{new BN(tr?.highPrice).decimalPlaces(currencies[tr?.quote]?.precision ?? 0).toFormat()}</span>
                                             </div>
                                             <div className={`row jc-center ai-center`}>
-                                                <Icon iconName="icon-down-micro fs-02 flex  text-red"/>
-                                                <span className={`mr-05 fs-0-8`}>{new BN(tr?.lowPrice).toFormat()}</span>
+                                                <Icon iconName="icon-down-micro fs-02 flex text-red"/>
+                                                <span className={`mr-05 fs-0-8`}>{new BN(tr?.lowPrice).decimalPlaces(currencies[tr?.quote]?.precision ?? 0).toFormat()}</span>
                                             </div>
                                         </div>
                                     </div>
@@ -135,17 +154,12 @@ const AllMarketInfoTable = ({data, activeCurrency}) => {
                                         <Button
                                             buttonClass={classes.thisButton}
                                             type="button"
-                                            onClick={() => navigateToPanel(tr.symbol)}
+                                            onClick={() => navigateToPanel(tr?.base, tr?.quote)}
                                             buttonTitle={t("MarketInfo.trade")}
                                         />
                                     </div>
                                     <div className="width-30 flex jc-end ai-center">
-                                         <img
-                                             className={`img-lg ${classes.filter}`}
-                                             src={images.chart}
-                                             alt={""}
-                                             title={""}
-                                         />
+                                        {chartView(chartInfo)}
                                     </div>
                                 </div>
                             </div>

src/main/Mobile/Pages/AllMarket/components/AllMarketInfo/components/AllMarketInfoTable/AllMarketInfoTable.module.css

@@ -59,6 +59,12 @@
     bottom: 0;
 }
 
-.filter {
-    filter: blur(4px);
+.chart {
+    width: 75%;
+}
+.filterUp {
+    filter: invert(51%) sepia(94%) saturate(370%) hue-rotate(109deg) brightness(87%) contrast(92%);
+}
+.filterDown {
+    filter: invert(50%) sepia(53%) saturate(2527%) hue-rotate(337deg) brightness(68%) contrast(175%);
 }

src/main/Mobile/Pages/AllMarket/components/MarketStats/components/MostDecreasedPrice/MostDecreasedPrice.js

@@ -1,41 +1,29 @@
 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]}
-                 alt={mostDecreasedPrice?.pairInfo?.baseAsset}
-                 title={mostDecreasedPrice?.pairInfo?.baseAsset}
-                 className={`img-md-plus`}/>
-            <span>{t("currency." + mostDecreasedPrice?.pairInfo?.baseAsset)}</span>
-            <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100 text-red`}>
-                <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>
-            </div>
-            <div className={`row jc-center ai-center width-100 text-red`}>
-                <span className={`direction-ltr`}>{new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %</span>
-            </div>*/}
             <div className={`column jc-center ai-start`}>
-                <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 mb-05`}/>
-                <span className={`mt-05`}>{t("currency." + mostDecreasedPrice?.pairInfo?.baseAsset)}</span>
+                <span className={`mt-05`}>{getCurrencyNameOrAlias(currencies[mostDecreasedPrice?.pairInfo?.baseAsset], language)}</span>
             </div>
             <div className={`column jc-end ai-center`}>
                 <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-end ai-center width-100 text-green mb-05`}>
                     <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={`${mostDecreasedPrice?.priceChangePercent > 0 ? "text-green" : "text-red"} ${i18n.language !== "fa" ? 'jc-end' : 'jc-start'} direction-ltr width-100 row ai-center mt-05`}>
-                    {new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %
+                <div className={`${mostDecreasedPrice?.priceChangePercent > 0 ? "text-green" : mostDecreasedPrice?.priceChangePercent < 0 ? "text-red" : ""} ${i18n.language !== "fa" ? 'jc-end' : 'jc-start'} direction-ltr width-100 row ai-center mt-05`}>
+                    {mostDecreasedPrice?.priceChangePercent === 0 ? "0 %" : `${new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %`}
                 </div>
             </div>
 

src/main/Mobile/Pages/AllMarket/components/MarketStats/components/MostIncreasedPrice/MostIncreasedPrice.js

@@ -1,29 +1,29 @@
 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 MostIncreasedPrice = ({mostIncreasedPrice}) => {
 
-    const {t} = useTranslation();
+    const language = i18n.language
+    const currencies = useSelector((state) => state.exchange.currencies)
 
     return (
         <>
             <div className={`column jc-center ai-start`}>
-                <img  src={images[mostIncreasedPrice?.pairInfo?.baseAsset]}
+                <img src={currencies[mostIncreasedPrice?.pairInfo?.baseAsset]?.icon}
                       alt={mostIncreasedPrice?.pairInfo?.baseAsset}
                       title={mostIncreasedPrice?.pairInfo?.baseAsset}
                       className={`img-md-plus mb-05`}/>
-                <span className={`mt-05`}>{t("currency." + mostIncreasedPrice?.pairInfo?.baseAsset)}</span>
+                <span className={`mt-05`}>{getCurrencyNameOrAlias(currencies[mostIncreasedPrice?.pairInfo?.baseAsset], language)}</span>
             </div>
             <div className={`column jc-end ai-center`}>
                 <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-end ai-center width-100 text-green mb-05`}>
                     <span className={`${i18n.language !== "fa" ? 'mr-025' : 'ml-025'} fs-0-6`}>{mostIncreasedPrice?.pairInfo?.quoteAsset}</span>
-                    <span className={`${i18n.language !== "fa" ? 'mL-025' : 'mr-025'} fs-01`}>{new BN(mostIncreasedPrice?.lastPrice).toFormat()}</span>
+                    <span className={`${i18n.language !== "fa" ? 'mL-025' : 'mr-025'} fs-01`}>{new BN(mostIncreasedPrice?.lastPrice).decimalPlaces(currencies[mostIncreasedPrice.pairInfo.quoteAsset]?.precision ?? 0).toFormat()}</span>
                 </div>
-                <div className={`${mostIncreasedPrice?.priceChangePercent > 0 ? "text-green" : "text-red"} ${i18n.language !== "fa" ? 'jc-end' : 'jc-start'} direction-ltr width-100 row ai-center mt-05`}>
-                    {new BN(mostIncreasedPrice?.priceChangePercent).toFormat(2)} %
+                <div className={`${mostIncreasedPrice?.priceChangePercent > 0 ? "text-green" : mostIncreasedPrice?.priceChangePercent < 0 ? "text-red" : ""} ${i18n.language !== "fa" ? 'jc-end' : 'jc-start'} direction-ltr width-100 row ai-center mt-05`}>
+                    {mostIncreasedPrice?.priceChangePercent === 0 ? "0 %" : `${new BN(mostIncreasedPrice?.priceChangePercent).toFormat(2)} %`}
                 </div>
             </div>
         </>