@dynamic-labs/sdk-react-core 0.17.0-RC.20 → 0.17.0-RC.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.cjs +1 -1
  3. package/package.js +1 -1
  4. package/package.json +7 -7
  5. package/src/lib/Main.cjs +2 -1
  6. package/src/lib/Main.js +2 -1
  7. package/src/lib/components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.cjs +32 -6
  8. package/src/lib/components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.d.ts +3 -1
  9. package/src/lib/components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.js +32 -6
  10. package/src/lib/context/AccessDeniedContext/AccessDeniedContext.cjs +7 -1
  11. package/src/lib/context/AccessDeniedContext/AccessDeniedContext.d.ts +3 -0
  12. package/src/lib/context/AccessDeniedContext/AccessDeniedContext.js +7 -1
  13. package/src/lib/styles/index.shadow.cjs +1 -1
  14. package/src/lib/styles/index.shadow.js +1 -1
  15. package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.cjs +8 -4
  16. package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.js +8 -4
  17. package/src/lib/views/CollectUserDataView/CollectUserDataView.cjs +1 -1
  18. package/src/lib/views/CollectUserDataView/CollectUserDataView.js +1 -1
  19. package/src/lib/views/NetworkNotSupported/NetworkNotSupported.cjs +1 -1
  20. package/src/lib/views/NetworkNotSupported/NetworkNotSupported.js +1 -1
  21. package/src/lib/views/NoAccess/NoAccess.cjs +7 -5
  22. package/src/lib/views/NoAccess/NoAccess.js +7 -5
  23. package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.cjs +4 -1
  24. package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.js +4 -1
  25. package/src/lib/widgets/DynamicWidget/components/Wallet/Wallet.cjs +4 -4
  26. package/src/lib/widgets/DynamicWidget/components/Wallet/Wallet.js +4 -4
  27. package/src/lib/widgets/DynamicWidget/prompts/PendingConnectionModal/PendingConnectionModal.cjs +5 -3
  28. package/src/lib/widgets/DynamicWidget/prompts/PendingConnectionModal/PendingConnectionModal.js +5 -3
package/src/lib/views/NoAccess/NoAccess.cjs CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
- var walletBook = require('@dynamic-labs/wallet-book');
8
7
  var iconic = require('@dynamic-labs/iconic');
9
8
  var Typography = require('../../components/Typography/Typography.cjs');
10
9
  require('@dynamic-labs/sdk-api');
@@ -39,14 +38,16 @@ require('../../context/CaptchaContext/CaptchaContext.cjs');
39
38
  require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
40
39
  require('../../components/Popper/Popper/Popper.cjs');
41
40
  require('../../components/Popper/PopperContext/PopperContext.cjs');
41
+ require('@dynamic-labs/wallet-book');
42
42
  require('../../components/SendBalanceForm/SendBalanceForm.cjs');
43
43
  var StatusDot = require('../../components/StatusDot/StatusDot.cjs');
44
44
  var getSocialNetworkIcon = require('../../utils/functions/getSocialNetworkIcon/getSocialNetworkIcon.cjs');
45
45
  var EmailVerificationContext = require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
46
+ var WalletOrSocialMagicIcon = require('../../components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.cjs');
46
47
 
