@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/context/ThemeContext/ThemeContext.cjs.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var themesData = require('./themesData.cjs.js');
+var stylesheetBuilder = require('./utils/stylesheetBuilder/stylesheetBuilder.cjs.js');
+
+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, setLinkTag] = React.useState();
+    const [styleTag, setStyleTag] = React.useState();
+    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);
+    }, [theme, setTheme]);
+    const changeTemplate = React.useCallback((template) => {
+        setTheme(Object.assign(Object.assign({}, theme), { template }));
+    }, [theme, setTheme]);
+    const changeBorder = React.useCallback((border) => {
+        setTheme(Object.assign(Object.assign({}, theme), { border }));
+    }, [theme, setTheme]);
+    const changeView = React.useCallback((view) => {
+        setTheme(Object.assign(Object.assign({}, theme), { view }));
+    }, [theme, setTheme]);
+    const changePrimaryColor = React.useCallback((customColor) => {
+        setTheme(Object.assign(Object.assign({}, theme), { customColor }));
+    }, [theme, setTheme]);
+    const changeBrandStyle = React.useCallback((brandStyle) => {
+        setTheme(Object.assign(Object.assign({}, theme), { brandStyle }));
+    }, [theme, setTheme]);
+    React.useEffect(() => {
+        setLinkTag(stylesheetBuilder.findOrCreateLinkTag());
+        setStyleTag(stylesheetBuilder.findOrCreateStyleTag());
+    }, []);
+    React.useEffect(() => {
+        const newTheme = customerTheme || themesData.getThemeConfig(designSettings === null || designSettings === void 0 ? void 0 : designSettings.modal);
+        return setTheme(newTheme);
+    }, [customerTheme, designSettings === null || designSettings === void 0 ? void 0 : designSettings.modal]);
+    React.useEffect(() => {
+        if (!linkTag)
+            return;
+        if (!styleTag)
+            return;
+        const linkHref = theme.template === 'default'
+            ? ''
+            : `https://app.dynamic.xyz/assets/templates/${theme.template}.css`;
+        if (linkTag.href !== linkHref) {
+            linkTag.href = linkHref;
+        }
+        const builtStylesheet = stylesheetBuilder.buildStylesheet(theme);
+        if (styleTag.innerHTML === builtStylesheet)
+            return;
+        styleTag.innerHTML = builtStylesheet;
+    }, [linkTag, styleTag, theme]);
+    React.useEffect(() => {
+        document.body.dataset.dynamicTheme = theme.theme.name;
+        document.body.dataset.dynamicThemeBrand = theme.brandStyle;
+    }, [theme.theme.name, theme.brandStyle]);
+    const value = React.useMemo(() => ({
+        changeBorder,
+        changeBrandStyle,
+        changePrimaryColor,
+        changeTemplate,
+        changeTheme,
+        changeView,
+        theme,
+    }), [
+        theme,
+        changeBorder,
+        changeBrandStyle,
+        changeTemplate,
+        changeTheme,
+        changePrimaryColor,
+        changeView,
+    ]);
+    return (jsxRuntime.jsx(ThemeContext.Provider, Object.assign({ 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;

package/src/lib/context/ThemeContext/ThemeContext.d.ts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+import { ProjectSettingsDesign } from '@dynamic-labs/sdk-api';
+import { ThemeContextProps, ThemeData } from './types';
+export declare const ThemeContext: import("react").Context<ThemeContextProps | undefined>;
+interface ThemeContextProviderProps {
+    customerTheme?: ThemeData;
+    designSettings?: ProjectSettingsDesign;
+}
+export declare const ThemeContextProvider: FC<PropsWithChildren<ThemeContextProviderProps>>;
+export declare const useThemeContext: () => ThemeContextProps;
+export {};

package/src/lib/context/ThemeContext/ThemeContext.es.js

@@ -0,0 +1,87 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useCallback, useEffect, useMemo, useContext } from 'react';
+import { getThemeConfig, themesData } from './themesData.es.js';
+import { findOrCreateLinkTag, findOrCreateStyleTag, buildStylesheet } from './utils/stylesheetBuilder/stylesheetBuilder.es.js';
+
+const ThemeContext = createContext(undefined);
+const ThemeContextProvider = ({ customerTheme, designSettings, children }) => {
+    const [theme, setTheme] = useState(customerTheme || getThemeConfig(designSettings === null || designSettings === void 0 ? void 0 : designSettings.modal));
+    const [linkTag, setLinkTag] = useState();
+    const [styleTag, setStyleTag] = useState();
+    const changeTheme = useCallback((passedTheme, footerColor) => {
+        var _a;
+        const selectedTheme = (_a = 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);
+    }, [theme, setTheme]);
+    const changeTemplate = useCallback((template) => {
+        setTheme(Object.assign(Object.assign({}, theme), { template }));
+    }, [theme, setTheme]);
+    const changeBorder = useCallback((border) => {
+        setTheme(Object.assign(Object.assign({}, theme), { border }));
+    }, [theme, setTheme]);
+    const changeView = useCallback((view) => {
+        setTheme(Object.assign(Object.assign({}, theme), { view }));
+    }, [theme, setTheme]);
+    const changePrimaryColor = useCallback((customColor) => {
+        setTheme(Object.assign(Object.assign({}, theme), { customColor }));
+    }, [theme, setTheme]);
+    const changeBrandStyle = useCallback((brandStyle) => {
+        setTheme(Object.assign(Object.assign({}, theme), { brandStyle }));
+    }, [theme, setTheme]);
+    useEffect(() => {
+        setLinkTag(findOrCreateLinkTag());
+        setStyleTag(findOrCreateStyleTag());
+    }, []);
+    useEffect(() => {
+        const newTheme = customerTheme || getThemeConfig(designSettings === null || designSettings === void 0 ? void 0 : designSettings.modal);
+        return setTheme(newTheme);
+    }, [customerTheme, designSettings === null || designSettings === void 0 ? void 0 : designSettings.modal]);
+    useEffect(() => {
+        if (!linkTag)
+            return;
+        if (!styleTag)
+            return;
+        const linkHref = theme.template === 'default'
+            ? ''
+            : `https://app.dynamic.xyz/assets/templates/${theme.template}.css`;
+        if (linkTag.href !== linkHref) {
+            linkTag.href = linkHref;
+        }
+        const builtStylesheet = buildStylesheet(theme);
+        if (styleTag.innerHTML === builtStylesheet)
+            return;
+        styleTag.innerHTML = builtStylesheet;
+    }, [linkTag, styleTag, theme]);
+    useEffect(() => {
+        document.body.dataset.dynamicTheme = theme.theme.name;
+        document.body.dataset.dynamicThemeBrand = theme.brandStyle;
+    }, [theme.theme.name, theme.brandStyle]);
+    const value = useMemo(() => ({
+        changeBorder,
+        changeBrandStyle,
+        changePrimaryColor,
+        changeTemplate,
+        changeTheme,
+        changeView,
+        theme,
+    }), [
+        theme,
+        changeBorder,
+        changeBrandStyle,
+        changeTemplate,
+        changeTheme,
+        changePrimaryColor,
+        changeView,
+    ]);
+    return (jsx(ThemeContext.Provider, Object.assign({ value: value }, { children: children })));
+};
+const useThemeContext = () => {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error('useThemeContext must be used within a ThemeContextProvider');
+    }
+    return context;
+};
+
+export { ThemeContext, ThemeContextProvider, useThemeContext };

package/src/lib/context/ThemeContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ThemeContext';
+export * from './types';

package/src/lib/context/ThemeContext/themesData.cjs.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('react/jsx-runtime');
+require('../ViewContext/ViewContext.cjs.js');
+require('react');
+var index = require('../../shared/utils/functions/getValueByKey/index.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+
+const getDefaultColor = (name = 'light') => name === 'light' ? '#2660FF' : '#7000FF';
+const themesData = {
+    border: 'rounded',
+    brandStyle: 'subtle',
+    customColor: '',
+    template: 'default',
+    themes: {
+        dark: {
+            colors: {
+                accent_1: '#2C303A',
+                accent_2: '#3C414D',
+                accent_3: '#4C525F',
+                background: '#15181F',
+                border: '1px solid #2C303A',
+                error_1: 'rgba(255, 106, 106, 0.2)',
+                error_2: '#FF6A6A',
+                footer: '#2C303A',
+                primary: '#15181F',
+                secondary: '#2C303A',
+                ternary: '#2660FF',
+                textPrimary: '#FFF',
+                textSecondary: '#ACACB9',
+            },
+            name: 'dark',
+        },
+        light: {
+            colors: {
+                accent_1: '#FFF',
+                accent_2: '#F0F3FF',
+                accent_3: '#E9EDFC',
+                background: '#FFFFFF',
+                border: '1px solid #E9EDFC',
+                error_1: 'rgba(255, 70, 70, 0.1)',
+                error_2: '#FF4646',
+                footer: '#F7F9FE',
+                primary: '#F7F7F9',
+                secondary: '#FFFFFF',
+                ternary: '#2660FF',
+                textPrimary: '#404040',
+                textSecondary: '#80858B',
+            },
+            name: 'light',
+        },
+        auto: {
+            colors: {
+                accent_1: '#2C303A',
+                accent_2: '#3C414D',
+                accent_3: '#4C525F',
+                background: '#15181F',
+                border: '1px solid #2C303A',
+                error_1: 'rgba(255, 106, 106, 0.2)',
+                error_2: '#FF6A6A',
+                footer: '#2C303A',
+                primary: '#15181F',
+                secondary: '#2C303A',
+                ternary: '#2660FF',
+                textPrimary: '#FFF',
+                textSecondary: '#ACACB9',
+            },
+            name: 'auto',
+        },
+    },
+    view: 'extended',
+    walletColor: {
+        color: '#1648F9',
+        gradient: '90deg, #1648F9 0%, #4B73FF 100%',
+    },
+};
+const getThemeConfig = (modalSettings, themeMode) => {
+    const { border, brand, view, primaryColor } = modalSettings || {};
+    const themeName = themeMode || (modalSettings === null || modalSettings === void 0 ? void 0 : modalSettings.theme) || 'light';
+    const themeTemplate = (modalSettings === null || modalSettings === void 0 ? void 0 : modalSettings.template) || 'default';
+    return Object.assign(Object.assign({}, themesData), { border: border || themesData.border, brandStyle: brand || themesData.brandStyle, customColor: primaryColor || themesData.customColor, template: themeTemplate, theme: index.getValueByKey(themesData.themes, themeName), view: view || themesData.view });
+};
+
+exports.getDefaultColor = getDefaultColor;
+exports.getThemeConfig = getThemeConfig;
+exports.themesData = themesData;

package/src/lib/context/ThemeContext/themesData.d.ts

@@ -0,0 +1,71 @@
+import { ProjectSettingsDesignModal } from '@dynamic-labs/sdk-api';
+import { ThemeData, ThemeSetting } from './types';
+export declare const getDefaultColor: (name?: string) => string;
+export declare const themesData: {
+    border: string;
+    brandStyle: string;
+    customColor: string;
+    template: string;
+    themes: {
+        dark: {
+            colors: {
+                accent_1: string;
+                accent_2: string;
+                accent_3: string;
+                background: string;
+                border: string;
+                error_1: string;
+                error_2: string;
+                footer: string;
+                primary: string;
+                secondary: string;
+                ternary: string;
+                textPrimary: string;
+                textSecondary: string;
+            };
+            name: string;
+        };
+        light: {
+            colors: {
+                accent_1: string;
+                accent_2: string;
+                accent_3: string;
+                background: string;
+                border: string;
+                error_1: string;
+                error_2: string;
+                footer: string;
+                primary: string;
+                secondary: string;
+                ternary: string;
+                textPrimary: string;
+                textSecondary: string;
+            };
+            name: string;
+        };
+        auto: {
+            colors: {
+                accent_1: string;
+                accent_2: string;
+                accent_3: string;
+                background: string;
+                border: string;
+                error_1: string;
+                error_2: string;
+                footer: string;
+                primary: string;
+                secondary: string;
+                ternary: string;
+                textPrimary: string;
+                textSecondary: string;
+            };
+            name: string;
+        };
+    };
+    view: string;
+    walletColor: {
+        color: string;
+        gradient: string;
+    };
+};
+export declare const getThemeConfig: (modalSettings: ProjectSettingsDesignModal | undefined, themeMode?: ThemeSetting) => ThemeData;

package/src/lib/context/ThemeContext/themesData.es.js

@@ -0,0 +1,87 @@
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import 'react/jsx-runtime';
+import '../ViewContext/ViewContext.es.js';
+import 'react';
+import { getValueByKey } from '../../shared/utils/functions/getValueByKey/index.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+
+const getDefaultColor = (name = 'light') => name === 'light' ? '#2660FF' : '#7000FF';
+const themesData = {
+    border: 'rounded',
+    brandStyle: 'subtle',
+    customColor: '',
+    template: 'default',
+    themes: {
+        dark: {
+            colors: {
+                accent_1: '#2C303A',
+                accent_2: '#3C414D',
+                accent_3: '#4C525F',
+                background: '#15181F',
+                border: '1px solid #2C303A',
+                error_1: 'rgba(255, 106, 106, 0.2)',
+                error_2: '#FF6A6A',
+                footer: '#2C303A',
+                primary: '#15181F',
+                secondary: '#2C303A',
+                ternary: '#2660FF',
+                textPrimary: '#FFF',
+                textSecondary: '#ACACB9',
+            },
+            name: 'dark',
+        },
+        light: {
+            colors: {
+                accent_1: '#FFF',
+                accent_2: '#F0F3FF',
+                accent_3: '#E9EDFC',
+                background: '#FFFFFF',
+                border: '1px solid #E9EDFC',
+                error_1: 'rgba(255, 70, 70, 0.1)',
+                error_2: '#FF4646',
+                footer: '#F7F9FE',
+                primary: '#F7F7F9',
+                secondary: '#FFFFFF',
+                ternary: '#2660FF',
+                textPrimary: '#404040',
+                textSecondary: '#80858B',
+            },
+            name: 'light',
+        },
+        auto: {
+            colors: {
+                accent_1: '#2C303A',
+                accent_2: '#3C414D',
+                accent_3: '#4C525F',
+                background: '#15181F',
+                border: '1px solid #2C303A',
+                error_1: 'rgba(255, 106, 106, 0.2)',
+                error_2: '#FF6A6A',
+                footer: '#2C303A',
+                primary: '#15181F',
+                secondary: '#2C303A',
+                ternary: '#2660FF',
+                textPrimary: '#FFF',
+                textSecondary: '#ACACB9',
+            },
+            name: 'auto',
+        },
+    },
+    view: 'extended',
+    walletColor: {
+        color: '#1648F9',
+        gradient: '90deg, #1648F9 0%, #4B73FF 100%',
+    },
+};
+const getThemeConfig = (modalSettings, themeMode) => {
+    const { border, brand, view, primaryColor } = modalSettings || {};
+    const themeName = themeMode || (modalSettings === null || modalSettings === void 0 ? void 0 : modalSettings.theme) || 'light';
+    const themeTemplate = (modalSettings === null || modalSettings === void 0 ? void 0 : modalSettings.template) || 'default';
+    return Object.assign(Object.assign({}, themesData), { border: border || themesData.border, brandStyle: brand || themesData.brandStyle, customColor: primaryColor || themesData.customColor, template: themeTemplate, theme: getValueByKey(themesData.themes, themeName), view: view || themesData.view });
+};
+
+export { getDefaultColor, getThemeConfig, themesData };

package/src/lib/context/ThemeContext/types.d.ts

@@ -0,0 +1,38 @@
+export type BorderSetting = 'rounded' | 'square';
+export type BrandStyledSetting = 'subtle' | 'bold';
+export type ThemeSetting = 'light' | 'dark' | 'auto';
+export type ViewSetting = 'extended' | 'simplified';
+export interface ThemeData {
+    border: BorderSetting;
+    brandStyle: BrandStyledSetting;
+    customColor: string;
+    template: string;
+    theme: {
+        colors: {
+            accent_1: string;
+            accent_2: string;
+            accent_3: string;
+            background: string;
+            border: string;
+            error_1: string;
+            error_2: string;
+            footer: string;
+            primary: string;
+            secondary: string;
+            ternary: string;
+            textPrimary: string;
+            textSecondary: string;
+        };
+        name: ThemeSetting;
+    };
+    view: ViewSetting;
+}
+export interface ThemeContextProps {
+    changeBorder: (border: BorderSetting) => void;
+    changeBrandStyle: (brandStyle: BrandStyledSetting) => void;
+    changePrimaryColor: (customColor: string) => void;
+    changeTemplate: (template: string) => void;
+    changeTheme: (passedTheme: ThemeSetting, footerColor?: string) => void;
+    changeView: (view: ViewSetting) => void;
+    theme: ThemeData;
+}

package/src/lib/context/ThemeContext/utils/findThemeMode/findThemeMode.d.ts

@@ -0,0 +1,3 @@
+import { ProjectSettingsDesignModal } from '@dynamic-labs/sdk-api';
+import { ThemeSetting } from '../../types';
+export declare const findThemeMode: (modalSettings: ProjectSettingsDesignModal | undefined, defaultThemeMode?: ThemeSetting) => ThemeSetting;

package/src/lib/context/ThemeContext/utils/findThemeMode/index.d.ts

@@ -0,0 +1 @@
+export { findThemeMode } from './findThemeMode';

package/src/lib/context/ThemeContext/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './findThemeMode';
+export * from './stylesheetBuilder';

package/src/lib/context/ThemeContext/utils/stylesheetBuilder/index.d.ts

@@ -0,0 +1 @@
+export { buildStylesheet, findOrCreateStyleTag, findOrCreateLinkTag, } from './stylesheetBuilder';

package/src/lib/context/ThemeContext/utils/stylesheetBuilder/stylesheetBuilder.cjs.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const findOrCreateLinkTag = () => {
+    const existingStyleTag = document.querySelector('[data-source="dynamic-theme-cdn"]');
+    if (existingStyleTag) {
+        return existingStyleTag;
+    }
+    const linkTag = document.createElement('link');
+    document.head.append(linkTag);
+    linkTag.dataset.source = 'dynamic-theme-cdn';
+    linkTag.rel = 'stylesheet';
+    return linkTag;
+};
+const findOrCreateStyleTag = () => {
+    const existingStyleTag = document.querySelector('[data-source="dynamic-theme"]');
+    if (existingStyleTag) {
+        return existingStyleTag;
+    }
+    const styleTag = document.createElement('style');
+    document.head.append(styleTag);
+    styleTag.dataset.source = 'dynamic-theme';
+    return styleTag;
+};
+const buildStylesheet = (theme) => {
+    const { customColor, brandStyle } = theme;
+    const footerBackgroundColor = brandStyle === 'bold' ? customColor : undefined;
+    const footerIconColor = brandStyle === 'subtle' ? customColor : undefined;
+    const cssAttributes = [
+        ['--dynamic-brand-primary-color', customColor],
+        ['--dynamic-badge-dot-background', customColor],
+        ['--dynamic-footer-background-color', footerBackgroundColor],
+        ['--dynamic-footer-icon-color', footerIconColor],
+    ];
+    return `@layer dynamic-project-environment-theme {
+  #dynamic-widget, #dynamic-modal, .dynamic-shadow-dom {
+    ${cssAttributes
+        .filter(([, value]) => value !== undefined && value !== '')
+        .map(([key, value]) => `${key}: ${value};`)
+        .join('\n    ')}
+  }
+}`;
+};
+
+exports.buildStylesheet = buildStylesheet;
+exports.findOrCreateLinkTag = findOrCreateLinkTag;
+exports.findOrCreateStyleTag = findOrCreateStyleTag;

package/src/lib/context/ThemeContext/utils/stylesheetBuilder/stylesheetBuilder.d.ts

@@ -0,0 +1,4 @@
+import { ThemeData } from '../../types';
+export declare const findOrCreateLinkTag: () => HTMLLinkElement;
+export declare const findOrCreateStyleTag: () => Element;
+export declare const buildStylesheet: (theme: ThemeData) => string;

package/src/lib/context/ThemeContext/utils/stylesheetBuilder/stylesheetBuilder.es.js

@@ -0,0 +1,42 @@
+const findOrCreateLinkTag = () => {
+    const existingStyleTag = document.querySelector('[data-source="dynamic-theme-cdn"]');
+    if (existingStyleTag) {
+        return existingStyleTag;
+    }
+    const linkTag = document.createElement('link');
+    document.head.append(linkTag);
+    linkTag.dataset.source = 'dynamic-theme-cdn';
+    linkTag.rel = 'stylesheet';
+    return linkTag;
+};
+const findOrCreateStyleTag = () => {
+    const existingStyleTag = document.querySelector('[data-source="dynamic-theme"]');
+    if (existingStyleTag) {
+        return existingStyleTag;
+    }
+    const styleTag = document.createElement('style');
+    document.head.append(styleTag);
+    styleTag.dataset.source = 'dynamic-theme';
+    return styleTag;
+};
+const buildStylesheet = (theme) => {
+    const { customColor, brandStyle } = theme;
+    const footerBackgroundColor = brandStyle === 'bold' ? customColor : undefined;
+    const footerIconColor = brandStyle === 'subtle' ? customColor : undefined;
+    const cssAttributes = [
+        ['--dynamic-brand-primary-color', customColor],
+        ['--dynamic-badge-dot-background', customColor],
+        ['--dynamic-footer-background-color', footerBackgroundColor],
+        ['--dynamic-footer-icon-color', footerIconColor],
+    ];
+    return `@layer dynamic-project-environment-theme {
+  #dynamic-widget, #dynamic-modal, .dynamic-shadow-dom {
+    ${cssAttributes
+        .filter(([, value]) => value !== undefined && value !== '')
+        .map(([key, value]) => `${key}: ${value};`)
+        .join('\n    ')}
+  }
+}`;
+};
+
+export { buildStylesheet, findOrCreateLinkTag, findOrCreateStyleTag };

package/src/lib/context/ViewContext/ViewContext.cjs.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const ViewContext = React.createContext(undefined);
+const ViewContextProvider = ({ children, loginWithEmail, }) => {
+    const [view, setView] = React.useState(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+    React.useEffect(() => {
+        if (loginWithEmail) {
+            setView('login-with-email-or-wallet');
+        }
+        else {
+            setView('wallet-list');
+        }
+    }, [loginWithEmail]);
+    const value = React.useMemo(() => ({
+        setView,
+        view,
+    }), [view]);
+    return jsxRuntime.jsx(ViewContext.Provider, Object.assign({ value: value }, { children: children }));
+};
+const useViewContext = () => {
+    const context = React.useContext(ViewContext);
+    if (context === undefined) {
+        throw new Error('usage of useViewContext not wrapped in `ViewContextProvider`.');
+    }
+    return context;
+};
+
+exports.ViewContext = ViewContext;
+exports.ViewContextProvider = ViewContextProvider;
+exports.useViewContext = useViewContext;

package/src/lib/context/ViewContext/ViewContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, SetStateAction, Dispatch } from 'react';
+export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'wallet-sign' | 'wallet-used' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view';
+export interface ViewContextProps {
+    setView: Dispatch<SetStateAction<ViewType>>;
+    view: ViewType;
+}
+export declare const ViewContext: import("react").Context<ViewContextProps | undefined>;
+export declare const ViewContextProvider: ({ children, loginWithEmail, }: {
+    children: ReactNode;
+    loginWithEmail: boolean;
+}) => JSX.Element;
+export declare const useViewContext: () => ViewContextProps;