herald-exchange-onramp_offramp-widget 1.0.0

package/src/components/NewBuyField.tsx

@@ -0,0 +1,687 @@
+import React, { useEffect, useState } from "react";
+import CustomSelect from "./CustomeSelect";
+import { useToast } from "../hooks/toastProvider";
+import Loader, { Spinner } from "./loader";
+import DotLoader from "./DotLoader";
+import { getBaseUrl, isValidDecimal } from "./utils";
+import { handleApiCall } from "./api";
+import WAValidator from "multicoin-address-validator";
+import type {
+  BuyParamsType,
+  comissionAPIResponse,
+  CurrenciesAPIResponse,
+  CustomOption,
+  rulesType,
+} from "./types";
+import styles from "../assets/css/style.module.css";
+
+type NewBuyFieldProps = {
+  apiKey: string;
+  redirectUrl: string;
+  parameters: BuyParamsType;
+  clientReferenceID: string;
+  mode: string;
+};
+
+const NewBuyField = ({
+  apiKey,
+  redirectUrl,
+  parameters,
+  clientReferenceID,
+  mode,
+}: NewBuyFieldProps) => {
+  const { addToast } = useToast();
+
+  const [loading, setLoading] = useState(false);
+  const [fiatOptions, setFiatOptions] = useState<CustomOption[] | []>([]);
+  const [cryptoOptions, setCryptoOptions] = useState<CustomOption[] | []>([]);
+  const [selectedCrypto, setSelectedCrypto] = useState<CustomOption | null>(null);
+  const [selectedFiat, setSelectedFiat] = useState<CustomOption | null>(null);
+  const [exchangeRateForThisUser, setExchangeRateForThisUser] = useState<number>(0);
+  const [commissionForThisUser, setCommissionForThisUser] = useState<number>(0);
+  // const [actualCommission, setActualCommission] = useState<number>(0);
+  const [inputRules, setInputRules] = useState<rulesType | null>(null);
+  const [currencies, setCurrencies] = useState<CurrenciesAPIResponse["data"] | null>(null);
+  // const [commissionApiResponse, setComissionApiResponse] = useState <comissionAPIResponse["data"] | null>(null);
+  const [invalidAmount, setInvalidAmount] = useState({
+    min: false,
+    max: false,
+  });
+  // const [addCommission, setAddCommission] = useState(null);
+  const [userReceivableCryptoValue, setUserReceivableCryptoValue] = useState(0);
+  const [exchangeLoading, setExchangeLoading] = useState(true);
+  const [buyStep, setBuyStep] = useState(1);
+  const [redirectURL, setRedirectURL] = useState();
+  const [walletAddress, setWalletAddress] = useState("");
+  const [walletAddressError, setWalletAddressError] = useState("");
+  // const [exchangeRateApiResponse, setExchangeRateApiResponse] = useState(null);
+  //    You Pay / Fiat
+  const [fiatDetails, setfiatDetails] = useState({
+    from_amount:
+      parameters?.from_amount && parseFloat(parameters?.from_amount) > 0
+        ? parameters.from_amount
+        : "0",
+    selectedCrypto: parameters.token_type,
+    selectedFiat: "",
+    minAmount: "0.0000001",
+    maxAmount: "1000.00000",
+  });
+
+  useEffect(() => {
+    fetchCurrencies();
+    fetchCommissions();
+    // eslint-disable-next-line
+  }, []);
+
+  const fetchCurrencies = () => {
+    const baseUrl = getBaseUrl(mode);
+    console.log({ mode, baseUrl });
+
+    handleApiCall({
+      url: `${baseUrl}/api/lookup/currencies`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: CurrenciesAPIResponse) => {
+        if (result?.success) {
+          setCurrencies(result?.data);
+        }
+      },
+      onError: () => {
+        addToast("Error fetching currency", "error");
+      },
+    });
+  };
+
+  const fetchCommissions = () => {
+    const baseUrl = getBaseUrl(mode);
+    handleApiCall({
+      url: `${baseUrl}/api/lookup/commissions`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: comissionAPIResponse) => {
+        if (result?.success) {
+          const rules = result?.data?.rules?.find((item) => item?.service === "onramp") || null;
+          setInputRules(rules);
+          if (rules) {
+            setfiatDetails({
+              ...fiatDetails,
+              minAmount: rules?.schema?.min,
+              maxAmount: rules?.schema?.max,
+            });
+          }
+        }
+      },
+      onError: () => {
+        addToast("Error fetching comission", "error");
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (currencies) {
+      const fiatCurrencyOptions = currencies?.currencies
+        ?.filter((item) => item?.supported_currency?.type === "FIAT" && item?.service === "onramp")
+        ?.map((item) => ({
+          label: item?.supported_currency?.code,
+          value: item?.unique_id,
+          icon: item?.supported_currency?.icon,
+        }));
+
+      setFiatOptions(fiatCurrencyOptions);
+
+      const selected_forex = fiatDetails?.selectedFiat
+        ? currencies?.currencies.find(
+            (currency) => currency?.supported_currency?.code === fiatDetails?.selectedFiat
+          ) ||
+          currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === fiatCurrencyOptions?.[0]?.label
+          )
+        : currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === fiatCurrencyOptions?.[0]?.label
+          );
+
+      const selectedFiat = fiatDetails.selectedFiat
+        ? fiatCurrencyOptions.find((fiat) => fiat.label === fiatDetails.selectedFiat) ||
+          fiatCurrencyOptions?.[0]
+        : fiatCurrencyOptions?.[0];
+
+      setSelectedFiat(selectedFiat);
+
+      // setCategoriesOptions(categories);
+
+      const cryptoOptions =
+        currencies?.currencies
+          ?.filter(
+            (item) => item?.supported_currency?.type === "CRYPTO" && item?.service === "onramp"
+          )
+          ?.map((item) => ({
+            label: item?.supported_currency?.code,
+            value: item?.unique_id,
+            icon: item?.supported_currency?.icon,
+          })) || [];
+
+      setCryptoOptions(cryptoOptions);
+
+      const selected_crypto = parameters?.token_type
+        ? currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === parameters?.token_type
+          ) ||
+          currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === cryptoOptions?.[0]?.label
+          )
+        : currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === cryptoOptions?.[0]?.label
+          );
+
+      setSelectedCrypto(
+        parameters?.token_type
+          ? cryptoOptions.find((currency) => currency.label === parameters?.token_type) ||
+              cryptoOptions?.[0]
+          : cryptoOptions?.[0] || []
+      );
+
+      setfiatDetails((prev) => ({
+        ...prev,
+        selectedCrypto: selected_crypto?.supported_currency?.code || "",
+        selectedFiat: selected_forex?.supported_currency?.code || "",
+      }));
+    }
+    // eslint-disable-next-line
+  }, [currencies]);
+
+  const handleFiatCurrencyChange = (selectedOption: CustomOption | null) => {
+    const fiat = currencies?.currencies?.find((fiat) => fiat.unique_id === selectedOption?.value);
+    setfiatDetails({
+      ...fiatDetails,
+      selectedFiat: fiat?.supported_currency?.code || "",
+    });
+    setSelectedFiat(selectedOption);
+  };
+
+  const handleFiatCurrencyValueChange = (value: string) => {
+    if (value.includes(".")) {
+      if (inputRules && !isValidDecimal(value, inputRules?.schema?.decimal)) {
+        addToast(`You can input upto ${inputRules?.schema?.decimal} decimal places.`, "error");
+        return;
+      } else {
+        if (value === "") {
+          setfiatDetails({
+            ...fiatDetails,
+            from_amount: "",
+          });
+        } else {
+          if (!isNaN(Number(value))) {
+            setfiatDetails({
+              ...fiatDetails,
+              from_amount: value,
+            });
+          }
+        }
+      }
+    } else {
+      if (value === "") {
+        setfiatDetails({
+          ...fiatDetails,
+          from_amount: "",
+        });
+      } else {
+        if (!isNaN(Number(value))) {
+          setfiatDetails({
+            ...fiatDetails,
+            from_amount: value,
+          });
+        }
+      }
+    }
+  };
+
+  const onCryptoChange = (selectedOption: CustomOption) => {
+    const crypto = currencies?.currencies?.find(
+      (crypto) => crypto?.unique_id === selectedOption.value
+    );
+    setfiatDetails({
+      ...fiatDetails,
+      selectedCrypto: crypto?.supported_currency?.code || "",
+    });
+    setSelectedCrypto(selectedOption);
+  };
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      if (selectedFiat && selectedCrypto) {
+        fetchExchangeRate();
+      }
+    }, 300);
+
+    return () => clearTimeout(handler);
+    // eslint-disable-next-line
+  }, [selectedFiat, selectedCrypto, fiatDetails]);
+
+  const fetchExchangeRate = async () => {
+    const baseUrl = getBaseUrl(mode);
+
+    setExchangeLoading(true);
+    setCommissionForThisUser(0);
+    setExchangeRateForThisUser(0);
+    setUserReceivableCryptoValue(0);
+    if (
+      typeof fiatDetails.from_amount === "string"
+        ? parseFloat(fiatDetails?.from_amount) > 0
+        : fiatDetails.from_amount > 0
+    ) {
+      const payload = {
+        from: fiatDetails?.selectedFiat || selectedFiat?.label,
+        to: fiatDetails?.selectedCrypto || selectedCrypto?.label,
+        amount: fiatDetails?.from_amount,
+      };
+
+      try {
+        await fetch(
+          `${baseUrl}/api/onramp/fee?from=${payload.from}&to=${payload.to}&amount=${payload.amount}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              "X-API-KEY": apiKey,
+              "User-Id": clientReferenceID,
+            },
+          }
+        )
+          .then((response) => response.json())
+          .then((data) => {
+            if (Object.keys(data.data).length > 0) {
+              const values = data.data;
+              setCommissionForThisUser(
+                parseFloat(values.markupFee) +
+                  parseFloat(values.networkFee) +
+                  parseFloat(values.processingFee)
+              );
+              setExchangeRateForThisUser(values.exchangeRate);
+              setUserReceivableCryptoValue(values.amountOut);
+            } else {
+              addToast(data?.message, "error");
+            }
+          })
+          .catch((error) => {
+            addToast(error, "error");
+            console.error("Error Fetching Exchange Rate:", error);
+          });
+      } catch (error: any) {
+        addToast(error, "error");
+        console.error("Error Fetching Exchange Rate:", error);
+      } finally {
+        setExchangeLoading(false);
+      }
+    } else {
+      addToast("Please enter valid amount", "error");
+      setExchangeLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    setInvalidAmount({
+      min:
+        parseFloat(fiatDetails.from_amount) < parseFloat(fiatDetails.minAmount) ||
+        fiatDetails.from_amount === "" ||
+        parseFloat(fiatDetails.from_amount) <= 0,
+      max: parseFloat(fiatDetails.from_amount) > parseFloat(fiatDetails.maxAmount),
+    });
+  }, [exchangeRateForThisUser, fiatDetails]);
+
+  const onComplete = async () => {
+    const baseUrl = getBaseUrl(mode);
+    if (parseFloat(fiatDetails.from_amount) > 0) {
+      setLoading(true);
+      const payload = {
+        from: fiatDetails?.selectedFiat || selectedFiat?.label,
+        to: fiatDetails?.selectedCrypto || selectedCrypto?.label,
+        value: fiatDetails?.from_amount,
+        wallet_address: walletAddress,
+        initial_exchange_rate: exchangeRateForThisUser,
+        redirect_url: redirectUrl,
+      };
+
+      try {
+        await fetch(`${baseUrl}/api/onramp/transactions`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-API-KEY": apiKey,
+            "User-Id": clientReferenceID,
+          },
+          body: JSON.stringify(payload),
+        })
+          .then((response) => response.json())
+          .then((data) => {
+            if (data?.data?.redirect_url) {
+              setRedirectURL(data.data.redirect_url);
+              setBuyStep(2);
+            } else if (!data.success) {
+              addToast(data?.message, "error");
+            }
+          })
+          .catch((error) => {
+            addToast(error, "error");
+            console.error("Error in Buy Tokens:", error);
+          });
+      } catch (error: any) {
+        addToast(error, "error");
+        console.error("Error in Buy Tokens:", error);
+      } finally {
+        // setExchangeLoading(false);
+        setLoading(false);
+      }
+    } else {
+      addToast("Please enter valid amount", "error");
+    }
+  };
+
+  return (
+    <>
+      {buyStep === 1 ? (
+        <>
+          <div className={styles.field_card}>
+            <div className={styles.field_box}>
+              <div className={styles.field_label}>You Pay</div>
+              <div className={styles.field_form}>
+                <input
+                  type="text"
+                  value={fiatDetails?.from_amount}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    handleFiatCurrencyValueChange(newValue);
+                  }}
+                  //   disabled={exchangeLoading}
+                  className={styles.input_control}
+                />
+              </div>
+            </div>
+
+            <div className={styles.field_select_card}>
+              <div className={styles.field_select}>
+                {fiatOptions?.length > 0 ? (
+                  <CustomSelect
+                    backgroundColor="#f3e2c3"
+                    placeholder={"Select an option"}
+                    image={true}
+                    singleicons={true}
+                    options={fiatOptions}
+                    isSearchable={false}
+                    value={selectedFiat}
+                    onChange={(selectedOption) => handleFiatCurrencyChange(selectedOption)}
+                    isDisabled={exchangeLoading}
+                  />
+                ) : (
+                  <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+                    <Loader />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          {invalidAmount?.min && (
+            <p className={styles.error_msg}>
+              Invalid, Min : {parseFloat(fiatDetails?.minAmount)?.toFixed(8)}
+            </p>
+          )}
+          {invalidAmount?.max && (
+            <p className={styles.error_msg}>
+              Invalid, Max : {parseFloat(fiatDetails?.maxAmount)?.toString()}
+            </p>
+          )}
+          <div className={styles.info_box}>
+            <div className={`${styles.ramp_space} ${styles.label_card}`}>
+              <div className={styles.label_icons}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlSpace="preserve"
+                  width="12"
+                  height="12"
+                  viewBox="0 0 300 300"
+                >
+                  <path
+                    d="M240.3 171.5H59.7c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h180.6c11.9 0 21.5 9.6 21.5 21.5s-9.6 21.5-21.5 21.5"
+                    data-original="#000000"
+                  ></path>
+                  <circle cx="150" cy="65.5" r="30.5" data-original="#000000"></circle>
+                  <circle cx="150.5" cy="234.5" r="30.5" data-original="#000000"></circle>
+                </svg>
+              </div>
+              <div className={styles.label_value}>
+                <span style={{ marginRight: 10 }}>Rate :</span>
+                {exchangeLoading ? (
+                  <DotLoader />
+                ) : (
+                  `1
+                ${selectedFiat?.label || "N/A"}
+                = ${exchangeRateForThisUser > 0 ? (1 / exchangeRateForThisUser).toFixed(8) : 0} ${
+                    selectedCrypto?.label
+                  }`
+                )}
+              </div>
+            </div>
+            {/* <div className={`${styles.ramp_space_top} ${styles.label_titles}`}>
+              <div className={styles.label_dots}></div>
+              <div className={styles.ramp_details}>
+                <div className={styles.ramp_head}> See Fees Calculation</div>
+              </div>
+            </div> */}
+            <div className={`${styles.ramp_space} ${styles.label_card}`}>
+              <div className={styles.label_icons}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlSpace="preserve"
+                  width="10"
+                  height="10"
+                  viewBox="0 0 121.805 121.804"
+                >
+                  <path
+                    d="M7.308 68.211h107.188a7.31 7.31 0 0 0 7.309-7.31 7.31 7.31 0 0 0-7.309-7.309H7.308a7.31 7.31 0 0 0 0 14.619"
+                    data-original="#000000"
+                  ></path>
+                </svg>
+              </div>
+              <div className={styles.label_value}>
+                <span style={{ marginRight: 10 }}>Total Fees :</span>
+                {exchangeLoading ? (
+                  <DotLoader />
+                ) : (
+                  `${commissionForThisUser || 0} ${selectedFiat?.label}`
+                )}
+              </div>
+            </div>
+            <div className={`${styles.ramp_space_top} ${styles.label_titles}`}>
+              <div className={styles.label_dots}></div>
+              <div className={styles.ramp_details}>
+                <div className={styles.ramp_head}>Payment Method</div>
+                <div className={styles.payment_box}>
+                  <div className={`${styles.payment_check_card} ${styles.selected}`}>
+                    <input
+                      type="radio"
+                      name="radioDefault"
+                      id="radioDefault1"
+                      value="0.10234"
+                      className={styles.input_control}
+                    />
+                    <div>Card Payment</div>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 408.576 408.576"
+                    >
+                      <g>
+                        <path
+                          d="M204.288 0C91.648 0 0 91.648 0 204.288s91.648 204.288 204.288 204.288 204.288-91.648 204.288-204.288S316.928 0 204.288 0zm114.176 150.528-130.56 129.536c-7.68 7.68-19.968 8.192-28.16.512L90.624 217.6c-8.192-7.68-8.704-20.48-1.536-28.672 7.68-8.192 20.48-8.704 28.672-1.024l54.784 50.176L289.28 121.344c8.192-8.192 20.992-8.192 29.184 0s8.192 20.992 0 29.184z"
+                          fill="#F9C201"
+                        ></path>
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={styles.field_card}>
+            <div className={styles.field_box}>
+              <div className={styles.field_label}>You Receive (estimate)</div>
+              <div className={styles.field_form}>
+                {exchangeLoading ? (
+                  <DotLoader size={20} />
+                ) : (
+                  <input
+                    type="text"
+                    value={
+                      invalidAmount?.min || invalidAmount?.max ? 0 : userReceivableCryptoValue || 0
+                    }
+                    className={styles.input_control}
+                    disabled
+                  />
+                )}
+              </div>
+            </div>
+            <div className={styles.field_select_card}>
+              <div className={styles.field_select}>
+                {cryptoOptions?.length > 0 ? (
+                  <CustomSelect
+                    backgroundColor="#f3e2c3"
+                    placeholder="Select"
+                    borderColor="var(--no-color)"
+                    image={true}
+                    singleicons={true}
+                    options={cryptoOptions}
+                    isSearchable={false}
+                    value={selectedCrypto}
+                    onChange={(selectedOption) => {
+                      if (selectedOption) {
+                        setExchangeRateForThisUser(0);
+                        setWalletAddress("");
+                        setWalletAddressError("Required");
+                        onCryptoChange(selectedOption);
+                      }
+                    }}
+                    isDisabled={exchangeLoading}
+                  />
+                ) : (
+                  <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+                    <Loader />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div style={{ marginTop: "20px" }} className={styles.ramp_bank_box}>
+            <div className={styles.new_bank_label}>
+              Wallet Address <span className={styles.required}>*</span>
+            </div>
+            <div className={styles.new_bank_fields}>
+              <input
+                type="text"
+                value={walletAddress}
+                className={styles.input_control}
+                placeholder="Enter Wallet Address"
+                onChange={(e) => {
+                  const value = e.target.value.trim();
+                  setWalletAddress(value);
+                  if (e.target.value !== "" && selectedCrypto) {
+                    setWalletAddressError("");
+
+                    const valid = ["USDT", "USDC"].includes(selectedCrypto.label)
+                      ? WAValidator.validate(value, "ETH") ||
+                        WAValidator.validate(value, "TRX") ||
+                        WAValidator.validate(value, "SOL")
+                      : WAValidator.validate(value, selectedCrypto.label);
+                    if (!valid) {
+                      setWalletAddressError("Invalid wallet address");
+                    } else {
+                      setWalletAddressError("");
+                    }
+                  } else {
+                    setWalletAddressError("Required");
+                  }
+                }}
+                name="bank_name"
+              />
+            </div>
+            {walletAddressError && <span className={styles.input_error}>{walletAddressError}</span>}
+          </div>
+
+          <div className={styles.info_card}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32">
+              <g id="Layer_20" data-name="Layer 20">
+                <path fill="#fbd63b" d="M28 28H4L16 6z"></path>
+                <path fill="#f8be31" d="m16 6 12 22H16z"></path>
+                <path fill="#333" d="m16 21-2-7h4z"></path>
+                <circle cx="16" cy="25" r="1" fill="#333"></circle>
+                <path d="M16 14h2l-2 7zM16 24a1 1 0 0 1 0 2z"></path>
+              </g>
+            </svg>
+            <div className={styles.caution_info}>
+              Cryptocurrencies are volatile, and prices can change rapidly, make sure to research
+              and understand the market risks.
+            </div>
+          </div>
+
+          <div className={styles.ramp_action}>
+            <button
+              disabled={
+                exchangeRateForThisUser <= 0 ||
+                exchangeLoading ||
+                !walletAddress ||
+                loading ||
+                walletAddressError?.length > 0
+              }
+              className={`${styles.action_btn} ${styles.primary} `}
+              onClick={onComplete}
+            >
+              Continue {loading && <Spinner />}
+            </button>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className={styles.bank_head} onClick={() => setBuyStep(1)}>
+            <div>
+              <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.bank_titles}>Back</div>
+          </div>
+          <iframe
+            title="Buy Crypto"
+            id="chat-widget"
+            src={redirectURL}
+            style={{
+              width: "100%",
+              minHeight: "calc(100vh - 400px)",
+              // minHeight: "calc(100vh - 23%)",
+              // maxHeight: "calc(100vh - 10%)",
+              border: "none",
+              zIndex: "9999",
+              overflow: "auto",
+            }}
+          ></iframe>
+        </>
+      )}
+    </>
+  );
+};
+
+export default NewBuyField;