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

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 (88) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/package.cjs +2 -2
  3. package/package.js +2 -2
  4. package/package.json +9 -9
  5. package/src/index.cjs +2 -0
  6. package/src/index.js +1 -0
  7. package/src/lib/Main.cjs +45 -6
  8. package/src/lib/Main.js +45 -6
  9. package/src/lib/assets/no-wallet-found.cjs +8 -8
  10. package/src/lib/assets/no-wallet-found.js +8 -8
  11. package/src/lib/components/LogoutButton/LogoutButton.cjs +17 -3
  12. package/src/lib/components/LogoutButton/LogoutButton.js +17 -3
  13. package/src/lib/components/PoweredByDynamic/PoweredByDynamic.cjs +9 -1
  14. package/src/lib/components/PoweredByDynamic/PoweredByDynamic.js +9 -1
  15. package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs +1 -1
  16. package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js +1 -1
  17. package/src/lib/components/Toolkit/Toolkit.cjs +3 -3
  18. package/src/lib/components/Toolkit/Toolkit.js +3 -3
  19. package/src/lib/components/Toolkit/components/MultiWalletSwitch.cjs +18 -0
  20. package/src/lib/components/Toolkit/components/MultiWalletSwitch.d.ts +8 -0
  21. package/src/lib/components/Toolkit/components/MultiWalletSwitch.js +14 -0
  22. package/src/lib/components/Toolkit/components/index.d.ts +1 -1
  23. package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs +1 -1
  24. package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js +1 -1
  25. package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs +1 -1
  26. package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js +1 -1
  27. package/src/lib/context/DynamicContext/DynamicContext.cjs +42 -12
  28. package/src/lib/context/DynamicContext/DynamicContext.d.ts +5 -1
  29. package/src/lib/context/DynamicContext/DynamicContext.js +43 -14
  30. package/src/lib/context/DynamicContext/helpers.cjs +5 -4
  31. package/src/lib/context/DynamicContext/helpers.d.ts +3 -1
  32. package/src/lib/context/DynamicContext/helpers.js +5 -4
  33. package/src/lib/context/DynamicContext/useCustomerCallbacks/types.d.ts +1 -0
  34. package/src/lib/context/DynamicContext/useCustomerCallbacks/useCustomerCallbacks.cjs +1 -1
  35. package/src/lib/context/DynamicContext/useCustomerCallbacks/useCustomerCallbacks.d.ts +2 -2
  36. package/src/lib/context/DynamicContext/useCustomerCallbacks/useCustomerCallbacks.js +1 -1
  37. package/src/lib/shared/types/index.d.ts +1 -0
  38. package/src/lib/shared/utils/classes/storage/localStorage.cjs +36 -24
  39. package/src/lib/shared/utils/classes/storage/localStorage.d.ts +16 -3
  40. package/src/lib/shared/utils/classes/storage/localStorage.js +37 -25
  41. package/src/lib/shared/utils/hooks/index.d.ts +1 -0
  42. package/src/lib/shared/utils/hooks/useEffectOnce/index.d.ts +1 -0
  43. package/src/lib/shared/utils/hooks/useEffectOnce/useEffectOnce.cjs +27 -0
  44. package/src/lib/shared/utils/hooks/useEffectOnce/useEffectOnce.d.ts +17 -0
  45. package/src/lib/shared/utils/hooks/useEffectOnce/useEffectOnce.js +23 -0
  46. package/src/lib/styles/index.shadow.cjs +1 -1
  47. package/src/lib/styles/index.shadow.js +1 -1
  48. package/src/lib/utils/functions/getAuthToken/getAuthToken.cjs +2 -1
  49. package/src/lib/utils/functions/getAuthToken/getAuthToken.d.ts +1 -1
  50. package/src/lib/utils/functions/getAuthToken/getAuthToken.js +2 -1
  51. package/src/lib/utils/functions/storeAuthToken/index.cjs +1 -3
  52. package/src/lib/utils/functions/storeAuthToken/index.js +1 -3
  53. package/src/lib/utils/hooks/index.d.ts +2 -0
  54. package/src/lib/utils/hooks/multiWallet/useMultiWallet/index.d.ts +1 -0
  55. package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.cjs +17 -0
  56. package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.d.ts +8 -0
  57. package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.js +13 -0
  58. package/src/lib/utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.cjs +29 -0
  59. package/src/lib/utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.d.ts +5 -0
  60. package/src/lib/utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.js +25 -0
  61. package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.cjs +20 -5
  62. package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.d.ts +5 -2
  63. package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.js +20 -5
  64. package/src/lib/utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.cjs +11 -18
  65. package/src/lib/utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.js +11 -18
  66. package/src/lib/utils/hooks/useEventListener/index.d.ts +1 -0
  67. package/src/lib/utils/hooks/useEventListener/useEventListener.cjs +25 -0
  68. package/src/lib/utils/hooks/useEventListener/useEventListener.d.ts +1 -0
  69. package/src/lib/utils/hooks/useEventListener/useEventListener.js +21 -0
  70. package/src/lib/utils/hooks/usePromise/usePromise.cjs +71 -18
  71. package/src/lib/utils/hooks/usePromise/usePromise.d.ts +14 -0
  72. package/src/lib/utils/hooks/usePromise/usePromise.js +72 -19
  73. package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.cjs +1 -1
  74. package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.js +1 -1
  75. package/src/lib/views/NetworkNotSupported/NetworkNotSupported.cjs +9 -8
  76. package/src/lib/views/NetworkNotSupported/NetworkNotSupported.js +9 -8
  77. package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.cjs +5 -9
  78. package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.js +5 -9
  79. package/src/lib/views/NoAccess/useNoAccessText.cjs +1 -1
  80. package/src/lib/views/NoAccess/useNoAccessText.js +1 -1
  81. package/src/lib/views/WalletList/SearchNotFoundMessage/SearchNotFoundMessage.cjs +2 -1
  82. package/src/lib/views/WalletList/SearchNotFoundMessage/SearchNotFoundMessage.d.ts +2 -2
  83. package/src/lib/views/WalletList/SearchNotFoundMessage/SearchNotFoundMessage.js +2 -1
  84. package/src/lib/views/WalletList/WalletList.cjs +1 -1
  85. package/src/lib/views/WalletList/WalletList.js +1 -1
  86. package/src/lib/components/Toolkit/components/BrandStyleSwitch.cjs +0 -22
  87. package/src/lib/components/Toolkit/components/BrandStyleSwitch.d.ts +0 -2
  88. package/src/lib/components/Toolkit/components/BrandStyleSwitch.js +0 -18
