@0xfutbol/id
Version:
React component library with shared providers for 0xFutbol ID
72 lines (71 loc) • 5.75 kB
JavaScript
import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {aJ as useScreenContext,aK as Container,aL as ModalHeader,aM as Img,aN as iconSize,aO as ModalTitle,aP as Spacer,aQ as ConnectWalletSocialOptions,aR as TOS,aS as PoweredByThirdweb,aT as useSelectionData,aU as useSetSelectionData,aV as useInAppWalletLocale,aW as LoadingScreen,aX as OTPLoginUI,aY as PassKeyLogin,aZ as WalletAuth,a_ as SocialLogin,a$ as GuestLogin}from'./index-BJCJzM2_.js';import {useState}from'react';import'@0xfutbol/id-sign';import'react-use';import'@0xfutbol/constants';import'thirdweb';import'@matchain/matchid-sdk-react';import'@tanstack/react-query';import'@matchain/matchid-sdk-react/index.css';import'react-dom';/**
* @internal
*/
function InAppWalletFormUIScreen(props) {
const isCompact = props.size === "compact";
const { initialScreen, screen } = useScreenContext();
// This is only used when requireApproval is true to accept the TOS
const [isApproved, setIsApproved] = useState(false);
const isInitialScreen = screen === props.wallet && initialScreen === props.wallet;
const onBack = isInitialScreen && !props.isLinking ? undefined : props.goBack;
return (jsxs(Container, { fullHeight: true, flex: "column", p: "lg", animate: "fadein", style: {
minHeight: "250px",
}, children: [isCompact &&
(isInitialScreen ? (jsxs(Fragment, { children: [jsx(ModalHeader, { onBack: onBack, leftAligned: !props.isLinking, title: jsxs(Fragment, { children: [!props.meta?.titleIconUrl ? null : (jsx(Img, { src: props.meta?.titleIconUrl, width: iconSize.md, height: iconSize.md, client: props.client })), jsx(ModalTitle, { children: props.meta?.title ??
props.inAppWalletLocale.emailLoginScreen.title })] }) }), jsx(Spacer, { y: "lg" })] })) : (jsx(ModalHeader, { onBack: onBack, title: props.inAppWalletLocale.signIn }))), jsx(Container, { expand: true, flex: "column", center: "y", p: isCompact ? undefined : "lg", children: jsx(ConnectWalletSocialOptions, { ...props, locale: props.inAppWalletLocale, disabled: props.meta?.requireApproval && !isApproved }) }), isCompact &&
(props.meta?.showThirdwebBranding !== false ||
props.meta?.termsOfServiceUrl ||
props.meta?.privacyPolicyUrl) && jsx(Spacer, { y: "xl" }), jsxs(Container, { flex: "column", gap: "lg", children: [jsx(TOS, { termsOfServiceUrl: props.meta?.termsOfServiceUrl, privacyPolicyUrl: props.meta?.privacyPolicyUrl, locale: props.connectLocale.agreement, requireApproval: props.meta?.requireApproval, onApprove: () => {
setIsApproved(!isApproved);
}, isApproved: isApproved }), props.meta?.showThirdwebBranding !== false && jsx(PoweredByThirdweb, {})] })] }));
}/**
*
* @internal
*/
function InAppWalletConnectUI(props) {
const data = useSelectionData();
const setSelectionData = useSetSelectionData();
const state = data;
const localeId = props.connectLocale.id;
const locale = useInAppWalletLocale(localeId);
const { initialScreen } = useScreenContext();
if (!locale) {
return jsx(LoadingScreen, {});
}
// if the the modal starts out with the wallet's connect ui instead of wallet selector - going back to main screen requires staying on the same component and clearing the selection data
// otherwise, we go back to the wallet selector by calling props.goBack
const goBackToMain = () => {
if (initialScreen === props.wallet) {
setSelectionData({});
}
else {
props.goBack?.();
setSelectionData({});
}
};
const done = () => {
props.done();
setSelectionData({});
};
const otpUserInfo = state?.emailLogin
? { email: state.emailLogin }
: state?.phoneLogin
? { phone: state.phoneLogin }
: undefined;
if (otpUserInfo) {
return (jsx(OTPLoginUI, { userInfo: otpUserInfo, locale: locale, done: done, goBack: goBackToMain, wallet: props.wallet, chain: props.chain, client: props.client, size: props.size, isLinking: props.isLinking }));
}
if (state?.passkeyLogin) {
return (jsx(PassKeyLogin, { locale: props.connectLocale, wallet: props.wallet, done: done, onBack: goBackToMain, chain: props.chain, client: props.client, size: props.size, isLinking: props.isLinking }));
}
if (state?.walletLogin) {
return (jsx(WalletAuth, { meta: props.meta, inAppLocale: locale, walletConnect: props.walletConnect, wallet: props.wallet, client: props.client, size: props.size, chain: props.chain, done: done, onBack: goBackToMain || (() => setSelectionData({})), locale: props.connectLocale, isLinking: state.walletLogin.linking }));
}
if (state?.socialLogin) {
return (jsx(SocialLogin, { socialAuth: state.socialLogin.type, locale: locale, done: done, goBack: goBackToMain, wallet: props.wallet, state: state, chain: props.chain, client: props.client, size: props.size, connectLocale: props.connectLocale, isLinking: props.isLinking }));
}
if (state?.guestLogin) {
return (jsx(GuestLogin, { locale: locale, done: done, goBack: goBackToMain, wallet: props.wallet, state: state, client: props.client, size: props.size, connectLocale: props.connectLocale }));
}
return (jsx(InAppWalletFormUIScreen, { select: () => { }, connectLocale: props.connectLocale, inAppWalletLocale: locale, done: done, goBack: props.goBack, wallet: props.wallet, client: props.client, meta: props.meta, size: props.size, chain: props.chain, isLinking: props.isLinking }));
}export{InAppWalletConnectUI as default};//# sourceMappingURL=InAppWalletConnectUI-CPtdWlSj.js.map