47
48
  const NoAccess = () => {
48
- const { deniedAddress, setDeniedAddress } = AccessDeniedContext.useAccessDeniedContext();
49
- const { loginWithEmail, selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, } = useInternalDynamicContext.useInternalDynamicContext();
49
+ const { deniedAddress, setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
50
+ const { loginWithEmail, selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, onboardingOnlyJwt, } = useInternalDynamicContext.useInternalDynamicContext();
50
51
  const { email } = EmailVerificationContext.useEmailVerificationContext();
51
52
  const { setView, view } = ViewContext.useViewContext();
52
53
  const isChainalysisView = view === 'chainalysis-blocked-wallet';
@@ -59,6 +60,7 @@ const NoAccess = () => {
59
60
  const handleChangeWallet = () => {
60
61
  setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
61
62
  setDeniedAddress('');
63
+ setDeniedOauthProvider(undefined);
62
64
  walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.endSession();
63
65
  };
64
66
  const title = isChainalysisView
@@ -73,10 +75,10 @@ const NoAccess = () => {
73
75
  : getSocialNetworkIcon.getSocialNetworkIcon(Object.keys(socialMediaIconUrl)[0]);
74
76
  const Icon = React.useMemo(() => {
75
77
  if (walletConnector) {
76
- return (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: { height: pixelToRem.pixelToRem(64), width: pixelToRem.pixelToRem(64) } }));
78
+ return jsxRuntime.jsx(WalletOrSocialMagicIcon.WalletOrSocialMagicIcon, { jwt: onboardingOnlyJwt });
77
79
  }
78
80
  return (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'wallet-no-access__icon--verified', Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: error.ReactComponent, variant: 'red' }));
79
- }, [walletConnector]);
81
+ }, [onboardingOnlyJwt, walletConnector]);
80
82
  const formattedAddress = deniedAddress.replace(deniedAddress.substring(6, Number(deniedAddress === null || deniedAddress === void 0 ? void 0 : deniedAddress.length) - 4), '...');
81
83
  const emailOrAddress = email !== null && email !== void 0 ? email : formattedAddress;
