@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
105 lines (104 loc) • 3.77 kB
JavaScript
import { jsx as s, jsxs as L, Fragment as O } from "react/jsx-runtime";
import p from "lodash/noop";
import { use as k, useState as H } from "react";
import { Box as U } from "@mui/material";
import { useAsyncEffect as b, useCreation as u } from "ahooks";
import { getConnectedAccounts as v, getSourceProvider as B } from "@arcblock/ux/lib/SessionUser/libs/utils";
import { LOGIN_PROVIDER as o } from "@arcblock/ux/lib/Util/constant";
import { SessionContext as G } from "@arcblock/did-connect-react/lib/Session";
import { PasskeyActions as T } from "@arcblock/did-connect-react/lib/Passkey";
import { useBrowser as I } from "@arcblock/react-hooks";
import l from "./third-party-item.js";
function q({ user: i }) {
const { session: C } = k(G), [f, w] = H({}), { getOAuthConfigs: E } = C.useOAuth(), A = I();
b(async () => {
const r = await E({
sourceAppPid: i?.sourceAppPid
});
w(r);
}, [i?.sourceAppPid]);
const P = u(() => Object.keys(f).map((n) => ({
...f[n],
provider: n
})).filter((n) => n.enabled), [f]), h = u(() => {
const r = v(i);
let n = !1, t = "", d = B(i);
const a = r.find((e) => e.provider === o.AUTH0);
return a && (a.id.startsWith("google-oauth2|") && (r.some((e) => e.provider === "google") || (n = !0, t = o.GOOGLE, d === o.AUTH0 && (d = o.GOOGLE))), a.id.startsWith("appleid|") && (r.some((e) => e.provider === o.APPLE) || (n = !0, t = o.APPLE, d === o.AUTH0 && (d = o.APPLE))), a.id.startsWith("github|") && (r.some((e) => e.provider === o.GITHUB) || (n = !0, t = o.GITHUB, d === o.AUTH0 && (d = o.GITHUB)))), P.map((e) => {
if (e.provider === o.AUTH0 && n)
return null;
const c = n && e.provider === t ? r.find((m) => m.provider === o.AUTH0) : r.find((m) => m.provider === e.provider);
return c ? {
...e,
provider: e.provider,
did: c.did,
pk: c.pk,
userInfo: c.userInfo,
_bind: !0,
_rawProvider: c.provider,
_mainProvider: e.provider === d
} : {
...e,
provider: e.provider,
_rawProvider: e.provider,
_mainProvider: e.provider === d
};
}).filter(Boolean).sort((e, c) => e?.order !== void 0 && c?.order !== void 0 ? e.order - c.order : e?.order !== void 0 ? -1 : 1);
}, [i?.connectedAccounts, P]), g = u(() => v(i).filter(
(t) => t.provider === o.PASSKEY && t.did !== i?.did
).map((t) => ({
...t,
_bind: !0
})), [i]), y = u(() => v(i).filter(
(t) => t.provider === o.WALLET && t.did !== i?.did
).map((t) => ({
...t,
_mainProvider: !0
})), [i]);
return /* @__PURE__ */ s(
U,
{
sx: {
gap: 1,
display: "grid",
gridTemplateColumns: "1fr min-content"
},
children: !h.length && !g.length && !y.length ? /* @__PURE__ */ s(
T,
{
behavior: "only-new",
action: "connect",
createMode: "connect",
createButtonText: "Add Passkey",
onSuccess: p,
onError: p,
dense: !0
}
) : /* @__PURE__ */ L(O, { children: [
h.map((r) => /* @__PURE__ */ s(l, { item: r }, r?.provider)),
g.map((r) => /* @__PURE__ */ s(l, { item: r }, r.id)),
y.map((r) => /* @__PURE__ */ s(l, { item: r }, r.id)),
A.wallet || A.arcSphere ? null : /* @__PURE__ */ s(
T,
{
behavior: "only-new",
action: "connect",
createMode: "connect",
createButtonText: "Add New Passkey",
onSuccess: p,
onError: p,
dense: !0,
sx: {
px: 1.5,
py: 1,
gap: 0.75
}
}
)
] })
}
);
}
export {
q as default
};