@dynamic-labs/sdk-react-core 0.18.0-RC.10 → 0.18.0-RC.12

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.cjs

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

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.js

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

package/src/lib/views/LoginWithEmailView/components/ListItemButton/ListItemButton.cjs

@@ -42,6 +42,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
 var Badge = require('../../../../components/Badge/Badge.cjs');
 
 const ListItemButton = ({ text, onClick, numberOfWallets }) => {

package/src/lib/views/LoginWithEmailView/components/ListItemButton/ListItemButton.js

@@ -38,6 +38,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../../components/InlineWidget/InlineWidget.js';
 import { Badge } from '../../../../components/Badge/Badge.js';
 
 const ListItemButton = ({ text, onClick, numberOfWallets }) => {

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.cjs

@@ -38,6 +38,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
 var useWalletItemActions = require('../../../../utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 var useConnectWithEmail = require('../../../../utils/hooks/useConnectWithEmail/useConnectWithEmail.cjs');

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.js

@@ -34,6 +34,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../../components/InlineWidget/InlineWidget.js';
 import { useWalletItemActions } from '../../../../utils/hooks/useWalletItemActions/useWalletItemActions.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { useConnectWithEmail } from '../../../../utils/hooks/useConnectWithEmail/useConnectWithEmail.js';

package/src/lib/views/LoginWithEmailView/components/SocialSignIn/SocialSignIn.cjs

@@ -48,6 +48,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
 var SocialRedirectContext = require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 var OverlayCard = require('../../../../components/OverlayCard/OverlayCard.cjs');
 require('../../../../components/OverlayCard/OverlayCard.context.cjs');

package/src/lib/views/LoginWithEmailView/components/SocialSignIn/SocialSignIn.js

@@ -44,6 +44,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../../components/InlineWidget/InlineWidget.js';
 import { useSocialRedirectContext } from '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import { OverlayCard } from '../../../../components/OverlayCard/OverlayCard.js';
 import '../../../../components/OverlayCard/OverlayCard.context.js';

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.cjs

@@ -44,6 +44,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 var NetworkPicker = require('../../components/NetworkPicker/NetworkPicker.cjs');
 var UserAddress = require('../../components/UserAddress/UserAddress.cjs');
 var AuthProviderIcon = require('../../components/AuthProviderIcon/AuthProviderIcon.cjs');
@@ -59,15 +60,15 @@ const NetworkNotSupported = () => {
     if (!walletConnector) {
         return null;
     }
-    const handleNetworkChange = () => {
+    const handleNetworkChange = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!onboardingOnlyJwt) {
             finishConnectAndSign({ walletConnector });
             return;
         }
         setCallback('authSuccess');
-        updateUserProfileByJWT(onboardingOnlyJwt);
+        yield updateUserProfileByJWT(onboardingOnlyJwt);
         setShowAuthFlow(false);
-    };
+    });
     const userProfile = decodedOnboardingOnlyToken && createUserProfile.createUserProfile(decodedOnboardingOnlyToken);
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({ network, walletConnector });

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.js

@@ -40,6 +40,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 import { NetworkPicker } from '../../components/NetworkPicker/NetworkPicker.js';
 import { UserAddress } from '../../components/UserAddress/UserAddress.js';
 import { AuthProviderIcon } from '../../components/AuthProviderIcon/AuthProviderIcon.js';
@@ -55,15 +56,15 @@ const NetworkNotSupported = () => {
     if (!walletConnector) {
         return null;
     }
-    const handleNetworkChange = () => {
+    const handleNetworkChange = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!onboardingOnlyJwt) {
             finishConnectAndSign({ walletConnector });
             return;
         }
         setCallback('authSuccess');
-        updateUserProfileByJWT(onboardingOnlyJwt);
+        yield updateUserProfileByJWT(onboardingOnlyJwt);
         setShowAuthFlow(false);
-    };
+    });
     const userProfile = decodedOnboardingOnlyToken && createUserProfile(decodedOnboardingOnlyToken);
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = isSupportedNetwork({ network, walletConnector });

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.cjs

