@matchain/matchid-sdk-react 0.1.48-alpha.10 → 0.1.48-alpha.2

package/dist/ui/index.js

@@ -72,7 +72,7 @@ function CloseRoundIcon({ size = 30, ...props }) {
 
 // src/assets/icon/LoadingIcon.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var LoadingIcon = ({ size = 22, className = "", color = "white", rotate = false }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+var LoadingIcon = ({ size = 22, className = "", color = "white" }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
   "svg",
   {
     width: size,
@@ -80,7 +80,7 @@ var LoadingIcon = ({ size = 22, className = "", color = "white", rotate = false
     viewBox: "0 0 22 22",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: className + " " + (rotate ? "matchid-rotate" : ""),
+    className,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M11 1V3.5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { opacity: "0.3", d: "M3.92834 3.92871L5.69977 5.70017", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -255,20 +255,8 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 // src/assets/icon/ErrorRoundIcon.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 
-// src/assets/icon/InfoLineIcon.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-
-// src/assets/icon/InfoRoundIcon.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-
-// src/assets/icon/TransferIcon.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-
-// src/assets/icon/ArrowSendIcon.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
-
 // src/ui/Button/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Button({
   size = "df",
   disabled = false,
@@ -287,7 +275,7 @@ function Button({
       onClick && onClick();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "button",
     {
       type,
@@ -297,14 +285,14 @@ function Button({
         ...style
       },
       onClick: onAction,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
     }
   );
 }
 
 // src/ui/Overlay/index.tsx
 var import_react = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Overlay({
   isOpen = false,
   children,
@@ -320,7 +308,7 @@ function Overlay({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
       className: "matchid-overlay",
@@ -329,37 +317,33 @@ function Overlay({
       },
       children
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, {});
+  ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, {});
 }
 
 // src/ui/Drawer/index.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Drawer({
   children,
   showClose = true,
   onClose,
   isOpen = false,
   title,
-  zIndex = 100,
-  onBack
+  zIndex = 100
 }) {
   if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "matchid-drawer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `matchid-drawer-header`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `matchid-drawer-header-content`, children: [
-        onBack && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ArrowLeftIcon, { height: 25, width: 24, className: "matchid-drawer-header-back", onClick: onBack }),
-        title
-      ] }),
-      showClose && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CloseRoundIcon, { className: "matchid-drawer-header-close", onClick: onClose })
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "matchid-drawer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `matchid-drawer-header`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: title }),
+      showClose && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseRoundIcon, { className: "matchid-drawer-header-close", onClick: onClose })
     ] }),
     children
   ] }) });
 }
 
 // src/ui/Field/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Field({
   label,
   children,
@@ -367,13 +351,13 @@ function Field({
   required,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "matchid-field-label", children: [
-      required && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "matchid-field-required", children: "*" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "matchid-field-label", children: [
+      required && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "matchid-field-required", children: "*" }),
       label
     ] }),
     children,
-    error && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "matchid-field-error", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "matchid-field-error", children: error })
   ] });
 }
 
@@ -399,7 +383,7 @@ function useDownMd() {
 }
 
 // src/ui/Modal/index.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Modal({
   children,
   isOpen,
