@matchain/matchid-sdk-react 0.1.48-alpha.5 → 0.1.48-alpha.7

package/dist/index.mjs

@@ -6,18 +6,18 @@ import {
 } from "./chunk-HYQ3T6WW.mjs";
 import {
   api_exports
-} from "./chunk-ZYDJICK4.mjs";
+} from "./chunk-YXPWZXPT.mjs";
 import {
   MatchProvider,
   components_exports,
   hooks_exports,
   useMatch
-} from "./chunk-6GQ2H4L2.mjs";
+} from "./chunk-2CK7JQWH.mjs";
 import "./chunk-UA6XHZHX.mjs";
 import {
   ui_exports
-} from "./chunk-LNSJ3ZXG.mjs";
-import "./chunk-A5D3NKTK.mjs";
+} from "./chunk-USKUYOYJ.mjs";
+import "./chunk-7UTR37EJ.mjs";
 import "./chunk-J5LGTIGS.mjs";
 export {
   api_exports as Api,

package/dist/ui/index.js

@@ -255,8 +255,14 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 // src/assets/icon/ErrorRoundIcon.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 
-// src/ui/Button/index.tsx
+// 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/ui/Button/index.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Button({
   size = "df",
   disabled = false,
@@ -275,7 +281,7 @@ function Button({
       onClick && onClick();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "button",
     {
       type,
@@ -285,14 +291,14 @@ function Button({
         ...style
       },
       onClick: onAction,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Overlay({
   isOpen = false,
   children,
@@ -308,7 +314,7 @@ function Overlay({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
       className: "matchid-overlay",
@@ -317,11 +323,11 @@ function Overlay({
       },
       children
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, {});
+  ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, {});
 }
 
 // src/ui/Drawer/index.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Drawer({
   children,
   showClose = true,
@@ -331,19 +337,19 @@ function Drawer({
   zIndex = 100
 }) {
   if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, {});
   }
-  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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "matchid-drawer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `matchid-drawer-header`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: title }),
+      showClose && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CloseRoundIcon, { className: "matchid-drawer-header-close", onClick: onClose })
     ] }),
     children
   ] }) });
 }
 
 // src/ui/Field/index.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Field({
   label,
   children,
@@ -351,13 +357,13 @@ function Field({
   required,
   className = ""
 }) {
-  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: "*" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "matchid-field-label", children: [
+      required && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "matchid-field-required", children: "*" }),
       label
     ] }),
     children,
-    error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "matchid-field-error", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "matchid-field-error", children: error })
   ] });
 }
 
@@ -383,7 +389,7 @@ function useDownMd() {
 }
 
 // src/ui/Modal/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function Modal({
   children,
   isOpen,
