@pushchain/ui-kit
Version:
## Overview
260 lines (257 loc) • 13 kB
JavaScript
;
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 = 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, toggleButtonRef, sendMessageToPushWallet }) => {
var _a, _b;
const { modal } = config;
const { pushChainClient } = (0, usePushChainClient_1.usePushChainClient)((config === null || config === void 0 ? void 0 : config.uid) || 'default');
const { top, left } = (0, useSmartModalPosition_1.useSmartModalPosition)(toggleButtonRef, 450, 675, config.uid);
const handleSendTransaction = (data) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
if (!pushChainClient)
return;
const res = yield pushChainClient.universal.sendTransaction(Object.assign(Object.assign({}, data), { value: BigInt(data.value) }));
sendMessageToPushWallet({
type: constants_1.APP_TO_WALLET_ACTION.PUSH_SEND_TRANSACTION_RESPONSE,
data: res.hash,
});
});
(0, react_1.useEffect)(() => {
const pushMessageHandler = (event) => {
var _a;
if (((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.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 &&
((_a = config.modal) === null || _a === void 0 ? void 0 : _a.connectedLayout) ===
constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER &&
((_b = config.modal) === null || _b === void 0 ? void 0 : _b.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, themeMode: themeMode ? themeMode : constants_1.PushUI.CONSTANTS.THEME.DARK, accountMenuVariant: modal === null || modal === void 0 ? void 0 : modal.connectedLayout, modalDefaults: modal, style: { top, left }, children: [isIframeLoading && ((0, jsx_runtime_1.jsxs)(FrameLoadingContainer, { themeMode: themeMode ? themeMode : constants_1.PushUI.CONSTANTS.THEME.DARK, 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)" })] })] })), (0, jsx_runtime_1.jsx)(FrameSubContainer, { isWalletMinimised: isWalletMinimised, isIframeLoading: isIframeLoading, children: (0, jsx_runtime_1.jsxs)(SplitContainer, { children: [(modal === null || modal === void 0 ? void 0 : modal.appPreview) &&
modalAppData &&
(modal === null || modal === void 0 ? void 0 : 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 === null || modalAppData === void 0 ? void 0 : modalAppData.logoURL) && ((0, jsx_runtime_1.jsx)(ImageContainer, { children: (0, jsx_runtime_1.jsx)(Image, { src: modalAppData === null || modalAppData === void 0 ? void 0 : 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 === null || modalAppData === void 0 ? void 0 : 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=1
`, allow: "clipboard-write; clipboard-read; publickey-credentials-create; publickey-credentials-get; display-capture; *", ref: iframeRef, style: {
border: 'none',
width: '100%',
height: universalAccount
? (modal === null || modal === void 0 ? void 0 : 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: 99;
`;
const FrameContainer = styled_components_1.default.div `
position: fixed;
top: ${({ style }) => `${style === null || style === void 0 ? void 0 : style.top}px`};
left: ${({ style }) => `${style === null || style === void 0 ? void 0 : style.left}px`};
display: flex;
flex-direction: column;
background-image: url(${({ modalDefaults }) => modalDefaults === null || modalDefaults === void 0 ? void 0 : 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: 999;
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'};
right: ${({ universalAccount, accountMenuVariant }) => universalAccount
? accountMenuVariant === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL
? '0'
: '10px'
: '0'};
top: ${({ universalAccount, accountMenuVariant }) => universalAccount
? accountMenuVariant === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL
? '0'
: '70px'
: '0'};
@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 DashButtonContainer = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
height: 20px;
width: 20px;
padding: 2px;
`;
const LoadingTextContainer = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
height: 100%;
`;
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 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;
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