package/CHANGELOG.md CHANGED
@@ -1,4 +1,37 @@
1
1
 
2
+ ## [0.18.0-RC.16](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.15...v0.18.0-RC.16) (2023-07-18)
3
+
4
+
5
+ ### Features
6
+
7
+ * **QNTM-30:** add spinner to log out button ([#2663](https://github.com/dynamic-labs/DynamicAuth/issues/2663)) ([fceafbb](https://github.com/dynamic-labs/DynamicAuth/commit/fceafbb6fecf323df39ac3a8f518ba8005d4b550))
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * handle edge cases for missing projectSettings for PoweredByDynamic ([#2684](https://github.com/dynamic-labs/DynamicAuth/issues/2684)) ([6f5b3d8](https://github.com/dynamic-labs/DynamicAuth/commit/6f5b3d8d1b1d4aed0dd2e73e5423f6e50347ff3d))
13
+ * typo in blocked view ([#2673](https://github.com/dynamic-labs/DynamicAuth/issues/2673)) ([034bdaf](https://github.com/dynamic-labs/DynamicAuth/commit/034bdafb44b767600ea7c0148f39dd026280e3b8))
14
+
15
+ ## [0.18.0-RC.15](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.14...v0.18.0-RC.15) (2023-07-18)
16
+
17
+
18
+ ### Features
19
+
20
+ * add `updateConnectedWalletById` function, add `network` property to connectedWallets ([#2666](https://github.com/dynamic-labs/DynamicAuth/issues/2666)) ([3c50abf](https://github.com/dynamic-labs/DynamicAuth/commit/3c50abf964a2807c6e1af9fceeb1ca259785a21f))
21
+ * add magic to ethereum-all package ([#2576](https://github.com/dynamic-labs/DynamicAuth/issues/2576)) ([7676ef2](https://github.com/dynamic-labs/DynamicAuth/commit/7676ef2883b30adf2c1b521d7c1848248ceadb24))
22
+ * allow switching between multiwallet and single wallet on demo ([#2596](https://github.com/dynamic-labs/DynamicAuth/issues/2596)) ([dae87c1](https://github.com/dynamic-labs/DynamicAuth/commit/dae87c12d2f1be64c2ca1f232ffdf2da998b1c1e))
23
+ * clear values from LS that cannot be parsed ([#2542](https://github.com/dynamic-labs/DynamicAuth/issues/2542)) ([41faf5d](https://github.com/dynamic-labs/DynamicAuth/commit/41faf5dbc07937685b4d89f87ae040021c5fee00))
24
+ * **QNTM-82:** should not go back to "get started" view if one wallet already connected ([#2653](https://github.com/dynamic-labs/DynamicAuth/issues/2653)) ([004db41](https://github.com/dynamic-labs/DynamicAuth/commit/004db410eb11af9ba105058df4958f20633a3002))
25
+
26
+
27
+ ### Bug Fixes
28
+
29
+ * **bridge:** update the wallets to connect when unlinking ([#2604](https://github.com/dynamic-labs/DynamicAuth/issues/2604)) ([4739306](https://github.com/dynamic-labs/DynamicAuth/commit/4739306c2d742e961281747427821af7c36b6cc2))
30
+ * network picker is broken in network switch view ([#2612](https://github.com/dynamic-labs/DynamicAuth/issues/2612)) ([c514ba4](https://github.com/dynamic-labs/DynamicAuth/commit/c514ba4f931c243bdd60329db7ed1691fc36819c))
31
+ * search not found icon in wrong color in dark mode ([#2656](https://github.com/dynamic-labs/DynamicAuth/issues/2656)) ([a4db736](https://github.com/dynamic-labs/DynamicAuth/commit/a4db736b8659567330dd857792cc12b17ce9d851))
32
+ * use dynamicauth.com for api requests ([#2649](https://github.com/dynamic-labs/DynamicAuth/issues/2649)) ([acae0af](https://github.com/dynamic-labs/DynamicAuth/commit/acae0afc2a18c41fa61b2c487ff1ceb46c5d9a1f))
33
+ * wallet should be disconnected when NetworkNotSupported view is ignored in connect-only mode ([#2658](https://github.com/dynamic-labs/DynamicAuth/issues/2658)) ([f3565cf](https://github.com/dynamic-labs/DynamicAuth/commit/f3565cf09a1ddcc671b596bbe23c68d35afc81b5))
34
+
2
35
  ## [0.18.0-RC.14](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.13...v0.18.0-RC.14) (2023-07-11)
3
36
 
4
37
 
package/package.cjs CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var version = "0.18.0-RC.14";
5
+ var version = "0.18.0-RC.16";
6
6
  var dependencies = {
7
7
  "react-focus-lock": "2.9.2",
8
8
  "@dynamic-labs/iconic": "0.1.23",
9
- "@dynamic-labs/sdk-api": "0.0.228",
9
+ "@dynamic-labs/sdk-api": "0.0.237",
10
10
  "@hcaptcha/react-hcaptcha": "1.4.4",
11
11
  "country-list": "2.3.0",
12
12
  yup: "0.32.11",
package/package.js CHANGED
@@ -1,8 +1,8 @@
1
- var version = "0.18.0-RC.14";
1
+ var version = "0.18.0-RC.16";
2
2
  var dependencies = {
3
3
  "react-focus-lock": "2.9.2",
4
4
  "@dynamic-labs/iconic": "0.1.23",
5
- "@dynamic-labs/sdk-api": "0.0.228",
5
+ "@dynamic-labs/sdk-api": "0.0.237",
6
6
  "@hcaptcha/react-hcaptcha": "1.4.4",
7
7
  "country-list": "2.3.0",
8
8
  yup: "0.32.11",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dynamic-labs/sdk-react-core",
3
- "version": "0.18.0-RC.14",
3
+ "version": "0.18.0-RC.16",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -9,20 +9,20 @@
9
9
  "dependencies": {
10
10
  "react-focus-lock": "2.9.2",
11
11
  "@dynamic-labs/iconic": "0.1.23",
12
- "@dynamic-labs/sdk-api": "0.0.228",
12
+ "@dynamic-labs/sdk-api": "0.0.237",
13
13
  "@hcaptcha/react-hcaptcha": "1.4.4",
14
14
  "country-list": "2.3.0",
15
15
  "yup": "0.32.11",
16
16
  "formik": "2.2.9",
17
17
  "qrcode": "1.5.1",
18
18
  "ethers": "5.7.2",
19
- "@dynamic-labs/logger": "0.18.0-RC.14",
20
- "@dynamic-labs/multi-wallet": "0.18.0-RC.14",
21
- "@dynamic-labs/rpc-providers": "0.18.0-RC.14",
22
- "@dynamic-labs/types": "0.18.0-RC.14",
23
- "@dynamic-labs/utils": "0.18.0-RC.14",
24
- "@dynamic-labs/wallet-book": "0.18.0-RC.14",
25
- "@dynamic-labs/wallet-connector-core": "0.18.0-RC.14"
19
+ "@dynamic-labs/logger": "0.18.0-RC.16",
20
+ "@dynamic-labs/multi-wallet": "0.18.0-RC.16",
21
+ "@dynamic-labs/rpc-providers": "0.18.0-RC.16",
22
+ "@dynamic-labs/types": "0.18.0-RC.16",
23
+ "@dynamic-labs/utils": "0.18.0-RC.16",
24
+ "@dynamic-labs/wallet-book": "0.18.0-RC.16",
25
+ "@dynamic-labs/wallet-connector-core": "0.18.0-RC.16"
26
26
  },
27
27
  "devDependencies": {
28
28
  "semver": "7.3.8"
package/src/index.cjs CHANGED
@@ -38,6 +38,7 @@ var index$1 = require('./lib/shared/utils/hooks/useOnClickOutside/index.cjs');
38
38
  var usePreventPageScroll = require('./lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
39
39
  var useGlobalLoading = require('./lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs');
40
40
  var useMediaQuery = require('./lib/shared/utils/hooks/useMediaQuery/useMediaQuery.cjs');
41
+ var useEffectOnce = require('./lib/shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
41
42
  var localStorage = require('./lib/shared/utils/classes/storage/localStorage.cjs');
42
43
  var PhantomLedgerIcon = require('./lib/shared/assets/wallets/PhantomLedgerIcon/PhantomLedgerIcon.cjs');
43
44
  var stroke = require('./lib/shared/assets/stroke.cjs');
@@ -163,6 +164,7 @@ exports.useOnClickOutside = index$1.useOnClickOutside;
163
164
  exports.usePreventPageScroll = usePreventPageScroll.usePreventPageScroll;
164
165
  exports.useGlobalLoading = useGlobalLoading.useGlobalLoading;
165
166
  exports.useMediaQuery = useMediaQuery.useMediaQuery;
167
+ exports.useEffectOnce = useEffectOnce.useEffectOnce;
166
168
  exports.LocalStorage = localStorage.LocalStorage;
167
169
  exports.PhantomLedgerIcon = PhantomLedgerIcon.PhantomLedgerIcon;
168
170
  exports.ArrowIcon = stroke.ReactComponent;
package/src/index.js CHANGED
@@ -34,6 +34,7 @@ export { useOnClickOutside } from './lib/shared/utils/hooks/useOnClickOutside/in
34
34
  export { usePreventPageScroll } from './lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
35
35
  export { useGlobalLoading } from './lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
36
36
  export { useMediaQuery } from './lib/shared/utils/hooks/useMediaQuery/useMediaQuery.js';
37
+ export { useEffectOnce } from './lib/shared/utils/hooks/useEffectOnce/useEffectOnce.js';
37
38
  export { LocalStorage } from './lib/shared/utils/classes/storage/localStorage.js';
38
39
  export { PhantomLedgerIcon } from './lib/shared/assets/wallets/PhantomLedgerIcon/PhantomLedgerIcon.js';
39
40
  export { ReactComponent as ArrowIcon } from './lib/shared/assets/stroke.js';
package/src/lib/Main.cjs CHANGED
@@ -21,6 +21,7 @@ var usePreventPageScroll = require('./shared/utils/hooks/usePreventPageScroll/us
21
21
  var index$1 = require('./shared/consts/index.cjs');
22
22
  var useInternalDynamicContext = require('./context/DynamicContext/useInternalDynamicContext.cjs');
23
23
  require('@dynamic-labs/multi-wallet');
24
+ var isSupportedNetwork = require('./utils/functions/isSupportedNetwork/isSupportedNetwork.cjs');
24
25
  require('./components/ShadowDOM/ShadowDOM.cjs');
25
26
  require('./context/ThemeContext/ThemeContext.cjs');
26
27
  var Portal = require('./components/Portal/Portal.cjs');
@@ -38,6 +39,7 @@ require('./components/Transition/OpacityTransition/OpacityTransition.cjs');
38
39
  require('./components/Alert/Alert.cjs');
39
40
  var useWalletItemActions = require('./utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
40
41
  require('./utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
42
+ var isConnectOnly = require('./utils/hooks/authenticationHooks/helpers/isConnectOnly.cjs');
41
43
  require('./components/Popper/Popper/Popper.cjs');
42
44
  var PopperContext = require('./components/Popper/PopperContext/PopperContext.cjs');
43
45
  require('formik');
@@ -51,7 +53,7 @@ var viewToComponentMap = require('./views/viewToComponentMap.cjs');
51
53
  require('./main.global.cjs');
52
54
 
53
55
  const Main = () => {
54
- const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, } = useInternalDynamicContext.useInternalDynamicContext();
56
+ const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
55
57
  const { view, goToInitialView } = ViewContext.useViewContext();
56
58
  const { setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
57
59
  usePreventPageScroll.usePreventPageScroll(showAuthFlow);
@@ -61,10 +63,44 @@ const Main = () => {
61
63
  setDeniedOauthProvider(undefined);
62
64
  clearStatesOnBackClick();
63
65
  };
64
- const handleOnPortalUnmount = React.useCallback(
65
- // IMPORTANT: we need to reset the view because we reset state that the view depends on
66
- // so if the previous view renders when the user reopens the widget, it will crash
67
- () => {
66
+ const handleOnPortalExiting = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
67
+ // In the connect only mode (default and bridge)
68
+ // We want to disconnect wallet when users closes `network not supported` view
69
+ // without updating network in wallet
70
+ // We use onExiting instead onUnmount to avoid jump effect in inline widget
71
+ if (isConnectOnly.isConnectOnly(user, authMode)) {
72
+ const viewsToDisconnectWalletOnClose = [
73
+ 'network-not-supported',
74
+ 'network-not-supported-manual',
75
+ ];
76
+ if (viewsToDisconnectWalletOnClose.includes(view)) {
77
+ if (!selectedWalletConnector) {
78
+ return;
79
+ }
80
+ const walletByConnectorName = connectedWallets.find((connectedWallet) => connectedWallet.connector.name === selectedWalletConnector.name);
81
+ if (!walletByConnectorName) {
82
+ return;
83
+ }
84
+ // Validate the network
85
+ if (!isSupportedNetwork.isSupportedNetwork({
86
+ network: yield walletByConnectorName.connector.getNetwork(),
87
+ walletConnector: walletByConnectorName.connector,
88
+ })) {
89
+ unlinkConnectedWallet(walletByConnectorName.id);
90
+ }
91
+ }
92
+ }
93
+ }), [
94
+ selectedWalletConnector,
95
+ authMode,
96
+ connectedWallets,
97
+ unlinkConnectedWallet,
98
+ user,
99
+ view,
100
+ ]);
101
+ const handleOnPortalUnmount = React.useCallback(() => {
102
+ // IMPORTANT: we need to reset the view because we reset state that the view depends on
103
+ // so if the previous view renders when the user reopens the widget, it will crash
68
104
  goToInitialView();
69
105
  }, [goToInitialView]);
70
106
  useVerifyOnAwaitingSignature.useVerifyOnAwaitingSignature();
@@ -105,8 +141,11 @@ const Main = () => {
105
141
  }, [wallets]);
106
142
  const showDynamicAuth = showAuthFlow && !isProjectSettingsLoading;
107
143
  return (jsxRuntime.jsx(SocialRedirectContext.SocialRedirectContextProvider, { children: jsxRuntime.jsx(index.FooterAnimationContextProvider, { children: jsxRuntime.jsx(Portal.Portal, Object.assign({ zIndex: index$1.authModalZIndex, isShown: showDynamicAuth, handleClose: handleClose, withBackdrop: true, transitionEvents: {
144
+ onExiting: handleOnPortalExiting,
108
145
  onUnmount: handleOnPortalUnmount,
109
- } }, { children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, Object.assign({ transitionProps: { isShown: showDynamicAuth }, onClose: handleClose, projectSettings: projectSettings, walletConnector: selectedWalletConnector }, { children: viewToComponentMap.viewToComponentMap[view] })) }) })) }) }));
146
+ } }, { children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, Object.assign({ transitionProps: {
147
+ isShown: showDynamicAuth,
148
+ }, onClose: handleClose, projectSettings: projectSettings, walletConnector: selectedWalletConnector }, { children: viewToComponentMap.viewToComponentMap[view] })) }) })) }) }));
110
149
  };
111
150
 
112
151
  exports.Main = Main;
package/src/lib/Main.js CHANGED
@@ -17,6 +17,7 @@ import { usePreventPageScroll } from './shared/utils/hooks/usePreventPageScroll/
17
17
  import { authModalZIndex } from './shared/consts/index.js';
18
18
  import { useInternalDynamicContext } from './context/DynamicContext/useInternalDynamicContext.js';
19
19
  import '@dynamic-labs/multi-wallet';
20
+ import { isSupportedNetwork } from './utils/functions/isSupportedNetwork/isSupportedNetwork.js';
20
21
  import './components/ShadowDOM/ShadowDOM.js';
21
22
  import './context/ThemeContext/ThemeContext.js';
22
23
  import { Portal } from './components/Portal/Portal.js';
@@ -34,6 +35,7 @@ import './components/Transition/OpacityTransition/OpacityTransition.js';
34
35
  import './components/Alert/Alert.js';
35
36
  import { useWalletItemActions } from './utils/hooks/useWalletItemActions/useWalletItemActions.js';
36
37
  import './utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
38
+ import { isConnectOnly } from './utils/hooks/authenticationHooks/helpers/isConnectOnly.js';
37
39
  import './components/Popper/Popper/Popper.js';
38
40
  import { PopperProvider } from './components/Popper/PopperContext/PopperContext.js';
39
41
  import 'formik';
@@ -47,7 +49,7 @@ import { viewToComponentMap } from './views/viewToComponentMap.js';
47
49
  import './main.global.js';
48
50
 
49
51
  const Main = () => {
50
- const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, } = useInternalDynamicContext();
52
+ const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext();
51
53
  const { view, goToInitialView } = useViewContext();
52
54
  const { setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
53
55
  usePreventPageScroll(showAuthFlow);
@@ -57,10 +59,44 @@ const Main = () => {
57
59
  setDeniedOauthProvider(undefined);
58
60
  clearStatesOnBackClick();
59
61
  };
60
- const handleOnPortalUnmount = useCallback(
61
- // IMPORTANT: we need to reset the view because we reset state that the view depends on
62
- // so if the previous view renders when the user reopens the widget, it will crash
63
- () => {
62
+ const handleOnPortalExiting = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
63
+ // In the connect only mode (default and bridge)
64
+ // We want to disconnect wallet when users closes `network not supported` view
65
+ // without updating network in wallet
66
+ // We use onExiting instead onUnmount to avoid jump effect in inline widget
67
+ if (isConnectOnly(user, authMode)) {
68
+ const viewsToDisconnectWalletOnClose = [
69
+ 'network-not-supported',
70
+ 'network-not-supported-manual',
71
+ ];
72
+ if (viewsToDisconnectWalletOnClose.includes(view)) {
73
+ if (!selectedWalletConnector) {
74
+ return;
75
+ }
76
+ const walletByConnectorName = connectedWallets.find((connectedWallet) => connectedWallet.connector.name === selectedWalletConnector.name);
77
+ if (!walletByConnectorName) {
78
+ return;
79
+ }
80
+ // Validate the network
81
+ if (!isSupportedNetwork({
82
+ network: yield walletByConnectorName.connector.getNetwork(),
83
+ walletConnector: walletByConnectorName.connector,
84
+ })) {
85
+ unlinkConnectedWallet(walletByConnectorName.id);
86
+ }
87
+ }
88
+ }
89
+ }), [
90
+ selectedWalletConnector,
91
+ authMode,
92
+ connectedWallets,
93
+ unlinkConnectedWallet,
94
+ user,
95
+ view,
96
+ ]);
97
+ const handleOnPortalUnmount = useCallback(() => {
98
+ // IMPORTANT: we need to reset the view because we reset state that the view depends on
99
+ // so if the previous view renders when the user reopens the widget, it will crash
64
100
  goToInitialView();
65
101
  }, [goToInitialView]);
66
102
  useVerifyOnAwaitingSignature();
@@ -101,8 +137,11 @@ const Main = () => {
101
137
  }, [wallets]);
102
138
  const showDynamicAuth = showAuthFlow && !isProjectSettingsLoading;
103
139
  return (jsx(SocialRedirectContextProvider, { children: jsx(FooterAnimationContextProvider, { children: jsx(Portal, Object.assign({ zIndex: authModalZIndex, isShown: showDynamicAuth, handleClose: handleClose, withBackdrop: true, transitionEvents: {
140
+ onExiting: handleOnPortalExiting,
104
141
  onUnmount: handleOnPortalUnmount,
105
- } }, { children: jsx(PopperProvider, { children: jsx(DynamicAuthLayout, Object.assign({ transitionProps: { isShown: showDynamicAuth }, onClose: handleClose, projectSettings: projectSettings, walletConnector: selectedWalletConnector }, { children: viewToComponentMap[view] })) }) })) }) }));
142
+ } }, { children: jsx(PopperProvider, { children: jsx(DynamicAuthLayout, Object.assign({ transitionProps: {
143
+ isShown: showDynamicAuth,
144
+ }, onClose: handleClose, projectSettings: projectSettings, walletConnector: selectedWalletConnector }, { children: viewToComponentMap[view] })) }) })) }) }));
106
145
  };
107
146
 
108
147
  export { Main, Main as default };
@@ -46,29 +46,29 @@ var SvgNoWalletFound = function SvgNoWalletFound(_ref) {
46
46
  fillRule: "evenodd",
47
47
  clipRule: "evenodd",
48
48
  d: "M99.064 34.016c-6.654 0-12.048 5.394-12.048 12.048 0 6.653 5.394 12.047 12.048 12.047 6.653 0 12.047-5.394 12.047-12.047 0-6.654-5.394-12.048-12.047-12.048ZM83 46.064C83 37.192 90.192 30 99.064 30c8.871 0 16.063 7.192 16.063 16.064 0 3.712-1.259 7.13-3.373 9.85l8.658 8.658a2.008 2.008 0 0 1-2.84 2.84l-8.658-8.658a15.994 15.994 0 0 1-9.85 3.373C90.192 62.127 83 54.935 83 46.064Z",
49
- fill: "#16254D",
50
- fillOpacity: 0.07
49
+ fill: "currentColor",
50
+ fillOpacity: 0.35
51
51
  })), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
52
52
  y: 8,
53
53
  width: 121,
54
54
  height: 16,
55
55
  rx: 4,
56
- fill: "#16254D",
57
- fillOpacity: 0.05
56
+ fill: "currentColor",
57
+ fillOpacity: 0.3
58
58
  })), _rect2 || (_rect2 = /*#__PURE__*/React__namespace.createElement("rect", {
59
59
  y: 30,
60
60
  width: 75,
61
61
  height: 16,
62
62
  rx: 4,
63
- fill: "#16254D",
64
- fillOpacity: 0.05
63
+ fill: "currentColor",
64
+ fillOpacity: 0.3
65
65
  })), _rect3 || (_rect3 = /*#__PURE__*/React__namespace.createElement("rect", {
66
66
  y: 52,
67
67
  width: 75,
68
68
  height: 16,
69
69
  rx: 4,
70
- fill: "#16254D",
71
- fillOpacity: 0.05
70
+ fill: "currentColor",
71
+ fillOpacity: 0.3
72
72
  })));