82
84
  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: handleChangeWallet, className: 'wallet-no-access__button--primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large' }, { children: "Try another method" })), 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: {
package/src/lib/views/NoAccess/NoAccess.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { useMemo } from 'react';
3
- import { WalletIcon } from '@dynamic-labs/wallet-book';
4
3
  import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
5
4
  import { Typography } from '../../components/Typography/Typography.js';
6
5
  import '@dynamic-labs/sdk-api';
@@ -35,14 +34,16 @@ import '../../context/CaptchaContext/CaptchaContext.js';
35
34
  import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
36
35
  import '../../components/Popper/Popper/Popper.js';
37
36
  import '../../components/Popper/PopperContext/PopperContext.js';
37
+ import '@dynamic-labs/wallet-book';
38
38
  import '../../components/SendBalanceForm/SendBalanceForm.js';
39
39
  import { StatusDot } from '../../components/StatusDot/StatusDot.js';
40
40
  import { getSocialNetworkIcon } from '../../utils/functions/getSocialNetworkIcon/getSocialNetworkIcon.js';
41
41
  import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
42
+ import { WalletOrSocialMagicIcon } from '../../components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.js';
42
43
 
43
44
  const NoAccess = () => {
44
- const { deniedAddress, setDeniedAddress } = useAccessDeniedContext();
45
- const { loginWithEmail, selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, } = useInternalDynamicContext();
45
+ const { deniedAddress, setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
46
+ const { loginWithEmail, selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, onboardingOnlyJwt, } = useInternalDynamicContext();
46
47
  const { email } = useEmailVerificationContext();
47
48
  const { setView, view } = useViewContext();
48
49
  const isChainalysisView = view === 'chainalysis-blocked-wallet';
@@ -55,6 +56,7 @@ const NoAccess = () => {
55
56
  const handleChangeWallet = () => {
56
57
  setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
57
58
  setDeniedAddress('');
59
+ setDeniedOauthProvider(undefined);
58
60
  walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.endSession();
59
61
  };
60
62
  const title = isChainalysisView
@@ -69,10 +71,10 @@ const NoAccess = () => {
69
71
  : getSocialNetworkIcon(Object.keys(socialMediaIconUrl)[0]);
70
72
  const Icon = useMemo(() => {
71
73
  if (walletConnector) {
72
- return (jsx(WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: { height: pixelToRem(64), width: pixelToRem(64) } }));
74
+ return jsx(WalletOrSocialMagicIcon, { jwt: onboardingOnlyJwt });
73
75
  }
74
76
  return (jsx(IconWithStatus, { containerClassName: 'wallet-no-access__icon--verified', Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgError, variant: 'red' }));
75
- }, [walletConnector]);
77
+ }, [onboardingOnlyJwt, walletConnector]);
76
78
  const formattedAddress = deniedAddress.replace(deniedAddress.substring(6, Number(deniedAddress === null || deniedAddress === void 0 ? void 0 : deniedAddress.length) - 4), '...');
77
79
  const emailOrAddress = email !== null && email !== void 0 ? email : formattedAddress;
78
80
  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: handleChangeWallet, className: 'wallet-no-access__button--primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large' }, { children: "Try another method" })), 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: {
package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.cjs CHANGED
@@ -19,6 +19,7 @@ var useInternalDynamicContext = require('../../../../context/DynamicContext/useI
19
19
  require('@dynamic-labs/multi-wallet');
20
20
  require('../../../../components/ShadowDOM/ShadowDOM.cjs');
21
21
  require('../../../../context/ThemeContext/ThemeContext.cjs');
22
+ var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
22
23
  require('react-dom');
23
24
  require('react-focus-lock');
24
25
  require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -69,7 +70,9 @@ const ActiveWalletInformation = () => {
69
70
  const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
70
71
  (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
71
72
  [];
72
- return (jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information-container', "data-testid": 'active-wallet-information' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information' }, { children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", Object.assign({ className: 'active-wallet-information__avatar' }, { children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'active-wallet-information__wallet-img' }, { children: jsxRuntime.jsx(WalletOrSocialMagicIcon.WalletOrSocialMagicIcon, { jwt: authToken, iconSize: ICON_SIZE }) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information__details' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information__actions-container' }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal' }, { children: nameService === null || nameService === void 0 ? void 0 : nameService.name })), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) }))] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', anchorOrigin: 'bottom-left', transformOrigin: utils.isMobile() ? 'bottom-right' : 'top-left' })] })), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] }))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'balance-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small' }, { children: "Balance" })), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] }))] })));
73
+ return (jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information-container', "data-testid": 'active-wallet-information' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information' }, { children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", Object.assign({ className: 'active-wallet-information__avatar' }, { children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'active-wallet-information__wallet-img' }, { children: jsxRuntime.jsx(WalletOrSocialMagicIcon.WalletOrSocialMagicIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information__details' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('active-wallet-information__actions-container', {
74
+ 'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
75
+ }) }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal' }, { children: nameService === null || nameService === void 0 ? void 0 : nameService.name })), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) }))] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', anchorOrigin: 'bottom-left', transformOrigin: utils.isMobile() ? 'bottom-right' : 'top-left' })] })), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] }))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'balance-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small' }, { children: "Balance" })), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] }))] })));
73
76
  };
74
77
 
75
78
  exports.ActiveWalletInformation = ActiveWalletInformation;
package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.js CHANGED
@@ -15,6 +15,7 @@ import { useInternalDynamicContext } from '../../../../context/DynamicContext/us
15
15
  import '@dynamic-labs/multi-wallet';
16
16
  import '../../../../components/ShadowDOM/ShadowDOM.js';
17
17
  import '../../../../context/ThemeContext/ThemeContext.js';
18
+ import { classNames } from '../../../../utils/functions/classNames/classNames.js';
18
19
  import 'react-dom';
19
20
  import 'react-focus-lock';
