@arcblock/did-playground
Version:
React components that works with wallet-playground
204 lines (203 loc) • 6.34 kB
JavaScript
import { jsx as n, jsxs as l, Fragment as M } from "react/jsx-runtime";
import { use as ne, useState as d, useEffect as ie } from "react";
import t from "prop-types";
import { useSize as ae } from "ahooks";
import ce from "@arcblock/react-hooks/lib/useBrowser";
import { styled as le, useTheme as ue } from "@arcblock/ux/lib/Theme";
import s from "lodash/isUndefined";
import { CircularProgress as fe, Dialog as me, DialogContent as de } from "@mui/material";
import ge from "@arcblock/did-connect/lib/Connect";
import k from "@arcblock/ux/lib/Button";
import { mergeProps as pe } from "@arcblock/ux/lib/Util";
import { SessionContext as be } from "./session.js";
import { getMessage as i, actions as $, getActionName as q, getActionParams as he } from "./actions.js";
function h({ onClose: u }) {
return /* @__PURE__ */ n(Ce, { onClick: u, children: "×" });
}
h.propTypes = { onClose: t.func.isRequired };
const Ce = le("div")`
display: ${(u) => u.disableClose ? "none" : "block"};
position: absolute;
top: 1rem;
right: 1rem;
color: #999999;
font-size: 2rem;
line-height: 1rem;
cursor: pointer;
user-select: none;
`;
function E({ ...u }) {
const e = Object.assign({}, u);
s(e.autoClose) && (e.autoClose = !0), s(e.buttonText) && (e.buttonText = ""), s(e.buttonColor) && (e.buttonColor = "primary"), s(e.buttonVariant) && (e.buttonVariant = "contained"), s(e.buttonSize) && (e.buttonSize = "large"), s(e.buttonRounded) && (e.buttonRounded = !1), s(e.scanMessage) && (e.scanMessage = "Scan the QR Code with your DID Wallet"), s(e.confirmMessage) && (e.confirmMessage = "Confirm in your DID Wallet"), s(e.successMessage) && (e.successMessage = "Operation success!"), s(e.extraParams) && (e.extraParams = {}), s(e.timeout) && (e.timeout = 5 * 60 * 1e3), s(e.successUrl) && (e.successUrl = ""), s(e.successTarget) && (e.successTarget = "_self"), s(e.frameProps) && (e.frameProps = {}), s(e.webWalletUrl) && (e.webWalletUrl = "");
const I = pe(e, E, ["buttonRounded", "extraParams", "timeout"]), {
autoClose: B,
action: g,
buttonText: z,
buttonColor: C,
buttonVariant: w,
buttonSize: y,
buttonRounded: P,
children: R,
disableClose: we,
title: S,
scanMessage: H,
successMessage: U,
successUrl: r,
successTarget: p,
frameProps: K,
confirmMessage: L,
extraParams: N,
timeout: Q,
webWalletUrl: G,
...a
} = I, D = ue(), W = ce(), { api: j, session: o } = ne(be), [x, T] = d(!1), [J, v] = d(!1), [X, Y] = d({}), Z = ae(document.body), [b, F] = d(!1), [c, _] = d(b && r && p === "frame"), ee = Z?.width || 0;
if (ie(
() => () => {
F(!1), _(!1);
},
[x]
), g === "login")
return o.user ? /* @__PURE__ */ n(k, { ...a, rounded: P, color: C, variant: w, size: y, children: i(U || `Hello ${o.user.name}`, o) }) : /* @__PURE__ */ n(
k,
{
...a,
rounded: P,
color: C,
variant: w,
size: y,
onClick: () => o.login(),
children: i(z || S, o)
}
);
const f = $[g];
if (!$[g])
throw new Error(`Unsupported playground action ${g}`);
const A = async () => {
if (typeof f.onStart == "function") {
try {
v(!0);
const V = await f.onStart(j, o);
Y(V), v(!1);
} catch {
console.error(`Cannot generate dynamicParams for playground action ${q(f, a)}`);
}
T(!0);
} else
T(!0);
}, te = async () => {
if (!o.user) {
o.login(A);
return;
}
await A();
}, m = () => T(!1), se = () => {
F(!0), r ? p === "frame" ? _(!!r) : p === "_blank" ? window.open(r, "_blank") : window.open(r, "_self") : R || B && setTimeout(m, 2e3);
}, oe = () => /* @__PURE__ */ l(M, { children: [
/* @__PURE__ */ n(h, { onClose: m }),
/* @__PURE__ */ l("div", { children: [
"Redirecting to",
" ",
/* @__PURE__ */ n("a", { href: r, target: p, children: r })
] })
] }), re = () => /* @__PURE__ */ l(M, { children: [
/* @__PURE__ */ n(h, { onClose: m }),
/* @__PURE__ */ n(
"iframe",
{
style: { width: "100%", height: "100%" },
allow: "fullscreen",
id: "successFrame",
title: "successFrame",
src: r,
...K
}
)
] }), O = !r || r && !b;
return /* @__PURE__ */ l(M, { children: [
/* @__PURE__ */ l(
k,
{
...a,
rounded: P,
color: C,
variant: w,
size: y,
onClick: te,
children: [
i(z || S, o),
" ",
J && /* @__PURE__ */ n(fe, { size: 12, sx: { color: "#fff" } })
]
}
),
x && !O && /* @__PURE__ */ n(
me,
{
open: !0,
disableEscapeKeyDown: !0,
fullScreen: ee < D.breakpoints.values.sm && !(W.wallet || W.arcSphere),
fullWidth: c,
maxWidth: c ? "lg" : "",
children: /* @__PURE__ */ l(
de,
{
style: {
padding: b && !c && r ? 55 : 0,
display: "flex",
justifyContent: "center",
alignItems: "center",
height: c ? D.breakpoints.values.md : ""
},
children: [
/* @__PURE__ */ n(h, { onClose: m }),
r && b && !c && oe(),
c && re()
]
}
)
}
),
/* @__PURE__ */ n(
ge,
{
popup: !0,
open: x && O,
action: q(f, a),
checkFn: j.get,
onClose: m,
onSuccess: se,
checkTimeout: Q,
extraParams: Object.assign(he(f, a, o), X, N),
webWalletUrl: G,
messages: {
title: i(S, o),
scan: i(H, o),
confirm: i(L, o),
success: R || i(U, o)
}
}
)
] });
}
E.propTypes = {
action: t.string.isRequired,
autoClose: t.bool,
buttonText: t.string,
buttonColor: t.string,
buttonVariant: t.string,
buttonSize: t.string,
buttonRounded: t.bool,
title: t.string.isRequired,
scanMessage: t.string,
successMessage: t.string,
confirmMessage: t.string,
extraParams: t.object,
timeout: t.number,
successUrl: t.string,
successTarget: t.oneOf(["_blank", "_self", "frame"]),
frameProps: t.object,
webWalletUrl: t.string
};
export {
E as default
};