Fix reducers & actions

docker-compose.build.yml

@@ -1,7 +1,7 @@
 version: "3.8"
 services:
-  web-app:
-    image: ghcr.io/opexdev/web-app:$TAG
+  mobile-app:
+    image: ghcr.io/opexdev/mobile-app:$TAG
     build:
       context: .
       args:

package.json

@@ -33,7 +33,7 @@
     "react-qr-code": "^2.0.7",
     "react-redux": "^7.2.2",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "4.0.1",
+    "react-scripts": "^5.0.1",
     "react-select": "^5.3.2",
     "react-swipeable-list": "^1.7.0",
     "react-tooltip": "^4.2.21",

src/components/NumberInput/NumberInput.js

@@ -1,6 +1,6 @@
 import React from "react";
 import NumberFormat from "react-number-format";
-import * as classes from "./NumberInput.module.css";
+import classes from "./NumberInput.module.css";
 import Icon from "../Icon/Icon";
 
 const NumberInput = (props) => {

src/components/ScrollBar/index.js

@@ -1,24 +1,24 @@
 import React from "react";
 import {Scrollbars} from "rc-scrollbars";
 
-const ScrollBar = (props) => {
-  const style = props.style ? props.style : {width: "100%", height: "100%"};
-  return (
-    <Scrollbars
-      autoHide
-      autoHideTimeout={1000}
-      autoHideDuration={200}
-      renderThumbHorizontal={(props) => (
-        <div {...props} className="thumb-horizontal" />
-      )}
-      renderThumbVertical={(props) => (
-        <div {...props} className="thumb-vertical" />
-      )}
-      renderView={(props) => <div {...props} className="scrollView" />}
-      style={style}>
-      {props.children}
-    </Scrollbars>
-  );
+const ScrollBar = ({customClass, ...props}) => {
+    const style = props.style ? props.style : {width: "100%", height: "100%"};
+    return (
+        <Scrollbars
+            autoHide
+            autoHideTimeout={1000}
+            autoHideDuration={200}
+            renderThumbHorizontal={(props) => (
+                <div {...props} className="thumb-horizontal" />
+            )}
+            renderThumbVertical={(props) => (
+                <div {...props} className="thumb-vertical" />
+            )}
+            renderView={(props) => <div {...props} className={`scrollView ${customClass && customClass}`} />}
+            style={style}>
+            {props.children}
+        </Scrollbars>
+    );
 };
 
 export default ScrollBar;

src/components/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Icon from "../Icon/Icon";
 import Select from "react-select";
-import * as classes from "./TextInput.module.css";
+import classes from "./TextInput.module.css";
 
 const TextInput = (props) => {
     const {customRef,readOnly,onchange,customClass,options, lead , after ,select ,alerts ,max , ...other} = props

src/components/VerticalTextInput/VerticalNumberInput.js

@@ -1,6 +1,6 @@
 import React from "react";
 import NumberFormat from "react-number-format";
-import * as classes from "./VerticalNumberInput.module.css";
+import classes from "./VerticalNumberInput.module.css";
 import Icon from "../Icon/Icon";
 
 const VerticalNumberInput = (props) => {

src/main/Mobile/Pages/UserPanel/Secttions/Header/components/WalletHeader/WalletHeader.js

@@ -14,9 +14,10 @@ const WalletHeader = ({showSubMenu, showMenu}) => {
 
     return (
         <>
-            <h3 style={{color: "var(--orange)"}}
-                onClick={() => dispatch(activeActionSheet({subMenu: true}))}>{t("currency." + id)}
-            </h3>
+            <div className={`row jc-center ai-center text-orange fs-02`} onClick={() => dispatch(activeActionSheet({subMenu: true}))}>
+                <span className={`ml-1`}>{t("currency." + id)}</span>
+                <span className={`mr-1`}>{id}</span>
+            </div>
             <Icon iconName="icon-safe fs-20 flex"
                   onClick={() => dispatch(activeActionSheet({menu: true}))}
             />

src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/components/WalletSubHeader/WalletSubHeader.js

@@ -1,9 +1,39 @@
 import React from 'react';
+import classes from './WalletSubHeader.module.css'
+import {useParams} from "react-router-dom";
+import {useGetUserAssets} from "../../../../../../../../queries";
+import {useTranslation} from "react-i18next";
+import {useGetUserAccount} from "../../../../../../../../queries/hooks/useGetUserAccount";
+import {BN} from "../../../../../../../../utils/utils";
 
 const WalletSubHeader = () => {
+
+    const {id} = useParams()
+    const {t} = useTranslation()
+    const refCurrency = window.env.REACT_APP_REFERENCE_FIAT_CURRENCY
+    const {data: userAccount} = useGetUserAccount()
+
+    const {data: estimateValue , isLoading, error} = useGetUserAssets(refCurrency)
+    const allEstimateValue = (isLoading || error) ?  0 : (estimateValue?.find( q => q.asset === id ))
+
     return (
-        <div className={`my-5`}>
-            موجودی ها
+        <div className={`my-1 row`}>
+
+            <div className={`col-35 column ai-center`}>
+                <span className={`mb-05`}>{t("header.free")}</span>
+                <span className={`mt-05`}>{new BN(userAccount?.wallets[id]?.free || 0).toFormat()}</span>
+                <span className={`fs-0-7 text-gray`}> ( {refCurrency === id ? new BN(userAccount?.wallets[id]?.free || 0).toFormat() : new BN(allEstimateValue?.free || 0).toFormat()} {t("currency."+refCurrency)} )</span>
+            </div>
+            <div className={`col-35 column ai-center ${classes.border}`}>
+                <span className={`mb-05`}>{t("header.locked")}</span>
+                <span className={`mt-05`}>{new BN(userAccount?.wallets[id]?.locked || 0).toFormat()}</span>
+                <span className={`fs-0-7 text-gray`}> ( {refCurrency === id ? new BN(userAccount?.wallets[id]?.locked || 0).toFormat() : new BN(allEstimateValue?.locked || 0).toFormat()} {t("currency."+refCurrency)} )</span>
+            </div>
+            <div className={`col-35 column ai-center`}>
+                <span className={`mb-05`}>{t("header.inWithdrawalProcess")}</span>
+                <span className={`mt-05`}>{new BN(userAccount?.wallets[id]?.withdraw || 0).toFormat()}</span>
+                <span className={`fs-0-7 text-gray`}> ( {refCurrency === id ? new BN(userAccount?.wallets[id]?.withdraw || 0).toFormat() : new BN(allEstimateValue?.withdrawing || 0).toFormat()} {t("currency."+refCurrency)} )</span>
+            </div>
         </div>
     );
 };

src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/components/WalletSubHeader/WalletSubHeader.module.css

@@ -0,0 +1,4 @@
+.border{
+    border-right: 0.1vh solid var(--orange);
+    border-left: 0.1vh solid var(--orange);
+}

src/main/Mobile/Pages/UserPanel/Secttions/SubMenu/components/WalletSubMenu/WalletSubMenu.js

@@ -1,37 +1,38 @@
-import React from 'react';
-import {NavLink, useParams} from "react-router-dom";
-import * as Routes from "../../../../../../Routes/routes";
+import React, {useState} from 'react';
+import classes from './WalletSubMenu.module.css'
+import {useTranslation} from "react-i18next";
+import {useSelector} from "react-redux";
+import ToggleSwitch from "../../../../../../../../components/ToggleSwitch/ToggleSwitch";
+import WalletBalance from "./components/WalletBalance/WalletBalance";
+import ScrollBar from "../../../../../../../../components/ScrollBar";
+import WalletListItem from "./components/WalletListItem/WalletListItem";
 
 
 const WalletSubMenu = () => {
 
-    const {path} = useParams()
+    const {t} = useTranslation();
+    const [showZero, setShowZero] = useState(false);
+    const assets = useSelector((state) => state.exchange.assets)
 
     return (
-        <div className={`width-100 column jc-center ai-center my-5 `}>
-
-
-            <NavLink
-                className={({isActive}) =>
-                    isActive ? "width-100 row ai-center cursor-pointer position-relative px-1 py-05 " : "width-100 row ai-center cursor-pointer position-relative px-1 py-05"
-                }
-                to={`${Routes.Wallet}/TBTC/${path}`}>
-
-                TBTC
-
-            </NavLink>
-
-            <NavLink
-                className={({isActive}) =>
-                    isActive ? "width-100 row ai-center cursor-pointer position-relative px-1 py-05 " : "width-100 row ai-center cursor-pointer position-relative px-1 py-05"
-                }
-                to={`${Routes.Wallet}/TETH/${path}`}>
-
-                TETH
-
-            </NavLink>
-
-
+        <div className={`width-100 column card-bg `} style={{height: "70vh"}}>
+            <div className={`flex jc-start ai-center border-bottom card-header-bg px-7 ${classes.header}`}>
+                <h2>{t("WalletSubMenu.title")}</h2>
+            </div>
+            <div className={`column width-100 ${classes.content} px-3`}>
+                <div className={`width-100 row jc-around ai-center py-2 border-bottom`}>
+                    <span className={`fs-0-7`}>{t("WalletSubMenu.showZeroBalance")}</span>
+                    <ToggleSwitch onchange={() => setShowZero(prevState => !prevState)} checked={showZero}/>
+                </div>
+                <WalletBalance/>
+                <ScrollBar customClass={`column`}>
+                    {assets.map((name) => <WalletListItem key={name} assetName={name} showZero={showZero}/>)}
+                </ScrollBar>
+            </div>
+            <div className={`${classes.footer} flex jc-center ai-center px-1 text-gray fs-0-7 px-1 py-05`}
+                 style={{lineHeight: "3vh"}}>
+                <span>{t("WalletSubMenu.estimateAlert")}</span>
+            </div>
         </div>
     );
 };

src/main/Mobile/Pages/UserPanel/Secttions/SubMenu/components/WalletSubMenu/WalletSubMenu.module.css

@@ -0,0 +1,61 @@
+.container {
+    /*height: 100vh;*/
+}
+.header {
+    height: 10%;
+    z-index: 100;
+    vertical-align: middle;
+}
+.header h2 {
+    color: var(--orange);
+}
+.header span {
+    width: 50%;
+    text-align: center;
+}
+.content {
+    height: 81%;
+}
+.footer{
+    height: 9%;
+}
+.content div {
+    display: flex;
+    align-items: center;
+}
+.PairRow{
+    /*height: 6vh;*/
+}
+.PairImage {
+    width: 15%;
+}
+.pairDetails {
+    width: 85%;
+}
+.container a {
+    /*height: 8.5vh;*/
+}
+.loadingImg {
+    background: var(--mainContent);
+    height: 2.3vw;
+    border-radius: 50%;
+}
+.loadingText {
+    background: var(--mainContent);
+    height: 3.5vh;
+    margin: 0.5vh 0;
+    border-radius: 4px;
+}
+.selected{
+    background-color: var(--mainContent);
+}
+.selected {
+    background-color: var(--mainContent);
+    border-radius: 10px;
+    transition: 0.4s background-color;
+    width: 97% !important;
+}
+:global(.ltr) .selected {
+    border-radius: 10px;
+}
+

src/main/Mobile/Pages/UserPanel/Secttions/SubMenu/components/WalletSubMenu/components/WalletBalance/WalletBalance.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import classes from '../../WalletSubMenu.module.css'
+import {useTranslation} from "react-i18next";
+import {images} from "../../../../../../../../../../assets/images";
+import {BN} from "../../../../../../../../../../utils/utils";
+import {useGetUserAssetsEstimatedValue} from "../../../../../../../../../../queries";
+
+const WalletBalance = () => {
+
+    const {t} = useTranslation();
+    const refCurrency = window.env.REACT_APP_REFERENCE_FIAT_CURRENCY
+    const {data , isLoading, error} = useGetUserAssetsEstimatedValue(refCurrency)
+    const totalValue = (isLoading || error) ?  0 : data.value
+
+    return ( <div className={"row ai-center cursor-pointer position-relative px-3 py-105"} style={{cursor:"initial"}}>
+            <div className={` row jc-start ai-center ${classes.PairImage}`}>
+                <img
+                    className={`img-md flex`}
+                    src={images.safe}
+                    alt="safe"
+                    title="safe"
+                />
+            </div>
+            <div className={`row jc-between px-05 ${classes.pairDetails}`}>
+                <div className="column ai-start">
+                    <span>{t("WalletSubMenu.totalValue")}</span>
+                    <span className="fs-0-7">{t("WalletSubMenu.approximate")}</span>
+                </div>
+                <div className="column ai-end">
+                    <span>{new BN(totalValue).toFormat()}{" "}<span className="fs-0-7">{t("currency."+refCurrency)}</span></span>
+                </div>
+            </div>
+        </div>
+
+    );
+};
+
+export default WalletBalance;

src/main/Mobile/Pages/UserPanel/Secttions/SubMenu/components/WalletSubMenu/components/WalletList/WalletList.js

@@ -0,0 +1,68 @@
+import React, {Fragment, useState} from "react";
+import classes from "../../WalletSubMenu.module.css";
+import {useTranslation} from "react-i18next";
+import WalletListItem from "../WalletListItem/WalletListItem";
+import WalletLoading from "../WalletLoading/WalletLoading";
+import Error from "../../../../../../../../../../components/Error/Error";
+import {images} from "../../../../../../../../../../assets/images";
+import ToggleSwitch from "../../../../../../../../../../components/ToggleSwitch/ToggleSwitch";
+
+
+const WalletList = ({wallets, isLoading}) => {
+
+    const {t} = useTranslation();
+    const [showZero, setShowZero] = useState(false);
+
+    if (isLoading) {
+        return <WalletLoading/>
+    }
+    if (!wallets) {
+        return <Error/>
+    }
+
+    if (wallets.length === 0) {
+        return (
+            <div className="width-100 row ai-center px-1 py-05" style={{height: "8.5vh"}}>
+                <div className={` row jc-center ai-center ${classes.PairImage}`}>
+                    <img
+                        className={`img-md flex`}
+                        src={images.safe}
+                        alt="safe"
+                        title="safe"
+                    />
+                </div>
+                <div className={`row jc-between px-1 ${classes.pairDetails}`}>
+                    <div className="column ai-start">
+                        <span>{t("WalletSubMenu.totalValue")}</span>
+                        <span className="fs-0-7">{t("WalletSubMenu.approximate")}</span>
+                    </div>
+                    <div className="column ai-end">
+                          <span>0{" "}
+                              <span className="fs-0-7">{t("currency.IRT")}</span>
+                          </span>
+                        <span className="fs-0-7 text-gray">
+                        <span>{t("WalletSubMenu.equivalent")} </span>0{" "}
+                            <span>{t("currency.BTC")}</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+    return (
+        <Fragment>
+            <div className={`width-100 row jc-around ai-center py-2 border-bottom`}>
+                <span className={`fs-0-7`}>{t("WalletSubMenu.showZeroBalance")}</span>
+                <ToggleSwitch onchange={()=>setShowZero(prevState => !prevState)} checked={showZero}/>
+            </div>
+            {Object.keys(wallets).map((name) => {
+                if(wallets[name].free !== 0.0 || !showZero) {
+                    return <WalletListItem key={name} name={name}/>
+                }
+                return null
+            })}
+        </Fragment>
+    )
+}
+
+export default WalletList;