@0xfutbol/id
Version:
React component library with shared providers for 0xFutbol ID
72 lines (71 loc) • 5.59 kB
JavaScript
'use strict';var jsxRuntime=require('react/jsx-runtime'),index=require('./index-gEYw6hWC.js'),React=require('react');require('@0xfutbol/id-sign'),require('react-use'),require('@0xfutbol/constants'),require('thirdweb'),require('@matchain/matchid-sdk-react'),require('@tanstack/react-query'),require('@matchain/matchid-sdk-react/index.css'),require('react-dom');/**
* @internal
*/
function InAppWalletFormUIScreen(props) {
const isCompact = props.size === "compact";
const { initialScreen, screen } = index.ch();
// This is only used when requireApproval is true to accept the TOS
const [isApproved, setIsApproved] = React.useState(false);
const isInitialScreen = screen === props.wallet && initialScreen === props.wallet;
const onBack = isInitialScreen && !props.isLinking ? undefined : props.goBack;
return (jsxRuntime.jsxs(index.aU, { fullHeight: true, flex: "column", p: "lg", animate: "fadein", style: {
minHeight: "250px",
}, children: [isCompact &&
(isInitialScreen ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index.aV, { onBack: onBack, leftAligned: !props.isLinking, title: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!props.meta?.titleIconUrl ? null : (jsxRuntime.jsx(index.aX, { src: props.meta?.titleIconUrl, width: index.a_.md, height: index.a_.md, client: props.client })), jsxRuntime.jsx(index.ci, { children: props.meta?.title ??
props.inAppWalletLocale.emailLoginScreen.title })] }) }), jsxRuntime.jsx(index.aW, { y: "lg" })] })) : (jsxRuntime.jsx(index.aV, { onBack: onBack, title: props.inAppWalletLocale.signIn }))), jsxRuntime.jsx(index.aU, { expand: true, flex: "column", center: "y", p: isCompact ? undefined : "lg", children: jsxRuntime.jsx(index.cj, { ...props, locale: props.inAppWalletLocale, disabled: props.meta?.requireApproval && !isApproved }) }), isCompact &&
(props.meta?.showThirdwebBranding !== false ||
props.meta?.termsOfServiceUrl ||
props.meta?.privacyPolicyUrl) && jsxRuntime.jsx(index.aW, { y: "xl" }), jsxRuntime.jsxs(index.aU, { flex: "column", gap: "lg", children: [jsxRuntime.jsx(index.ck, { 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 && jsxRuntime.jsx(index.cl, {})] })] }));
}/**
*
* @internal
*/
function InAppWalletConnectUI(props) {
const data = index.cm();
const setSelectionData = index.cn();
const state = data;
const localeId = props.connectLocale.id;
const locale = index.co(localeId);
const { initialScreen } = index.ch();
if (!locale) {
return jsxRuntime.jsx(index.aT, {});
}
// 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 (jsxRuntime.jsx(index.cp, { 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 (jsxRuntime.jsx(index.cq, { 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 (jsxRuntime.jsx(index.cr, { 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 (jsxRuntime.jsx(index.cs, { 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 (jsxRuntime.jsx(index.ct, { locale: locale, done: done, goBack: goBackToMain, wallet: props.wallet, state: state, client: props.client, size: props.size, connectLocale: props.connectLocale }));
}
return (jsxRuntime.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 }));
}exports.default=InAppWalletConnectUI;//# sourceMappingURL=InAppWalletConnectUI-C97FUdZX.js.map