@@ -21,6 +21,7 @@ var useInternalDynamicContext = require('../../context/DynamicContext/useInterna
 require('@dynamic-labs/multi-wallet');
 var isSupportedNetwork = require('../../utils/functions/isSupportedNetwork/isSupportedNetwork.cjs');
 var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs');
+var getWalletConnectorNetworks = require('../../utils/functions/getWalletConnectorNetworks/getWalletConnectorNetworks.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -44,6 +45,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 var useUpdateUserProfileByJWTCallback = require('../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs');
 
 //   The component notifies the user about the required manual network change,
@@ -80,7 +82,10 @@ const NetworkNotSupportedSwitchManual = () => {
             height: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
             width: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
         } }));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__img-container' }, { children: ((_a = user === null || user === void 0 ? void 0 : user.ens) === null || _a === void 0 ? void 0 : _a.avatar) ? (jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsxRuntime.jsx("img", { src: (_b = user === null || user === void 0 ? void 0 : user.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: 'user ens avatar', className: 'network-not-supported-switch-manual__img' }) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary' }, { children: "Switch Networks" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Your wallet does not support switching networks from this app. Switch networks directly in your wallet." }))] }))] })));
+    const walletConnectorNetworks = getWalletConnectorNetworks.getWalletConnectorNetworks(walletConnector);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__img-container' }, { children: ((_a = user === null || user === void 0 ? void 0 : user.ens) === null || _a === void 0 ? void 0 : _a.avatar) ? (jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsxRuntime.jsx("img", { src: (_b = user === null || user === void 0 ? void 0 : user.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: 'user ens avatar', className: 'network-not-supported-switch-manual__img' }) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary' }, { children: "Update your Network" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: walletConnectorNetworks.length
+                            ? `To continue, please update the network in your wallet to ${walletConnectorNetworks[0].name}`
+                            : 'Your wallet does not support switching networks from this app. Switch networks directly in your wallet.' }))] }))] })));
 };
 
 exports.NetworkNotSupportedSwitchManual = NetworkNotSupportedSwitchManual;

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.js

@@ -17,6 +17,7 @@ import { useInternalDynamicContext } from '../../context/DynamicContext/useInter
 import '@dynamic-labs/multi-wallet';
 import { isSupportedNetwork } from '../../utils/functions/isSupportedNetwork/isSupportedNetwork.js';
 import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.js';
+import { getWalletConnectorNetworks } from '../../utils/functions/getWalletConnectorNetworks/getWalletConnectorNetworks.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -40,6 +41,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 import { useUpdateUserProfileByJWTCallback } from '../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
 
 //   The component notifies the user about the required manual network change,
@@ -76,7 +78,10 @@ const NetworkNotSupportedSwitchManual = () => {
             height: pixelToRem(iconSize * iconRatio),
             width: pixelToRem(iconSize * iconRatio),
         } }));
-    return (jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual' }, { children: [jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__img-container' }, { children: ((_a = user === null || user === void 0 ? void 0 : user.ens) === null || _a === void 0 ? void 0 : _a.avatar) ? (jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsx("img", { src: (_b = user === null || user === void 0 ? void 0 : user.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: 'user ens avatar', className: 'network-not-supported-switch-manual__img' }) }))) : (jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsx(IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) }))) })), jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual__content' }, { children: [jsx(Typography, Object.assign({ className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary' }, { children: "Switch Networks" })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Your wallet does not support switching networks from this app. Switch networks directly in your wallet." }))] }))] })));
+    const walletConnectorNetworks = getWalletConnectorNetworks(walletConnector);
+    return (jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual' }, { children: [jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__img-container' }, { children: ((_a = user === null || user === void 0 ? void 0 : user.ens) === null || _a === void 0 ? void 0 : _a.avatar) ? (jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsx("img", { src: (_b = user === null || user === void 0 ? void 0 : user.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: 'user ens avatar', className: 'network-not-supported-switch-manual__img' }) }))) : (jsx("div", Object.assign({ className: 'network-not-supported-switch-manual__network-container' }, { children: jsx(IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true }) }))) })), jsxs("div", Object.assign({ className: 'network-not-supported-switch-manual__content' }, { children: [jsx(Typography, Object.assign({ className: 'network-not-supported-switch-manual__title', weight: 'medium', variant: 'title', color: 'primary' }, { children: "Update your Network" })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: walletConnectorNetworks.length
+                            ? `To continue, please update the network in your wallet to ${walletConnectorNetworks[0].name}`
+                            : 'Your wallet does not support switching networks from this app. Switch networks directly in your wallet.' }))] }))] })));
 };
 
 export { NetworkNotSupportedSwitchManual };

