herald-exchange-onramp_offramp-widget 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "herald-exchange-onramp_offramp-widget",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/assets/css/style.module.css

@@ -907,6 +907,9 @@ button:disabled {
 .input-error {
   color: var(--faile-sdk-color);
 }
+.input_error {
+  color: var(--faile-sdk-color);
+}
 
 .required {
   color: var(--faile-sdk-color);
@@ -1433,3 +1436,144 @@ button:disabled {
     transform: rotate(1turn);
   }
 }
+
+/* SANDBOX */
+
+.card_form_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+.card_form {
+  width: 100%;
+  max-width: 400px;
+}
+
+.card_form h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.card_form label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-weight: 500;
+}
+
+.card_form input {
+  width: 100%;
+  padding: 0.5rem;
+  margin-bottom: 0.2rem;
+  border-radius: 6px;
+  border: 1px solid #aaa;
+  font-size: 1rem;
+}
+
+.card_row {
+  display: flex;
+  gap: 1rem;
+}
+
+.card_row > div {
+  flex: 1;
+}
+
+/* SANDBOX Result selection */
+.result_step_container {
+  max-width: 400px;
+  margin: auto;
+  padding: 2rem;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  background: transparent;
+  text-align: center;
+}
+
+.result_step_container h2 {
+  margin-bottom: 1.5rem;
+}
+
+.result_options {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
+}
+
+.result_option {
+  padding: 1rem;
+  border: 1px solid var(--dark-sdk-color);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1.1rem;
+  transition: all 0.2s ease-in-out;
+  text-align: center;
+}
+
+/* SUCCESS selected */
+.success {
+  background-color: #32cd32;
+  color: white;
+  border-color: #32cd32;
+  font-weight: bold;
+  transform: scale(1.1);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* FAILURE selected */
+.failure {
+  background-color: #dc3545;
+  color: white;
+  border-color: #dc3545;
+  font-weight: bold;
+  transform: scale(1.1);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+}
+
+.result_option:hover {
+  border-color: var(--primay-sdk-color);
+}
+
+/* SELL ADMIN CRYPTO SUCCESS / FAILURE OPTION */
+
+.sell_admin_crypto_result_options {
+  display: flex;
+
+  align-items: center;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
+}
+.sell_admin_crypto_result_option {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.2s ease-in-out;
+  text-align: center;
+  border: 1px solid var(--dark-sdk-color);
+  border-radius: 0.5rem;
+}
+
+.sell_admin_crypto_success {
+  background-color: #32cd32;
+  color: white;
+  border-color: #32cd32;
+
+  font-weight: bold;
+  transform: scale(1.1);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+}
+
+.sell_admin_crypto_failure {
+  background-color: #dc3545;
+  color: white;
+  border-color: #dc3545;
+  font-weight: bold;
+  transform: scale(1.1);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+}
+
+.hidden_radio {
+  display: none;
+}

package/src/components/NewBuyField.tsx

@@ -14,6 +14,7 @@ import type {
   rulesType,
 } from "./types";
 import styles from "../assets/css/style.module.css";
+import SandBox from "./sandbox/SandBox";
 
 type NewBuyFieldProps = {
   apiKey: string;
@@ -67,6 +68,7 @@ const NewBuyField = ({
     maxAmount: "1000.00000",
   });
 
+  const [sandboxData, setSandboxData] = useState<any>(null);
   useEffect(() => {
     fetchCurrencies();
     fetchCommissions();
@@ -75,7 +77,6 @@ const NewBuyField = ({
 
   const fetchCurrencies = () => {
     const baseUrl = getBaseUrl(mode);
-    console.log({ mode, baseUrl });
 
     handleApiCall({
       url: `${baseUrl}/api/lookup/currencies`,
@@ -361,6 +362,10 @@ const NewBuyField = ({
           .then((data) => {
             if (data?.data?.redirect_url) {
               setRedirectURL(data.data.redirect_url);
+              setSandboxData({
+                ...fiatDetails,
+                apiResponse: data?.data,
+              });
               setBuyStep(2);
             } else if (!data.success) {
               addToast(data?.message, "error");
@@ -664,20 +669,29 @@ const NewBuyField = ({
             </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>
+          {mode === "development" ? (
+            <SandBox
+              apiKey={apiKey}
+              clientReferenceID={clientReferenceID}
+              data={sandboxData}
+              setSandboxData={setSandboxData}
+            />
+          ) : (
+            <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>
+          )}
         </>
       )}
     </>

package/src/components/SellAdminCryptoAccount.tsx

@@ -201,7 +201,7 @@ const SellAdminCryptoAccount = ({
       const currency = tokenSellData.selectedCrypto;
       const expected_amount = tokenSellData.from_amount;
 
-      if (walletAddress) {
+      if (walletAddress && mode === "production") {
         const startTimestamp = Date.now();
         // let rpcUrl = SUPPORTED_RPC_NODES[SupportedTokens[token]];
 
@@ -219,6 +219,8 @@ const SellAdminCryptoAccount = ({
             fetchTransactions(token, walletAddress, startTimestamp, expected_amount);
           }
         }, 10000);
+      } else {
+        handleManualHash();
       }
       // generateQRDetails(walletAddress, token, tokenSellData.from_currency);
     }
@@ -423,10 +425,10 @@ const SellAdminCryptoAccount = ({
     setMonitoring(false);
   };
 
-  // const handleManualHash = () => {
-  //   setMonitoring(false);
-  //   setAutomaticHash(false);
-  // };
+  const handleManualHash = () => {
+    setMonitoring(false);
+    setAutomaticHash(false);
+  };
   return (
     <>
       <div className={styles.bank_head}>

package/src/components/sandbox/CardForm.tsx

@@ -0,0 +1,211 @@
+import React, { useState } from "react";
+// import "./sandbox.css";
+import styles from "../../assets/css/style.module.css";
+const CardForm = ({
+  setSandboxStep,
+}: {
+  setSandboxStep: React.Dispatch<React.SetStateAction<number>>;
+}) => {
+  const [form, setForm] = useState({
+    name: "",
+    number: "",
+    expiry: "",
+    cvv: "",
+  });
+
+  const [errors, setErrors] = useState({
+    name: "",
+    number: "",
+    expiry: "",
+    cvv: "",
+  });
+
+  const formatCardNumber = (value: string) => {
+    return value
+      .replace(/\D/g, "") // Remove non-digits
+      .replace(/(.{4})/g, "$1 ") // Add space every 4 digits
+      .trim();
+  };
+
+  const formatExpiry = (value: string) => {
+    const cleaned = value.replace(/\D/g, "");
+    if (cleaned.length >= 3) {
+      return cleaned.slice(0, 2) + "/" + cleaned.slice(2, 4);
+    }
+    return cleaned;
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    let error = "";
+
+    let formattedValue = value;
+    if (name === "name") {
+      if (!formattedValue.trim()) {
+        error = "Cardholder name is required.";
+      } else {
+        const isAlpha = /^[A-Za-z\s]+$/.test(formattedValue);
+        if (!isAlpha) {
+          error = "Enter only alphabets";
+        }
+      }
+    }
+
+    if (name === "number") {
+      formattedValue = formatCardNumber(value);
+
+      if (!/^\d{4} \d{4} \d{4} \d{4}$/.test(formattedValue)) {
+        error = "Enter a valid 16-digit card number.";
+      }
+    }
+    if (name === "expiry") {
+      formattedValue = formatExpiry(value);
+
+      if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(formattedValue)) {
+        error = "Use MM/YY format.";
+      } else {
+        const [mm, yy] = formattedValue.split("/").map(Number);
+        const now = new Date();
+        const currentMonth = now.getMonth() + 1;
+        const currentYear = now.getFullYear() % 100; // last two digits
+
+        if (yy < currentYear || (yy === currentYear && mm < currentMonth)) {
+          error = "Expiry date must be in the future.";
+        }
+      }
+    }
+    if (name === "cvv") {
+      formattedValue = value.replace(/\D/g, "");
+
+      if (!/^\d{3,4}$/.test(formattedValue)) {
+        error = "CVV must be 3 or 4 digits.";
+      }
+    } // only digits
+
+    setErrors((prevErrors) => ({
+      ...prevErrors,
+      [name]: error,
+    }));
+
+    setForm((prev) => ({ ...prev, [name]: formattedValue }));
+  };
+
+  const validate = () => {
+    const newErrors = {
+      name: "",
+      number: "",
+      expiry: "",
+      cvv: "",
+    };
+
+    if (!form.name.trim()) {
+      newErrors.name = "Cardholder name is required.";
+    }
+
+    if (!/^\d{4} \d{4} \d{4} \d{4}$/.test(form.number)) {
+      newErrors.number = "Enter a valid 16-digit card number.";
+    }
+
+    if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(form.expiry)) {
+      newErrors.expiry = "Use MM/YY format.";
+    } else {
+      const [mm, yy] = form.expiry.split("/").map(Number);
+      const now = new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear() % 100; // last two digits
+
+      if (yy < currentYear || (yy === currentYear && mm < currentMonth)) {
+        newErrors.expiry = "Expiry date must be in the future.";
+      }
+    }
+
+    if (!/^\d{3,4}$/.test(form.cvv)) {
+      newErrors.cvv = "CVV must be 3 or 4 digits.";
+    }
+
+    setErrors(newErrors);
+
+    return Object.values(newErrors).every((error) => !error);
+  };
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (validate()) {
+      console.log("Valid card data:", form);
+      setSandboxStep(2);
+    }
+  };
+
+  return (
+    <div className={styles.card_form_container}>
+      <form onSubmit={handleSubmit} className={styles.card_form} noValidate>
+        <h2>Enter Card Details</h2>
+
+        <label htmlFor="name">Cardholder Name</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          placeholder="John Doe"
+          value={form.name}
+          onChange={handleChange}
+          required
+        />
+        {errors.name && <span className={styles.input_error}>{errors.name}</span>}
+
+        <label htmlFor="number">Card Number</label>
+        <input
+          type="text"
+          id="number"
+          name="number"
+          placeholder="1234 5678 9012 3456"
+          maxLength={19}
+          value={form.number}
+          onChange={handleChange}
+          required
+        />
+        {errors.number && <span className={styles.input_error}>{errors.number}</span>}
+
+        <div className={styles.card_row}>
+          <div>
+            <label htmlFor="expiry">Expiry (MM/YY)</label>
+            <input
+              type="text"
+              id="expiry"
+              name="expiry"
+              placeholder="08/27"
+              maxLength={5}
+              value={form.expiry}
+              onChange={handleChange}
+              required
+            />
+            {errors.expiry && <span className={styles.input_error}>{errors.expiry}</span>}
+          </div>
+
+          <div>
+            <label htmlFor="cvv">CVV</label>
+            <input
+              type="password"
+              id="cvv"
+              name="cvv"
+              placeholder="123"
+              maxLength={4}
+              value={form.cvv}
+              onChange={handleChange}
+              required
+            />
+            {errors.cvv && <span className={styles.input_error}>{errors.cvv}</span>}
+          </div>
+        </div>
+
+        <div className={styles.ramp_action}>
+          <button type="submit" className={`${styles.action_btn} ${styles.primary}`}>
+            Continue
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CardForm;

package/src/components/sandbox/Overview.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import styles from "../../assets/css/style.module.css";
+import { handleApiCall } from "../api";
+import { getBaseUrl } from "../utils";
+import { useToast } from "../../hooks/toastProvider";
+import { Spinner } from "../loader";
+
+const CardResultOption = ({
+  setSandboxStep,
+  data,
+  apiKey,
+  clientReferenceID,
+  setSandboxData,
+}: {
+  setSandboxStep: React.Dispatch<React.SetStateAction<number>>;
+  data: any;
+  apiKey: string;
+  clientReferenceID: string;
+  setSandboxData: React.Dispatch<React.SetStateAction<any>>;
+}) => {
+  const { addToast } = useToast();
+  const [transactionLoading, setTransactionLoading] = useState(false);
+  const handleConfirm = () => {
+    setTransactionLoading(true);
+
+    const baseUrl = getBaseUrl("development");
+
+    handleApiCall({
+      url: `${baseUrl}/api/onramp/transactions/status/${data?.apiResponse?.onramp_transaction?.unique_id}`,
+      method: "POST",
+      headers: {
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: any) => {
+        if (result?.success) {
+          setSandboxData({
+            ...data,
+            transactionDetails: result?.data,
+          });
+          addToast(`${result?.message}`, "success");
+        } else {
+          setSandboxData({
+            ...data,
+            transactionDetails: result?.data,
+          });
+          addToast(`${result?.message}`, "error");
+        }
+        setTransactionLoading(false);
+        setSandboxStep(3);
+      },
+      onError: (error: any) => {
+        addToast(`${error}`, "error");
+        setTransactionLoading(false);
+      },
+    });
+  };
+
+  return (
+    <div className={styles.details_frame}>
+      <div className={styles.f_details_head}>
+        <div></div>
+        <div className={styles.f_details_titles}>Overview</div>
+      </div>
+      <div className={styles.f_details_info_box}>
+        <div className={styles.f_details_card}>
+          <span>You pay</span>
+          <span>
+            {data?.apiResponse?.onramp_transaction?.from_value}
+            {data?.apiResponse?.onramp_transaction?.from}
+          </span>
+        </div>
+        <div className={styles.f_details_card}>
+          <span>Rate</span>
+          <span>
+            1 {data?.apiResponse?.onramp_transaction?.from} =
+            {data?.apiResponse?.onramp_transaction?.exchange_rate}{" "}
+            {data?.apiResponse?.onramp_transaction?.to}
+          </span>
+        </div>
+        <div className={styles.f_details_card}>
+          <span>Fee</span>
+          <span>
+            {data?.apiResponse?.onramp_transaction?.service_fee}
+            {data?.apiResponse?.onramp_transaction?.from}
+          </span>
+        </div>
+        <div className={styles.f_details_card}>
+          <span>You Receive</span>
+          <span>
+            {data?.apiResponse?.onramp_transaction?.to_value}{" "}
+            {data?.apiResponse?.onramp_transaction?.to}
+          </span>
+        </div>
+
+        <div className={styles.f_details_card}>
+          <span>Wallet</span>
+          <span>
+            {data?.apiResponse?.onramp_transaction?.wallet_address?.length > 15
+              ? `${data?.apiResponse?.onramp_transaction?.wallet_address?.slice(
+                  0,
+                  5
+                )}...${data?.apiResponse?.onramp_transaction?.wallet_address?.slice(-5)}`
+              : data?.apiResponse?.onramp_transaction?.wallet_address}
+          </span>
+        </div>
+      </div>
+      <div className={styles.ramp_action}>
+        <button
+          type="button"
+          onClick={handleConfirm}
+          className={`${styles.action_btn} ${styles.primary}`}
+        >
+          Confirm {transactionLoading && <Spinner />}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CardResultOption;

package/src/components/sandbox/SandBox.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import CardForm from "./CardForm";
+import CardResultOption from "./Overview";
+import CardTransactionDetails from "./SandboxTransactionDetails";
+
+const SandBox = ({
+  data,
+  apiKey,
+  clientReferenceID,
+  setSandboxData,
+}: {
+  data: any;
+  apiKey: string;
+  clientReferenceID: string;
+  setSandboxData: (data: any) => void;
+}) => {
+  const [sandboxStep, setSandboxStep] = useState(1);
+  return (
+    <div>
+      {sandboxStep === 1 && <CardForm setSandboxStep={setSandboxStep} />}
+      {sandboxStep === 2 && (
+        <CardResultOption
+          apiKey={apiKey}
+          clientReferenceID={clientReferenceID}
+          data={data}
+          setSandboxStep={setSandboxStep}
+          setSandboxData={setSandboxData}
+        />
+      )}
+      {sandboxStep === 3 && <CardTransactionDetails data={data} />}
+    </div>
+  );
+};
+
+export default SandBox;