@0xsequence/connect
Version:
Connect package for Sequence Web SDK
171 lines • 13.9 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Card, Modal, ModalPrimitive, Text } from '@0xsequence/design-system';
import { SequenceHooksProvider } from '@0xsequence/hooks';
import { ChainId } from '@0xsequence/network';
import { setupAnalytics } from '@0xsequence/provider';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { AnimatePresence } from 'motion/react';
import { useEffect, useState } from 'react';
import { hexToString } from 'viem';
import { useAccount, useConfig, useConnections } from 'wagmi';
import { DEFAULT_SESSION_EXPIRATION, LocalStorageKey, WEB_SDK_VERSION } from '../../constants/index.js';
import { AnalyticsContextProvider } from '../../contexts/Analytics.js';
import { ConnectConfigContextProvider } from '../../contexts/ConnectConfig.js';
import { ConnectModalContextProvider } from '../../contexts/ConnectModal.js';
import { SocialLinkContextProvider } from '../../contexts/SocialLink.js';
import { ThemeContextProvider } from '../../contexts/Theme.js';
import { WalletConfigContextProvider } from '../../contexts/WalletConfig.js';
import { useStorage } from '../../hooks/useStorage.js';
import { useWaasConfirmationHandler } from '../../hooks/useWaasConfirmationHandler.js';
import { useEmailConflict } from '../../hooks/useWaasEmailConflict.js';
import { isJSON } from '../../utils/helpers.js';
import { getModalPositionCss } from '../../utils/styling.js';
import { Connect } from '../Connect/Connect.js';
import { EpicAuthProvider } from '../EpicAuthProvider/index.js';
import { JsonTreeViewer } from '../JsonTreeViewer.js';
import { NetworkBadge } from '../NetworkBadge/index.js';
import { PageHeading } from '../PageHeading/index.js';
import { PoweredBySequence } from '../SequenceLogo/index.js';
import { ShadowRoot } from '../ShadowRoot/index.js';
import { SocialLink } from '../SocialLink/SocialLink.js';
import { TxnDetails } from '../TxnDetails/index.js';
export const SequenceConnectProvider = (props) => {
const { config, children } = props;
const { defaultTheme = 'dark', signIn = {}, position = 'center', displayedAssets: displayedAssetsSetting = [], readOnlyNetworks, ethAuth = {}, disableAnalytics = false, hideExternalConnectOptions = false, hideConnectedWallets = false, hideSocialConnectOptions = false, customCSS, waasConfigKey = '' } = config;
const defaultAppName = signIn.projectName || 'app';
const { expiry = DEFAULT_SESSION_EXPIRATION, app = defaultAppName, origin, nonce } = ethAuth;
const [openConnectModal, setOpenConnectModal] = useState(false);
const [theme, setTheme] = useState(defaultTheme || 'dark');
const [modalPosition, setModalPosition] = useState(position);
const [displayedAssets, setDisplayedAssets] = useState(displayedAssetsSetting);
const [analytics, setAnalytics] = useState();
const { address, isConnected } = useAccount();
const wagmiConfig = useConfig();
const storage = useStorage();
const connections = useConnections();
const waasConnector = connections.find(c => c.connector.id.includes('waas'))?.connector;
const [isWalletWidgetOpen, setIsWalletWidgetOpen] = useState(false);
useEffect(() => {
const handleWalletModalStateChange = (event) => {
const customEvent = event;
setIsWalletWidgetOpen(customEvent.detail.open);
};
window.addEventListener('sequence:wallet-modal-state-change', handleWalletModalStateChange);
return () => {
window.removeEventListener('sequence:wallet-modal-state-change', handleWalletModalStateChange);
};
}, []);
const [pendingRequestConfirmation, confirmPendingRequest, rejectPendingRequest] = useWaasConfirmationHandler(waasConnector, !isWalletWidgetOpen);
const googleWaasConnector = wagmiConfig.connectors.find(c => c.id === 'sequence-waas' && c._wallet.id === 'google-waas');
const googleClientId = googleWaasConnector?.params?.googleClientId || '';
const getAnalyticsClient = (projectAccessKey) => {
// @ts-ignore-next-line
const sequenceAnalytics = setupAnalytics(projectAccessKey);
const originalTrack = sequenceAnalytics.track.bind(sequenceAnalytics);
sequenceAnalytics.track = (...args) => {
const [event] = args;
if (event && typeof event === 'object' && 'props' in event) {
event.props = {
...event.props,
sdkType: 'sequence web sdk',
version: WEB_SDK_VERSION
};
}
return originalTrack?.(...args);
};
setAnalytics(sequenceAnalytics);
};
useEffect(() => {
if (!isConnected) {
analytics?.reset();
return;
}
if (address) {
analytics?.identify(address.toLowerCase());
}
}, [analytics, address, isConnected]);
useEffect(() => {
if (!disableAnalytics) {
getAnalyticsClient(config.projectAccessKey);
}
}, []);
useEffect(() => {
if (theme !== defaultTheme) {
setTheme(defaultTheme);
}
}, [defaultTheme]);
useEffect(() => {
if (modalPosition !== position) {
setModalPosition(position);
}
}, [position]);
// Write data in local storage for retrieval in connectors
useEffect(() => {
// Theme
// TODO: set the sequence theme once it is added to connect options
if (typeof theme === 'object') {
// localStorage.setItem(LocalStorageKey.Theme, JSON.stringify(theme))
}
else {
localStorage.setItem(LocalStorageKey.Theme, theme);
}
// EthAuth
// note: keep an eye out for potential race-conditions, though they shouldn't occur.
// If there are race conditions, the settings could be a function executed prior to being passed to wagmi
storage?.setItem(LocalStorageKey.EthAuthSettings, {
expiry,
app,
origin: origin || location.origin,
nonce
});
}, [theme, ethAuth]);
useEffect(() => {
setDisplayedAssets(displayedAssets);
}, [displayedAssetsSetting]);
const { isEmailConflictOpen, emailConflictInfo, toggleEmailConflictModal } = useEmailConflict();
const [isSocialLinkOpen, setIsSocialLinkOpen] = useState(false);
return (_jsx(SequenceHooksProvider, { config: {
projectAccessKey: config.projectAccessKey,
env: config.env
}, children: _jsx(ConnectConfigContextProvider, { value: config, children: _jsx(ThemeContextProvider, { value: {
theme,
setTheme,
position: modalPosition,
setPosition: setModalPosition
}, children: _jsx(GoogleOAuthProvider, { clientId: googleClientId, children: _jsx(ConnectModalContextProvider, { value: { isConnectModalOpen: openConnectModal, setOpenConnectModal, openConnectModalState: openConnectModal }, children: _jsx(WalletConfigContextProvider, { value: {
setDisplayedAssets,
displayedAssets,
readOnlyNetworks,
hideExternalConnectOptions,
hideConnectedWallets,
hideSocialConnectOptions
}, children: _jsx(AnalyticsContextProvider, { value: { setAnalytics, analytics }, children: _jsxs(SocialLinkContextProvider, { value: { isSocialLinkOpen, waasConfigKey, setIsSocialLinkOpen }, children: [_jsx(ShadowRoot, { theme: theme, customCSS: customCSS, children: _jsx(EpicAuthProvider, { children: _jsxs(AnimatePresence, { children: [openConnectModal && (_jsx(Modal, { scroll: false, size: "sm", contentProps: {
style: {
maxWidth: '390px',
overflow: 'visible',
...getModalPositionCss(position)
}
}, onClose: () => setOpenConnectModal(false), children: _jsx(Connect, { onClose: () => setOpenConnectModal(false), emailConflictInfo: emailConflictInfo, ...props }) })), pendingRequestConfirmation && (_jsx(Modal, { scroll: false, size: "sm", contentProps: {
style: {
maxWidth: '390px',
...getModalPositionCss(position)
}
}, isDismissible: false, onClose: () => {
rejectPendingRequest('');
}, children: _jsxs("div", { className: "px-4 pt-4 pb-2", children: [_jsxs("div", { className: "flex flex-col justify-center text-primary items-center font-medium", style: {
marginTop: '4px'
}, children: [_jsx(ModalPrimitive.Title, { asChild: true, children: _jsx(Text, { className: "mb-5", variant: "large", asChild: true, children: _jsxs("h1", { children: ["Confirm", ' ', pendingRequestConfirmation.type === 'signMessage' ? 'signing message' : 'transaction'] }) }) }), pendingRequestConfirmation.type === 'signMessage' && pendingRequestConfirmation.message && (_jsxs("div", { className: "flex flex-col w-full", children: [_jsx(Text, { variant: "normal", color: "muted", fontWeight: "medium", children: "Message" }), _jsx(Card, { className: "mt-2 py-2 overflow-scroll max-h-[200px]", children: _jsx(Text, { className: "mb-4", variant: "normal", children: isJSON(pendingRequestConfirmation.message) ? (_jsx(JsonTreeViewer, { data: JSON.parse(pendingRequestConfirmation.message) })) : (hexToString(pendingRequestConfirmation.message)) }) })] })), pendingRequestConfirmation.type === 'signTransaction' && (_jsx(TxnDetails, { address: address ?? '', txs: pendingRequestConfirmation.txs ?? [], chainId: pendingRequestConfirmation.chainId ?? ChainId.POLYGON })), pendingRequestConfirmation.chainId && (_jsxs("div", { className: "flex w-full mt-3 justify-end items-center", children: [_jsx("div", { className: "flex w-1/2 justify-start", children: _jsx(Text, { variant: "small", color: "muted", children: "Network" }) }), _jsx("div", { className: "flex w-1/2 justify-end", children: _jsx(NetworkBadge, { chainId: pendingRequestConfirmation.chainId }) })] })), _jsxs("div", { className: "flex flex-row gap-2 w-full mt-5", children: [_jsx(Button, { className: "w-full", shape: "square", size: "lg", label: "Reject", onClick: () => {
rejectPendingRequest(pendingRequestConfirmation?.id);
} }), _jsx(Button, { className: "flex items-center text-center w-full", shape: "square", size: "lg", label: "Confirm", variant: "primary", onClick: () => {
confirmPendingRequest(pendingRequestConfirmation?.id);
} })] })] }), _jsx("div", { className: "mt-4", children: _jsx(PoweredBySequence, {}) })] }) })), isEmailConflictOpen && emailConflictInfo && (_jsx(Modal, { size: "sm", scroll: false, onClose: () => {
setOpenConnectModal(false);
toggleEmailConflictModal(false);
}, children: _jsxs("div", { className: "p-4", children: [_jsx(ModalPrimitive.Title, { asChild: true, children: _jsx(PageHeading, { children: "Email already in use" }) }), _jsxs("div", { children: [_jsxs(Text, { className: "text-center", variant: "normal", color: "secondary", children: ["Another account with this email address", ' ', _jsxs(Text, { color: "primary", children: ["(", emailConflictInfo.email, ")"] }), " already exists with account type", ' ', _jsxs(Text, { color: "primary", children: ["(", emailConflictInfo.type, ")"] }), ". Please sign in again with the correct account."] }), _jsx("div", { className: "flex mt-4 gap-2 items-center justify-center", children: _jsx(Button, { label: "OK", onClick: () => {
setOpenConnectModal(false);
toggleEmailConflictModal(false);
} }) })] })] }) })), isSocialLinkOpen &&
(waasConnector ? (_jsx(Modal, { size: "sm", scroll: false, onClose: () => setIsSocialLinkOpen(false), children: _jsx(SocialLink, {}) })) : (_jsx(Modal, { size: "sm", scroll: false, onClose: () => setIsSocialLinkOpen(false), children: _jsx(Text, { className: "p-8", variant: "medium", color: "warning", children: "Social link is not supported for universal wallets (works only for embedded wallets)" }) })))] }) }) }), children] }) }) }) }) }) }) }) }));
};
//# sourceMappingURL=SequenceConnectProvider.js.map