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