@arcblock/ux 2.13.70 → 3.0.1

package/lib/DIDConnect/request-storage-access-api-dialog.js

@@ -1,324 +1,262 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Button, Typography, Chip, List, ListItem } from '@mui/material';
-import { Icon } from '@iconify/react';
-import externalLinkIcon from '@iconify-icons/tabler/external-link';
-import lockOutlineIcon from '@iconify-icons/material-symbols/lock-outline';
-import checkCircleIcon from '@iconify-icons/material-symbols/check-circle';
-import rocketLaunchRoundedIcon from '@iconify-icons/material-symbols/rocket-launch-rounded';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
-import noop from 'lodash/noop';
-import { translate } from '../Locale/util';
-import DIDConnectContainer from './did-connect-container';
-import CloseButton from '../CloseButton';
-import SharedBridge from '../SharedBridge';
-import { setVisitorId } from '../Util';
-const translations = {
+import { jsx as e, jsxs as t, Fragment as m } from "react/jsx-runtime";
+import { Box as l, Typography as p, Chip as w, List as R, ListItem as y, Button as q } from "@mui/material";
+import { Icon as u } from "@iconify/react";
+import D from "@iconify-icons/tabler/external-link";
+import L from "@iconify-icons/material-symbols/lock-outline";
+import B from "@iconify-icons/material-symbols/check-circle";
+import b from "@iconify-icons/material-symbols/rocket-launch-rounded";
+import { useReactive as F, useMemoizedFn as s } from "ahooks";
+import { memo as U, useRef as j, useImperativeHandle as M } from "react";
+import k from "lodash/noop";
+import { translate as W } from "../Locale/util.js";
+import Y from "./did-connect-container.js";
+import _ from "../CloseButton/index.js";
+import H from "../SharedBridge/index.js";
+import { setVisitorId as O } from "../Util/index.js";
+const P = {
   en: {
-    allow: 'Allow',
-    dataUsage: 'Your data is only used for identity authentication, and will not be collected or used for any other purpose.',
-    title: 'Authorization Request',
-    clickAllow: ({
-      allowButton
-    }) => {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["You only need to click the ", allowButton, " button below, and you will not see this request again."]
-      });
-    },
-    reason: ({
-      site
-    }) => {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["For a better login experience, we need to apply for the storage permission of the ", site, " site."]
-      });
-    },
+    allow: "Allow",
+    dataUsage: "Your data is only used for identity authentication, and will not be collected or used for any other purpose.",
+    title: "Authorization Request",
+    clickAllow: ({ allowButton: r }) => /* @__PURE__ */ t(m, { children: [
+      "You only need to click the ",
+      r,
+      " button below, and you will not see this request again."
+    ] }),
+    reason: ({ site: r }) => /* @__PURE__ */ t(m, { children: [
+      "For a better login experience, we need to apply for the storage permission of the ",
+      r,
+      " site."
+    ] }),
     afterAllow: {
-      title: 'After authorization, you will enjoy:',
-      list1: 'More convenient login experience',
-      list2: 'Faster access speed'
+      title: "After authorization, you will enjoy:",
+      list1: "More convenient login experience",
+      list2: "Faster access speed"
     }
   },
   zh: {
-    allow: '允许',
-    dataUsage: '您的数据仅用于身份认证，不会被收集或用于其他用途。',
-    title: '授权请求',
-    clickAllow: ({
-      allowButton
-    }) => {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["\u60A8\u53EA\u9700\u8981\u70B9\u51FB\u4E0B\u65B9\u7684 ", allowButton, " \u6309\u94AE\uFF0C\u540E\u7EED\u5C06\u4E0D\u4F1A\u518D\u770B\u5230\u8FD9\u4E2A\u8BF7\u6C42\u3002"]
-      });
-    },
-    reason: ({
-      site
-    }) => {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["\u4E3A\u4E86\u8BA9\u60A8\u83B7\u5F97\u66F4\u597D\u7684\u767B\u5F55\u4F53\u9A8C\uFF0C\u6211\u4EEC\u9700\u8981\u7533\u8BF7 ", site, " \u7AD9\u70B9\u5B58\u50A8\u6743\u9650\u3002"]
-      });
-    },
+    allow: "允许",
+    dataUsage: "您的数据仅用于身份认证，不会被收集或用于其他用途。",
+    title: "授权请求",
+    clickAllow: ({ allowButton: r }) => /* @__PURE__ */ t(m, { children: [
+      "您只需要点击下方的 ",
+      r,
+      " 按钮，后续将不会再看到这个请求。"
+    ] }),
+    reason: ({ site: r }) => /* @__PURE__ */ t(m, { children: [
+      "为了让您获得更好的登录体验，我们需要申请 ",
+      r,
+      " 站点存储权限。"
+    ] }),
     afterAllow: {
-      title: '授权后，您将享受：',
-      list1: '更便捷的登录体验',
-      list2: '更快的访问速度'
+      title: "授权后，您将享受：",
+      list1: "更便捷的登录体验",
+      list2: "更快的访问速度"
     }
   }
 };
