@dynamic-labs/sdk-react-core 4.63.1 → 4.65.0

package/CHANGELOG.md

@@ -1,4 +1,27 @@
 
+## [4.65.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.64.0...v4.65.0) (2026-02-27)
+
+
+### Features
+
+* add CSP nonce support for style and link tags ([#10514](https://github.com/dynamic-labs/dynamic-auth/issues/10514)) ([62128f5](https://github.com/dynamic-labs/dynamic-auth/commit/62128f5eddfd2a037c2ed6e9320b5009d350c0b5))
+* add setPassword method for initial wallet password setup ([#10534](https://github.com/dynamic-labs/dynamic-auth/issues/10534)) ([87d1e5f](https://github.com/dynamic-labs/dynamic-auth/commit/87d1e5f3c41fe4417320f6971566526e8bf07e99))
+* add step-up authentication and walletsVerify API ([#10482](https://github.com/dynamic-labs/dynamic-auth/issues/10482)) ([e762a63](https://github.com/dynamic-labs/dynamic-auth/commit/e762a634e9782c34926f5947db5446ad95617064))
+
+
+### Bug Fixes
+
+* **react-native:** ensure items are saved to storage successfully ([#10538](https://github.com/dynamic-labs/dynamic-auth/issues/10538)) ([60bfd5e](https://github.com/dynamic-labs/dynamic-auth/commit/60bfd5e4bf1e7265e754c222839662ff615495b2))
+* **sdk-react-core:** add stellar to compareChains to prevent duplicate wallet creation ([#10526](https://github.com/dynamic-labs/dynamic-auth/issues/10526)) ([89f4498](https://github.com/dynamic-labs/dynamic-auth/commit/89f449892a5153dc8032e0e8ea61cf453e0a2b23))
+* show password setup button for all WaaS wallets regardless of passcodeRequired ([#10532](https://github.com/dynamic-labs/dynamic-auth/issues/10532)) ([615cbf2](https://github.com/dynamic-labs/dynamic-auth/commit/615cbf25fcf95cb5b82a118a2d5d37285e8b5b83))
+
+## [4.64.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.63.1...v4.64.0) (2026-02-25)
+
+
+### Features
+
+* add addTrustline method to the stellar wallet ([#10510](https://github.com/dynamic-labs/dynamic-auth/issues/10510)) ([e8690e8](https://github.com/dynamic-labs/dynamic-auth/commit/e8690e821dfe867355618d970380568487c3dd36))
+
 ### [4.63.1](https://github.com/dynamic-labs/dynamic-auth/compare/v4.63.0...v4.63.1) (2026-02-24)
 
 

package/package.cjs

@@ -3,11 +3,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.63.1";
+var version = "4.65.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.875",
 	"@dynamic-labs-sdk/client": "0.12.1",
-	"@dynamic-labs-wallet/browser-wallet-client": "0.0.276",
+	"@dynamic-labs-wallet/browser-wallet-client": "0.0.286",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",
 	"country-list": "2.3.0",

package/package.js

@@ -1,9 +1,9 @@
 'use client'
-var version = "4.63.1";
+var version = "4.65.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.875",
 	"@dynamic-labs-sdk/client": "0.12.1",
-	"@dynamic-labs-wallet/browser-wallet-client": "0.0.276",
+	"@dynamic-labs-wallet/browser-wallet-client": "0.0.286",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",
 	"country-list": "2.3.0",

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.63.1",
+  "version": "4.65.0",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.875",
     "@dynamic-labs-sdk/client": "0.12.1",
-    "@dynamic-labs-wallet/browser-wallet-client": "0.0.276",
+    "@dynamic-labs-wallet/browser-wallet-client": "0.0.286",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "@thumbmarkjs/thumbmarkjs": "0.16.0",
     "country-list": "2.3.0",
@@ -16,17 +16,17 @@
     "yup": "0.32.11",
     "react-international-phone": "4.5.0",
     "bs58": "5.0.0",
-    "@dynamic-labs/assert-package-version": "4.63.1",
-    "@dynamic-labs/iconic": "4.63.1",
-    "@dynamic-labs/locale": "4.63.1",
-    "@dynamic-labs/logger": "4.63.1",
-    "@dynamic-labs/multi-wallet": "4.63.1",
-    "@dynamic-labs/rpc-providers": "4.63.1",
-    "@dynamic-labs/store": "4.63.1",
-    "@dynamic-labs/types": "4.63.1",
-    "@dynamic-labs/utils": "4.63.1",
-    "@dynamic-labs/wallet-book": "4.63.1",
-    "@dynamic-labs/wallet-connector-core": "4.63.1",
+    "@dynamic-labs/assert-package-version": "4.65.0",
+    "@dynamic-labs/iconic": "4.65.0",
+    "@dynamic-labs/locale": "4.65.0",
+    "@dynamic-labs/logger": "4.65.0",
+    "@dynamic-labs/multi-wallet": "4.65.0",
+    "@dynamic-labs/rpc-providers": "4.65.0",
+    "@dynamic-labs/store": "4.65.0",
+    "@dynamic-labs/types": "4.65.0",
+    "@dynamic-labs/utils": "4.65.0",
+    "@dynamic-labs/wallet-book": "4.65.0",
+    "@dynamic-labs/wallet-connector-core": "4.65.0",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -186,6 +186,7 @@ var useIsMfaRequiredForAction = require('./lib/utils/hooks/useIsMfaRequiredForAc
 var useRefreshAuth = require('./lib/utils/hooks/useRefreshAuth/useRefreshAuth.cjs');
 var useWalletPassword = require('./lib/utils/hooks/useWalletPassword/useWalletPassword.cjs');
 var useGetWalletPassword = require('./lib/utils/hooks/useGetWalletPassword/useGetWalletPassword.cjs');
+var useStepUpAuthentication = require('./lib/utils/hooks/useStepUpAuthentication/useStepUpAuthentication.cjs');
 var DynamicConnectButton = require('./lib/components/DynamicConnectButton/DynamicConnectButton.cjs');
 require('./lib/components/InlineWidget/InlineWidget.cjs');
 var IsBrowser = require('./lib/components/IsBrowser/IsBrowser.cjs');
@@ -349,6 +350,7 @@ exports.useIsMfaRequiredForAction = useIsMfaRequiredForAction.useIsMfaRequiredFo
 exports.useRefreshAuth = useRefreshAuth.useRefreshAuth;
 exports.useWalletPassword = useWalletPassword.useWalletPassword;
 exports.useGetWalletPassword = useGetWalletPassword.useGetWalletPassword;
+exports.useStepUpAuthentication = useStepUpAuthentication.useStepUpAuthentication;
 exports.DynamicConnectButton = DynamicConnectButton.DynamicConnectButton;
 exports.IsBrowser = IsBrowser.IsBrowser;
 exports.DynamicBridgeWidget = DynamicBridgeWidget.DynamicBridgeWidget;

package/src/index.d.ts

@@ -123,7 +123,8 @@ export { FilterAndSortWallets, FilterBridgeChainsName, FilterChain, FilterWallet
 export { 
 /** @deprecated */
 DynamicWidgetContextProvider, } from './lib/widgets/DynamicWidget/context';
-export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, useEmbeddedWalletAuthenticator, usePasskeyRecovery, useEmbeddedReveal, useIsLoggedIn, useDynamicModals, useMfa, useTokenBalances, useMultichainTokenBalances, useSwitchWallet, useRpcProviders, useRefreshUser, useRefreshAuth, useWalletOptions, useSmartWallets, EmbeddedWalletVersion, useTelegramLogin, useUpgradeEmbeddedWallet, useEVMTransactionSimulation, useSVMTransactionSimulation, useDeleteUserAccount, useDynamicWaas, useGetPasskeys, useDeletePasskey, useRegisterPasskey, useAuthenticatePasskeyMFA, useGetUserMfaMethods, usePromptMfaAuth, useUpgradeToDynamicWaasFlow, useGetMfaToken, useGetWalletPassword, useWalletPassword, useIsMfaRequiredForAction, useWalletDelegation, useWalletBackup, useBackupWallets, isWalletBackedUp, CloudBackupProvider, useExchangeAccounts, } from './lib/utils/hooks';
+export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, useEmbeddedWalletAuthenticator, usePasskeyRecovery, useEmbeddedReveal, useIsLoggedIn, useDynamicModals, useMfa, useTokenBalances, useMultichainTokenBalances, useSwitchWallet, useRpcProviders, useRefreshUser, useRefreshAuth, useWalletOptions, useSmartWallets, EmbeddedWalletVersion, useTelegramLogin, useUpgradeEmbeddedWallet, useEVMTransactionSimulation, useSVMTransactionSimulation, useDeleteUserAccount, useDynamicWaas, useGetPasskeys, useDeletePasskey, useRegisterPasskey, useAuthenticatePasskeyMFA, useGetUserMfaMethods, usePromptMfaAuth, useUpgradeToDynamicWaasFlow, useGetMfaToken, useGetWalletPassword, useWalletPassword, useIsMfaRequiredForAction, useWalletDelegation, useWalletBackup, useBackupWallets, isWalletBackedUp, CloudBackupProvider, useExchangeAccounts, useStepUpAuthentication, } from './lib/utils/hooks';
+export type { StepUpAuthenticationState, UseStepUpAuthenticationParams, UseStepUpAuthenticationReturn, VerifyOtpParams, VerifyWalletParams, } from './lib/utils/hooks';
 export { 
 /** @deprecated use useOnramp instead */
 useFunding, } from './lib/utils/hooks/useFunding';

package/src/index.js

@@ -182,6 +182,7 @@ export { useIsMfaRequiredForAction } from './lib/utils/hooks/useIsMfaRequiredFor
 export { useRefreshAuth } from './lib/utils/hooks/useRefreshAuth/useRefreshAuth.js';
 export { useWalletPassword } from './lib/utils/hooks/useWalletPassword/useWalletPassword.js';
 export { useGetWalletPassword } from './lib/utils/hooks/useGetWalletPassword/useGetWalletPassword.js';
+export { useStepUpAuthentication } from './lib/utils/hooks/useStepUpAuthentication/useStepUpAuthentication.js';
 export { DynamicConnectButton } from './lib/components/DynamicConnectButton/DynamicConnectButton.js';
 import './lib/components/InlineWidget/InlineWidget.js';
 export { IsBrowser } from './lib/components/IsBrowser/IsBrowser.js';

package/src/lib/components/LegacySafariCssOverrides/LegacySafariCssOverrides.cjs

@@ -5,6 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 
-const LegacySafariCssOverrides = () => (jsxRuntime.jsx("link", { rel: 'stylesheet', href: 'https://app.dynamic.xyz/assets/legacySafari/styles.css' }));
+const LegacySafariCssOverrides = ({ nonce, }) => (jsxRuntime.jsx("link", { nonce: nonce, rel: 'stylesheet', href: 'https://app.dynamic.xyz/assets/legacySafari/styles.css' }));
 
 exports.LegacySafariCssOverrides = LegacySafariCssOverrides;

package/src/lib/components/LegacySafariCssOverrides/LegacySafariCssOverrides.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="react" />
-export declare const LegacySafariCssOverrides: () => JSX.Element;
+type LegacySafariCssOverridesProps = {
+    nonce?: string;
+};
+export declare const LegacySafariCssOverrides: ({ nonce, }: LegacySafariCssOverridesProps) => JSX.Element;
+export {};

package/src/lib/components/LegacySafariCssOverrides/LegacySafariCssOverrides.js

@@ -1,6 +1,6 @@
 'use client'
 import { jsx } from 'react/jsx-runtime';
 
-const LegacySafariCssOverrides = () => (jsx("link", { rel: 'stylesheet', href: 'https://app.dynamic.xyz/assets/legacySafari/styles.css' }));
+const LegacySafariCssOverrides = ({ nonce, }) => (jsx("link", { nonce: nonce, rel: 'stylesheet', href: 'https://app.dynamic.xyz/assets/legacySafari/styles.css' }));
 
 export { LegacySafariCssOverrides };

package/src/lib/components/ShadowDOM/ShadowDOM.cjs

@@ -115,9 +115,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const ShadowDOMContext = React__default["default"].createContext({});
-const ShadowDOMStyle = () => jsxRuntime.jsx("style", { children: index_shadow });
+const ShadowDOMStyle = ({ nonce }) => (jsxRuntime.jsx("style", { nonce: nonce, children: index_shadow }));
 const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex, }) => {
-    const { shadowDOMEnabled: shadowDOMSetting, cssOverrides } = useInternalDynamicContext.useInternalDynamicContext();
+    const { cspNonce, shadowDOMEnabled: shadowDOMSetting, cssOverrides, } = useInternalDynamicContext.useInternalDynamicContext();
     const shadowDOMFlag = utils.isShadowDOMFlagEnabled();
     const shadowDOMEnabled = shadowDOMFlag && shadowDOMSetting;
     const [nodeRef, setNodeRef] = React.useState(null);
@@ -127,11 +127,11 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
             return () => cssOverrides;
         }
         else if (cssOverrides && typeof cssOverrides === 'string') {
-            const StyleElement = () => jsxRuntime.jsx("style", { children: cssOverrides });
+            const StyleElement = () => jsxRuntime.jsx("style", { nonce: cspNonce, children: cssOverrides });
             return StyleElement;
         }
         return null;
-    }, [cssOverrides]);
+    }, [cssOverrides, cspNonce]);
     useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (nodeRef && shadowDOMEnabled) {
             try {
@@ -147,10 +147,10 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
     }, [shadowDOMEnabled, nodeRef, mode]);
     const shouldRenderStyles = React.useMemo(() => Boolean(Object.keys(index_shadow).length), []);
     if (!shadowDOMEnabled) {
-        return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { "data-testid": dataTestId, ref: setNodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex }, children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), utils$1.isLegacySafari() && jsxRuntime.jsx(LegacySafariCssOverrides.LegacySafariCssOverrides, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] }) }));
+        return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { "data-testid": dataTestId, ref: setNodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex }, children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, { nonce: cspNonce }), utils$1.isLegacySafari() && jsxRuntime.jsx(LegacySafariCssOverrides.LegacySafariCssOverrides, { nonce: cspNonce }), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] }) }));
     }
     return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(ShadowDOMContext.Provider, { value: { shadowRoot }, children: jsxRuntime.jsx("div", { "data-testid": dataTestId, ref: setNodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex }, children: shadowRoot &&
-                    reactDom.createPortal(jsxRuntime.jsxs("div", { className: 'dynamic-shadow-dom-content', children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), utils$1.isLegacySafari() && jsxRuntime.jsx(LegacySafariCssOverrides.LegacySafariCssOverrides, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] }), shadowRoot) }) }) }));
+                    reactDom.createPortal(jsxRuntime.jsxs("div", { className: 'dynamic-shadow-dom-content', children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, { nonce: cspNonce }), utils$1.isLegacySafari() && (jsxRuntime.jsx(LegacySafariCssOverrides.LegacySafariCssOverrides, { nonce: cspNonce })), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] }), shadowRoot) }) }) }));
 };
 
 exports.ShadowDOM = ShadowDOM;

