@dynamic-labs/sdk-react-core 0.19.0-alpha.6 → 0.19.0-alpha.8

package/CHANGELOG.md

@@ -1,4 +1,51 @@
 
+## [0.19.0-alpha.8](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.7...v0.19.0-alpha.8) (2023-09-11)
+
+
+### Features
+
+* add onSignedMessage callback ([#3118](https://github.com/dynamic-labs/DynamicAuth/issues/3118)) ([acc36f6](https://github.com/dynamic-labs/DynamicAuth/commit/acc36f6cf584eb05a019027475a6e2e413fd6bd5))
+* add social sign-in without embedded wallet ([#3172](https://github.com/dynamic-labs/DynamicAuth/issues/3172)) ([ff1acc6](https://github.com/dynamic-labs/DynamicAuth/commit/ff1acc6d9753ba745ac01c5ef6d26f2e4291b752))
+* show default wallet icon when image breaks ([#3234](https://github.com/dynamic-labs/DynamicAuth/issues/3234)) ([657e6bb](https://github.com/dynamic-labs/DynamicAuth/commit/657e6bbc1cdcd840562d25194a827ea833237c1a))
+
+
+### Bug Fixes
+
+* catch error sending sdkSettings and log warning ([#3274](https://github.com/dynamic-labs/DynamicAuth/issues/3274)) ([fcbe01b](https://github.com/dynamic-labs/DynamicAuth/commit/fcbe01bc733a73f38aebd6ffb0969b040dd2f781))
+* detect if oauth popup is blocked and throw error ([#3250](https://github.com/dynamic-labs/DynamicAuth/issues/3250)) ([b87ddf3](https://github.com/dynamic-labs/DynamicAuth/commit/b87ddf399104e29c56566abbbecab6ff947992d6))
+* display error message to user if social account already exits ([#3258](https://github.com/dynamic-labs/DynamicAuth/issues/3258)) ([bb52cb4](https://github.com/dynamic-labs/DynamicAuth/commit/bb52cb4ae42d89310d435584ed4ece126f9b6a4a))
+* don't call callbacks if window closed due to oauth process complete ([#3252](https://github.com/dynamic-labs/DynamicAuth/issues/3252)) ([09a3c73](https://github.com/dynamic-labs/DynamicAuth/commit/09a3c73446aa337f24e0875cd4a0af617ea8ca84))
+* issue where unexpected token would occur when bundlers defined process.env ([#3283](https://github.com/dynamic-labs/DynamicAuth/issues/3283)) ([d31d0a4](https://github.com/dynamic-labs/DynamicAuth/commit/d31d0a4011256f59cb3760acdc2c3dfe6c5b504a))
+* login view layout updates ([#3231](https://github.com/dynamic-labs/DynamicAuth/issues/3231)) ([7762d06](https://github.com/dynamic-labs/DynamicAuth/commit/7762d067bdd4b3f313a15308262f18dac0b961ab))
+* **MagicWalletConnector:** remove async from getWeb3Provider method ([#3230](https://github.com/dynamic-labs/DynamicAuth/issues/3230)) ([69356e9](https://github.com/dynamic-labs/DynamicAuth/commit/69356e9b0bd1800acdf24fc96c72b094b595eaa7))
+* remove react component props from sending to sdk api ([#3282](https://github.com/dynamic-labs/DynamicAuth/issues/3282)) ([b0d8f2b](https://github.com/dynamic-labs/DynamicAuth/commit/b0d8f2b9dd0856a5a7bd862f6c3499b65ec29f64))
+* seprate ls checks for dynamiccontext and wagmi settings ([#3275](https://github.com/dynamic-labs/DynamicAuth/issues/3275)) ([aa4e756](https://github.com/dynamic-labs/DynamicAuth/commit/aa4e756a10310ce216b5942d0d6845f7092a89a2))
+* use context to handle social sign-in and display message while processing ([#3216](https://github.com/dynamic-labs/DynamicAuth/issues/3216)) ([0e3ce73](https://github.com/dynamic-labs/DynamicAuth/commit/0e3ce73eafbb8d5725377c9a8cbd86a82d6c525f))
+* **wallet-connect-v2:** use appropriate default chain id with WC v2 ([#3218](https://github.com/dynamic-labs/DynamicAuth/issues/3218)) ([2e6e7be](https://github.com/dynamic-labs/DynamicAuth/commit/2e6e7beb801ea5a8dc7429970bcd1e705610d605))
+
+## [0.19.0-alpha.7](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.6...v0.19.0-alpha.7) (2023-08-31)
+
+
+### Features
+
+* include deepLinkPreference option for wallet connect deep linking mode ([#3174](https://github.com/dynamic-labs/DynamicAuth/issues/3174)) ([f715948](https://github.com/dynamic-labs/DynamicAuth/commit/f715948050ddab52373ab742ea47cfc0879842ae))
+* add option to disable the locked wallet view ([#3184](https://github.com/dynamic-labs/DynamicAuth/issues/3184)) ([d9a1290](https://github.com/dynamic-labs/DynamicAuth/commit/d9a1290214b7f86337abb544acd96f65ffe37759))
+* migrate starknet version to v5 ([#3153](https://github.com/dynamic-labs/DynamicAuth/issues/3153)) ([b674011](https://github.com/dynamic-labs/DynamicAuth/commit/b67401133bf75d416118b51be11e3f099d2e2cda))
+* add editable text with react i18next ([#3170](https://github.com/dynamic-labs/DynamicAuth/issues/3170)) ([a46b2ca](https://github.com/dynamic-labs/DynamicAuth/commit/a46b2ca880a4e14356024d2936920f72c8bc447e))
+
+
+### Bug Fixes
+
+* allow to select L2 wallet after changing L1 network ([#3158](https://github.com/dynamic-labs/DynamicAuth/issues/3158)) ([cf68472](https://github.com/dynamic-labs/DynamicAuth/commit/cf6847270181f7fd33537ac1ff2a03e70b67daf2))
+* allow user to cancel magic login to choose another email ([#3123](https://github.com/dynamic-labs/DynamicAuth/issues/3123)) ([cd73d6d](https://github.com/dynamic-labs/DynamicAuth/commit/cd73d6d0500c313dda01bca6245c52d2d8fca93a))
+* verify email OTP when email is updated ([#3168](https://github.com/dynamic-labs/DynamicAuth/issues/3168)) ([641eeb6](https://github.com/dynamic-labs/DynamicAuth/commit/641eeb685b0c9d77cc72912f29b137c699c192f0))
+* end connector session when unlinking in bridge ([#3120](https://github.com/dynamic-labs/DynamicAuth/issues/3120)) ([4c15da2](https://github.com/dynamic-labs/DynamicAuth/commit/4c15da27646c7bd176f6080dee6d76833e30f8a1))
+* improves loading the sdk setting once per session ([#3189](https://github.com/dynamic-labs/DynamicAuth/issues/3189)) ([c9b0241](https://github.com/dynamic-labs/DynamicAuth/commit/c9b0241da28d2a73c90fd7643280c8632772c90b))
+* update wallet address when switching network on bridge ([#3171](https://github.com/dynamic-labs/DynamicAuth/issues/3171)) ([f35f35e](https://github.com/dynamic-labs/DynamicAuth/commit/f35f35e632bcf88794884b66e0466cdf2e924812))
+* updates the user email when updateUserWithModal method is used ([#3186](https://github.com/dynamic-labs/DynamicAuth/issues/3186)) ([8c71863](https://github.com/dynamic-labs/DynamicAuth/commit/8c718632cef0165328b929c27b6eef313641458d))
+* sign message for embedded wallet when auth mode is connect only ([#3185](https://github.com/dynamic-labs/DynamicAuth/issues/3185)) ([0e3859c](https://github.com/dynamic-labs/DynamicAuth/commit/0e3859cfc738d3ecf8f19976e5cdaebc0c4f01c9))
+* sync wagmi with wallet connector ([#3149](https://github.com/dynamic-labs/DynamicAuth/issues/3149)) ([3216e15](https://github.com/dynamic-labs/DynamicAuth/commit/3216e1570ac12ded6b3ce50b7efb762fe6814815))
+
 ## [0.19.0-alpha.6](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.5...v0.19.0-alpha.6) (2023-08-25)
 
 

package/package.cjs

@@ -2,17 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.19.0-alpha.6";
+var version = "0.19.0-alpha.8";
 var dependencies = {
-	"react-focus-lock": "2.9.2",
-	"@dynamic-labs/iconic": "0.1.27",
-	"@dynamic-labs/sdk-api": "0.0.270",
+	"@dynamic-labs/iconic": "0.1.30",
+	"@dynamic-labs/sdk-api": "0.0.272",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
-	yup: "0.32.11",
+	ethers: "5.7.2",
 	formik: "2.2.9",
+	i18next: "^23.4.6",
 	qrcode: "1.5.1",
-	ethers: "5.7.2"
+	"react-focus-lock": "2.9.2",
+	"react-i18next": "^13.2.0",
+	yup: "0.32.11"
 };
 
 exports.dependencies = dependencies;

package/package.js

@@ -1,14 +1,16 @@
-var version = "0.19.0-alpha.6";
+var version = "0.19.0-alpha.8";
 var dependencies = {
-	"react-focus-lock": "2.9.2",
-	"@dynamic-labs/iconic": "0.1.27",
-	"@dynamic-labs/sdk-api": "0.0.270",
+	"@dynamic-labs/iconic": "0.1.30",
+	"@dynamic-labs/sdk-api": "0.0.272",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
-	yup: "0.32.11",
+	ethers: "5.7.2",
 	formik: "2.2.9",
+	i18next: "^23.4.6",
 	qrcode: "1.5.1",
-	ethers: "5.7.2"
+	"react-focus-lock": "2.9.2",
+	"react-i18next": "^13.2.0",
+	yup: "0.32.11"
 };
 
 export { dependencies, version };

package/package.json

@@ -1,28 +1,30 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.19.0-alpha.6",
+  "version": "0.19.0-alpha.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
     "directory": "packages/sdk-react-core"
   },
   "dependencies": {
-    "react-focus-lock": "2.9.2",
-    "@dynamic-labs/iconic": "0.1.27",
-    "@dynamic-labs/sdk-api": "0.0.270",
+    "@dynamic-labs/iconic": "0.1.30",
+    "@dynamic-labs/sdk-api": "0.0.272",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
-    "yup": "0.32.11",
+    "ethers": "5.7.2",
     "formik": "2.2.9",
+    "i18next": "^23.4.6",
     "qrcode": "1.5.1",
-    "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.19.0-alpha.6",
-    "@dynamic-labs/multi-wallet": "0.19.0-alpha.6",
-    "@dynamic-labs/rpc-providers": "0.19.0-alpha.6",
-    "@dynamic-labs/types": "0.19.0-alpha.6",
-    "@dynamic-labs/utils": "0.19.0-alpha.6",
-    "@dynamic-labs/wallet-book": "0.19.0-alpha.6",
-    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.6",
+    "react-focus-lock": "2.9.2",
+    "react-i18next": "^13.2.0",
+    "yup": "0.32.11",
+    "@dynamic-labs/logger": "0.19.0-alpha.8",
+    "@dynamic-labs/multi-wallet": "0.19.0-alpha.8",
+    "@dynamic-labs/rpc-providers": "0.19.0-alpha.8",
+    "@dynamic-labs/types": "0.19.0-alpha.8",
+    "@dynamic-labs/utils": "0.19.0-alpha.8",
+    "@dynamic-labs/wallet-book": "0.19.0-alpha.8",
+    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.8",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -89,6 +89,7 @@ var workSuitcase = require('./lib/shared/assets/work-suitcase.cjs');
 var location = require('./lib/shared/assets/location.cjs');
 var sparkles = require('./lib/shared/assets/sparkles.cjs');
 var justifiedText = require('./lib/shared/assets/justified-text.cjs');
+var signInWithEmail = require('./lib/shared/assets/sign-in-with-email.cjs');
 var index$2 = require('./lib/shared/consts/index.cjs');
 var logger = require('./lib/shared/logger.cjs');
 require('./lib/utils/constants/colors.cjs');
@@ -130,6 +131,7 @@ require('./lib/components/Popper/Popper/Popper.cjs');
 require('./lib/components/Popper/PopperContext/PopperContext.cjs');
 require('./lib/components/InlineWidget/InlineWidget.cjs');
 require('./lib/components/MenuList/Dropdown/Dropdown.cjs');
+require('./lib/components/OverlayCard/OverlayCard.context.cjs');
 var WalletList = require('./lib/views/WalletList/WalletList.cjs');
 var PendingSignatureView = require('./lib/views/PendingSignatureView/PendingSignatureView.cjs');
 var CollectUserDataView = require('./lib/views/CollectUserDataView/CollectUserDataView.cjs');
@@ -235,6 +237,7 @@ exports.WorkSuitcaseIcon = workSuitcase.ReactComponent;
 exports.LocationIcon = location.ReactComponent;
 exports.SparklesIcon = sparkles.ReactComponent;
 exports.JustifiedTextIcon = justifiedText.ReactComponent;
+exports.SignInWithEmailIcon = signInWithEmail.ReactComponent;
 exports.authModalZIndex = index$2.authModalZIndex;
 exports.countryCodes = index$2.countryCodes;
 exports.defaultWalletsForChains = index$2.defaultWalletsForChains;

package/src/index.d.ts

@@ -14,7 +14,7 @@ export * from './lib/views';
 export * from './lib/context/MockContext';
 export * from './lib/context/ThemeContext/themesData';
 export type { ViewType } from './lib/context/ViewContext';
-export type { NotSupportedError, NoAccessError, ChainalysisError, EmailAlreadyExistsError, UsernameAlreadyExistsError, WalletNotDeployedError, WalletUsedError, EmailVerificationError, AccountExistsError, } from '@dynamic-labs/utils';
+export type { NotSupportedError, NoAccessError, ChainalysisError, EmailAlreadyExistsError, UsernameAlreadyExistsError, SocialAccountAlreadyExistsError, WalletNotDeployedError, WalletUsedError, EmailVerificationError, AccountExistsError, } from '@dynamic-labs/utils';
 export type { WalletConnector, Chain, } from '@dynamic-labs/wallet-connector-core';
 export type { EvmNetwork } from '@dynamic-labs/types';
 export { normalizeWalletName } from '@dynamic-labs/wallet-connector-core';

package/src/index.js

@@ -85,6 +85,7 @@ export { ReactComponent as WorkSuitcaseIcon } from './lib/shared/assets/work-sui
 export { ReactComponent as LocationIcon } from './lib/shared/assets/location.js';
 export { ReactComponent as SparklesIcon } from './lib/shared/assets/sparkles.js';
 export { ReactComponent as JustifiedTextIcon } from './lib/shared/assets/justified-text.js';
+export { ReactComponent as SignInWithEmailIcon } from './lib/shared/assets/sign-in-with-email.js';
 export { authModalZIndex, countryCodes, defaultWalletsForChains, tShirtSizes, teamNames, toolkitZIndex, tooltipZIndex, widgetModalZIndex } from './lib/shared/consts/index.js';
 export { logger } from './lib/shared/logger.js';
 import './lib/utils/constants/colors.js';
@@ -126,6 +127,7 @@ import './lib/components/Popper/Popper/Popper.js';
 import './lib/components/Popper/PopperContext/PopperContext.js';
 import './lib/components/InlineWidget/InlineWidget.js';
 import './lib/components/MenuList/Dropdown/Dropdown.js';
+import './lib/components/OverlayCard/OverlayCard.context.js';
 export { WalletList } from './lib/views/WalletList/WalletList.js';
 export { PendingSignatureView } from './lib/views/PendingSignatureView/PendingSignatureView.js';
 export { CollectUserDataView } from './lib/views/CollectUserDataView/CollectUserDataView.js';

package/src/lib/Main.cjs

@@ -53,6 +53,7 @@ require('./components/Popper/Popper/Popper.cjs');
 var PopperContext = require('./components/Popper/PopperContext/PopperContext.cjs');
 require('./components/InlineWidget/InlineWidget.cjs');
 require('./components/MenuList/Dropdown/Dropdown.cjs');
+require('./components/OverlayCard/OverlayCard.context.cjs');
 var DynamicAuthLayout = require('./layout/DynamicAuthLayout/DynamicAuthLayout.cjs');
 var SocialRedirectContext = require('./context/SocialRedirectContext/SocialRedirectContext.cjs');
 var useVerifyOnAwaitingSignature = require('./utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.cjs');
@@ -62,6 +63,7 @@ require('./main.global.cjs');
 
 const viewsToDisableCloseOnOverlayClick = [
     'email-wallet-otp-verification-view',
+    'social-redirect-view',
 ];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();

package/src/lib/Main.js

@@ -49,6 +49,7 @@ import './components/Popper/Popper/Popper.js';
 import { PopperProvider } from './components/Popper/PopperContext/PopperContext.js';
 import './components/InlineWidget/InlineWidget.js';
 import './components/MenuList/Dropdown/Dropdown.js';
+import './components/OverlayCard/OverlayCard.context.js';
 import { DynamicAuthLayout } from './layout/DynamicAuthLayout/DynamicAuthLayout.js';
 import { SocialRedirectContextProvider } from './context/SocialRedirectContext/SocialRedirectContext.js';
 import { useVerifyOnAwaitingSignature } from './utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.js';
@@ -58,6 +59,7 @@ import './main.global.js';
 
 const viewsToDisableCloseOnOverlayClick = [
     'email-wallet-otp-verification-view',
+    'social-redirect-view',
 ];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext();

package/src/lib/components/Accordion/components/AccordionItem/AccordionItem.cjs

@@ -40,6 +40,7 @@ require('formik');
 require('yup');
 require('../../../InlineWidget/InlineWidget.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
+require('../../../OverlayCard/OverlayCard.context.cjs');
 require('../../../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');

package/src/lib/components/Accordion/components/AccordionItem/AccordionItem.js

@@ -36,6 +36,7 @@ import 'formik';
 import 'yup';
 import '../../../InlineWidget/InlineWidget.js';
 import '../../../MenuList/Dropdown/Dropdown.js';
+import '../../../OverlayCard/OverlayCard.context.js';
 import '../../../../views/CollectUserDataView/fieldsConfig.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/components/AnimatePresence/AnimatePresence.cjs

@@ -39,6 +39,7 @@ require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
+require('../OverlayCard/OverlayCard.context.cjs');
 require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 var useForceUpdate = require('../../utils/hooks/useForceUpdate/useForceUpdate.cjs');

package/src/lib/components/AnimatePresence/AnimatePresence.js

@@ -35,6 +35,7 @@ import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
+import '../OverlayCard/OverlayCard.context.js';
 import '../../views/CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import { useForceUpdate } from '../../utils/hooks/useForceUpdate/useForceUpdate.js';

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.cjs

@@ -42,6 +42,7 @@ require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
+require('../OverlayCard/OverlayCard.context.cjs');
 require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
@@ -89,7 +90,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     }
     // it means that user tried to login with actual wallet and no magic social and failed to go through the access list
     if (deniedAddress) {
-        return (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+        return (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
     if (!walletForIcon) {
@@ -103,7 +104,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     if (MagicEmailOrSocialIcon) {
         return showStatus ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { iconSize: iconSize, Icon: MagicEmailOrSocialIcon, variant: walletForIcon.connected ? 'green' : 'red' })) : (jsxRuntime.jsx(MagicEmailOrSocialIcon, { style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
     }
-    return showStatus ? (jsxRuntime.jsx(WalletIconWithStatus.WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' })) : (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+    return showStatus ? (jsxRuntime.jsx(WalletIconWithStatus.WalletIconWithStatus, { iconSize: iconSize, walletKey: walletForIcon.connector.key, connected: walletForIcon.connected, variant: 'secondary' })) : (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletForIcon.connector.key, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
 };
 
 exports.AuthProviderIcon = AuthProviderIcon;

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.js

@@ -38,6 +38,7 @@ import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
+import '../OverlayCard/OverlayCard.context.js';
 import '../../views/CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
@@ -85,7 +86,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     }
     // it means that user tried to login with actual wallet and no magic social and failed to go through the access list
     if (deniedAddress) {
-        return (jsx(WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+        return (jsx(WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
     }
     const walletForIcon = wallet ? wallet : primaryWallet;
     if (!walletForIcon) {
@@ -99,7 +100,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     if (MagicEmailOrSocialIcon) {
         return showStatus ? (jsx(IconWithStatus, { iconSize: iconSize, Icon: MagicEmailOrSocialIcon, variant: walletForIcon.connected ? 'green' : 'red' })) : (jsx(MagicEmailOrSocialIcon, { style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
     }
-    return showStatus ? (jsx(WalletIconWithStatus, { iconSize: iconSize, walletName: walletForIcon.connector.name, connected: walletForIcon.connected, variant: 'secondary' })) : (jsx(WalletIcon, { walletName: walletForIcon.connector.name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+    return showStatus ? (jsx(WalletIconWithStatus, { iconSize: iconSize, walletKey: walletForIcon.connector.key, connected: walletForIcon.connected, variant: 'secondary' })) : (jsx(WalletIcon, { walletKey: walletForIcon.connector.key, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
 };
 
 export { AuthProviderIcon };

package/src/lib/components/Divider/Divider.cjs

@@ -47,6 +47,7 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
+require('../OverlayCard/OverlayCard.context.cjs');
 
 const Divider = ({ text, className = '', fullWidth = false }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('divider', className, {
         'divider__full-width': fullWidth,

package/src/lib/components/Divider/Divider.js

@@ -43,6 +43,7 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
+import '../OverlayCard/OverlayCard.context.js';
 
 const Divider = ({ text, className = '', fullWidth = false }) => (jsxs("div", Object.assign({ className: classNames('divider', className, {
         'divider__full-width': fullWidth,

package/src/lib/components/IconWithSpinner/IconWithSpinner.cjs

@@ -22,7 +22,7 @@ var Spinner = require('./Spinner/Spinner.cjs');
 var Indicator = require('./Indicator/Indicator.cjs');
 
 const iconRatio = 7 / 11;
-const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className = '', indicator, customSpinnerColor, }) => {
+const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className = '', indicator, customSpinnerColor, treatAsFunctionComponent, }) => {
     const realIconSize = iconSize * iconRatio;
     const spinnerIconSize = iconSize / 2;
     const [spinningDegrees, setSpinningDegrees] = React.useState(0);
@@ -36,13 +36,14 @@ const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className =
         return () => clearInterval(spinningInterval);
     }, []);
     const effectiveContainerClassName = classNames.classNames('icon-with-spinner__container', className);
+    const IconAsFC = Icon;
     return (jsxRuntime.jsxs("div", Object.assign({ className: effectiveContainerClassName, style: {
             height: pixelToRem.pixelToRem(iconSize),
             width: pixelToRem.pixelToRem(iconSize),
         } }, { children: [Icon && (jsxRuntime.jsxs("div", Object.assign({ style: {
                     height: pixelToRem.pixelToRem(realIconSize),
                     width: pixelToRem.pixelToRem(realIconSize),
-                }, className: 'icon-with-spinner__icon-container' }, { children: [typeof Icon === 'function' ? (jsxRuntime.jsx(Icon, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsxRuntime.jsx(Indicator.Indicator, { indicator: indicator, iconSize: iconSize })] }))), isSpinning && !utils.isLegacySafari() && (jsxRuntime.jsx("div", Object.assign({ className: 'icon-with-spinner__spinner-container', "data-chromatic": 'ignore', style: {
+                }, className: 'icon-with-spinner__icon-container' }, { children: [treatAsFunctionComponent || typeof Icon === 'function' ? (jsxRuntime.jsx(IconAsFC, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsxRuntime.jsx(Indicator.Indicator, { indicator: indicator, iconSize: iconSize })] }))), isSpinning && !utils.isLegacySafari() && (jsxRuntime.jsx("div", Object.assign({ className: 'icon-with-spinner__spinner-container', "data-chromatic": 'ignore', style: {
                     height: pixelToRem.pixelToRem(iconSize),
                     transform: `rotate(${spinningDegrees}deg)`,
                     width: pixelToRem.pixelToRem(iconSize),

package/src/lib/components/IconWithSpinner/IconWithSpinner.d.ts

@@ -1,8 +1,10 @@
 import { ReactElement } from 'react';
 import { Iconic } from '@dynamic-labs/iconic';
 import { Icon } from '../../shared';
-type Props = {
+type IconWithSpinnerProps = {
     Icon?: Icon | Iconic | ReactElement | null;
+    /** This forces fo render the Icon as an FC even if it does not evaluate to type 'function' */
+    treatAsFunctionComponent?: boolean;
     className?: string;
     customSpinnerColor?: string;
     iconSize?: number;
@@ -10,5 +12,5 @@ type Props = {
     isSpinning?: boolean;
 };
 export declare const iconRatio: number;
-export declare const IconWithSpinner: ({ iconSize, Icon, isSpinning, className, indicator, customSpinnerColor, }: Props) => JSX.Element;
+export declare const IconWithSpinner: ({ iconSize, Icon, isSpinning, className, indicator, customSpinnerColor, treatAsFunctionComponent, }: IconWithSpinnerProps) => JSX.Element;
 export {};

package/src/lib/components/IconWithSpinner/IconWithSpinner.js

@@ -18,7 +18,7 @@ import { Spinner } from './Spinner/Spinner.js';
 import { Indicator } from './Indicator/Indicator.js';
 
 const iconRatio = 7 / 11;
-const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className = '', indicator, customSpinnerColor, }) => {
+const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className = '', indicator, customSpinnerColor, treatAsFunctionComponent, }) => {
     const realIconSize = iconSize * iconRatio;
     const spinnerIconSize = iconSize / 2;
     const [spinningDegrees, setSpinningDegrees] = useState(0);
@@ -32,13 +32,14 @@ const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className =
         return () => clearInterval(spinningInterval);
     }, []);
     const effectiveContainerClassName = classNames('icon-with-spinner__container', className);
+    const IconAsFC = Icon;
     return (jsxs("div", Object.assign({ className: effectiveContainerClassName, style: {
             height: pixelToRem(iconSize),
             width: pixelToRem(iconSize),
         } }, { children: [Icon && (jsxs("div", Object.assign({ style: {
                     height: pixelToRem(realIconSize),
                     width: pixelToRem(realIconSize),
-                }, className: 'icon-with-spinner__icon-container' }, { children: [typeof Icon === 'function' ? (jsx(Icon, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsx(Indicator, { indicator: indicator, iconSize: iconSize })] }))), isSpinning && !isLegacySafari() && (jsx("div", Object.assign({ className: 'icon-with-spinner__spinner-container', "data-chromatic": 'ignore', style: {
+                }, className: 'icon-with-spinner__icon-container' }, { children: [treatAsFunctionComponent || typeof Icon === 'function' ? (jsx(IconAsFC, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsx(Indicator, { indicator: indicator, iconSize: iconSize })] }))), isSpinning && !isLegacySafari() && (jsx("div", Object.assign({ className: 'icon-with-spinner__spinner-container', "data-chromatic": 'ignore', style: {
                     height: pixelToRem(iconSize),
                     transform: `rotate(${spinningDegrees}deg)`,
                     width: pixelToRem(iconSize),

package/src/lib/components/IconWithStatus/IconWithStatus.cjs

@@ -21,15 +21,15 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var StatusDot = require('../StatusDot/StatusDot.cjs');
 var Icon = require('../Icon/Icon.cjs');
 
-const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletName, containerClassName, iconSize = 16, variant = 'green', }) => {
-    const Inner = primaryWalletName ? (jsxRuntime.jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('inner-icon') }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'medium' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: primaryWalletName }) })) })) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsxRuntime.jsx(InnerIcon, {}) })) })));
+const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletKey, containerClassName, iconSize = 16, variant = 'green', }) => {
+    const Inner = primaryWalletKey ? (jsxRuntime.jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('inner-icon') }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'medium' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: primaryWalletKey }) })) })) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsxRuntime.jsx(InnerIcon, {}) })) })));
     return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('icon-with-status__container', containerClassName || '') }, { children: [typeof Icon$1 === 'string' ? (jsxRuntime.jsx("img", { style: {
                     height: pixelToRem.pixelToRem(iconSize),
                     width: pixelToRem.pixelToRem(iconSize),
                 }, src: Icon$1, alt: '', className: 'icon' })) : (jsxRuntime.jsx(Icon$1, { style: {
                     height: pixelToRem.pixelToRem(iconSize),
                     width: pixelToRem.pixelToRem(iconSize),
-                } })), InnerIcon || primaryWalletName ? (Inner) : (jsxRuntime.jsx(StatusDot.StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
+                } })), InnerIcon || primaryWalletKey ? (Inner) : (jsxRuntime.jsx(StatusDot.StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
 };
 
 exports.IconWithStatus = IconWithStatus;

package/src/lib/components/IconWithStatus/IconWithStatus.d.ts

@@ -5,8 +5,8 @@ type Props = {
     InnerIcon?: Icon;
     containerClassName?: string;
     iconSize?: number;
-    primaryWalletName?: string;
+    primaryWalletKey?: string;
     variant?: 'green' | 'red';
 };
-export declare const IconWithStatus: ({ Icon, InnerIcon, primaryWalletName, containerClassName, iconSize, variant, }: Props) => JSX.Element;
+export declare const IconWithStatus: ({ Icon, InnerIcon, primaryWalletKey, containerClassName, iconSize, variant, }: Props) => JSX.Element;
 export {};

package/src/lib/components/IconWithStatus/IconWithStatus.js

@@ -17,15 +17,15 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { StatusDot } from '../StatusDot/StatusDot.js';
 import { Icon } from '../Icon/Icon.js';
 
-const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletName, containerClassName, iconSize = 16, variant = 'green', }) => {
-    const Inner = primaryWalletName ? (jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsx("div", Object.assign({ className: classNames('inner-icon') }, { children: jsx(Icon, Object.assign({ size: 'medium' }, { children: jsx(WalletIcon, { walletName: primaryWalletName }) })) })) }))) : (jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsx("div", Object.assign({ className: classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsx(InnerIcon, {}) })) })));
+const IconWithStatus = ({ Icon: Icon$1, InnerIcon, primaryWalletKey, containerClassName, iconSize = 16, variant = 'green', }) => {
+    const Inner = primaryWalletKey ? (jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsx("div", Object.assign({ className: classNames('inner-icon') }, { children: jsx(Icon, Object.assign({ size: 'medium' }, { children: jsx(WalletIcon, { walletKey: primaryWalletKey }) })) })) }))) : (jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsx("div", Object.assign({ className: classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsx(InnerIcon, {}) })) })));
     return (jsxs("div", Object.assign({ className: classNames('icon-with-status__container', containerClassName || '') }, { children: [typeof Icon$1 === 'string' ? (jsx("img", { style: {
                     height: pixelToRem(iconSize),
                     width: pixelToRem(iconSize),
                 }, src: Icon$1, alt: '', className: 'icon' })) : (jsx(Icon$1, { style: {
                     height: pixelToRem(iconSize),
                     width: pixelToRem(iconSize),
-                } })), InnerIcon || primaryWalletName ? (Inner) : (jsx(StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
+                } })), InnerIcon || primaryWalletKey ? (Inner) : (jsx(StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
 };
 
 export { IconWithStatus };

package/src/lib/components/MenuList/Dropdown/Dropdown.cjs

@@ -43,6 +43,7 @@ require('../../Alert/Alert.cjs');
 require('formik');
 require('yup');
 require('../../InlineWidget/InlineWidget.cjs');
+require('../../OverlayCard/OverlayCard.context.cjs');
 require('../../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');

package/src/lib/components/MenuList/Dropdown/Dropdown.js

@@ -39,6 +39,7 @@ import '../../Alert/Alert.js';
 import 'formik';
 import 'yup';
 import '../../InlineWidget/InlineWidget.js';
+import '../../OverlayCard/OverlayCard.context.js';
 import '../../../views/CollectUserDataView/fieldsConfig.js';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/components/MockedQrCode/MockedQrCode.cjs

@@ -14,7 +14,7 @@ const MockedQrCode = () => {
     if (!mockedSDK)
         return null;
     const accentColor = theme.theme.name === 'dark' ? '#FFF' : '#1648F9';
-    return (jsxRuntime.jsx(QRCode.QRCode, { Icon: jsxRuntime.jsx(iconic.CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletName: 'Coinbase' }));
+    return (jsxRuntime.jsx(QRCode.QRCode, { Icon: jsxRuntime.jsx(iconic.CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletKey: 'coinbase' }));
 };
 
 exports.MockedQrCode = MockedQrCode;

package/src/lib/components/MockedQrCode/MockedQrCode.js

@@ -10,7 +10,7 @@ const MockedQrCode = () => {
     if (!mockedSDK)
         return null;
     const accentColor = theme.theme.name === 'dark' ? '#FFF' : '#1648F9';
-    return (jsx(QRCode, { Icon: jsx(CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletName: 'Coinbase' }));
+    return (jsx(QRCode, { Icon: jsx(CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletKey: 'coinbase' }));
 };
 
 export { MockedQrCode };

package/src/lib/components/Modal/Modal.cjs

@@ -39,6 +39,7 @@ require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
+require('../OverlayCard/OverlayCard.context.cjs');
 require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');

package/src/lib/components/Modal/Modal.js

@@ -35,6 +35,7 @@ import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
+import '../OverlayCard/OverlayCard.context.js';
 import '../../views/CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/components/NetworkPicker/NetworkPicker.cjs

@@ -41,6 +41,7 @@ require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
+require('../OverlayCard/OverlayCard.context.cjs');
 require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');

package/src/lib/components/NetworkPicker/NetworkPicker.js

@@ -37,6 +37,7 @@ import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
+import '../OverlayCard/OverlayCard.context.js';
 import '../../views/CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.cjs

@@ -49,6 +49,7 @@ require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');
 require('../../../InlineWidget/InlineWidget.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
+require('../../../OverlayCard/OverlayCard.context.cjs');
 var NetworkControlSkeleton = require('../NetworkControlSkeleton/NetworkControlSkeleton.cjs');
 var UnsupportedNetwork = require('../UnsupportedNetwork/UnsupportedNetwork.cjs');
 

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.js

@@ -45,6 +45,7 @@ import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';
 import '../../../InlineWidget/InlineWidget.js';
 import '../../../MenuList/Dropdown/Dropdown.js';
+import '../../../OverlayCard/OverlayCard.context.js';
 import { NetworkControlSkeleton } from '../NetworkControlSkeleton/NetworkControlSkeleton.js';
 import { UnsupportedNetwork } from '../UnsupportedNetwork/UnsupportedNetwork.js';
 

package/src/lib/components/NetworkPicker/components/Network/Network.cjs

@@ -50,6 +50,7 @@ require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');
 require('../../../InlineWidget/InlineWidget.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
+require('../../../OverlayCard/OverlayCard.context.cjs');
 
 const Network = ({ iconUrl, isActive, networkName, className, checkboxClassName = '', isChanging, notSupported = false, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('network', className, {
         'network--not-supported': notSupported,

package/src/lib/components/NetworkPicker/components/Network/Network.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     checkboxClassName?: string;
     className?: string;