herald-exchange-glide-widget 1.0.0

package/src/assets/swap.svg

@@ -0,0 +1,8 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" y="61" width="52" height="52" rx="26" transform="rotate(-90 9 61)" fill="white"/>
+<rect x="4.715" y="65.285" width="60.57" height="60.57" rx="30.285" transform="rotate(-90 4.715 65.285)" stroke="black" stroke-opacity="0.05" stroke-width="8.57"/>
+<path d="M33.5609 30.097L30.1066 26.6428L26.6523 30.097" stroke="black" stroke-width="1.85714" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.1074 43.3571V26.6428" stroke="black" stroke-width="1.85714" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36.4375 39.9028L39.8918 43.3571L43.3461 39.9028" stroke="black" stroke-width="1.85714" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.8926 26.6428V43.3571" stroke="black" stroke-width="1.85714" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/ButtonStepper.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from "react";
+
+const ButtonStepper = ({ props, monitoring,css }: { props: any; monitoring: boolean; css: any }) => {
+  const [completed, setCompleted] = useState(false);
+  const [processing, setProcessing] = useState(false);
+
+  useEffect(() => {
+    if (props?.data && Object.keys(props?.data)?.length > 0) {
+      setCompleted(true);
+    }
+  }, [props]);
+
+  useEffect(() => {
+    setProcessing(monitoring);
+  }, [monitoring]);
+
+  useEffect(() => {
+    return () => {
+      setCompleted(false);
+    };
+  }, []);
+
+  return (
+    <>
+      <div className={css.flow_stepper_wrap}>
+        <div className={css.flow_stepper_frame}>
+          <ul className="list-unstyled">
+            <li className={`${!processing ? css.completed : ""}`}>
+              <div className={css.flow_stepper_card}>
+                <div className={css.flow_stepper_process}>
+                  {!processing ? (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      enableBackground="new 0 0 512 512"
+                      viewBox="0 0 20 20"
+                      fill="#fff"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                        data-original="#000000"
+                      ></path>
+                    </svg>
+                  ) : (
+                    <div className={css.flow_loader}></div>
+                  )}
+                </div>
+                <span>Awaiting Transaction</span>
+              </div>
+            </li>
+            <li className={completed && !processing ? css.completed : ""}>
+              <div className={css.flow_stepper_card}>
+                <div className={css.flow_stepper_process}>
+                  {completed && !processing ? (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      enableBackground="new 0 0 512 512"
+                      viewBox="0 0 20 20"
+                      fill="#fff"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                        data-original="#000000"
+                      ></path>
+                    </svg>
+                  ) : !processing && !completed ? (
+                    <div className={css.flow_loader}></div>
+                  ) : (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      enableBackground="new 0 0 512 512"
+                      viewBox="0 0 20 20"
+                      fill="#fff"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                        data-original="#000000"
+                      ></path>
+                    </svg>
+                  )}
+                </div>
+                <span>Processing Transaction</span>
+              </div>
+            </li>
+            <li className={`${completed ? css.completed : ""}`}>
+              <div className={css.flow_stepper_card}>
+                <div className={css.flow_stepper_process}>
+                  {completed ? (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      enableBackground="new 0 0 512 512"
+                      viewBox="0 0 20 20"
+                      fill="#fff"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                        data-original="#000000"
+                      ></path>
+                    </svg>
+                  ) : (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      enableBackground="new 0 0 512 512"
+                      viewBox="0 0 20 20"
+                      fill="#e4e0e0"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                        data-original="#000000"
+                      ></path>
+                    </svg>
+                  )}
+                </div>
+                <span>Transaction Successful</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ButtonStepper;

package/src/components/CommonCenterLoader.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+
+const CommonCenterLoader = (css: any) => (
+  <div className={css.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 = (css: any) => (
+  <div className={css.text_cenetr}>
+    <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,179 @@
+import React from "react";
+import Select, { components } from "react-select";
+import MgIcon from "../assets/icons-one.png";
+import type { CustomOption } from "./types";
+import css 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 ? "#8B5CF6" : 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={css.ramp_option}>
+        {image && <img src={props.data.icon || MgIcon} alt="logo" className={css.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={css.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 css from "../assets/css/style.module.css";
+
+const DotLoader = ({ size }: { size?: number }) => {
+  return <div style={{ width: size ? size : 20 }} className={css.dot_loader}></div>;
+};
+
+export default DotLoader;