package/src/lib/components/ShadowDOM/ShadowDOM.d.ts

@@ -12,5 +12,8 @@ export type ShadowDOMProps = {
     mode?: ShadowRootMode;
     zIndex?: number;
 };
-export declare const ShadowDOMStyle: () => JSX.Element;
+export type ShadowDOMStyleProps = {
+    nonce?: string;
+};
+export declare const ShadowDOMStyle: React.FC<ShadowDOMStyleProps>;
 export declare const ShadowDOM: React.FC<ShadowDOMProps>;

package/src/lib/components/ShadowDOM/ShadowDOM.js

@@ -107,9 +107,9 @@ import { LegacySafariCssOverrides } from '../LegacySafariCssOverrides/LegacySafa
 import { isShadowDOMFlagEnabled } from './utils.js';
 
 const ShadowDOMContext = React__default.createContext({});
-const ShadowDOMStyle = () => jsx("style", { children: css_248z });
+const ShadowDOMStyle = ({ nonce }) => (jsx("style", { nonce: nonce, children: css_248z }));
 const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex, }) => {
-    const { shadowDOMEnabled: shadowDOMSetting, cssOverrides } = useInternalDynamicContext();
+    const { cspNonce, shadowDOMEnabled: shadowDOMSetting, cssOverrides, } = useInternalDynamicContext();
     const shadowDOMFlag = isShadowDOMFlagEnabled();
     const shadowDOMEnabled = shadowDOMFlag && shadowDOMSetting;
     const [nodeRef, setNodeRef] = useState(null);
@@ -119,11 +119,11 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
             return () => cssOverrides;
         }
         else if (cssOverrides && typeof cssOverrides === 'string') {
-            const StyleElement = () => jsx("style", { children: cssOverrides });
+            const StyleElement = () => jsx("style", { nonce: cspNonce, children: cssOverrides });
             return StyleElement;
         }
         return null;
