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

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 = () => {

package/src/lib/layouts/BridgeNextWalletToConnectLayout/BridgeNextWalletToConnectLayout.cjs

@@ -43,6 +43,7 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const BridgeNextWalletToConnectLayout = ({ chainName, chainIcon, onClickAction, onClickClose }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));

package/src/lib/layouts/BridgeNextWalletToConnectLayout/BridgeNextWalletToConnectLayout.js

@@ -39,6 +39,7 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const BridgeNextWalletToConnectLayout = ({ chainName, chainIcon, onClickAction, onClickClose }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));

package/src/lib/layouts/BridgeWelcomeLayout/BridgeWelcomeLayout.cjs

@@ -45,6 +45,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');
 
 const BridgeWelcomeLayout = ({ body, chains = [], onClickAction, onClickClose, title, actionButtonText, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));

package/src/lib/layouts/BridgeWelcomeLayout/BridgeWelcomeLayout.js

@@ -41,6 +41,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';
 
 const BridgeWelcomeLayout = ({ body, chains = [], onClickAction, onClickClose, title, actionButtonText, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));

package/src/lib/layouts/ConnectedWalletsListLayout/ConnectedWalletsListLayout.cjs

@@ -44,6 +44,7 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const ConnectedWalletsListLayout = ({ title, body, onClickBack, onClickClose, onClickAction, actionButtonText = 'Continue', children, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));

package/src/lib/layouts/ConnectedWalletsListLayout/ConnectedWalletsListLayout.js

@@ -40,6 +40,7 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const ConnectedWalletsListLayout = ({ title, body, onClickBack, onClickClose, onClickAction, actionButtonText = 'Continue', children, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));

package/src/lib/modals/SendBalanceModal/SendBalanceModal.cjs

@@ -44,6 +44,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');
 
 const SendBalanceModal = ({ initialRecipientAddress, initialValue, onReject, onSuccess, }) => {
     usePreventPageScroll.usePreventPageScroll(true);

package/src/lib/modals/SendBalanceModal/SendBalanceModal.js

@@ -40,6 +40,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';
 
 const SendBalanceModal = ({ initialRecipientAddress, initialValue, onReject, onSuccess, }) => {
     usePreventPageScroll(true);

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs

@@ -55,6 +55,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');
 
 const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message, handler, onReject, onSignMessage, }) => {
     usePreventPageScroll.usePreventPageScroll(true);

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js

@@ -51,6 +51,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';
 
 const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message, handler, onReject, onSignMessage, }) => {
     usePreventPageScroll(true);

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs

@@ -43,6 +43,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');
 
 const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionResponseSuccess, transaction, provider, }) => {
     usePreventPageScroll.usePreventPageScroll(true);

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.js

@@ -39,6 +39,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';
 
 const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionResponseSuccess, transaction, provider, }) => {
     usePreventPageScroll(true);

package/src/lib/shared/types/index.d.ts

@@ -29,6 +29,7 @@ export type UserProfile = UserFields & {
     userId?: string;
     verifiedCredentials: JwtVerifiedCredential[];
     wallet?: string;
+    scope?: string;
 };
 export type Icon = React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
     title?: string | undefined;
@@ -99,7 +100,7 @@ export type OnAuthSuccess = (params: {
     walletConnector: WalletConnector | undefined;
 }) => void;
 export type OnConnectSuccess = (params: {
-    walletConnector: WalletConnector | undefined;
+    walletConnector: WalletConnector | null;
 }) => void;
 export type OnUserProfileUpdate = (user: UserProfile) => void;
 export type MultiWalletWidgetState = 'idle' | 'awaiting_account_switch' | 'awaiting_connection' | 'awaiting_signature' | 'detected_new_wallet';

package/src/lib/shared/utils/hooks/index.d.ts

@@ -4,3 +4,4 @@ export { usePreventPageScroll } from './usePreventPageScroll';
 export { useGlobalLoading } from './useGlobalLoading';
 export { useMediaQuery } from './useMediaQuery';
 export { useEffectOnce } from './useEffectOnce';
+export { useForwardedRef } from './useForwardedRef';

package/src/lib/shared/utils/hooks/useForwardedRef/index.d.ts

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