package/src/lib/views/NoAccess/NoAccess.cjs

@@ -12,6 +12,7 @@ require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var error = require('../../shared/assets/error.cjs');
 require('@dynamic-labs/wallet-book');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
@@ -43,38 +44,25 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 var StatusDot = require('../../components/StatusDot/StatusDot.cjs');
 var getSocialNetworkIcon = require('../../utils/functions/getSocialNetworkIcon/getSocialNetworkIcon.cjs');
 var EmailVerificationContext = require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 var AuthProviderIcon = require('../../components/AuthProviderIcon/AuthProviderIcon.cjs');
+var useNoAccessText = require('./useNoAccessText.cjs');
 
 const NoAccess = () => {
     const { deniedAddress, setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
-    const { selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, onboardingOnlyJwt, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { selectedWalletConnector: walletConnector, socialMediaIconUrl, notInTheListImageUrl, onboardingOnlyJwt, accessDeniedButton, } = useInternalDynamicContext.useInternalDynamicContext();
     const { email } = EmailVerificationContext.useEmailVerificationContext();
-    const { goToInitialView, view } = ViewContext.useViewContext();
-    const isChainalysisView = view === 'chainalysis-blocked-wallet';
-    const _socialMediaLinkText = !isChainalysisView
-        ? socialMediaLinkText
-        : 'Why am I seeing this message?';
-    const _socialMediaUrl = !isChainalysisView
-        ? socialMediaUrl
-        : 'https://docs.dynamic.xyz/docs';
+    const { goToInitialView } = ViewContext.useViewContext();
+    const { _socialMediaLinkText, _socialMediaUrl, isAccessListView, isGateBlockedView, subtitle, title, buttonTitle: _buttonTitle, } = useNoAccessText.useNoAccessText();
     const handleChangeWallet = () => {
         goToInitialView();
         setDeniedAddress('');
         setDeniedOauthProvider(undefined);
         walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.endSession();
     };
-    const title = isChainalysisView
-        ? 'This address seems corrupted.'
-        : accessDeniedMessagePrimary || 'Access denied';
-    const subtitle = isChainalysisView
-        ? 'This wallet has been correlated to illicit activity and cannot access this site.'
-        : accessDeniedMessageSecondary ||
-            "We couldn't find your wallet address or email on our allow list of customers.";
-    const buttonTitle = (accessDeniedButton === null || accessDeniedButton === void 0 ? void 0 : accessDeniedButton.title) || 'Try another method';
-    const buttonAction = (accessDeniedButton === null || accessDeniedButton === void 0 ? void 0 : accessDeniedButton.action) || handleChangeWallet;
     const SocialMediaIcon = !socialMediaIconUrl || typeof socialMediaIconUrl === 'string'
         ? null
         : getSocialNetworkIcon.getSocialNetworkIcon(Object.keys(socialMediaIconUrl)[0]);
@@ -84,9 +72,13 @@ const NoAccess = () => {
         }
         return (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'wallet-no-access__icon--verified', Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: error.ReactComponent, variant: 'red' }));
     }, [onboardingOnlyJwt, walletConnector]);