73
73
  };
74
74
 
@@ -22,29 +22,29 @@ var SvgNoWalletFound = function SvgNoWalletFound(_ref) {
22
22
  fillRule: "evenodd",
23
23
  clipRule: "evenodd",
24
24
  d: "M99.064 34.016c-6.654 0-12.048 5.394-12.048 12.048 0 6.653 5.394 12.047 12.048 12.047 6.653 0 12.047-5.394 12.047-12.047 0-6.654-5.394-12.048-12.047-12.048ZM83 46.064C83 37.192 90.192 30 99.064 30c8.871 0 16.063 7.192 16.063 16.064 0 3.712-1.259 7.13-3.373 9.85l8.658 8.658a2.008 2.008 0 0 1-2.84 2.84l-8.658-8.658a15.994 15.994 0 0 1-9.85 3.373C90.192 62.127 83 54.935 83 46.064Z",
25
- fill: "#16254D",
26
- fillOpacity: 0.07
25
+ fill: "currentColor",
26
+ fillOpacity: 0.35
27
27
  })), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
28
28
  y: 8,
29
29
  width: 121,
30
30
  height: 16,
31
31
  rx: 4,
32
- fill: "#16254D",
33
- fillOpacity: 0.05
32
+ fill: "currentColor",
33
+ fillOpacity: 0.3
34
34
  })), _rect2 || (_rect2 = /*#__PURE__*/React.createElement("rect", {
35
35
  y: 30,
36
36
  width: 75,
37
37
  height: 16,
38
38
  rx: 4,
39
- fill: "#16254D",
40
- fillOpacity: 0.05
39
+ fill: "currentColor",
40
+ fillOpacity: 0.3
41
41
  })), _rect3 || (_rect3 = /*#__PURE__*/React.createElement("rect", {
42
42
  y: 52,
43
43
  width: 75,
44
44
  height: 16,
45
45
  rx: 4,
46
- fill: "#16254D",
47
- fillOpacity: 0.05
46
+ fill: "currentColor",
47
+ fillOpacity: 0.3
48
48
  })));
