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

public/assets/locales/en/translation.json

@@ -346,6 +346,7 @@
     "seconds": "Seconds",
     "submitPaymentReq": "Submit Payment Request",
     "noInventory": "Your balance is not enough.",
+    "noInventorywithdrawFee": "Insufficient balance, including the fee!",
     "allowableWithdraw": "Minimum allowable withdrawal amount has not been observed.",
     "fillAddress": "You must enter an address.",
     "important": "Important",
@@ -388,8 +389,10 @@
     "destination": "Origin / Destination",
     "inventory": "Inventory after transaction",
     "freeWallet": "Free Asset",
-    "minWithdraw": "Minimum withdrawal amount",
+    "minWithdraw": "Minimum Withdrawal Amount",
+    "maxWithdrawal": "Maximum Withdrawal Amount",
     "minDeposit": "Minimum Deposit Amount",
+    "maxDeposit": "Maximum Deposit Amount",
     "maxWithdraw": "Your daily withdrawal limit",
     "maxMonthWithdraw": "Your monthly withdrawal limit",
     "withdrawWarn": "Please note! Incorrect entry of address can result in loss of capital.",

public/assets/locales/fa/translation.json

@@ -346,6 +346,7 @@
     "seconds": "ثانیه",
     "submitPaymentReq": "ثبت درخواست واریز",
     "noInventory": "موجودی کافی نیست !",
+    "noInventorywithdrawFee": "با احتساب کارمزد، موجودی کافی نیست !",
     "allowableWithdraw": "حداقل مقدار مجاز برداشت رعایت نشده است.",
     "fillAddress": "وارد کردن آدرس الزامیست.",
     "important": "مهم",
@@ -389,7 +390,9 @@
     "inventory": "موجودی بعد  از تراکنش",
     "freeWallet": "موجودی قابل برداشت",
     "minWithdraw": "حداقل مقدار برداشت",
+    "maxWithdrawal": "حداکثر مقدار برداشت",
     "minDeposit": "حداقل مقدار واریز",
+    "maxDeposit": "حداکثر مقدار واریز",
     "maxWithdraw": "سقف برداشت روزانه شما",
     "maxMonthWithdraw": "سقف برداشت ماهانه شما",
     "withdrawWarn": "لطفا دقت کنید! ورود اشتباه آدرس می تواند به از دست رفتن سرمایه منجر شود.",

src/components/TextInput/TextInput.js

@@ -75,7 +75,7 @@ const TextInput = (props) => {
             options={options}
             ref={customRef}
             classNamePrefix="select"
-            className={`${classes.selectBox} select`}
+            className={`${classes.selectBox} select selectExternalClass`}
             {...other}
         />
     }

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Deposit.js

@@ -1,13 +1,12 @@
-import React, {useEffect, useRef, useState} from 'react';
-import classes from './Deposit.module.css'
+import React, {useEffect, useMemo} from 'react';
 import {useTranslation} from "react-i18next";
-import TextInput from "../../../../../../../../../../components/TextInput/TextInput";
 import {useParams} from "react-router-dom";
-import {useGetCurrencyInfo} from "../../../../../../../../../../queries";
+import {useGetGatewaysByCurrency} from "../../../../../../../../../../queries";
 import {toast} from "react-hot-toast";
 import Loading from "../../../../../../../../../../components/Loading/Loading";
 import Error from "../../../../../../../../../../components/Error/Error";
-import Address from "./components/Address/Address";
+import {useSelector} from "react-redux";
+import OnChainDeposit from "./Module/OnChainDeposit/OnChainDeposit";
 
 
 const Deposit = () => {
@@ -19,49 +18,51 @@ const Deposit = () => {
         toast.dismiss()
     }, [])
 
-    const [networkName, setNetworkName] = useState({value: 0, error: []});
+    const currencies = useSelector((state) => state.exchange.currencies)
 
-    const selectRef = useRef()
-    const {data: currencyInfo, isLoading: CILoading, error: CIError, refetch: refetchCI} = useGetCurrencyInfo(id)
 
