Multi network

public/assets/locales/en/translation.json

@@ -244,15 +244,17 @@
     "DepositTETHContentBefore": "Ropsten network ETH test Only accepted! For free download",
     "DepositTETHContentAfter": "go to send a test ETH to this address. You must change your wallet Etherium network to Ropsten. This network is on the Metamask wallet network list by default. Any transaction with an amount equal to or greater than 0.001 ETH to the above address will be added to your account.",
     "minDeposit": "The minimum acceptable amount {{min}} {{currency}}",
-    "minDepositText": "Any transaction with a value greater than {{min}} {{currency}} will be added to your account at the following address.",
+    "minDepositText": "Any transaction will be added to your account at the following address.",
     "DepositTBTCContentBefore": "Only BTC test accepted! For free download",
     "DepositTBTCContentAfter": "go to any transaction with an amount equal to or greater than 0.001 BTC to the above address will be added to your account.",
     "DepositTUSDTContentBefore": "Only USDT Ropsten Network Test is accepted! To learn how to get free,",
     "DepositTUSDTContentAfter": "Go. To send a USDT test to this address, you must change your wallet atrium network to Ropsten. This network is on the Metamask wallet network list by default. Any transaction with an amount equal to or greater than From 10 USDT to the above address will be added to your account.",
     "depositTime": "* Your balance will increase {{time}} minutes after depositing to the above address.",
     "securityConsiderations": "Due to security considerations, the transfer to the account may be delayed slightly. You can see the withdrawal status on the same page in the Deposit / Withdrawal Transactions section.",
     "network": "Network",
