@arcblock/did-connect-react 3.1.0

package/lib/Connect/components/connect-status.js

@@ -0,0 +1,263 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { isValidElement as v } from "react";
+import o from "prop-types";
+import { useTheme as I, Box as n, Typography as y, Tooltip as q } from "@mui/material";
+import { Icon as B } from "@iconify/react";
+import j from "@iconify-icons/material-symbols/close-rounded";
+import A from "@iconify-icons/material-symbols/hourglass-empty-rounded";
+import E from "@iconify-icons/material-symbols/rule-settings-rounded";
+import L from "@arcblock/ux/lib/LoadingMask";
+import M from "@arcblock/ux/lib/Success";
+import g from "lodash/noop";
+import { useMemoizedFn as N } from "ahooks";
+import { translate as O } from "@arcblock/ux/lib/Locale/util";
+import P from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { LOGIN_PROVIDER as F } from "@arcblock/ux/lib/Util/constant";
+import H from "../assets/locale.js";
+import k from "./action-button.js";
+import f from "./back-button.js";
+function a({ icon: t = null, title: l = "", color: s = "", description: i = "", extraContent: x = null, actions: h = null }) {
+  const { palette: c } = I(), m = s || c.grey[700];
+  return /* @__PURE__ */ p(
+    n,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1.5
+      },
+      children: [
+        v(t) ? t : /* @__PURE__ */ e(
+          n,
+          {
+            sx: {
+              backgroundColor: m,
+              borderRadius: "100%",
+              fontSize: 0
+            },
+            children: /* @__PURE__ */ e(
+              B,
+              {
+                icon: t,
+                fontSize: 52,
+                style: {
+                  transform: "scale(0.7)",
+                  color: c.primary.contrastText
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ p(n, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ e(
+            y,
+            {
+              variant: "h6",
+              sx: {
+                fontWeight: 500,
+                color: m
+              },
+              children: l
+            }
+          ),
+          /* @__PURE__ */ e(q, { title: i, placement: "top", children: /* @__PURE__ */ e(
+            y,
+            {
+              variant: "body2",
+              sx: {
+                color: "text.secondary",
+                overflow: "hidden",
+                display: "-webkit-box",
+                "-webkit-box-orient": "vertical",
+                "-webkit-line-clamp": "3",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word"
+              },
+              children: i
+            }
+          ) })
+        ] }),
+        x,
+        /* @__PURE__ */ e(n, { children: h })
+      ]
+    }
+  );
+}
+a.propTypes = {
+  icon: o.any,
+  title: o.string,
+  color: o.string,
+  description: o.string,
+  extraContent: o.node,
+  actions: o.node
+};
+function b({ title: t = "", mfaCode: l = 0 }) {
+  return /* @__PURE__ */ p(
+    n,
+    {
+      className: "status-mfa",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        border: "1px solid",
+        borderColor: "grey.200",
+        borderRadius: 1,
+        maxWidth: "360px",
+        backgroundColor: "transparent",
+        p: 1
+      },
+      children: [
+        /* @__PURE__ */ e(
+          n,
+          {
+            className: "status-mfa-tip",
+            sx: {
+              textAlign: "center",
+              textWrap: "balance"
+            },
+            children: t
+          }
+        ),
+        /* @__PURE__ */ e(
+          y,
+          {
+            className: "status-mfa-code",
+            sx: {
+              mt: 1,
+              lineHeight: 1,
+              fontSize: "36px",
+              fontWeight: 700,
+              letterSpacing: 1
+            },
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+b.propTypes = {
+  title: o.string,
+  mfaCode: o.number
+};
+function V({
+  status: t = "",
+  nextWorkflow: l = "",
+  mfaCode: s = 0,
+  onCancel: i = g,
+  onRetry: x = g,
+  onClose: h = g,
+  messages: c,
+  locale: m = "en",
+  isFullScreen: w = !1,
+  loadingIcon: S = null,
+  chooseMethod: T = "DID Wallet",
+  hideRetry: D = !1,
+  hideBack: u = !1,
+  ...C
+}) {
+  const r = N((W, z = {}) => O(H, W, m, "en", z)), { palette: R } = I(), d = /* @__PURE__ */ e(k, { sx: { color: "text.secondary" }, onClick: h, children: r("close") });
+  return /* @__PURE__ */ p(
+    n,
+    {
+      ...C,
+      sx: {
+        p: 2,
+        minHeight: 200,
+        ...C.sx
+      },
+      children: [
+        t === "scanned" && !l && /* @__PURE__ */ e(
+          a,
+          {
+            icon: /* @__PURE__ */ e(L, { size: 52, borderRadius: 12, children: S || /* @__PURE__ */ e(P, { provider: F.DID_WALLET, width: "100%", height: "100%" }) }),
+            title: r("requestConnect"),
+            description: r("continueInWallet", { method: T }),
+            extraContent: s > 0 && /* @__PURE__ */ e(b, { mfaCode: s, title: r("mfaCode") }),
+            actions: u ? d : /* @__PURE__ */ e(f, { onClick: i })
+          }
+        ),
+        t === "scanned" && !!l && /* @__PURE__ */ e(
+          a,
+          {
+            color: R.secondary.main,
+            icon: A,
+            title: r("wait"),
+            description: r("waiting"),
+            extraContent: s > 0 && /* @__PURE__ */ e(b, { mfaCode: s, title: r("mfaCode") }),
+            actions: u ? d : /* @__PURE__ */ e(f, { onClick: i })
+          }
+        ),
+        t === "succeed" && /* @__PURE__ */ e(
+          a,
+          {
+            color: "success.light",
+            icon: /* @__PURE__ */ e(M, { size: 52, borderWidth: 3 }),
+            title: r("success"),
+            description: c.success,
+            actions: w ? null : d
+          }
+        ),
+        t === "error" && /* @__PURE__ */ e(
+          a,
+          {
+            color: R.error.main,
+            icon: j,
+            title: r("failed"),
+            description: c.error || r("error"),
+            actions: /* @__PURE__ */ p(n, { sx: { display: "flex", gap: 1 }, children: [
+              u ? d : /* @__PURE__ */ e(f, { onClick: i }),
+              D ? null : /* @__PURE__ */ e(
+                k,
+                {
+                  onClick: x,
+                  sx: {
+                    color: "primary.main",
+                    borderColor: "primary.light"
+                  },
+                  children: r("retry")
+                }
+              )
+            ] })
+          }
+        ),
+        t === "busy" && /* @__PURE__ */ e(
+          a,
+          {
+            color: "warning.main",
+            icon: E,
+            title: r("busyTitle"),
+            description: c.error || r("busyDesc"),
+            actions: u ? d : /* @__PURE__ */ e(f, { onClick: i })
+          }
+        )
+      ]
+    }
+  );
+}
+V.propTypes = {
+  status: o.string,
+  nextWorkflow: o.string,
+  mfaCode: o.number,
+  onCancel: o.func,
+  onRetry: o.func,
+  onClose: o.func,
+  messages: o.shape({
+    confirm: o.string.isRequired,
+    success: o.any.isRequired,
+    error: o.any.isRequired
+  }).isRequired,
+  locale: o.oneOf(["en", "zh"]),
+  isFullScreen: o.bool,
+  loadingIcon: o.any,
+  chooseMethod: o.string,
+  hideRetry: o.bool,
+  hideBack: o.bool
+};
+export {
+  V as default
+};

package/lib/Connect/components/did-connect-title.js

@@ -0,0 +1,126 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { Icon as r } from "@iconify/react";
+import { Box as n, Typography as l, Tooltip as x } from "@mui/material";
+import y from "@iconify-icons/material-symbols/info-outline-rounded";
+import u from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import t from "prop-types";
+import h from "./switch-app.js";
+function g({ title: p, description: s, extraContent: e = null, disableSwitchApp: a = !1 }) {
+  const [c, f] = d(!1);
+  return /* @__PURE__ */ i(
+    n,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.5
+      },
+      children: [
+        /* @__PURE__ */ i(
+          l,
+          {
+            component: "h1",
+            variant: "h4",
+            sx: {
+              color: "text.primary",
+              fontWeight: 700,
+              fontFamily: "Lexend",
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            onClick: (m) => {
+              a || m.detail > 2 && f(!0);
+            },
+            children: [
+              p,
+              /* @__PURE__ */ o(
+                h,
+                {
+                  sx: {
+                    fontSize: 0,
+                    display: c ? "block" : "none"
+                  },
+                  children: /* @__PURE__ */ o(
+                    r,
+                    {
+                      icon: u,
+                      style: {
+                        fontSize: "14px"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          l,
+          {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              fontFamily: "Lexend"
+            },
+            children: [
+              s,
+              e ? /* @__PURE__ */ o(
+                x,
+                {
+                  title: e,
+                  arrow: !0,
+                  slotProps: {
+                    tooltip: {
+                      sx: {
+                        "&>.MuiTypography-root": {
+                          color: "primary.contrastText",
+                          fontFamily: "Lexend"
+                        }
+                      }
+                    },
+                    popper: {
+                      modifiers: [
+                        {
+                          name: "offset",
+                          options: {
+                            offset: [0, -8]
+                          }
+                        }
+                      ]
+                    }
+                  },
+                  children: /* @__PURE__ */ o(
+                    n,
+                    {
+                      component: r,
+                      icon: y,
+                      sx: {
+                        fontSize: 14,
+                        display: "inline-block",
+                        verticalAlign: "middle",
+                        ml: 0.5,
+                        cursor: "pointer",
+                        transform: "translateY(-1px)"
+                      }
+                    }
+                  )
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+g.propTypes = {
+  title: t.string.isRequired,
+  description: t.string.isRequired,
+  extraContent: t.any,
+  disableSwitchApp: t.bool
+};
+export {
+  g as default
+};

package/lib/Connect/components/download-tips.js

@@ -0,0 +1,52 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Tooltip as l, Box as a } from "@mui/material";
+import { useCreation as p } from "ahooks";
+import { mergeSx as s } from "@arcblock/ux/lib/Util/style";
+import { useStateContext as d } from "../contexts/state.js";
+function x({ ...o }) {
+  const { t: r, locale: t } = d(), n = p(() => ["zh", "en"].includes ? `https://www.didwallet.io/${t}` : "https://www.didwallet.io/en", [t]), i = r("downloadTips");
+  return /* @__PURE__ */ e(
+    l,
+    {
+      title: i,
+      arrow: !0,
+      placement: "top",
+      slotProps: {
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, -8]
+              }
+            }
+          ]
+        }
+      },
+      children: /* @__PURE__ */ e(
+        a,
+        {
+          component: "a",
+          href: n,
+          target: "_blank",
+          rel: "noopener",
+          ...o,
+          sx: s(
+            {
+              color: "primary.main",
+              textDecoration: "none",
+              "&:hover": {
+                textDecoration: "dashed underline"
+              }
+            },
+            o?.sx
+          ),
+          children: "DID Wallet"
+        }
+      )
+    }
+  );
+}
+export {
+  x as default
+};

package/lib/Connect/components/loading.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Box as n, CircularProgress as t } from "@mui/material";
+import i from "prop-types";
+function s({ size: r = 92.5, loadingSize: o = 30 }) {
+  return /* @__PURE__ */ e(
+    n,
+    {
+      sx: {
+        height: "100%",
+        minWidth: r,
+        minHeight: r,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ e(t, { size: o, sx: { color: "secondary.main" } })
+    }
+  );
+}
+s.propTypes = {
+  size: i.number,
+  loadingSize: i.number
+};
+export {
+  s as default
+};