20
21
  import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -65,7 +66,9 @@ const ActiveWalletInformation = () => {
65
66
  const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
66
67
  (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
67
68
  [];
68
- return (jsxs("div", Object.assign({ className: 'active-wallet-information-container', "data-testid": 'active-wallet-information' }, { children: [jsxs("div", Object.assign({ className: 'active-wallet-information' }, { children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", Object.assign({ className: 'active-wallet-information__avatar' }, { children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) }))) : (jsx("div", Object.assign({ className: 'active-wallet-information__wallet-img' }, { children: jsx(WalletOrSocialMagicIcon, { jwt: authToken, iconSize: ICON_SIZE }) }))), jsxs("div", Object.assign({ className: 'active-wallet-information__details' }, { children: [jsxs("div", Object.assign({ className: 'active-wallet-information__actions-container' }, { children: [jsxs("div", { children: [jsx(Typography, Object.assign({ className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal' }, { children: nameService === null || nameService === void 0 ? void 0 : nameService.name })), jsx(Typography, Object.assign({ className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary' }, { children: shortenWalletAddress(address, 4, 4) }))] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', anchorOrigin: 'bottom-left', transformOrigin: isMobile() ? 'bottom-right' : 'top-left' })] })), jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] }))] })), jsxs("div", Object.assign({ className: 'balance-container' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small' }, { children: "Balance" })), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] }))] })));
69
+ return (jsxs("div", Object.assign({ className: 'active-wallet-information-container', "data-testid": 'active-wallet-information' }, { children: [jsxs("div", Object.assign({ className: 'active-wallet-information' }, { children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", Object.assign({ className: 'active-wallet-information__avatar' }, { children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) }))) : (jsx("div", Object.assign({ className: 'active-wallet-information__wallet-img' }, { children: jsx(WalletOrSocialMagicIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) }))), jsxs("div", Object.assign({ className: 'active-wallet-information__details' }, { children: [jsxs("div", Object.assign({ className: classNames('active-wallet-information__actions-container', {
70
+ 'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
71
+ }) }, { children: [jsxs("div", { children: [jsx(Typography, Object.assign({ className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal' }, { children: nameService === null || nameService === void 0 ? void 0 : nameService.name })), jsx(Typography, Object.assign({ className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary' }, { children: shortenWalletAddress(address, 4, 4) }))] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', anchorOrigin: 'bottom-left', transformOrigin: isMobile() ? 'bottom-right' : 'top-left' })] })), jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] }))] })), jsxs("div", Object.assign({ className: 'balance-container' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small' }, { children: "Balance" })), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] }))] })));
69
72
  };
70
73
 
71
74
  export { ActiveWalletInformation };
package/src/lib/widgets/DynamicWidget/components/Wallet/Wallet.cjs CHANGED
@@ -43,11 +43,11 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
43
43
  require('../../../../components/SendBalanceForm/SendBalanceForm.cjs');
44
44
  var DotsMenu = require('../DotsMenu/DotsMenu.cjs');
45
45
  var helpers = require('../../helpers/helpers.cjs');
46
- var WalletIconWithStatus = require('../WalletIconWithStatus/WalletIconWithStatus.cjs');
46
+ var WalletOrSocialMagicIcon = require('../../../../components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.cjs');
47
47
 
48
48
  const Wallet = ({ wallet, ens }) => {
49
- const { id: walletId, connector, address, connected } = wallet;
50
- const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, setShowWidgetStatePopup, setSelectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();
49
+ const { id: walletId, connector, address } = wallet;
50
+ const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, } = useInternalDynamicContext.useInternalDynamicContext();
51
51
  const iconSize = 20;
52
52
  const options = [
53
53
  {
@@ -86,7 +86,7 @@ const Wallet = ({ wallet, ens }) => {
86
86
  computeConnectedStateForWallets();
87
87
  setSelectedWalletConnector(connector);
88
88
  });
89
- return (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet__container', "data-testid": 'wallet' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet__row' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'wallet__icon-container' }, { children: jsxRuntime.jsx(WalletIconWithStatus.WalletIconWithStatus, { iconSize: iconSize, walletName: connector.name, connected: connected, variant: 'secondary' }) })), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true }, { children: ens === null || ens === void 0 ? void 0 : ens.name })), jsxRuntime.jsx("div", { className: 'wallet__row__seperator' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: shortenWalletAddress.shortenWalletAddress(address, 3, 3) }))] })) : (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })))] })), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'wallet__menu' })] })));
89
+ return (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet__container', "data-testid": 'wallet' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet__row' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'wallet__icon-container' }, { children: jsxRuntime.jsx(WalletOrSocialMagicIcon.WalletOrSocialMagicIcon, { iconSize: iconSize, jwt: authToken, wallet: wallet, showStatus: true }) })), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true }, { children: ens === null || ens === void 0 ? void 0 : ens.name })), jsxRuntime.jsx("div", { className: 'wallet__row__seperator' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: shortenWalletAddress.shortenWalletAddress(address, 3, 3) }))] })) : (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })))] })), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'wallet__menu' })] })));
90
90
  };
