@0xsequence/connect
Version:
Connect package for Sequence Web SDK
175 lines • 15.8 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.SequenceConnectProvider = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_1 = require("@0xsequence/design-system");
const hooks_1 = require("@0xsequence/hooks");
const network_1 = require("@0xsequence/network");
const provider_1 = require("@0xsequence/provider");
const google_1 = require("@react-oauth/google");
const react_1 = require("motion/react");
const react_2 = require("react");
const viem_1 = require("viem");
const wagmi_1 = require("wagmi");
const index_js_1 = require("../../constants/index.js");
const Analytics_js_1 = require("../../contexts/Analytics.js");
const ConnectConfig_js_1 = require("../../contexts/ConnectConfig.js");
const ConnectModal_js_1 = require("../../contexts/ConnectModal.js");
const SocialLink_js_1 = require("../../contexts/SocialLink.js");
const Theme_js_1 = require("../../contexts/Theme.js");
const WalletConfig_js_1 = require("../../contexts/WalletConfig.js");
const useStorage_js_1 = require("../../hooks/useStorage.js");
const useWaasConfirmationHandler_js_1 = require("../../hooks/useWaasConfirmationHandler.js");
const useWaasEmailConflict_js_1 = require("../../hooks/useWaasEmailConflict.js");
const helpers_js_1 = require("../../utils/helpers.js");
const styling_js_1 = require("../../utils/styling.js");
const Connect_js_1 = require("../Connect/Connect.js");
const index_js_2 = require("../EpicAuthProvider/index.js");
const JsonTreeViewer_js_1 = require("../JsonTreeViewer.js");
const index_js_3 = require("../NetworkBadge/index.js");
const index_js_4 = require("../PageHeading/index.js");
const index_js_5 = require("../SequenceLogo/index.js");
const index_js_6 = require("../ShadowRoot/index.js");
const SocialLink_js_2 = require("../SocialLink/SocialLink.js");
const index_js_7 = require("../TxnDetails/index.js");
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 = index_js_1.DEFAULT_SESSION_EXPIRATION, app = defaultAppName, origin, nonce } = ethAuth;
const [openConnectModal, setOpenConnectModal] = (0, react_2.useState)(false);
const [theme, setTheme] = (0, react_2.useState)(defaultTheme || 'dark');
const [modalPosition, setModalPosition] = (0, react_2.useState)(position);
const [displayedAssets, setDisplayedAssets] = (0, react_2.useState)(displayedAssetsSetting);
const [analytics, setAnalytics] = (0, react_2.useState)();
const { address, isConnected } = (0, wagmi_1.useAccount)();
const wagmiConfig = (0, wagmi_1.useConfig)();
const storage = (0, useStorage_js_1.useStorage)();
const connections = (0, wagmi_1.useConnections)();
const waasConnector = connections.find(c => c.connector.id.includes('waas'))?.connector;
const [isWalletWidgetOpen, setIsWalletWidgetOpen] = (0, react_2.useState)(false);
(0, react_2.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] = (0, useWaasConfirmationHandler_js_1.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 = (0, provider_1.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: index_js_1.WEB_SDK_VERSION
};
}
return originalTrack?.(...args);
};
setAnalytics(sequenceAnalytics);
};
(0, react_2.useEffect)(() => {
if (!isConnected) {
analytics?.reset();
return;
}
if (address) {
analytics?.identify(address.toLowerCase());
}
}, [analytics, address, isConnected]);
(0, react_2.useEffect)(() => {
if (!disableAnalytics) {
getAnalyticsClient(config.projectAccessKey);
}
}, []);
(0, react_2.useEffect)(() => {
if (theme !== defaultTheme) {
setTheme(defaultTheme);
}
}, [defaultTheme]);
(0, react_2.useEffect)(() => {
if (modalPosition !== position) {
setModalPosition(position);
}
}, [position]);
// Write data in local storage for retrieval in connectors
(0, react_2.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(index_js_1.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(index_js_1.LocalStorageKey.EthAuthSettings, {
expiry,
app,
origin: origin || location.origin,
nonce
});
}, [theme, ethAuth]);
(0, react_2.useEffect)(() => {
setDisplayedAssets(displayedAssets);
}, [displayedAssetsSetting]);
const { isEmailConflictOpen, emailConflictInfo, toggleEmailConflictModal } = (0, useWaasEmailConflict_js_1.useEmailConflict)();
const [isSocialLinkOpen, setIsSocialLinkOpen] = (0, react_2.useState)(false);
return ((0, jsx_runtime_1.jsx)(hooks_1.SequenceHooksProvider, { config: {
projectAccessKey: config.projectAccessKey,
env: config.env
}, children: (0, jsx_runtime_1.jsx)(ConnectConfig_js_1.ConnectConfigContextProvider, { value: config, children: (0, jsx_runtime_1.jsx)(Theme_js_1.ThemeContextProvider, { value: {
theme,
setTheme,
position: modalPosition,
setPosition: setModalPosition
}, children: (0, jsx_runtime_1.jsx)(google_1.GoogleOAuthProvider, { clientId: googleClientId, children: (0, jsx_runtime_1.jsx)(ConnectModal_js_1.ConnectModalContextProvider, { value: { isConnectModalOpen: openConnectModal, setOpenConnectModal, openConnectModalState: openConnectModal }, children: (0, jsx_runtime_1.jsx)(WalletConfig_js_1.WalletConfigContextProvider, { value: {
setDisplayedAssets,
displayedAssets,
readOnlyNetworks,
hideExternalConnectOptions,
hideConnectedWallets,
hideSocialConnectOptions
}, children: (0, jsx_runtime_1.jsx)(Analytics_js_1.AnalyticsContextProvider, { value: { setAnalytics, analytics }, children: (0, jsx_runtime_1.jsxs)(SocialLink_js_1.SocialLinkContextProvider, { value: { isSocialLinkOpen, waasConfigKey, setIsSocialLinkOpen }, children: [(0, jsx_runtime_1.jsx)(index_js_6.ShadowRoot, { theme: theme, customCSS: customCSS, children: (0, jsx_runtime_1.jsx)(index_js_2.EpicAuthProvider, { children: (0, jsx_runtime_1.jsxs)(react_1.AnimatePresence, { children: [openConnectModal && ((0, jsx_runtime_1.jsx)(design_system_1.Modal, { scroll: false, size: "sm", contentProps: {
style: {
maxWidth: '390px',
overflow: 'visible',
...(0, styling_js_1.getModalPositionCss)(position)
}
}, onClose: () => setOpenConnectModal(false), children: (0, jsx_runtime_1.jsx)(Connect_js_1.Connect, { onClose: () => setOpenConnectModal(false), emailConflictInfo: emailConflictInfo, ...props }) })), pendingRequestConfirmation && ((0, jsx_runtime_1.jsx)(design_system_1.Modal, { scroll: false, size: "sm", contentProps: {
style: {
maxWidth: '390px',
...(0, styling_js_1.getModalPositionCss)(position)
}
}, isDismissible: false, onClose: () => {
rejectPendingRequest('');
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "px-4 pt-4 pb-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-center text-primary items-center font-medium", style: {
marginTop: '4px'
}, children: [(0, jsx_runtime_1.jsx)(design_system_1.ModalPrimitive.Title, { asChild: true, children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "mb-5", variant: "large", asChild: true, children: (0, jsx_runtime_1.jsxs)("h1", { children: ["Confirm", ' ', pendingRequestConfirmation.type === 'signMessage' ? 'signing message' : 'transaction'] }) }) }), pendingRequestConfirmation.type === 'signMessage' && pendingRequestConfirmation.message && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "normal", color: "muted", fontWeight: "medium", children: "Message" }), (0, jsx_runtime_1.jsx)(design_system_1.Card, { className: "mt-2 py-2 overflow-scroll max-h-[200px]", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "mb-4", variant: "normal", children: (0, helpers_js_1.isJSON)(pendingRequestConfirmation.message) ? ((0, jsx_runtime_1.jsx)(JsonTreeViewer_js_1.JsonTreeViewer, { data: JSON.parse(pendingRequestConfirmation.message) })) : ((0, viem_1.hexToString)(pendingRequestConfirmation.message)) }) })] })), pendingRequestConfirmation.type === 'signTransaction' && ((0, jsx_runtime_1.jsx)(index_js_7.TxnDetails, { address: address ?? '', txs: pendingRequestConfirmation.txs ?? [], chainId: pendingRequestConfirmation.chainId ?? network_1.ChainId.POLYGON })), pendingRequestConfirmation.chainId && ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full mt-3 justify-end items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-1/2 justify-start", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "muted", children: "Network" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-1/2 justify-end", children: (0, jsx_runtime_1.jsx)(index_js_3.NetworkBadge, { chainId: pendingRequestConfirmation.chainId }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-2 w-full mt-5", children: [(0, jsx_runtime_1.jsx)(design_system_1.Button, { className: "w-full", shape: "square", size: "lg", label: "Reject", onClick: () => {
rejectPendingRequest(pendingRequestConfirmation?.id);
} }), (0, jsx_runtime_1.jsx)(design_system_1.Button, { className: "flex items-center text-center w-full", shape: "square", size: "lg", label: "Confirm", variant: "primary", onClick: () => {
confirmPendingRequest(pendingRequestConfirmation?.id);
} })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(index_js_5.PoweredBySequence, {}) })] }) })), isEmailConflictOpen && emailConflictInfo && ((0, jsx_runtime_1.jsx)(design_system_1.Modal, { size: "sm", scroll: false, onClose: () => {
setOpenConnectModal(false);
toggleEmailConflictModal(false);
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [(0, jsx_runtime_1.jsx)(design_system_1.ModalPrimitive.Title, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_4.PageHeading, { children: "Email already in use" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(design_system_1.Text, { className: "text-center", variant: "normal", color: "secondary", children: ["Another account with this email address", ' ', (0, jsx_runtime_1.jsxs)(design_system_1.Text, { color: "primary", children: ["(", emailConflictInfo.email, ")"] }), " already exists with account type", ' ', (0, jsx_runtime_1.jsxs)(design_system_1.Text, { color: "primary", children: ["(", emailConflictInfo.type, ")"] }), ". Please sign in again with the correct account."] }), (0, jsx_runtime_1.jsx)("div", { className: "flex mt-4 gap-2 items-center justify-center", children: (0, jsx_runtime_1.jsx)(design_system_1.Button, { label: "OK", onClick: () => {
setOpenConnectModal(false);
toggleEmailConflictModal(false);
} }) })] })] }) })), isSocialLinkOpen &&
(waasConnector ? ((0, jsx_runtime_1.jsx)(design_system_1.Modal, { size: "sm", scroll: false, onClose: () => setIsSocialLinkOpen(false), children: (0, jsx_runtime_1.jsx)(SocialLink_js_2.SocialLink, {}) })) : ((0, jsx_runtime_1.jsx)(design_system_1.Modal, { size: "sm", scroll: false, onClose: () => setIsSocialLinkOpen(false), children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "p-8", variant: "medium", color: "warning", children: "Social link is not supported for universal wallets (works only for embedded wallets)" }) })))] }) }) }), children] }) }) }) }) }) }) }) }));
};
exports.SequenceConnectProvider = SequenceConnectProvider;
//# sourceMappingURL=SequenceConnectProvider.js.map