herald-exchange-glide-widget 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "herald-exchange-glide-widget",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -55,4 +55,4 @@
     "stream": false,
     "crypto": false
   }
-}
+}

package/rollup.config-1750247216339.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var commonjs = require('@rollup/plugin-commonjs');
+var resolve = require('@rollup/plugin-node-resolve');
+var terser = require('@rollup/plugin-terser');
+var typescript = require('@rollup/plugin-typescript');
+var PeerDepsExternal = require('rollup-plugin-peer-deps-external');
+var dts = require('rollup-plugin-dts');
+var postcss = require('rollup-plugin-postcss');
+var babel = require('@rollup/plugin-babel');
+var url = require('@rollup/plugin-url');
+var inject = require('@rollup/plugin-inject');
+var strip = require('rollup-plugin-strip');
+
+const packageJSON = require("./package.json");
+
+var rollup_config = [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJSON.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJSON.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      PeerDepsExternal(),
+      resolve({
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+        browser: true,
+        preferBuiltins: false,
+      }),
+      commonjs(),
+      inject({
+        Buffer: ["buffer", "Buffer"], // 👈 Inject Buffer globally
+      }),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      postcss({
+        modules: {
+          generateScopedName: "glide_[name]__[local]___[hash:base64:5]",
+        },
+        inject: true, // 👈 This ensures CSS is injected via <style> tag at runtime
+        extract: false, // 👈 Don't extract a separate .css file
+        minimize: true,
+        sourceMap: true,
+      }),
+      strip({
+        include: "**/*.(js|ts|tsx)",
+        functions: ["console.*", "assert.*"], // remove all console.* calls & assert.*
+      }),
+      babel({
+        babelHelpers: "bundled",
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+        presets: ["@babel/preset-react", "@babel/preset-typescript"],
+        exclude: "node_modules/**",
+      }),
+      url({
+        include: ["**/*.svg", "**/*.png", "**/*.jpg", "**/*.gif"],
+        limit: 8192, // Inline files < 8kb, emit files for larger ones
+        emitFiles: true,
+        fileName: "[name][hash][extname]",
+      }),
+    ],
+    external: [
+      "react",
+      "react-dom",
+      "fs",
+      "url",
+      "http",
+      "https",
+      "stream",
+      "crypto",
+      "child_process",
+      "zlib",
+      "net",
+      "tls",
+    ],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: packageJSON.types }],
+    plugins: [dts.default()],
+    external: [/\.css/],
+  },
+];
+
+exports.default = rollup_config;

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