91
91
 
92
92
  exports.Wallet = Wallet;
package/src/lib/widgets/DynamicWidget/components/Wallet/Wallet.js CHANGED
@@ -39,11 +39,11 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
39
39
  import '../../../../components/SendBalanceForm/SendBalanceForm.js';
40
40
  import { DotsMenu } from '../DotsMenu/DotsMenu.js';
41
41
  import { copyToClipboard } from '../../helpers/helpers.js';
42
- import { WalletIconWithStatus } from '../WalletIconWithStatus/WalletIconWithStatus.js';
42
+ import { WalletOrSocialMagicIcon } from '../../../../components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.js';
43
43
 
44
44
  const Wallet = ({ wallet, ens }) => {
45
- const { id: walletId, connector, address, connected } = wallet;
46
- const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, setShowWidgetStatePopup, setSelectedWalletWithAction, } = useInternalDynamicContext();
45
+ const { id: walletId, connector, address } = wallet;
46
+ const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, } = useInternalDynamicContext();
47
47
  const iconSize = 20;
48
48
  const options = [
49
49
  {
@@ -82,7 +82,7 @@ const Wallet = ({ wallet, ens }) => {
82
82
  computeConnectedStateForWallets();
83
83
  setSelectedWalletConnector(connector);
84
84
  });
85
- return (jsxs("div", Object.assign({ className: 'wallet__container', "data-testid": 'wallet' }, { children: [jsxs("div", Object.assign({ className: 'wallet__row' }, { children: [jsx("div", Object.assign({ className: 'wallet__icon-container' }, { children: jsx(WalletIconWithStatus, { iconSize: iconSize, walletName: connector.name, connected: connected, variant: 'secondary' }) })), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true }, { children: ens === null || ens === void 0 ? void 0 : ens.name })), jsx("div", { className: 'wallet__row__seperator' }), jsx(Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: shortenWalletAddress(address, 3, 3) }))] })) : (jsx(Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: shortenWalletAddress(address, 4, 4) })))] })), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'wallet__menu' })] })));
85
+ return (jsxs("div", Object.assign({ className: 'wallet__container', "data-testid": 'wallet' }, { children: [jsxs("div", Object.assign({ className: 'wallet__row' }, { children: [jsx("div", Object.assign({ className: 'wallet__icon-container' }, { children: jsx(WalletOrSocialMagicIcon, { iconSize: iconSize, jwt: authToken, wallet: wallet, showStatus: true }) })), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true }, { children: ens === null || ens === void 0 ? void 0 : ens.name })), jsx("div", { className: 'wallet__row__seperator' }), jsx(Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: shortenWalletAddress(address, 3, 3) }))] })) : (jsx(Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: shortenWalletAddress(address, 4, 4) })))] })), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'wallet__menu' })] })));
86
86
  };
87
87
 
88
88
  export { Wallet };
package/src/lib/widgets/DynamicWidget/prompts/PendingConnectionModal/PendingConnectionModal.cjs CHANGED
@@ -3,7 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var walletBook = require('@dynamic-labs/wallet-book');
7
6
  var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
8
7
  var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
9
8
  require('react');