@@ -391,10 +397,10 @@ function Modal({
   zIndex = 100,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `matchid-modal ${className}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `matchid-modal ${className}`, style: {
     width
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "matchid-modal-mobile-header" }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "matchid-modal-mobile-header" }),
     children
   ] }) });
 }
@@ -408,20 +414,20 @@ function ModalWithHeader({
   ...props
 }) {
   const isDownMd = useDownMd();
-  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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Modal, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "matchid-modal-header-content", children: [
+        onBack && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ArrowLeftIcon, { height: isDownMd ? 20 : 25, width: isDownMd ? 20 : 24, className: "matchid-modal-header-back", onClick: onBack }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "matchid-modal-header-title", children: title })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
     ] }),
     children
   ] });
 }
 
 // src/ui/ModalDrawer/index.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ModalDrawer({
   title,
   drawerTitleVisible = true,
@@ -429,9 +435,9 @@ function ModalDrawer({
 }) {
   const isDownMd = useDownMd();
   if (isDownMd) {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalWithHeader, { ...props, title });
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ModalWithHeader, { ...props, title });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Drawer, { ...props, title: drawerTitleVisible ? title : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Drawer, { ...props, title: drawerTitleVisible ? title : null });
 }
 
 // src/assets/img/confirm.gif
@@ -461,7 +467,7 @@ var matchlog = new Proxy(console, handler);
 var matchlog_default = matchlog;
 
 // src/ui/HashPanel/index.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function HashPanel({
   hash,
   chain,
@@ -532,13 +538,13 @@ function HashPanel({
     }
   );
   const link = chain ? `${chain?.blockExplorers?.default.url}/tx/${hash}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     ModalDrawer,
     {
       isOpen,
       showClose: true,
       onClose,
-      title: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      title: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "div",
         {
           className: "matchid-hashpanel-header",
@@ -548,29 +554,29 @@ function HashPanel({
           children: statusValue.text
         }
       ),
-      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: {
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "matchid-hashpanel-box", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "matchid-hashpanel-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `matchid-hashpanel-status`, style: {
             color: statusValue.color
           }, children: statusValue.text }),
-          /* @__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: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("img", { src: statusValue.icon, alt: statusValue.text, className: `matchid-hashpanel-img` }),
+          hash && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "matchid-hashpanel-hash", children: [
             "Hash:",
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("a", { href: link, target: "_blank", children: hash })
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("a", { href: link, target: "_blank", children: hash })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { onClick: onClose, size: "lg", block: true, children: "Back" })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { onClick: onClose, size: "lg", block: true, children: "Back" })
       ] })
     }
   );
 }
 function HashPanel_default(props) {
-  return props.isOpen && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(HashPanel, { ...props });
+  return props.isOpen && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(HashPanel, { ...props });
 }
 
 // src/ui/Input/index.tsx
 var import_react4 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Input({
   onChange,
   type,
@@ -580,17 +586,17 @@ function Input({
 }) {
   const [inputType, setInputType] = (0, import_react4.useState)(type);
   const isDownMd = useDownMd();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "div",
     {
       className: `matchid-input-box ${props.value && props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`,
       children: [
-        /* @__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) => {
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
+        props.value && props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
           if (onChange) {
             onChange({ target: { value: "" } });
           }
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           DeleteRoundIcon,
           {
             height: isDownMd ? 16 : 21,
@@ -598,9 +604,9 @@ function Input({
             color: "var(--matchid-input-delete-icon-color)"
           }
         ) }),
-        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
+        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
           setInputType(inputType === "password" ? "text" : "password");
-        }, 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 }) }),
+        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
         after
       ]
     }
@@ -609,7 +615,7 @@ function Input({
 
 // src/ui/Popover/index.tsx
 var import_react5 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function Popover({
   children,
   content,
@@ -619,7 +625,7 @@ function Popover({
   gap = "20px"
 }) {
   const [active, setActive] = (0, import_react5.useState)(false);
-  return children && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return children && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
       onClick: () => {
@@ -630,16 +636,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_runtime53.jsx)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: {
           paddingTop: gap
-        }, className: `matchid-popover-area`, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `matchid-popover-content`, children: content }) })
+        }, className: `matchid-popover-area`, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: `matchid-popover-content`, children: content }) })
       ]
     }
   );
 }
 
 // src/ui/Switch/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function Switch({
   size = "default",
   checked = false,
@@ -654,12 +660,12 @@ function Switch({
       onChange && onChange(!checked);
     }
   };
-  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" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)(LoadingIcon_default, { className: "matchid-switch-loading-icon", size: size == "default" ? 24 : 18, color: "var(--matchid-swicth-loading-color)" }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "matchid-switch-ball" }) });
 }
 
 // src/ui/AlphaAvatar/index.tsx
 var import_react6 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function AlphaAvatar({
   name,
   size = "default",
@@ -676,7 +682,7 @@ function AlphaAvatar({
     return "";
   }, [name]);
   const numberSize = typeof size === "number" ? size : size === "sm" ? 24 : size === "default" ? 40 : 64;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: `matchid-alpha-avatar ${className}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: `matchid-alpha-avatar ${className}`, style: {
     width: numberSize,
     height: numberSize,
     fontSize: Math.ceil(numberSize / 2),
@@ -685,7 +691,7 @@ function AlphaAvatar({
 }
 
 // src/ui/Radio/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function Radio({
   checked = false,
   onChange,
@@ -694,13 +700,13 @@ function Radio({
   className = "",
   style = {}
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { onClick: onChange, className: `matchid-radio ${className} ${checked ? "matchid-radio-checked" : ""}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime56.jsx)("div", { className: `matchid-radio-content`, style: {
+  }, children: checked && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `matchid-radio-content`, style: {
     width: Math.floor(size * 0.7),
     height: Math.floor(size * 0.7)
   } }) });