@@ -407,10 +391,10 @@ function Modal({
   zIndex = 100,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `matchid-modal ${className}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `matchid-modal ${className}`, style: {
     width
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "matchid-modal-mobile-header" }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "matchid-modal-mobile-header" }),
     children
   ] }) });
 }
@@ -424,20 +408,20 @@ function ModalWithHeader({
   ...props
 }) {
   const isDownMd = useDownMd();
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Modal, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "matchid-modal-header-content", children: [
-        onBack && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowLeftIcon, { height: isDownMd ? 20 : 25, width: isDownMd ? 20 : 24, className: "matchid-modal-header-back", onClick: onBack }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "matchid-modal-header-title", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Modal, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "matchid-modal-header-content", children: [
+        onBack && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ArrowLeftIcon, { height: isDownMd ? 20 : 25, width: isDownMd ? 20 : 24, className: "matchid-modal-header-back", onClick: onBack }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "matchid-modal-header-title", children: title })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
     ] }),
     children
   ] });
 }
 
 // src/ui/ModalDrawer/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function ModalDrawer({
   title,
   drawerTitleVisible = true,
@@ -445,9 +429,9 @@ function ModalDrawer({
 }) {
   const isDownMd = useDownMd();
   if (isDownMd) {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalWithHeader, { ...props, title });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalWithHeader, { ...props, title });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Drawer, { ...props, title: drawerTitleVisible ? title : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Drawer, { ...props, title: drawerTitleVisible ? title : null });
 }
 
 // src/assets/img/confirm.gif
@@ -477,13 +461,12 @@ var matchlog = new Proxy(console, handler);
 var matchlog_default = matchlog;
 
 // src/ui/HashPanel/index.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function HashPanel({
   hash,
   chain,
   isOpen,
-  onClose,
-  zIndex
+  onClose
 }) {
   const [status, setStatus] = (0, import_react3.useState)("confirm");
   const statusMaps = {
@@ -549,14 +532,13 @@ function HashPanel({
     }
   );
   const link = chain ? `${chain?.blockExplorers?.default.url}/tx/${hash}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     ModalDrawer,
     {
       isOpen,
       showClose: true,
       onClose,
-      zIndex,
-      title: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      title: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "div",
         {
           className: "matchid-hashpanel-header",
@@ -566,29 +548,29 @@ function HashPanel({
           children: statusValue.text
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "matchid-hashpanel-box", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "matchid-hashpanel-content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: `matchid-hashpanel-status`, style: {
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "matchid-hashpanel-box", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "matchid-hashpanel-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `matchid-hashpanel-status`, style: {
             color: statusValue.color
           }, children: statusValue.text }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("img", { src: statusValue.icon, alt: statusValue.text, className: `matchid-hashpanel-img` }),
-          hash && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "matchid-hashpanel-hash", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("img", { src: statusValue.icon, alt: statusValue.text, className: `matchid-hashpanel-img` }),
+          hash && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "matchid-hashpanel-hash", children: [
             "Hash:",
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("a", { href: link, target: "_blank", children: hash })
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("a", { href: link, target: "_blank", children: hash })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { onClick: onClose, size: "lg", block: true, children: "Back" })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { onClick: onClose, size: "lg", block: true, children: "Back" })
       ] })
     }
   );
 }
 function HashPanel_default(props) {
-  return props.isOpen && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(HashPanel, { ...props });
+  return props.isOpen && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(HashPanel, { ...props });
 }
 
 // src/ui/Input/index.tsx
 var import_react4 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Input({
   onChange,
   type,
@@ -598,17 +580,17 @@ function Input({
 }) {
   const [inputType, setInputType] = (0, import_react4.useState)(type);
   const isDownMd = useDownMd();
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "div",
     {
       className: `matchid-input-box ${props.value && props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
-        props.value && props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
+        props.value && props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
           if (onChange) {
             onChange({ target: { value: "" } });
           }
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           DeleteRoundIcon,
           {
             height: isDownMd ? 16 : 21,
@@ -616,9 +598,9 @@ function Input({
             color: "var(--matchid-input-delete-icon-color)"
           }
         ) }),
-        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
+        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
           setInputType(inputType === "password" ? "text" : "password");
-        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
+        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
         after
       ]
     }
@@ -627,7 +609,7 @@ function Input({
 
 // src/ui/Popover/index.tsx
 var import_react5 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Popover({
   children,
   content,
@@ -637,7 +619,7 @@ function Popover({
   gap = "20px"
 }) {
   const [active, setActive] = (0, import_react5.useState)(false);
-  return children && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return children && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
       onClick: () => {
@@ -648,16 +630,16 @@ function Popover({
       className: `matchid-popover-box matchid-popover-${position} matchid-popover-${type} ${className} ${type == "click" && active ? "matchid-popover-click-active" : ""}`,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { style: {
           paddingTop: gap
-        }, className: `matchid-popover-area`, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: `matchid-popover-content`, children: content }) })
+        }, className: `matchid-popover-area`, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `matchid-popover-content`, children: content }) })
       ]
     }
   );
 }
 
 // src/ui/Switch/index.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Switch({
   size = "default",
   checked = false,
@@ -672,12 +654,12 @@ function Switch({
       onChange && onChange(!checked);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { onClick, className: `matchid-switch matchid-switch-${size} ${checked ? "matchid-switch-checked" : ""} ${disabled ? "matchid-switch-disabled" : ""} ${loading ? "matchid-switch-loading" : ""}`, ...props, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(LoadingIcon_default, { className: "matchid-switch-loading-icon", size: size == "default" ? 24 : 18, color: "var(--matchid-swicth-loading-color)" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "matchid-switch-ball" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { onClick, className: `matchid-switch matchid-switch-${size} ${checked ? "matchid-switch-checked" : ""} ${disabled ? "matchid-switch-disabled" : ""} ${loading ? "matchid-switch-loading" : ""}`, ...props, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LoadingIcon_default, { className: "matchid-switch-loading-icon", size: size == "default" ? 24 : 18, color: "var(--matchid-swicth-loading-color)" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "matchid-switch-ball" }) });
 }
 
 // src/ui/AlphaAvatar/index.tsx
 var import_react6 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function AlphaAvatar({
   name,
   size = "default",
@@ -694,7 +676,7 @@ function AlphaAvatar({
     return "";
   }, [name]);
   const numberSize = typeof size === "number" ? size : size === "sm" ? 24 : size === "default" ? 40 : 64;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `matchid-alpha-avatar ${className}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: `matchid-alpha-avatar ${className}`, style: {
     width: numberSize,
     height: numberSize,
     fontSize: Math.ceil(numberSize / 2),
@@ -703,7 +685,7 @@ function AlphaAvatar({
 }
 
 // src/ui/Radio/index.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function Radio({
   checked = false,
   onChange,
@@ -712,13 +694,13 @@ function Radio({
   className = "",
   style = {}
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { onClick: onChange, className: `matchid-radio ${className} ${checked ? "matchid-radio-checked" : ""}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { onClick: onChange, className: `matchid-radio ${className} ${checked ? "matchid-radio-checked" : ""}`, style: {
     width: size,
     height: size,
     ...style,
     // @ts-ignore
     "--matchid-radio-checked": color
-  }, children: checked && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `matchid-radio-content`, style: {
+  }, children: checked && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: `matchid-radio-content`, style: {
     width: Math.floor(size * 0.7),
     height: Math.floor(size * 0.7)
   } }) });