@dynamic-labs/sdk-react-core 4.4.3 → 4.5.0

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

@@ -1,11 +1,11 @@
 'use client'
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import { createContext, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { getIconicSpriteUrl } from '@dynamic-labs/iconic';
 import { Logger } from '@dynamic-labs/logger';
-import { MissingEnvironmentIdError, StorageService } from '@dynamic-labs/utils';
+import { MissingEnvironmentIdError, getEnvVarWithFallback, StorageService } from '@dynamic-labs/utils';
 import { useWalletBookCdn, getWalletBookCdnUrl, WalletBookContextProvider } from '@dynamic-labs/wallet-book';
 import { setChainInfoOverrides, logger as logger$1, isSessionKeyCompatibleWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { VERSION } from '../../../version.js';
@@ -43,6 +43,7 @@ import 'react-dom';
 import '../../utils/functions/compareChains/compareChains.js';
 import { ThemeContextProvider } from '../ThemeContext/ThemeContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
 import { useSetWalletConnectorVerifiedCredentials } from '../../utils/hooks/useSetWalletConnectorVerifiedCredentials/useSetWalletConnectorVerifiedCredentials.js';
 import '@dynamic-labs/types';
 import { SocialRedirectContextProvider } from '../SocialRedirectContext/SocialRedirectContext.js';
@@ -152,7 +153,7 @@ const PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = '2762a57b-faa4-41ce-9f16-abff9300e2c9
 const DynamicContext = createContext(undefined);
 /** The context provider itself we only use internally */
 const InnerDynamicContextProvider = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { children, theme, settings, locale, enableInstrumentation = false, } = props;
     const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, defaultPhoneInputIso2, apiBaseUrl, 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, toolkitEnabled, siweStatement, shadowDOMEnabled = defaultDynamicSettings.shadowDOMEnabled, walletConnectors: walletConnectorsProp, socialProvidersFilter, showLockedWalletView = defaultDynamicSettings.showLockedWalletView, walletConnectPreferredChains, walletConnectorExtensions, recommendedWallets, handlers, suppressEndUserConsoleWarning, transactionConfirmation: transactionConfirmationSettings, } = settings;
     let { appLogoUrl = defaultDynamicSettings.appLogoUrl, appName = defaultDynamicSettings.appName, } = settings;
@@ -162,10 +163,15 @@ const InnerDynamicContextProvider = (props) => {
     useRegisterStorageService({
         storagePostfix: settings.localStorageSuffix,
     });
+    /**
+     * Tracks if the store version has changed so we can logout
+     * to ensure the whole state is cleared
+     */
+    const didStoreVersionChangedRef = useRef(false);
     /**
      * initialize global store
      */
-    initializeStore(props);
+    initializeStore(Object.assign(Object.assign({}, props), { onPersistedVersionChanged: () => (didStoreVersionChangedRef.current = true) }));
     useSyncDynamicContextProps(props);
     /**
      * Sets the chain info overrides if they are present
@@ -183,7 +189,8 @@ const InnerDynamicContextProvider = (props) => {
     if (environmentId === PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID) {
         logger.warn(`WARNING: DYNAMIC is using a test environment ID ${environmentId}. Please sign up on https://app.dynamic.xyz/ to get your production environment ID.`);
     }
-    ApiEndpoint.setBaseUrl((_b = process.env.DYNAMIC_API_BASE_URL) !== null && _b !== void 0 ? _b : apiBaseUrl);
+    const apiBaseUrlOverride = getEnvVarWithFallback('DYNAMIC_API_BASE_URL', apiBaseUrl || '');
+    ApiEndpoint.setBaseUrl(apiBaseUrlOverride);
     const i18nSDKInstance = Locale.setup(locale);
     const isBridgeFlow = Boolean(bridgeChains);
     const deepLinkPreference = getDeepLinkPreference(deepLinkPreferenceProp, isBridgeFlow);
@@ -205,8 +212,8 @@ const InnerDynamicContextProvider = (props) => {
     const [multiWalletWidgetState, setMultiWalletWidgetState, { awaiting_account_switch: [accountSwitchState], awaiting_signature: [awaitingSignatureState], },] = useMultiWalletWidgetState();
     const projectSettings = useProjectSettings();
     const serverNetworkConfigurations = useNetworkConfigurationsFromProjectSettings({
-        cosmosNetworkOverrides: (_c = settings.overrides) === null || _c === void 0 ? void 0 : _c.cosmosNetworks,
-        evmNetworksOverrides: (_d = settings.overrides) === null || _d === void 0 ? void 0 : _d.evmNetworks,
+        cosmosNetworkOverrides: (_b = settings.overrides) === null || _b === void 0 ? void 0 : _b.cosmosNetworks,
+        evmNetworksOverrides: (_c = settings.overrides) === null || _c === void 0 ? void 0 : _c.evmNetworks,
         projectSettings,
     });
     useSendDynamicProps({ environmentId, settings });
@@ -217,16 +224,16 @@ const InnerDynamicContextProvider = (props) => {
     });
     const multiWallet = useMultiWallet({
         isBridgeFlow,
-        multiWalletOverride: (_e = settings.overrides) === null || _e === void 0 ? void 0 : _e.multiWallet,
-        multiWalletSettings: (_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _f === void 0 ? void 0 : _f.multiWallet,
+        multiWalletOverride: (_d = settings.overrides) === null || _d === void 0 ? void 0 : _d.multiWallet,
+        multiWalletSettings: (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _e === void 0 ? void 0 : _e.multiWallet,
     });
     const multiAsset = useMultiAsset({
-        multiAssetOverride: (_g = settings.overrides) === null || _g === void 0 ? void 0 : _g.multiAsset,
-        multiAssetSettings: (_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _h === void 0 ? void 0 : _h.enableMultiAsset,
+        multiAssetOverride: (_f = settings.overrides) === null || _f === void 0 ? void 0 : _f.multiAsset,
+        multiAssetSettings: (_g = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _g === void 0 ? void 0 : _g.enableMultiAsset,
     });
     const showFiat = useShowFiat({
-        showFiatOverride: (_j = settings.overrides) === null || _j === void 0 ? void 0 : _j.showFiat,
-        showFiatSettings: (_k = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _k === void 0 ? void 0 : _k.showFiat,
+        showFiatOverride: (_h = settings.overrides) === null || _h === void 0 ? void 0 : _h.showFiat,
+        showFiatSettings: (_j = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _j === void 0 ? void 0 : _j.showFiat,
     });
     // Used inside useVerifyOnAwaitingSignature. Is legacy and should be removed asap
     const [legacyIsVerifying, setLegacyIsVerifying] = useState(false);
@@ -242,9 +249,11 @@ const InnerDynamicContextProvider = (props) => {
         appName,
         hideEmbeddedWalletTransactionUIs: !showEmbeddedWalletActionsUI,
     });
+    const [authMode, setAuthMode] = useState(initialAuthenticationMode);
     const connectorProps = useMemo(() => ({
         appLogoUrl,
         appName,
+        authMode,
         coinbaseWalletPreference,
         deepLinkPreference,
         flowNetwork,
@@ -259,6 +268,7 @@ const InnerDynamicContextProvider = (props) => {
     }), [
         appLogoUrl,
         appName,
+        authMode,
         coinbaseWalletPreference,
         deepLinkPreference,
         flowNetwork,
@@ -274,7 +284,6 @@ const InnerDynamicContextProvider = (props) => {
     useCreateWalletConnectorOptions(connectorProps);
     const walletConnectorOptions = useWalletConnectorOptions();
     useCreateWalletGroups({ walletConnectorOptions });
-    const [authMode, setAuthMode] = useState(initialAuthenticationMode);
     const primaryWalletId = usePrimaryWalletId();
     // this is a state because it's set based on primaryWallet and bridgeChainsToConnect,
     // which are only available further down and have would have circular dependencies
@@ -309,7 +318,7 @@ const InnerDynamicContextProvider = (props) => {
         canHaveMultipleWalletsConnected: multiWallet,
         connectedWallets,
         primaryWalletId,
-        separateSmartWalletAndSigner: (_m = (_l = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _l === void 0 ? void 0 : _l.accountAbstraction) === null || _m === void 0 ? void 0 : _m.separateSmartWalletAndSigner,
+        separateSmartWalletAndSigner: (_l = (_k = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _k === void 0 ? void 0 : _k.accountAbstraction) === null || _l === void 0 ? void 0 : _l.separateSmartWalletAndSigner,
         setMultiWalletWidgetState,
         user: user || userWithMissingInfo,
         walletConnectorOptions,
@@ -361,6 +370,7 @@ const InnerDynamicContextProvider = (props) => {
         walletConnectors,
     });
     useValidateSession({
+        didStoreVersionChangedRef,
         environmentId,
         handleLogOut,
     });
@@ -425,8 +435,8 @@ const InnerDynamicContextProvider = (props) => {
     }, [handleLogOut, isAuthenticated]);
     const { setCallback } = useCustomerCallbacks({
         callbacks: {
-            onAuthSuccess: (_o = settings.events) === null || _o === void 0 ? void 0 : _o.onAuthSuccess,
-            onUserProfileUpdate: (_p = settings.events) === null || _p === void 0 ? void 0 : _p.onUserProfileUpdate,
+            onAuthSuccess: (_m = settings.events) === null || _m === void 0 ? void 0 : _m.onAuthSuccess,
+            onUserProfileUpdate: (_o = settings.events) === null || _o === void 0 ? void 0 : _o.onUserProfileUpdate,
         },
         handleLogOut,
         isAuthenticated,
@@ -723,7 +733,7 @@ const InnerDynamicContextProvider = (props) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile]);
-    return (jsx(I18nextProvider, { i18n: i18nSDKInstance, children: jsx(DynamicContext.Provider, { value: value, children: jsx(WalletBookContextProvider, { walletBook: walletBook, children: jsx(ThemeContextProvider, { customerTheme: parseTheme(theme, ((_q = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _q === void 0 ? void 0 : _q.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsx(LoadingContextProvider, { children: jsxs(ViewContextProvider, { initialViewType: getInitialViewType({
+    return (jsx(I18nextProvider, { i18n: i18nSDKInstance, children: jsx(DynamicContext.Provider, { value: value, children: jsx(WalletBookContextProvider, { walletBook: walletBook, children: jsx(ThemeContextProvider, { customerTheme: parseTheme(theme, ((_p = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _p === void 0 ? void 0 : _p.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsx(LoadingContextProvider, { children: jsxs(ViewContextProvider, { initialViewType: getInitialViewType({
                                 bridgeOnboardingCompleted,
                                 connectedWallets,
                                 isAuthenticated: isAuthenticated || Boolean(primaryWallet),

package/src/lib/context/DynamicContext/hooks/useHandleLogout/types.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
-import { UserProfile } from '@dynamic-labs/types';
+import { AuthMode, UserProfile } from '@dynamic-labs/types';
 import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { AuthModeType, DynamicEventsCallbacks, Wallet } from '../../../../shared';
+import { DynamicEventsCallbacks, Wallet } from '../../../../shared';
 import { MultiWalletWidgetStateSetter } from '../../../../utils/hooks/multiWallet';
 import { ChainsToConnect } from '../../types';
 import { SetShowAuthFlow } from '../useShowAuthFlow';
@@ -16,8 +16,8 @@ export type UseHandleLogoutParams = {
     walletConnectors: WalletConnector[];
     connectedWallets: Wallet[];
     setLegacyIsVerifying: Dispatch<SetStateAction<boolean>>;
-    setAuthMode: (value: AuthModeType | ((val: AuthModeType) => AuthModeType)) => void;
-    initialAuthenticationMode: AuthModeType;
+    setAuthMode: (value: AuthMode | ((val: AuthMode) => AuthMode)) => void;
+    initialAuthenticationMode: AuthMode;
     setShowAuthFlow: SetShowAuthFlow;
     setMultiWalletWidgetState: MultiWalletWidgetStateSetter;
     removeSessionStorageSessionKeys: () => void;

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

@@ -40,6 +40,7 @@ require('react-dom');
 require('../../../../utils/functions/compareChains/compareChains.cjs');
 require('../../../ThemeContext/ThemeContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
 require('@dynamic-labs/types');
 require('../../../SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../LoadingContext/LoadingContext.cjs');

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

@@ -36,6 +36,7 @@ import 'react-dom';
 import '../../../../utils/functions/compareChains/compareChains.js';
 import '../../../ThemeContext/ThemeContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
 import '@dynamic-labs/types';
 import '../../../SocialRedirectContext/SocialRedirectContext.js';
 import '../../../LoadingContext/LoadingContext.js';

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

@@ -38,6 +38,7 @@ require('react-dom');
 require('../../../../utils/functions/compareChains/compareChains.cjs');
 require('../../../ThemeContext/ThemeContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
 require('@dynamic-labs/types');
 require('../../../SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../LoadingContext/LoadingContext.cjs');

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

@@ -34,6 +34,7 @@ import 'react-dom';
 import '../../../../utils/functions/compareChains/compareChains.js';
 import '../../../ThemeContext/ThemeContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
 import '@dynamic-labs/types';
 import '../../../SocialRedirectContext/SocialRedirectContext.js';
 import '../../../LoadingContext/LoadingContext.js';

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 import { CountryIso2 } from 'react-international-phone';
 import { LogLevel } from '@dynamic-labs/logger';
-import { type MobileExperience, type CoinbaseWalletPreference, type SocialProviderFilter } from '@dynamic-labs/types';
+import { type MobileExperience, type CoinbaseWalletPreference, type SocialProviderFilter, AuthMode } from '@dynamic-labs/types';
 import { DeepLinkVariant, WalletConnectorExtension, WalletConnectorsMethod } from '@dynamic-labs/wallet-connector-core';
 import { TokenBalance } from '@dynamic-labs/sdk-api-core';
 import { LocaleResource } from '../../../locale';
-import { AccessDeniedCustomButton, AuthModeType, ChainToWalletMap, DynamicEventsCallbacks, RecommendedWallet, TransactionConfirmationSettings, WalletsFilter } from '../../../shared';
+import { AccessDeniedCustomButton, ChainToWalletMap, DynamicEventsCallbacks, RecommendedWallet, TransactionConfirmationSettings, WalletsFilter } from '../../../shared';
 import { DynamicHandlers } from '../../../shared/types/dynamicHandlers';
 import { SocialNetworkIconType } from '../../../utils/functions/getSocialNetworkIcon';
 import { ThemeData, ThemeSetting } from '../../ThemeContext';
@@ -56,7 +56,7 @@ export interface DynamicContextProps {
          */
         flowNetwork?: 'testnet' | 'mainnet';
         handlers?: DynamicHandlers;
-        initialAuthenticationMode?: AuthModeType;
+        initialAuthenticationMode?: AuthMode;
         localStorageSuffix?: string;
         /**
          * The log level to use for client side logging with our SDK

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

@@ -2,10 +2,10 @@ import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import { changeLanguage } from 'i18next';
 import { CountryIso2 } from 'react-international-phone';
 import { NameServiceData, ProjectSettings } from '@dynamic-labs/sdk-api-core';
-import { MobileExperience, NetworkConfigurationMap, SocialProviderFilter, UserProfile, WalletUiUtils } from '@dynamic-labs/types';
+import { AuthMode, MobileExperience, NetworkConfigurationMap, SocialProviderFilter, UserProfile, WalletUiUtils } from '@dynamic-labs/types';
 import { Chain, GetAddressOpts, InternalWalletConnector, WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { PasskeySuccessEnum } from '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner';
-import { AccessDeniedCustomButton, AccountSwitchState, AuthModeType, AwaitingSignatureState, ChainToWalletMap, DynamicEventsCallbacks, MultiWalletWidgetState, RecommendedWallet, Wallet, WalletListViewTabItem, WalletOption, WalletsFilter, WalletWithAction } from '../../../shared';
+import { AccessDeniedCustomButton, AccountSwitchState, AwaitingSignatureState, ChainToWalletMap, DynamicEventsCallbacks, MultiWalletWidgetState, RecommendedWallet, Wallet, WalletListViewTabItem, WalletOption, WalletsFilter, WalletWithAction } from '../../../shared';
 import { DynamicHandlers } from '../../../shared/types/dynamicHandlers';
 import { SocialNetworkIconType } from '../../../utils/functions/getSocialNetworkIcon';
 import { MultiWalletWidgetStateSetter } from '../../../utils/hooks/multiWallet';
@@ -32,7 +32,7 @@ export interface IDynamicContext {
     appLogoUrl?: string;
     appName?: string;
     defaultPhoneInputIso2?: CountryIso2;
-    authMode: AuthModeType;
+    authMode: AuthMode;
     authorizationViewDisplayOrder: DisplayOrder;
     awaitingSignatureState: AwaitingSignatureState;
     socialSettings?: SocialSettings;
@@ -52,6 +52,9 @@ export interface IDynamicContext {
     disconnectWallet: (walletId: string) => void;
     displaySiweStatement: boolean;
     enableConnectOnlyFallback?: boolean;
+    /**
+     * @deprecated get environmentId from store instead with useEnvironmentId or getEnvironmentId()
+     */
     environmentId: string;
     events?: DynamicEventsCallbacks;
     getConnectedWalletById: (walletId: string) => Wallet | undefined;
@@ -95,6 +98,9 @@ export interface IDynamicContext {
     primaryWallet: Wallet | null;
     primaryWalletId: string | undefined;
     privacyPolicyUrl?: string;
+    /**
+     * @deprecated get projectSettings from store instead with useProjectSettings or getProjectSettings()
+     */
     projectSettings: ProjectSettings | undefined;
     qrcodeUri: string;
     recommendedWallets?: RecommendedWallet[];
@@ -107,7 +113,7 @@ export interface IDynamicContext {
     sendWagmiSettings: (settings: {
         dynamicWagmiSettings?: object;
     }) => void;
-    setAuthMode: Dispatch<SetStateAction<AuthModeType>>;
+    setAuthMode: Dispatch<SetStateAction<AuthMode>>;
     setAuthorizationViewDisplayOrder: SetDisplayOrderPriority;
     setBridgeOnboardingCompleted: (value: boolean | ((val: boolean) => boolean)) => void;
     setCallback: SetCallbackType;
@@ -152,6 +158,9 @@ export interface IDynamicContext {
     toolkitEnabled?: boolean;
     user: UserProfile | undefined;
     userWithMissingInfo: UserProfile | undefined;
+    /**
+     * @deprecated get walletConnectorOptions from store instead with useWalletOptions or getWalletOptions()
+     */
     walletConnectorOptions: WalletOption[];
     walletUiUtils: WalletUiUtils<InternalWalletConnector>;
     walletsFilter?: WalletsFilter;

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

@@ -11,6 +11,46 @@ export type WalletListViewSettings = {
 };
 export type NetworksOverrides = GenericNetwork[] | ((dashboardNetworks: GenericNetwork[]) => GenericNetwork[]);
 export type ViewsOverrides = SdkView | WalletListViewSettings;
+export type OnrampOption = {
+    /**
+     * The name of the onramp provider to be displayed in UI
+     * Example: "Coinbase"
+     */
+    displayName: string;
+    /**
+     * The icon URL of the onramp provider to be displayed in UI
+     * Example: "https://www.coinbase.com/assets/coinbase-logo-2020-09-09-1024x1024.png"
+     */
+    iconUrl: string;
+    /**
+     * The id of the onramp provider, ideally based off its name
+     * Example: "coinbase"
+     */
+    id: string;
+    /**
+     * (optional) The iframe URL of the onramp provider to be displayed in UI
+     * If provided, the SDK will use this iframe URL to display the onramp provider in the UI
+     * and will ignore the `onClick` handler
+     * Example: "https://widget.coinbase.com/iframe/onramp?apiKey=YOUR_API_KEY&walletAddress=YOUR_WALLET_ADDRESS"
+     */
+    iframeUrl?: string;
+    /**
+     * The onClick handler for when the onramp provider is selected
+     * It will be ignored if `iframeUrl` is provided
+     */
+    onClick: () => void;
+    /**
+     * (optional) The description of the onramp provider to be displayed in UI
+     * Example: "Buy crypto with a credit card"
+     */
+    description?: string;
+    /**
+     * (optional) Whether the option is for a specific payment method within the onramp provider
+     * If true, the SDK will display the option as a payment method in the UI
+     * @default false
+     */
+    isPaymentMethod?: boolean;
+};
 export type SettingsOverrides = {
     views?: Array<ViewsOverrides>;
     /**
@@ -37,4 +77,5 @@ export type SettingsOverrides = {
      * Allows overriding the chain info for a specific chain.
      */
     chainDisplayValues?: ChainDisplayOverrides;
+    onrampOptions?: OnrampOption[];
 };

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

@@ -15,6 +15,15 @@ const useDynamicContext = () => {
     }
     const { accountSwitchState, authMode, awaitingSignatureState, getNameService, handleLogOut, handleUnlinkWallet, loadingNetwork, locale, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, sdkHasLoaded, setLogInWithEmail, setMultiWalletWidgetState, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, userWithMissingInfo, bridgeChains, bridgeChainsToConnect, primaryWallet, setShowBridgeWidget, sendWagmiSettings, showDynamicUserProfile, selectedTabIndex, setSelectedTabIndex, } = context;
     const { setAuthMode } = useOverrides.useOverrides(context);
+    const externalSetShowAuthFlow = React.useCallback((value) => {
+        setShowAuthFlow(value, {
+            clearErrors: true,
+            emitCancelAuth: true,
+            ignoreIfIsEmbeddedWidget: true,
+            initializeWalletConnect: true,
+            performMultiWalletChecks: true,
+        });
+    }, [setShowAuthFlow]);
     return {
         accountSwitchState,
         authMode,
@@ -39,13 +48,7 @@ const useDynamicContext = () => {
         setLogInWithEmail,
         setMultiWalletWidgetState,
         setSelectedTabIndex,
-        setShowAuthFlow: (value) => setShowAuthFlow(value, {
-            clearErrors: true,
-            emitCancelAuth: true,
-            ignoreIfIsEmbeddedWidget: true,
-            initializeWalletConnect: true,
-            performMultiWalletChecks: true,
-        }),
+        setShowAuthFlow: externalSetShowAuthFlow,
         setShowBridgeWidget,
         setShowDynamicUserProfile,
         setShowQrcodeModal,

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

@@ -1,5 +1,5 @@
 'use client'
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 import { DynamicContext } from '../DynamicContext.js';
 import { useOverrides } from './useOverrides/useOverrides.js';
 
@@ -11,6 +11,15 @@ const useDynamicContext = () => {
     }
     const { accountSwitchState, authMode, awaitingSignatureState, getNameService, handleLogOut, handleUnlinkWallet, loadingNetwork, locale, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, sdkHasLoaded, setLogInWithEmail, setMultiWalletWidgetState, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, userWithMissingInfo, bridgeChains, bridgeChainsToConnect, primaryWallet, setShowBridgeWidget, sendWagmiSettings, showDynamicUserProfile, selectedTabIndex, setSelectedTabIndex, } = context;
     const { setAuthMode } = useOverrides(context);
+    const externalSetShowAuthFlow = useCallback((value) => {
+        setShowAuthFlow(value, {
+            clearErrors: true,
+            emitCancelAuth: true,
+            ignoreIfIsEmbeddedWidget: true,
+            initializeWalletConnect: true,
+            performMultiWalletChecks: true,
+        });
+    }, [setShowAuthFlow]);
     return {
         accountSwitchState,
         authMode,
@@ -35,13 +44,7 @@ const useDynamicContext = () => {
         setLogInWithEmail,
         setMultiWalletWidgetState,
         setSelectedTabIndex,
-        setShowAuthFlow: (value) => setShowAuthFlow(value, {
-            clearErrors: true,
-            emitCancelAuth: true,
-            ignoreIfIsEmbeddedWidget: true,
-            initializeWalletConnect: true,
-            performMultiWalletChecks: true,
-        }),
+        setShowAuthFlow: externalSetShowAuthFlow,
         setShowBridgeWidget,
         setShowDynamicUserProfile,
         setShowQrcodeModal,

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

@@ -38,6 +38,7 @@ require('../../../../utils/functions/compareChains/compareChains.cjs');
 require('../../../ThemeContext/ThemeContext.cjs');
 var useIsLoggedIn = require('../../../../utils/hooks/useIsLoggedIn/useIsLoggedIn.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
 require('@dynamic-labs/types');
 require('../../../SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../LoadingContext/LoadingContext.cjs');

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

@@ -34,6 +34,7 @@ import '../../../../utils/functions/compareChains/compareChains.js';
 import '../../../ThemeContext/ThemeContext.js';
 import { useIsLoggedIn } from '../../../../utils/hooks/useIsLoggedIn/useIsLoggedIn.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
 import '@dynamic-labs/types';
 import '../../../SocialRedirectContext/SocialRedirectContext.js';
 import '../../../LoadingContext/LoadingContext.js';

package/src/lib/context/IpConfigurationContext/IpConfigurationContext.cjs

@@ -34,13 +34,13 @@ const IpConfigurationContextProvider = ({ children, }) => {
             return;
         }
     }), [ipConfiguration, setIpConfiguration]);
-    const removeIpConfiguration = () => {
+    const removeIpConfiguration = React.useCallback(() => {
         setIpConfiguration(null);
-    };
+    }, [setIpConfiguration]);
     const value = React.useMemo(() => ({
         getIpConfiguration,
         removeIpConfiguration,
-    }), [getIpConfiguration]);
+    }), [getIpConfiguration, removeIpConfiguration]);
     return (jsxRuntime.jsx(IpConfigurationContext.Provider, { value: value, children: children }));
 };
 const useIpConfigurationContext = () => {

package/src/lib/context/IpConfigurationContext/IpConfigurationContext.js

@@ -30,13 +30,13 @@ const IpConfigurationContextProvider = ({ children, }) => {
             return;
         }
     }), [ipConfiguration, setIpConfiguration]);
-    const removeIpConfiguration = () => {
+    const removeIpConfiguration = useCallback(() => {
         setIpConfiguration(null);
-    };
+    }, [setIpConfiguration]);
     const value = useMemo(() => ({
         getIpConfiguration,
         removeIpConfiguration,
-    }), [getIpConfiguration]);
+    }), [getIpConfiguration, removeIpConfiguration]);
     return (jsx(IpConfigurationContext.Provider, { value: value, children: children }));
 };
 const useIpConfigurationContext = () => {

package/src/lib/context/LoadingContext/LoadingContext.cjs

@@ -38,6 +38,7 @@ require('react-dom');
 require('../../utils/functions/compareChains/compareChains.cjs');
 require('../ThemeContext/ThemeContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
 require('@dynamic-labs/types');
 require('../SocialRedirectContext/SocialRedirectContext.cjs');
 require('../WalletContext/WalletContext.cjs');

package/src/lib/context/LoadingContext/LoadingContext.js

@@ -34,6 +34,7 @@ import 'react-dom';
 import '../../utils/functions/compareChains/compareChains.js';
 import '../ThemeContext/ThemeContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
 import '@dynamic-labs/types';
 import '../SocialRedirectContext/SocialRedirectContext.js';
 import '../WalletContext/WalletContext.js';

package/src/lib/context/MockContext/MockContext.cjs

@@ -40,6 +40,7 @@ require('../VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../utils/functions/compareChains/compareChains.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
 require('@dynamic-labs/types');
 require('../SocialRedirectContext/SocialRedirectContext.cjs');
 require('../LoadingContext/LoadingContext.cjs');

package/src/lib/context/MockContext/MockContext.js

@@ -36,6 +36,7 @@ import '../VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../utils/functions/compareChains/compareChains.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
 import '@dynamic-labs/types';
 import '../SocialRedirectContext/SocialRedirectContext.js';
 import '../LoadingContext/LoadingContext.js';