@@ -22,7 +22,7 @@
 }
 
 :root {
-  --primary-color-des: #8b5cf6;
+  --primary-color-des: #000;
   --fade-color-des: #ffffff;
   --hightlight-color-des: #000;
   --gray-color-des: #6b7178;
@@ -229,8 +229,11 @@ button:disabled {
   display: block;
   min-width: 600px;
   max-width: 600px;
-  min-height: 600px;
+  min-height: 550px;
   overflow: auto;
+  background: #f6f3ef;
+  padding: 2em;
+  border-radius: 12px;
 
 }
 
@@ -393,7 +396,7 @@ button:disabled {
 
 .gilde_field_select_card {
   width: 50%;
-  background-color: #e6dcff;
+  background-color: #efefef;
   padding: 1em;
   border-bottom-right-radius: 10px;
   border-top-right-radius: 10px;
@@ -407,7 +410,7 @@ button:disabled {
   height: 2em;
   display: grid;
   place-items: center;
-  background-color: #f8f9fa;
+  background-color: #fff;
   border-radius: 50%;
   font-weight: 700;
   font-size: 1.2em;
@@ -441,7 +444,7 @@ button:disabled {
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: #f8f9fa;
+  background-color: #fff;
   margin-left: 10px;
 }
 
@@ -481,8 +484,8 @@ button:disabled {
 }
 
 .gilde_payment_check_card.selected {
-  border-color: var(--primary-color-des);
-  background-color: #fcfaff;
+  /* border-color: var(--primary-color-des); */
+  background-color: #fff;
   color: var(--primary-color-des);
 }
 
@@ -501,7 +504,7 @@ button:disabled {
   width: 2px;
   height: 100%;
   top: 0;
-  background: #ffffff73;
+  background: #fff;
   left: 16px;
   z-index: -1;
 }
@@ -576,7 +579,7 @@ button:disabled {
   display: grid;
   grid-template-columns: 40px auto;
   align-items: center;
-  background: #ffffff47;
+  background: #efefef;
 }
 
 .caution_info {
@@ -833,7 +836,7 @@ button:disabled {
   }
 }
 .sell_wallet_address_card {
-  background: var(--gray-overlay-des);
+  background: #fff;
   padding: 1.5em;
   border-radius: 10px;
   margin-bottom: 1.5em;

package/src/components/SellAdminCryptoAccount.tsx

@@ -208,7 +208,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);
           }
@@ -304,12 +310,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 });
 
@@ -324,13 +337,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;
@@ -353,7 +366,7 @@ const SellAdminCryptoAccount = ({
         token,
         startTimestamp,
         contract_address,
-        expectedAmount
+        expected_amount
       );
     } catch (error) {
       console.error("Error fetching token transactions:", error);
@@ -414,7 +427,6 @@ const SellAdminCryptoAccount = ({
   //   setMonitoring(false);
   //   setAutomaticHash(false);
   // };
-
   return (
     <>
       <div className={css.sell_payment_details_wrap}>

package/src/components/SellField.tsx

@@ -44,7 +44,7 @@ export type tokenSellDataType = {
 // Sell Crypto and receive Fiat
 const SellField = ({ apiKey, parameters, clientReferenceID, css, mode }: SellFieldProps) => {
   const { addToast } = useToast(); // to show toast
-  const exchangeSocket: any = useExchangeSocket({}); // socket connevction to fetch exchange rate
+  const exchangeSocket: any = useExchangeSocket({ mode }); // socket connevction to fetch exchange rate
 
   const [step, setStep] = useState(1); // used to render components
 
@@ -494,7 +494,7 @@ const SellField = ({ apiKey, parameters, clientReferenceID, css, mode }: SellFie
               <div className={css.gilde_field_select}>
                 {cryptoCurrencyOptions?.length > 0 ? (
                   <CustomSelect
-                    backgroundColor="#DECFFF"
+                    backgroundColor="#fff"
                     placeholder="Select"
                     image={true}
                     singleicons={true}
@@ -626,7 +626,7 @@ const SellField = ({ apiKey, parameters, clientReferenceID, css, mode }: SellFie
               <div className={css.gilde_field_select}>
                 {fiatCurrencyOptions?.length > 0 ? (
                   <CustomSelect
-                    backgroundColor="#DECFFF"
+                    backgroundColor="#fff"
                     placeholder="Select"
                     borderColor="var(--no-color)"
                     image={true}

package/src/components/WidgetComponent.tsx

@@ -20,9 +20,6 @@ const WidgetComponent = ({
 }: WidgetComponentProps) => {
   return (
     <div style={{ position: "relative" }} className={css.widget_component} id="widget-container">
-      <div className={css.gilde_widget_wrapped}>
-        <div className={css.gilde_widget_modal}>
-          <div className={css.gilde_widget_content}>
             <ToastProvider>
               <WidgetContent
                 sellParameters={sellParameters}
@@ -33,9 +30,6 @@ const WidgetComponent = ({
               />
             </ToastProvider>
           </div>
-        </div>
-      </div>
-    </div>
   );
 };
 

package/src/components/WidgetContent.tsx

@@ -19,8 +19,6 @@ const WidgetContent = ({
 }: WidgetContentProps) => {
   // const [activeTab, setActiveTab] = useState("sell");
   return (
-    <div className={css.gilde_tabs_wrapped}>
-      <div className={css.gilde_tabs_content}>
         <SellField
           apiKey={apiKey}
           parameters={sellParameters}
@@ -28,8 +26,6 @@ const WidgetContent = ({
           css={css}
           mode={mode}
         />
-      </div>
-    </div>
   );
 };
 

package/src/components/WidgetSuccesDetails.tsx

@@ -111,10 +111,6 @@ const WidgetSuccesDetails = ({
           </div>
         </div>
       </div>{" "}
-      {
-        tokenSellData?.response?.offramp_transaction?.bank_account_transaction?.bank_account
-          ?.bank_account?.account_number
-      }
     </>
   );
 };

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"],