49
49
  };
50
50
 
@@ -2,14 +2,15 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _tslib = require('../../../../_virtual/_tslib.cjs');
5
6
  var jsxRuntime = require('react/jsx-runtime');
7
+ var React = require('react');
6
8
  var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
7
9
  require('@dynamic-labs/sdk-api');
8
- require('../../shared/logger.cjs');
10
+ var logger = require('../../shared/logger.cjs');
9
11
  require('@dynamic-labs/iconic');
10
12
  require('@dynamic-labs/wallet-connector-core');
11
13
  require('../../context/ViewContext/ViewContext.cjs');
12
- require('react');
13
14
  var logout = require('../../shared/assets/logout.cjs');
14
15
  require('@dynamic-labs/wallet-book');
15
16
  require('@dynamic-labs/utils');
@@ -20,8 +21,21 @@ require('../../shared/consts/index.cjs');
20
21
  var Button = require('../Button/Button.cjs');
21
22
 
22
23
  const LogoutButton = ({ buttonClassName = '', isTextButton = false, }) => {
24
+ const [loading, setLoading] = React.useState(false);
23
25
  const { handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
24
- return (jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', onClick: handleLogOut, typographyProps: isTextButton
26
+ const onLogOutClick = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
27
+ try {
28
+ setLoading(true);
29
+ yield handleLogOut();
30
+ }
31
+ catch (e) {
32
+ logger.logger.error(e);
33
+ }
34
+ finally {
35
+ setLoading(false);
36
+ }
37
+ });
38
+ return (jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', loading: loading, disabled: loading, onClick: onLogOutClick, typographyProps: isTextButton
25
39
  ? { color: 'secondary', variant: 'button_tertiary' }
26
40
  : { color: 'primary', variant: 'button_secondary' }, dataTestId: 'logout-button', startSlot: isTextButton ? jsxRuntime.jsx(logout.ReactComponent, {}) : undefined, expanded: !isTextButton, type: 'button' }, { children: "Log out" })));
