@pushchain/ui-kit
Version:
Push Chain is a true universal L1 that is 100% EVM compatible. It allows developers to deploy once and make their apps instantly compatible with users from all other L1s (Ethereum, Solana, etc) with zero on-chain code change.
285 lines (282 loc) • 13.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoginModal = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const common_1 = require("../../components/common");
const constants_1 = require("../../constants");
const useSmartModalPosition_1 = require("./useSmartModalPosition");
const usePushChainClient_1 = require("../../hooks/usePushChainClient");
const LoginModal = ({ iframeRef, isWalletVisible, isIframeLoading, themeMode = constants_1.PushUI.CONSTANTS.THEME.DARK, modalAppData, setIframeLoading, sendWalletConfig, universalAccount, isWalletMinimised, setMinimiseWallet, handleUserLogOutEvent, config, sendMessageToPushWallet, isReadOnly, toggleButtonRefs, activeTriggerId, }) => {
const [version, setVersion] = react_1.default.useState(8);
const { modal } = config;
const { pushChainClient } = (0, usePushChainClient_1.usePushChainClient)(config?.uid || 'default');
const { top, left } = (0, useSmartModalPosition_1.useSmartModalPosition)(activeTriggerId || null, toggleButtonRefs, 450, 675, config.uid);
const handleSendTransaction = async (data) => {
if (!pushChainClient)
return;
const res = await pushChainClient.universal.sendTransaction({
...data,
value: data.value ? BigInt(data.value) : data.value
});
sendMessageToPushWallet({
type: constants_1.APP_TO_WALLET_ACTION.PUSH_SEND_TRANSACTION_RESPONSE,
data: res.hash,
});
};
(0, react_1.useEffect)(() => {
if (config.version) {
setVersion(config.version);
}
}, [config]);
(0, react_1.useEffect)(() => {
const pushMessageHandler = (event) => {
if (iframeRef.current?.contentWindow !== event.source || !pushChainClient)
return;
switch (event.data.type) {
case constants_1.WALLET_TO_APP_ACTION.PUSH_SEND_TRANSACTION:
handleSendTransaction(event.data.data);
break;
default:
console.warn('Unknown message type:', event.data.type);
}
};
window.addEventListener('message', pushMessageHandler);
return () => window.removeEventListener('message', pushMessageHandler);
}, [pushChainClient]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isWalletMinimised &&
universalAccount &&
config.modal?.connectedLayout ===
constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER &&
config.modal?.connectedInteraction ===
constants_1.PushUI.CONSTANTS.CONNECTED.INTERACTION.BLUR && ((0, jsx_runtime_1.jsx)(BlurBackground, { onClick: () => setMinimiseWallet(!isWalletMinimised) })), isWalletVisible ? ((0, jsx_runtime_1.jsxs)(FrameContainer, { "$isWalletMinimised": isWalletMinimised, "$universalAccount": universalAccount, "$accountMenuVariant": modal?.connectedLayout, "$modalDefaults": modal, "$style": { top, left }, children: [(isIframeLoading && !isReadOnly) && ((0, jsx_runtime_1.jsxs)(FrameLoadingContainer, { children: [(0, jsx_runtime_1.jsx)(CloseButtonContainer, { onClick: () => {
handleUserLogOutEvent();
}, children: (0, jsx_runtime_1.jsx)(common_1.CrossIcon, { height: "20px", width: "20px", color: themeMode === constants_1.PushUI.CONSTANTS.THEME.LIGHT ? '#000' : '#FFF' }) }), (0, jsx_runtime_1.jsxs)(LoadingTextContainer, { children: [(0, jsx_runtime_1.jsx)(LoadingText, { children: "Loading..." }), (0, jsx_runtime_1.jsx)(common_1.Spinner, { color: "var(--pw-int-brand-primary-color)" })] })] })), isIframeLoading && isReadOnly && !isWalletMinimised && ((0, jsx_runtime_1.jsxs)(FrameLoadingContainerSecondary, { children: [(0, jsx_runtime_1.jsx)(CloseButtonContainer, { onClick: () => {
setMinimiseWallet(true);
}, children: (0, jsx_runtime_1.jsx)(common_1.CrossIcon, { height: "20px", width: "20px", color: themeMode === constants_1.PushUI.CONSTANTS.THEME.LIGHT ? '#000' : '#FFF' }) }), (0, jsx_runtime_1.jsxs)(LoadingTextContainerSecondary, { children: [(0, jsx_runtime_1.jsx)(LoadingText, { children: "Loading..." }), (0, jsx_runtime_1.jsx)(common_1.Spinner, { color: "var(--pw-int-brand-primary-color)" })] })] })), (0, jsx_runtime_1.jsx)(FrameSubContainer, { "$isWalletMinimised": isWalletMinimised, "$isIframeLoading": isIframeLoading, children: (0, jsx_runtime_1.jsxs)(SplitContainer, { children: [modal?.appPreview &&
modalAppData &&
modal?.loginLayout === constants_1.PushUI.CONSTANTS.LOGIN.LAYOUT.SPLIT && ((0, jsx_runtime_1.jsx)(AppPreviewContainer, { "$universalAccount": universalAccount, children: (0, jsx_runtime_1.jsxs)(AppContainer, { children: [modalAppData?.logoURL && ((0, jsx_runtime_1.jsx)(ImageContainer, { children: (0, jsx_runtime_1.jsx)(Image, { src: modalAppData?.logoURL, alt: modalAppData.title }) })), (0, jsx_runtime_1.jsxs)(TextContainer, { "$themeMode": themeMode ? themeMode : constants_1.PushUI.CONSTANTS.THEME.DARK, "$textColor": themeMode === constants_1.PushUI.CONSTANTS.THEME.LIGHT
? '#F5F6F8'
: '#17181b', children: [(0, jsx_runtime_1.jsx)(Heading, { children: modalAppData.title }), (0, jsx_runtime_1.jsx)(Description, { children: modalAppData?.description })] })] }) })), ((0, jsx_runtime_1.jsx)(MainFrameContainer, { children: (0, jsx_runtime_1.jsx)("iframe", { src: `
${constants_1.WALLET_CONFIG_URL[config.network]}/auth?app=${window.location.origin}&version=${version}
`, allow: "clipboard-write; clipboard-read; publickey-credentials-create; publickey-credentials-get; display-capture; *", ref: iframeRef, style: {
border: 'none',
width: '100%',
height: universalAccount
? modal?.connectedLayout ===
constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL
? '100vh'
: '675px'
: '100vh',
borderRadius: universalAccount ? '10px' : '0px',
}, onLoad: () => {
setTimeout(() => {
setIframeLoading(false);
sendWalletConfig();
}, 100);
} }) }))] }) })] })) : null] }));
};
exports.LoginModal = LoginModal;
const BlurBackground = styled_components_1.default.div `
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
backdrop-filter: blur(8px);
z-index: 999999998;
`;
const FrameContainer = styled_components_1.default.div `
position: fixed;
top: ${({ $universalAccount, $accountMenuVariant, $style }) => $universalAccount
? $accountMenuVariant === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL
? '0'
: $style?.top != null
? `${$style.top}px`
: '50px'
: '0'};
left: ${({ $style }) => ($style?.left != null ? `${$style.left}px` : 'auto')};
right: ${({ $style, $universalAccount, $accountMenuVariant }) => $style?.left != null
? 'auto'
: $universalAccount
? $accountMenuVariant === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL
? '0'
: '10px'
: '0'};
display: flex;
flex-direction: column;
background-image: url(${({ $modalDefaults }) => $modalDefaults?.bgImage});
background-size: cover;
background-color: ${({ $universalAccount, $accountMenuVariant }) => $universalAccount && $accountMenuVariant === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER ?
'transparent' :
'var(--pw-int-bg-primary-color)'};
border-radius: ${({ $universalAccount }) => $universalAccount ? '10px' : 'unset'};
z-index: 999999999;
width: ${({ $universalAccount, $isWalletMinimised, $accountMenuVariant }) => $isWalletMinimised
? '0px'
: $universalAccount
? $accountMenuVariant === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL
? '100%'
: '450px'
: '100vw'};
height: ${({ $universalAccount, $isWalletMinimised, $accountMenuVariant }) => $isWalletMinimised
? '0px'
: $universalAccount
? $accountMenuVariant === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL
? '100vw'
: '675px'
: '100vh'};
@media (max-width: 425px) {
width: ${({ $universalAccount, $isWalletMinimised }) => $isWalletMinimised ? '0px' : $universalAccount ? '100%' : '100%'};
right: ${({ $universalAccount }) => ($universalAccount ? '2%' : '0')};
top: ${({ $universalAccount, $accountMenuVariant }) => $universalAccount
? $accountMenuVariant === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL
? '0'
: '8%'
: '0'};
}
`;
const CloseButtonContainer = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: flex-end;
cursor: pointer;
padding: 8px 16px;
`;
const LoadingTextContainer = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
height: 100%;
`;
const LoadingTextContainerSecondary = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
height: 600px;
`;
const LoadingText = styled_components_1.default.p `
font-size: 18px;
font-weight: 500;
line-height: 27px;
color: inherit;
font-family: var(--pw-int-font-family);
margin: 0px;
width: auto;
`;
const FrameLoadingContainer = styled_components_1.default.div `
height: 100%;
width: 100%;
flex-direction: column;
display: flex;
padding: var(--spacing-xxs) var(--spacing-xxs);
color: var(--pw-int-text-primary-color);
background-color: var(--pw-int-bg-primary-color);
box-sizing: border-box;
`;
const FrameLoadingContainerSecondary = styled_components_1.default.div `
height: 600px;
width: 85%;
margin-top: 25px;
align-self: center;
border-radius: 24px;
flex-direction: column;
display: flex;
padding: var(--spacing-xxs) var(--spacing-xxs);
color: var(--pw-int-text-primary-color);
background-color: var(--pw-int-bg-primary-color);
box-sizing: border-box;
`;
const FrameSubContainer = styled_components_1.default.div `
display: ${({ $isWalletMinimised, $isIframeLoading }) => $isWalletMinimised || $isIframeLoading ? 'none' : 'flex'};
width: 100%;
height: 100%;
flex-direction: column;
`;
const AccountContainer = styled_components_1.default.div `
width: 100%;
display: flex;
align-items: center;
position: absolute;
top: 8px;
right: 8px;
justify-content: flex-end;
// padding: var(--spacing-xxs) var(--spacing-xxs);
border-top-right-radius: ${({ $universalAccount }) => $universalAccount ? '10px' : '0px'};
border-top-left-radius: ${({ $universalAccount }) => $universalAccount ? '10px' : '0px'};
background-color: transparent;
`;
const SplitContainer = styled_components_1.default.div `
display: flex;
`;
const AppPreviewContainer = styled_components_1.default.div `
display: ${({ $universalAccount }) => ($universalAccount ? 'none' : 'flex')};
align-items: center;
justify-content: center;
flex: 1;
padding: 100px 10px 10px 10px;
background-color: transparent;
@media (max-width: 1024px) {
display: none;
}
`;
const AppContainer = styled_components_1.default.div `
width: 300px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
height: 700px;
justify-content: center;
`;
const MainFrameContainer = styled_components_1.default.div `
flex: 1;
`;
const ImageContainer = styled_components_1.default.div `
width: 64px;
height: 64px;
`;
const Image = styled_components_1.default.img `
width: inherit;
height: inherit;
border-radius: 16px;
border: 1px solid var(--stroke-secondary, #313338);
`;
const TextContainer = styled_components_1.default.div `
font-family: var(--pw-int-font-family);
src: url('./assets/fonts/FKGroteskNeue-Regular.woff2') format('woff2'),
url('./assets/fonts/FKGroteskNeue-Regular.woff') format('woff');
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 22px;
text-align: left;
color: ${({ $themeMode, $textColor }) => $themeMode === constants_1.PushUI.CONSTANTS.THEME.LIGHT
? $textColor
? $textColor
: '#17181b'
: $textColor
? $textColor
: '#F5F6F8'};
`;
const Heading = styled_components_1.default.h1 `
font-size: var(--pw-int-text-heading-xsmall-size);
font-weight: 500;
line-height: 27px;
color: var(--pw-int-text-primary-color);
`;
const Description = styled_components_1.default.p `
font-size: var(--pw-int-text-body-large-size);
line-height: 22px;
font-weight: 400;
color: var(--pw-int-text-secondary-color);
`;
//# sourceMappingURL=index.js.map