herald-exchange-onramp_offramp-widget 1.0.0

package/src/components/WidgetContent.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import SellField from "./SellField";
+// import BuyField from "./BuyField";
+import NewBuyField from "./NewBuyField";
+import type { BuyParamsType, SellParamsType } from "./types";
+import styles from "../assets/css/style.module.css";
+
+type WidgetContentProps = {
+  defaultTab: string;
+  apiKey: string;
+  redirectUrl: string;
+  buyParameters: BuyParamsType;
+  sellParameters: SellParamsType;
+  clientReferenceID: string;
+  mode: string;
+};
+
+const WidgetContent = ({
+  defaultTab,
+  apiKey,
+  redirectUrl,
+  buyParameters,
+  sellParameters,
+  clientReferenceID,
+  mode,
+}: WidgetContentProps) => {
+  const [activeTab, setActiveTab] = useState(
+    ["buy", "sell"].includes(defaultTab) ? defaultTab : "buy"
+  );
+  return (
+    <div className={styles.tabs_wrapped}>
+      <div className={styles.tabs_link}>
+        <div className={styles.tabs_box}>
+          <button
+            className={`${activeTab === "buy" && styles.active_btn}`}
+            onClick={() => setActiveTab("buy")}
+          >
+            Buy Crypto
+          </button>
+          <button
+            className={`${activeTab === "sell" && styles.active_btn}`}
+            onClick={() => setActiveTab("sell")}
+          >
+            Sell Crypto
+          </button>
+        </div>
+      </div>
+      <div className={styles.tabs_content}>
+        {activeTab === "buy" && (
+          <NewBuyField
+            apiKey={apiKey}
+            redirectUrl={redirectUrl}
+            parameters={buyParameters}
+            clientReferenceID={clientReferenceID}
+            mode={mode}
+          />
+        )}
+        {activeTab === "sell" && (
+          <SellField
+            apiKey={apiKey}
+            parameters={sellParameters}
+            clientReferenceID={clientReferenceID}
+            mode={mode}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WidgetContent;

package/src/components/WidgetSuccesDetails.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import type { tokenSellDataType } from "./SellField";
+import styles from "../assets/css/style.module.css";
+
+const WidgetSuccesDetails = ({ tokenSellData }: { tokenSellData: tokenSellDataType }) => {
+  return (
+    <>
+      <div className={styles.details_frame}>
+        <div className={styles.f_details_head}>
+          <div></div>
+          <div className={styles.f_details_titles}>
+            Sell{" "}
+            {parseFloat(tokenSellData?.response?.offramp_transaction?.from_value || "0")?.toFixed(
+              4
+            )}{" "}
+            {tokenSellData?.response?.offramp_transaction?.from}{" "}
+            {tokenSellData?.response?.offramp_transaction?.network_type
+              ? `(${tokenSellData?.response?.offramp_transaction?.network_type})`
+              : ""}{" "}
+            @{" "}
+            {parseFloat(tokenSellData?.response?.offramp_transaction?.to_value || "0")?.toFixed(4)}{" "}
+            {tokenSellData?.response?.offramp_transaction?.to}
+          </div>
+        </div>
+        <div className={styles.f_details_info_box}>
+          <div className={styles.f_details_card}>
+            <span>Order Status</span>
+            <span className={styles.span_d_align}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <g id="Flat_Color" fill="#20bf55" data-name="Flat Color">
+                  <path d="M12 22.75a10.75 10.75 0 0 1 0-21.5 10.5 10.5 0 0 1 4.82 1.15.75.75 0 0 1-.68 1.34 9 9 0 0 0-4.14-1A9.25 9.25 0 1 0 21.25 12a2 2 0 0 0 0-.25.75.75 0 1 1 1.5-.14V12A10.76 10.76 0 0 1 12 22.75"></path>
+                  <path d="M11.82 15.41a.7.7 0 0 1-.52-.22l-4.83-4.74a.75.75 0 0 1 0-1.06.77.77 0 0 1 1.07 0l4.29 4.23 9.65-9.49a.77.77 0 0 1 1.07 0 .75.75 0 0 1 0 1.06l-10.18 10a.74.74 0 0 1-.55.22"></path>
+                </g>
+              </svg>
+              {tokenSellData?.response?.offramp_transaction?.status}
+            </span>
+          </div>
+          <div className={styles.f_details_card}>
+            <span>Transaction Hash</span>
+            <span className={styles.span_d_align}>
+              <a
+                href={tokenSellData?.response?.offramp_transaction?.explorer_url}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {tokenSellData?.response?.offramp_transaction?.transaction_hash?.slice(0, 10)}...
+                {tokenSellData?.response?.offramp_transaction?.transaction_hash?.slice(
+                  tokenSellData?.response?.offramp_transaction?.transaction_hash?.length - 10,
+                  tokenSellData?.response?.offramp_transaction?.transaction_hash?.length
+                )}
+              </a>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="#F9C201"
+                className="size-6"
+                style={{ cursor: "pointer" }}
+                fill="none"
+                width="24"
+                height="24"
+                onClick={async () => {
+                  window.open(tokenSellData?.response?.offramp_transaction?.explorer_url, "_blank");
+                }}
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
+                />
+              </svg>
+            </span>
+          </div>
+          <div className={styles.f_details_card}>
+            <span>Order Date</span>
+            <span>
+              {" "}
+              {new Date(tokenSellData?.response?.offramp_transaction?.created_at || "")
+                .toUTCString()
+                .replace("GMT", "UTC")}
+            </span>
+          </div>
+          <div className={styles.f_details_card}>
+            <span>Exchange Rate</span>
+            <span>
+              1 {tokenSellData?.response?.offramp_transaction?.from} ={" "}
+              {parseFloat(
+                tokenSellData?.response?.offramp_transaction?.exchange_rate || ""
+              )?.toFixed(4)}{" "}
+              {tokenSellData?.response?.offramp_transaction?.to}
+            </span>
+          </div>
+          <div className={styles.f_details_card}>
+            <span>Network</span>
+            <span>{tokenSellData?.response?.offramp_transaction?.network_type}</span>
+          </div>
+
+          <div className={styles.f_details_card}>
+            <span>Bank Details</span>
+            <span>
+              {tokenSellData?.response?.offramp_transaction?.bank_account_transaction?.bank_account
+                ?.bank_account?.account_number ||
+                tokenSellData?.response?.offramp_transaction?.bank_account_transaction?.bank_account
+                  ?.bank_account?.iban}
+            </span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default WidgetSuccesDetails;

package/src/components/api.ts

@@ -0,0 +1,59 @@
+type ApiCallProps = {
+  url: string;
+  body?: any;
+  headers?: any;
+  method?: string;
+  onError?: any;
+  onSuccess?: any;
+};
+
+interface RequestInit {
+  method?: string;
+  headers?: HeadersInit;
+  body?: BodyInit | null;
+  mode?: RequestMode;
+  credentials?: RequestCredentials;
+  cache?: RequestCache;
+  redirect?: RequestRedirect;
+  referrer?: string;
+  referrerPolicy?: ReferrerPolicy;
+  integrity?: string;
+  keepalive?: boolean;
+  signal?: AbortSignal | null;
+  window?: any;
+}
+
+export const handleApiCall = async ({
+  url,
+  body,
+  headers,
+  method,
+  onError,
+  onSuccess,
+}: ApiCallProps) => {
+  try {
+    let apiParam: RequestInit = {
+      method: method || "GET",
+    };
+
+    if (headers) {
+      apiParam = { ...apiParam, headers };
+    }
+
+    if (body) {
+      apiParam = {
+        ...apiParam,
+        body,
+      };
+    }
+
+    const response = await fetch(url, apiParam);
+
+    const result = await response?.json();
+
+    return onSuccess(result);
+  } catch (error: any) {
+    console.error(error);
+    return onError(error);
+  }
+};

package/src/components/chains.ts

@@ -0,0 +1,319 @@
+let SupportedTokens: any,
+  SOL_SPL_CONTRACT_ADDRESS: any,
+  SPECIAL_CONTRACT_ADDRESS: any,
+  SUPPORTED_RPC_NODES: any,
+  SupportedChainId: any;
+
+if (process.env.NODE_ENV != "production") {
+  SupportedChainId = {
+    ETHEREUM: 11155111,
+    MATIC: 84432,
+    BINANCE: 97,
+    BITCOIN: 10001,
+    AVAX: 43113,
+    SOLANA: 102,
+    RIPPLE: 2,
+    POLYGON_AMOY: 84432,
+    NILE: 3,
+    TRX: 1,
+  };
+
+  SupportedTokens = {
+    BNB: 97,
+    BUSD: 97,
+    ETH: 11155111,
+    USDT: 11155111,
+    BITCOIN: 10001,
+    AVAX: 43113,
+    MATIC: 84432,
+    SOL: 102,
+    XRP: 2,
+    POLYGON_AMOY: 84432,
+    NILE: 3,
+    TRX: 1,
+  };
+
+  SUPPORTED_RPC_NODES = {
+    [SupportedChainId.ETHEREUM]: "https://api-sepolia.etherscan.io",
+    [SupportedChainId.MATIC]: "https://api-amoy.polygonscan.com",
+    [SupportedChainId.BINANCE]: "https://api-testnet.bscscan.com",
+    [SupportedChainId.SOLANA]: "https://api.devnet.solana.com",
+    [SupportedChainId.POLYGON_AMOY]: "https://api-amoy.polygonscan.com",
+    [SupportedChainId.NILE]: "https://nile.trongrid.io",
+    [SupportedChainId.TRX]: "https://api.shasta.trongrid.io",
+  };
+
+  SOL_SPL_CONTRACT_ADDRESS = {
+    USDC: "Gh9ZwEmdLJ8DscKNTkTqPbNwLNNBjuSzaG9Vp2KGtKJr",
+    USDT: "Gh9ZwEmdLJ8DscKNTkTqPbNwLNNBjuSzaG9Vp2KGtKJr",
+  };
+
+  SPECIAL_CONTRACT_ADDRESS = {
+    ETH: {
+      USDC: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
+      // USDT: "0xA1d7f71cbBb361A77820279958BAC38fC3667c1a",
+      USDT: "0x7169D38820dfd117C3FA1f22a697dBA58d90BA06",
+      LINK: "0xb227f007804c16546Bd054dfED2E7A1fD5437678",
+      MATIC: "0x8D38d6Ffa17FFD6dA49D4b53B6f0DFc8D291E867",
+    },
+    MATIC: {
+      USDC: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+      USDT: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+      DAI: "0xb2df85a09cAB3a391Fd9ade76342583A0d4B75ce",
+    },
+    POLYGON_AMOY: {
+      USDC: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+      USDT: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+      DAI: "0xb2df85a09cAB3a391Fd9ade76342583A0d4B75ce",
+    },
+    BNB: {
+      USDT: "0x337610d27c682E347C9cD60BD4b3b107C9d34dDd",
+      USDC: "0xfbe87897c07Cc64b6FFc04257672854b90e5B17b",
+    },
+    SHASTA: {
+      USDT: "TG3XXyExBkPp9nzdajDZsozEu4BkaSJozs",
+      USDC: "TSdZwNqpHofzP6BsBKGQUWdBeJphLmF6id",
+    },
+    TRX: {
+      USDT: "TG3XXyExBkPp9nzdajDZsozEu4BkaSJozs",
+      USDC: "TSdZwNqpHofzP6BsBKGQUWdBeJphLmF6id",
+    },
+  };
+} else {
+  SupportedChainId = {
+    ETHEREUM: 1,
+    POLYGON: 137,
+    BINANCE: 56,
+    BITCOIN: 10001, // Not sure to use this chain
+    AVAX: 43113,
+    SOLANA: 101,
+    TRX: 1,
+  };
+
+  SupportedTokens = {
+    BNB: 56,
+    ETH: 1,
+    USDT: 1,
+    BITCOIN: 10001, // Not sure to use this chain
+    AVAX: 43113,
+    MATIC: 137,
+    SOL: 101,
+    TRX: 1,
+  };
+
+  SUPPORTED_RPC_NODES = {
+    [SupportedChainId.ETHEREUM]: "https://api.etherscan.io",
+    [SupportedChainId.MATIC]: "https://api.polygonscan.com",
+    [SupportedChainId.BINANCE]: "https://api.bscscan.com",
+    [SupportedChainId.SOLANA]: "https://api.mainnet-beta.solana.com",
+    [SupportedChainId.POLYGON_AMOY]: "https://api.polygonscan.com",
+    [SupportedChainId.TRX]: "https://api.trongrid.io",
+  };
+}
+
+export {
+  SupportedChainId,
+  SupportedTokens,
+  SPECIAL_CONTRACT_ADDRESS,
+  SOL_SPL_CONTRACT_ADDRESS,
+  SUPPORTED_RPC_NODES,
+};
+
+export function getSupportedTokens({ mode, token }: { mode: string; token: string }) {
+  let SupportedTokens: any, SUPPORTED_RPC_NODES: any, SupportedChainId: any;
+
+  if (mode === "development") {
+    SupportedChainId = {
+      ETHEREUM: 11155111,
+      MATIC: 84432,
+      BINANCE: 97,
+      BITCOIN: 10001,
+      AVAX: 43113,
+      SOLANA: 102,
+      RIPPLE: 2,
+      POLYGON_AMOY: 84432,
+      NILE: 3,
+      TRX: 1,
+    };
+
+    SupportedTokens = {
+      BNB: 97,
+      BUSD: 97,
+      ETH: 11155111,
+      USDT: 11155111,
+      BITCOIN: 10001,
+      AVAX: 43113,
+      MATIC: 84432,
+      SOL: 102,
+      XRP: 2,
+      POLYGON_AMOY: 84432,
+      NILE: 3,
+      TRX: 1,
+    };
+
+    SUPPORTED_RPC_NODES = {
+      [SupportedChainId.ETHEREUM]: "https://api-sepolia.etherscan.io",
+      [SupportedChainId.MATIC]: "https://api-amoy.polygonscan.com",
+      [SupportedChainId.BINANCE]: "https://api-testnet.bscscan.com",
+      [SupportedChainId.SOLANA]: "https://api.devnet.solana.com",
+      [SupportedChainId.POLYGON_AMOY]: "https://api-amoy.polygonscan.com",
+      [SupportedChainId.NILE]: "https://nile.trongrid.io",
+      [SupportedChainId.TRX]: "https://api.shasta.trongrid.io",
+    };
+
+    SOL_SPL_CONTRACT_ADDRESS = {
+      USDC: "Gh9ZwEmdLJ8DscKNTkTqPbNwLNNBjuSzaG9Vp2KGtKJr",
+      USDT: "Gh9ZwEmdLJ8DscKNTkTqPbNwLNNBjuSzaG9Vp2KGtKJr",
+    };
+
+    SPECIAL_CONTRACT_ADDRESS = {
+      ETH: {
+        USDC: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
+        // USDT: "0xA1d7f71cbBb361A77820279958BAC38fC3667c1a",
+        USDT: "0x7169D38820dfd117C3FA1f22a697dBA58d90BA06",
+        LINK: "0xb227f007804c16546Bd054dfED2E7A1fD5437678",
+        MATIC: "0x8D38d6Ffa17FFD6dA49D4b53B6f0DFc8D291E867",
+      },
+      MATIC: {
+        USDC: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+        USDT: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+        DAI: "0xb2df85a09cAB3a391Fd9ade76342583A0d4B75ce",
+      },
+      POLYGON_AMOY: {
+        USDC: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+        USDT: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+        DAI: "0xb2df85a09cAB3a391Fd9ade76342583A0d4B75ce",
+      },
+      BNB: {
+        USDT: "0x337610d27c682E347C9cD60BD4b3b107C9d34dDd",
+        USDC: "0xfbe87897c07Cc64b6FFc04257672854b90e5B17b",
+      },
+      SHASTA: {
+        USDT: "TG3XXyExBkPp9nzdajDZsozEu4BkaSJozs",
+        USDC: "TSdZwNqpHofzP6BsBKGQUWdBeJphLmF6id",
+      },
+      TRX: {
+        USDT: "TG3XXyExBkPp9nzdajDZsozEu4BkaSJozs",
+        USDC: "TSdZwNqpHofzP6BsBKGQUWdBeJphLmF6id",
+      },
+    };
+  } else {
+    SupportedChainId = {
+      ETHEREUM: 1,
+      POLYGON: 137,
+      BINANCE: 56,
+      BITCOIN: 10001, // Not sure to use this chain
+      AVAX: 43113,
+      SOLANA: 101,
+      TRX: 2,
+    };
+
+    SupportedTokens = {
+      BNB: 56,
+      ETH: 1,
+      BITCOIN: 10001, // Not sure to use this chain
+      AVAX: 43113,
+      MATIC: 137,
+      SOL: 101,
+      TRX: 2,
+    };
+
+    SUPPORTED_RPC_NODES = {
+      [SupportedChainId.ETHEREUM]: "https://api.etherscan.io",
+      [SupportedChainId.MATIC]: "https://api.polygonscan.com",
+      [SupportedChainId.BINANCE]: "https://api.bscscan.com",
+      [SupportedChainId.SOLANA]: "https://api.mainnet-beta.solana.com",
+      [SupportedChainId.POLYGON_AMOY]: "https://api.polygonscan.com",
+      [SupportedChainId.TRX]: "https://api.trongrid.io",
+    };
+  }
+
+  return SUPPORTED_RPC_NODES[SupportedTokens[token]];
+}
+
+export function getContactAddress({
+  mode,
+  token,
+  networkType,
+}: {
+  mode: string;
+  token: string;
+  networkType: string;
+}) {
+  let SOL_SPL_CONTRACT_ADDRESS: any, SPECIAL_CONTRACT_ADDRESS: any;
+
+  if (mode === "development") {
+    SOL_SPL_CONTRACT_ADDRESS = {
+      USDC: "Gh9ZwEmdLJ8DscKNTkTqPbNwLNNBjuSzaG9Vp2KGtKJr",
+      USDT: "Gh9ZwEmdLJ8DscKNTkTqPbNwLNNBjuSzaG9Vp2KGtKJr",
+    };
+
+    SPECIAL_CONTRACT_ADDRESS = {
+      ETH: {
+        USDC: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
+        // USDT: "0xA1d7f71cbBb361A77820279958BAC38fC3667c1a",
+        USDT: "0x7169D38820dfd117C3FA1f22a697dBA58d90BA06",
+        LINK: "0xb227f007804c16546Bd054dfED2E7A1fD5437678",
+        MATIC: "0x8D38d6Ffa17FFD6dA49D4b53B6f0DFc8D291E867",
+      },
+      MATIC: {
+        USDC: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+        USDT: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+        DAI: "0xb2df85a09cAB3a391Fd9ade76342583A0d4B75ce",
+      },
+      POLYGON_AMOY: {
+        USDC: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+        USDT: "0x702207d9c124c86c85A97222Cde98476f987ddaE",
+        DAI: "0xb2df85a09cAB3a391Fd9ade76342583A0d4B75ce",
+      },
+      BNB: {
+        USDT: "0x337610d27c682E347C9cD60BD4b3b107C9d34dDd",
+        USDC: "0xfbe87897c07Cc64b6FFc04257672854b90e5B17b",
+      },
+      SHASTA: {
+        USDT: "TG3XXyExBkPp9nzdajDZsozEu4BkaSJozs",
+        USDC: "TSdZwNqpHofzP6BsBKGQUWdBeJphLmF6id",
+      },
+      TRX: {
+        USDT: "TG3XXyExBkPp9nzdajDZsozEu4BkaSJozs",
+        USDC: "TSdZwNqpHofzP6BsBKGQUWdBeJphLmF6id",
+      },
+    };
+  } else {
+    SOL_SPL_CONTRACT_ADDRESS = {
+      USDC: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
+      USDT: "Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB",
+    };
+
+    SPECIAL_CONTRACT_ADDRESS = {
+      ETH: {
+        USDC: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+        USDT: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
+      },
+      MATIC: {
+        USDC: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
+        USDT: "0xc2132D05D31c914a87C6611C10748AEb04B58e8F",
+      },
+      POLYGON: {
+        USDC: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
+        USDT: "0xc2132D05D31c914a87C6611C10748AEb04B58e8F",
+      },
+      POLYGON_AMOY: {
+        USDC: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
+        USDT: "0xc2132D05D31c914a87C6611C10748AEb04B58e8F",
+      },
+      BNB: {
+        USDT: "0x55d398326f99059fF775485246999027B3197955",
+        USDC: "0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d",
+      },
+      TRX: {
+        USDT: "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t",
+        USDC: "TLZSucJRjnqBKwvQz6n5hd29gbS4P7u7w8",
+      },
+    };
+  }
+
+  return networkType === "SOL"
+    ? SOL_SPL_CONTRACT_ADDRESS[token]
+    : SPECIAL_CONTRACT_ADDRESS[networkType][token] || "";
+}

package/src/components/images.d.ts

@@ -0,0 +1,5 @@
+// src/images.d.ts or src/custom.d.ts
+declare module "*.png" {
+  const value: string;
+  export default value;
+}

package/src/components/loader.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "../assets/css/style.module.css";
+const Loader = () => {
+  return <div className={styles.preloading_sec}></div>;
+};
+
+export default Loader;
+
+/* HTML: <div class="loader"></div> */
+/* HTML: <div class="loader"></div> */
+
+export const Spinner = ({ size }: { size?: number }) => {
+  return <div className={styles.spinnerLoader} style={{ width: size ? size : 12 }}></div>;
+};

package/src/components/style.module.css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/components/toast.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef } from "react";
+import styles from "../assets/css/style.module.css";
+
+type ToastProps = {
+  message: string;
+  toastType?: string;
+  imageSrc?: string;
+  onClose?: () => void;
+};
+const Toast = ({ message, toastType = "Info", imageSrc, onClose }: ToastProps) => {
+  const toastRef = useRef(null);
+
+  useEffect(() => {
+    if (toastRef.current) {
+      const timer = setTimeout(() => {
+        onClose?.();
+      }, 3100);
+
+      return () => clearTimeout(timer);
+    }
+  }, [onClose]);
+
+  //   / data-bs-config='{"hide": "150"}'
+  return (
+    <div
+      ref={toastRef}
+      className={`${styles.toast_container} ${styles.position_fixed} ${styles.bottom_0} ${styles.end_0} ${styles.p_3}`}
+    >
+      <div
+        id="liveToast"
+        className={styles.toast}
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div className={styles.toast_header}>
+          <strong className="me-auto">{toastType}</strong>
+          <button
+            type="button"
+            data-bs-dismiss="toast"
+            aria-label="Close"
+            onClick={onClose}
+          ></button>
+        </div>
+        <div className={styles.toast_body}>{message}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Toast;