@@ -30,6 +29,7 @@ require('@dynamic-labs/rpc-providers');
30
29
  require('../../../../context/ErrorContext/ErrorContext.cjs');
31
30
  require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
32
31
  require('../../../../components/IconButton/IconButton.cjs');
32
+ require('@dynamic-labs/wallet-book');
33
33
  require('../../../../components/Alert/Alert.cjs');
34
34
  require('../../../../context/MockContext/MockContext.cjs');
35
35
  require('../../../../context/CaptchaContext/CaptchaContext.cjs');
@@ -37,10 +37,12 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
37
37
  require('../../../../components/Popper/Popper/Popper.cjs');
38
38
  require('../../../../components/Popper/PopperContext/PopperContext.cjs');
39
39
  require('../../../../components/SendBalanceForm/SendBalanceForm.cjs');
40
+ var WalletOrSocialMagicIcon = require('../../../../components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.cjs');
40
41
 
41
42
  const PendingConnectionModal = () => {
42
- const { selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
43
- return (jsxRuntime.jsx(DefaultPromptModal.DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-connection-modal', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name }), title: `Connect ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name} wallet` }, { children: jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Connect your", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name })), ' ', "wallet to make active."] })) })));
43
+ const { selectedWalletConnector, authToken, selectedWalletWithAction } = useInternalDynamicContext.useInternalDynamicContext();
44
+ return (jsxRuntime.jsx(DefaultPromptModal.DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-connection-modal', icon: jsxRuntime.jsx(WalletOrSocialMagicIcon.WalletOrSocialMagicIcon // eslint-disable-line
45
+ , { jwt: authToken, wallet: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet }), title: `Connect ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name} wallet` }, { children: jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Connect your", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name })), ' ', "wallet to make active."] })) })));
44
46
  };
45
47
 
46
48
  exports.PendingConnectionModal = PendingConnectionModal;
package/src/lib/widgets/DynamicWidget/prompts/PendingConnectionModal/PendingConnectionModal.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { WalletIcon } from '@dynamic-labs/wallet-book';
3
2
  import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
4
3
  import { DefaultPromptModal } from '../DefaultPromptModal/DefaultPromptModal.js';
5
4
  import 'react';
@@ -26,6 +25,7 @@ import '@dynamic-labs/rpc-providers';
26
25
  import '../../../../context/ErrorContext/ErrorContext.js';
27
26
  import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
28
27
  import '../../../../components/IconButton/IconButton.js';
28
+ import '@dynamic-labs/wallet-book';
29
29
  import '../../../../components/Alert/Alert.js';
30
30
  import '../../../../context/MockContext/MockContext.js';
31
31
  import '../../../../context/CaptchaContext/CaptchaContext.js';
@@ -33,10 +33,12 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
33
33
  import '../../../../components/Popper/Popper/Popper.js';
34
34
  import '../../../../components/Popper/PopperContext/PopperContext.js';
35
35
  import '../../../../components/SendBalanceForm/SendBalanceForm.js';
36
+ import { WalletOrSocialMagicIcon } from '../../../../components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.js';
36
37
 
37
38
  const PendingConnectionModal = () => {
38
- const { selectedWalletConnector } = useInternalDynamicContext();
39
- return (jsx(DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-connection-modal', icon: jsx(WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name }), title: `Connect ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name} wallet` }, { children: jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Connect your", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name })), ' ', "wallet to make active."] })) })));
39
+ const { selectedWalletConnector, authToken, selectedWalletWithAction } = useInternalDynamicContext();
40
+ return (jsx(DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-connection-modal', icon: jsx(WalletOrSocialMagicIcon // eslint-disable-line
41
+ , { jwt: authToken, wallet: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet }), title: `Connect ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name} wallet` }, { children: jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Connect your", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name })), ' ', "wallet to make active."] })) })));
40
42
  };
41
43
 
42
44
  export { PendingConnectionModal };