-const RequestStorageAccessApiDialog = /*#__PURE__*/forwardRef(({
-  locale = 'en',
-  src,
-  storageAccessState
-}, ref) => {
-  const sharedBridgeRef = useRef(null);
-  const currentState = useReactive({
-    callback: noop,
-    open: false,
+function T({
+  ref: r,
+  locale: f = "en",
+  src: c,
+  storageAccessState: h
+}) {
+  const g = j(null), o = F({
+    callback: k,
+    open: !1,
     get origin() {
       try {
-        return new URL(src).origin;
-      } catch (error) {
-        return src;
+        return new URL(c).origin;
+      } catch {
+        return c;
       }
     },
     get host() {
       try {
-        return new URL(src).host;
-      } catch (error) {
-        return src;
+        return new URL(c).host;
+      } catch {
+        return c;
       }
     }
-  });
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const reset = useMemoizedFn(() => {
-    currentState.open = false;
-    currentState.callback = noop;
-  });
-  const open = useMemoizedFn(() => {
-    currentState.open = true;
-  });
-  const close = useMemoizedFn(() => {
-    currentState.open = false;
-  });
-  const _requestStorageAccess = useMemoizedFn(async callback => {
-    const result = await sharedBridgeRef.current?.callIframe('requestStorageAccess');
-    if (result.value) {
-      callback(true, 'broswer');
-    } else if (storageAccessState === undefined) {
-      // 用户未在当前网页交互过，此时必然需要进行一次弹窗
-      callback(false, 'system');
-    } else if (storageAccessState === 'denied') {
-      // 用户已经明确拒绝过跨站授权，直接弹窗
-      callback(false);
-    } else {
-      // NOTICE: 暂时保留这部分逻辑，后续可能会用上
-      // else if (
-      //   result.error?.name === 'NotAllowedError' &&
-      //   result.error?.message === 'requestStorageAccess not allowed'
-      // ) {
-      //   // 操作被浏览器禁止，需要用户手动与 iframe 交互一次才可以
-      //   currentState.open = true;
-      //   currentState.callback = callback;
-      // }
-      currentState.open = true;
-      currentState.callback = callback;
+  }), i = s((n, a = {}) => W(P, n, f, "en", a)), A = s(() => {
+    o.open = !1, o.callback = k;
+  }), I = s(() => {
+    o.open = !0;
+  }), v = s(() => {
+    o.open = !1;
+  }), C = s(
+    async (n) => {
+      var d;
+      (await ((d = g.current) == null ? void 0 : d.callIframe("requestStorageAccess"))).value ? n(!0, "broswer") : h === void 0 ? n(!1, "system") : h === "denied" ? n(!1) : (o.open = !0, o.callback = n);
     }
-  });
-  const requestStorageAccess = useMemoizedFn(() => {
-    return new Promise(resolve => {
-      _requestStorageAccess((result, origin) => {
-        reset();
-        resolve({
-          value: result,
-          origin
-        });
-      });
+  ), z = s(() => new Promise((n) => {
+    C((a, d) => {
+      A(), n({ value: a, origin: d });
     });
+  })), S = s(() => {
+    o.open = !1;
+  }), x = s(() => {
+    o.open = !1, o.callback(!1, "system");
   });
-  const handleAllow = useMemoizedFn(() => {
-    currentState.open = false;
-  });
-  const handleClose = useMemoizedFn(() => {
-    currentState.open = false;
-    currentState.callback(false, 'system');
-  });
-  useImperativeHandle(ref, () => ({
-    open,
-    close,
-    requestStorageAccess
-  }));
-  return /*#__PURE__*/_jsx(DIDConnectContainer, {
-    popup: true,
-    open: currentState.open,
-    onClose: handleClose,
-    keepMounted: true,
-    children: /*#__PURE__*/_jsxs(Box, {
+  return M(r, () => ({
+    open: I,
+    close: v,
+    requestStorageAccess: z
+  })), /* @__PURE__ */ e(Y, { popup: !0, open: o.open, onClose: x, keepMounted: !0, children: /* @__PURE__ */ t(
+    l,
+    {
       sx: {
-        backgroundColor: 'background.default',
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        position: 'relative',
-        maxWidth: '100%',
-        transition: 'width 0.2s ease-in-out',
-        margin: 'auto',
+        backgroundColor: "background.default",
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        position: "relative",
+        maxWidth: "100%",
+        transition: "width 0.2s ease-in-out",
+        margin: "auto",
         p: 3,
         gap: 2
       },
-      children: [/*#__PURE__*/_jsx(CloseButton, {
-        onClose: handleClose,
-        sx: {
-          position: 'absolute',
-          right: 14,
-          top: 14
-        }
-      }), /*#__PURE__*/_jsxs(Typography, {
-        component: "div",
-        variant: "h4",
-        sx: {
-          fontWeight: 700,
-          fontFamily: 'Lexend',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1
-        },
-        children: [/*#__PURE__*/_jsx(Box, {
-          component: Icon,
-          icon: lockOutlineIcon,
-          fontSize: 28,
-          sx: {
-            color: 'warning.main'
+      children: [
+        /* @__PURE__ */ e(
+          _,
+          {
+            onClose: x,
+            sx: {
+              position: "absolute",
+              right: 14,
+              top: 14
+            }
           }
-        }), t('title')]
-      }), /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 1
-        },
-        children: [/*#__PURE__*/_jsx(Typography, {
-          children: t('reason', {
-            site: /*#__PURE__*/_jsx(Chip, {
-              clickable: true,
-              component: "a",
-              href: currentState.origin,
-              label: currentState.host,
-              size: "small",
-              deleteIcon: /*#__PURE__*/_jsx(Icon, {
-                icon: externalLinkIcon
-              }),
-              onDelete: () => {},
-              target: "_blank"
-            })
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          component: "div",
-          children: t('clickAllow', {
-            allowButton: /*#__PURE__*/_jsx(Chip, {
-              label: t('allow'),
-              size: "small",
-              color: "success"
-            })
-          })
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            mt: 2
-          },
-          children: [/*#__PURE__*/_jsxs(Typography, {
+        ),
+        /* @__PURE__ */ t(
+          p,
+          {
+            component: "div",
+            variant: "h4",
             sx: {
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-              mb: 0.5
+              fontWeight: 700,
+              fontFamily: "Lexend",
+              display: "flex",
+              alignItems: "center",
+              gap: 1
             },
-            children: [/*#__PURE__*/_jsx(Box, {
-              component: Icon,
-              icon: checkCircleIcon,
-              fontSize: 24,
-              sx: {
-                color: 'success.main'
+            children: [
+              /* @__PURE__ */ e(
+                l,
+                {
+                  component: u,
+                  icon: L,
+                  sx: {
+                    fontSize: 28,
+                    color: "warning.main"
+                  }
+                }
+              ),
+              i("title")
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(l, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+          /* @__PURE__ */ e(p, { children: i("reason", {
+            site: /* @__PURE__ */ e(
+              w,
+              {
+                clickable: !0,
+                component: "a",
+                href: o.origin,
+                label: o.host,
+                size: "small",
+                deleteIcon: /* @__PURE__ */ e(u, { icon: D }),
+                onDelete: () => {
+                },
+                target: "_blank"
               }
-            }), t('afterAllow.title')]
-          }), /*#__PURE__*/_jsxs(List, {
-            dense: true,
-            sx: {
-              py: 0,
-              pl: 2
-            },
-            children: [/*#__PURE__*/_jsxs(ListItem, {
-              sx: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: 0.8
-              },
-              children: [/*#__PURE__*/_jsx(Box, {
-                component: Icon,
-                icon: rocketLaunchRoundedIcon,
-                fontSize: 20,
-                sx: {
-                  color: 'success.main'
+            )
+          }) }),
+          /* @__PURE__ */ e(p, { component: "div", children: i("clickAllow", {
+            allowButton: /* @__PURE__ */ e(w, { label: i("allow"), size: "small", color: "success" })
+          }) }),
+          /* @__PURE__ */ t(l, { sx: { mt: 2 }, children: [
+            /* @__PURE__ */ t(p, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+              /* @__PURE__ */ e(
+                l,
+                {
+                  component: u,
+                  icon: B,
+                  sx: {
+                    fontSize: 24,
+                    color: "success.main"
+                  }
                 }
-              }), t('afterAllow.list1')]
-            }), /*#__PURE__*/_jsxs(ListItem, {
+              ),
+              i("afterAllow.title")
+            ] }),
+            /* @__PURE__ */ t(R, { dense: !0, sx: { py: 0, pl: 2 }, children: [
+              /* @__PURE__ */ t(y, { sx: { display: "flex", alignItems: "center", gap: 0.8 }, children: [
+                /* @__PURE__ */ e(
+                  l,
+                  {
+                    component: u,
+                    icon: b,
+                    sx: {
+                      fontSize: 20,
+                      color: "success.main"
+                    }
+                  }
+                ),
+                i("afterAllow.list1")
+              ] }),
+              /* @__PURE__ */ t(y, { sx: { display: "flex", alignItems: "center", gap: 0.8 }, children: [
+                /* @__PURE__ */ e(
+                  l,
+                  {
+                    component: u,
+                    icon: b,
+                    sx: {
+                      fontSize: 20,
+                      color: "success.main"
+                    }
+                  }
+                ),
+                i("afterAllow.list2")
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            p,
+            {
+              component: "div",
+              variant: "body2",
               sx: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: 0.8
+                color: "grey.700"
               },
-              children: [/*#__PURE__*/_jsx(Box, {
-                component: Icon,
-                icon: rocketLaunchRoundedIcon,
-                fontSize: 20,
-                sx: {
-                  color: 'success.main'
-                }
-              }), t('afterAllow.list2')]
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(Typography, {
-          component: "div",
-          variant: "body2",
-          color: "grey.700",
-          children: t('dataUsage')
-        })]
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: 'flex',
-          justifyContent: 'center'
-        },
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            position: 'relative',
-            display: 'inline-block',
-            cursor: 'pointer'
-          },
-          children: [/*#__PURE__*/_jsx(Button, {
-            variant: "contained",
-            color: "success",
-            onClick: handleAllow,
-            sx: {
-              minWidth: 100,
-              letterSpacing: 1
-            },
-            children: t('allow')
-          }), /*#__PURE__*/_jsx(SharedBridge, {
-            ref: sharedBridgeRef,
-            onClick: ({
-              value,
-              visitorId
-            }) => {
-              if (visitorId) setVisitorId(visitorId);
-              currentState.callback(value, 'broswer');
-            },
-            locale: locale,
-            src: src,
-            sx: {
-              zIndex: 1
+              children: i("dataUsage")
             }
-          })]
-        })
-      })]
-    })
-  });
-});
-export default /*#__PURE__*/memo(RequestStorageAccessApiDialog);
+          )
+        ] }),
+        /* @__PURE__ */ e(l, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ t(l, { sx: { position: "relative", display: "inline-block", cursor: "pointer" }, children: [
+          /* @__PURE__ */ e(q, { variant: "contained", color: "success", onClick: S, sx: { minWidth: 100, letterSpacing: 1 }, children: i("allow") }),
+          /* @__PURE__ */ e(
+            H,
+            {
+              ref: g,
+              onClick: ({ value: n, visitorId: a }) => {
+                a && O(a), o.callback(n, "broswer");
+              },
+              locale: f,
+              src: c,
+              sx: {
+                zIndex: 1
+              }
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+}
+const ie = U(T);
+export {
+  ie as default
+};