herald-exchange-offramp-widget 1.0.0 → 1.0.1

package/src/components/SellAdminCryptoAccount.tsx

@@ -207,7 +207,13 @@ const SellAdminCryptoAccount = ({
         intervalRef.current = setInterval(() => {
           // console.log(token, networkType)
           if (["USDT", "USDC"].includes(currency) && networkType) {
-            fetchTokenTransactions(networkType, walletAddress, startTimestamp, expected_amount);
+            fetchTokenTransactions({
+              currency,
+              token: networkType,
+              walletAddress,
+              startTimestamp,
+              expected_amount,
+            });
           } else {
             fetchTransactions(token, walletAddress, startTimestamp, expected_amount);
           }
@@ -303,12 +309,19 @@ const SellAdminCryptoAccount = ({
     });
   };
 
-  const fetchTokenTransactions = async (
-    token: string,
-    walletAddress: string,
-    startTimestamp: any,
-    expectedAmount: any
-  ) => {
+  const fetchTokenTransactions = async ({
+    currency,
+    token,
+    walletAddress,
+    startTimestamp,
+    expected_amount,
+  }: {
+    currency: string;
+    token: string;
+    walletAddress: string;
+    startTimestamp: any;
+    expected_amount: string;
+  }) => {
     let apiUrl = "";
     console.log({ token });
 
@@ -323,13 +336,13 @@ const SellAdminCryptoAccount = ({
 
     const contract_address = getContactAddress({
       mode,
-      token,
+      token: currency,
       networkType,
     });
 
     console.log({ contract_address, rpcUrl });
 
-    console.log("Checking for Token @ ", networkType, contract_address, token);
+    console.log("Checking for Token @ ", currency, networkType, contract_address, token);
 
     if (["ETH", "BNB", "MATIC"].includes(networkType)) {
       const key = networkType == "ETH" ? ETH_KEY : networkType == "BNB" ? BNB_KEY : MATIC_KEY;
@@ -352,7 +365,7 @@ const SellAdminCryptoAccount = ({
         token,
         startTimestamp,
         contract_address,
-        expectedAmount
+        expected_amount
       );
     } catch (error) {
       console.error("Error fetching token transactions:", error);

package/src/components/SellField.tsx

@@ -44,7 +44,7 @@ export type tokenSellDataType = {
 // Sell Crypto and receive Fiat
 const SellField = ({ apiKey, parameters, clientReferenceID, mode }: SellFieldProps) => {
   const { addToast } = useToast(); // to show toast
-  const exchangeSocket: any = useExchangeSocket({}); // socket connevction to fetch exchange rate
+  const exchangeSocket: any = useExchangeSocket({ mode }); // socket connection to fetch exchange rate
 
   const [step, setStep] = useState(1); // used to render components
 
@@ -486,14 +486,26 @@ const SellField = ({ apiKey, parameters, clientReferenceID, mode }: SellFieldPro
                     handleCryptoCurrencyValueChange(newValue);
                   }}
                 />
+                 {invalidAmount?.min && (
+            <p className={styles.errorMsg}>
+              Invalid, Min : {parseFloat(tokenSellData?.minAmount)?.toFixed(8)}
+            </p>
+          )}
+          {invalidAmount?.max && (
+            <p className={styles.errorMsg}>
+              Invalid, Max : {parseFloat(tokenSellData?.maxAmount)?.toString()}
+            </p>
+          )}
               </div>
             </div>
             <div className={styles.offRampFieldSelectCard}>
               <div className={`${styles.offRampFieldSelect}`}>
                 {cryptoCurrencyOptions?.length > 0 ? (
                   <CustomSelect
-                    backgroundColor="#f3e2c3"
+                    backgroundColor="var(--primary-set-color)"
+                    colorvalue="var(--off-white)"
                     placeholder="Select"
+                    svgFill ="var(--off-white)"
                     image={true}
                     singleicons={true}
                     value={selectedCrypto}
@@ -515,7 +527,8 @@ const SellField = ({ apiKey, parameters, clientReferenceID, mode }: SellFieldPro
                 ["USDT", "USDC"].includes(tokenSellData.selectedCrypto) && (
                   <div className={styles.selected__two}>
                     <CustomSelect
-                      backgroundColor="#fff"
+                      backgroundColor="var(--no-set-color)"
+                      colorvalue="var(--primary-set-color)"
                       placeholder="Select"
                       options={networkOptions}
                       image={true}
@@ -536,16 +549,7 @@ const SellField = ({ apiKey, parameters, clientReferenceID, mode }: SellFieldPro
                 )}
             </div>
           </div>
-          {invalidAmount?.min && (
-            <p className={styles.errorMsg}>
-              Invalid, Min : {parseFloat(tokenSellData?.minAmount)?.toFixed(8)}
-            </p>
-          )}
-          {invalidAmount?.max && (
-            <p className={styles.errorMsg}>
-              Invalid, Max : {parseFloat(tokenSellData?.maxAmount)?.toString()}
-            </p>
-          )}
+         
           <div className={styles.offRampInfoBox}>
             <div className={`${styles.offRampLabelCard} ${styles.offRampSpace}`}>
               <div className={styles.offRampLabelIcons}>
@@ -555,6 +559,7 @@ const SellField = ({ apiKey, parameters, clientReferenceID, mode }: SellFieldPro
                   width="12"
                   height="12"
                   viewBox="0 0 300 300"
+                  fill="#fff"
                 >
                   <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"
@@ -581,28 +586,22 @@ const SellField = ({ apiKey, parameters, clientReferenceID, mode }: SellFieldPro
               <div className={styles.offRampDetails}>
                 <div className={styles.offRampHead}>Withdrawal Method</div>
                 <div className={styles.offPaymentBox}>
-                  <div className={`${styles.offPaymentCheckCard} ${styles.selected}`}>
-                    <input
-                      type="radio"
-                      name="radioDefault"
-                      id="radioDefault1"
-                      value="0.10234"
-                      className={styles.inputControl}
-                    />
+                  <div className={styles.offPaymentCheckCard}>
                     <div>Bank Transfer</div>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      width="20"
-                      height="20"
+                      width="18"
+                      height="18"
                       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"
+                          fill="#22BB33"
                         ></path>
                       </g>
                     </svg>
+                    
                   </div>
                 </div>
               </div>
@@ -634,9 +633,11 @@ const SellField = ({ apiKey, parameters, clientReferenceID, mode }: SellFieldPro
               <div className={styles.offRampFieldSelect}>
                 {fiatCurrencyOptions?.length > 0 ? (
                   <CustomSelect
-                    backgroundColor="#f3e2c3"
+                    backgroundColor="var(--primary-set-color)"
+                    colorvalue="var(--off-white)"
                     placeholder="Select"
                     borderColor="var(--no-color)"
+                    svgFill ="var(--off-white)"
                     image={true}
                     singleicons={true}
                     options={fiatCurrencyOptions}

package/src/components/WidgetBankDetails.tsx

@@ -400,6 +400,8 @@ const WidgetBankDetails = ({
                       placeholder={isFetchingBeneficiary ? "Loading..." : "Select Beneficiary"}
                       value={selectedBeneficiary}
                       isDisabled={beneficiaryOptions?.length <= 0}
+                        backgroundColor="var(--off-white-border)"
+                      colorvalue="var(--primary-set-color)"
                     />
                   </div>
                 </div>
@@ -440,7 +442,7 @@ const WidgetBankDetails = ({
                               <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={formState?.type === item.label ? "#F9C201" : "#efefef"}
+                                  fill={formState?.type === item.label ? "#22BB33" : "#efefef"}
                                 ></path>
                               </g>
                             </svg>
@@ -461,6 +463,8 @@ const WidgetBankDetails = ({
                     <div className={styles.offRampNewBankFields}>
                       <CustomSelect
                         options={bankOptions}
+                          backgroundColor="var(--off-white-border)"
+                      colorvalue="var(--primary-set-color)"
                         isClearable={true}
                         placeholder="Select Bank"
                         value={

package/src/components/WidgetComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import styles from "../assets/css/style.module.css";
 import WidgetContent from "./WidgetContent";
 import { ToastProvider } from "../hooks/toastProvider";
@@ -19,9 +19,6 @@ const WidgetComponent = ({
 }: WidgetComponentProps) => {
   return (
     <div style={{ position: "relative" }} className={styles.widgetComponent} id="widget-container">
-      <div className={`${styles.exchangeWidgetWrapped} ${styles.show}`}>
-        <div className={styles.exchangeWidgetModal}>
-          <div className={styles.exchangeWidgetContent}>
             <ToastProvider>
               <WidgetContent
                 sellParameters={sellParameters}
@@ -31,9 +28,6 @@ const WidgetComponent = ({
               />
             </ToastProvider>
           </div>
-        </div>
-      </div>
-    </div>
   );
 };
 

package/src/components/WidgetContent.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import SellField from "./SellField";
 import type { SellParamsType } from "./types";
-import styles from "../assets/css/style.module.css";
 
 type WidgetContentProps = {
   apiKey: string;
@@ -13,16 +12,12 @@ type WidgetContentProps = {
 const WidgetContent = ({ apiKey, sellParameters, clientReferenceID, mode }: WidgetContentProps) => {
   // const [activeTab, setActiveTab] = useState("sell");
   return (
-    <div className={styles.widegtTabsWrapped}>
-      <div className={styles.widegtTabsContent}>
         <SellField
           apiKey={apiKey}
           parameters={sellParameters}
           clientReferenceID={clientReferenceID}
           mode={mode}
         />
-      </div>
-    </div>
   );
 };
 

package/src/hooks/useSocketExchange.tsx

@@ -2,21 +2,32 @@
 import { useEffect, useRef } from "react";
 import { io } from "socket.io-client";
 
-const socketUrl = "https://woowga-node.herald.exchange:9001/";
+const getSocketUrl = (mode: string) => {
+  if (mode === "production") {
+    return "https://woowga-node.herald.exchange:9001/";
+  } else {
+    return "https://efi-exchange.blockstall.com:9001/";
+  }
+};
+
 let socket: any = null;
 let refCount = 0;
 
 export const useExchangeSocket = ({
   onConnectCallback,
   onDisconnectCallback,
+  mode,
 }: {
   onConnectCallback?: () => void;
   onDisconnectCallback?: () => void;
+  mode: string;
 }) => {
   const socketRef = useRef(null);
 
   useEffect(() => {
     refCount += 1;
+    const socketUrl = getSocketUrl(mode);
+
     if (!socket) {
       socket = io(socketUrl, {
         transports: ["websocket"],