27
41
  };
@@ -1,11 +1,12 @@
1
+ import { __awaiter } from '../../../../_virtual/_tslib.js';
1
2
  import { jsx } from 'react/jsx-runtime';
3
+ import { useState } from 'react';
2
4
  import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
3
5
  import '@dynamic-labs/sdk-api';
4
- import '../../shared/logger.js';
6
+ import { logger } from '../../shared/logger.js';
5
7
  import '@dynamic-labs/iconic';
6
8
  import '@dynamic-labs/wallet-connector-core';
7
9
  import '../../context/ViewContext/ViewContext.js';
8
- import 'react';
9
10
  import { ReactComponent as SvgLogout } from '../../shared/assets/logout.js';
10
11
  import '@dynamic-labs/wallet-book';
11
12
  import '@dynamic-labs/utils';
@@ -16,8 +17,21 @@ import '../../shared/consts/index.js';
16
17
  import { Button } from '../Button/Button.js';
17
18
 
18
19
  const LogoutButton = ({ buttonClassName = '', isTextButton = false, }) => {
20
+ const [loading, setLoading] = useState(false);
19
21
  const { handleLogOut } = useInternalDynamicContext();
20
- return (jsx(Button, Object.assign({ buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', onClick: handleLogOut, typographyProps: isTextButton
22
+ const onLogOutClick = () => __awaiter(void 0, void 0, void 0, function* () {
23
+ try {
24
+ setLoading(true);
25
+ yield handleLogOut();
26
+ }
27
+ catch (e) {
28
+ logger.error(e);
29
+ }
30
+ finally {
31
+ setLoading(false);
32
+ }
33
+ });
34
+ return (jsx(Button, Object.assign({ buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', loading: loading, disabled: loading, onClick: onLogOutClick, typographyProps: isTextButton
21
35
  ? { color: 'secondary', variant: 'button_tertiary' }
22
36
  : { color: 'primary', variant: 'button_secondary' }, dataTestId: 'logout-button', startSlot: isTextButton ? jsx(SvgLogout, {}) : undefined, expanded: !isTextButton, type: 'button' }, { children: "Log out" })));
23
37
  };
@@ -7,12 +7,20 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
7
7
  var Typography = require('../Typography/Typography.cjs');
8
8
  require('react');
9
9
  var dynamicLogo = require('../../assets/dynamic-logo.cjs');
10
+ var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
10
11
 
11
12
  const URL = 'https://dynamic.xyz';
12
13
  const alignClassNames = {
13
14
  center: 'powered-by-dynamic--center',
14
15
  right: 'powered-by-dynamic--right',
15
16
  };
16
- const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => (jsxRuntime.jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames.classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsxRuntime.jsx(dynamicLogo.ReactComponent, { className: classNames.classNames('powered-by-dynamic__logo', classNameLogo) })] })));
17
+ const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => {
18
+ var _a;
19
+ const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
20
+ if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
21
+ return null;
22
+ }
23
+ return (jsxRuntime.jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames.classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsxRuntime.jsx(dynamicLogo.ReactComponent, { className: classNames.classNames('powered-by-dynamic__logo', classNameLogo) })] })));
24
+ };
17
25
 
