{
return (
- <div className={`row jc-between ai-center mt-2`}>
- <Button
+ <div className={`row jc-center ai-center mt-2`}>
+ {/*<Button
buttonClass={`${classes.thisButton} col-48 px-3`}
buttonTitle={t("MarketTitle.easyTrading")}
type="submit"
onClick={() => navigate("/", { replace: true })}
- />
+ />*/}
<Button
buttonClass={`${classes.thisButton} col-48 px-3`}
buttonTitle={t("MarketTitle.advancedTrading")}
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/Sections/OrderSection/OrderSection.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/Sections/OrderSection/OrderSection.js
index 11884bb..85d95e5 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/Sections/OrderSection/OrderSection.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/Sections/OrderSection/OrderSection.js
@@ -69,10 +69,10 @@ const OrderSection = () => {
</div>
</div>
- <div className={`width-100 col-46`}>
+ <div className={`width-100 col-40`}>
{showChart ? <TradingView/> : <OrderBook orderLayout={true}/>}
</div>
- <div className={`width-100 col-46`}>
+ <div className={`width-100 col-52`}>
<Order/>
</div>
</>
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/Order.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/Order.module.css
index 8d3c813..2594040 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/Order.module.css
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/Order.module.css
@@ -3,11 +3,11 @@
}
.content {
height: 100%;
- padding: 1vh 0.5vw;
+ /* padding: 1vh 0.5vw;*/
}
.thisButton {
- width: 100%;
+ /*width: 100%;*/
}
.alertSubmit{
background-color: var(--orange);
@@ -45,4 +45,14 @@
}
.stopMarket input {
cursor: not-allowed;
+}
+
+.smallInput :global(.lead){
+ width: 24%;
+}
+.smallInput :global(input){
+ width: 52%;
+}
+.smallInput :global(.after){
+ width: 24%;
}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/api/order.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/api/order.js
index 47fbebc..9f0f853 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/api/order.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/api/order.js
@@ -1,26 +1,18 @@
import axios from "axios";
-export const createOrder = async (activePair , side , order) => {
- const timestamp = Date.now()
+export const createOrder = async (symbol, side, order, type = "LIMIT", timeInForce = "GTC", timestamp = Date.now().toString()) => {
const params = new URLSearchParams();
- params.append('symbol', activePair.symbol);
+ params.append('symbol',symbol );
params.append('side', side);
- params.append('type', "LIMIT");
- params.append('timeInForce', "GTC");
- params.append('timestamp', timestamp.toString());
+ params.append('type', type);
+ params.append('timeInForce', timeInForce);
+ params.append('timestamp', timestamp);
params.append('quantity', order.reqAmount.toString());
params.append('price', order.pricePerUnit.toString());
- return await axios.post(`/api/v3/order`, null , {
+ return axios.post(`/api/v3/order`, null, {
params,
- headers : {
- 'Content-Type':'application/x-www-form-urlencoded'
+ headers: {
+ 'Content-Type': 'application/x-www-form-urlencoded'
}
- }).then((res) => {
- return res;
- }).catch((e) => {
- if (!e.response) {
- return false;
- }
- return e.response;
})
}
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/components/BuyOrder/BuyOrder.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/components/BuyOrder/BuyOrder.js
index d4e1f99..d8bd2af 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/components/BuyOrder/BuyOrder.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/components/BuyOrder/BuyOrder.js
@@ -3,7 +3,7 @@ import classes from "../../Order.module.css";
import {Trans, useTranslation} from "react-i18next";
import VerticalNumberInput from "../../../../../../../../../../../../components/VerticalTextInput/VerticalNumberInput";
import {setLastTransaction} from "../../../../../../../../../../../../store/actions/auth";
-import {connect} from "react-redux";
+import {connect, useDispatch, useSelector} from "react-redux";
import {BN, parsePriceString} from "../../../../../../../../../../../../utils/utils";
import {useNavigate} from "react-router-dom";
import Icon from "../../../../../../../../../../../../components/Icon/Icon";
@@ -12,15 +12,30 @@ import {Login as LoginRoute} from "../../../../../../../../../../Routes/routes";
import {toast} from "react-hot-toast";
import {images} from "../../../../../../../../../../../../assets/images";
import {createOrder} from "../../api/order";
+import {useGetUserAccount} from "../../../../../../../../../../../../queries/hooks/useGetUserAccount";
+import NumberInput from "../../../../../../../../../../../../components/NumberInput/NumberInput";
-const BuyOrder = (props) => {
+const BuyOrder = () => {
const navigate = useNavigate();
+
const {t} = useTranslation();
+ const dispatch = useDispatch();
+
+ const {data: userAccount} = useGetUserAccount()
const [isLoading, setIsLoading] = useState(false)
- const {wallets, activePair, tradeFee, bestBuyPrice, accessToken, isLogin, selectedBuyOrder} = props
+
+ const activePair = useSelector((state) => state.exchange.activePair)
+ const bestBuyPrice = useSelector((state) => state.exchange.activePairOrders.bestBuyPrice)
+ const selectedBuyOrder = useSelector((state) => state.exchange.activePairOrders.selectedBuyOrder)
+
+ const tradeFee = useSelector((state) => state.auth.tradeFee)
+ const isLogin = useSelector((state) => state.auth.isLogin)
+
+ const quote = userAccount?.wallets[activePair.quoteAsset]?.free || 0;
+
const [alert, setAlert] = useState({
submit: false,
reqAmount: null,
@@ -36,13 +51,39 @@ const BuyOrder = (props) => {
pricePerUnit: new BN(0),
totalPrice: new BN(0),
});
+
+ /*useEffect(() => {
+ if (alert.submit) {
+ setAlert({
+ ...alert, submit: false
+ })
+ }
+ }, [order, activePair])*/
+
useEffect(() => {
if (alert.submit) {
setAlert({
...alert, submit: false
})
}
- }, [order, activePair])
+ }, [order])
+
+ useEffect(() => {
+ setOrder({
+ tradeFee: new BN(0),
+ stopLimit: false,
+ stopMarket: false,
+ stopPrice: new BN(0),
+ reqAmount: new BN(0),
+ pricePerUnit: new BN(0),
+ totalPrice: new BN(0),
+ })
+ setAlert({
+ submit: false,
+ reqAmount: null,
+ totalPrice: null,
+ })
+ }, [activePair])
const currencyValidator = (key, val, rule) => {
if (!val.isZero() && val.isLessThan(rule.min)) {
@@ -78,7 +119,7 @@ const BuyOrder = (props) => {
...alert,
[key]: (<Trans
i18nKey="orders.divisibility"
- values={{mod:rule.step.toString()}}
+ values={{mod: rule.step.toString()}}
/>)
})
}
@@ -123,7 +164,7 @@ const BuyOrder = (props) => {
};
useEffect(() => {
- if(order.totalPrice.isGreaterThan(wallets[activePair.quoteAsset].free)){
+ if (order.totalPrice.isGreaterThan(quote)) {
return setAlert({
...alert,
totalPrice: t('orders.notEnoughBalance')
@@ -163,10 +204,24 @@ const BuyOrder = (props) => {
currencyValidator("reqAmount", reqAmount, activePair.baseRange);
}, [selectedBuyOrder]);
+ useEffect(() => {
+ const reqAmount = new BN(selectedBuyOrder.amount);
+ const pricePerUnit = new BN(selectedBuyOrder.pricePerUnit);
+ setOrder({
+ ...order,
+ reqAmount,
+ pricePerUnit: pricePerUnit,
+ totalPrice: reqAmount.multipliedBy(pricePerUnit).decimalPlaces(activePair.quoteAssetPrecision),
+ tradeFee: reqAmount.multipliedBy(tradeFee[activePair.quoteAsset]).decimalPlaces(activePair.baseAssetPrecision),
+ });
+ currencyValidator("reqAmount", reqAmount, activePair.baseRange);
+ }, [selectedBuyOrder]);
+
const fillBuyByWallet = () => {
+ if(order.pricePerUnit.isEqualTo(0) && bestBuyPrice === 0 ) return toast.error(t("orders.hasNoOffer"));
if (order.pricePerUnit.isEqualTo(0)) {
- const totalPrice = new BN(wallets[activePair.quoteAsset].free);
+ const totalPrice = new BN(quote);
setOrder({
...order,
reqAmount: totalPrice.dividedBy(bestBuyPrice).decimalPlaces(activePair.baseAssetPrecision),
@@ -176,7 +231,7 @@ const BuyOrder = (props) => {
});
} else {
buyPriceHandler(
- wallets[activePair.quoteAsset].free.toString(),
+ quote.toString(),
"totalPrice",
);
}
@@ -189,6 +244,8 @@ const BuyOrder = (props) => {
);
};
+ console.log("activePair.symbol" , activePair.symbol)
+
const submit = async () => {
if (!isLogin) {
navigate(LoginRoute, { replace: true });
@@ -198,121 +255,117 @@ const BuyOrder = (props) => {
return false
}
setIsLoading(true)
- const submitOrder = await createOrder(activePair, "BUY", accessToken, order)
- if (!submitOrder) {
- setIsLoading(false)
- }
- if (submitOrder.status === 200) {
- setOrder({
- tradeFee: new BN(0),
- stopLimit: false,
- stopMarket: false,
- stopPrice: new BN(0),
- reqAmount: new BN(0),
-
- pricePerUnit: new BN(0),
- totalPrice: new BN(0),
- })
- toast.success(<Trans
- i18nKey="orders.success"
- values={{
- base: t("currency." + activePair.baseAsset),
- quote: t("currency." + activePair.quoteAsset),
- type: t("buy"),
- reqAmount: order.reqAmount,
- pricePerUnit: order.pricePerUnit,
- }}
- />);
- setTimeout(() => props.setLastTransaction(submitOrder.data.transactTime), 2000);
- } else {
+ createOrder(activePair.symbol, "BUY", order)
+ .then((res) => {
+ setOrder({
+ tradeFee: new BN(0),
+ stopLimit: false,
+ stopMarket: false,
+ stopPrice: new BN(0),
+ reqAmount: new BN(0),
+ pricePerUnit: new BN(0),
+ totalPrice: new BN(0),
+ })
+ toast.success(<Trans
+ i18nKey="orders.success"
+ values={{
+ base: t("currency." + activePair.baseAsset),
+ quote: t("currency." + activePair.quoteAsset),
+ type: t("buy"),
+ reqAmount: order.reqAmount,
+ pricePerUnit: order.pricePerUnit,
+ }}
+ />);
+ dispatch(setLastTransaction(res.data.transactTime))
+ }).catch(() => {
toast.error(t("orders.error"));
setAlert({
...alert, submit: true
})
- }
- setIsLoading(false)
+ }).finally(() => {
+ setIsLoading(false)
+ })
}
const submitButtonTextHandler = () => {
if (isLoading) {
return <img className={`${classes.thisLoading}`} src={images.linearLoading} alt="linearLoading"/>
}
- if (alert.submit) {
+ /*if (alert.submit) {
return <span>{t("login.loginError")}</span>
- }
+ }*/
if (isLogin) {
+ return t("buy")
+ }
+ /*if (isLogin) {
return <span>{t("buy")} {order.reqAmount.minus(order.tradeFee).decimalPlaces(activePair.baseAssetPrecision).toNumber()}{" "}
{t("currency." + activePair.baseAsset)}</span>
- }
+ }*/
return t("pleaseLogin")
}
- const volumeTop = <div className={`width-100 row jc-center ai-center fs-0-6`} onClick={() => {fillBuyByBestPrice()}}>
- <Icon iconName={`icon-plus fs-0-6 flex`} customClass={`mx-1`}/>
- <span>{wallets[activePair.quoteAsset].free.toLocaleString()}{" "}{t("currency." + activePair.quoteAsset)}</span>
- </div>
-
- const pricePerUnitTop = <div className={`width-100 row jc-center ai-center fs-0-6`} onClick={() => {fillBuyByWallet()}}>
- <Icon iconName={`icon-plus fs-0-6 flex`} customClass={`mx-1`}/>
- <span>{bestBuyPrice.toLocaleString()}{" "}{t("currency." + activePair.quoteAsset)}</span>
- </div>
-
- const totalPriceTop = <div className={`width-100 row jc-around ai-center fs-0-6`}>
- <p>{t("commission")}</p>
- <p>
- {order.tradeFee.toFormat()}{" "}
- {t("currency." + activePair.baseAsset)}
- </p>
- </div>
-
return (
- <div className={`column jc-between ${classes.content}`}>
-
- <div className={`row jc-around`}>
- <div className={`col-48`}>
- <VerticalNumberInput
- top={volumeTop}
- lead={t("volume")}
- value={order.reqAmount.toString()}
- maxDecimal={activePair.baseAssetPrecision}
- onchange={(e) => buyPriceHandler(e.target.value, "reqAmount")}
- //alert={alert.reqAmount}
- />
- </div>
- <div className={`col-48`}>
- <VerticalNumberInput
- top={pricePerUnitTop}
- lead={t("pricePerUnit")}
- value={order.pricePerUnit.toString()}
- maxDecimal={activePair.quoteAssetPrecision}
- onchange={(e) => buyPriceHandler(e.target.value, "pricePerUnit")}
- />
+ <div className={`column jc-between ${classes.content} px-2 py-1`}>
+
+ <div className={`column`}>
+ <div className={`row jc-between ai-center fs-0-8`} onClick={() => {fillBuyByWallet()}}>
+ <span>{t("orders.availableAmount")}:</span>
+ <span>{new BN(quote).toFormat()}{" "}{t("currency." + activePair.quoteAsset)}</span>
</div>
- </div>
- <div className={`row jc-around`}>
- <div className={`col-98`}>
- <VerticalNumberInput
- top={totalPriceTop}
- lead={t("totalPrice")}
- value={order.totalPrice.toString()}
- maxDecimal={activePair.quoteAssetPrecision}
- onchange={(e) => buyPriceHandler(e.target.value, "totalPrice")}
- //alert={alert.totalPrice}
- />
+ <div className={`row jc-between ai-center fs-0-8`} onClick={() => fillBuyByBestPrice()}>
+ <span>{t("orders.bestOffer")}:</span>
+ <span>{new BN(bestBuyPrice).toFormat()}{" "}{t("currency." + activePair.quoteAsset)}</span>
</div>
</div>
- <div className={`row jc-around`}>
- <div className={`col-98`}>
- <Button
- buttonClass={`${classes.thisButton} ${alert.submit ? classes.alertSubmit : classes.buyOrder} ${isLoading ? "cursor-not-allowed" : "cursor-pointer"} flex jc-center ai-center`}
- type="submit"
- onClick={submit}
- disabled={alert.reqAmount || order.reqAmount.isZero() || order.pricePerUnit.isZero() || !isLogin}
- buttonTitle={submitButtonTextHandler()}
- />
+
+ <NumberInput
+ lead={t("volume")}
+ after={t("currency." + activePair.baseAsset)}
+ value={order.reqAmount.toString()}
+ maxDecimal={activePair.baseAssetPrecision}
+ onchange={(e) => buyPriceHandler(e.target.value, "reqAmount")}
+ alert={alert.reqAmount}
+ customClass={`${classes.smallInput} fs-0-8`}
+ />
+ <NumberInput
+ lead={t("orders.pricePerUnit")}
+ after={t("currency." + activePair.quoteAsset)}
+ value={order.pricePerUnit.toString()}
+ maxDecimal={activePair.quoteAssetPrecision}
+ onchange={(e) => buyPriceHandler(e.target.value, "pricePerUnit")}
+ customClass={`${classes.smallInput} fs-0-8 my-05`}
+ />
+ <NumberInput
+ lead={t("totalPrice")}
+ value={order.totalPrice.toString()}
+ maxDecimal={activePair.quoteAssetPrecision}
+ after={t("currency." + activePair.quoteAsset)}
+ onchange={(e) => buyPriceHandler(e.target.value, "totalPrice")}
+ customClass={`${classes.smallInput} fs-0-8`}
+ />
+ <div className={`row jc-between ai-center`}>
+ <div className="column jc-center fs-0-8">
+ <p>
+ {t("orders.tradeFee")}:{" "}
+ {order.tradeFee.toFormat()}{" "}
+ {t("currency." + activePair.quoteAsset)}
+ </p>
+ <p>
+ {t("orders.getAmount")}:{" "}
+ {order.totalPrice.minus(order.tradeFee).decimalPlaces(activePair.baseAssetPrecision).toNumber()}{" "}
+ {t("currency." + activePair.quoteAsset)}
+ </p>
</div>
+ <Button
+ buttonClass={`${classes.thisButton} width-50 ${classes.buyOrder} ${isLoading ? "cursor-not-allowed" : "cursor-pointer"} flex jc-center ai-center`}
+ type="submit"
+ onClick={submit}
+ disabled={alert.reqAmount || order.reqAmount.isZero() || order.pricePerUnit.isZero() || !isLogin}
+ buttonTitle={submitButtonTextHandler()}
+
+ />
</div>
@@ -321,22 +374,6 @@ const BuyOrder = (props) => {
);
};
-const mapStateToProps = (state) => {
- return {
- activePair: state.exchange.activePair,
- bestBuyPrice: state.exchange.activePairOrders.bestBuyPrice,
- selectedBuyOrder: state.exchange.activePairOrders.selectedBuyOrder,
- wallets: state.auth.wallets,
- tradeFee: state.auth.tradeFee,
- accessToken: state.auth.accessToken,
- isLogin: state.auth.isLogin,
- };
-};
-const mapDispatchToProps = (dispatch) => {
- return {
- setLastTransaction: (time) => dispatch(setLastTransaction(time)),
- };
-};
-export default connect(mapStateToProps, mapDispatchToProps)(BuyOrder);
+export default BuyOrder;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/components/SellOrder/SellOrder.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/components/SellOrder/SellOrder.js
index 7bb5f51..68ad7e5 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/components/SellOrder/SellOrder.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/Order/components/SellOrder/SellOrder.js
@@ -1,17 +1,336 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
import classes from "../../Order.module.css";
-import {useTranslation} from "react-i18next";
+import {Trans, useTranslation} from "react-i18next";
+import {useNavigate} from "react-router-dom";
+import {useDispatch, useSelector} from "react-redux";
+import {useGetUserAccount} from "../../../../../../../../../../../../queries/hooks/useGetUserAccount";
+import {toast} from "react-hot-toast";
+import {setLastTransaction} from "../../../../../../../../../../../../store/actions/auth";
+import {BN, parsePriceString} from "../../../../../../../../../../../../utils/utils";
+import {createOrder} from "js-api-client";
+import {images} from "../../../../../../../../../../../../assets/images";
+import Icon from "../../../../../../../../../../../../components/Icon/Icon";
+import NumberInput from "../../../../../../../../../../../../components/NumberInput/NumberInput";
+import Button from "../../../../../../../../../../../../components/Button/Button";
+
+
const SellOrder = () => {
+ const navigate = useNavigate();
const {t} = useTranslation();
+ const dispatch = useDispatch();
+ const [isLoading, setIsLoading] = useState(false)
- return (
- <div className={`column jc-between ${classes.content}`}>
+ const tradeFee = useSelector((state) => state.auth.tradeFee)
+ const isLogin = useSelector((state) => state.auth.isLogin)
+ const activePair = useSelector((state) => state.exchange.activePair)
+ const bestSellPrice = useSelector((state) => state.exchange.activePairOrders.bestSellPrice)
+ const selectedSellOrder = useSelector((state) => state.exchange.activePairOrders.selectedSellOrder)
+
+ const {data: userAccount} = useGetUserAccount()
+ const base = userAccount?.wallets[activePair.baseAsset]?.free || 0;
+ const quote = userAccount?.wallets[activePair.quoteAsset]?.free || 0;
+
+ const [alert, setAlert] = useState({
+ reqAmount: null,
+ submit: false,
+ });
+
+ const [order, setOrder] = useState({
+ tradeFee: new BN(0),
+ stopLimit: false,
+ stopMarket: false,
+ stopPrice: new BN(0),
+ reqAmount: new BN(0),
+ pricePerUnit: new BN(0),
+ totalPrice: new BN(0),
+ });
+
+ useEffect(() => {
+ if (alert.submit) {
+ setAlert({
+ ...alert, submit: false
+ })
+ }
+ }, [order])
+
+ useEffect(() => {
+ setOrder({
+ tradeFee: new BN(0),
+ stopLimit: false,
+ stopMarket: false,
+ stopPrice: new BN(0),
+ reqAmount: new BN(0),
+ pricePerUnit: new BN(0),
+ totalPrice: new BN(0),
+ })
+ setAlert({
+ submit: false,
+ reqAmount: null,
+ totalPrice: null,
+ })
+ }, [activePair])
+
+
+ const currencyValidator = (key, val, rule) => {
+ if (!val.isZero() && val.isLessThan(rule.min)) {
+ return setAlert({
+ ...alert,
+ [key]: (
+ <Trans
+ i18nKey="orders.minOrder"
+ values={{
+ min: activePair.baseRange.min,
+ currency: t("currency." + activePair.baseAsset),
+ }}
+ />
+ ),
+ });
+ }
+ if (val.isGreaterThan(rule.max)) {
+ return setAlert({
+ ...alert,
+ [key]:
+ (<Trans
+ i18nKey="orders.maxOrder"
+ values={{
+ max: activePair.baseRange.max,
+ currency: t("currency." + activePair.baseAsset),
+ }}
+ />)
+ })
+ }
+ if (!val.mod(rule.step).isZero()) {
+ return setAlert({
+ ...alert,
+ [key]: (<Trans
+ i18nKey="orders.divisibility"
+ values={{mod: rule.step.toString()}}
+ />)
+ })
+ }
+ return setAlert({...alert, [key]: null});
+ };
+
+ const sellPriceHandler = (value, key) => {
+ value = parsePriceString(value);
+ switch (key) {
+ case "reqAmount":
+ const reqAmount = new BN(value);
+ currencyValidator("reqAmount", reqAmount, activePair.baseRange);
+ setOrder({
+ ...order,
+ reqAmount,
+ totalPrice: reqAmount.multipliedBy(order.pricePerUnit).decimalPlaces(activePair.quoteAssetPrecision),
+ tradeFee: reqAmount.multipliedBy(order.pricePerUnit).multipliedBy(tradeFee[activePair.quoteAsset]).decimalPlaces(activePair.baseAssetPrecision),
+ });
+ break;
+ case "pricePerUnit":
+ const pricePerUnit = new BN(value);
+ setOrder({
+ ...order,
+ pricePerUnit: pricePerUnit,
+ totalPrice: pricePerUnit.multipliedBy(order.reqAmount).decimalPlaces(activePair.quoteAssetPrecision),
+ tradeFee: pricePerUnit.multipliedBy(order.reqAmount).multipliedBy(tradeFee[activePair.quoteAsset]).decimalPlaces(activePair.baseAssetPrecision),
+ });
+ break;
+ case "totalPrice":
+ const totalPrice = new BN(value);
+ const req = totalPrice.dividedBy(order.pricePerUnit).decimalPlaces(activePair.baseAssetPrecision);
+ setOrder({
+ ...order,
+ reqAmount: req.isFinite() ? req : new BN(0),
+ totalPrice,
+ tradeFee: req.isFinite() ? totalPrice.multipliedBy(tradeFee[activePair.quoteAsset]).decimalPlaces(activePair.baseAssetPrecision) : new BN(0),
+ });
+ currencyValidator("reqAmount", req, activePair.baseRange);
+ break;
+ default:
+ }
+ };
+ useEffect(() => {
+ setOrder((prevState) => ({
+ ...order,
+ tradeFee: prevState.totalPrice.multipliedBy(tradeFee[activePair.quoteAsset]).decimalPlaces(activePair.baseAssetPrecision),
+ }));
+ }, [tradeFee]);
+
+ useEffect(() => {
+ sellPriceHandler(
+ bestSellPrice.toString(),
+ "pricePerUnit",
+ );
+ }, [order.stopMarket]);
+
+ useEffect(() => {
+ const reqAmount = new BN(selectedSellOrder.amount);
+ const pricePerUnit = new BN(selectedSellOrder.pricePerUnit);
+ setOrder({
+ ...order,
+ reqAmount,
+ pricePerUnit: pricePerUnit,
+ totalPrice: reqAmount.multipliedBy(pricePerUnit).decimalPlaces(activePair.quoteAssetPrecision),
+ tradeFee: reqAmount.multipliedBy(tradeFee[activePair.quoteAsset]).decimalPlaces(activePair.baseAssetPrecision),
+ });
+ currencyValidator("reqAmount", reqAmount, activePair.baseRange);
+ }, [selectedSellOrder]);
+
+ const fillSellByWallet = () => {
+ if(order.pricePerUnit.isEqualTo(0) && bestSellPrice === 0 ) return toast.error(t("orders.hasNoOffer"));
+ if (order.pricePerUnit.isEqualTo(0)) {
+ const totalPrice = new BN(quote);
+ setOrder({
+ ...order,
+ reqAmount: totalPrice.dividedBy(bestSellPrice).decimalPlaces(activePair.baseAssetPrecision),
+ pricePerUnit: new BN(bestSellPrice),
+ totalPrice,
+ tradeFee: totalPrice.multipliedBy(tradeFee[activePair.quoteAsset]).decimalPlaces(activePair.baseAssetPrecision),
+ });
+ } else {
+ sellPriceHandler(
+ quote.toString(),
+ "totalPrice",
+ );
+ }
+ };
+
+ const fillSellByBestPrice = () => {
+ sellPriceHandler(
+ bestSellPrice.toString(),
+ "pricePerUnit",
+ );
+ };
+
+ useEffect(() => {
+ if (order.reqAmount.isGreaterThan(base)) {
+ return setAlert({
+ ...alert,
+ reqAmount: t('orders.notEnoughBalance')
+ })
+ }
+ return setAlert({
+ ...alert,
+ reqAmount: null
+ })
+ }, [order.reqAmount]);
+
+ const submit = () => {
+ if (!isLogin) {
+ return false
+ }
+ if (isLoading) {
+ return false
+ }
+ setIsLoading(true)
+ createOrder(activePair.symbol, "SELL", order)
+ .then((res) => {
+ setOrder({
+ tradeFee: new BN(0),
+ stopLimit: false,
+ stopMarket: false,
+ stopPrice: new BN(0),
+ reqAmount: new BN(0),
+ pricePerUnit: new BN(0),
+ totalPrice: new BN(0),
+ })
+ toast.success(<Trans
+ i18nKey="orders.success"
+ values={{
+ base: t("currency." + activePair.baseAsset),
+ quote: t("currency." + activePair.quoteAsset),
+ type: t("sell"),
+ reqAmount: order.reqAmount,
+ pricePerUnit: order.pricePerUnit,
+ }}
+ />);
+ dispatch(setLastTransaction(res.data.transactTime))
+ }).catch(() => {
+ toast.error(t("orders.error"));
+ setAlert({
+ ...alert, submit: true
+ })
+ }).finally(() => {
+ setIsLoading(false)
+ })
+ }
+
+ const submitButtonTextHandler = () => {
+ if (isLoading) {
+ return <img className={`${classes.thisLoading}`} src={images.linearLoading} alt="linearLoading"/>
+ }
+ /*if (alert.submit) {
+ return <span>{t("login.loginError")}</span>
+ }*/
+ if (isLogin) {
+ return t("sell")
+ }
+ return t("pleaseLogin")
+ }
+
+
+ return (
+ <div className={`column jc-between ${classes.content} px-2 py-1`}>
+ <div className={`column`}>
+ <div className={`row jc-between ai-center fs-0-8`} onClick={() => {fillSellByWallet()}}>
+ <span>{t("orders.availableAmount")}:</span>
+ <span>{new BN(base).toFormat()}{" "}{t("currency." + activePair.baseAsset)}</span>
+ </div>
+ <div className={`row jc-between ai-center fs-0-8`} onClick={() => fillSellByBestPrice()}>
+ <span> {t("orders.bestOffer")}:</span>
+ <span> {new BN(bestSellPrice).toFormat()}{" "}{t("currency." + activePair.quoteAsset)}</span>
+ </div>
+ </div>
+ <NumberInput
+ lead={t("orders.amount")}
+ after={t("currency." + activePair.baseAsset)}
+ value={order.reqAmount.toString()}
+ maxDecimal={activePair.baseAssetPrecision}
+ onchange={(e) => sellPriceHandler(e.target.value, "reqAmount")}
+ alert={alert.reqAmount}
+ customClass={`${classes.smallInput} fs-0-8`}
+ />
+ <NumberInput
+ lead={t("orders.pricePerUnit")}
+ after={t("currency." + activePair.quoteAsset)}
+ value={order.pricePerUnit.toString()}
+ maxDecimal={activePair.quoteAssetPrecision}
+ onchange={(e) => sellPriceHandler(e.target.value, "pricePerUnit")}
+ customClass={`${classes.smallInput} fs-0-8 my-05`}
+ />
+ <NumberInput
+ lead={t("orders.totalPrice")}
+ value={order.totalPrice.toString()}
+ maxDecimal={activePair.quoteAssetPrecision}
+ after={t("currency." + activePair.quoteAsset)}
+ onchange={(e) => sellPriceHandler(e.target.value, "totalPrice")}
+ customClass={`${classes.smallInput} fs-0-8`}
+ />
+ <div className={`row jc-between ai-center`}>
+ <div className="column jc-center fs-0-8">
+ <p>
+ {t("orders.tradeFee")}:{" "}
+ {order.tradeFee.toFormat()}{" "}
+ {t("currency." + activePair.quoteAsset)}
+ </p>
+ <p>
+ {t("orders.getAmount")}:{" "}
+ {order.totalPrice.minus(order.tradeFee).decimalPlaces(activePair.baseAssetPrecision).toNumber()}{" "}
+ {t("currency." + activePair.quoteAsset)}
+ </p>
+ </div>
+ <Button
+ buttonClass={`${classes.thisButton} width-50 ${classes.sellOrder} ${isLoading ? "cursor-not-allowed" : "cursor-pointer"} flex jc-center ai-center`}
+ type="submit"
+ onClick={submit}
+ disabled={alert.reqAmount || order.reqAmount.isZero() || order.pricePerUnit.isZero() || !isLogin}
+ buttonTitle={submitButtonTextHandler()}
+ />
+ </div>
</div>
);
};
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/Settings.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/Settings.js
index 3a5942e..be67dd8 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/Settings.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/Settings.js
@@ -1,18 +1,50 @@
import React from "react";
-import ToggleSwitch from "../../../../../../../../components/ToggleSwitch/ToggleSwitch";
import {setThemeInitiate} from "../../../../../../../../store/actions";
import {connect} from "react-redux";
-import {useTranslation} from "react-i18next";
+import {Navigate, Route, Routes, useParams} from "react-router-dom";
+import Profile from "./components/Profile/Profile";
+import Security from "./components/Security/Security";
+import Authentication from "./components/Authentication/Authentication";
+import APIKey from "./components/APIKey/APIKey";
+import * as RoutesName from "../../../../../../Routes/routes";
const Settings = (props) => {
- const {t} = useTranslation();
+
+ const {path} = useParams()
+
+ console.log(path)
+
+ const content = () => {
+
+ if (path === "profile") {
+ return <Profile/>
+ }
+ if (path === "security") {
+ return <Security/>
+ }
+ if (path === "authentication") {
+ return <Authentication/>
+ }
+ if (path === "api-key") {
+ return <APIKey/>
+ }
+
+ }
return (
- <div className={`width-100 column jc-around ai-center`} style={{height:"100%"}}>
- <span>{t("comingSoon")}</span>
- <ToggleSwitch onchange={(e) => props.onThemeChange(e.target.checked)} checked={props.isDark}/>
+ <div className={`width-100 flex ai-center jc-center height-100 px-3 py-1`}>
+
+
+ <Routes>
+ <Route path={RoutesName.Settings} element={<Navigate to={{pathname: `${RoutesName.Profile}`}} replace/>}/>
+ <Route path={RoutesName.ProfileRelative} element={<Profile/>}/>
+ <Route path={RoutesName.SecurityRelative} element={<Security/>}/>
+ <Route path={RoutesName.AuthenticationRelative} element={<Authentication/>}/>
+ <Route path={RoutesName.APIKeyRelative} element={<APIKey/>}/>
+ </Routes>
+
</div>
);
};
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/APIKey/APIKey.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/APIKey/APIKey.js
new file mode 100644
index 0000000..f064d8a
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/APIKey/APIKey.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const APIKey = () => {
+ return (
+ <div>
+
+ </div>
+ );
+};
+
+export default APIKey;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/APIKey/APIKey.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/APIKey/APIKey.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/Authentication.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/Authentication.js
new file mode 100644
index 0000000..f786c89
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/Authentication.js
@@ -0,0 +1,120 @@
+import React, {useEffect, useState} from 'react';
+import ScrollBar from "../../../../../../../../../../components/ScrollBar";
+import {useTranslation} from "react-i18next";
+import {useSelector} from "react-redux";
+import HelpStep from "./components/HelpStep/HelpStep";
+import PersonalProfileStep from "./components/PersonalProfileStep/PersonalProfileStep";
+import SendPhotosStep from "./components/SendPhotosStep/SendPhotosStep";
+import SendToAdminStep from "./components/SendToAdminStep/SendToAdminStep";
+
+const Authentication = () => {
+
+ const {t} = useTranslation();
+ const [step, setStep] = useState(1);
+
+ const KYCStatus = useSelector(state => state.auth.kyc);
+
+ useEffect(()=>{
+ if (KYCStatus && KYCStatus !== "NOT_REQUESTED" ) {
+ setStep(4)
+ }
+ }, [KYCStatus])
+
+ const titleHandler = () => {
+
+ if (step === 1) return t("Authentication.HelpStep")
+ if (step === 2) return t("Authentication.PersonalProfileStep")
+ if (step === 3) return t("Authentication.SendPhotosStep")
+ if (step === 4) return t("Authentication.SendToAdminStep")
+
+ }
+
+ const stepSwitch = (step) => {
+ switch (step) {
+ case 1:
+ return <HelpStep nextStep={() => setStep(2)}/>;
+ case 2:
+ return (
+ <PersonalProfileStep
+ prevStep={() => setStep(1)}
+ nextStep={() => setStep(3)}
+ />
+ );
+ case 3:
+ return (
+ <SendPhotosStep
+ prevStep={() => setStep(2)}
+ nextStep={() => setStep(4)}
+ />
+ );
+ case 4:
+ return <SendToAdminStep prevStep={() => setStep(3)}/>;
+ default:
+ return <HelpStep/>;
+ }
+ };
+
+
+ return (
+ <div className={`column width-100 height-100`}>
+ <div className={`width-100 column jc-center ai-center mb-3`}>
+ <span className={`font-weight-bold my-2`}>{titleHandler()}</span>
+ <div className="row card-bg card-border width-80" >
+ {step === 1 ? (
+ <span className="col-25"
+ style={{
+ backgroundColor: "var(--activeTab)",
+ height: "0.75vh",
+ borderBottomRightRadius: "15px",
+ borderTopRightRadius: "15px",
+ }}
+ />
+ ) : (
+ ""
+ )}
+ {step === 2 ? (
+ <span className="col-50"
+ style={{
+ backgroundColor: "var(--activeTab)",
+ height: "0.75vh",
+ borderBottomRightRadius: "15px",
+ borderTopRightRadius: "15px",
+ transition: "all 5s",
+ }}
+ />
+ ) : (
+ ""
+ )}
+ {step === 3 ? (
+ <span className="col-75"
+ style={{
+ backgroundColor: "var(--activeTab)",
+ height: "0.75vh",
+ borderBottomRightRadius: "15px",
+ borderTopRightRadius: "15px",
+ }}
+ />
+ ) : (
+ ""
+ )}
+ {step === 4 ? (
+ <span className="col-100"
+ style={{
+ backgroundColor: "var(--activeTab)",
+ height: "0.75vh",
+ borderRadius: "15px",
+ }}
+ />
+ ) : (
+ ""
+ )}
+ </div>
+ </div>
+ <ScrollBar>
+ {stepSwitch(step)}
+ </ScrollBar>
+ </div>
+ );
+};
+
+export default Authentication;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/Authentication.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/Authentication.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/HelpStep/HelpStep.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/HelpStep/HelpStep.js
new file mode 100644
index 0000000..f8d4309
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/HelpStep/HelpStep.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import classes from "./HelpStep.module.css";
+import {useTranslation} from "react-i18next";
+import Button from "../../../../../../../../../../../../components/Button/Button";
+
+const HelpStep = ({nextStep}) => {
+ const {t} = useTranslation();
+
+ return (
+ <div className={`card-bg card-border column ${classes.container}`}>
+ <div className={`column border-bottom jc-center card-header-bg px-4 py-1 ${classes.header}`}>
+ <div className="row jc-start ">
+ <h4>{t("HelpStep.title")}</h4>
+ </div>
+ </div>
+ <div className={`column jc-between px-4 py-2 ${classes.content}`}>
+ <span>{t("HelpStep.content")}</span>
+ <div className="row jc-center">
+ <Button
+ buttonClass={classes.thisButton}
+ onClick={nextStep}
+ buttonTitle={t("nextStep")}
+ />
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default HelpStep;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/HelpStep/HelpStep.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/HelpStep/HelpStep.module.css
new file mode 100644
index 0000000..016a397
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/HelpStep/HelpStep.module.css
@@ -0,0 +1,13 @@
+.container {
+ height: 100%;
+}
+.header {
+ height: 12%;
+}
+.content {
+ height: 88%;
+}
+.thisButton {
+ width: 30%;
+ background-color: var(--darkGreen);
+}
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.js
new file mode 100644
index 0000000..0cf4e4f
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.js
@@ -0,0 +1,313 @@
+import React, {useEffect, useState} from 'react';
+import classes from "./PersonalProfileStep.module.css";
+import {Trans, useTranslation} from "react-i18next";
+import {useDispatch, useSelector} from "react-redux";
+import {getUserAttributes, setUserProfileAttributes} from "js-api-client";
+import {changeUserInfo} from "../../../../../../../../../../../../store/actions";
+import moment from "moment-jalaali";
+import {isValidNationalCode} from "../../../../../../../../../../../../utils/utils";
+import TextInput from "../../../../../../../../../../../../components/TextInput/TextInput";
+import Loading from "../../../../../../../../../../../../components/Loading/Loading";
+import Button from "../../../../../../../../../../../../components/Button/Button";
+
+const PersonalProfileStep = (props) => {
+
+ const {t} = useTranslation();
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState([])
+ const dispatch = useDispatch();
+ const email = useSelector((state) => state.auth.email)
+
+ const [profile, setProfile] = useState({
+ firstName: {value: "", error: []},
+ lastName: {value: "", error: []},
+ nationality: {value: "", error: []},
+ residence: {value: "", error: []},
+ birthday: {value: "", error: []},
+ idNumber: {value: "", error: []},
+ mobile: {value: "", error: []},
+ postalCode: {value: "", error: []},
+ address: {value: "", error: []},
+ });
+ const countries = [
+ {value: "iran", label: t('country.iran')},
+ {value: "germany", label: t('country.germany')},
+ {value: "uk", label: t('country.uk')},
+ {value: "turkey", label: t('country.turkey')},
+ ]
+
+ const convertUserInfoToState = (info) => {
+ const newState = {...profile}
+ for (const [key, value] of Object.entries(info)) {
+ newState[key] = {value: value, error: []}
+ }
+ setProfile(newState)
+ }
+
+ const convertStateToUserInfo = () => {
+ const newState = {}
+ for (const [key, value] of Object.entries(profile)) {
+ newState[key] = value.value
+ }
+ return newState
+ }
+
+ const getUser = () => {
+ setLoading(true)
+ setError([])
+ getUserAttributes().then((res) => {
+ convertUserInfoToState(res.data)
+ }).catch(() => {
+ setError([t("PersonalProfileStep.serverError")])
+ }).finally(() => {
+ setLoading(false)
+ })
+ }
+ useEffect(() => {
+ getUser()
+ }, [])
+
+ const sendProfile = async () => {
+ if (!isFormValid()) return
+ setLoading(true)
+
+ const data = convertStateToUserInfo()
+ delete data.email;
+ delete data.username;
+ delete data.passportNumber;
+ delete data.birthdayG;
+ delete data.birthdayJ;
+ delete data.nationalId;
+ delete data.telephone;
+ delete data.selfiePath;
+ delete data.idCardPath;
+ delete data.acceptFormPath;
+
+
+ setUserProfileAttributes(data)
+ .then(() => {
+ setError([])
+ dispatch(changeUserInfo(profile.firstName.value, profile.lastName.value))
+ props.nextStep()
+ })
+ .catch(() => {
+ setError([t("PersonalProfileStep.serverError")])
+ })
+ .finally(() => {
+ setLoading(false)
+ })
+ }
+
+ const inputHandler = (e) => {
+ let errorMessage = []
+ let inputVal = e.target.value
+ if (typeof e.target.dataset?.min && inputVal.length < e.target.dataset.min) {
+ errorMessage.push(<Trans
+ i18nKey="PersonalProfileStep.minInput"
+ values={{
+ name: t("PersonalProfile." + e.target.dataset.name),
+ min: e.target.dataset.min
+ }}
+ />)
+ }
+ if (typeof e.target.dataset?.max && inputVal.length >= e.target.dataset.max) {
+ errorMessage.push(<Trans
+ i18nKey="PersonalProfileStep.maxInput"
+ values={{
+ name: t("PersonalProfile." + e.target.dataset.name),
+ max: e.target.dataset.max
+ }}
+ />)
+ }
+ if (e.target.dataset?.type === "dateJ" && (!moment(inputVal, "jYYYY/jMM/jDD").isValid() || moment(inputVal, "jYYYY/jMM/jDD").isAfter())) {
+ errorMessage.push(t("PersonalProfileStep.wrongDateJ"))
+ }
+ if (e.target.dataset?.type === "dateG" && (!moment(inputVal, ["YYYY/MM/DD", "YYYY/M/D"], true) || moment(inputVal, ["YYYY/MM/DD", "YYYY/M/D"], true).isAfter())) {
+ errorMessage.push(t("PersonalProfileStep.wrongDateG"))
+ }
+ if (e.target.dataset?.type === "nationalId" && !isValidNationalCode(inputVal)) {
+ inputVal = inputVal.replace(/[^0-9]+/g, "")
+ errorMessage.push(t("PersonalProfileStep.wrongNationalId"))
+ }
+ if (e.target.dataset?.type === "mobile" || e.target.dataset?.type === "telephone" || e.target.dataset?.type === "postalCode") {
+ inputVal = inputVal.replace(/[^0-9]+/g, "")
+ }
+ setProfile({
+ ...profile,
+ [e.target.dataset.name]: {value: inputVal, error: errorMessage}
+ })
+ }
+
+ const isFormValid = () => {
+ let inputs = {...profile}
+ const hasError = Object.values(profile).find(input => input.error.length > 0)
+ if (hasError) return false
+ let isEmpty = false
+ for (const key in inputs) {
+ if (inputs[key].value.length === 0) {
+ isEmpty = true
+ inputs = {
+ ...inputs,
+ [key]: {
+ ...inputs[key],
+ error: [<Trans
+ i18nKey="PersonalProfileStep.emptyInput"
+ values={{
+ name: t("PersonalProfile." + key),
+ }}
+ />]
+ }
+ }
+ }
+ }
+ setProfile(inputs);
+ return !isEmpty;
+ }
+
+
+ return (
+ <div className={`card-bg card-border column ${classes.container}`}>
+ <div className={`column border-bottom jc-center card-header-bg px-4 py-2 ${classes.header}`}>
+ <div className="row jc-start ">
+ <h3>{t("PersonalProfileStep.title")}</h3>
+ </div>
+ </div>
+ {loading ? <div className={`my-20`}><Loading/></div> :
+ <div className={`column jc-between ai-center px-4 py-2 ${classes.content}`}>
+ <TextInput
+ lead={t('PersonalProfile.firstName')}
+ type="text"
+ value={profile.firstName.value}
+ customClass={`${classes.thisInput} width-100 my-1`}
+ data-name="firstName"
+ data-type="input"
+ data-min={2}
+ onchange={(e) => inputHandler(e)}
+ alerts={profile.firstName.error}
+ />
+ <TextInput
+ lead={t('PersonalProfile.lastName')}
+ type="text"
+ value={profile.lastName.value}
+ customClass={`${classes.thisInput} width-100 my-1`}
+ data-name="lastName"
+ data-type="input"
+ data-min={2}
+ onchange={(e) => inputHandler(e)}
+ alerts={profile.lastName.error}
+ />
+ <TextInput
+ select={true}
+ placeholder={t('PersonalProfile.select')}
+ customClass={`${classes.thisInput} width-100 my-1`}
+ options={countries}
+ defaultValue={countries.filter((v) => v.value === profile.nationality.value)}
+ lead={t('PersonalProfile.nationality')}
+ type="select"
+ onchange={(e) => setProfile({...profile, nationality: {value: e.value, error: []}})}
+ alerts={profile.nationality.error}
+ />
+ <TextInput
+ select={true}
+ placeholder={t('PersonalProfile.select')}
+ customClass={`${classes.thisInput} width-100 my-1`}
+ lead={t('PersonalProfile.residence')}
+ defaultValue={countries.filter((v) => v.value === profile.residence.value)}
+ type="select"
+ options={countries}
+ onchange={(e) => setProfile({...profile, residence: {value: e.value, error: []}})}
+ alerts={profile.residence.error}
+ />
+
+
+ <TextInput
+ lead={t('PersonalProfile.birthday')}
+ type="text"
+ placeholder={t('PersonalProfileStep.yy/mm//dd')}
+ customClass={`${classes.thisInput} width-100 my-1`}
+ ltr={true}
+ value={profile.birthday.value}
+ data-name="birthday"
+ data-type="birthday"
+ onchange={(e) => inputHandler(e)}
+ alerts={profile.birthday.error}
+ />
+ <TextInput
+ lead={t('PersonalProfile.idNumber')}
+ placeholder={t('PersonalProfile.idNumberPlaceHolder')}
+ type="text"
+ value={profile.idNumber.value}
+ customClass={`${classes.thisInput} width-100 fs-0-9 my-1`}
+ data-name="idNumber"
+ data-type="idNumber"
+ onchange={(e) => inputHandler(e)}
+ alerts={profile.idNumber.error}
+ //maxLength="10"
+ />
+
+ <TextInput
+ lead={t('PersonalProfile.mobile')}
+ type="text"
+ customClass={`${classes.thisInput} width-100 my-1`}
+ ltr={true}
+ value={profile.mobile.value}
+ data-name="mobile"
+ data-type="mobile"
+ onchange={(e) => inputHandler(e)}
+ alerts={profile.mobile.error}
+ />
+ <TextInput
+ lead={t('PersonalProfile.postalCode')}
+ type="text"
+ customClass={`${classes.thisInput} width-100 my-1`}
+ ltr={true}
+ value={profile.postalCode.value}
+ data-name="postalCode"
+ data-type="postalCode"
+ onchange={(e) => inputHandler(e)}
+ alerts={profile.postalCode.error}
+ />
+ <TextInput
+ lead={t('PersonalProfile.email')}
+ type="email"
+ disabled={true}
+ value={email}
+ customClass={`${classes.email} ${classes.thisInput} width-100 my-1`}
+ alerts={[]}
+ />
+ <TextInput
+ lead={t('PersonalProfile.address')}
+ type="text"
+ customClass={`${classes.thisInput} width-100 my-1`}
+ ltr={true}
+ value={profile.address.value}
+ data-name="address"
+ data-type="address"
+ onchange={(e) => inputHandler(e)}
+ alerts={profile.address.error}
+ />
+ <div className="width-100 column pt-2 jc-between">
+ <div className={` flex jc-center my-2`}>
+ <span className={` text-red fs-0-8 cursor-pointer`} onClick={getUser}>{error.length !== 0 && error}</span>
+ </div>
+ <div className={`width-100 row jc-center ai-center mt-1`}>
+ <Button
+ buttonClass={`${classes.thisButton} ${classes.prev} ml-2`}
+ onClick={props.prevStep}
+ buttonTitle={t("prevStep")}
+ />
+ <Button
+ buttonClass={`${classes.thisButton} ${classes.next} mr-2`}
+ onClick={sendProfile}
+ buttonTitle={t("nextStep")}
+ />
+ </div>
+ </div>
+ </div>
+ }
+
+ </div>
+ );
+};
+
+export default PersonalProfileStep;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.module.css
new file mode 100644
index 0000000..f2e9035
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.module.css
@@ -0,0 +1,34 @@
+.container {
+ min-height: 65vh;
+}
+
+.content :global(.row) {
+ width: 100%;
+}
+.addressInput :global(.lead) {
+ width: 24.5%;
+}
+.addressInput :global(input) {
+ width: 75.5%;
+}
+.thisButton {
+ width: 30%;
+}
+.thisButton.prev{
+ background-color: var(--orange);
+}
+.thisButton.next{
+ background-color: var(--darkGreen);
+}
+.email :global(input){
+ background-color: var(--cardHeader);
+ cursor: not-allowed;
+}
+
+.thisInput :global(.lead) {
+ width: 40%;
+}
+.thisInput :global(input) {
+ width: 60%;
+}
+
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendPhotosStep/SendPhotosStep.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendPhotosStep/SendPhotosStep.js
new file mode 100644
index 0000000..ae97454
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendPhotosStep/SendPhotosStep.js
@@ -0,0 +1,125 @@
+import React, {useState} from 'react';
+import classes from "./SendPhotosStep.module.css";
+import {sendFileToUserStorage, setKycFileToUserAttributes} from "js-api-client";
+import {toast} from "react-hot-toast";
+import {useTranslation} from "react-i18next";
+import {useSelector} from "react-redux";
+import ImageInput from "../../../../../../../../../../../../components/ImageInput/ImageInput";
+import Button from "../../../../../../../../../../../../components/Button/Button";
+
+const SendPhotosStep = (props) => {
+
+ const {t} = useTranslation();
+
+ const [sending, setSending] = useState(false);
+ const [images, setImages] = useState({
+ img1: "",
+ img2: "",
+ img3: "",
+ });
+ const id = useSelector(state => state.auth.id);
+
+ const sendImageHandler = async () => {
+ if (images.img1 === "") {
+ toast.error(t("SendPhotosStep.acceptFormEmpty"));
+ return;
+ }
+ if (images.img2 === "") {
+ toast.error(t("SendPhotosStep.selfieEmpty"));
+ return;
+ }
+ if (images.img3 === "") {
+ toast.error(t("SendPhotosStep.idCardEmpty"));
+ return;
+ }
+ setSending(true)
+ const acceptForm = await sendFileToUserStorage(id, images.img1)
+ const selfie = await sendFileToUserStorage(id, images.img2)
+ const idCard = await sendFileToUserStorage(id, images.img3)
+ if (acceptForm.status === 200 && selfie.status === 200 && idCard.status === 200) {
+ const paths = {
+ selfiePath: `${selfie.data.path}`,
+ idCardPath: `${idCard.data.path}`,
+ acceptFormPath: `${acceptForm.data.path}`
+ }
+ setKycFileToUserAttributes(paths)
+ .then(() => {
+ setSending(false)
+ props.nextStep()
+ }).catch(() => {
+ toast.error(t("SendPhotosStep.serverError"));
+ setImages({...images})
+ })
+ } else {
+ toast.error(t("SendPhotosStep.serverError"));
+ }
+ setSending(false)
+ }
+
+ return (
+ <div className={`card-bg card-border column ${classes.container}`}>
+ <div className={`column border-bottom jc-center card-header-bg px-4 py-2 ${classes.header}`}>
+ <div className="row jc-start ">
+ <h3>{t("SendPhotosStep.title")}</h3>
+ </div>
+ </div>
+ <div className={`width-100 column jc-between px-4 py-2 ${classes.content}`}>
+ <div className="column">
+ <span className={`mb-2`}>{t("SendPhotosStep.content")}</span>
+ <span>{t("SendPhotosStep.acceptForm")}{" "}<span
+ className="cursor-pointer hover-text">{" "}{t("SendPhotosStep.acceptFormLink")}</span></span>
+ <span>{t("SendPhotosStep.selfie")}{" "}<span
+ className="cursor-pointer hover-text">{" "}{t("SendPhotosStep.selfieLink")}</span></span>
+ <span>{t("SendPhotosStep.idCard")}{" "}<span className="cursor-pointer hover-text">
+ {" "}{t("SendPhotosStep.idCardLink")}</span>
+ </span>
+ <div className={`column jc-between ai-start mt-2`}>
+ {sending ?
+ <div className={`flex jc-center ai-center width-100`} style={{height: "30vh"}}>
+ <span className={`flashit`}>{t("SendPhotosStep.sendingData")}</span>
+ </div>
+ :
+ <>
+ <ImageInput
+ zoneCustomClass={classes.zoneBox}
+ title={t("SendPhotosStep.acceptFormDropzone")}
+ onchange={(url) => setImages({...images, img1: url})}
+ />
+ <ImageInput
+ zoneCustomClass={classes.zoneBox}
+ title={t("SendPhotosStep.selfieDropzone")}
+ onchange={(url) => setImages({...images, img2: url})}
+ />
+ <ImageInput
+ zoneCustomClass={classes.zoneBox}
+ title={t("SendPhotosStep.idCardDropzone")}
+ onchange={(url) => setImages({...images, img3: url})}
+ />
+ </>
+ }
+ </div>
+ </div>
+ <div className="column pt-1 jc-between">
+ <div className={`column mb-2`}>
+ <span>{t("SendPhotosStep.imageAcceptedFormat")}</span>
+ <span>{t("SendPhotosStep.imageAcceptedSize")}</span>
+ </div>
+ <div className={`row jc-center ai-center mt-2`}>
+ <Button
+ buttonClass={`${classes.thisButton} ${classes.prev} ml-2`}
+ onClick={props.prevStep}
+ buttonTitle={t("prevStep")}
+ />
+ <Button
+ buttonClass={`${classes.thisButton} ${classes.next} mr-2`}
+ onClick={sendImageHandler}
+ buttonTitle={t("nextStep")}
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default SendPhotosStep;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendPhotosStep/SendPhotosStep.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendPhotosStep/SendPhotosStep.module.css
new file mode 100644
index 0000000..ec19fef
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendPhotosStep/SendPhotosStep.module.css
@@ -0,0 +1,38 @@
+.container {
+ min-height: 65vh;
+}
+.header {
+ height: 12%;
+}
+.content {
+ height: 88%;
+}
+.thisButton {
+ width: 30%;
+}
+.thisButton.prev{
+ background-color: var(--orange);
+}
+.thisButton.next{
+ background-color: var(--darkGreen);
+}
+
+.zoneBox {
+ width: 100%;
+ padding: 2vh 3vw;
+ border-radius: 10px;
+ border: 0.3vh dotted var(--cardBorder);
+}
+.cancel {
+ top: 1.2vh;
+ left: 2.1vw;
+}
+.zone {
+ padding: 2vh 5vw;
+ height: 40vh;
+ border-radius: 10px;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+ background-color: var(--cardHeader);
+}
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendToAdminStep/SendToAdminStep.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendToAdminStep/SendToAdminStep.js
new file mode 100644
index 0000000..781f81f
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendToAdminStep/SendToAdminStep.js
@@ -0,0 +1,74 @@
+import React, {useEffect} from 'react';
+import {useTranslation} from "react-i18next";
+import classes from "./SendToAdminStep.module.css";
+import {useDispatch, useSelector} from "react-redux";
+import {setKYCStatusInitiate} from "../../../../../../../../../../../../store/actions";
+import {images} from "../../../../../../../../../../../../assets/images";
+import Button from "../../../../../../../../../../../../components/Button/Button";
+
+const SendToAdminStep = ({prevStep}) => {
+
+ const {t} = useTranslation();
+ const dispatch = useDispatch();
+ const KYCStatus = useSelector(state => state.auth.kyc);
+ const KYCReason = useSelector(state => state.auth.kycReason);
+
+ useEffect(() => {
+ dispatch(setKYCStatusInitiate());
+ }, []);
+
+ const content = () => {
+ if (KYCStatus === "REQUESTED") {
+ return <div className={`column jc-center ai-center`}>
+ <img className={`mb-2 floating`} src={images.pending} alt="kyc-pending"/>
+ <span className={`mt-2`}>{t("SendToAdminStep.pending")}</span>
+ </div>
+ }
+ if (KYCStatus === "ACCEPTED") {
+ return <div className={`column jc-center ai-center`}>
+ <img className={`mb-2 floating`} src={images.approve} alt="kyc-accepted"/>
+ <span className={`text-green mt-2`}>{t("SendToAdminStep.accepted")}</span>
+ </div>
+ }
+ if (KYCStatus === "REJECTED") {
+ return <div className={`column jc-center ai-center`}>
+ <img className={`mb-2 floating`} src={images.reject} alt="kyc-rejected"/>
+ <span className={`text-red mt-2`}>{t("SendToAdminStep.rejected")}</span>
+ <span className={`fs-0-8 mt-1`}>{t("SendToAdminStep.errorMessage")}: {KYCReason === undefined ? t("SendToAdminStep.noData") : KYCReason}</span>
+
+ </div>
+ }
+ if (KYCStatus === "BLOCKED") {
+ return <div className={`column jc-center ai-center`}>
+ <img className={`mb-2 floating`} src={images.block} alt="kyc-rejected"/>
+ <span className={`text-red mt-2`}>{t("SendToAdminStep.blocked")}</span>
+ <span className={`fs-0-8 mt-1`}>{t("SendToAdminStep.errorMessage")}: {KYCReason}</span>
+ </div>
+ }
+ }
+
+ return (
+ <div className={`container card-bg card-border column ${classes.container}`}>
+ <div className={`column border-bottom jc-center card-header-bg px-4 py-1 ${classes.header}`}>
+ <div className="row jc-start ">
+ <h3>{t("SendToAdminStep.title")}</h3>
+ </div>
+ </div>
+ <div className={`container column jc-between px-4 py-2 ${classes.content}`}>
+ <span>{t("SendToAdminStep.content")}</span>
+ <div className={`column`}>
+ {content()}
+ </div>
+ <div className="row pt-1 jc-end">
+ {KYCStatus === "REJECTED" && <Button
+ buttonClass={`${classes.thisButton} ${classes.prev}`}
+ onClick={prevStep}
+ buttonTitle={t("prevStep")}
+ />}
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default SendToAdminStep;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendToAdminStep/SendToAdminStep.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendToAdminStep/SendToAdminStep.module.css
new file mode 100644
index 0000000..07916e7
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/SendToAdminStep/SendToAdminStep.module.css
@@ -0,0 +1,21 @@
+.container {
+ height: 100%;
+}
+.header {
+ height: 12%;
+}
+.content {
+ height: 88%;
+}
+.thisButton {
+ width: 10%;
+}
+.thisButton.prev{
+ background-color: var(--orange);
+}
+.thisButton.submit{
+ background-color: var(--darkGreen);
+}
+.content img{
+ width: 25%;
+}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/Profile.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/Profile.js
new file mode 100644
index 0000000..4abac21
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/Profile.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import ScrollBar from "../../../../../../../../../../components/ScrollBar";
+import PersonalProfile from "./components/PersonalProfile/PersonalProfile";
+
+const Profile = () => {
+ return (
+ <ScrollBar>
+ <PersonalProfile/>
+
+
+ </ScrollBar>
+ );
+};
+
+export default Profile;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/Profile.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/Profile.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/components/PersonalProfile/PersonalProfile.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/components/PersonalProfile/PersonalProfile.js
new file mode 100644
index 0000000..179fca5
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/components/PersonalProfile/PersonalProfile.js
@@ -0,0 +1,150 @@
+import React from 'react';
+import classes from './PersonalProfile.module.css'
+import {useTranslation} from "react-i18next";
+import {useNavigate} from "react-router-dom";
+import {useSelector} from "react-redux";
+import {useGetUserAttributes} from "../../../../../../../../../../../../queries";
+import Loading from "../../../../../../../../../../../../components/Loading/Loading";
+import TextInput from "../../../../../../../../../../../../components/TextInput/TextInput";
+import * as RoutesName from "../../../../../../../../../../Routes/routes";
+import Button from "../../../../../../../../../../../../components/Button/Button";
+import {images} from "../../../../../../../../../../../../assets/images";
+
+const PersonalProfile = () => {
+
+ const {t} = useTranslation();
+ const navigate = useNavigate();
+ const KYCStatus = useSelector(state => state.auth.kyc);
+ const KYCReason = useSelector(state => state.auth.kycReason);
+
+ const {data: profile, isLoading} = useGetUserAttributes()
+
+ const content = () => {
+ if (isLoading) {
+ return <div className={`my-10`} ><Loading/></div>
+ }
+ if (KYCStatus === "REQUESTED") {
+ return <div className={`column jc-center ai-center py-2`}>
+ <img className={`mb-2 floating`} src={images.pending} alt="kyc-rejected"/>
+ <span className={`mt-5`}>{t('SendToAdminStep.pending')}</span>
+ </div>
+ }
+ if (KYCStatus === "REJECTED") {
+ return <div className={`column jc-center ai-center py-2`}>
+ <img className={`mb-2 floating`} src={images.reject} alt="kyc-rejected"/>
+ <span className={`mt-5`}>{t("SendToAdminStep.rejected")}</span>
+ <span className={`fs-0-8 mt-1`}>{t("SendToAdminStep.errorMessage")}: {KYCReason === undefined ? t("SendToAdminStep.noData") : KYCReason}</span>
+ <Button
+ buttonClass={`${classes.thisButton} mt-5`}
+ buttonTitle={t("PersonalProfile.doKYC")}
+ onClick={()=>navigate(RoutesName.Authentication)}
+ type="button"
+ />
+ </div>
+ }
+ if (KYCStatus === "BLOCKED") {
+ return <div className={`column jc-center ai-center py-2`}>
+ <img className={`mb-2 floating`} src={images.block} alt="kyc-rejected"/>
+ <span className={`mt-5`}>{t('SendToAdminStep.blocked')}</span>
+ <span className={`fs-0-8 mt-1`}>{t("SendToAdminStep.errorMessage")}: {KYCReason}</span>
+ </div>
+ }
+ if (KYCStatus === "ACCEPTED") {
+ return <>
+ <span className={`text-green text-center my-2 fs-0-8`}>{t("PersonalProfile.cantEdit")}</span>
+ <TextInput
+ lead={t('PersonalProfile.firstName')}
+ type="text"
+ disabled={true}
+ value={profile.firstName}
+ customClass={`${classes.thisInput} my-1`}
+ />
+ <TextInput
+ lead={t('PersonalProfile.lastName')}
+ type="text"
+ disabled={true}
+ value={profile.lastName}
+ customClass={`${classes.thisInput} my-1`}
+ />
+ <TextInput
+ value={t("country." + profile.nationality)}
+ type="text"
+ lead={t('PersonalProfile.nationality')}
+ isDisabled={true}
+ customClass={`${classes.thisInput} my-1`}
+ />
+ <TextInput
+ lead={t('PersonalProfile.residence')}
+ type="text"
+ value={t("country." + profile.residence)}
+ isDisabled={true}
+ customClass={`${classes.thisInput} my-1`}
+ />
+ <TextInput
+ lead={t('PersonalProfile.birthday')}
+ type="text"
+ disabled={true}
+ value={profile.birthday}
+ customClass={`${classes.thisInput} my-1`}
+ />
+ <TextInput
+ lead={t('PersonalProfile.idNumber')}
+ type="text"
+ disabled={true}
+ value={profile.idNumber}
+ customClass={`${classes.thisInput} my-1`}
+ />
+ <TextInput
+ lead={t('PersonalProfile.mobile')}
+ type="text"
+ disabled={true}
+ value={profile.mobile}
+ customClass={`${classes.thisInput} my-1`}
+ />
+ <TextInput
+ lead={t('PersonalProfile.postalCode')}
+ type="text"
+ disabled={true}
+ value={profile.postalCode}
+ customClass={`${classes.thisInput} my-1`}
+ />
+ <TextInput
+ lead={t('PersonalProfile.email')}
+ type="email"
+ disabled={true}
+ value={profile.email}
+ customClass={`${classes.thisInput} my-1`}
+ />
+ <TextInput
+ lead={t('PersonalProfile.address')}
+ customClass={`${classes.thisInput} my-1`}
+ type="text"
+ disabled={true}
+ value={profile.address}
+ />
+ </>
+ }
+ return <div className={`column jc-center ai-center py-2`}>
+ <span className={`mb-5`}>{t('PersonalProfile.noKYC')}</span>
+ <Button
+ buttonClass={`${classes.thisButton} mt-5`}
+ buttonTitle={t("PersonalProfile.doKYC")}
+ onClick={()=>navigate(RoutesName.Authentication)}
+ type="button"
+ />
+ </div>
+ }
+
+ return (
+ <div className={`${classes.container} width-100 column card-bg card-border rounded-8`}>
+ <div className={`flex jc-start ai-center border-bottom card-header-bg px-5 py-2 ${classes.header}`}>
+ <h4>{t("PersonalProfile.title")}</h4>
+ </div>
+ <div className={`column container ${classes.content} px-4 py-1`}>
+ {content()}
+ </div>
+ </div>
+ );
+};
+
+export default PersonalProfile;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/components/PersonalProfile/PersonalProfile.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/components/PersonalProfile/PersonalProfile.module.css
new file mode 100644
index 0000000..4049a02
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Profile/components/PersonalProfile/PersonalProfile.module.css
@@ -0,0 +1,24 @@
+.container {
+ /*min-height: 100%;*/
+}
+.header {
+ height: 15%;
+}
+.content {
+ height: 85%;
+}
+
+.thisInput :global(.lead) {
+ width: 40%;
+}
+.thisInput :global(input) {
+ width: 60%;
+}
+
+.thisButton {
+ width: 35%;
+ background-color: var(--darkGreen);
+}
+.content img{
+ width: 25%;
+}
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/Security.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/Security.js
new file mode 100644
index 0000000..f8b1019
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/Security.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ScrollBar from "../../../../../../../../../../components/ScrollBar";
+import ActiveSessions from "./components/ActiveSessions/ActiveSessions";
+import ChangePassword from "./components/ChangePassword/ChangePassword";
+import SetTwoStepVerification from "./components/SetTwoStepVerification/SetTwoStepVerification";
+
+const Security = () => {
+ return (
+ <ScrollBar>
+ <ActiveSessions/>
+ <ChangePassword/>
+ <SetTwoStepVerification/>
+ </ScrollBar>
+ );
+};
+
+export default Security;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/Security.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/Security.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/ActiveSessions.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/ActiveSessions.js
new file mode 100644
index 0000000..8102928
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/ActiveSessions.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import classes from './ActiveSessions.module.css'
+import {useTranslation} from "react-i18next";
+import {useGetUserActiveSessions} from "../../../../../../../../../../../../queries";
+import {expireAllSessionsExceptCurrent} from "js-api-client";
+import {toast} from "react-hot-toast";
+import Icon from "../../../../../../../../../../../../components/Icon/Icon";
+import ScrollBar from "../../../../../../../../../../../../components/ScrollBar";
+import Error from "../../../../../../../../../../../../components/Error/Error";
+import Loading from "../../../../../../../../../../../../components/Loading/Loading";
+import moment from "moment-jalaali";
+import Session from "./components/Session/Session";
+
+const ActiveSessions = () => {
+
+ const {t} = useTranslation();
+ const {data: activeSessions, isLoading, error, refetch} = useGetUserActiveSessions()
+
+ const expireAllSessions = () => {
+ expireAllSessionsExceptCurrent()
+ .then(() => {
+ toast.success(t("ActiveSessions.logOutAllSuccess"));
+ refetch()
+ }).catch(() => {
+ toast.error(t("ActiveSessions.logOutAllError"));
+ })
+ }
+
+ const content = () => {
+ if (isLoading) return <Loading/>
+
+ if (error) return <Error/>
+
+ const current = activeSessions.filter((s) => s.inUse)[0]
+ const other = activeSessions.filter((s) => !s.inUse)
+
+ return <>
+ <div className={`column ai-end ${classes.thisSession}`}>
+ <span className={`text-orange mb-05 fs-0-8 width-100 text-center py-05`} style={{backgroundColor: 'var(--tableHeader)'}}>{t("ActiveSessions.thisSession")}</span>
+ <div className={`row jc-between width-100 py-05 px-2`}>
+ <div className={`col-40 column jc-center ai-start pr-05`}>
+ <span>{moment(current?.lastAccess * 1000).format("HH:mm:ss , jYY/jMM/jDD")}</span>
+ {other.length > 0 ?
+ <span className={`cursor-pointer text-red fs-0-7`} onClick={expireAllSessions}>
+ {t("ActiveSessions.closeOtherSessions")}</span> : ""}
+ </div>
+ <div className={`col-60`}>
+ <div className={`row jc-end ai-center text-gray`}>
+ <span className={`ml-05`}>{current?.ipAddress}</span>
+ <Icon iconName="icon-globe fs-01"/>
+ </div>
+ <div className={`row jc-end ai-center text-gray`}>
+ <span className={`ml-05`}>{current?.agent}</span>
+ <Icon iconName="icon-info fs-01"/>
+ </div>
+ </div>
+ </div>
+ <div className={` width-100 text-center py-05 text-orange fs-0-8`} style={{backgroundColor: 'var(--tableHeader)'}}>
+ {t("ActiveSessions.otherSession")}
+ </div>
+ </div>
+ <ScrollBar>
+ {other.length > 0 ? other.map((list) => <Session list={list} key={list.id} reloadSessionsList={refetch}/>)
+ : <div className={`flex jc-center ai-center height-100 fs-0-8`}>
+ <span>{t("ActiveSessions.noData")}</span>
+ </div>
+ }
+ </ScrollBar>
+ </>
+ }
+
+ return (
+ <div className={`${classes.container} width-100 column card-bg card-border rounded-8`}>
+ <div className={`flex jc-start ai-center border-bottom card-header-bg px-5 py-2 ${classes.header}`}>
+ <h4>{t("ActiveSessions.title")}</h4>
+ </div>
+ <div className={`column container ${classes.content} position-relative`}>
+ {content()}
+ </div>
+ </div>
+ );
+};
+
+export default ActiveSessions;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/ActiveSessions.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/ActiveSessions.module.css
new file mode 100644
index 0000000..d424cfc
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/ActiveSessions.module.css
@@ -0,0 +1,16 @@
+.container {
+ height: 52vh;
+}
+.header {
+ height: 15%;
+}
+.content {
+ height: 85%;
+}
+
+
+.thisSession {
+ background: var(--cardHeaderAlpha);
+}
+
+
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Details/Details.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Details/Details.js
new file mode 100644
index 0000000..c3287de
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Details/Details.js
@@ -0,0 +1,44 @@
+import React, {useEffect, useState} from "react"
+import classes from "./Details.module.css";
+import {browserName, deviceType, fullBrowserVersion} from "react-device-detect";
+
+
+const Details = ({details, setWrapper}) => {
+ const [close, setClose] = useState(false);
+ useEffect(() => {
+ setClose(false)
+ }, [])
+
+ const clickHandler = () => {
+ setWrapper(false)
+ setClose(true)
+ }
+
+
+ return (
+ <>{details ? <div className={`${classes.wrapper}`} onClick={clickHandler}/> : ""}
+ <div
+ className={`${classes.container} column jc-center ai-center ${details ? classes.expand : ""} ${close ? classes.close : ""} card-border`}>
+ {!details ? "" :
+ <>
+ <div className={`border-bottom column jc-center ai-center`}>
+ <span className={``}>نوع</span>
+ <span className={``}>{deviceType}</span>
+ </div>
+ <div className={`border-bottom column jc-center ai-center`}>
+ <span className={``}>نام</span>
+ <span className={``}>{browserName}</span>
+ </div>
+
+ <div className={`border-bottom column jc-center ai-center`}>
+ <span className={``}>نسخه</span>
+ <span className={``}>{fullBrowserVersion}</span>
+ </div>
+ </>
+ }
+ </div>
+ </>
+ );
+};
+
+export default Details;
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Details/Details.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Details/Details.module.css
new file mode 100644
index 0000000..56445f8
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Details/Details.module.css
@@ -0,0 +1,76 @@
+.container {
+ width: 30%;
+ background-color: var(--popupAlpha);
+ height: 0;
+ position: absolute;
+ top: 29%;
+ right: 7%;
+ border: none;
+
+}
+
+.container.expand {
+ animation: TopToBottom ease 0.5s forwards;
+ -webkit-animation: TopToBottom ease 0.5s forwards;
+ -moz-animation: TopToBottom ease 0.5s forwards;
+ -o-animation: TopToBottom ease 0.5s forwards;
+ -ms-animation: TopToBottom ease 0.5s forwards;
+
+ border: 0.3vh solid var(--cardBorder);
+ border-radius: 9px;
+}
+
+.container.close {
+ animation: BottomToTop ease 0.5s forwards;
+ -webkit-animation: BottomToTop ease 0.5s forwards;
+ -moz-animation: BottomToTop ease 0.5s forwards;
+ -o-animation: BottomToTop ease 0.5s forwards;
+ -ms-animation: BottomToTop ease 0.5s forwards;
+
+
+}
+
+.wrapper {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ background-color: #00000000;
+}+
+
+
+@-webkit-keyframes TopToBottom {
+ 0% {
+ height: 0%;
+ }
+ 100% {
+ height: 60%;
+ }
+}
+
+@keyframes TopToBottom {
+ 0% {
+ height: 0%;
+ }
+ 100% {
+ height: 60%;
+ }
+}
+
+@-webkit-keyframes BottomToTop {
+ 0% {
+ height: 60%;
+ }
+ 100% {
+ height: 0%;
+ }
+}
+
+@keyframes BottomToTop {
+ 0% {
+ height: 60%;
+ }
+ 100% {
+ height: 0%;
+ }
+}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Session/Session.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Session/Session.js
new file mode 100644
index 0000000..4ead7c0
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Session/Session.js
@@ -0,0 +1,65 @@
+import React, {useState} from "react"
+import classes from "./Session.module.css";
+import Icon from "../../../../../../../../../../../../../../components/Icon/Icon";
+import moment from "moment-jalaali";
+import {Trans, useTranslation} from "react-i18next";
+import {images} from "../../../../../../../../../../../../../../assets/images";
+import {toast} from "react-hot-toast";
+import {expireSessionById} from "js-api-client";
+
+const Session = ({list, reloadSessionsList}) => {
+ const {t} = useTranslation();
+ const [isLoading, setIsLoading] = useState(false)
+
+ const expireSession = async () => {
+ if (isLoading) return;
+ setIsLoading(true)
+ expireSessionById(list?.id)
+ .then(() => {
+ toast.success(<Trans
+ i18nKey="ActiveSessions.success"
+ values={{location: list?.ipAddress,}}
+ />);
+ reloadSessionsList()
+ }).catch(() => {
+ toast.error(<Trans
+ i18nKey="ActiveSessions.failed"
+ values={{location: list?.ipAddress,}}
+ />);
+ }).finally(() => {
+ setIsLoading(false)
+ })
+ }
+
+ return (
+ <div className={`width-100 ${classes.striped} py-1 px-2`}>
+ <div className={`column ai-end`}>
+ <div className={`row jc-between width-100`}>
+ <div className={`col-40 column jc-center ai-start pr-05`}>
+ <span>{moment(list?.lastAccess * 1000).format("HH:mm:ss , jYY/jMM/jDD")}</span>
+ <span className={`cursor-pointer text-red fs-0-7`} onClick={expireSession}>
+ {isLoading ?
+ <img className={`${classes.thisLoading}`}
+ src={images.linearLoadingBgOrange}
+ alt="linearLoading"/>
+ :
+ t("ActiveSessions.closeSession")}
+ </span>
+ </div>
+ <div className={`col-60`}>
+ <div className={`row jc-end ai-center text-gray`}>
+ <span className={`ml-05`}>{list?.ipAddress}</span>
+ <Icon iconName="icon-globe fs-01"/>
+ </div>
+ <div className={`row jc-end ai-center text-gray`}>
+ <span className={`ml-05`}>{list?.agent}</span>
+ <Icon iconName="icon-info fs-01"/>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default Session;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Session/Session.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Session/Session.module.css
new file mode 100644
index 0000000..a914990
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ActiveSessions/components/Session/Session.module.css
@@ -0,0 +1,10 @@
+.striped:nth-child(even){
+ background-color: var(--tableRow);
+ -webkit-transition: background-color 0.4s;
+ -o-transition: background-color 0.4s;
+ transition: background-color 0.4s;
+}
+
+.thisLoading{
+ width: 5vw;
+}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ChangePassword/ChangePassword.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ChangePassword/ChangePassword.js
new file mode 100644
index 0000000..51ab3c9
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ChangePassword/ChangePassword.js
@@ -0,0 +1,211 @@
+import React, {useState} from 'react';
+import classes from "./ChangePassword.module.css";
+import {Trans, useTranslation} from "react-i18next";
+import Loading from "../../../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../../../components/Error/Error";
+import {requestForChangePassword} from "js-api-client";
+import {toast} from "react-hot-toast";
+import TextInput from "../../../../../../../../../../../../components/TextInput/TextInput";
+import Icon from "../../../../../../../../../../../../components/Icon/Icon";
+import Button from "../../../../../../../../../../../../components/Button/Button";
+
+const ChangePassword = () => {
+ const {t} = useTranslation();
+ const [error, setError] = useState(false);
+ const [isLoading, setLoading] = useState(false);
+ const [userInputs, setInputs] = useState({
+ newPassword: {value: "", error: []},
+ confirmation: {value: "", error: []},
+ currentPassword: {value: "", error: []},
+ });
+ const [isInputVisible, setIsInputVisible] = useState({
+ newPassword: false,
+ confirmation: false,
+ currentPassword: false,
+ });
+
+ const inputHandler = (e) => {
+ let errorMessage = []
+ if (typeof e.target.dataset.min !== undefined && e.target.value.length < e.target.dataset.min) {
+ errorMessage.push(<Trans
+ i18nKey="ChangePassword.minInput"
+ values={{
+ name: t("ChangePassword." + e.target.dataset.name),
+ min: e.target.dataset.min
+ }}
+ />)
+ }
+ setInputs({
+ ...userInputs,
+ [e.target.dataset.name]: {value: e.target.value, error: errorMessage}
+ })
+ }
+
+ const isFormValid = () => {
+ let inputs = {...userInputs}
+ const hasError = Object.values(inputs).find(input => input.error.length > 0)
+ if (hasError) return false
+ let isEmpty = false
+ for (const key in inputs) {
+ if (inputs[key].value.length === 0) {
+ isEmpty = true
+ inputs = {
+ ...inputs,
+ [key]: {
+ ...inputs[key],
+ error: [<Trans
+ i18nKey="ChangePassword.emptyInput"
+ values={{
+ name: t("ChangePassword." + key),
+ }}
+ />]
+ }
+ }
+ }
+ }
+ setInputs(inputs);
+ return !isEmpty;
+ }
+ const changePassword = async (e) => {
+ e.preventDefault();
+ if (!isFormValid()) return
+
+ if (userInputs.newPassword.value !== userInputs.confirmation.value) {
+ setInputs({
+ ...userInputs,
+ confirmation: {...userInputs.confirmation, error: [t("ChangePassword.confirmationError")]}
+ })
+ return
+ }
+ setLoading(true)
+ const data = {
+ password: userInputs.currentPassword.value,
+ newPassword: userInputs.newPassword.value,
+ confirmation: userInputs.confirmation.value,
+ }
+ requestForChangePassword(data)
+ .then(() => {
+ setInputs({
+ newPassword: {value: "", error: []},
+ confirmation: {value: "", error: []},
+ currentPassword: {value: "", error: []},
+ })
+ toast.success(t("ChangePassword.success"));
+ })
+ .catch((err) => {
+ if (err.response.status === 403) {
+ setInputs({
+ newPassword: {...userInputs.newPassword, error: []},
+ confirmation: {...userInputs.confirmation, error: []},
+ currentPassword: {
+ ...userInputs.currentPassword,
+ error: [t("ChangePassword.currentPasswordError")]
+ },
+ })
+ toast.error(t("ChangePassword.error"));
+ } else {
+ setError(true)
+ }
+ })
+ .finally(() => {
+ setLoading(false)
+ });
+ }
+
+
+ const content = () => {
+ if (isLoading) return <Loading/>
+
+ if (error) return <Error retryFunc={() => setError(false)}/>
+
+
+ return <form onSubmit={changePassword} className={`column jc-between ai-center height-100 px-1 py-2`}>
+ <div className={`col-80 width-90 column jc-center`}>
+ <TextInput customClass={`${classes.passwordInput}`}
+ lead={t("ChangePassword.currentPassword")}
+ after={
+ <Icon
+ iconName={`${isInputVisible.currentPassword ? ' icon-eye-2' : 'icon-eye-off'} fs-02 flex`}
+ onClick={() => setIsInputVisible({
+ ...isInputVisible,
+ currentPassword: !isInputVisible.currentPassword
+ })}
+ />
+ }
+ autoComplete="off"
+ type={isInputVisible.currentPassword ? "text" : "password"}
+ value={userInputs.currentPassword.value}
+ data-name="currentPassword"
+ data-type="input"
+ data-min={8}
+ onchange={(e) => inputHandler(e)}
+ alerts={userInputs.currentPassword.error}
+ />
+ <div className={`my-1`}>
+ <TextInput
+ customClass={`${classes.passwordInput}`}
+ lead={t("ChangePassword.newPassword")}
+ after={
+ <Icon
+ iconName={`${isInputVisible.newPassword ? ' icon-eye-2' : 'icon-eye-off'} fs-02 flex`}
+ onClick={() => setIsInputVisible({
+ ...isInputVisible,
+ newPassword: !isInputVisible.newPassword
+ })}
+ />
+ }
+ autoComplete="off"
+ type={isInputVisible.newPassword ? "text" : "password"}
+ value={userInputs.newPassword.value}
+ data-name="newPassword"
+ data-type="input"
+ data-min={8}
+ onchange={(e) => inputHandler(e)}
+ alerts={userInputs.newPassword.error}
+ />
+ </div>
+ <TextInput
+ customClass={`${classes.passwordInput}`}
+ lead={t("ChangePassword.confirmation")}
+ after={
+ <Icon
+ iconName={`${isInputVisible.confirmation ? ' icon-eye-2' : 'icon-eye-off'} fs-02 flex`}
+ onClick={() => setIsInputVisible({
+ ...isInputVisible,
+ confirmation: !isInputVisible.confirmation
+ })}
+ />
+ }
+ autoComplete="off"
+ type={isInputVisible.confirmation ? "text" : "password"}
+ value={userInputs.confirmation.value}
+ data-name="confirmation"
+ data-type="input"
+ data-min={8}
+ onchange={(e) => inputHandler(e)}
+ alerts={userInputs.confirmation.error}
+ />
+ </div>
+ <div className={`col-20 width-100 flex jc-center ai-center`}>
+ <Button
+ buttonClass={`${classes.thisButton}`}
+ buttonTitle={t("submit")}
+ />
+ </div>
+ </form>
+ }
+
+
+ return (
+ <div className={`${classes.container} width-100 column card-bg card-border rounded-8 my-2`}>
+ <div className={`flex jc-start ai-center border-bottom card-header-bg px-5 py-2 ${classes.header}`}>
+ <h4>{t("ChangePassword.title")}</h4>
+ </div>
+ <div className={`column container ${classes.content} position-relative`}>
+ {content()}
+ </div>
+ </div>
+ );
+};
+
+export default ChangePassword;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ChangePassword/ChangePassword.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ChangePassword/ChangePassword.module.css
new file mode 100644
index 0000000..d8ab585
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/ChangePassword/ChangePassword.module.css
@@ -0,0 +1,27 @@
+.container {
+ height: 52vh;
+}
+.header {
+ height: 15%;
+}
+.content {
+ height: 85%;
+}
+.thisButton {
+ width: 25%;
+ background-color: var(--darkGreen);
+}
+.passwordInput :global(.lead) {
+ width: 50%;
+ cursor: pointer;
+}
+.passwordInput :global(.after) {
+ width: 10%;
+ cursor: pointer;
+}
+.passwordInput :global(input) {
+ width: 40% !important;
+}
+
+
+
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/SetTwoStepVerification.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/SetTwoStepVerification.js
new file mode 100644
index 0000000..5b5fc52
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/SetTwoStepVerification.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import classes from './SetTwoStepVerification.module.css'
+import {useTranslation} from "react-i18next";
+import {useSelector} from "react-redux";
+import {useGetUserOtpStatus} from "../../../../../../../../../../../../queries";
+import Loading from "../../../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../../../components/Error/Error";
+import DeActiveOTP from "./components/DeActiveOTP";
+import ActivateOTP from "./components/ActivateOTP";
+
+const SetTwoStepVerification = () => {
+
+ const {t} = useTranslation();
+ const username = useSelector(state => state.auth.username);
+ const {data: otp, isLoading, error,refetch : refetchOtp} = useGetUserOtpStatus(username)
+
+ const content = () => {
+ if (isLoading) return <Loading/>
+ if (error) return <Error/>
+ return otp ? <DeActiveOTP refetchOtp={refetchOtp}/> : <ActivateOTP refetchOtp={refetchOtp}/>
+ }
+
+ return (
+ <div className={`${classes.container} width-100 column card-bg card-border rounded-8`}>
+ <div className={`flex jc-start ai-center border-bottom card-header-bg px-5 py-2 ${classes.header}`}>
+ <h4>{otp ? t("SetTwoStepVerification.!title") : t("SetTwoStepVerification.title")}</h4>
+ </div>
+ <div className={`column container ${classes.content} position-relative`}>
+ {content()}
+ </div>
+ </div>
+ );
+};
+
+export default SetTwoStepVerification;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/SetTwoStepVerification.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/SetTwoStepVerification.module.css
new file mode 100644
index 0000000..6800bdc
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/SetTwoStepVerification.module.css
@@ -0,0 +1,36 @@
+.container {
+ height: 62vh;
+}
+.header {
+ height: 13%;
+}
+.content {
+ height: 87%;
+}
+.thisLoading{
+ width: 5vw;
+}
+
+.thisButton {
+ width: 25%;
+ background-color: var(--darkGreen);
+}
+.submit{
+ width: 20%;
+}
+.disableOtp{
+ background-color: var(--darkRed);
+ width: 25%;
+}
+
+.thisInput :global(.lead) {
+ width: 35%;
+}
+.thisInput :global(input) {
+ width: 75% !important;
+ letter-spacing: 1rem;
+}
+/*.thisInput :global(input) {
+ width: 85% !important;
+}*/
+
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/components/ActivateOTP.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/components/ActivateOTP.js
new file mode 100644
index 0000000..2610410
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/components/ActivateOTP.js
@@ -0,0 +1,108 @@
+import React, {useState} from 'react';
+import {useTranslation} from "react-i18next";
+import {requestForActivateOTP, sendInitialCodeToActivateOTP} from "js-api-client";
+import {toast} from "react-hot-toast";
+import Loading from "../../../../../../../../../../../../../components/Loading/Loading";
+import QRCode from "react-qr-code";
+import TextInput from "../../../../../../../../../../../../../components/TextInput/TextInput";
+import Button from "../../../../../../../../../../../../../components/Button/Button";
+import {images} from "../../../../../../../../../../../../../assets/images";
+import classes from "../SetTwoStepVerification.module.css";
+
+const ActivateOTP = ({refetchOtp}) => {
+
+ const {t} = useTranslation();
+
+ const [error, setError] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const [reqOTP, setReqOTP] = useState();
+ const [alert, setAlert] = useState([]);
+ const [initialCode, setInitialCode] = useState("");
+
+ const OTPInputHandler = (value) => {
+ const userInput = value.replace(/[^0-9]+/g, "").slice(0, 6)
+ setInitialCode(userInput)
+ }
+
+
+ const sendReqActivateOTP = () => {
+ if (isLoading) return
+ setError(false)
+ setIsLoading(true)
+ requestForActivateOTP()
+ .then((res) => {
+ setReqOTP(res.data)
+ })
+ .catch(() => {
+ setError(true)
+ })
+ .finally(() => {
+ setIsLoading(false)
+ })
+ }
+ const submitActivation = async (e) => {
+ e.preventDefault();
+ if (initialCode.length !== 6) {
+ return setAlert([t("SetTwoStepVerification.initialCodeMin")])
+ }
+ setAlert([])
+ setLoading(true)
+ sendInitialCodeToActivateOTP(reqOTP.secret, initialCode)
+ .then(() => {
+ refetchOtp()
+ toast.success(t("SetTwoStepVerification.success"));
+ })
+ .catch(() => {
+ setAlert([t("SetTwoStepVerification.initialCodeError")])
+ })
+ .finally(() => {
+ setLoading(false)
+ });
+ }
+
+ if (loading) return <Loading/>
+
+ if (reqOTP?.uri) {
+ return <div className={`column width-100 jc-between ai-center height-100 px-3 py-2`}>
+ <span className={``}>{t("SetTwoStepVerification.QRdescription")}</span>
+ <QRCode
+ value={reqOTP.uri}
+ bgColor="var(--cardBody)"
+ fgColor="var(--textColor)"
+ level='L'
+ size={140}
+ />
+ <form onSubmit={submitActivation} className={`column jc-between ai-center width-100`}>
+ <TextInput
+ lead={t("SetTwoStepVerification.code")}
+ value={initialCode}
+ alerts={alert}
+ customClass={`${classes.thisInput} width-75 mb-1`}
+ onchange={(e) => OTPInputHandler(e.target.value)}
+ type="text"
+ />
+ <Button buttonClass={`${classes.thisButton} ${classes.submit} mt-1`} buttonTitle={t("submit")}/>
+ </form>
+ </div>
+ }
+
+ return (
+ <div className={`column width-100 jc-around ai-center height-100 px-3`}>
+ <span className={`text-center`}>{t("SetTwoStepVerification.description")}</span>
+ <div className={`width-100 column jc-center ai-center`}>
+ <Button
+ buttonClass={`${classes.thisButton} ${classes.withdrawal} ${isLoading ? "cursor-not-allowed" : "cursor-pointer"}`}
+ buttonTitle={isLoading ? <img className={`${classes.thisLoading}`} src={images.linearLoadingBgOrange}
+ alt="linearLoading"/> : t("SetTwoStepVerification.active")}
+ onClick={sendReqActivateOTP}
+ />
+ <span className={`fs-0-7 text-red mt-1`}>
+ {error ? t("SetTwoStepVerification.serverError") : ""}
+ </span>
+ </div>
+ </div>
+ );
+};
+
+export default ActivateOTP;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/components/DeActiveOTP.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/components/DeActiveOTP.js
new file mode 100644
index 0000000..292f824
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Security/components/SetTwoStepVerification/components/DeActiveOTP.js
@@ -0,0 +1,52 @@
+import React, {useState} from 'react';
+import classes from "../SetTwoStepVerification.module.css";
+import {toast} from "react-hot-toast";
+import {useTranslation} from "react-i18next";
+import {images} from "../../../../../../../../../../../../../assets/images";
+import Button from "../../../../../../../../../../../../../components/Button/Button";
+import {requestForDeActiveOTP} from "js-api-client";
+
+const DeActiveOTP = ({refetchOtp}) => {
+
+ const {t} = useTranslation();
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(false);
+
+ const disableOTPHandler = () => {
+ setIsLoading(true)
+ requestForDeActiveOTP()
+ .then(() => {
+ refetchOtp()
+ toast.success(t("SetTwoStepVerification.error"));
+ })
+ .catch(() => {
+ setError(true)
+ })
+ .finally(() => {
+ setIsLoading(false)
+ })
+ }
+ return (
+ <div className="width-100 column jc-center ai-center height-100">
+ <div className={`flex jc-center ai-center`}>
+ <img src={images.security} alt="security" style={{width:"20%"}}/>
+ </div>
+ <span className={`my-4`}>{t("SetTwoStepVerification.isActive")}</span>
+ <Button
+ buttonClass={`${classes.thisButton} ${classes.disableOtp}`}
+ buttonTitle={isLoading ?
+ <img className={`${classes.thisLoading}`} src={images.linearLoadingBgOrange}
+ alt="linearLoading"/>
+ :
+ t("SetTwoStepVerification.deActive")}
+ onClick={disableOTPHandler}
+ />
+ {error ? <span className={`fs-0-8 text-red mt-2`}>
+ {t("SetTwoStepVerification.serverError")}
+ </span> : ""}
+
+ </div>
+ );
+};
+
+export default DeActiveOTP;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/Wallet.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/Wallet.js
index a95a357..110a3e7 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/Wallet.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/Wallet.js
@@ -26,7 +26,7 @@ const Wallet = () => {
}
return (
- <div className={`width-100 flex ai-center jc-center`} style={{height:"100%"}}>
+ <div className={`width-100 flex ai-center jc-center height-100`}>
{content()}
</div>
);
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Deposit.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Deposit.js
index b66fa51..dbe4eaa 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Deposit.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Deposit.js
@@ -1,9 +1,182 @@
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
import classes from './Deposit.module.css'
+import QRCode from "react-qr-code";
+import {Trans, useTranslation} from "react-i18next";
+import TextInput from "../../../../../../../../../../components/TextInput/TextInput";
+import {useParams} from "react-router-dom";
+import {useGetDepositAddress} from "../../../../../../../../../../queries";
+import {toast} from "react-hot-toast";
+import Loading from "../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../components/Error/Error";
+import Icon from "../../../../../../../../../../components/Icon/Icon";
+
+
const Deposit = () => {
- return (
- <div>
+ const {id} = useParams();
+ const {t} = useTranslation();
+ const addressRef = useRef(null);
+
+ useEffect(() => {
+ toast.dismiss()
+ }, [])
+
+ const copyToClipboard = () => {
+ addressRef.current.select();
+ document.execCommand("copy");
+ toast.success(<Trans
+ i18nKey="DepositWithdraw.success"
+ />);
+ };
+
+ const {data: address, isLoading, error, refetch} = useGetDepositAddress(id)
+
+ useEffect(() => {
+ if (id !== "IRT") refetch()
+ }, [id]);
+
+ const helpText = () => {
+ if (id === "TETH") {
+ return <div>
+ <span className={`text-red font-weight-bold`}>{t("DepositWithdraw.important")}: </span>
+ <div className={`mt-1`}>
+ <span>{t("DepositWithdraw.DepositTETHContentBefore")}</span>
+ <span className={`hover-text cursor-pointer`}
+ onClick={() => window.open('https://faucet.dimensions.network/')}>https://faucet.ropsten.be</span>
+ <span>{t("DepositWithdraw.DepositTETHContentAfter")}</span>
+ </div>
+ <div>
+ <Trans
+ i18nKey="DepositWithdraw.minDeposit"
+ values={{
+ min: 0.001,
+ currency: t("currency." + id)
+ }}
+ />
+ </div>
+ <div>
+ <Trans
+ i18nKey="DepositWithdraw.depositTime"
+ values={{
+ time: 2
+ }}
+ />
+ </div>
+ </div>
+ }
+ if (id === "TBTC") {
+ return <div>
+ <span className={`text-red font-weight-bold`}>{t("DepositWithdraw.important")}: </span>
+ <div className={`mt-1`}>
+ <span>{t("DepositWithdraw.DepositTBTCContentBefore")}</span>
+ <span className={`hover-text cursor-pointer`}
+ onClick={() => window.open('https://testnet-faucet.com/btc-testnet')}>https://testnet-faucet.com/btc-testnet</span>
+ <span>{t("DepositWithdraw.DepositTBTCContentAfter")}</span>
+ </div>
+ <div>
+ <Trans
+ i18nKey="DepositWithdraw.minDeposit"
+ values={{
+ min: 0.001,
+ currency: t("currency." + id)
+ }}
+ />
+ </div>
+ <div>
+ <Trans
+ i18nKey="DepositWithdraw.depositTime"
+ values={{
+ time: 10
+ }}
+ />
+ </div>
+ </div>
+ }
+ if (id === "TUSDT") {
+ return <div>
+ <span className={`text-red font-weight-bold`}>{t("DepositWithdraw.important")}: </span>
+ <div className={`mt-1`}>
+ <span>{t("DepositWithdraw.DepositTUSDTContentBefore")}</span>
+ <span className={`hover-text cursor-pointer`}
+ onClick={() => window.open('https://bit.ly/ROPTokens')}>https://bit.ly/ROPTokens</span>
+ <span>{t("DepositWithdraw.DepositTUSDTContentAfter")}</span>
+ </div>
+ <div>
+ <Trans
+ i18nKey="DepositWithdraw.minDeposit"
+ values={{
+ min: 10,
+ currency: t("currency." + id)
+ }}
+ />
+ </div>
+ <div>
+ <Trans
+ i18nKey="DepositWithdraw.depositTime"
+ values={{
+ time: 2
+ }}
+ />
+ </div>
+ </div>
+ }
+ }
+
+
+ const lowestPrice = (id) => {
+ switch (id) {
+ case "BTC":
+ return 0.001;
+ case "ETH":
+ return 0.001;
+ case "USDT":
+ return 10;
+ default:
+ return 0;
+ }
+ };
+
+
+
+ // if (id === "IRT") return <IRTDeposit/>
+ if (id === "IRT") return <div className={`flex jc-center ai-center card-bg card-border height-98 width-95`}><h3>{t("comingSoon")}</h3></div>
+ if (isLoading) return <div className={`card-bg card-border height-98 width-95`}><Loading/></div>
+ if (error) return <div className={`card-bg card-border height-98 width-95`}><Error retryFunc={refetch}/></div>
+
+
+ return (
+ <div className={`px-1 py-3 column jc-between ai-center text-center ${classes.content} card-bg card-border height-98 width-95`}>
+ <div className={`column ai-center`}>
+ <Trans
+ i18nKey="DepositWithdraw.minDepositText"
+ values={{
+ min: lowestPrice(id),
+ currency: t("currency." + id)
+ }}
+ />
+ <TextInput
+ after={
+ <Icon
+ iconName="icon-copy fs-02"
+ onClick={() => copyToClipboard()}
+ customClass={`hover-text cursor-pointer`}
+ />
+ }
+ customClass={`${classes.depositInput} my-3`}
+ readOnly={true}
+ type="text"
+ customRef={addressRef}
+ value={address.address}
+ />
+ <QRCode
+ value={address.address}
+ bgColor="var(--cardBody)"
+ fgColor="var(--textColor)"
+ level='L'
+ size={110}
+ />
+ </div>
+ { (id === "TETH" || id === "TUSDT" || id === "TBTC") && helpText() }
</div>
);
};
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Deposit.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Deposit.module.css
index e69de29..5307d94 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Deposit.module.css
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Deposit.module.css
@@ -0,0 +1,12 @@
+.depositInput {
+ width: 100%;
+}
+.depositInput :global(.after) {
+ width: 15%;
+ cursor: pointer;
+}
+.depositInput :global(input) {
+ width: 85% !important;
+ cursor: not-allowed;
+ font-family: 'Roboto', sans-serif;
+}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/IRT.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/IRT.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/IRTDeposit.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/IRTDeposit.js
new file mode 100644
index 0000000..32fb268
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/IRTDeposit.js
@@ -0,0 +1,219 @@
+import React, {useEffect, useState} from "react";
+import classes from "../../../../DepositWithdraw.module.css";
+import {useLocation, useParams} from "react-router-dom";
+import {useDispatch, useSelector} from "react-redux";
+import {Trans, useTranslation} from "react-i18next";
+import NumberInput from "../../../../../../../../../../../../../../components/NumberInput/NumberInput";
+import {BN, parsePriceString} from "../../../../../../../../../../../../../../utils/utils";
+import Button from "../../../../../../../../../../../../../../components/Button/Button";
+import QRCode from "react-qr-code";
+import moment from "moment-jalaali";
+import {toast} from "react-hot-toast";
+import Loading from "../../../../../../../../../../../../../../components/Loading/Loading";
+import Countdown from "react-countdown";
+import CallbackPage from "./components/CallbackPage/CallbackPage";
+import {setIPGInitiate} from "../../../../../../../../../../../../../../store/actions";
+import {useGetIpgOpenInvoice, useIPGDeposit} from "../../../../../../../../../../../../../../queries";
+import {cancelIPGDepositReq, sendIPGDepositReq} from "js-api-client";
+import Error from "../../../../../../../../../../../../../../components/Error/Error";
+
+
+const IRTDeposit = () => {
+
+ const {t} = useTranslation();
+ const dispatch = useDispatch();
+ const KYCStatus = useSelector((state) => state.auth.kyc)
+
+
+
+ const [sendIPGLoading, setIPGIsLoading] = useState(false)
+
+ const params = new URLSearchParams(useLocation().search);
+ const paymentStatus = params.get("payment_status");
+
+ const [disable, setDisable] = useState(false);
+ const [req, setReq] = useState({amount: {value: "", error: []}})
+
+ const apiBaseUrl = window.env.REACT_APP_API_BASE_URL;
+
+ const dataMin = 1000
+ const dataMax = 50000000
+
+ const fund = useSelector((state) => state.auth.wallets.IRT.free)
+ const ipgLock = useSelector((state) => state.exchange.ipgLock)
+
+ const {id} = useParams();
+
+ const {data: openInVoice, isLoading, refetch} = useGetIpgOpenInvoice()
+ const {refetch : refetchIPGInvoice} = useIPGDeposit()
+
+ useEffect(() => {
+ refetch()
+ }, [fund]);
+
+
+ const cancelIPGInvoice = (reference) => {
+ setIPGIsLoading(true)
+ setReq({amount: {value: "", error: []}})
+ cancelIPGDepositReq(reference)
+ .then(() => {
+ toast.error(t("DepositWithdrawTx.cancelPayment"))
+ refetchIPGInvoice()
+ refetch()
+ }).finally(() => setIPGIsLoading(false));
+ }
+
+ const submit = async (e) => {
+ e.preventDefault();
+ const amount = new BN(parsePriceString(req.amount.value)).multipliedBy(10)
+
+ if (amount.isGreaterThan(dataMax) || new BN(parsePriceString(req.amount.value)).isLessThan(dataMin)) return false
+ setIPGIsLoading(true)
+ sendIPGDepositReq(amount).then(() => {
+ toast.success(<Trans
+ i18nKey="DepositWithdrawTx.IRTsuccess"
+ values={{
+ amount: req.amount.value,
+ }}
+ />)
+ refetchIPGInvoice()
+ refetch()
+ }).finally(() => setIPGIsLoading(false));
+ };
+
+ const inputHandler = (e) => {
+ let errorMessage = []
+ const min = parsePriceString(e.target.dataset.min)
+ const max = parsePriceString(e.target.dataset.max)
+ const value = parsePriceString(e.target.value)
+
+ const amountValidator = () => {
+ if (typeof min === undefined || typeof max === undefined) {
+ return false;
+ }
+ if (value < min) {
+ return false;
+ }
+ return value <= max;
+ }
+ if (!amountValidator()) {
+ errorMessage.push(<Trans
+ i18nKey="DepositWithdraw.IRTAllowable"
+ values={{
+ name: t(e.target.dataset.name),
+ min: min.toLocaleString(),
+ max: max.toLocaleString()
+ }}
+ />)
+ }
+ setReq({...req, [e.target.dataset.name]: {value: e.target.value, error: errorMessage}})
+ }
+
+ const openIPG = () => {
+ window.open(`${apiBaseUrl}/ipg/v1/payment/pay/${openInVoice[0].reference}`)
+ setDisable(true)
+ dispatch(setIPGInitiate(new Date().getTime() + 2 * 60 * 1000))
+ }
+
+ useEffect(() => {
+ if (ipgLock && new Date().getTime() < ipgLock) setDisable(true)
+ }, [ipgLock]);
+
+ const payButtonTitle = (amount) => {
+ if (disable) {
+ return <span className={`flex row jc-between`}>{t('DepositWithdraw.pay')} ( <Countdown
+ date={ipgLock && new Date().getTime() < ipgLock ? new Date(parseInt(ipgLock)) : Date.now() + 120000}
+ renderer={props => <div>{props.minutes}:{props.seconds}</div>}
+ onComplete={() => setDisable(false)}
+ />)</span>
+ }
+ return <span>{t('DepositWithdraw.pay')} ({amount} {t("currency." + id)})</span>
+ }
+
+ if (KYCStatus !== "ACCEPTED") return <Error errorMsg={t('errorPage.needKYC')}/>
+
+ const content = () => {
+ if (isLoading || sendIPGLoading) {
+ return <div className={`px-1 py-2 column jc-between ${classes.content}`}>
+ <Loading/>
+ </div>
+ }
+ if (openInVoice?.length > 0) {
+ const amount = new BN(`${openInVoice[0].amount}`).multipliedBy(0.1).toFormat()
+ return <div className={`px-1 py-2 row jc-between ${classes.content}`}>
+
+ <div className={`column col-70 jc-around ai-start`}>
+ <Trans
+ i18nKey="DepositWithdraw.IRTText"
+ values={{
+ amount: amount,
+ date: `${moment(new Date(openInVoice[0].createDate).getTime() - new Date(openInVoice[0].createDate).getTimezoneOffset() * 60 * 1000).format("jYY/jMM/jDD")}`,
+ time: `${moment(new Date(openInVoice[0].createDate).getTime() - new Date(openInVoice[0].createDate).getTimezoneOffset() * 60 * 1000).format("HH:mm:ss")}`,
+ }}
+ />
+ <div className={`row`}>
+ <Button
+ buttonClass={`${classes.pay} ${classes.disable} px-2 ml-05`}
+ buttonTitle={payButtonTitle(amount)}
+ onClick={openIPG}
+ disabled={disable}
+
+ />
+ <Button
+ buttonClass={`${classes.cancel} ${classes.disable} px-2 mr-05`}
+ buttonTitle={t('DepositWithdraw.cancel')}
+ onClick={() => cancelIPGInvoice(openInVoice[0].reference)}
+ disabled={disable}
+ />
+ </div>
+
+ </div>
+ <div className={`col-30 flex jc-center ai-center`}>
+ {!disable ? <QRCode
+ value={`${apiBaseUrl}/ipg/v1/payment/pay/${openInVoice[0].reference}`}
+ bgColor="var(--cardBody)"
+ fgColor="var(--textColor)"
+ level='L'
+ size={140}
+ /> : ""}
+ </div>
+ </div>
+ }
+ return <form onSubmit={(e) => submit(e)} className={`px-1 py-2 column jc-around ${classes.content}`}>
+ <Trans
+ i18nKey="DepositWithdraw.IRTFormText"
+ values={{
+ min: dataMin.toLocaleString(),
+ max: dataMax.toLocaleString()
+ }}
+ />
+ <NumberInput
+ lead={t("orders.amount")}
+ after={t("currency."+ id)}
+ value={req.amount.value}
+ data-name="amount"
+ data-type="input"
+ data-min={dataMin}
+ data-max={dataMax}
+ customClass={`${classes.depositIRTInput} width-50`}
+ onchange={(e) => inputHandler(e)}
+ alerts={req.amount.error}
+ />
+ <Button
+ buttonClass={`${classes.IRTButton} ${classes.withdrawal}`}
+ buttonTitle={t("DepositWithdraw.submitPaymentReq")}
+ type="submit"
+ />
+ </form>
+ }
+
+ return (
+ <>
+ {paymentStatus && <CallbackPage/> }
+ {content()}
+ </>
+
+ )
+}
+
+export default IRTDeposit;
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/components/CallbackPage/CallbackPage.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/components/CallbackPage/CallbackPage.js
new file mode 100644
index 0000000..3e44914
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/components/CallbackPage/CallbackPage.js
@@ -0,0 +1,66 @@
+import React, {useEffect, useState} from "react";
+import classes from "./CallbackPage.module.css";
+import {images} from "../../../../../../../../../../../../../../../../assets/images";
+import Button from "../../../../../../../../../../../../../../../../components/Button/Button";
+import {useTranslation} from "react-i18next";
+import * as Routes from "../../../../../../../../../../../../../../Routes/routes";
+import {Link, useLocation, useNavigate} from "react-router-dom";
+import Loading from "../../../../../../../../../../../../../../../../components/Loading/Loading";
+import {verifyIPGDepositReq} from "js-api-client";
+
+
+const CallbackPage = () => {
+ const params = new URLSearchParams(useLocation().search);
+ const paymentToken = params.get("token");
+ const paymentStatus = params.get("payment_status");
+ const errorCode = params.get("error_code");
+
+ const [status, setStatus] = useState()
+ const [noData, setNoData] = useState()
+ const [loading, setLoading] = useState(true);
+
+ let navigate = useNavigate();
+ const {t} = useTranslation();
+
+ useEffect(() => {
+ verifyIPGDepositReq(paymentToken, paymentStatus)
+ .finally(() => {
+ if (paymentStatus === "OK") setStatus(true)
+ if (paymentStatus === "FAILED") setStatus(false)
+ if (paymentStatus !== "OK" && paymentStatus !== "FAILED") setNoData(true)
+ setLoading(false)
+ })
+ }, [paymentToken, paymentStatus]);
+
+ return (
+ <>
+ <div onClick={() => navigate(Routes.Wallet + "/IRT", {replace: true})}
+ className={`${classes.container} flex jc-center ai-center`}/>
+ {loading ?
+ <div className={`${classes.content} card-border`}><Loading/></div>
+ :
+ <div
+ className={`${classes.content} ${status ? "text-green" : "text-red"} card-border column jc-around ai-center py-2`}>
+ {noData ? <span className={`text-color`}>{t("CallbackPage.noData")}</span> :
+ <>
+ <img src={status ? images.approve : images.reject} alt={paymentStatus}/>
+ <div className={`column jc-center ai-center`}>
+ <span>{status ? t("CallbackPage.ok") : t("CallbackPage.failed")}</span>
+ {errorCode !== null && <span
+ className={`text-color fs-0-7`}>{t("CallbackPage.errorMessage")} : <span>{t("IPGErrorCode." + errorCode)}</span></span>}
+ </div>
+ </>
+ }
+ <Link to={Routes.Wallet + "/IRT"}>
+ <Button
+ buttonClass={`${classes.thisButton} px-3`}
+ buttonTitle={t("close")}
+ />
+ </Link>
+ </div>
+ }
+ </>
+ );
+};
+
+export default CallbackPage;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/components/CallbackPage/CallbackPage.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/components/CallbackPage/CallbackPage.module.css
new file mode 100644
index 0000000..30c7285
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/IRT/components/CallbackPage/CallbackPage.module.css
@@ -0,0 +1,28 @@
+.container{
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ /*background-color: #0304038f;*/
+ background-color: rgba(0, 0, 0, 0.66);
+ z-index: 6;
+ right: 0;
+}
+.content{
+ position: fixed;
+ top: 27.5%;
+ left: 37.5%;
+ width: 25%;
+ height: 45%;
+ background-color: var(--cardBody);
+ z-index: 7;
+}
+.content img{
+ width: 7vw;
+}
+.thisButton {
+ width: 100%;
+ background-color: var(--orange);
+ color: #000 !important;
+
+}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/Transfer.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/Transfer.js
new file mode 100644
index 0000000..5ec71a4
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/components/Transfer.js
@@ -0,0 +1,78 @@
+import classes from "../../../DepositWithdraw.module.css";
+import TextInput from "../../../../../../../../../../../../../components/TextInput/TextInput";
+import Button from "../../../../../../../../../../../../../components/Button/Button";
+import React, {useState} from "react";
+
+const Transfer = () => {
+ const [transferInput, setTransferInput] = useState({
+ amount: "",
+ destinationUserNumber: "",
+ });
+ return <div className={`px-1 py-2 column jc-between ${classes.content}`}>
+ <div className="width-100 row jc-between">
+ <div className="col-30 column jc-between">
+ <TextInput
+ lead="مقدار بیتکوین"
+ value={transferInput.amount}
+ onchange={(e) =>
+ setTransferInput({...transferInput, amount: e.target.value})
+ }
+ type="text"
+ />
+ <span className="pt-1">
+ موجودی قابل برداشت: <span>0.05 بیتکوین</span>
+ </span>
+ <span>
+ سقف برداشت روزانه شما: <span>1 بیتکوین</span>
+ </span>
+ <span>
+ سقف برداشت ماهانه شما: <span>10 بیتکوین</span>
+ </span>
+ </div>
+ <div className="col-70 pr-1 column jc-between" style={{height: "20vh"}}>
+ <div className="column">
+ <TextInput
+ lead="شماره کاربری مقصد"
+ customClass={classes.withdrawalInput}
+ type="text"
+ value={transferInput.destinationUserNumber}
+ onchange={(e) =>
+ setTransferInput({
+ ...transferInput,
+ destinationUserNumber: e.target.value,
+ })
+ }
+ />
+ <span className="pt-05 text-end">
+ لطفا دقت کنید! ورود اشتباه آدرس می تواند به از دست رفتن سرمایه
+ منجر شود.
+ </span>
+ </div>
+ <div className="row jc-between ai-center">
+ <div className="column">
+ <span>
+ کارمزد: <span>...</span>
+ </span>
+ <span>
+ دریافتی شما: <span>...</span>
+ </span>
+ </div>
+ <Button
+ buttonClass={`${classes.thisButton} ${classes.transfer}`}
+ type="submit"
+ buttonTitle="ثبت درخواست انتقال"
+ />
+ </div>
+ </div>
+ </div>
+ <div>
+ <span>
+ باتوجه به ملاحضات امنیتی ممکن است انتقال به حساب با کمی تاخیر صورت
+ بگیرد. می توانید وضعیت برداشت را در همین صفحه از بخش ترکنش های{" "}
+ <span className="text-orange">{`${t("DepositWithdraw.title")}`}</span>{" "}
+ ببینید.
+ </span>
+ </div>
+ </div>
+}
+export default Transfer;
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/Transaction.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/Transaction.js
index 12986f0..2565865 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/Transaction.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/Transaction.js
@@ -1,9 +1,20 @@
import React from 'react';
+import classes from "../Deposit/Deposit.module.css";
+import {useParams} from "react-router-dom";
+import {useTranslation} from "react-i18next";
+import IRTTx from "./components/DepositWithdrawTx/components/IRTTx/IRTTx";
+import DepositWithdrawTx from "./components/DepositWithdrawTx/DepositWithdrawTx";
const Transaction = () => {
+
+ const {id} = useParams();
+ const {t} = useTranslation();
return (
- <div>
-
+ <div className={`column jc-between ai-center text-center ${classes.content} card-bg card-border height-98 width-95`}>
+ <div className="flex jc-center ai-center card-header-bg py-2 px-1 width-100">
+ <h3>{t("DepositWithdrawTx.title")}</h3>
+ </div>
+ {id === "IRT" ? <IRTTx/> : <DepositWithdrawTx/>}
</div>
);
};
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/DepositWithdrawTx.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/DepositWithdrawTx.js
new file mode 100644
index 0000000..599c49b
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/DepositWithdrawTx.js
@@ -0,0 +1,41 @@
+import React, {useLayoutEffect, useState} from 'react';
+import {useParams} from "react-router-dom";
+import {useTranslation} from "react-i18next";
+import {useDepositTxs, useWithdrawTxs} from "../../../../../../../../../../../../queries";
+import Loading from "../../../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../../../components/Error/Error";
+import DepositWithdrawTxTables from "./components/DepositWithdrawTxTables/DepositWithdrawTxTables";
+import ScrollBar from "../../../../../../../../../../../../components/ScrollBar";
+
+const DepositWithdrawTx = () => {
+
+ const {id} = useParams();
+ const {t} = useTranslation();
+ const [txs, setTxs] = useState([]);
+
+ const {data: deposit, isLoading: depositIsLoading, error: depositError} = useDepositTxs(id);
+ const {data: withdraw, isLoading: withdrawIsLoading, error: withdrawError} = useWithdrawTxs(id);
+
+ useLayoutEffect(() => {
+ if (!deposit || !withdraw) {
+ return
+ }
+ const newTxs = [...deposit, ...withdraw];
+ setTxs(newTxs.sort((a, b) => b.time - a.time))
+
+ }, [deposit, withdraw]);
+
+ if (depositIsLoading || withdrawIsLoading) return <Loading/>
+ if (depositError || withdrawError) return <Error/>
+
+ if (txs.length === 0) return <div className="width-100 height-100 flex ai-center jc-center">{t("noTx")}</div>
+
+
+ return (
+ <ScrollBar>
+ <DepositWithdrawTxTables txs={txs} id={id}/>
+ </ScrollBar>
+ );
+};
+
+export default DepositWithdrawTx;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/DepositWithdrawTx.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/DepositWithdrawTx.module.css
new file mode 100644
index 0000000..070fcf2
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/DepositWithdrawTx.module.css
@@ -0,0 +1,7 @@
+
+.doubleStriped div:nth-child(2n-1) div{
+ background-color: var(--tableRow);
+ -webkit-transition: background-color 0.4s;
+ -o-transition: background-color 0.4s;
+ transition: background-color 0.4s;
+}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/components/DepositWithdrawTxTables/DepositWithdrawTxTables.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/components/DepositWithdrawTxTables/DepositWithdrawTxTables.js
new file mode 100644
index 0000000..333b7e3
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/components/DepositWithdrawTxTables/DepositWithdrawTxTables.js
@@ -0,0 +1,88 @@
+import React, {Fragment, useState} from 'react';
+import {Trans, useTranslation} from "react-i18next";
+import {toast} from "react-hot-toast";
+import Icon from "../../../../../../../../../../../../../../components/Icon/Icon";
+import classes from "../../DepositWithdrawTx.module.css"
+import Date from "../../../../../../../../../../../../../../components/Date/Date";
+import moment from "moment-jalaali";
+import {BN} from "../../../../../../../../../../../../../../utils/utils";
+
+const DepositWithdrawTxTables = ({txs, id}) => {
+
+ const [openItem, setOpenItem] = useState(false);
+ const {t} = useTranslation();
+
+ const copyAddressToClipboard = (value) => {
+ navigator.clipboard.writeText(value)
+ toast.success(<Trans
+ i18nKey="DepositWithdraw.copy"
+ />);
+ }
+
+ const txStatus = (status) => {
+ switch (status) {
+ case 0:
+ return t("orderStatus.NEW");
+ case 1:
+ return t("orderStatus.FILLED");
+ case 2:
+ return t("orderStatus.REJECTED");
+ default:
+ return t("orderStatus.NEW");
+ }
+ };
+
+ return <div className={`${classes.doubleStriped}`}>
+ {txs.map((tr, index) => (
+ <div key={index}>
+ <div className={`row fs-0-9`}>
+ <div className={`width-43 column ai-start pr-3 pt-025 pb-025`}>
+ <span className={`mb-025`}><Date date={tr.time}/> | {moment(tr.time).format("HH:mm:ss")}</span>
+ <span className={`row ${tr.hasOwnProperty('withdrawOrderId') ? "text-red" : "text-green"} mt-025`} >
+ <span>{tr.hasOwnProperty('withdrawOrderId') ? t("withdrawal") : t("deposit")}</span>
+ <span className={`mx-2`}>{id}</span>
+ <span>{new BN(tr.amount).toFormat()}</span>
+ </span>
+ </div>
+ <div className={`width-43 column ai-end pt-025 pb-025`}>
+ <span>{txStatus(tr.status)}</span>
+ <span>{tr.network}</span>
+ </div>
+ <div className={`width-14 flex jc-end ai-center pl-3 pt-025 pb-025`} onClick={() => setOpenItem(openItem === index ? null : index)}>
+ <Icon iconName={`${openItem === index ? 'icon-up-open' : 'icon-down-open'} text-blue fs-0-7 cursor-pointer`} customClass={classes.iconBG}/>
+ </div>
+ </div>
+ <span style={{display: openItem === index ? "revert" : "none"}} className={`fs-0-9`}>
+ <div className={``}>
+ <div className="row jc-around ai-center px-3" style={{width: "100%"}}>
+ <p className="col-94 row jc-between">
+ {t("DepositWithdrawTx.destination")} :
+ <span>{tr.address}</span>
+ </p>
+ <p className="col-03 row jc-end">
+ <Icon iconName="icon-copy fs-01" customClass={`hover-text cursor-pointer`}
+ onClick={() => copyAddressToClipboard(tr.address)}/>
+ </p>
+ </div>
+ <div className="row jc-around ai-center px-3 pb-05" style={{width: "100%"}}>
+ <p className="col-94 row jc-between">
+ {t("DepositWithdrawTx.transactionId")} :
+ <span>{id === "BTC" ? tr.txId.slice(0, tr.txId.indexOf("_")) : tr.txId}</span>
+ </p>
+ <p className="col-03 row jc-end">
+ <Icon
+ iconName="icon-copy fs-01"
+ customClass={`hover-text cursor-pointer`}
+ onClick={() => copyAddressToClipboard(tr.txId)}
+ />
+ </p>
+ </div>
+ </div>
+ </span>
+
+ </div>
+ ))}
+ </div>
+};
+
+export default DepositWithdrawTxTables;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/components/IRTTx/IRTTx.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/components/IRTTx/IRTTx.js
new file mode 100644
index 0000000..bd211b6
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Transaction/components/DepositWithdrawTx/components/IRTTx/IRTTx.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const IRTTx = () => {
+ return (
+ <div>
+ <span>IRT Tx</span>
+ </div>
+ );
+};
+
+export default IRTTx;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/withdrawal/withdrawal.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/withdrawal/withdrawal.js
index 696cca1..4d01cab 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/withdrawal/withdrawal.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/withdrawal/withdrawal.js
@@ -1,10 +1,280 @@
-import React from 'react';
+import React, {useEffect, useRef, useState} from 'react';
import classes from './withdrawal.module.css'
+import {useParams} from "react-router-dom";
+import {Trans, useTranslation} from "react-i18next";
+import {useGetUserAccount} from "../../../../../../../../../../queries/hooks/useGetUserAccount";
+import {
+ useGetCurrencyInfo,
+ useGetUserAssets,
+ useGetUserAssetsEstimatedValue,
+ useWithdrawTxs
+} from "../../../../../../../../../../queries";
+import {BN, parsePriceString} from "../../../../../../../../../../utils/utils";
+import {sendWithdrawReq} from "js-api-client";
+import {toast} from "react-hot-toast";
+import {images} from "../../../../../../../../../../assets/images";
+import ReactTooltip from "react-tooltip";
+import Loading from "../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../components/Error/Error";
+import NumberInput from "../../../../../../../../../../components/NumberInput/NumberInput";
+import TextInput from "../../../../../../../../../../components/TextInput/TextInput";
+import Button from "../../../../../../../../../../components/Button/Button";
+import Icon from "../../../../../../../../../../components/Icon/Icon";
const Withdrawal = () => {
- return (
- <div>
+ const {t} = useTranslation();
+ const {id} = useParams();
+
+ const [amount, setAmount] = useState({value: 0, error: []});
+ const [networkName, setNetworkName] = useState({value: 0, error: []});
+ const [address, setAddress] = useState({value: "", error: []});
+ const [isLoading, setIsLoading] = useState(false)
+
+ useEffect(() => {
+ toast.dismiss()
+ }, [])
+
+ useEffect(() => {
+ setNetworkName({value: 0, error: []})
+ setAmount({value: 0, error: []})
+ setAddress({value: "", error: []})
+ validation()
+ }, [id]);
+
+ const {refetch: getUserAccount} = useGetUserAccount();
+ const {refetch: getWithdrawTxs} = useWithdrawTxs(id);
+ const {refetch: getUserAssets} = useGetUserAssets("IRT");
+ const {refetch: getUserAssetsEstimatedValue} = useGetUserAssetsEstimatedValue("IRT");
+
+ const {data: userAccount} = useGetUserAccount()
+ const freeAmount = userAccount?.wallets[id]?.free || 0
+
+ const {data:currencyInfo, isLoading:CILoading, error:CIError} = useGetCurrencyInfo(id)
+
+ const tooltip = useRef()
+ const selectRef = useRef()
+
+
+
+
+
+ const withdrawFee = new BN(currencyInfo?.chains[networkName.value]?.withdrawFee).toFormat()
+
+
+ const pasteFromClipboard = (e) => {
+ e.preventDefault();
+ if (navigator.clipboard !== undefined) {
+ navigator.clipboard.readText()
+ .then(text => {
+ //console.log('Pasted content: ', text);
+ setAddress({...address, value: text})
+ toast.success(t('DepositWithdraw.paste'));
+ })
+ .catch(err => {
+ console.error('Failed to read clipboard contents: ', err);
+ });
+ }
+ else return toast.error(t('error'));
+
+ }
+
+ const validation = () => {
+ if (new BN(amount.value).isGreaterThan(freeAmount)) {
+ return t('DepositWithdraw.noInventory')
+
+
+
+ // return toast.error(t('DepositWithdraw.noInventory'));
+ }
+ if (new BN(amount.value).minus(withdrawFee).isLessThanOrEqualTo(0)) {
+ return t('DepositWithdraw.allowableWithdraw')
+ }
+ /*if (currencyInfo?.chains[networkName.value]) {
+ return t('DepositWithdraw.fillNetwork')
+ }*/
+ if (address.value.length <= 0) {
+ return t('DepositWithdraw.fillAddress')
+ }
+ }
+
+ const sendWithdrawHandler = async (e) => {
+ e.preventDefault()
+ if(isLoading) return
+ setIsLoading(true)
+ sendWithdrawReq(amount.value, id, address.value, withdrawFee, `${currencyInfo?.chains[networkName.value]?.network} - ${currencyInfo?.chains[networkName.value]?.currency}` )
+ .then(() => {
+ setNetworkName({value: 0, error: []})
+ setAmount({value: 0, error: []})
+ setAddress({value: "", error: []})
+ toast.success(<Trans
+ i18nKey="DepositWithdrawTx.success"
+ values={{
+ asset: t("currency." + id),
+ amount: amount.value,
+ }}
+ />);
+ getUserAccount()
+ getWithdrawTxs()
+ getUserAssets()
+ getUserAssetsEstimatedValue()
+ })
+ .catch(() => {
+ toast.error(t('error'));
+ })
+ .finally(() => setIsLoading(false))
+ }
+
+ const submitButtonTextHandler = () => {
+ if (isLoading) return <img className={`${classes.thisLoading}`} src={images.linearLoadingBgOrange}
+ alt="linearLoading"/>
+ return t('DepositWithdrawTx.withdrawReqSubmit')
+ }
+ const fillByWallet = () => {
+ setAmount({
+ value: freeAmount,
+ error: []
+ })
+ };
+ const fillByMinWithdraw = () => {
+ setAmount({
+ value: new BN(currencyInfo?.chains[networkName.value]?.minWithdraw).plus(withdrawFee).toString(),
+ error: []
+ })
+ };
+
+ const enableButton = !(new BN(amount.value).minus(withdrawFee).isGreaterThan(0)) || new BN(amount.value).isGreaterThan(freeAmount) || address.value.length <= 0
+
+ useEffect(() => {
+ ReactTooltip.rebuild();
+ }, [enableButton]);
+
+ useEffect(() => {
+ ReactTooltip.hide(tooltip.current)
+ }, [enableButton]);
+
+ if (id === "IRT") {
+ return <div className={`flex jc-center ai-center card-bg card-border height-98 width-95`}><h3>{t("comingSoon")}</h3></div>
+ }
+
+ const content = () => {
+ if (CILoading) return <Loading/>
+ if (CIError) return <Error/>
+ else return <form onSubmit={(e)=>sendWithdrawHandler(e)} className={`px-2 py-1 column jc-between height-100 ${classes.content}`}>
+
+ <div className={`column mb-2`}>
+ <div className={`row jc-between ai-center`}>
+ <span className={`my-05`}>{t("DepositWithdrawTx.freeWallet")}: </span>
+ <span className={`hover-text cursor-pointer`} onClick={() => {fillByWallet()}}>{freeAmount} {t("currency." + id)}</span>
+ </div>
+ <div className={`row jc-between ai-center`}>
+ <span className={`my-05`}>{t('DepositWithdrawTx.minWithdraw')}: </span>
+ <span className={`hover-text cursor-pointer`} onClick={() => {fillByMinWithdraw()}}> {new BN(currencyInfo?.chains[networkName.value]?.minWithdraw).plus(withdrawFee).toString()} {t("currency." + id)} </span>
+ </div>
+ <div className={`row jc-between ai-center`}>
+ <span className={`my-05`}>{t('DepositWithdrawTx.maxWithdraw')}: </span>
+ <span>2 {t("currency." + id)}</span>
+ </div>
+ <div className={`row jc-between ai-center`}>
+ <span className={`my-05`}>{t('DepositWithdrawTx.maxMonthWithdraw')}: </span>
+ <span>2 {t("currency." + id)}</span>
+ </div>
+ </div>
+
+
+ <TextInput
+ select={true}
+ placeholder={t('DepositWithdraw.selectNetwork')}
+ options={currencyInfo?.chains.map((chain,index) => {return {value: index, label: `${chain.network} - ${chain.currency}` }})}
+ lead={t('DepositWithdraw.network')}
+ type="select"
+ value={currencyInfo?.chains[networkName.value] && {value: networkName.value, label: `${currencyInfo?.chains[networkName.value].network} - ${currencyInfo?.chains[networkName.value].currency}` }}
+ onchange={(e) => setNetworkName({value: e?.value || 0, error: []})}
+ customRef={selectRef}
+ alerts={networkName.error}
+ customClass={`${classes.withdrawalSmallInput} `}
+ />
+ <NumberInput
+ lead={t('volume') + " " + t("currency." + id)}
+ value={amount.value.toString()}
+ alerts={amount.error}
+ customClass={`${classes.withdrawNumberInput} my-2`}
+ onchange={(e) =>
+ setAmount({...amount, value: parsePriceString(e.target.value)})
+ }
+ type="text"
+ />
+
+ <div className="column">
+ <div className={`row jc-between mb-05`}>
+ <span>{t("DepositWithdrawTx.destAddress") + " " + t("currency." + id)}</span>
+ <Icon
+ iconName="icon-paste fs-02"
+ onClick={(e) => pasteFromClipboard(e)}
+ customClass={`hover-text cursor-pointer`}
+ />
+ </div>
+ <TextInput
+ //lead={t("DepositWithdrawTx.destAddress") + " " + t("currency." + id)}
+ customClass={`${classes.withdrawalInput} `}
+ type="text"
+ value={address.value}
+ alerts={address.error}
+ onchange={(e) => setAddress({...address, value: e.target.value})}
+ />
+ <span className="pt-05 text-end fs-0-7">{t('DepositWithdrawTx.withdrawWarn')}</span>
+ </div>
+
+
+ <div className={`column`}>
+ <div className={`row jc-between ai-center`}>
+ <span className={`my-05`}>{t('commission')}: </span>
+ <span>
+ <span className={`text-orange`}> {amount.value ? withdrawFee : 0} </span>
+ <span>{t("currency." + id)}</span>
+ </span>
+
+
+ </div>
+ <div className={`row jc-between ai-center`}>
+ <span className={`my-05`}>{t('DepositWithdrawTx.reqAmount')}: </span>
+ <span>
+ <span className={`text-green ml-1`}> {new BN(amount.value).minus(withdrawFee).isGreaterThan(0) ? new BN(amount.value).minus(withdrawFee).toFormat() : 0}</span>
+ <span>{t("currency." + id)}</span>
+ </span>
+ </div>
+ </div>
+
+
+ <div className="fs-0-7" style={{lineHeight:"2.5vh"}}>
+ <span>{t('DepositWithdraw.securityConsiderations')}</span>
+ </div>
+
+ <span
+ ref={tooltip}
+ style={{width: "100%"}}
+ data-html={true}
+ data-place="top"
+ data-effect="float"
+ data-tip={enableButton ? `<span class="column jc-between col-100 text-red fs-01">${validation()}</span>` : ""}
+ >
+ <Button
+ buttonClass={`${classes.thisButton} ${classes.withdrawal} ${isLoading ? "cursor-not-allowed" : "cursor-pointer"} width-100`}
+ buttonTitle={submitButtonTextHandler()}
+ disabled={!(new BN(amount.value).minus(withdrawFee).isGreaterThan(0)) || new BN(amount.value).isGreaterThan(freeAmount) || address.value.length <= 0}
+ //onClick={}
+ type="submit"
+ />
+ </span>
+
+ </form>
+ }
+
+
+
+ return (
+ <div className={`card-bg card-border height-98 width-95`}>
+ {content()}
</div>
);
};
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/withdrawal/withdrawal.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/withdrawal/withdrawal.module.css
index e69de29..3761599 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/withdrawal/withdrawal.module.css
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/withdrawal/withdrawal.module.css
@@ -0,0 +1,63 @@
+/*.withdrawalInput :global(.lead) {
+ width: 24%;
+}*/
+.withdrawalInput :global(input) {
+ width: 100% !important;
+}
+.withdrawNumberInput :global(.lead) {
+ width: 40%;
+}
+.withdrawNumberInput :global(input) {
+ width: 60% !important;
+}
+
+.withdrawalSmallInput :global(.lead) {
+ width: 40%;
+}
+.withdrawalSmallInput :global(.select) {
+ width: 60% !important;
+}
+
+.thisButton {
+ width: 100%;
+}
+.IRTButton{
+ width: 20%;
+}
+.IRTButton.withdrawal{
+ background-color: var(--orange);
+ color: #000;
+}
+.thisButton.withdrawal{
+ background-color: var(--orange);
+ color: #000;
+}
+.thisButton.transfer{
+ background-color: var(--darkRed);
+}
+
+.pay{
+ background-color: var(--darkGreen);
+
+}
+.cancel{
+ background-color: var(--darkRed);
+}
+.disable:disabled,.button[disabled] {
+ border: 0.3vh solid var(--cardHeader);
+ background: var(--cardHeader);
+ color: var(--textColor);
+ cursor: not-allowed;
+}
+
+.thisButton:disabled,.button[disabled] {
+ border: 0.3vh solid var(--cardHeader);
+ background: var(--cardHeader);
+ color: var(--textColor);
+ cursor: not-allowed;
+}
+
+
+.thisLoading{
+ width: 10%;
+}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Header/components/SettingsHeader/SettingsHeader.js b/src/main/Mobile/Pages/UserPanel/Secttions/Header/components/SettingsHeader/SettingsHeader.js
index c638a9b..80cacd6 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Header/components/SettingsHeader/SettingsHeader.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Header/components/SettingsHeader/SettingsHeader.js
@@ -2,16 +2,26 @@ import React from 'react';
import Icon from "../../../../../../../../components/Icon/Icon";
import {useDispatch} from "react-redux";
import {activeActionSheet} from "../../../../../../../../store/actions/global";
+import {useLocation} from "react-router-dom";
+import {useTranslation} from "react-i18next";
+import * as RoutesName from "../../../../../../Routes/routes";
const SettingsHeader = () => {
+ const {t} = useTranslation()
const dispatch = useDispatch();
+ const location = useLocation()
+ const clickHandler = () => {
+ if (!(location.pathname.includes(RoutesName.SettingsRelative)) ) {
+ dispatch(activeActionSheet({subMenu: true}))
+ }
+ }
return (
<>
- <h3 className={`mr-2`} onClick={() => dispatch(activeActionSheet({subMenu: true}))}>
- امنیت
+ <h3 className={`mr-2 text-orange`} onClick={() => clickHandler()}>
+ {t("routes." + location.pathname)}
</h3>
<Icon iconName="icon-settings fs-20 flex"
onClick={() => dispatch(activeActionSheet({menu: true}))}
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Menu/Menu.js b/src/main/Mobile/Pages/UserPanel/Secttions/Menu/Menu.js
index b66ac25..8688efd 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Menu/Menu.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Menu/Menu.js
@@ -6,6 +6,7 @@ import * as RoutesName from "../../../../Routes/routes";
import {activeActionSheet} from "../../../../../../store/actions/global";
import {useDispatch} from "react-redux";
import {useTranslation} from "react-i18next";
+import {Profile} from "../../../../Routes/routes";
const Menu = () => {
@@ -44,15 +45,15 @@ const Menu = () => {
<Icon iconName="icon-safe fs-20" customClass={`col-48 flex jc-end ai-center`}/>
<span className={`col-48 ai-start`}>{t("wallet.title")}</span>
</NavLink>
- {/* <NavLink
- to={RoutesName.Settings}
+ <NavLink
+ to={RoutesName.Profile}
className={({ isActive }) =>
isActive ? `${classes.selected} width-50 row jc-between ai-center py-1` : "width-50 row jc-between ai-center py-1"
}
>
<Icon iconName="icon-settings fs-20" customClass={`col-48 flex jc-end ai-center`}/>
<span className={`col-48 ai-start`}>{t("settings.title")}</span>
- </NavLink>*/}
+ </NavLink>
</div>
);
};
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/NavMenu/components/SettingsNavMenu/SettingsNavMenu.js b/src/main/Mobile/Pages/UserPanel/Secttions/NavMenu/components/SettingsNavMenu/SettingsNavMenu.js
index 589c33e..7d3ae2b 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/NavMenu/components/SettingsNavMenu/SettingsNavMenu.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/NavMenu/components/SettingsNavMenu/SettingsNavMenu.js
@@ -3,48 +3,52 @@ import classes from "../../NavMenu.module.css";
import {NavLink} from "react-router-dom";
import * as Routes from "../../../../../../Routes/routes";
import Icon from "../../../../../../../../components/Icon/Icon";
+import {useTranslation} from "react-i18next";
const SettingsNavMenu = () => {
+
+ const {t} = useTranslation();
+
return (
<div className={`width-100 ${classes.container} row ai-center jc-between`}>
<NavLink
- to={Routes.Overview}
- className={({ isActive }) =>
+ to={Routes.Profile}
+ className={({isActive}) =>
isActive ? `col-25 column jc-center ai-center ${classes.selected}` : `col-25 column jc-center ai-center`
}
>
- <Icon iconName="icon-overview fs-06"/>
- <span className={`fs-0-6`}>امنیت</span>
+ <Icon iconName="icon-username-icon fs-06"/>
+ <span className={`fs-0-6`}>{t("SettingsSubMenu.userProfile")}</span>
</NavLink>
<NavLink
- to={Routes.OrderBook}
- className={({ isActive }) =>
+ to={Routes.Security}
+ className={({isActive}) =>
isActive ? `col-25 column jc-center ai-center ${classes.selected}` : `col-25 column jc-center ai-center`
}
>
- <Icon iconName="icon-orderbook fs-06"/>
- <span className={`fs-0-6`}>احراز هویت</span>
+ <Icon iconName="icon-privacy-icon-1 fs-06"/>
+ <span className={`fs-0-6`}>{t("SettingsSubMenu.security")}</span>
</NavLink>
<NavLink
- to={Routes.Order}
- className={({ isActive }) =>
+ to={Routes.Authentication}
+ className={({isActive}) =>
isActive ? `col-25 column jc-center ai-center ${classes.selected}` : `col-25 column jc-center ai-center`
}
>
- <Icon iconName="icon-order fs-06"/>
+ <Icon iconName="icon-file-user-icon fs-06"/>
- <span className={`fs-0-6`}>مشخصات کاربری</span>
+ <span className={`fs-0-6`}>{t("SettingsSubMenu.authentication")}</span>
</NavLink>
<NavLink
- to={Routes.Order}
- className={({ isActive }) =>
+ to={Routes.APIKey}
+ className={({isActive}) =>
isActive ? `col-25 column jc-center ai-center ${classes.selected}` : `col-25 column jc-center ai-center`
}
>
- <Icon iconName="icon-order fs-06"/>
+ <Icon iconName="icon-user-key-icon fs-06"/>
- <span className={`fs-0-6`}>شخصی سازی</span>
+ <span className={`fs-0-6`}> {t("APIKey.title")}</span>
</NavLink>
</div>
);
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/NavMenu/components/WalletNavMenu/WalletNavMenu.js b/src/main/Mobile/Pages/UserPanel/Secttions/NavMenu/components/WalletNavMenu/WalletNavMenu.js
index 7ab3a81..3a31830 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/NavMenu/components/WalletNavMenu/WalletNavMenu.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/NavMenu/components/WalletNavMenu/WalletNavMenu.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, {useEffect} from 'react';
import classes from "../../NavMenu.module.css";
import {NavLink, useParams} from "react-router-dom";
import * as Routes from "../../../../../../Routes/routes";
import Icon from "../../../../../../../../components/Icon/Icon";
import {useTranslation} from "react-i18next";
+import {toast} from "react-hot-toast";
const WalletNavMenu = () => {
@@ -12,6 +13,8 @@ const WalletNavMenu = () => {
const {id} = useParams()
+
+
return (
<div className={`width-100 ${classes.container} row ai-center jc-between`}>
<NavLink
@@ -40,7 +43,7 @@ const WalletNavMenu = () => {
>
<Icon iconName="icon-order fs-06"/>
- <span className={`fs-0-8`}>{t("DepositWithdrawTx.title")}</span>
+ <span className={`fs-0-8`}>{t("DepositWithdrawTx.transactions")}</span>
</NavLink>
</div>
);
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/SubHeader.js b/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/SubHeader.js
index 1557ae7..441bd5d 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/SubHeader.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/SubHeader.js
@@ -1,52 +1,27 @@
-import React, {Fragment, useEffect, useState} from "react";
+import React, {useState} from "react";
import classes from "./SubHeader.module.css";
import Icon from "../../../../../../components/Icon/Icon";
-import {Route, Routes} from "react-router-dom";
+import {Route, Routes, useLocation} from "react-router-dom";
import * as RoutesName from "../../../../Routes/routes";
-import MarketHeader from "../Header/components/MarketHeader/MarketHeader";
import ProtectedRoute from "../../../../../../components/ProtectedRoute/ProtectedRoute";
-import WalletHeader from "../Header/components/WalletHeader/WalletHeader";
-import SettingsHeader from "../Header/components/SettingsHeader/SettingsHeader";
import MarketSubHeader from "./components/MarketSubHeader/MarketSubHeader";
import WalletSubHeader from "./components/WalletSubHeader/WalletSubHeader";
import SettingsSubHeader from "./components/SettingsSubHeader/SettingsSubHeader";
-import {activeOrderLayout} from "../../../../../../store/actions/global";
const SubHeader = (props) => {
-
const [expand, setExpand] = useState(false)
+ const location = useLocation()
+
- /*useEffect(() => {
- return () => {
+ const clickHandler = () => {
+ if (!(location.pathname.includes(RoutesName.SettingsRelative)) ) {
setExpand(true)
}
- }, []);*/
-
- const content = () => {
- /*if (expand) {
- return <div className={`container column jc-between ai-center ${classes.container1} pt-1 px-5`}>
-
-
-
-
-
-
- <Icon iconName="icon-dot-3 fs-01 flex" customClass={`${classes.thisIcon} py-05`} onClick={()=>setExpand(false)}/>
-
- </div>
- }*/
- /* if (!expand) {
- return <div className={`container flex ai-center jc-center ${classes.expand}`}>
- <Icon iconName="icon-dot-3 fs-01 flex" customClass={`${classes.thisIcon}`} onClick={()=>setExpand(true)}/>
-
-
-
- </div>
- }*/
-
- return <div className={`width-100 column ai-center jc-center position-relative ${classes.container}`}>
+ }
+ return (
+ <div className={`width-100 column ai-center jc-center position-relative ${classes.container}`}>
{expand && <div className={`width-100 column position-absolute ${classes.content} py-1 px-3`}>
<Routes>
<Route path={RoutesName.MarketRelative + "/*"} element={
@@ -55,7 +30,6 @@ const SubHeader = (props) => {
<Route element={<ProtectedRoute/>}>
<Route path={RoutesName.WalletRelative+"/:id/:path/*"} element={
<WalletSubHeader/>
-
}/>
<Route path={RoutesName.SettingsRelative+"/*"} element={
<SettingsSubHeader/>
@@ -64,16 +38,9 @@ const SubHeader = (props) => {
</Routes>
<Icon iconName="icon-dot-3 fs-01 flex jc-center ai-center" customClass={`${classes.thisIcon} py-05`} onClick={()=>setExpand(false)}/>
</div>}
-
- <Icon iconName="icon-dot-3 fs-01 flex" customClass={`${classes.thisIcon}`} onClick={()=>setExpand(true)}/>
+ <Icon iconName="icon-dot-3 fs-01 flex" customClass={`${classes.thisIcon}`} onClick={()=>clickHandler()}/>
</div>
- }
-
-
- return (
- content()
);
-
};
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/components/SettingsSubHeader/SettingsSubHeader.js b/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/components/SettingsSubHeader/SettingsSubHeader.js
index 3b7b35b..d3f8abf 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/components/SettingsSubHeader/SettingsSubHeader.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/components/SettingsSubHeader/SettingsSubHeader.js
@@ -3,7 +3,7 @@ import React from 'react';
const SettingsSubHeader = () => {
return (
<div>
- settings
+
</div>
);
};
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/SubMenu/components/WalletSubMenu/components/WalletListItem/WalletListItem.js b/src/main/Mobile/Pages/UserPanel/Secttions/SubMenu/components/WalletSubMenu/components/WalletListItem/WalletListItem.js
index ebf89da..9d47c1e 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/SubMenu/components/WalletSubMenu/components/WalletListItem/WalletListItem.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/SubMenu/components/WalletSubMenu/components/WalletListItem/WalletListItem.js
@@ -21,8 +21,6 @@ const WalletListItem = ({assetName, showZero}) => {
if (showZero && free === 0) return <></>
- console.log("asset: ", assetName)
-
return (
<NavLink
className={({isActive}) =>
diff --git a/src/main/Mobile/Routes/routes.js b/src/main/Mobile/Routes/routes.js
index 637068a..fc6571c 100644
--- a/src/main/Mobile/Routes/routes.js
+++ b/src/main/Mobile/Routes/routes.js
@@ -27,7 +27,8 @@ export const Personalization = "/panel/settings/personalization";
export const PersonalizationRelative = "personalization";
export const Authentication = "/panel/settings/authentication";
export const AuthenticationRelative = "/authentication";
-
+export const APIKey = "/panel/settings/api-key";
+export const APIKeyRelative = "/api-key";
export const Overview = "/panel/market/overview";
diff --git a/src/main/Mobile/Styles/Mobille.css b/src/main/Mobile/Styles/Mobille.css
index bbdd292..e321f2c 100644
--- a/src/main/Mobile/Styles/Mobille.css
+++ b/src/main/Mobile/Styles/Mobille.css
@@ -53,8 +53,8 @@
font-size: 0.8rem;
}
- .fs-0-8 {
- font-size: 0.8rem;
+ .fs-0-9 {
+ font-size: 0.9rem;
}
.fs-01 {