herald-exchange-onramp_offramp-widget 1.0.0

package/src/components/BuyField.tsx

@@ -0,0 +1,632 @@
+// import React, { useContext, useEffect, useState } from "react";
+// import CustomSelect from "./CustomeSelect";
+// import { useToast } from "../hooks/toastProvider";
+// import Loader from "./loader";
+// import DotLoader from "./DotLoader";
+// import { isValidDecimal } from "./utils";
+// import { useExchangeSocket } from "../hooks/useSocketExchange";
+// import { handleApiCall } from "./api";
+// import WAValidator from "multicoin-address-validator";
+
+// type BuyFieldProps = {
+//   onHide: () => void;
+//   defaultTab: string;
+//   apiKey: string;
+//   setStep: (step: string) => void;
+//   redirectUrl: string;
+//   parameters: any;
+//   placeholder: string;
+//   clientReferenceID: string;
+// };
+
+// const BuyField = ({
+//   onHide,
+//   defaultTab,
+//   apiKey,
+//   setStep,
+//   redirectUrl,
+//   parameters,
+//   placeholder,
+//   clientReferenceID,
+// }: BuyFieldProps) => {
+//   const { addToast } = useToast();
+//   const exchangeSocket = useExchangeSocket({}); // socket connection to fetch exchange rate
+
+//   const [loading, setLoading] = useState(false);
+//   const [fiatOptions, setFiatOptions] = useState([]);
+//   const [cryptoOptions, setCryptoOptions] = useState([]);
+//   const [selectedCrypto, setSelectedCrypto] = useState(null);
+//   const [selectedFiat, setSelectedFiat] = useState(null);
+//   const [exchangeRateForThisUser, setExchangeRateForThisUser] = useState(0);
+//   const [commissionForThisUser, setCommissionForThisUser] = useState(0);
+//   const [actualCommission, setActualCommission] = useState(0);
+//   const [inputRules, setInputRules] = useState(null);
+//   const [currencies, setCurrencies] = useState(null);
+//   const [commissionApiResponse, setComissionApiResponse] = useState(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,
+//   });
+
+//   useEffect(() => {
+//     fetchCurrencies();
+//     fetchCommissions();
+//   }, []);
+
+//   const fetchCurrencies = () => {
+//     handleApiCall({
+//       url: "https://hexchangepay.rare-able.com/api/lookup/currencies",
+//       headers: {
+//         "Content-Type": "application/json",
+//         "X-API-KEY": apiKey,
+//         "User-Id": clientReferenceID,
+//       },
+//       onSuccess: (result) => {
+//         if (result?.success) {
+//           setCurrencies(result?.data);
+//         }
+//       },
+//       onError: (error) => {
+//         addToast("Error fetching currency", "error");
+//       },
+//     });
+//   };
+
+//   useEffect(() => {
+//     if (currencies) {
+//       const fiatCurrencyOptions = currencies?.currencies
+//         ?.filter((item) => item?.supported_currency?.type === "FIAT")
+//         ?.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?.[0];
+
+//       setSelectedFiat(
+//         fiatDetails.selectedFiat
+//           ? fiatCurrencyOptions.find((fiat) => fiat.label === fiatDetails.selectedFiat)
+//           : fiatCurrencyOptions?.[0]
+//       );
+
+//       // setCategoriesOptions(categories);
+
+//       const cryptoOptions =
+//         currencies?.currencies
+//           ?.filter((item) => item?.supported_currency?.type === "CRYPTO")
+//           ?.map((item) => ({
+//             label: item?.supported_currency?.code,
+//             value: item?.unique_id,
+//             icon: item?.supported_currency?.icon,
+//           })) || [];
+
+//       setCryptoOptions(cryptoOptions);
+//       // console.log("param ", parameters?.token_type);
+
+//       const selected_crypto = parameters?.token_type
+//         ? currencies?.currencies?.find(
+//             (currency) => currency?.supported_currency?.code === parameters?.token_type
+//           ) || currencies?.currencies?.[0]
+//         : currencies?.currencies?.[0];
+
+//       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,
+//       }));
+//     }
+//   }, [currencies]);
+
+//   const fetchCommissions = () => {
+//     handleApiCall({
+//       url: "https://hexchangepay.rare-able.com/api/lookup/commissions",
+//       headers: {
+//         "Content-Type": "application/json",
+//         "X-API-KEY": apiKey,
+//         "User-Id": clientReferenceID,
+//       },
+//       onSuccess: (result) => {
+//         if (result?.success) {
+//           setComissionApiResponse(result?.data);
+//         }
+//       },
+//       onError: (error) => {
+//         addToast("Error fetching comission", "error");
+//       },
+//     });
+//   };
+//   // console.log({ selectedCrypto });
+
+//   useEffect(() => {
+//     if (commissionApiResponse && currencies) {
+//       const rules = commissionApiResponse?.rules?.find((item) => item?.service === "onramp");
+//       setInputRules(rules);
+//       const commission = commissionApiResponse?.commission?.find(
+//         (item) => item?.service === "onramp"
+//       );
+//       setActualCommission(commission);
+
+//       setfiatDetails((prev) => ({
+//         ...prev,
+//         minAmount:
+//           parseFloat(rules?.schema?.min) <= 0
+//             ? 0.0000001
+//             : parseFloat(rules?.schema?.min)?.toFixed(8),
+//         maxAmount:
+//           parseFloat(rules?.schema?.max) <= 0 ? 100000 : parseFloat(rules?.schema?.max)?.toFixed(8),
+//         buy_commission: commission,
+//       }));
+//       let range = commissionApiResponse?.commission_ranges?.find(
+//         (item) =>
+//           parseFloat(item.from_amount) <= parseFloat(fiatDetails.from_amount) &&
+//           parseFloat(item.to_amount) >= parseFloat(fiatDetails.from_amount) &&
+//           item.currency === selectedFiat?.label &&
+//           item.type === "f-c"
+//       );
+
+//       setAddCommission(range);
+//     }
+//   }, [commissionApiResponse, currencies]);
+
+//   const handleFiatCurrencyChange = (selectedOption) => {
+//     const fiat = currencies?.currencies?.find((fiat) => fiat.unique_id === selectedOption.value);
+//     setfiatDetails({
+//       ...fiatDetails,
+//       selectedFiat: fiat?.supported_currency?.code,
+//     });
+//     setSelectedFiat(selectedOption);
+//   };
+
+//   const handleFiatCurrencyValueChange = (value) => {
+//     if (value.includes(".")) {
+//       if (inputRules && !isValidDecimal(value, inputRules?.schema?.decimal)) {
+//         addToast(`You can input upto ${inputRules?.schema?.decimal} decimal places.`, "error");
+//         return;
+//       } else {
+//         if (Number(value) == value) {
+//           setfiatDetails({
+//             ...fiatDetails,
+//             from_amount: value,
+//           });
+//         }
+//       }
+//     } else {
+//       if (Number(value) == value) {
+//         setfiatDetails({
+//           ...fiatDetails,
+//           from_amount: value,
+//         });
+//       }
+//     }
+//   };
+
+//   const onCryptoChange = (selectedOption) => {
+//     const crypto = currencies?.currencies?.find(
+//       (crypto) => crypto?.unique_id === selectedOption.value
+//     );
+//     setfiatDetails({
+//       ...fiatDetails,
+//       selectedCrypto: crypto?.supported_currency?.code,
+//     });
+//     setSelectedCrypto(selectedOption);
+//   };
+
+//   useEffect(() => {
+//     if (selectedCrypto?.label) {
+//       setExchangeRateForThisUser(0);
+//       fetchExchangeRate(selectedCrypto.label);
+//     }
+//     // eslint-disable-next-line react-hooks/exhaustive-deps
+//   }, [selectedCrypto]);
+
+//   useEffect(() => {
+//     if (exchangeSocket && selectedFiat && selectedCrypto) {
+//       fetchExchangeRate();
+//     }
+//   }, [selectedCrypto, selectedFiat]);
+
+//   const [exchangeRate, setExchangeRate] = useState(0);
+
+//   useEffect(() => {
+//     exchangeSocket &&
+//       exchangeSocket.on("getSDKExchangeRate", (data) => {
+//         console.log("ex rate :", data);
+//         setExchangeRate(data);
+//         // fetchExchangeRate(false);
+//         setExchangeLoading(false);
+//       });
+//   }, [exchangeSocket]);
+
+//   const fetchExchangeRate = () => {
+//     // fetchExchangeRate(true);
+//     setExchangeLoading(true);
+//     exchangeSocket.emit("fetchSDKExchangeRate", {
+//       pair: `${selectedFiat?.label}-${selectedCrypto?.label}`,
+//       user_id: "",
+//       type: "buy",
+//       apiKey: apiKey,
+//       userId: clientReferenceID,
+//     });
+//   };
+
+//   useEffect(() => {
+//     setInvalidAmount({
+//       min:
+//         parseFloat(fiatDetails.from_amount) < fiatDetails.minAmount ||
+//         fiatDetails.from_amount == "" ||
+//         fiatDetails.from_amount <= 0,
+//       max: parseFloat(fiatDetails.from_amount) > fiatDetails.maxAmount,
+//     });
+//   }, [exchangeRateForThisUser, fiatDetails]);
+
+//   useEffect(() => {
+//     if (exchangeRate && exchangeRate > 0 && fiatDetails) {
+//       // setExchangeApiResponse(data?.data);
+//       const userCommission = actualCommission?.commission
+//         ? parseFloat(actualCommission?.commission) || 0
+//         : 0;
+
+//       let actualExchangeRate = parseFloat(exchangeRate);
+
+//       const additonalCommissionRate = addCommission
+//         ? addCommission.from_commission -
+//           ((addCommission.from_commission - addCommission.to_commission) /
+//             (addCommission.to_amount - addCommission.from_amount)) *
+//             (fiatDetails.from_amount - addCommission.from_amount)
+//         : 0;
+
+//       let newCommission = ((userCommission + additonalCommissionRate) / 100) * actualExchangeRate;
+//       setCommissionForThisUser(newCommission || 0);
+
+//       let newExchangeRate = actualExchangeRate - newCommission;
+
+//       setExchangeRateForThisUser(newExchangeRate || 0);
+
+//       setUserReceivableCryptoValue(fiatDetails.from_amount * newExchangeRate);
+//     }
+//   }, [exchangeRate, fiatDetails, commissionApiResponse]);
+
+//   const onComplete = async () => {
+//     if (fiatDetails.from_amount > 0) {
+//       // setExchangeLoading(true);
+//       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,
+//       };
+
+//       try {
+//         await fetch("https://hexchangepay.rare-able.com/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) {
+//         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="off-ramp-field-card">
+//             <div className="off-ramp-field-box">
+//               <div className="off-ramp-field-label">You pay</div>
+//               <div className="off-ramp-field-form">
+//                 <input
+//                   type="text"
+//                   value={fiatDetails?.from_amount}
+//                   onChange={(e) => {
+//                     const newValue = e.target.value;
+//                     handleFiatCurrencyValueChange(
+//                       newValue <= 100000 ? newValue : fiatDetails?.from_amount
+//                     );
+//                   }}
+//                   className="input-control"
+//                 />
+//               </div>
+//             </div>
+
+//             <div className="off-ramp-field-select-card">
+//               <div className="off-ramp-field-select">
+//                 {fiatOptions?.length > 0 ? (
+//                   <CustomSelect
+//                     backgroundColor="#f3e2c3"
+//                     placeholder={placeholder || "Select an option"}
+//                     image={true}
+//                     singleicons={true}
+//                     options={fiatOptions}
+//                     isSearchable={false}
+//                     value={selectedFiat}
+//                     onChange={(selectedOption) => handleFiatCurrencyChange(selectedOption)}
+//                   />
+//                 ) : (
+//                   <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+//                     <Loader />
+//                   </div>
+//                 )}
+//               </div>
+//             </div>
+//           </div>
+//           {invalidAmount?.min && (
+//             <p className="error-msg text-danger select-date buy-form">
+//               Invalid, Min : {parseFloat(fiatDetails?.minAmount)?.toFixed(8)}
+//             </p>
+//           )}
+//           {invalidAmount?.max && (
+//             <p className="error-msg text-danger select-date buy-form">
+//               Invalid, Max : {parseFloat(fiatDetails?.maxAmount)?.toString()}
+//             </p>
+//           )}
+//           <div className="off-ramp-info-box">
+//             <div className="off-ramp-label-card off-ramp-space">
+//               <div className="off-ramp-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="off-ramp-label-value">
+//                 <span style={{ marginRight: 10 }}>Rate :</span>
+//                 {exchangeLoading ? (
+//                   <DotLoader />
+//                 ) : (
+//                   `1
+//                 ${selectedFiat?.label || "N/A"}
+//                 = ${exchangeRateForThisUser?.toFixed(4)} ${selectedCrypto?.label}`
+//                 )}
+//               </div>
+//             </div>
+//             <div className="off-ramp-label-titles off-ramp-space-top">
+//               <div className="off-ramp-label-dots"></div>
+//               <div className="off-ramp-details">
+//                 <div className="off-ramp-head"> See Fees Calculation</div>
+//               </div>
+//             </div>
+//             <div className="off-ramp-label-card off-ramp-space">
+//               <div className="off-ramp-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="off-ramp-label-value">
+//                 <span style={{ marginRight: 10 }}>Total Fees :</span>
+//                 {exchangeLoading ? (
+//                   <DotLoader />
+//                 ) : (
+//                   `${(commissionForThisUser * fiatDetails?.from_amount)?.toFixed(4)} ${
+//                     selectedCrypto?.label
+//                   }`
+//                 )}
+//               </div>
+//             </div>
+//             <div className="off-ramp-label-titles off-ramp-space-top">
+//               <div className="off-ramp-label-dots"></div>
+//               <div className="off-ramp-details">
+//                 <div className="off-ramp-head">Withdrawal Method</div>
+//                 <div className="off-payment-box">
+//                   <div className="off-payment-check-card selected">
+//                     <input
+//                       type="radio"
+//                       name="radioDefault"
+//                       id="radioDefault1"
+//                       value="0.10234"
+//                       className="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="off-ramp-field-card">
+//             <div className="off-ramp-field-box">
+//               <div className="off-ramp-field-label">You Receive ( estimate )</div>
+//               <div className="off-ramp-field-form">
+//                 {exchangeLoading ? (
+//                   <DotLoader size={20} />
+//                 ) : (
+//                   <input
+//                     type="text"
+//                     value={userReceivableCryptoValue?.toFixed(4)}
+//                     className="input-control"
+//                     disabled
+//                   />
+//                 )}
+//               </div>
+//             </div>
+//             <div className="off-ramp-field-select-card">
+//               <div className="off-ramp-field-select">
+//                 {cryptoOptions?.length > 0 ? (
+//                   <CustomSelect
+//                     backgroundColor="#f3e2c3"
+//                     placeholder="Select"
+//                     borderColor="var(--no-color)"
+//                     image={true}
+//                     singleicons={true}
+//                     options={cryptoOptions}
+//                     value={selectedCrypto}
+//                     isSearchable={false}
+//                     onChange={(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="off-ramp-new-bank-box">
+//             <div className="off-ramp-new-bank-label">
+//               Wallet Address <span className={styles.required}>*</span>
+//             </div>
+//             <div className="off-ramp-new-bank-fields">
+//               <input
+//                 type="text"
+//                 value={walletAddress}
+//                 className="input-control"
+//                 placeholder="Enter Wallet Address"
+//                 onChange={(e) => {
+//                   let value = e.target.value.trim();
+//                   setWalletAddress(value);
+//                   if (e.target.value != "") {
+//                     setWalletAddressError("");
+//                     let network = ["USDT", "USDC"].includes(selectedCrypto.label)
+//                       ? ("ETH", "TRX", "SOL")
+//                       : selectedCrypto.label;
+//                     const valid = ["USDT", "USDC"].includes(selectedCrypto.label)
+//                       ? WAValidator.validate(value, "ETH") ||
+//                         WAValidator.validate(value, "TRX") ||
+//                         WAValidator.validate(value, "SOL")
+//                       : WAValidator.validate(value, network);
+//                     if (!valid) {
+//                       setWalletAddressError("Invalid wallet address");
+//                     } else {
+//                       setWalletAddressError("");
+//                     }
+//                   } else {
+//                     setWalletAddressError("Required");
+//                   }
+//                 }}
+//                 name="bank_name"
+//               />
+//             </div>
+//             {walletAddressError && <span className="input-error">{walletAddressError}</span>}
+//           </div>
+
+//           <div className="off-ramp-action">
+//             <button
+//               disabled={
+//                 !exchangeRateForThisUser > 0 ||
+//                 exchangeLoading ||
+//                 !walletAddress ||
+//                 loading ||
+//                 walletAddressError
+//               }
+//               className="action-btn primary"
+//               onClick={onComplete}
+//             >
+//               Continue
+//             </button>
+//           </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 BuyField;