18
26
  exports.PoweredByDynamic = PoweredByDynamic;
@@ -3,12 +3,20 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
3
3
  import { Typography } from '../Typography/Typography.js';
4
4
  import 'react';
5
5
  import { ReactComponent as SvgDynamicLogo } from '../../assets/dynamic-logo.js';
6
+ import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
6
7
 
7
8
  const URL = 'https://dynamic.xyz';
8
9
  const alignClassNames = {
9
10
  center: 'powered-by-dynamic--center',
10
11
  right: 'powered-by-dynamic--right',
11
12
  };
12
- const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => (jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsx(SvgDynamicLogo, { className: classNames('powered-by-dynamic__logo', classNameLogo) })] })));
13
+ const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => {
14
+ var _a;
15
+ const { projectSettings } = useInternalDynamicContext();
16
+ if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
17
+ return null;
18
+ }
19
+ return (jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsx(SvgDynamicLogo, { className: classNames('powered-by-dynamic__logo', classNameLogo) })] })));
20
+ };
13
21
 
14
22
  export { PoweredByDynamic };
@@ -45,7 +45,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
45
45
  return;
46
46
  return parseFloat(balance);
47
47
  }, [balance]);
48
- return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsxRuntime.jsx(Chip.Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
48
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsxRuntime.jsx(Chip.Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] }))] }));
49
49
  };