-    }, [cssOverrides]);
+    }, [cssOverrides, cspNonce]);
     useIsomorphicLayoutEffect(() => {
         if (nodeRef && shadowDOMEnabled) {
             try {
@@ -139,10 +139,10 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
     }, [shadowDOMEnabled, nodeRef, mode]);
     const shouldRenderStyles = useMemo(() => Boolean(Object.keys(css_248z).length), []);
     if (!shadowDOMEnabled) {
-        return (jsx(IsBrowser, { children: jsxs("div", { "data-testid": dataTestId, ref: setNodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex }, children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), isLegacySafari() && jsx(LegacySafariCssOverrides, {}), CssOverridesElement && jsx(CssOverridesElement, {})] }) }));
+        return (jsx(IsBrowser, { children: jsxs("div", { "data-testid": dataTestId, ref: setNodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex }, children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, { nonce: cspNonce }), isLegacySafari() && jsx(LegacySafariCssOverrides, { nonce: cspNonce }), CssOverridesElement && jsx(CssOverridesElement, {})] }) }));
     }
     return (jsx(IsBrowser, { children: jsx(ShadowDOMContext.Provider, { value: { shadowRoot }, children: jsx("div", { "data-testid": dataTestId, ref: setNodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex }, children: shadowRoot &&
-                    createPortal(jsxs("div", { className: 'dynamic-shadow-dom-content', children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), isLegacySafari() && jsx(LegacySafariCssOverrides, {}), CssOverridesElement && jsx(CssOverridesElement, {})] }), shadowRoot) }) }) }));
+                    createPortal(jsxs("div", { className: 'dynamic-shadow-dom-content', children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, { nonce: cspNonce }), isLegacySafari() && (jsx(LegacySafariCssOverrides, { nonce: cspNonce })), CssOverridesElement && jsx(CssOverridesElement, {})] }), shadowRoot) }) }) }));
 };
 
 export { ShadowDOM, ShadowDOMContext, ShadowDOMStyle };

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -182,7 +182,7 @@ const DynamicContext = React.createContext(undefined);
 const InnerDynamicContextProvider = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const { children, theme, settings: settings$1, locale: locale$1, enableInstrumentation = false, } = props;
