@0xsequence/connect
Version:
Connect package for Sequence Web SDK
156 lines • 10.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.XWaasConnectButton = exports.EpicWaasConnectButton = exports.AppleWaasConnectButton = exports.GoogleWaasConnectButton = exports.GuestWaasConnectButton = exports.ShowAllWalletsButton = exports.ConnectButton = exports.getLogo = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_1 = require("@0xsequence/design-system");
const google_1 = require("@react-oauth/google");
const react_1 = require("react");
const react_apple_signin_auth_1 = require("react-apple-signin-auth");
const XAuth_js_1 = require("../../connectors/X/XAuth.js");
const localStorage_js_1 = require("../../constants/localStorage.js");
const useStorage_js_1 = require("../../hooks/useStorage.js");
const BUTTON_HEIGHT = '52px';
const BUTTON_HEIGHT_DESCRIPTIVE = '44px';
const iconSizeClasses = 'w-8 h-8';
const iconDescriptiveSizeClasses = 'w-6 h-6';
const getLogo = (theme, walletProps) => theme === 'dark'
? walletProps.logoDark || walletProps.monochromeLogoDark
: walletProps.logoLight || walletProps.monochromeLogoLight;
exports.getLogo = getLogo;
const ConnectButton = (props) => {
const { connector, label, disableTooltip, onConnect } = props;
const { theme } = (0, design_system_1.useTheme)();
const walletProps = connector._wallet;
const isDescriptive = props.isDescriptive || false;
const Logo = (0, exports.getLogo)(theme, walletProps);
if (isDescriptive) {
return ((0, jsx_runtime_1.jsx)(design_system_1.Tooltip, { message: label || walletProps.name, side: "bottom", disabled: disableTooltip, children: (0, jsx_runtime_1.jsxs)(design_system_1.Card, { className: "flex gap-3 justify-center items-center w-full", clickable: true, onClick: () => onConnect(connector), style: { height: BUTTON_HEIGHT_DESCRIPTIVE }, children: [(0, jsx_runtime_1.jsx)(Logo, { className: iconDescriptiveSizeClasses }), (0, jsx_runtime_1.jsxs)(design_system_1.Text, { color: "primary", variant: "normal", fontWeight: "bold", children: ["Continue with ", label || walletProps.name] })] }) }));
}
return ((0, jsx_runtime_1.jsx)(design_system_1.Tooltip, { message: label || walletProps.name, disabled: disableTooltip, children: (0, jsx_runtime_1.jsx)(design_system_1.Card, { className: "flex justify-center items-center w-full", clickable: true, onClick: () => onConnect(connector), style: {
height: BUTTON_HEIGHT
}, children: (0, jsx_runtime_1.jsx)(Logo, { className: iconSizeClasses }) }) }));
};
exports.ConnectButton = ConnectButton;
const ShowAllWalletsButton = ({ onClick }) => {
return ((0, jsx_runtime_1.jsx)(design_system_1.Tooltip, { message: "Show more", children: (0, jsx_runtime_1.jsx)(design_system_1.Card, { className: "flex justify-center items-center w-full", clickable: true, onClick: onClick, style: {
height: BUTTON_HEIGHT
}, children: (0, jsx_runtime_1.jsx)(design_system_1.ContextMenuIcon, { className: "text-primary", size: "xl" }) }) }));
};
exports.ShowAllWalletsButton = ShowAllWalletsButton;
const GuestWaasConnectButton = (props) => {
const { connector, onConnect, setIsLoading } = props;
return ((0, jsx_runtime_1.jsx)(exports.ConnectButton, { ...props, connector: connector, onConnect: () => {
setIsLoading(true);
onConnect(connector);
}, disableTooltip: true }));
};
exports.GuestWaasConnectButton = GuestWaasConnectButton;
const GoogleWaasConnectButton = (props) => {
const { connector, onConnect, isDescriptive = false } = props;
const storage = (0, useStorage_js_1.useStorage)();
const { theme } = (0, design_system_1.useTheme)();
const walletProps = connector._wallet;
const Logo = (0, exports.getLogo)(theme, walletProps);
const WaasLoginContent = () => {
if (isDescriptive) {
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 justify-center items-center bg-background-secondary absolute pointer-events-none w-full h-full top-0 right-0", children: [(0, jsx_runtime_1.jsx)(Logo, { className: iconDescriptiveSizeClasses }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "primary", variant: "normal", fontWeight: "bold", children: "Continue with Google" })] }));
}
return ((0, jsx_runtime_1.jsx)("div", { className: "flex bg-background-secondary justify-center items-center absolute pointer-events-none w-full h-full top-0 right-0", children: (0, jsx_runtime_1.jsx)(Logo, { className: iconSizeClasses }) }));
};
const buttonHeight = isDescriptive ? BUTTON_HEIGHT_DESCRIPTIVE : BUTTON_HEIGHT;
return ((0, jsx_runtime_1.jsx)(design_system_1.Tooltip, { message: "Google", disabled: true, children: (0, jsx_runtime_1.jsxs)(design_system_1.Card, { className: "bg-transparent p-0 w-full relative", clickable: true, style: {
height: buttonHeight
}, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-row h-full overflow-hidden items-center justify-center", style: {
opacity: 0.0000001,
transform: 'scale(100)'
}, children: (0, jsx_runtime_1.jsx)(google_1.GoogleLogin, { width: "56", type: "icon", size: "large", onSuccess: credentialResponse => {
if (credentialResponse.credential) {
storage?.setItem(localStorage_js_1.LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential);
onConnect(connector);
}
}, onError: () => {
console.log('Login Failed');
} }) }), (0, jsx_runtime_1.jsx)(WaasLoginContent, {})] }) }));
};
exports.GoogleWaasConnectButton = GoogleWaasConnectButton;
const AppleWaasConnectButton = (props) => {
const { connector, onConnect } = props;
const storage = (0, useStorage_js_1.useStorage)();
const { data: appleClientId } = (0, useStorage_js_1.useStorageItem)(localStorage_js_1.LocalStorageKey.WaasAppleClientID);
const { data: appleRedirectUri } = (0, useStorage_js_1.useStorageItem)(localStorage_js_1.LocalStorageKey.WaasAppleRedirectURI);
return appleClientId && appleRedirectUri ? ((0, jsx_runtime_1.jsx)(exports.ConnectButton, { ...props, connector: connector, onConnect: () => {
react_apple_signin_auth_1.appleAuthHelpers.signIn({
authOptions: {
clientId: appleClientId,
redirectURI: appleRedirectUri,
scope: 'openid email',
usePopup: true
},
onSuccess: (response) => {
if (response.authorization?.id_token) {
storage?.setItem(localStorage_js_1.LocalStorageKey.WaasAppleIdToken, response.authorization.id_token);
onConnect(connector);
}
else {
console.log('Apple login error: No id_token found');
}
},
onError: (error) => console.error(error)
});
}, disableTooltip: true })) : null;
};
exports.AppleWaasConnectButton = AppleWaasConnectButton;
const EpicWaasConnectButton = (props) => {
const { connector } = props;
const { data: authUrl } = (0, useStorage_js_1.useStorageItem)(localStorage_js_1.LocalStorageKey.WaasEpicAuthUrl);
return authUrl ? ((0, jsx_runtime_1.jsx)(exports.ConnectButton, { ...props, connector: connector, onConnect: () => {
window.location.href = authUrl;
}, disableTooltip: true })) : null;
};
exports.EpicWaasConnectButton = EpicWaasConnectButton;
const XWaasConnectButton = (props) => {
const { connector, onConnect } = props;
const storage = (0, useStorage_js_1.useStorage)();
const [XCodeVerifier, setXCodeVerifier] = (0, react_1.useState)('');
const [XClientId, setXClientId] = (0, react_1.useState)('');
const [XRedirectURI, setXRedirectURI] = (0, react_1.useState)('');
const { data: authUrl } = (0, useStorage_js_1.useStorageItem)(localStorage_js_1.LocalStorageKey.WaasXAuthUrl);
(0, react_1.useEffect)(() => {
const getStorageItems = async () => {
const codeVerifier = await storage?.getItem(localStorage_js_1.LocalStorageKey.WaasXCodeVerifier);
const XClientId = await storage?.getItem(localStorage_js_1.LocalStorageKey.WaasXClientID);
const XRedirectURI = await storage?.getItem(localStorage_js_1.LocalStorageKey.WaasXRedirectURI);
setXCodeVerifier(codeVerifier ?? '');
setXClientId(XClientId ?? '');
setXRedirectURI(XRedirectURI ?? '');
};
getStorageItems();
}, []);
return ((0, jsx_runtime_1.jsx)(exports.ConnectButton, { ...props, connector: connector, onConnect: () => {
const popup = window.open(authUrl, 'XAuthPopup', 'width=700,height=700');
const handleMessage = async (event) => {
if (event.data?.type !== 'OAUTH_RETURN') {
return;
}
if (event.source !== popup) {
return;
}
window.removeEventListener('message', handleMessage);
popup?.close();
const { code } = event.data.data || {};
if (code && XCodeVerifier) {
try {
const idToken = await (0, XAuth_js_1.getXIdToken)(code, XCodeVerifier, XClientId, XRedirectURI);
storage?.setItem(localStorage_js_1.LocalStorageKey.WaasXIdToken, idToken);
onConnect(connector);
}
catch (error) {
console.log('X login error', error);
}
}
};
window.addEventListener('message', handleMessage);
}, disableTooltip: true }));
};
exports.XWaasConnectButton = XWaasConnectButton;
//# sourceMappingURL=ConnectButton.js.map