herald-exchange-onramp_offramp-widget 1.0.0

package/src/components/CommonCenterLoader.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import styles from "../assets/css/style.module.css";
+
+const CommonCenterLoader = () => (
+  <div className={styles.text_center}>
+    {/* <img style={{ width: "5em", height: "5em" }} src={window.location.origin + "/images/small-loader.svg"} /> */}
+    <svg
+      style={{
+        margin: "auto",
+        background: "none",
+        display: "block",
+        shapeRendering: "auto",
+        width: "5em",
+        height: "5em",
+      }}
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+    >
+      <circle
+        cx="50"
+        cy="50"
+        r="29"
+        stroke-width="5"
+        stroke="#333333"
+        stroke-dasharray="45.553093477052 45.553093477052"
+        fill="none"
+        stroke-linecap="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          dur="1.25s"
+          repeatCount="indefinite"
+          keyTimes="0;1"
+          values="0 50 50;360 50 50"
+        ></animateTransform>
+      </circle>
+      <circle
+        cx="50"
+        cy="50"
+        r="23"
+        stroke-width="5"
+        stroke="#555555"
+        stroke-dasharray="36.12831551628262 36.12831551628262"
+        stroke-dashoffset="36.12831551628262"
+        fill="none"
+        stroke-linecap="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          dur="1.25s"
+          repeatCount="indefinite"
+          keyTimes="0;1"
+          values="0 50 50;-360 50 50"
+        ></animateTransform>
+      </circle>
+    </svg>
+  </div>
+);
+
+export const ButtonLoader = () => (
+  <div className={styles.text_center}>
+    <svg
+      style={{
+        margin: "auto",
+        background: "none",
+        display: "block",
+        shapeRendering: "auto",
+        width: "2.3em",
+        height: "2.3em",
+      }}
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+    >
+      <circle
+        cx="50"
+        cy="50"
+        r="29"
+        stroke-width="5"
+        stroke="#333333"
+        stroke-dasharray="45.553093477052 45.553093477052"
+        fill="none"
+        stroke-linecap="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          dur="1.25s"
+          repeatCount="indefinite"
+          keyTimes="0;1"
+          values="0 50 50;360 50 50"
+        ></animateTransform>
+      </circle>
+      <circle
+        cx="50"
+        cy="50"
+        r="23"
+        stroke-width="5"
+        stroke="#555555"
+        stroke-dasharray="36.12831551628262 36.12831551628262"
+        stroke-dashoffset="36.12831551628262"
+        fill="none"
+        stroke-linecap="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          dur="1.25s"
+          repeatCount="indefinite"
+          keyTimes="0;1"
+          values="0 50 50;-360 50 50"
+        ></animateTransform>
+      </circle>
+    </svg>
+  </div>
+);
+
+export default CommonCenterLoader;

package/src/components/CustomeSelect.tsx