-    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, defaultPhoneInputIso2, coinbaseWalletPreference, detectNewWalletsForLinking = defaultDynamicSettings.defaultDynamicSettings.detectNewWalletsForLinking, enableConnectOnlyFallback = defaultDynamicSettings.defaultDynamicSettings.enableConnectOnlyFallback, deepLinkPreference: deepLinkPreferenceProp = defaultDynamicSettings.defaultDynamicSettings.deepLinkPreference, bridgeChains, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = defaultDynamicSettings.defaultDynamicSettings.initialAuthenticationMode, debugError = defaultDynamicSettings.defaultDynamicSettings.debugError, displaySiweStatement = defaultDynamicSettings.defaultDynamicSettings.displaySiweStatement, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = defaultDynamicSettings.defaultDynamicSettings.enableVisitTrackingOnConnectOnly, environmentId, walletsFilter, logLevel = defaultDynamicSettings.defaultDynamicSettings.logLevel, mobileExperience, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, siweStatement, shadowDOMEnabled = defaultDynamicSettings.defaultDynamicSettings.shadowDOMEnabled, walletConnectors: walletConnectorsProp, socialProvidersFilter, showLockedWalletView = defaultDynamicSettings.defaultDynamicSettings.showLockedWalletView, walletConnectPreferredChains, walletConnectorExtensions, recommendedWallets, handlers, suppressEndUserConsoleWarning, transactionConfirmation: transactionConfirmationSettings, useMetamaskSdk = defaultDynamicSettings.defaultDynamicSettings.useMetamaskSdk, } = settings$1;
+    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, defaultPhoneInputIso2, coinbaseWalletPreference, detectNewWalletsForLinking = defaultDynamicSettings.defaultDynamicSettings.detectNewWalletsForLinking, enableConnectOnlyFallback = defaultDynamicSettings.defaultDynamicSettings.enableConnectOnlyFallback, deepLinkPreference: deepLinkPreferenceProp = defaultDynamicSettings.defaultDynamicSettings.deepLinkPreference, bridgeChains, cspNonce, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = defaultDynamicSettings.defaultDynamicSettings.initialAuthenticationMode, debugError = defaultDynamicSettings.defaultDynamicSettings.debugError, displaySiweStatement = defaultDynamicSettings.defaultDynamicSettings.displaySiweStatement, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = defaultDynamicSettings.defaultDynamicSettings.enableVisitTrackingOnConnectOnly, environmentId, walletsFilter, logLevel = defaultDynamicSettings.defaultDynamicSettings.logLevel, mobileExperience, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, siweStatement, shadowDOMEnabled = defaultDynamicSettings.defaultDynamicSettings.shadowDOMEnabled, walletConnectors: walletConnectorsProp, socialProvidersFilter, showLockedWalletView = defaultDynamicSettings.defaultDynamicSettings.showLockedWalletView, walletConnectPreferredChains, walletConnectorExtensions, recommendedWallets, handlers, suppressEndUserConsoleWarning, transactionConfirmation: transactionConfirmationSettings, useMetamaskSdk = defaultDynamicSettings.defaultDynamicSettings.useMetamaskSdk, } = settings$1;
     let { appLogoUrl = defaultDynamicSettings.defaultDynamicSettings.appLogoUrl, appName = defaultDynamicSettings.defaultDynamicSettings.appName, } = settings$1;
     /**
      * initialize Storage
@@ -519,6 +519,7 @@ const InnerDynamicContextProvider = (props) => {
             clearStatesOnBackClick,
             connectWallet,
             connectedWallets,
+            cspNonce,
             cssOverrides,
             customPrivacyPolicy,
             customTermsOfServices,
@@ -630,6 +631,7 @@ const InnerDynamicContextProvider = (props) => {
         clearStatesOnBackClick,
         connectWallet,
         connectedWallets,
+        cspNonce,
         cssOverrides,
         customPrivacyPolicy,
         customTermsOfServices,
@@ -740,7 +742,7 @@ const InnerDynamicContextProvider = (props) => {
         isBridgeFlow,
         isMultiWalletEnabled: multiWallet,
     });
-    return (jsxRuntime.jsx(reactI18next.I18nextProvider, { i18n: i18nSDKInstance, children: jsxRuntime.jsx(DynamicContext.Provider, { value: value, children: jsxRuntime.jsx(walletBook.WalletBookContextProvider, { walletBook: walletBook$1, children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, { customerTheme: parseTheme.parseTheme(theme, ((_v = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _v === void 0 ? void 0 : _v.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsxs(ViewContext.ViewContextProvider, { initialViewType: initialViewType, children: [networkValidationMode === 'always' && jsxRuntime.jsx(UseNetworkValidation.UseNetworkValidation, {}), jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(AccountExistsContext.AccountExistsContextProvider, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, { children: jsxRuntime.jsx(VerificationContext.VerificationProvider, { children: jsxRuntime.jsx(PasskeyContext.PasskeyContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(OnrampContext.OnrampContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsx(WalletGroupContext.WalletGroupContextProvider, { children: jsxRuntime.jsx(UserFieldEditorContext.UserFieldEditorContextProvider, { children: jsxRuntime.jsx(ConnectWithOtpProvider.ConnectWithOtpProvider, { children: jsxRuntime.jsx(PhantomRedirectContext.PhantomRedirectContextProvider, { children: jsxRuntime.jsxs(SocialRedirectContext.SocialRedirectContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(OnrampWidget.OnrampWidget, {}), jsxRuntime.jsx(SyncAuthFlow.SyncAuthFlow, {}), jsxRuntime.jsx(WalletConnectorEvents.WalletConnectorEvents, { connectorProps: connectorProps }), confirmationModal, jsxRuntime.jsx(ErrorBoundaryExclude.ErrorBoundaryExclude, { children: children })] }) }) }) }) }) }) }) }) }) }) }) }) }) }) })] }) }) }) }) }) }));
+    return (jsxRuntime.jsx(reactI18next.I18nextProvider, { i18n: i18nSDKInstance, children: jsxRuntime.jsx(DynamicContext.Provider, { value: value, children: jsxRuntime.jsx(walletBook.WalletBookContextProvider, { walletBook: walletBook$1, children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, { cspNonce: cspNonce, customerTheme: parseTheme.parseTheme(theme, ((_v = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _v === void 0 ? void 0 : _v.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsxs(ViewContext.ViewContextProvider, { initialViewType: initialViewType, children: [networkValidationMode === 'always' && jsxRuntime.jsx(UseNetworkValidation.UseNetworkValidation, {}), jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(AccountExistsContext.AccountExistsContextProvider, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, { children: jsxRuntime.jsx(VerificationContext.VerificationProvider, { children: jsxRuntime.jsx(PasskeyContext.PasskeyContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(OnrampContext.OnrampContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsx(WalletGroupContext.WalletGroupContextProvider, { children: jsxRuntime.jsx(UserFieldEditorContext.UserFieldEditorContextProvider, { children: jsxRuntime.jsx(ConnectWithOtpProvider.ConnectWithOtpProvider, { children: jsxRuntime.jsx(PhantomRedirectContext.PhantomRedirectContextProvider, { children: jsxRuntime.jsxs(SocialRedirectContext.SocialRedirectContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(OnrampWidget.OnrampWidget, {}), jsxRuntime.jsx(SyncAuthFlow.SyncAuthFlow, {}), jsxRuntime.jsx(WalletConnectorEvents.WalletConnectorEvents, { connectorProps: connectorProps }), confirmationModal, jsxRuntime.jsx(ErrorBoundaryExclude.ErrorBoundaryExclude, { children: children })] }) }) }) }) }) }) }) }) }) }) }) }) }) }) })] }) }) }) }) }) }));
 };
 /** The context provider you need to have access too all of Dynamic's hooks */
 const DynamicContextProvider = (props) => {

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -178,7 +178,7 @@ const DynamicContext = createContext(undefined);
 const InnerDynamicContextProvider = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const { children, theme, settings, locale, enableInstrumentation = false, } = props;
-    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, defaultPhoneInputIso2, coinbaseWalletPreference, detectNewWalletsForLinking = defaultDynamicSettings.detectNewWalletsForLinking, enableConnectOnlyFallback = defaultDynamicSettings.enableConnectOnlyFallback, deepLinkPreference: deepLinkPreferenceProp = defaultDynamicSettings.deepLinkPreference, bridgeChains, cssOverrides, defaultNumberOfWalletsToShow = DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = defaultDynamicSettings.initialAuthenticationMode, debugError = defaultDynamicSettings.debugError, displaySiweStatement = defaultDynamicSettings.displaySiweStatement, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = defaultDynamicSettings.enableVisitTrackingOnConnectOnly, environmentId, walletsFilter, logLevel = defaultDynamicSettings.logLevel, mobileExperience, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, siweStatement, shadowDOMEnabled = defaultDynamicSettings.shadowDOMEnabled, walletConnectors: walletConnectorsProp, socialProvidersFilter, showLockedWalletView = defaultDynamicSettings.showLockedWalletView, walletConnectPreferredChains, walletConnectorExtensions, recommendedWallets, handlers, suppressEndUserConsoleWarning, transactionConfirmation: transactionConfirmationSettings, useMetamaskSdk = defaultDynamicSettings.useMetamaskSdk, } = settings;
+    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, defaultPhoneInputIso2, coinbaseWalletPreference, detectNewWalletsForLinking = defaultDynamicSettings.detectNewWalletsForLinking, enableConnectOnlyFallback = defaultDynamicSettings.enableConnectOnlyFallback, deepLinkPreference: deepLinkPreferenceProp = defaultDynamicSettings.deepLinkPreference, bridgeChains, cspNonce, cssOverrides, defaultNumberOfWalletsToShow = DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = defaultDynamicSettings.initialAuthenticationMode, debugError = defaultDynamicSettings.debugError, displaySiweStatement = defaultDynamicSettings.displaySiweStatement, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = defaultDynamicSettings.enableVisitTrackingOnConnectOnly, environmentId, walletsFilter, logLevel = defaultDynamicSettings.logLevel, mobileExperience, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, siweStatement, shadowDOMEnabled = defaultDynamicSettings.shadowDOMEnabled, walletConnectors: walletConnectorsProp, socialProvidersFilter, showLockedWalletView = defaultDynamicSettings.showLockedWalletView, walletConnectPreferredChains, walletConnectorExtensions, recommendedWallets, handlers, suppressEndUserConsoleWarning, transactionConfirmation: transactionConfirmationSettings, useMetamaskSdk = defaultDynamicSettings.useMetamaskSdk, } = settings;
     let { appLogoUrl = defaultDynamicSettings.appLogoUrl, appName = defaultDynamicSettings.appName, } = settings;
     /**
      * initialize Storage
@@ -515,6 +515,7 @@ const InnerDynamicContextProvider = (props) => {
             clearStatesOnBackClick,
             connectWallet,
             connectedWallets,
+            cspNonce,
             cssOverrides,
             customPrivacyPolicy,
             customTermsOfServices,
@@ -626,6 +627,7 @@ const InnerDynamicContextProvider = (props) => {
         clearStatesOnBackClick,
         connectWallet,
         connectedWallets,
+        cspNonce,
         cssOverrides,
         customPrivacyPolicy,
         customTermsOfServices,
@@ -736,7 +738,7 @@ const InnerDynamicContextProvider = (props) => {
         isBridgeFlow,
         isMultiWalletEnabled: multiWallet,
     });
-    return (jsx(I18nextProvider, { i18n: i18nSDKInstance, children: jsx(DynamicContext.Provider, { value: value, children: jsx(WalletBookContextProvider, { walletBook: walletBook, children: jsx(ThemeContextProvider, { customerTheme: parseTheme(theme, ((_v = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _v === void 0 ? void 0 : _v.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsx(LoadingContextProvider, { children: jsxs(ViewContextProvider, { initialViewType: initialViewType, children: [networkValidationMode === 'always' && jsx(UseNetworkValidation, {}), jsx(CaptchaContextProvider, { children: jsx(AccountExistsContextProvider, { children: jsx(WalletContextProvider, { children: jsx(VerificationProvider, { children: jsx(PasskeyContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(DynamicBridgeWidgetContextProvider, { children: jsx(OnrampContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsx(SendBalanceContextProvider, { children: jsx(WalletGroupContextProvider, { children: jsx(UserFieldEditorContextProvider, { children: jsx(ConnectWithOtpProvider, { children: jsx(PhantomRedirectContextProvider, { children: jsxs(SocialRedirectContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(OnrampWidget, {}), jsx(SyncAuthFlow, {}), jsx(WalletConnectorEvents, { connectorProps: connectorProps }), confirmationModal, jsx(ErrorBoundaryExclude, { children: children })] }) }) }) }) }) }) }) }) }) }) }) }) }) }) })] }) }) }) }) }) }));
+    return (jsx(I18nextProvider, { i18n: i18nSDKInstance, children: jsx(DynamicContext.Provider, { value: value, children: jsx(WalletBookContextProvider, { walletBook: walletBook, children: jsx(ThemeContextProvider, { cspNonce: cspNonce, customerTheme: parseTheme(theme, ((_v = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _v === void 0 ? void 0 : _v.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsx(LoadingContextProvider, { children: jsxs(ViewContextProvider, { initialViewType: initialViewType, children: [networkValidationMode === 'always' && jsx(UseNetworkValidation, {}), jsx(CaptchaContextProvider, { children: jsx(AccountExistsContextProvider, { children: jsx(WalletContextProvider, { children: jsx(VerificationProvider, { children: jsx(PasskeyContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(DynamicBridgeWidgetContextProvider, { children: jsx(OnrampContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsx(SendBalanceContextProvider, { children: jsx(WalletGroupContextProvider, { children: jsx(UserFieldEditorContextProvider, { children: jsx(ConnectWithOtpProvider, { children: jsx(PhantomRedirectContextProvider, { children: jsxs(SocialRedirectContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(OnrampWidget, {}), jsx(SyncAuthFlow, {}), jsx(WalletConnectorEvents, { connectorProps: connectorProps }), confirmationModal, jsx(ErrorBoundaryExclude, { children: children })] }) }) }) }) }) }) }) }) }) }) }) }) }) }) })] }) }) }) }) }) }));
 };
 /** The context provider you need to have access too all of Dynamic's hooks */
 const DynamicContextProvider = (props) => {

package/src/lib/context/DynamicContext/types/DynamicContextProps.d.ts

@@ -31,6 +31,12 @@ export interface DynamicContextProps {
         appName?: string;
         bridgeChains?: ChainsToConnect[];
         coinbaseWalletPreference?: CoinbaseWalletPreference;
+        /**
+         * A nonce value for inline `<style>` and `<link>` tags injected by the SDK.
+         * Required when using a strict Content Security Policy that disallows `unsafe-inline`.
+         * The nonce must match the one specified in the CSP `style-src` directive.
+         */
+        cspNonce?: string;
         cssOverrides?: string | JSX.Element;
         customPrivacyPolicy?: ReactNode;
         defaultPhoneInputIso2?: CountryIso2;

package/src/lib/context/DynamicContext/types/IDynamicContext.d.ts

@@ -45,6 +45,7 @@ export interface IDynamicContext {
      */
     connectedWallets: Wallet[];
     connectWallet: (walletConnector: WalletConnector, getAddressOpts?: GetAddressOpts, options?: ConnectWalletOptions) => Promise<ConnectWalletResult | undefined>;
+    cspNonce?: string;
     cssOverrides?: string | JSX.Element;
     customPrivacyPolicy?: ReactNode;
     customTermsOfServices?: ReactNode;

package/src/lib/context/DynamicContext/types/IInternalDynamicContext.d.ts

@@ -3,7 +3,7 @@ import { IDynamicContext } from './IDynamicContext';
  * Allows deprecating specific methods that we should avoid using internally
  * without deprecating them publicly as well.
  */
-export type IInternalDynamicContext = Omit<IDynamicContext, 'user' | 'cssOverrides' | 'accessDeniedButton' | 'accessDeniedMessagePrimary' | 'accessDeniedMessageSecondary' | 'appLogoUrl' | 'appName' | 'bridgeChains' | 'customPrivacyPolicy' | 'customTermsOfServices' | 'debugError' | 'defaultNumberOfWalletsToShow' | 'defaultPhoneInputIso2' | 'detectNewWalletsForLinking' | 'displaySiweStatement' | 'enableConnectOnlyFallback' | 'events' | 'handlers' | 'mobileExperience' | 'networkValidationMode' | 'newToWeb3WalletChainMap' | 'notInTheListImageUrl' | 'onboardingImageUrl' | 'overrides' | 'policiesConsentInnerComponent' | 'privacyPolicyUrl' | 'recommendedWallets' | 'redirectUrl' | 'shadowDOMEnabled' | 'showLockedWalletView' | 'siweStatement' | 'socialMediaIconUrl' | 'socialMediaLinkText' | 'socialMediaUrl' | 'socialProvidersFilter' | 'termsOfServiceUrl' | 'theme' | 'walletsFilter'> & {
+export type IInternalDynamicContext = Omit<IDynamicContext, 'user' | 'cspNonce' | 'cssOverrides' | 'accessDeniedButton' | 'accessDeniedMessagePrimary' | 'accessDeniedMessageSecondary' | 'appLogoUrl' | 'appName' | 'bridgeChains' | 'customPrivacyPolicy' | 'customTermsOfServices' | 'debugError' | 'defaultNumberOfWalletsToShow' | 'defaultPhoneInputIso2' | 'detectNewWalletsForLinking' | 'displaySiweStatement' | 'enableConnectOnlyFallback' | 'events' | 'handlers' | 'mobileExperience' | 'networkValidationMode' | 'newToWeb3WalletChainMap' | 'notInTheListImageUrl' | 'onboardingImageUrl' | 'overrides' | 'policiesConsentInnerComponent' | 'privacyPolicyUrl' | 'recommendedWallets' | 'redirectUrl' | 'shadowDOMEnabled' | 'showLockedWalletView' | 'siweStatement' | 'socialMediaIconUrl' | 'socialMediaLinkText' | 'socialMediaUrl' | 'socialProvidersFilter' | 'termsOfServiceUrl' | 'theme' | 'walletsFilter'> & {
     /**
      * @deprecated please call useOnboardingCompleteUser() OR useUser() instead.
      * | `useOnboardingCompleteUser` only returns the user if it's not missing KYC or MFA.
@@ -12,6 +12,10 @@ export type IInternalDynamicContext = Omit<IDynamicContext, 'user' | 'cssOverrid
      * UserProfile.
      */
     user: IDynamicContext['user'];
+    /**
+     * @deprecated please call useDynamicSettings().cspNonce instead
+     */
+    cspNonce?: IDynamicContext['cspNonce'];
     /**
      * @deprecated please call useDynamicSettings().cssOverrides instead
      */

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

@@ -20,10 +20,10 @@ var themesData = require('./themesData.cjs');
 var stylesheetBuilder = require('./utils/stylesheetBuilder/stylesheetBuilder.cjs');
 
 const ThemeContext = React.createContext(undefined);
-const ThemeContextProvider = ({ customerTheme, designSettings, children }) => {
+const ThemeContextProvider = ({ cspNonce, 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 linkTag = React.useRef(stylesheetBuilder.findOrCreateLinkTag(cspNonce));
+    const styleTag = React.useRef(stylesheetBuilder.findOrCreateStyleTag(cspNonce));
     const setTheme = React.useCallback((newTheme) => {
         _setTheme(newTheme);
         // SSR won't have document defined, so we can't run this logic in server side

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

@@ -3,6 +3,7 @@ import { ProjectSettingsDesign } from '@dynamic-labs/sdk-api-core';
 import { ThemeContextProps, ThemeData } from './types';
 export declare const ThemeContext: import("react").Context<ThemeContextProps | undefined>;
 interface ThemeContextProviderProps {
+    cspNonce?: string;
     customerTheme?: ThemeData;
     designSettings?: ProjectSettingsDesign;
 }

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

@@ -16,10 +16,10 @@ import { getThemeConfig, themesData } from './themesData.js';
 import { findOrCreateLinkTag, findOrCreateStyleTag, buildStylesheet } from './utils/stylesheetBuilder/stylesheetBuilder.js';
 
 const ThemeContext = createContext(undefined);
-const ThemeContextProvider = ({ customerTheme, designSettings, children }) => {
+const ThemeContextProvider = ({ cspNonce, customerTheme, designSettings, children }) => {
     const [theme, _setTheme] = useState(customerTheme || getThemeConfig(designSettings === null || designSettings === void 0 ? void 0 : designSettings.modal));
-    const linkTag = useRef(findOrCreateLinkTag());
-    const styleTag = useRef(findOrCreateStyleTag());
+    const linkTag = useRef(findOrCreateLinkTag(cspNonce));
+    const styleTag = useRef(findOrCreateStyleTag(cspNonce));
     const setTheme = useCallback((newTheme) => {
         _setTheme(newTheme);
         // SSR won't have document defined, so we can't run this logic in server side

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

@@ -17,7 +17,7 @@ require('../../../../utils/constants/values.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../../shared/consts/index.cjs');
 
-const findOrCreateLinkTag = () => {
+const findOrCreateLinkTag = (nonce) => {
     if (isSSR.isSSR())
         return;
     const existingStyleTag = document.querySelector('[data-source="dynamic-theme-cdn"]');
@@ -25,12 +25,15 @@ const findOrCreateLinkTag = () => {
         return existingStyleTag;
     }
     const linkTag = document.createElement('link');
+    if (nonce) {
+        linkTag.nonce = nonce;
+    }
     document.head.append(linkTag);
     linkTag.dataset.source = 'dynamic-theme-cdn';
     linkTag.rel = 'stylesheet';
     return linkTag;
 };
-const findOrCreateStyleTag = () => {
+const findOrCreateStyleTag = (nonce) => {
     if (isSSR.isSSR())
         return;
     const existingStyleTag = document.querySelector('[data-source="dynamic-theme"]');
@@ -38,6 +41,9 @@ const findOrCreateStyleTag = () => {
         return existingStyleTag;
     }
     const styleTag = document.createElement('style');
+    if (nonce) {
+        styleTag.nonce = nonce;
+    }
     document.head.append(styleTag);
     styleTag.dataset.source = 'dynamic-theme';
     return styleTag;

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

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

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

@@ -13,7 +13,7 @@ import '../../../../utils/constants/values.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../../shared/consts/index.js';
 
-const findOrCreateLinkTag = () => {
+const findOrCreateLinkTag = (nonce) => {
     if (isSSR())
         return;
     const existingStyleTag = document.querySelector('[data-source="dynamic-theme-cdn"]');
@@ -21,12 +21,15 @@ const findOrCreateLinkTag = () => {
         return existingStyleTag;
     }
     const linkTag = document.createElement('link');
+    if (nonce) {
+        linkTag.nonce = nonce;
+    }
     document.head.append(linkTag);
     linkTag.dataset.source = 'dynamic-theme-cdn';
     linkTag.rel = 'stylesheet';
     return linkTag;
 };
-const findOrCreateStyleTag = () => {
+const findOrCreateStyleTag = (nonce) => {
     if (isSSR())
         return;
     const existingStyleTag = document.querySelector('[data-source="dynamic-theme"]');
@@ -34,6 +37,9 @@ const findOrCreateStyleTag = () => {
         return existingStyleTag;
     }
     const styleTag = document.createElement('style');
+    if (nonce) {
+        styleTag.nonce = nonce;
+    }
     document.head.append(styleTag);
     styleTag.dataset.source = 'dynamic-theme';
     return styleTag;