@particle-network/authkit
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
167 lines (160 loc) • 8.09 kB
JavaScript
"use client";
import {
loading2_default
} from "./chunk-LXWNDWF5.mjs";
import {
svg_icon_default
} from "./chunk-LCBZJYJ2.mjs";
import {
power_footer_default
} from "./chunk-VOTXREGQ.mjs";
import {
getLoginLogos,
isServer,
useConnect,
useCustomNavigate,
useLogin_default,
useParticleAuth,
useTranslation
} from "./chunk-OSW3ZJOZ.mjs";
import "./chunk-55PCA22M.mjs";
// src/pages/index/index.tsx
import { isConnected, isSocialAuthType } from "@particle-network/auth-core";
import { message } from "antd";
import base64url from "base64url";
import qs from "qs";
import React2, { useEffect, useState } from "react";
// src/components/socialLoading/index.tsx
import React from "react";
// src/components/socialLoading/index.less
var socialLoading_default = ".social-loading-content {\n text-align: center;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 0;\n padding-bottom: 40px;\n}\n.social-loading-content .wrap {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n.social-loading-content .wrap .social-logo-content {\n width: 105px;\n height: 105px;\n border-radius: 100%;\n position: relative;\n}\n.social-loading-content .wrap .social-logo-content.failed {\n cursor: pointer;\n}\n.social-loading-content .wrap .social-logo-content .logo {\n width: 100%;\n height: 100%;\n}\n.social-loading-content .wrap .social-logo-content .logo img {\n width: 100%;\n height: auto;\n}\n.social-loading-content .wrap .social-logo-content .spin {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n animation: social-loading-spin 1.4s linear infinite;\n}\n.social-loading-content .wrap .social-logo-content .spin img {\n width: 100%;\n height: 100%;\n}\n.social-loading-content .wrap .social-logo-content .refresh-btn {\n font-size: 19px;\n position: absolute;\n bottom: 10px;\n right: 27px;\n}\n.social-loading-content .wrap .title {\n margin-top: 10px;\n margin-bottom: 10px;\n}\n.social-loading-content .wrap .desc {\n width: 70%;\n line-height: 1.2;\n color: var(--secondary-text-color);\n}\n@keyframes social-loading-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n";
// src/components/socialLoading/index.tsx
var SocialLoading = ({ authType, isFailed = true }) => {
const { t } = useTranslation();
const [spin, setSpin] = React.useState(!isFailed);
const { socialAuthLogin } = useLogin_default();
const { modalOptions } = useParticleAuth();
return /* @__PURE__ */ React.createElement("div", { className: "social-loading-content" }, /* @__PURE__ */ React.createElement("style", null, socialLoading_default), /* @__PURE__ */ React.createElement("div", { className: "wrap" }, /* @__PURE__ */ React.createElement(
"div",
{
className: `social-logo-content ${isFailed ? "failed" : ""}`,
onClick: () => {
if (!isFailed || spin)
return;
setSpin(true);
socialAuthLogin({
socialType: authType
});
}
},
/* @__PURE__ */ React.createElement("div", { className: "logo" }, /* @__PURE__ */ React.createElement("img", { src: getLoginLogos(modalOptions.themeType)[authType] || "", alt: "logo" })),
spin && /* @__PURE__ */ React.createElement("div", { className: "spin" }, /* @__PURE__ */ React.createElement("img", { src: loading2_default, alt: "loading" })),
isFailed && !spin && /* @__PURE__ */ React.createElement("div", { className: "refresh-btn" }, /* @__PURE__ */ React.createElement(svg_icon_default, { className: "refresh-icon", name: "refresh_icon" }))
), /* @__PURE__ */ React.createElement("div", { className: "title" }, !isFailed ? t("login.logging_you_in") : t("login.request_failed")), isFailed && /* @__PURE__ */ React.createElement("div", { className: "desc" }, t("login.something_wrong"))), /* @__PURE__ */ React.createElement(power_footer_default, { className: "footer-box-v2" }));
};
var socialLoading_default2 = SocialLoading;
// src/pages/index/index.less
var index_default = ".index-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n color: var(--text-color);\n}\n";
// src/pages/index/index.tsx
var Index = () => {
const { connect } = useConnect();
const navigate = useCustomNavigate();
const { setConnectionStatus, socialConnectCallback, setAuthCoreModal } = useParticleAuth();
const [socialLoginLoading, setSocialLoginLoading] = React2.useState(false);
const [authType, setAuthType] = useState("");
const [socialLoginFailed, setSocialLoginFailed] = useState(false);
const onConnectCompleted = (detail) => {
var _a, _b;
if ((_a = window.particle) == null ? void 0 : _a.ethereum) {
window.particle.ethereum.isSocialConnecting = false;
}
if ((_b = window.particle) == null ? void 0 : _b.solana) {
window.particle.solana.isSocialConnecting = false;
}
window.dispatchEvent(
new CustomEvent("particle:socialConnectCompleted", {
detail
})
);
};
const thirdpartyLogin = async () => {
var _a;
try {
const query = qs.parse(!isServer() ? window.location.search : "", {
ignoreQueryPrefix: true
});
const particleThirdpartyParamsContent = query == null ? void 0 : query.particleThirdpartyParams;
if (!particleThirdpartyParamsContent) {
if (!isConnected()) {
setConnectionStatus("disconnected");
}
return;
}
delete query.particleThirdpartyParams;
const replaceUrl = (window.location.origin + window.location.pathname + "?" + qs.stringify(query)).replace(
/\?$/,
""
);
window.history.replaceState({}, document.title, replaceUrl);
document.title = document.title || replaceUrl;
const particleThirdpartyParams = JSON.parse(base64url.decode(particleThirdpartyParamsContent));
const { code, nonce, appState, error } = particleThirdpartyParams;
const appStateObj = appState ? JSON.parse(base64url.decode(appState)) : {};
const { authorization, chain, purpose, verifyToken } = appStateObj;
if (error) {
if (!isConnected()) {
setConnectionStatus("disconnected");
}
if (!purpose) {
(_a = socialConnectCallback == null ? void 0 : socialConnectCallback.onError) == null ? void 0 : _a.call(socialConnectCallback, new Error(error));
} else {
message.error(error);
}
if (purpose !== "bindLoginAccount") {
setSocialLoginFailed(true);
}
return;
}
const authType2 = nonce.split("@")[0];
setAuthType(authType2);
if (purpose === "bindLoginAccount") {
navigate("/login-account/bind-loading", {
state: {
authType: authType2,
verifyToken,
code,
nonce
},
replace: true
});
} else {
if (isSocialAuthType(authType2)) {
setSocialLoginLoading(true);
setAuthCoreModal({
particleModalVisible: true
});
}
console.log(`auth-core-modal: social:${authType2} connect start`);
await connect({ socialType: authType2, code, nonce, authorization, chain });
}
} catch (error) {
console.error("after redirect, login or bind", error);
if (!isConnected()) {
setConnectionStatus("disconnected");
}
onConnectCompleted({
result: Object.freeze(error)
});
}
setSocialLoginLoading(false);
};
useEffect(() => {
thirdpartyLogin();
}, []);
return /* @__PURE__ */ React2.createElement("div", { className: "index-container" }, /* @__PURE__ */ React2.createElement("style", null, index_default), socialLoginLoading && /* @__PURE__ */ React2.createElement(socialLoading_default2, { authType, isFailed: socialLoginFailed }));
};
var index_default2 = Index;
export {
index_default2 as default
};
//# sourceMappingURL=index-JN3GR2EB.mjs.map