-    useEffect(() => {
-        setNetworkName({value: 0, error: []})
+    const { data, isLoading, error } = useGetGatewaysByCurrency(id, {
+        includeManualGateways: false,
+        includeOffChainGateways: true,
+        includeOnChainGateways: true
+    });
+
+    const { hasOnChain, hasOffChain } = useMemo(() => ({
+        hasOnChain: data?.some(gateway => gateway.type === "OnChain"),
+        hasOffChain: data?.some(gateway => gateway.type === "OffChain")
+    }), [data]);
 
-    }, [id]);
 
-    useEffect(() => {
-        if (id !== "IRT") refetchCI()
-    }, [id]);
 
+    if (!currencies[id]?.depositAllowed) return <div className={`flex jc-center ai-center card-bg card-border height-98 width-95`}>
+        <span>{t("noData")}</span>
+    </div>
+    if (isLoading) return <div className={`flex jc-center ai-center card-bg card-border height-98 width-95`}><Loading/></div>
+    if (error) return <div className={`flex jc-center ai-center card-bg card-border height-98 width-95`}><Error/></div>
+    if (data.length <= 0 ) return <div className={`flex jc-center ai-center card-bg card-border height-98 width-95`}>
+        <span>{t("noData")}</span>
+    </div>
 
-   // 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 (CILoading) return <div className={`card-bg card-border height-98 width-95`}><Loading/></div>
-    if (CIError) return <div className={`card-bg card-border height-98 width-95`}><Error/></div>
 
 
-    return (
-        <div className={`px-3 py-3 column jc-start ai-center text-center ${classes.content} card-bg card-border height-98 width-95`}>
-            <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={`width-100 ${classes.thisInput}`}
-            />
-            { currencyInfo && <Address network={currencyInfo?.chains[networkName?.value]?.network}/>}
-        </div>
-    );
+    switch (true) {
+        case hasOnChain && hasOffChain:
+            return <div className="flex jc-center ai-center card-bg card-border height-98 width-95">
+                <span>{t("comingSoon")}</span>
+            </div>;
+        case hasOnChain:
+            return <OnChainDeposit gateways={data} currency={id}/>;
+        case hasOffChain:
+            return <div className="flex jc-center ai-center card-bg card-border height-98 width-95">
+                <span>{t("comingSoon")}</span>
+            </div>;
+        default:
+            return (
+                <div className="flex jc-center ai-center card-bg card-border height-98 width-95">
+                    <span>{t("noData")}</span>
+                </div>
+            );
+    }
 };
 
 export default Deposit;

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Module/OnChainDeposit/OnChainDeposit.js

