herald-exchange-offramp-widget 1.0.0

package/src/components/SellAdminCryptoAccount.tsx

@@ -0,0 +1,603 @@
+import React, { useEffect, useState, useRef } from "react";
+import CommonCenterLoader, { ButtonLoader } from "./CommonCenterLoader";
+// import CopyToClipboard from "react-copy-to-clipboard";
+import ButtonStepper from "./ButtonStepper";
+import { QRCodeCanvas } from "qrcode.react";
+import { handleApiCall } from "./api";
+import { useToast } from "../hooks/toastProvider";
+import type { tokenSellDataType } from "./SellField";
+import type { OfframpTransactionAPIResponse, WalletAddressAPIRespone } from "./types";
+import styles from "../assets/css/style.module.css";
+import { getContactAddress, getSupportedTokens } from "./chains";
+import { getBaseUrl } from "./utils";
+
+type WalletAddressKeys = "evm" | "trx" | "sol";
+
+type SellAdminCryptoAccountProps = {
+  tokenSellData: tokenSellDataType;
+  setTokenSellData: (data: any) => void;
+  apiKey: string;
+  setStep: (step: number) => void;
+  clientReferenceID: string;
+  mode: string;
+};
+
+const SellAdminCryptoAccount = ({
+  tokenSellData,
+  setTokenSellData,
+  apiKey,
+  setStep,
+  clientReferenceID,
+  mode,
+}: SellAdminCryptoAccountProps) => {
+  const { addToast } = useToast(); // to show toast
+
+  // const updateTokenSellData = (data) => setTokenSellData(data);
+
+  // const [errorMessage, setErrorMessage] = useState(false);
+  const [transactionSuccess, setTransactionSuccess] = useState(false);
+  const [skipRender, setSkipRender] = useState(true);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [sellStaticCaseWallet, setSellStaticCaseWallet] = useState(false);
+  // const [files, setFiles] = useState([]);
+  const [generatedQr, setGeneratedQr] = useState<string>("");
+  const [monitoring, setMonitoring] = useState(true);
+  // const [tronMonitoring, setTronMonitoring] = useState(false);
+  // const [solanaMonitoring, setSolanaMonitoring] = useState(false);
+  const [automaticHash, setAutomaticHash] = useState(true);
+  const [walletLoading, setWalletLoading] = useState(false);
+  const [adminWallet, setAdminWallet] = useState<string | null>(null);
+  const [transactionHash, setTransactionHash] = useState<string>("");
+  const [selltokensLoading, setSellTokensLoading] = useState(false);
+  const [tokenSell, setTokenSell] = useState<any>(null);
+
+  const intervalRef = useRef<any>(null);
+  const inputRef = useRef<any>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [networkType, setNetworkType] = useState(tokenSellData.network_type || "");
+
+  // const validationSchema = Yup.object().shape({
+  //   transaction_hash: Yup.string()
+  //     .required(t("transaction.required"))
+  //     .min(3, t("transaction.invalid"))
+  // });
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    fetchAdminWallet();
+  }, []);
+
+  const onSubmit = () => {
+    sellTokenStart({
+      ...tokenSellData,
+      transaction_hash: transactionHash,
+    });
+  };
+
+  useEffect(() => {
+    if (!skipRender && adminWallet) {
+      const wallet_address = adminWallet;
+
+      const token = ["USDT", "USDC"].includes(tokenSellData.selectedCrypto)
+        ? tokenSellData.network_type
+        : tokenSellData.selectedCrypto;
+      console.log({ wallet_address });
+      generateQRDetails(wallet_address, token, tokenSellData.selectedCrypto);
+    }
+    setSkipRender(false);
+  }, [adminWallet, tokenSellData]);
+
+  const generateQRDetails = async (wallet_address: string, token: string, currency: string) => {
+    const network = token === "TRX" ? "tron" : token === "SOL" ? "solana" : "ethereum";
+    const depositAmountInWei = ["TRX", "SOL"].includes(token)
+      ? tokenSellData.from_amount.toString()
+      : ["USDC", "USDT"].includes(currency)
+      ? tokenSellData.from_amount.toString()
+      : tokenSellData.from_amount.toString();
+    const depositLabel = "HeraldExchangeSell";
+    const uri = `${network}:${wallet_address}?amount=${depositAmountInWei}&label=${encodeURIComponent(
+      depositLabel
+    )}`;
+    setGeneratedQr(uri);
+  };
+
+  const fetchAdminWallet = async () => {
+    const baseUrl = getBaseUrl(mode);
+    setWalletLoading(true);
+
+    handleApiCall({
+      url: `${baseUrl}/api/offramp/wallet_address`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: WalletAddressAPIRespone) => {
+        if (result?.data?.wallet_address) {
+          const networkType: string = (
+            ["USDT", "USDC"].includes(tokenSellData.selectedCrypto)
+              ? tokenSellData.network_type
+              : tokenSellData.selectedCrypto
+          ).toLowerCase();
+
+          const walletKeys: WalletAddressKeys[] = ["evm", "trx", "sol"];
+
+          const wallet_address: string = ["eth", "bnb", "matic"].includes(networkType)
+            ? result?.data?.wallet_address["evm"]
+            : walletKeys.includes(networkType as WalletAddressKeys)
+            ? result?.data?.wallet_address[networkType as WalletAddressKeys]
+            : "";
+
+          setAdminWallet(wallet_address);
+          setWalletLoading(false);
+        }
+      },
+      onError: () => {
+        addToast("Error fetching exchange rate", "error");
+        setWalletLoading(false);
+      },
+    });
+  };
+
+  const sellTokenStart = async (data: any) => {
+    setSellTokensLoading(true);
+    const baseUrl = getBaseUrl(mode);
+
+    const formdata = new FormData();
+
+    formdata.append("from", tokenSellData.selectedCrypto);
+    formdata.append("to", tokenSellData.selectedFiat);
+    if (["USDT", "USDC"].includes(tokenSellData.selectedCrypto)) {
+      formdata.append("network_type", tokenSellData.network_type);
+    }
+    formdata.append("value", tokenSellData.from_amount);
+    formdata.append("initial_exchange_rate", tokenSellData.exchange_rate?.toString());
+    formdata.append("transaction_hash", data.transaction_hash);
+    formdata.append("bank_account", tokenSellData.selectedBeneficiary);
+
+    handleApiCall({
+      url: `${baseUrl}/api/offramp/transactions`,
+      headers: {
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      method: "POST",
+      body: formdata,
+      onSuccess: (result: OfframpTransactionAPIResponse) => {
+        if (result?.success) {
+          setTokenSell({
+            data: result?.data,
+          });
+          setTransactionSuccess(true);
+          setTokenSellData({
+            ...tokenSellData,
+            response: result?.data,
+          });
+          setSellTokensLoading(false);
+          addToast(`${result?.message}`, "success");
+          setStep(4);
+        } else {
+          addToast(`${result?.message}`, "error");
+          setTransactionSuccess(false);
+          setSellTokensLoading(false);
+        }
+      },
+      onError: (error: any) => {
+        addToast(` ${error}`, "error");
+        setTransactionSuccess(false);
+        setSellTokensLoading(false);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (!skipRender && adminWallet && monitoring) {
+      const walletAddress = adminWallet;
+
+      const token = ["USDT", "USDC"].includes(tokenSellData.selectedCrypto)
+        ? tokenSellData.network_type
+        : tokenSellData.selectedCrypto;
+      const currency = tokenSellData.selectedCrypto;
+      const expected_amount = tokenSellData.from_amount;
+
+      if (walletAddress) {
+        const startTimestamp = Date.now();
+        // let rpcUrl = SUPPORTED_RPC_NODES[SupportedTokens[token]];
+
+        intervalRef.current = setInterval(() => {
+          // console.log(token, networkType)
+          if (["USDT", "USDC"].includes(currency) && networkType) {
+            fetchTokenTransactions(networkType, walletAddress, startTimestamp, expected_amount);
+          } else {
+            fetchTransactions(token, walletAddress, startTimestamp, expected_amount);
+          }
+        }, 10000);
+      }
+      // generateQRDetails(walletAddress, token, tokenSellData.from_currency);
+    }
+    setSkipRender(false);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [adminWallet, tokenSellData, monitoring]);
+
+  const fetchTransactions = async (
+    token: string,
+    walletAddress: string,
+    startTimestamp: any,
+    expectedAmount: string
+  ) => {
+    let apiUrl = "";
+
+    // const rpcUrl = SUPPORTED_RPC_NODES[SupportedTokens[token]];
+    const rpcUrl = getSupportedTokens({
+      mode,
+      token,
+    });
+
+    const ETH_KEY = "B34RQKNPZUV8IM6866DQ58WCS2Q6SWAP8V";
+    const BNB_KEY = "876A7KYGBE2TVBBNY33I4GZPXE1Q4QH3QA";
+    const MATIC_KEY = "KYV61TJQU5RDMTGY1D95J8R61HWCR9T7KT";
+
+    if (token === "ETH") {
+      apiUrl = `${rpcUrl}/api?module=account&action=txlist&address=${walletAddress}&startblock=0&endblock=99999999&sort=desc&apikey=${ETH_KEY}`;
+    } else if (token === "BNB") {
+      apiUrl = `${rpcUrl}/api?module=account&action=txlist&address=${walletAddress}&startblock=0&endblock=99999999&sort=desc&apikey=${BNB_KEY}`;
+    } else if (token === "MATIC" || token === "POLYGON" || token === "POLYGON_AMOY") {
+      apiUrl = `${rpcUrl}/api?module=account&action=txlist&address=${walletAddress}&startblock=0&endblock=99999999&sort=desc&apikey=${MATIC_KEY}`;
+    } else if (token === "TRX") {
+      apiUrl = `${rpcUrl}/v1/accounts/${walletAddress}/transactions?limit=10`;
+    } else if (token === "SOL") {
+      return fetchSolanaTransactions();
+      // apiUrl = `https://api.mainnet-beta.solana.com/`;
+    } else {
+      console.error("Unsupported network");
+      return;
+    }
+
+    if (automaticHash) {
+      try {
+        const response = await fetch(apiUrl);
+        const data = await response.json();
+        processTransactions(data, walletAddress, token, startTimestamp, expectedAmount);
+      } catch (error) {
+        console.error("Error fetching transactions:", error);
+      }
+    }
+  };
+
+  const processTransactions = (
+    data: any,
+    walletAddress: string,
+    token: string,
+    startTimestamp: any,
+    expectedAmount: any
+  ) => {
+    let transactions = [];
+
+    if (token === "ETH" || token === "BNB" || token === "MATIC") {
+      transactions = data.result;
+    } else if (token === "TRX") {
+      transactions = data.data;
+    } else if (token === "SOL") {
+      transactions = data.result;
+    }
+
+    transactions.forEach((tx: any) => {
+      const timestamp = token == "TRX" ? tx.block_timestamp : tx.timeStamp * 1000;
+      // console.log(timestamp, startTimestamp, timestamp > startTimestamp)
+      if (timestamp > startTimestamp) {
+        const hash = tx.hash || tx.transactionHash || tx.txID;
+        const amount =
+          token == "TRX" ? tx.raw_data.contract[0].parameter.value.amount / 1e6 : tx.value / 1e18;
+        if (expectedAmount == amount) {
+          console.log("New Transaction Detected:", { hash, amount });
+          // formRef?.current?.setFieldValue("transaction_hash", hash);
+          inputRef.current.value = hash;
+          setTransactionHash(hash);
+          setMonitoring(false);
+        }
+      }
+    });
+  };
+
+  const fetchTokenTransactions = async (
+    token: string,
+    walletAddress: string,
+    startTimestamp: any,
+    expectedAmount: any
+  ) => {
+    let apiUrl = "";
+    console.log({ token });
+
+    const rpcUrl = getSupportedTokens({
+      mode,
+      token,
+    });
+
+    const ETH_KEY = "B34RQKNPZUV8IM6866DQ58WCS2Q6SWAP8V";
+    const BNB_KEY = "876A7KYGBE2TVBBNY33I4GZPXE1Q4QH3QA";
+    const MATIC_KEY = "KYV61TJQU5RDMTGY1D95J8R61HWCR9T7KT";
+
+    const contract_address = getContactAddress({
+      mode,
+      token,
+      networkType,
+    });
+
+    console.log({ contract_address, rpcUrl });
+
+    console.log("Checking for Token @ ", networkType, contract_address, token);
+
+    if (["ETH", "BNB", "MATIC"].includes(networkType)) {
+      const key = networkType == "ETH" ? ETH_KEY : networkType == "BNB" ? BNB_KEY : MATIC_KEY;
+      apiUrl = `${rpcUrl}/api?module=account&action=tokentx&address=${walletAddress}&startblock=0&endblock=99999999&sort=desc&apikey=${key}`;
+    } else if (networkType === "TRX") {
+      apiUrl = `${rpcUrl}/v1/accounts/${walletAddress}/transactions/trc20`;
+    } else if (networkType === "SOL") {
+      return fetchSolanaTransactions();
+    } else {
+      console.error("Unsupported token network");
+      return;
+    }
+
+    try {
+      const response = await fetch(apiUrl);
+      const data = await response.json();
+      processTokenTransactions(
+        data,
+        walletAddress,
+        token,
+        startTimestamp,
+        contract_address,
+        expectedAmount
+      );
+    } catch (error) {
+      console.error("Error fetching token transactions:", error);
+    }
+  };
+
+  const processTokenTransactions = (
+    data: any,
+    walletAddress: string,
+    token: string,
+    startTimestamp: any,
+    contract_address: any,
+    expectedAmount: any
+  ) => {
+    const transactions = data.result || data.data || [];
+
+    transactions.forEach((tx: any) => {
+      const timestamp = networkType == "TRX" ? tx.block_timestamp : tx.timeStamp * 1000;
+      if (timestamp > startTimestamp) {
+        if (networkType == "TRX") {
+          // Check if the token is same and then proceed
+          // if(contract_address.toLowerCase() == tx.token_info.address.toLowerCase()){
+          const hash = tx.hash || tx.transaction_id || tx.txID;
+          const amount = parseFloat(tx.value) / 10 ** parseInt(tx.token_info.decimals);
+
+          console.log("New TRC20 Transaction Detected:", { hash, amount });
+
+          if (amount == expectedAmount) {
+            // formRef?.current?.setFieldValue("transaction_hash", hash);
+            inputRef.current.value = hash;
+            setTransactionHash(hash);
+            setMonitoring(false);
+          }
+          // }
+        } else {
+          if (contract_address.toLowerCase() == tx.contractAddress.toLowerCase()) {
+            const hash = tx.hash || tx.transactionHash || tx.txID;
+            const amount = parseFloat(tx.value) / 10 ** parseInt(tx.tokenDecimal);
+            console.log("New ERC20 Transaction Detected:", { hash, amount });
+            if (amount == expectedAmount) {
+              // formRef?.current?.setFieldValue("transaction_hash", hash);
+              inputRef.current.value = hash;
+              setTransactionHash(hash);
+              setMonitoring(false);
+            }
+          }
+        }
+      }
+    });
+  };
+
+  const fetchSolanaTransactions = async () => {
+    setAutomaticHash(false);
+    setMonitoring(false);
+  };
+
+  // const handleManualHash = () => {
+  //   setMonitoring(false);
+  //   setAutomaticHash(false);
+  // };
+
+  return (
+    <>
+      <div className={styles.sellPaymentDetailsWrap}>
+        <div className={styles.offRampBankHead}>
+          <div style={{ cursor: "pointer" }} onClick={() => setStep(2)}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlSpace="preserve"
+              width="18"
+              height="18"
+              viewBox="0 0 240.823 240.823"
+            >
+              <path
+                d="M57.633 129.007 165.93 237.268c4.752 4.74 12.451 4.74 17.215 0 4.752-4.74 4.752-12.439 0-17.179l-99.707-99.671 99.695-99.671c4.752-4.74 4.752-12.439 0-17.191-4.752-4.74-12.463-4.74-17.215 0L57.621 111.816c-4.679 4.691-4.679 12.511.012 17.191"
+                data-original="#000000"
+              ></path>
+            </svg>
+          </div>
+          <div className={styles.bankTitles}>Sell Crypto</div>
+        </div>
+      </div>
+
+      {walletLoading ? (
+        <CommonCenterLoader />
+      ) : adminWallet && Object.keys(adminWallet)?.length > 0 ? (
+        <>
+          <div className={styles.sellPaymentDetailsWrap}>
+            <div className={styles.sellQRPayementWrap}>
+              <div className={styles.sellAmtDetails}>
+                <div className={styles.sellAmtDetailsWrap}>
+                  <div className={styles.sellAmtPay}>
+                    <span className={styles.sellPayLabel}>You Pay </span>
+                    <span className={styles.sellPayAmt}>
+                      {tokenSellData.from_amount} {tokenSellData.selectedCrypto}{" "}
+                      {["USDT", "USDC"].includes(tokenSellData.selectedCrypto) &&
+                      tokenSellData.network_type
+                        ? `(${tokenSellData.network_type})`
+                        : ""}
+                    </span>
+                  </div>
+                  <div className={styles.sellAmtGet}>
+                    <span className={styles.sellPayLabel}>You Get </span>
+                    <span className={styles.sellPayAmt}>
+                      {tokenSellData.to_currency_conversion_value?.toFixed(4)}{" "}
+                      {tokenSellData.selectedFiat}
+                    </span>
+                  </div>
+                </div>
+                <div className={styles.sellEstimatedInfo}>
+                  <p>
+                    {" "}
+                    <span>Estimated Rate </span>{" "}
+                    <span>
+                      1 {tokenSellData.selectedCrypto} ={" "}
+                      {!isNaN(tokenSellData.exchange_rate)
+                        ? tokenSellData.exchange_rate.toFixed(4)
+                        : 0.0}{" "}
+                      {tokenSellData.selectedFiat}
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div className={styles.sellPaymentQRBox}>
+                <div className={styles.sellPaymentQRFrame}>
+                  {generatedQr ? (
+                    <QRCodeCanvas
+                      value={generatedQr}
+                      size={128}
+                      bgColor={"#ffffff"}
+                      fgColor={"#000000"}
+                      level={"H"}
+                    />
+                  ) : (
+                    <CommonCenterLoader />
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          <form onSubmit={onSubmit}>
+            <div className={styles.selllWalletAddressCard}>
+              {sellStaticCaseWallet ||
+                (adminWallet && (
+                  <div className={styles.sellWalletDataCard}>
+                    <h6>Wallet Address</h6>
+                    <div className={styles.sellWalletCodeCard}>
+                      <div className={styles.sellWalletCode}>
+                        <span> {adminWallet}</span>{" "}
+                      </div>
+                      <button
+                        className={`${styles.actionBtn} ${styles.overlay}`}
+                        type="button"
+                        onClick={async () => {
+                          await navigator.clipboard.writeText(adminWallet);
+                          addToast("Copied", "success");
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="20"
+                          height="20"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="#298BFF"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          className="icon icon-tabler icons-tabler-outline icon-tabler-copy"
+                        >
+                          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                          <path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
+                          <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              <div className={styles.sellHashBox}>
+                <div
+                  style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}
+                >
+                  <div className={styles.sellHashLabel}>
+                    Transaction Hash <span>*</span>
+                  </div>
+                  {/* {automaticHash ? (
+                    <button
+                      className={styles.manualHashBtn}
+                      style={{ fontSize: "0.8em" }}
+                      onClick={() => handleManualHash()}
+                    >
+                      Enter Manually
+                    </button>
+                  ) : null} */}
+                </div>
+                <input
+                  className={styles.sellHashFields}
+                  type="text"
+                  placeholder={"Enter Transaction Hash"}
+                  name="transaction_hash"
+                  onChange={(e) => setTransactionHash(e.target.value)}
+                  ref={inputRef}
+                  disabled={automaticHash}
+                  // disabled={tokenSell.buttonDisable}
+                />
+                {/* {!transactionHash && <p className="errorMsg">Required</p>} */}
+              </div>
+            </div>
+            <div className={styles.efiSwapAction}>
+              {monitoring || selltokensLoading || transactionSuccess ? (
+                <div className="mt-3">
+                  <ButtonStepper props={tokenSell} monitoring={monitoring} />
+                </div>
+              ) : (
+                <button
+                  className={`${styles.actionBtn} ${styles.primary}`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onSubmit();
+                  }}
+                  disabled={!transactionHash || selltokensLoading}
+                >
+                  {selltokensLoading ? <ButtonLoader /> : "Submit"}
+                </button>
+              )}
+            </div>
+          </form>
+        </>
+      ) : (
+        <>
+          <div className={styles.no_wallet_details}>
+            <p>No Wallet Details Found</p>
+            <div>
+              <button
+                className={`${styles.actionBtn} ${styles.primary}`}
+                onClick={() => fetchAdminWallet()}
+              >
+                Retry
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export default SellAdminCryptoAccount;