@dynamic-labs/sdk-react-core 0.18.0-RC.16 → 0.18.0-RC.17

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

@@ -18,10 +18,13 @@ require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var getAuthToken = require('../../../utils/functions/getAuthToken/getAuthToken.cjs');
 var isConnectOnly = require('../../../utils/hooks/authenticationHooks/helpers/isConnectOnly.cjs');
+var disableAuthVerificationFlag = require('./utils/disableAuthVerificationFlag/disableAuthVerificationFlag.cjs');
 
-const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUserProfileUpdate, onConnectSuccess, }, handleLogOut, primaryWallet, user, isAuthenticated, authMode, connectedWallets, }) => {
+const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUserProfileUpdate, onConnectSuccess, }, handleLogOut, primaryWallet, selectedWalletConnector, user, isAuthenticated, authMode, ongoingVerifications, }) => {
     const [callbackQueue, setCallbackQueue] = React.useState([]);
-    const isConnectOnlyAndCallbackIsConnectSuccess = React.useCallback((next) => isConnectOnly.isConnectOnly(user, authMode) && next === 'connectSuccess', [authMode, user]);
+    const isConnectOnlyAndCallbackIsConnectSuccess = React.useCallback((next) => isConnectOnly.isConnectOnly(user, authMode) &&
+        Boolean(primaryWallet) &&
+        next === 'connectSuccess', [authMode, user, primaryWallet]);
     React.useEffect(() => {
         if (!callbackQueue.length) {
             return;
@@ -35,8 +38,9 @@ const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUse
             updatedQueue.shift();
             setCallbackQueue(updatedQueue);
             try {
+                disableAuthVerificationFlag.disableAuthVerificationFlag(ongoingVerifications);
                 onConnectSuccess === null || onConnectSuccess === void 0 ? void 0 : onConnectSuccess({
-                    walletConnector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector,
+                    walletConnector: selectedWalletConnector,
                 });
             }
             catch (e) {
@@ -63,6 +67,7 @@ const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUse
         switch (next) {
             case 'authSuccess': {
                 try {
+                    disableAuthVerificationFlag.disableAuthVerificationFlag(ongoingVerifications);
                     onAuthSuccess === null || onAuthSuccess === void 0 ? void 0 : onAuthSuccess({
                         authToken,
                         handleLogOut,
@@ -115,6 +120,7 @@ const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUse
         user,
         authMode,
         isConnectOnlyAndCallbackIsConnectSuccess,
+        ongoingVerifications,
     ]);
     const setCallback = (callback) => {
         setCallbackQueue((prev) => [...prev, callback]);

package/src/lib/context/DynamicContext/useCustomerCallbacks/useCustomerCallbacks.d.ts

@@ -1,4 +1,4 @@
-import type { Callback, UseCustomerCallbacksArgs } from './types';
-export declare const useCustomerCallbacks: ({ callbacks: { onAuthSuccess, onLinkSuccess, onUserProfileUpdate, onConnectSuccess, }, handleLogOut, primaryWallet, user, isAuthenticated, authMode, connectedWallets, }: UseCustomerCallbacksArgs) => {
+import { Callback, UseCustomerCallbacksArgs } from './types';
+export declare const useCustomerCallbacks: ({ callbacks: { onAuthSuccess, onLinkSuccess, onUserProfileUpdate, onConnectSuccess, }, handleLogOut, primaryWallet, selectedWalletConnector, user, isAuthenticated, authMode, ongoingVerifications, }: UseCustomerCallbacksArgs) => {
     setCallback: (callback: Callback) => void;
 };

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

@@ -14,10 +14,13 @@ import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { getAuthToken } from '../../../utils/functions/getAuthToken/getAuthToken.js';
 import { isConnectOnly } from '../../../utils/hooks/authenticationHooks/helpers/isConnectOnly.js';
+import { disableAuthVerificationFlag } from './utils/disableAuthVerificationFlag/disableAuthVerificationFlag.js';
 
-const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUserProfileUpdate, onConnectSuccess, }, handleLogOut, primaryWallet, user, isAuthenticated, authMode, connectedWallets, }) => {
+const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUserProfileUpdate, onConnectSuccess, }, handleLogOut, primaryWallet, selectedWalletConnector, user, isAuthenticated, authMode, ongoingVerifications, }) => {
     const [callbackQueue, setCallbackQueue] = useState([]);
-    const isConnectOnlyAndCallbackIsConnectSuccess = useCallback((next) => isConnectOnly(user, authMode) && next === 'connectSuccess', [authMode, user]);
+    const isConnectOnlyAndCallbackIsConnectSuccess = useCallback((next) => isConnectOnly(user, authMode) &&
+        Boolean(primaryWallet) &&
+        next === 'connectSuccess', [authMode, user, primaryWallet]);
     useEffect(() => {
         if (!callbackQueue.length) {
             return;
@@ -31,8 +34,9 @@ const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUse
             updatedQueue.shift();
             setCallbackQueue(updatedQueue);
             try {
+                disableAuthVerificationFlag(ongoingVerifications);
                 onConnectSuccess === null || onConnectSuccess === void 0 ? void 0 : onConnectSuccess({
-                    walletConnector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector,
+                    walletConnector: selectedWalletConnector,
                 });
             }
             catch (e) {
@@ -59,6 +63,7 @@ const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUse
         switch (next) {
             case 'authSuccess': {
                 try {
+                    disableAuthVerificationFlag(ongoingVerifications);
                     onAuthSuccess === null || onAuthSuccess === void 0 ? void 0 : onAuthSuccess({
                         authToken,
                         handleLogOut,
@@ -111,6 +116,7 @@ const useCustomerCallbacks = ({ callbacks: { onAuthSuccess, onLinkSuccess, onUse
         user,
         authMode,
         isConnectOnlyAndCallbackIsConnectSuccess,
+        ongoingVerifications,
     ]);
     const setCallback = (callback) => {
         setCallbackQueue((prev) => [...prev, callback]);

package/src/lib/context/DynamicContext/useCustomerCallbacks/utils/disableAuthVerificationFlag/disableAuthVerificationFlag.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../../ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../../utils/constants/colors.cjs');
+require('../../../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../../../shared/consts/index.cjs');
+
+/** Sets the auth verification flag to false, but first ensures it was true in the first place. Logs error otherwise */
+const disableAuthVerificationFlag = ({ authVerification, setAuthVerification, }) => {
+    if (authVerification)
+        setAuthVerification(false);
+    else
+        logger.logger.error('The "auth" flag, from ongoingVerifications, had not been previously raised at the time of being lowered. Please ensure to set it to true whenever any kind of auth verification process is started');
+};
+
+exports.disableAuthVerificationFlag = disableAuthVerificationFlag;

package/src/lib/context/DynamicContext/useCustomerCallbacks/utils/disableAuthVerificationFlag/disableAuthVerificationFlag.d.ts

@@ -0,0 +1,3 @@
+import { IOngoingVerifications } from '../../../types';
+/** Sets the auth verification flag to false, but first ensures it was true in the first place. Logs error otherwise */
+export declare const disableAuthVerificationFlag: ({ authVerification, setAuthVerification, }: Pick<IOngoingVerifications, 'authVerification' | 'setAuthVerification'>) => void;

package/src/lib/context/DynamicContext/useCustomerCallbacks/utils/disableAuthVerificationFlag/disableAuthVerificationFlag.js

@@ -0,0 +1,23 @@
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../../ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../../utils/constants/colors.js';
+import '../../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../../shared/consts/index.js';
+
+/** Sets the auth verification flag to false, but first ensures it was true in the first place. Logs error otherwise */
+const disableAuthVerificationFlag = ({ authVerification, setAuthVerification, }) => {
+    if (authVerification)
+        setAuthVerification(false);
+    else
+        logger.error('The "auth" flag, from ongoingVerifications, had not been previously raised at the time of being lowered. Please ensure to set it to true whenever any kind of auth verification process is started');
+};
+
+export { disableAuthVerificationFlag };

package/src/lib/context/DynamicContext/useCustomerCallbacks/utils/disableAuthVerificationFlag/index.d.ts

@@ -0,0 +1 @@
+export * from './disableAuthVerificationFlag';

package/src/lib/context/DynamicContext/useCustomerCallbacks/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './disableAuthVerificationFlag';

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

@@ -11,7 +11,7 @@ const useDynamicContext = () => {
     if (context === undefined) {
         throw new Error('useDynamicContext must be used within a DynamicContextProvider');
     }
-    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isUserConnected, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, primaryWallet, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, } = context;
+    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isUserConnected, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, ongoingVerifications, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, } = context;
     return {
         accountSwitchState,
         authMode,
@@ -29,6 +29,10 @@ const useDynamicContext = () => {
         multiWalletWidgetState,
         network,
         networkConfigurations,
+        ongoingVerifications: {
+            authVerification: ongoingVerifications.authVerification,
+            connectAndSignVerification: ongoingVerifications.connectAndSignVerification,
+        },
         primaryWallet,
         qrcodeUri,
         rpcProviders,

package/src/lib/context/DynamicContext/useDynamicContext.d.ts

@@ -1,3 +1,5 @@
-import { IDynamicContext } from './DynamicContext';
-export type UseDynamicContext = Pick<IDynamicContext, 'accountSwitchState' | 'authMode' | 'authToken' | 'awaitingSignatureState' | 'connectedWallets' | 'getNameService' | 'handleLogOut' | 'handleUnlinkWallet' | 'isAuthenticated' | 'isUserConnected' | 'linkedWallets' | 'loadingNetwork' | 'loginWithEmail' | 'multiWalletWidgetState' | 'network' | 'networkConfigurations' | 'primaryWallet' | 'qrcodeUri' | 'rpcProviders' | 'sdkHasLoaded' | 'secondaryWallets' | 'setLogInWithEmail' | 'setMultiWalletWidgetState' | 'setNetwork' | 'setPrimaryWallet' | 'setShowAuthFlow' | 'setShowDynamicUserProfile' | 'setShowQrcodeModal' | 'shadowDOMEnabled' | 'showAuthFlow' | 'showQrcodeModal' | 'user' | 'walletConnector' | 'wallets' | 'walletsByChain' | 'walletsToConnectByChain'>;
+import { IDynamicContext } from './types';
+export type UseDynamicContext = Pick<IDynamicContext, 'accountSwitchState' | 'authMode' | 'authToken' | 'awaitingSignatureState' | 'connectedWallets' | 'getNameService' | 'handleLogOut' | 'handleUnlinkWallet' | 'isAuthenticated' | 'isUserConnected' | 'linkedWallets' | 'loadingNetwork' | 'loginWithEmail' | 'multiWalletWidgetState' | 'network' | 'networkConfigurations' | 'primaryWallet' | 'qrcodeUri' | 'rpcProviders' | 'sdkHasLoaded' | 'secondaryWallets' | 'setLogInWithEmail' | 'setMultiWalletWidgetState' | 'setNetwork' | 'setPrimaryWallet' | 'setShowAuthFlow' | 'setShowDynamicUserProfile' | 'setShowQrcodeModal' | 'shadowDOMEnabled' | 'showAuthFlow' | 'showQrcodeModal' | 'user' | 'walletConnector' | 'wallets' | 'walletsByChain' | 'walletsToConnectByChain'> & {
+    ongoingVerifications: Pick<IDynamicContext['ongoingVerifications'], 'authVerification' | 'connectAndSignVerification'>;
+};
 export declare const useDynamicContext: () => UseDynamicContext;

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

@@ -7,7 +7,7 @@ const useDynamicContext = () => {
     if (context === undefined) {
         throw new Error('useDynamicContext must be used within a DynamicContextProvider');
     }
-    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isUserConnected, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, primaryWallet, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, } = context;
+    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isUserConnected, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, ongoingVerifications, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, } = context;
     return {
         accountSwitchState,
         authMode,
@@ -25,6 +25,10 @@ const useDynamicContext = () => {
         multiWalletWidgetState,
         network,
         networkConfigurations,
+        ongoingVerifications: {
+            authVerification: ongoingVerifications.authVerification,
+            connectAndSignVerification: ongoingVerifications.connectAndSignVerification,
+        },
         primaryWallet,
         qrcodeUri,
         rpcProviders,

package/src/lib/context/DynamicContext/useInternalDynamicContext.d.ts

@@ -1 +1 @@
-export declare const useInternalDynamicContext: () => import("./DynamicContext").IDynamicContext;
+export declare const useInternalDynamicContext: () => import("./types").IDynamicContext;

package/src/lib/context/QrCodeContext/QrCodeContext.cjs

@@ -36,6 +36,7 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var useDefaultQrCode = require('../../utils/hooks/useDefaultQrCode/useDefaultQrCode.cjs');
 require('../MockContext/MockContext.cjs');
 require('../CaptchaContext/CaptchaContext.cjs');

package/src/lib/context/QrCodeContext/QrCodeContext.js

@@ -32,6 +32,7 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 import { useDefaultQrCode } from '../../utils/hooks/useDefaultQrCode/useDefaultQrCode.js';
 import '../MockContext/MockContext.js';
 import '../CaptchaContext/CaptchaContext.js';

package/src/lib/context/SendBalanceContext/SendBalanceContext.cjs

@@ -38,6 +38,7 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var SendBalanceModal = require('../../modals/SendBalanceModal/SendBalanceModal.cjs');
 require('../MockContext/MockContext.cjs');
 require('../CaptchaContext/CaptchaContext.cjs');

package/src/lib/context/SendBalanceContext/SendBalanceContext.js

@@ -34,6 +34,7 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 import { SendBalanceModal } from '../../modals/SendBalanceModal/SendBalanceModal.js';
 import '../MockContext/MockContext.js';
 import '../CaptchaContext/CaptchaContext.js';

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.cjs

@@ -37,8 +37,9 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../components/InlineWidget/InlineWidget.cjs');
-require('../MockContext/MockContext.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var ErrorContext = require('../ErrorContext/ErrorContext.cjs');
+require('../MockContext/MockContext.cjs');
 require('../CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.js

@@ -33,8 +33,9 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../components/InlineWidget/InlineWidget.js';
-import '../MockContext/MockContext.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 import { useErrorContext } from '../ErrorContext/ErrorContext.js';
+import '../MockContext/MockContext.js';
 import '../CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 

package/src/lib/context/WalletContext/WalletContext.cjs

@@ -24,13 +24,13 @@ require('../CaptchaContext/CaptchaContext.cjs');
 var useSyncPrimaryWallet = require('../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.cjs');
 
 const WalletContext = React.createContext(undefined);
-const WalletContextProvider = ({ children, canSync, connectWalletByAddressAndChain, }) => {
-    const { computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, authMode, } = useInternalDynamicContext.useInternalDynamicContext();
+const WalletContextProvider = ({ children, canSync, }) => {
+    const { computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, authMode, connectWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     useSyncPrimaryWallet.useSyncPrimaryWallet({
         authMode,
         canSync,
         computeConnectedStateForWallets,
-        connectWalletByAddressAndChain,
+        connectWallet,
         handleLogOut,
         multiWalletWidgetState,
         primaryWallet,

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

@@ -1,9 +1,7 @@
 import { ReactNode } from 'react';
-import { Chain } from '../../..';
 export declare const WalletContext: import("react").Context<undefined>;
-export declare const WalletContextProvider: ({ children, canSync, connectWalletByAddressAndChain, }: {
+export declare const WalletContextProvider: ({ children, canSync, }: {
     children: ReactNode;
     canSync: boolean;
-    connectWalletByAddressAndChain: (name: string, address: string, chain: Chain) => Promise<void>;
 }) => JSX.Element;
 export declare const useWalletContext: () => never;

package/src/lib/context/WalletContext/WalletContext.js

@@ -20,13 +20,13 @@ import '../CaptchaContext/CaptchaContext.js';
 import { useSyncPrimaryWallet } from '../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.js';
 
 const WalletContext = createContext(undefined);
-const WalletContextProvider = ({ children, canSync, connectWalletByAddressAndChain, }) => {
-    const { computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, authMode, } = useInternalDynamicContext();
+const WalletContextProvider = ({ children, canSync, }) => {
+    const { computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, authMode, connectWallet, } = useInternalDynamicContext();
     useSyncPrimaryWallet({
         authMode,
         canSync,
         computeConnectedStateForWallets,
-        connectWalletByAddressAndChain,
+        connectWallet,
         handleLogOut,
         multiWalletWidgetState,
         primaryWallet,

package/src/lib/data/api.cjs

@@ -373,6 +373,19 @@ const getOnrampProviders = ({ chain, environmentId, networkId, token, walletAddr
         throw new Error('No onramps');
     }
     return onramps;
+});
+const sendDynamicProps = (environmentId, dynamicContextProps) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        yield sdkApi().updateSdkSettings({
+            environmentId,
+            sdkSettingsRequest: {
+                dynamicContextProps,
+            },
+        });
+    }
+    catch (e) {
+        logger.logger.error(e);
+    }
 });
 
 exports.createEmailVerification = createEmailVerification;
@@ -388,6 +401,7 @@ exports.mapChainToChainEnum = mapChainToChainEnum;
 exports.mapProviderToProviderEnum = mapProviderToProviderEnum;
 exports.retryEmailVerification = retryEmailVerification;
 exports.revokeSession = revokeSession;
+exports.sendDynamicProps = sendDynamicProps;
 exports.signInWithEmailVerification = signInWithEmailVerification;
 exports.transferWallet = transferWallet;
 exports.unlinkOAuth = unlinkOAuth;

package/src/lib/data/api.d.ts

@@ -62,3 +62,4 @@ export declare const getOnrampProviders: ({ chain, environmentId, networkId, tok
     token?: string | undefined;
     walletAddress: string;
 }) => Promise<OnrampConfiguration[]>;
+export declare const sendDynamicProps: (environmentId: string, dynamicContextProps: object) => Promise<void>;

package/src/lib/data/api.js

@@ -369,6 +369,19 @@ const getOnrampProviders = ({ chain, environmentId, networkId, token, walletAddr
         throw new Error('No onramps');
     }
     return onramps;
+});
+const sendDynamicProps = (environmentId, dynamicContextProps) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        yield sdkApi().updateSdkSettings({
+            environmentId,
+            sdkSettingsRequest: {
+                dynamicContextProps,
+            },
+        });
+    }
+    catch (e) {
+        logger.error(e);
+    }
 });
 
-export { createEmailVerification, createVisit, fetchNetworkSettings, fetchNonce, fetchProjectSettings, getEmailProvider, getOnrampProviders, linkWallet, mapAuthModeTypeToEnum, mapChainToChainEnum, mapProviderToProviderEnum, retryEmailVerification, revokeSession, signInWithEmailVerification, transferWallet, unlinkOAuth, unlinkWallet, updateUserProfileFields, verifyEmail, verifyOAuth, verifyWallet };
+export { createEmailVerification, createVisit, fetchNetworkSettings, fetchNonce, fetchProjectSettings, getEmailProvider, getOnrampProviders, linkWallet, mapAuthModeTypeToEnum, mapChainToChainEnum, mapProviderToProviderEnum, retryEmailVerification, revokeSession, sendDynamicProps, signInWithEmailVerification, transferWallet, unlinkOAuth, unlinkWallet, updateUserProfileFields, verifyEmail, verifyOAuth, verifyWallet };

package/src/lib/layout/DynamicAuthLayout/DynamicAuthLayout.cjs

@@ -45,6 +45,7 @@ require('yup');
 var Modal = require('../../components/Modal/Modal.cjs');
 var ModalCard = require('../../components/ModalCard/ModalCard.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
 var OverlayCardTarget = require('../../components/OverlayCard/OverlayCardTarget.cjs');
 var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');

package/src/lib/layout/DynamicAuthLayout/DynamicAuthLayout.js

@@ -41,6 +41,7 @@ import 'yup';
 import { Modal } from '../../components/Modal/Modal.js';
 import { ModalCard } from '../../components/ModalCard/ModalCard.js';
 import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
 import { OverlayCardTarget } from '../../components/OverlayCard/OverlayCardTarget.js';
 import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -47,6 +47,7 @@ require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 var QrCodeContext = require('../../../context/QrCodeContext/QrCodeContext.cjs');
 var useAuthLayoutChecks = require('../../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
 var index = require('../../../context/FooterAnimationContext/index.cjs');
@@ -87,7 +88,7 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         showBackButton,
         showHelpContent,
     ]);
-    const closeButton = showCloseButton && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    const closeButton = showCloseButton && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     const qrCodePreHeader = (jsxRuntime.jsxs("div", Object.assign({ className: 'qr-code-view__scan-issue-message' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: "If you're having issues scanning, click\u00A0" })), jsxRuntime.jsx("button", Object.assign({ className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true) }, { children: "here" }))] })));
     const positionAbsolute = view === 'login-with-email-verification';
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showQrCodePreHeader && qrCodePreHeader, jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: leadingButtons, trailing: closeButton, positionAbsolute: positionAbsolute }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography' }, { children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'header__skeleton' })) : (heading) })) }))] }));

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -43,6 +43,7 @@ import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
 import { useQrCodeContext } from '../../../context/QrCodeContext/QrCodeContext.js';
 import { useAuthLayoutChecks } from '../../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
 import { useFooterAnimationContext } from '../../../context/FooterAnimationContext/index.js';
@@ -83,7 +84,7 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         showBackButton,
         showHelpContent,
     ]);
-    const closeButton = showCloseButton && (jsx(IconButton, Object.assign({ onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
+    const closeButton = showCloseButton && (jsx(IconButton, Object.assign({ onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon' }, { children: jsx(SvgClose, {}) })));
     const qrCodePreHeader = (jsxs("div", Object.assign({ className: 'qr-code-view__scan-issue-message' }, { children: [jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: "If you're having issues scanning, click\u00A0" })), jsx("button", Object.assign({ className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true) }, { children: "here" }))] })));
     const positionAbsolute = view === 'login-with-email-verification';
     return (jsxs(Fragment, { children: [showQrCodePreHeader && qrCodePreHeader, jsx(ModalHeader, Object.assign({ leading: leadingButtons, trailing: closeButton, positionAbsolute: positionAbsolute }, { children: jsx(Typography, Object.assign({ as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography' }, { children: !projectSettings ? (jsx(Skeleton, { className: 'header__skeleton' })) : (heading) })) }))] }));

package/src/lib/layout/DynamicAuthLayout/HelpContent/HelpHeader/HelpHeader.cjs

@@ -42,6 +42,7 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var index = require('../../../../context/FooterAnimationContext/index.cjs');
 var getDynamicLayoutData = require('../../../../utils/functions/getDynamicLayoutData/getDynamicLayoutData.cjs');
 
@@ -49,7 +50,7 @@ const HelpHeader = () => {
     const { setIsFooterExpanded } = index.useFooterAnimationContext();
     const { view } = ViewContext.useViewContext();
     const { helpHeaderData } = getDynamicLayoutData.getDynamicLayoutData({ view });
-    const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: () => setIsFooterExpanded(false), "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'back-button ' }) })));
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: () => setIsFooterExpanded(false), "data-testid": 'back-button', className: 'header__icon' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'back-button ' }) })));
     return (jsxRuntime.jsx("div", Object.assign({ className: 'help-header' }, { children: jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: backButton }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-help-heading', className: 'header__typography' }, { children: helpHeaderData === null || helpHeaderData === void 0 ? void 0 : helpHeaderData.heading })) })) })));
 };
 

package/src/lib/layout/DynamicAuthLayout/HelpContent/HelpHeader/HelpHeader.js

@@ -38,6 +38,7 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { useFooterAnimationContext } from '../../../../context/FooterAnimationContext/index.js';
 import { getDynamicLayoutData } from '../../../../utils/functions/getDynamicLayoutData/getDynamicLayoutData.js';
 
@@ -45,7 +46,7 @@ const HelpHeader = () => {
     const { setIsFooterExpanded } = useFooterAnimationContext();
     const { view } = useViewContext();
     const { helpHeaderData } = getDynamicLayoutData({ view });
-    const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: () => setIsFooterExpanded(false), "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, { className: 'back-button ' }) })));
+    const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: () => setIsFooterExpanded(false), "data-testid": 'back-button', className: 'header__icon' }, { children: jsx(SvgChevronLeft, { className: 'back-button ' }) })));
     return (jsx("div", Object.assign({ className: 'help-header' }, { children: jsx(ModalHeader, Object.assign({ trailing: backButton }, { children: jsx(Typography, Object.assign({ as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-help-heading', className: 'header__typography' }, { children: helpHeaderData === null || helpHeaderData === void 0 ? void 0 : helpHeaderData.heading })) })) })));
 };
 

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/Item/Item.cjs

@@ -40,6 +40,7 @@ require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const Item = ({ heading, StartIcon, EndIcon, message, url, }) => (jsxRuntime.jsxs("a", Object.assign({ className: 'footer-buttons-item', href: url, rel: 'noopener noreferrer', target: '_blank' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'footer-buttons-item__icon--left' }, { children: jsxRuntime.jsx(StartIcon, {}) })), jsxRuntime.jsxs("div", Object.assign({ className: 'footer-buttons-item__typography' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h2', weight: 'regular', color: 'primary', variant: 'body_normal' }, { children: heading })), message && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'p', weight: 'regular', color: 'secondary' }, { children: message })))] })), EndIcon && jsxRuntime.jsx(EndIcon, { style: { height: '1.5rem', width: '1.5rem' } })] })));
 

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/Item/Item.js

@@ -36,6 +36,7 @@ import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 
 const Item = ({ heading, StartIcon, EndIcon, message, url, }) => (jsxs("a", Object.assign({ className: 'footer-buttons-item', href: url, rel: 'noopener noreferrer', target: '_blank' }, { children: [jsx("div", Object.assign({ className: 'footer-buttons-item__icon--left' }, { children: jsx(StartIcon, {}) })), jsxs("div", Object.assign({ className: 'footer-buttons-item__typography' }, { children: [jsx(Typography, Object.assign({ as: 'h2', weight: 'regular', color: 'primary', variant: 'body_normal' }, { children: heading })), message && (jsx(Typography, Object.assign({ as: 'p', weight: 'regular', color: 'secondary' }, { children: message })))] })), EndIcon && jsx(EndIcon, { style: { height: '1.5rem', width: '1.5rem' } })] })));
 

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.cjs

@@ -41,6 +41,7 @@ require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var NewToWeb3WalletItem = require('../NewToWeb3WalletItem/NewToWeb3WalletItem.cjs');
 
 const WalletExtensionOrAppContinueButton = ({ wallet, selectedUrl, }) => {

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.js

@@ -37,6 +37,7 @@ import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 import { NewToWeb3WalletItem } from '../NewToWeb3WalletItem/NewToWeb3WalletItem.js';
 
 const WalletExtensionOrAppContinueButton = ({ wallet, selectedUrl, }) => {

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletListHelpContent.cjs

@@ -46,6 +46,7 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var NewToWeb3WalletItem = require('./NewToWeb3WalletItem/NewToWeb3WalletItem.cjs');
 var Item = require('./Item/Item.cjs');
 var WalletExtensionOrAppContinueButton = require('./WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.cjs');

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletListHelpContent.js

@@ -42,6 +42,7 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { NewToWeb3WalletItem } from './NewToWeb3WalletItem/NewToWeb3WalletItem.js';
 import { Item } from './Item/Item.js';
 import { WalletExtensionOrAppContinueButton } from './WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.js';

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletMoreInfoContent/WalletMoreInfoContent.cjs

@@ -46,6 +46,7 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const WalletMoreInfoContent = ({ variant, walletName, }) => {
     const defaultSignContent = {

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletMoreInfoContent/WalletMoreInfoContent.js

@@ -42,6 +42,7 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
 
 const WalletMoreInfoContent = ({ variant, walletName, }) => {
     const defaultSignContent = {

package/src/lib/layout/DynamicAuthLayout/ToSFooter/ToSFooter.cjs

@@ -40,6 +40,7 @@ require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 var useAuthLayoutChecks = require('../../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
 
 const ToSFooter = () => {

package/src/lib/layout/DynamicAuthLayout/ToSFooter/ToSFooter.js

@@ -36,6 +36,7 @@ import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
 import { useAuthLayoutChecks } from '../../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
 
 const ToSFooter = () => {

package/src/lib/layout/DynamicAuthLayout/WalletProgressStepper/WalletProgressStepper.cjs

@@ -42,6 +42,7 @@ require('yup');
 var Step = require('../../../components/Step/Step.cjs');
 var Stepper = require('../../../components/Stepper/Stepper.cjs');
 require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 var getChainStepState = require('../utils/getChainStepState/getChainStepState.cjs');
 
 const WalletProgressStepper = () => {

package/src/lib/layout/DynamicAuthLayout/WalletProgressStepper/WalletProgressStepper.js

@@ -38,6 +38,7 @@ import 'yup';
 import { Step } from '../../../components/Step/Step.js';
 import { Stepper } from '../../../components/Stepper/Stepper.js';
 import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
 import { getChainStepState } from '../utils/getChainStepState/getChainStepState.js';
 
 const WalletProgressStepper = () => {