-    "selectNetwork": "Select Network"
+    "selectNetwork": "Select Network",
+    "gettingAddress": "Getting address...",
+    "errorGettingAddress": "Failed to get address"
   },
   "CallbackPage": {
     "ok": "The deposit was successful.",

public/assets/locales/fa/translation.json

@@ -244,15 +244,17 @@
     "DepositTETHContentBefore": "فقط ETH تستی شبکه Ropsten مورد قبول قرار می گیرد! برای دریافت رایگان به ",
     "DepositTETHContentAfter": " بروید. برای ارسال ETH تستی به این آدرس، باید شبکه اتریومی کیف پول خود را به Ropsten تغییر دهید. این شبکه به طور پیش فرض در فهرست شبکه های کیف پول Metamask وجود دارد. هر تراکنشی با مقدار مساوی یا بیشتر از ۰.۰۰۱ ETH به آدرس بالا، به حساب شما افزوده می شود.",
     "minDeposit": "حداقل میزان قابل قبول {{min}} {{currency}}",
-    "minDepositText": "هر تراکنشی با مقدار بیشتر از {{min}} {{currency}} به آدرس زیر ، به حساب شما افزوده می شود.",
+    "minDepositText": "هر تراکنشی به آدرس زیر ، به حساب شما افزوده می شود.",
     "DepositTBTCContentBefore": "فقط BTC تستی مورد قبول قرار می گیرد! برای دریافت رایگان به ",
     "DepositTBTCContentAfter": " بروید. هر تراکنشی با مقدار مساوی یا بیشتر از ۰.۰۰۱ BTC به آدرس بالا، به حساب شما افزوده می شود.",
     "DepositTUSDTContentBefore": "فقط USDT تستی شبکه Ropsten مورد قبول قرار می گیرد! برای آشنایی با روش دریافت رایگان به ",
     "DepositTUSDTContentAfter": " بروید. برای ارسال USDT تستی به این آدرس، باید شبکه اتریومی کیف پول خود را به Ropsten تغییر دهید. این شبکه به طور پیش فرض در فهرست شبکه های کیف پول Metamask وجود دارد. هر تراکنشی با مقدار مساوی یا بیشتر از ۱۰ USDT به آدرس بالا، به حساب شما افزوده می شود.",
     "depositTime": "* موجودی شما {{time}} دقیقه بعد از واریز به آدرس بالا، افزایش پیدا می کند.",
     "securityConsiderations": "باتوجه به ملاحظات امنیتی ممکن است انتقال به حساب با کمی تاخیر صورت بگیرد. می توانید وضعیت برداشت را در همین صفحه از بخش ترکنش های واریز/برداشت ببینید.",
     "network": "شبکه",
-    "selectNetwork": " شبکه را انتخاب کنید"
+    "selectNetwork": " شبکه را انتخاب کنید",
+    "gettingAddress": "درحال گرفتن آدرس...",
+    "errorGettingAddress": "خطا در گرفتن آدرس"
   },
   "CallbackPage": {
     "ok": "واریز وجه با موفقیت انجام شد.",

src/components/TextInput/TextInput.js

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

src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/DepositWithdraw.module.css

@@ -40,7 +40,12 @@
 .depositIRTInput :global(.after) {
   width: 20%;
 }
-
+.thisInput :global(.lead) {
+  width: 18%;
+}
+.thisInput :global(.selectExternalClass) {
+  width: 82% !important;
+}
 
 .thisButton {
   width: 100%;

src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Deposit/Deposit.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import classes from "../../DepositWithdraw.module.css";
 import TextInput from "../../../../../../../../../../../../components/TextInput/TextInput";
 import Icon from "../../../../../../../../../../../../components/Icon/Icon";
@@ -8,170 +8,72 @@ import QRCode from "react-qr-code";
 import {toast} from "react-hot-toast";
 import Error from "../../../../../../../../../../../../components/Error/Error";
 import Loading from "../../../../../../../../../../../../components/Loading/Loading";
-import {useGetDepositAddress} from "../../../../../../../../../../../../queries";
+import {useGetCurrencyInfo, useGetDepositAddress} from "../../../../../../../../../../../../queries";
 import IRTDeposit from "./components/IRT/IRTDeposit";
+import {BN} from "../../../../../../../../../../../../utils/utils";
+import Address from "./components/Address/Address";
 
 const Deposit = () => {
 
     const {id} = useParams();
     const {t} = useTranslation();
-    const addressRef = useRef(null);
 
-    const copyToClipboard = () => {
-        addressRef.current.select();
-        document.execCommand("copy");
-        toast.success(<Trans
-            i18nKey="DepositWithdraw.success"
-        />);
-    };
+    const [networkName, setNetworkName] = useState({value: 0, error: []});
 
-    const {data: address, isLoading, error, refetch} = useGetDepositAddress(id)
+    const selectRef = useRef()
+
+
+
+    const {data: currencyInfo, isLoading: CILoading, error: CIError, refetch: refetchCI} = useGetCurrencyInfo(id)
+
+    console.log("currencyInfo", currencyInfo)
+    console.log("currencyInfo length", currencyInfo?.length)
+    console.log("currencyInfo bool", !currencyInfo)
 
     useEffect(() => {
-        if (id !== "IRT") refetch()
+        setNetworkName({value: 0, error: []})
+
     }, [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;
+
+
+    useEffect(() => {
+        if (id !== "IRT") {
+            refetchCI()
         }
-    };
+    }, [id]);
+
 
     if (id === "IRT") return <IRTDeposit/>
-    if (isLoading) return <Loading/>
-    if (error) return <Error retryFunc={refetch}/>
+    if (CILoading) return <Loading/>
+    if (CIError) return <Error/>
+
+    console.log("currencyInfo?.chains[networkName.value].network", currencyInfo?.chains[networkName?.value]?.network)
 
     return (
-        <div className={`px-1 py-3 row jc-between ${classes.content}`}>
-            <div className="col-80 column jc-between">
-                    <span className={`mb-2`}>
-                        <Trans
-                            i18nKey="DepositWithdraw.minDepositText"
-                            values={{
-                                min: lowestPrice(id),
-                                currency: t("currency." + id)
-                            }}
-                        />
-                    </span>
-                <TextInput
-                    after={
-                        <Icon
-                            iconName="icon-copy fs-02"
-                            onClick={() => copyToClipboard()}
-                            customClass={`hover-text cursor-pointer`}
-                        />
-                    }
-                    customClass={classes.depositInput}
-                    readOnly={true}
-                    type="text"
-                    customRef={addressRef}
-                    value={address.address}
-                />
-                <span className={`mt-2`}>{helpText()}</span>
-            </div>
-            <div className={`col-20 py-1 flex ai-center jc-center`}>
-                <QRCode
-                    value={address.address}
-                    bgColor="var(--cardBody)"
-                    fgColor="var(--textColor)"
-                    level='L'
-                    size={140}
-                />
-            </div>
+        <div className={`px-1 py-3 column ${classes.content}`}>
+            <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-64 ${classes.thisInput}`}
+            />
+
+            { currencyInfo && <Address network={currencyInfo?.chains[networkName?.value]?.network}/>}
+
+
+
         </div>
     )
 }

src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Deposit/components/Address/Address.js

@@ -0,0 +1,82 @@
+import React, {useEffect, useRef} from 'react';
+import className from '../../../../DepositWithdraw.module.css'
+import {useParams} from "react-router-dom";
+import {Trans, useTranslation} from "react-i18next";
+import {toast} from "react-hot-toast";
+import {useGetDepositAddress} from "../../../../../../../../../../../../../../queries";
+import Loading from "../../../../../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../../../../../components/Error/Error";
+import Icon from "../../../../../../../../../../../../../../components/Icon/Icon";
+import classes from "../../../../DepositWithdraw.module.css";
+import TextInput from "../../../../../../../../../../../../../../components/TextInput/TextInput";
+import QRCode from "react-qr-code";
+
+const Address = ({network}) => {
+
+    console.log("network", network)
+
+    const {id} = useParams();
+    const {t} = useTranslation();
+    const addressRef = useRef(null);
+
+
+
+    const copyToClipboard = () => {
+        addressRef.current.select();
+        document.execCommand("copy");
+        toast.success(<Trans
+            i18nKey="DepositWithdraw.success"
+        />);
+    };
+
+    const {data: address, isLoading, error, refetch: refetchAddress} = useGetDepositAddress(id, network)
+
+    useEffect(() => {
+        if (id !== "IRT") {
+            refetchAddress()
+        }
+    }, [network]);
+
+    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={`row jc-between`}>
+            <div className={`column width-80`}>
+                 <span className={`my-2`}>
+                        <Trans
+                            i18nKey="DepositWithdraw.minDepositText"
+                        />
+                </span>
+
+                <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-80`}
+                />
+            </div>
+
+            <div className={`width-20 py-1 flex ai-center jc-center`}>
+                <QRCode
+                    value={address.address}
+                    bgColor="var(--cardBody)"
+                    fgColor="var(--textColor)"
+                    level='L'
+                    size={140}
+                />
+            </div>
+
+        </div>
+    );
+};
+
+export default Address;

src/queries/hooks/useGetDepositAddress.js

@@ -1,18 +1,18 @@
 import {useQuery} from "@tanstack/react-query";
 import {getDepositAddress} from "js-api-client";
 
-export const useGetDepositAddress = (currency) => {
+export const useGetDepositAddress = (currency, network) => {
     return useQuery(
-        ['depositAddress', currency],
-        () => getDepositAddressFunc(currency),
+        ['depositAddress', currency, network],
+        () => getDepositAddressFunc(currency, network),
         {
             retry: 1,
             refetchOnMount: false,
-            staleTime: 30*60*1000
+            staleTime: 30*60*1000,
         });
 }
 
-const getDepositAddressFunc = async (currency) => {
-    const {data} = await getDepositAddress(currency)
+const getDepositAddressFunc = async (currency, network) => {
+    const {data} = await getDepositAddress(currency, network)
     return data;
 }