@@ -0,0 +1,119 @@
+import React, {useEffect, useRef, useState} from 'react';
+import classes from './OnChainDeposit.module.css';
+import {useParams} from "react-router-dom";
+import {Trans, useTranslation} from "react-i18next";
+import {useGetDepositAddress} from "../../../../../../../../../../../../queries";
+import i18n from "i18next";
+import {useSelector} from "react-redux";
+import {BN, getCurrencyNameOrAlias} from "../../../../../../../../../../../../utils/utils";
+import toast from "react-hot-toast";
+import TextInput from "../../../../../../../../../../../../components/TextInput/TextInput";
+import QRCode from "react-qr-code";
+import Icon from "../../../../../../../../../../../../components/Icon/Icon";
+
+const OnChainDeposit = ({gateways, currency}) => {
+    const {t} = useTranslation();
+    let  {id} = useParams();
+
+    const [networkName, setNetworkName] = useState({value: 0, error: []})
+
+    const {data: address, isLoading, error, refetch: refetchAddress} = useGetDepositAddress(id, gateways[networkName.value].chain)
+
+    const selectRef = useRef()
+
+    const language = i18n.language
+    const currencies = useSelector((state) => state.exchange.currencies)
+
+
+    const depositMin = new BN(gateways?.[networkName.value]?.depositMin).decimalPlaces(currencies[id]?.precision ?? 0).toFormat()
+    const depositMax = new BN(gateways?.[networkName.value]?.depositMax).decimalPlaces(currencies[id]?.precision ?? 0).toFormat()
+
+    useEffect(() => {
+        refetchAddress()
+    }, [gateways]);
+
+    const addressRef = useRef(null);
+    const copyToClipboard = () => {
+        addressRef.current.select();
+        document.execCommand("copy");
+        toast.success(<Trans
+            i18nKey="DepositWithdraw.success"
+        />);
+    };
+    const content = () => {
+        if (isLoading) return <span className={`flashit width-100 flex jc-center ai-center mt-6`}>{t('DepositWithdraw.gettingAddress')}</span>
+        if (error) return <span className={` width-100 flex jc-center ai-center mt-6`}>{t('DepositWithdraw.errorGettingAddress')}</span>
+
+        return <div className={`column jc-between width-90`}>
+
+            <div className={`my-2`}>
+                <Trans
+                    i18nKey="DepositWithdraw.minDepositText"
+                />
+            </div>
+            <TextInput
+                after={
+                    <Icon
+                        iconName="icon-copy fs-02"
+                        onClick={() => copyToClipboard()}
+                        customClass={`hover-text cursor-pointer`}
+                    />
+                }
+                readOnly={true}
+                type="text"
+                customRef={addressRef}
+                value={address.address}
+                customClass={`${classes.depositInput} width-100`}
+            />
+
+            <div className={`column ai-start width-80 mt-2 ${currency && "fs-0-7 width-95"}`}>
+                <div className={``}>
+                    <span className={`ml-05`}>{t('DepositWithdrawTx.minDeposit')}:</span>
+                    <span className={``}>{new BN(depositMin).toString()} {getCurrencyNameOrAlias(currencies[id], language)}</span>
+                </div>
+                <div className={``}>
+                    <span className={`ml-05`}>{t('DepositWithdrawTx.maxDeposit')}:</span>
+                    <span className={``}>{new BN(depositMax).toString()} {getCurrencyNameOrAlias(currencies[id], language)}</span>
+                </div>
+            </div>
+
+            <div className={`width-100 py-1 flex ai-center jc-center mt-10`}>
+                <QRCode
+                    value={address.address}
+                    bgColor="var(--cardBody)"
+                    fgColor="var(--textColor)"
+                    level='L'
+                    size={140}
+                />
+            </div>
+
+        </div>
+    }
+
+    return (
+        <div className={`column jc-start ai-center card-bg card-border height-98 width-95 px-1 py-2`}>
+            <TextInput
+                select={true}
+                placeholder={t('DepositWithdraw.selectNetwork')}
+                options={gateways.map((chain, index) => ({
+                    value: index,
+                    label: `${chain.chain} - ${chain.implementationSymbol}`,
+                    isDisabled: !chain.isActive // غیرفعال کردن در صورت عدم اجازه‌ی واریز
+                }))}
+                lead={t('DepositWithdraw.network')}
+                type="select"
+                value={gateways[networkName.value] && {
+                    value: networkName.value,
+                    label: `${gateways[networkName.value].chain} - ${gateways[networkName.value].implementationSymbol}`
+                }}
+                onchange={(e) => setNetworkName({ value: e?.value || 0, error: [] })}
+                customRef={selectRef}
+                alerts={networkName.error}
+                customClass={`width-90 ${classes.thisInput}`}
+            />
+            {content()}
+        </div>
+    );
+};
+
+export default OnChainDeposit;

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/Deposit/Module/OnChainDeposit/OnChainDeposit.module.css

@@ -0,0 +1,18 @@
+.thisInput :global(.lead) {
+    width: 30%;
+}
+.thisInput :global(.selectExternalClass) {
+    width: 70% !important;
+}
+.depositInput {
+    width: 100%;
+}
+.depositInput :global(.after) {
+    width: 15%;
+    cursor: pointer;
+}
+.depositInput :global(input) {
+    width: 85% !important;
+    cursor: not-allowed;
+    font-family: 'Roboto', sans-serif;
+}