@@ -0,0 +1,180 @@
+import React from "react";
+import Select, { components } from "react-select";
+import MgIcon from "../assets/icons-one.png";
+import type { CustomOption } from "./types";
+import styles from "../assets/css/style.module.css";
+
+// 👇 Define props for the component
+interface CustomSelectProps {
+  placeholder?: string;
+  value?: CustomOption | null;
+  backgroundColor?: string;
+  borderColor?: string;
+  color?: string;
+  svgFill?: string;
+  image?: boolean;
+  singleicons?: boolean;
+  options: CustomOption[];
+  onChange?: (selected: CustomOption | null) => void;
+  isClearable?: boolean;
+  isDisabled?: boolean;
+  isSearchable?: boolean;
+  onBlur?: () => void;
+  onKeyDown?: React.KeyboardEventHandler;
+  onInputChange?: (inputValue: string, meta: { action: string }) => void;
+}
+
+// 👇 Main Component
+const CustomSelect: React.FC<CustomSelectProps> = ({
+  placeholder,
+  value,
+  backgroundColor = "#fff",
+  borderColor = "var(--no-color)",
+  color = "#000",
+  svgFill = "#333",
+  image,
+  singleicons,
+  options,
+  onChange,
+  isClearable,
+  isDisabled,
+  isSearchable,
+  onBlur,
+  onKeyDown,
+  onInputChange,
+}) => {
+  const customStyles = {
+    menuPortal: (provided: any) => ({ ...provided, zIndex: 9999 }),
+    menu: (provided: any) => ({
+      ...provided,
+      zIndex: 9999,
+      left: "0px",
+      borderRadius: "4px",
+      overflow: "hidden",
+    }),
+    menuList: (provided: any) => ({
+      ...provided,
+      padding: 0,
+      minWidth: 250,
+      fontSize: "0.95em",
+      "&::-webkit-scrollbar-track": {
+        boxShadow: "inset 0 0 6px rgba(0,0,0,0.3)",
+        borderRadius: "3px",
+        backgroundColor: "#fff",
+      },
+      "&::-webkit-scrollbar": {
+        width: "4px",
+        backgroundColor: "#fff",
+      },
+      "&::-webkit-scrollbar-thumb": {
+        borderRadius: "3px",
+        boxShadow: "inset 0 0 6px rgba(0, 0, 0, .3)",
+        backgroundColor: "#555",
+      },
+    }),
+    container: (provided: any) => ({ ...provided, width: "auto" }),
+    control: (provided: any) => ({
+      ...provided,
+      padding: 0,
+      backgroundColor: backgroundColor,
+      border: `1px solid ${borderColor}!important`,
+      borderRadius: "8px!important",
+      boxShadow: "none!important",
+      height: "42px",
+      display: "flex",
+      alignItems: "center",
+      alignItemsContent: "center",
+      cursor: "pointer",
+      fontSize: "0.85em",
+    }),
+    placeholder: (provided: any) => ({
+      ...provided,
+      color: color,
+      fontSize: "1.2em",
+      fontWeight: "600",
+    }),
+    singleValue: (provided: any) => ({
+      ...provided,
+      color: "#000",
+      display: "flex",
+      alignItems: "center",
+      gap: "1em",
+      fontSize: "1.2em",
+      fontWeight: "600",
+    }),
+    indicatorContainer: (provided: any) => ({
+      ...provided,
+      color: "#000!important",
+    }),
+    indicatorSeparator: (base: any) => ({
+      ...base,
+      display: "none",
+    }),
+    dropdownIndicator: (provided: any) => ({
+      ...provided,
+      svg: {
+        fill: svgFill,
+        stroke: "#333",
+      },
+    }),
+    option: (provided: any, state: any) => ({
+      ...provided,
+      display: "flex",
+      alignItems: "center",
+      gap: "1em",
+      backgroundColor: state.isSelected ? "#F9C201" : state.isFocused ? "#f0f0f0" : "transparent",
+      color: state.isSelected || state.isFocused ? "#000" : "#000",
+      ":hover": {
+        backgroundColor: "#f0f0f0",
+        color: "#000",
+      },
+    }),
+  };
+
+  const Option = (props: any) => {
+    return (
+      <components.Option {...props} className={styles.ramp_option}>
+        {image && (
+          <img src={props.data.icon || MgIcon} alt="logo" className={styles.ramp_modal_img} />
+        )}
+        {props.data.label}
+      </components.Option>
+    );
+  };
+
+  // 👇 Custom SingleValue Component
+  const SingleValue = (props: any) => {
+    return (
+      <components.SingleValue {...props}>
+        {singleicons && (
+          <img
+            src={props.data.icon || window.location.origin + "/img/icons-one.png"}
+            alt="s-logo"
+            className={styles.ramp_modal_img}
+          />
+        )}
+        {props.children}
+      </components.SingleValue>
+    );
+  };
+
+  return (
+    <Select
+      value={value}
+      options={options}
+      styles={customStyles}
+      placeholder={placeholder || "Select an option"}
+      isClearable={isClearable}
+      isSearchable={isSearchable}
+      onChange={onChange}
+      components={{ Option, SingleValue }}
+      onBlur={onBlur}
+      isDisabled={isDisabled}
+      onKeyDown={onKeyDown}
+      onInputChange={onInputChange}
+      // menuPortalTarget={document.body}
+    />
+  );
+};
+
+export default CustomSelect;

package/src/components/DotLoader.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "../assets/css/style.module.css";
+
+const DotLoader = ({ size }: { size?: number }) => {
+  return <div style={{ width: size ? size : 20 }} className={styles.dot_loader}></div>;
+};
+
+export default DotLoader;