-    const formattedAddress = deniedAddress.replace(deniedAddress.substring(6, Number(deniedAddress === null || deniedAddress === void 0 ? void 0 : deniedAddress.length) - 4), '...');
+    const formattedAddress = shortenWalletAddress.shortenWalletAddress(deniedAddress, 6, 4);
+    const buttonTitle = (accessDeniedButton === null || accessDeniedButton === void 0 ? void 0 : accessDeniedButton.title) || _buttonTitle;
+    const buttonAction = (accessDeniedButton === null || accessDeniedButton === void 0 ? void 0 : accessDeniedButton.action) || handleChangeWallet;
     const emailOrAddress = email !== null && email !== void 0 ? email : formattedAddress;
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__container' }, { children: [notInTheListImageUrl && !isChainalysisView && (jsxRuntime.jsx("img", { src: notInTheListImageUrl, alt: 'user is not in the list', className: 'wallet-no-access__image' })), jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__main' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__user-info-container' }, { children: [Icon, jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'walletAddress', className: 'wallet-no-access__wallet-address-container' }, { children: [walletConnector && (jsxRuntime.jsx(StatusDot.StatusDot, { variant: 'red', containerClassName: 'user-info__status-dot' })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', weight: 'medium', className: 'wallet-no-access__wallet-address' }, { children: emailOrAddress }))] }))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'wallet-no-access__content--primary' }, { children: title })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'wallet-no-access__content--secondary' }, { children: subtitle }))] })), jsxRuntime.jsx(Button.Button, Object.assign({ onClick: buttonAction, className: 'wallet-no-access__button--primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large' }, { children: buttonTitle })), Boolean(_socialMediaUrl) && Boolean(_socialMediaLinkText) && (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__social-info-container' }, { children: [jsxRuntime.jsxs("a", Object.assign({ href: _socialMediaUrl, className: 'wallet-no-access__waitlist-link' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'button_primary', color: 'primary' }, { children: _socialMediaLinkText })), SocialMediaIcon && !isChainalysisView && (jsxRuntime.jsx(SocialMediaIcon, { className: 'wallet-no-access__social-icon', style: {
+    const showNoInTheListImage = Boolean(notInTheListImageUrl) && (isAccessListView || isGateBlockedView);
+    const showSocialMediaIcon = SocialMediaIcon && (isAccessListView || isGateBlockedView);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__container' }, { children: [showNoInTheListImage && (jsxRuntime.jsx("img", { src: notInTheListImageUrl, alt: 'user is not in the list', className: 'wallet-no-access__image' })), jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__main' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__user-info-container' }, { children: [Icon, jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'walletAddress', className: 'wallet-no-access__wallet-address-container' }, { children: [walletConnector && (jsxRuntime.jsx(StatusDot.StatusDot, { variant: 'red', containerClassName: 'user-info__status-dot' })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', weight: 'medium', className: 'wallet-no-access__wallet-address' }, { children: emailOrAddress }))] }))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'wallet-no-access__content--primary' }, { children: title })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'wallet-no-access__content--secondary' }, { children: subtitle }))] })), jsxRuntime.jsx(Button.Button, Object.assign({ onClick: buttonAction, className: 'wallet-no-access__button--primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large' }, { children: buttonTitle })), _socialMediaUrl && _socialMediaLinkText && (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-no-access__social-info-container' }, { children: [jsxRuntime.jsxs("a", Object.assign({ href: _socialMediaUrl, className: 'wallet-no-access__waitlist-link' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'button_primary', color: 'primary' }, { children: _socialMediaLinkText })), showSocialMediaIcon && (jsxRuntime.jsx(SocialMediaIcon, { className: 'wallet-no-access__social-icon', style: {
                                             height: pixelToRem.pixelToRem(24),
                                             width: pixelToRem.pixelToRem(24),
                                         } }))] })), typeof socialMediaIconUrl === 'string' && (jsxRuntime.jsx("img", { alt: 'social media', src: socialMediaIconUrl, style: {

package/src/lib/views/NoAccess/NoAccess.js

@@ -8,6 +8,7 @@ import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgError } from '../../shared/assets/error.js';
 import '@dynamic-labs/wallet-book';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
@@ -39,38 +40,25 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 import { StatusDot } from '../../components/StatusDot/StatusDot.js';
 import { getSocialNetworkIcon } from '../../utils/functions/getSocialNetworkIcon/getSocialNetworkIcon.js';
 import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
 import { AuthProviderIcon } from '../../components/AuthProviderIcon/AuthProviderIcon.js';
+import { useNoAccessText } from './useNoAccessText.js';
 
 const NoAccess = () => {
     const { deniedAddress, setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
-    const { selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, onboardingOnlyJwt, } = useInternalDynamicContext();
+    const { selectedWalletConnector: walletConnector, socialMediaIconUrl, notInTheListImageUrl, onboardingOnlyJwt, accessDeniedButton, } = useInternalDynamicContext();
     const { email } = useEmailVerificationContext();
-    const { goToInitialView, view } = useViewContext();
-    const isChainalysisView = view === 'chainalysis-blocked-wallet';
-    const _socialMediaLinkText = !isChainalysisView
-        ? socialMediaLinkText
-        : 'Why am I seeing this message?';
-    const _socialMediaUrl = !isChainalysisView
-        ? socialMediaUrl
-        : 'https://docs.dynamic.xyz/docs';
+    const { goToInitialView } = useViewContext();
+    const { _socialMediaLinkText, _socialMediaUrl, isAccessListView, isGateBlockedView, subtitle, title, buttonTitle: _buttonTitle, } = useNoAccessText();
     const handleChangeWallet = () => {
         goToInitialView();
         setDeniedAddress('');
         setDeniedOauthProvider(undefined);
         walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.endSession();
     };
-    const title = isChainalysisView
-        ? 'This address seems corrupted.'
-        : accessDeniedMessagePrimary || 'Access denied';
-    const subtitle = isChainalysisView
-        ? 'This wallet has been correlated to illicit activity and cannot access this site.'
-        : accessDeniedMessageSecondary ||
-            "We couldn't find your wallet address or email on our allow list of customers.";
-    const buttonTitle = (accessDeniedButton === null || accessDeniedButton === void 0 ? void 0 : accessDeniedButton.title) || 'Try another method';
-    const buttonAction = (accessDeniedButton === null || accessDeniedButton === void 0 ? void 0 : accessDeniedButton.action) || handleChangeWallet;
     const SocialMediaIcon = !socialMediaIconUrl || typeof socialMediaIconUrl === 'string'
         ? null
         : getSocialNetworkIcon(Object.keys(socialMediaIconUrl)[0]);
@@ -80,9 +68,13 @@ const NoAccess = () => {
         }
         return (jsx(IconWithStatus, { containerClassName: 'wallet-no-access__icon--verified', Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgError, variant: 'red' }));
     }, [onboardingOnlyJwt, walletConnector]);
-    const formattedAddress = deniedAddress.replace(deniedAddress.substring(6, Number(deniedAddress === null || deniedAddress === void 0 ? void 0 : deniedAddress.length) - 4), '...');
+    const formattedAddress = shortenWalletAddress(deniedAddress, 6, 4);
+    const buttonTitle = (accessDeniedButton === null || accessDeniedButton === void 0 ? void 0 : accessDeniedButton.title) || _buttonTitle;
+    const buttonAction = (accessDeniedButton === null || accessDeniedButton === void 0 ? void 0 : accessDeniedButton.action) || handleChangeWallet;
     const emailOrAddress = email !== null && email !== void 0 ? email : formattedAddress;
-    return (jsxs("div", Object.assign({ className: 'wallet-no-access__container' }, { children: [notInTheListImageUrl && !isChainalysisView && (jsx("img", { src: notInTheListImageUrl, alt: 'user is not in the list', className: 'wallet-no-access__image' })), jsxs("div", Object.assign({ className: 'wallet-no-access__main' }, { children: [jsxs("div", Object.assign({ className: 'wallet-no-access__user-info-container' }, { children: [Icon, jsxs("div", Object.assign({ "data-testid": 'walletAddress', className: 'wallet-no-access__wallet-address-container' }, { children: [walletConnector && (jsx(StatusDot, { variant: 'red', containerClassName: 'user-info__status-dot' })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', weight: 'medium', className: 'wallet-no-access__wallet-address' }, { children: emailOrAddress }))] }))] })), jsxs("div", Object.assign({ className: 'wallet-no-access__content' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'wallet-no-access__content--primary' }, { children: title })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'wallet-no-access__content--secondary' }, { children: subtitle }))] })), jsx(Button, Object.assign({ onClick: buttonAction, className: 'wallet-no-access__button--primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large' }, { children: buttonTitle })), Boolean(_socialMediaUrl) && Boolean(_socialMediaLinkText) && (jsxs("div", Object.assign({ className: 'wallet-no-access__social-info-container' }, { children: [jsxs("a", Object.assign({ href: _socialMediaUrl, className: 'wallet-no-access__waitlist-link' }, { children: [jsx(Typography, Object.assign({ variant: 'button_primary', color: 'primary' }, { children: _socialMediaLinkText })), SocialMediaIcon && !isChainalysisView && (jsx(SocialMediaIcon, { className: 'wallet-no-access__social-icon', style: {
+    const showNoInTheListImage = Boolean(notInTheListImageUrl) && (isAccessListView || isGateBlockedView);
+    const showSocialMediaIcon = SocialMediaIcon && (isAccessListView || isGateBlockedView);
+    return (jsxs("div", Object.assign({ className: 'wallet-no-access__container' }, { children: [showNoInTheListImage && (jsx("img", { src: notInTheListImageUrl, alt: 'user is not in the list', className: 'wallet-no-access__image' })), jsxs("div", Object.assign({ className: 'wallet-no-access__main' }, { children: [jsxs("div", Object.assign({ className: 'wallet-no-access__user-info-container' }, { children: [Icon, jsxs("div", Object.assign({ "data-testid": 'walletAddress', className: 'wallet-no-access__wallet-address-container' }, { children: [walletConnector && (jsx(StatusDot, { variant: 'red', containerClassName: 'user-info__status-dot' })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', weight: 'medium', className: 'wallet-no-access__wallet-address' }, { children: emailOrAddress }))] }))] })), jsxs("div", Object.assign({ className: 'wallet-no-access__content' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'wallet-no-access__content--primary' }, { children: title })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'wallet-no-access__content--secondary' }, { children: subtitle }))] })), jsx(Button, Object.assign({ onClick: buttonAction, className: 'wallet-no-access__button--primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large' }, { children: buttonTitle })), _socialMediaUrl && _socialMediaLinkText && (jsxs("div", Object.assign({ className: 'wallet-no-access__social-info-container' }, { children: [jsxs("a", Object.assign({ href: _socialMediaUrl, className: 'wallet-no-access__waitlist-link' }, { children: [jsx(Typography, Object.assign({ variant: 'button_primary', color: 'primary' }, { children: _socialMediaLinkText })), showSocialMediaIcon && (jsx(SocialMediaIcon, { className: 'wallet-no-access__social-icon', style: {
                                             height: pixelToRem(24),
                                             width: pixelToRem(24),
                                         } }))] })), typeof socialMediaIconUrl === 'string' && (jsx("img", { alt: 'social media', src: socialMediaIconUrl, style: {

package/src/lib/views/NoAccess/useNoAccessText.cjs

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+
+const useNoAccessText = () => {
+    const { socialMediaLinkText, socialMediaUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { view } = ViewContext.useViewContext();
+    const isChainalysisView = view === 'chainalysis-blocked-wallet';
+    const isGateBlockedView = view === 'gate-blocked-wallet';
+    const isAccessListView = view === 'no-access';
+    const getSocialMediaLinkText = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis._socialMediaLinkText;
+        }
+        if (isGateBlockedView) {
+            return textData.gate._socialMediaLinkText;
+        }
+        return socialMediaLinkText;
+    };
+    const getSocialMediaUrl = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis._socialMediaUrl;
+        }
+        if (isGateBlockedView) {
+            return textData.gate._socialMediaUrl;
+        }
+        return socialMediaUrl;
+    };
+    const getTitle = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis.title;
+        }
+        if (isGateBlockedView) {
+            return textData.gate.title;
+        }
+        return accessDeniedMessagePrimary || textData.default.title;
+    };
+    const getSubtitle = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis.subtitle;
+        }
+        if (isGateBlockedView) {
+            return textData.gate.subtitle;
+        }
+        return accessDeniedMessageSecondary || textData.default.subtitle;
+    };
+    const getButtonTitle = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis.buttonTitle;
+        }
+        if (isGateBlockedView) {
+            return textData.gate.buttonTitle;
+        }
+        return textData.default.buttonTitle;
+    };
+    return {
+        _socialMediaLinkText: getSocialMediaLinkText(),
+        _socialMediaUrl: getSocialMediaUrl(),
+        buttonTitle: getButtonTitle(),
+        isAccessListView,
+        isChainalysisView,
+        isGateBlockedView,
+        subtitle: getSubtitle(),
+        title: getTitle(),
+    };
+};
+const textData = {
+    chainalysis: {
+        _socialMediaLinkText: 'Why am I seeing this message?',
+        _socialMediaUrl: 'https://docs.dynamic.xyz/docs',
+        buttonTitle: 'Try another method',
+        subtitle: 'This wallet has been correlated to illicit activity and cannot access this site.',
+        title: 'This address seems corrupted.',
+    },
+    default: {
+        buttonTitle: 'Try another method',
+        subtitle: "We couldn't find your wallet address or email on our allow list of customers.",
+        title: 'Access denied',
+    },
+    gate: {
+        _socialMediaLinkText: undefined,
+        _socialMediaUrl: undefined,
+        buttonTitle: 'Try a different wallet',
+        subtitle: 'An NFT or a token is required to access this site.',
+        title: 'You cannot access the site',
+    },
+};
+
+exports.textData = textData;
+exports.useNoAccessText = useNoAccessText;

package/src/lib/views/NoAccess/useNoAccessText.d.ts

@@ -0,0 +1,31 @@
+export declare const useNoAccessText: () => {
+    _socialMediaLinkText: string | undefined;
+    _socialMediaUrl: string | undefined;
+    buttonTitle: string;
+    isAccessListView: boolean;
+    isChainalysisView: boolean;
+    isGateBlockedView: boolean;
+    subtitle: string;
+    title: string;
+};
+export declare const textData: {
+    chainalysis: {
+        _socialMediaLinkText: string;
+        _socialMediaUrl: string;
+        buttonTitle: string;
+        subtitle: string;
+        title: string;
+    };
+    default: {
+        buttonTitle: string;
+        subtitle: string;
+        title: string;
+    };
+    gate: {
+        _socialMediaLinkText: undefined;
+        _socialMediaUrl: undefined;
+        buttonTitle: string;
+        subtitle: string;
+        title: string;
+    };
+};

package/src/lib/views/NoAccess/useNoAccessText.js

@@ -0,0 +1,88 @@
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+
+const useNoAccessText = () => {
+    const { socialMediaLinkText, socialMediaUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, } = useInternalDynamicContext();
+    const { view } = useViewContext();
+    const isChainalysisView = view === 'chainalysis-blocked-wallet';
+    const isGateBlockedView = view === 'gate-blocked-wallet';
+    const isAccessListView = view === 'no-access';
+    const getSocialMediaLinkText = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis._socialMediaLinkText;
+        }
+        if (isGateBlockedView) {
+            return textData.gate._socialMediaLinkText;
+        }
+        return socialMediaLinkText;
+    };
+    const getSocialMediaUrl = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis._socialMediaUrl;
+        }
+        if (isGateBlockedView) {
+            return textData.gate._socialMediaUrl;
+        }
+        return socialMediaUrl;
+    };
+    const getTitle = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis.title;
+        }
+        if (isGateBlockedView) {
+            return textData.gate.title;
+        }
+        return accessDeniedMessagePrimary || textData.default.title;
+    };
+    const getSubtitle = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis.subtitle;
+        }
+        if (isGateBlockedView) {
+            return textData.gate.subtitle;
+        }
+        return accessDeniedMessageSecondary || textData.default.subtitle;
+    };
+    const getButtonTitle = () => {
+        if (isChainalysisView) {
+            return textData.chainalysis.buttonTitle;
+        }
+        if (isGateBlockedView) {
+            return textData.gate.buttonTitle;
+        }
+        return textData.default.buttonTitle;
+    };
+    return {
+        _socialMediaLinkText: getSocialMediaLinkText(),
+        _socialMediaUrl: getSocialMediaUrl(),
+        buttonTitle: getButtonTitle(),
+        isAccessListView,
+        isChainalysisView,
+        isGateBlockedView,
+        subtitle: getSubtitle(),
+        title: getTitle(),
+    };
+};
+const textData = {
+    chainalysis: {
+        _socialMediaLinkText: 'Why am I seeing this message?',
+        _socialMediaUrl: 'https://docs.dynamic.xyz/docs',
+        buttonTitle: 'Try another method',
+        subtitle: 'This wallet has been correlated to illicit activity and cannot access this site.',
+        title: 'This address seems corrupted.',
+    },
+    default: {
+        buttonTitle: 'Try another method',
+        subtitle: "We couldn't find your wallet address or email on our allow list of customers.",
+        title: 'Access denied',
+    },
+    gate: {
+        _socialMediaLinkText: undefined,
+        _socialMediaUrl: undefined,
+        buttonTitle: 'Try a different wallet',
+        subtitle: 'An NFT or a token is required to access this site.',
+        title: 'You cannot access the site',
+    },
+};
+
+export { textData, useNoAccessText };

package/src/lib/views/NoQrNotInstalledView/NoQrNotInstalledView.cjs

@@ -40,6 +40,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 var getBrowserIcon = require('../../shared/utils/functions/getBrowserIcon/getBrowserIcon.cjs');
 var WalletHelpLink = require('./WalletHelpLink.cjs');
 

package/src/lib/views/NoQrNotInstalledView/NoQrNotInstalledView.js

@@ -36,6 +36,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 import { getBrowserIcon } from '../../shared/utils/functions/getBrowserIcon/getBrowserIcon.js';
 import { WalletHelpLink } from './WalletHelpLink.js';
 

package/src/lib/views/NoQrNotInstalledView/WalletHelpLink.cjs

@@ -39,6 +39,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 
 const capitalize = (value) => value[0].toUpperCase() + value.slice(1);
 const WalletHelpLink = ({ name, link, Icon }) => (jsxRuntime.jsx("div", Object.assign({ className: 'wallet-help-link' }, { children: jsxRuntime.jsxs("a", Object.assign({ className: 'wallet-help-link__anchor', href: link, target: '_blank', rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Icon, { style: {

package/src/lib/views/NoQrNotInstalledView/WalletHelpLink.js

@@ -35,6 +35,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 
 const capitalize = (value) => value[0].toUpperCase() + value.slice(1);
 const WalletHelpLink = ({ name, link, Icon }) => (jsx("div", Object.assign({ className: 'wallet-help-link' }, { children: jsxs("a", Object.assign({ className: 'wallet-help-link__anchor', href: link, target: '_blank', rel: 'noreferrer' }, { children: [jsx(Icon, { style: {

package/src/lib/views/PendingConnectView/PendingConnectView.cjs

@@ -42,6 +42,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 
 const PendingConnectView = () => {
     const { selectedWalletConnector: walletConnector } = useInternalDynamicContext.useInternalDynamicContext();

package/src/lib/views/PendingConnectView/PendingConnectView.js

@@ -38,6 +38,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 
 const PendingConnectView = () => {
     const { selectedWalletConnector: walletConnector } = useInternalDynamicContext();