50
50
 
51
51
  exports.SendBalancePageLayout = SendBalancePageLayout;
@@ -41,7 +41,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
41
41
  return;
42
42
  return parseFloat(balance);
43
43
  }, [balance]);
44
- return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsx(Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsx(FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
44
+ return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsx(Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsx(FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] }))] }));
45
45
  };
46
46
 
47
47
  export { SendBalancePageLayout };
@@ -21,15 +21,15 @@ require('@dynamic-labs/multi-wallet');
21
21
  var isEmailProviderEnabled = require('../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
22
22
  var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
23
23
  var ThemeSwitch = require('./components/ThemeSwitch.cjs');
24
- var BrandStyleSwitch = require('./components/BrandStyleSwitch.cjs');
25
24
  var PrimaryColorInput = require('./components/PrimaryColorInput.cjs');
26
25
  var AuthModeSwitch = require('./components/AuthModeSwitch.cjs');
27
26
  var LoginWithEmailSwitch = require('./components/LoginWithEmailSwitch.cjs');
28
27
  var LoginWithEmailViewDisplayPriorityOrderSwitch = require('./components/LoginWithEmailViewDisplayPriorityOrderSwitch.cjs');
29
28
  var TemplateSelect = require('./components/TemplateSelect.cjs');
29
+ var MultiWalletSwitch = require('./components/MultiWalletSwitch.cjs');
30
30
 
31
31
  const Toolkit = () => {
32
- const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, } = useInternalDynamicContext.useInternalDynamicContext();
32
+ const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, multiWallet, setMultiWallet, } = useInternalDynamicContext.useInternalDynamicContext();
33
33
  const isToolkitVisible = React.useMemo(() => {
34
34
  if (!toolkitEnabled)
35
35
  return false;
@@ -37,7 +37,7 @@ const Toolkit = () => {
37
37
  }, [showAuthFlow, showDynamicUserProfile, toolkitEnabled]);
38
38
  if (!isToolkitVisible)
39
39
  return null;
40
- return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: index.toolkitZIndex }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsxRuntime.jsx(ThemeSwitch.ThemeSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsxRuntime.jsx(TemplateSelect.TemplateSelect, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Brand" })), jsxRuntime.jsx(BrandStyleSwitch.BrandStyleSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsxRuntime.jsx(PrimaryColorInput.PrimaryColorInput, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsxRuntime.jsx(AuthModeSwitch.AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), isEmailProviderEnabled.isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsxRuntime.jsx(LoginWithEmailSwitch.LoginWithEmailSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsxRuntime.jsx(LoginWithEmailViewDisplayPriorityOrderSwitch.LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
40
+ return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: index.toolkitZIndex }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsxRuntime.jsx(ThemeSwitch.ThemeSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsxRuntime.jsx(TemplateSelect.TemplateSelect, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsxRuntime.jsx(PrimaryColorInput.PrimaryColorInput, {})] })), !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsxRuntime.jsx(AuthModeSwitch.AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Multi Wallet" })), jsxRuntime.jsx(MultiWalletSwitch.MultiWalletSwitch, { multiWallet: multiWallet && authMode === 'connect-and-sign', disabled: authMode === 'connect-only', setMultiWallet: setMultiWallet })] }))] })), isEmailProviderEnabled.isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsxRuntime.jsx(LoginWithEmailSwitch.LoginWithEmailSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsxRuntime.jsx(LoginWithEmailViewDisplayPriorityOrderSwitch.LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
41
41
  };
42
42
 
43
43
  exports.Toolkit = Toolkit;