@dynamic-labs/sdk-react-core/src/lib/context/ThemeContext/ThemeContext.cjs

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
require('@dynamic-labs/sdk-api-core');
require('../../shared/logger.cjs');
require('@dynamic-labs/iconic');
require('@dynamic-labs/wallet-connector-core');
require('../ViewContext/ViewContext.cjs');
require('@dynamic-labs/wallet-book');
var isSSR = require('../../shared/utils/functions/isSSR/isSSR.cjs');
require('@dynamic-labs/utils');
require('../../utils/constants/colors.cjs');
require('../../utils/constants/values.cjs');
require('../../shared/consts/index.cjs');
var themesData = require('./themesData.cjs');
var stylesheetBuilder = require('./utils/stylesheetBuilder/stylesheetBuilder.cjs');

const ThemeContext = React.createContext(undefined);
const ThemeContextProvider = ({ customerTheme, designSettings, children }) => {
    const [theme, _setTheme] = React.useState(customerTheme || themesData.getThemeConfig(designSettings === null || designSettings === void 0 ? void 0 : designSettings.modal));
    const linkTag = React.useRef(stylesheetBuilder.findOrCreateLinkTag());
    const styleTag = React.useRef(stylesheetBuilder.findOrCreateStyleTag());
    const setTheme = React.useCallback((newTheme) => {
        _setTheme(newTheme);
        // SSR won't have document defined, so we can't run this logic in server side
        if (isSSR.isSSR() ||
            linkTag.current === undefined ||
            styleTag.current === undefined)
            return;
        document.body.dataset.dynamicTheme = newTheme.theme.name;
        document.body.dataset.dynamicThemeBrand = newTheme.brandStyle;
        const linkHref = newTheme.template === 'default'
            ? ''
            : `https://app.dynamic.xyz/assets/templates/${newTheme.template}.css`;
        if (linkTag.current.href !== linkHref)
            linkTag.current.href = linkHref;
        const builtStylesheet = stylesheetBuilder.buildStylesheet(newTheme);
        if (styleTag.current.innerHTML === builtStylesheet)
            return;
        styleTag.current.innerHTML = builtStylesheet;
    }, []);
    const changeTheme = React.useCallback((passedTheme, footerColor) => {
        var _a;
        const selectedTheme = (_a = themesData.themesData.themes) === null || _a === void 0 ? void 0 : _a[passedTheme];
        const updatedThemeData = Object.assign(Object.assign({}, theme), { theme: Object.assign(Object.assign({}, selectedTheme), { colors: Object.assign(Object.assign({}, selectedTheme.colors), { ternary: footerColor !== null && footerColor !== void 0 ? footerColor : selectedTheme.colors.ternary }) }) });
        setTheme(updatedThemeData);
    }, [setTheme, theme]);
    const changeTemplate = React.useCallback((template) => setTheme(Object.assign(Object.assign({}, theme), { template })), [setTheme, theme]);
    const changeBorder = React.useCallback((border) => setTheme(Object.assign(Object.assign({}, theme), { border })), [setTheme, theme]);
    const changeView = React.useCallback((view) => setTheme(Object.assign(Object.assign({}, theme), { view })), [setTheme, theme]);
    const changePrimaryColor = React.useCallback((customColor) => setTheme(Object.assign(Object.assign({}, theme), { customColor })), [setTheme, theme]);
    const changeBrandStyle = React.useCallback((brandStyle) => setTheme(Object.assign(Object.assign({}, theme), { brandStyle })), [setTheme, theme]);
    // This hook changes theme when customerTheme prop changes
    // It can be changed by customer code so useEffect makes sense here
    React.useEffect(() => setTheme(customerTheme || themesData.getThemeConfig(designSettings === null || designSettings === void 0 ? void 0 : designSettings.modal)), [customerTheme, designSettings === null || designSettings === void 0 ? void 0 : designSettings.modal, setTheme]);
    const value = React.useMemo(() => ({
        changeBorder,
        changeBrandStyle,
        changePrimaryColor,
        changeTemplate,
        changeTheme,
        changeView,
        theme,
    }), [
        theme,
        changeBorder,
        changeBrandStyle,
        changeTemplate,
        changeTheme,
        changePrimaryColor,
        changeView,
    ]);
    return (jsxRuntime.jsx(ThemeContext.Provider, { value: value, children: children }));
};
const useThemeContext = () => {
    const context = React.useContext(ThemeContext);
    if (context === undefined) {
        throw new Error('useThemeContext must be used within a ThemeContextProvider');
    }
    return context;
};

exports.ThemeContext = ThemeContext;
exports.ThemeContextProvider = ThemeContextProvider;
exports.useThemeContext = useThemeContext;