@dynamic-labs/sdk-react-core 0.16.4 → 0.17.0-RC.1

package/CHANGELOG.md

@@ -1,24 +1,38 @@
 
-### [0.16.4](https://github.com/dynamic-labs/DynamicAuth/compare/v0.16.3...v0.16.4) (2023-04-19)
+## [0.17.0-RC.1](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.0...v0.17.0-RC.1) (2023-04-20)
+
+
+### Features
+
+* add getNameService method to connectors ([#1894](https://github.com/dynamic-labs/DynamicAuth/issues/1894)) ([000b4e9](https://github.com/dynamic-labs/DynamicAuth/commit/000b4e9af89bb69299191c1452984168f30d81b5))
+* add social sign in flow ([#1849](https://github.com/dynamic-labs/DynamicAuth/issues/1849)) ([aa0f201](https://github.com/dynamic-labs/DynamicAuth/commit/aa0f201e6de35b092edc8283fc95e1a9074c7d56))
+* add wallet filter by chain name ([#1878](https://github.com/dynamic-labs/DynamicAuth/issues/1878)) ([8f3f99f](https://github.com/dynamic-labs/DynamicAuth/commit/8f3f99ff4f6d63d5e5ae9193277f35d4c2f99ab6))
+* only set view to wallet list when linking ([#1905](https://github.com/dynamic-labs/DynamicAuth/issues/1905)) ([3413048](https://github.com/dynamic-labs/DynamicAuth/commit/341304832340f2d262e58a59df44691c81572ed6))
+* social sign in ux improvements ([#1898](https://github.com/dynamic-labs/DynamicAuth/issues/1898)) ([cb5a037](https://github.com/dynamic-labs/DynamicAuth/commit/cb5a0376d051a401aadb15c3ad49f0d3301de3e9))
+* **SocialUICard:** adds overlay card with more social options ([#1889](https://github.com/dynamic-labs/DynamicAuth/issues/1889)) ([8ff6920](https://github.com/dynamic-labs/DynamicAuth/commit/8ff6920844b104c4d0679bb23a092eb675297d95))
 
 
 ### Bug Fixes
 
-* use named export from coinbase wallet sdk ([#1903](https://github.com/dynamic-labs/DynamicAuth/issues/1903)) ([5586ef6](https://github.com/dynamic-labs/DynamicAuth/commit/5586ef6f16cc69303a21bcc5a15672498efa4aca))
+* **DYN-2147:** connectWallet calling createVisit multiple times  ([ceba216](https://github.com/dynamic-labs/DynamicAuth/commit/ceba216a82f4073751a210be6e6c8326286e4266))
+* handle undefined or defined cases in new WalletConnector class ([#1914](https://github.com/dynamic-labs/DynamicAuth/issues/1914)) ([869afa6](https://github.com/dynamic-labs/DynamicAuth/commit/869afa67536b26715b4c91a457d8965548f107bd))
+* issue with wallets list being empty after linking new wallet ([#1883](https://github.com/dynamic-labs/DynamicAuth/issues/1883)) ([19bd8cd](https://github.com/dynamic-labs/DynamicAuth/commit/19bd8cd47619b5164fe18235fca02c0a7935780f))
+* make providerResources default to undefined instead of empty array ([#1913](https://github.com/dynamic-labs/DynamicAuth/issues/1913)) ([dbcc5f1](https://github.com/dynamic-labs/DynamicAuth/commit/dbcc5f1874209295464032bdfd3e42d23828e5ab))
+* remove event listeners ([#1910](https://github.com/dynamic-labs/DynamicAuth/issues/1910)) ([b6e1dfd](https://github.com/dynamic-labs/DynamicAuth/commit/b6e1dfd09951e7e97678d5c92648ef2abb548664))
+* use named export from coinbase wallet sdk ([#1903](https://github.com/dynamic-labs/DynamicAuth/issues/1903)) ([cbd106f](https://github.com/dynamic-labs/DynamicAuth/commit/cbd106f065f86a161b082a41023efb2ffd7ab9e0))
+* when linking a new wallet, show sign message if active wallet is not linked ([#1887](https://github.com/dynamic-labs/DynamicAuth/issues/1887)) ([11d86d6](https://github.com/dynamic-labs/DynamicAuth/commit/11d86d6641c8c0b5e48b040d02226585b6d5f1dd))
 
-### [0.16.3](https://github.com/dynamic-labs/DynamicAuth/compare/v0.16.2...v0.16.3) (2023-04-19)
+## [0.17.0-RC.0](https://github.com/dynamic-labs/DynamicAuth/compare/v0.16.1...v0.17.0-RC.0) (2023-04-18)
 
 
 ### Features
 
-* add wallet filter by chain name ([#1878](https://github.com/dynamic-labs/DynamicAuth/issues/1878)) ([3587209](https://github.com/dynamic-labs/DynamicAuth/commit/3587209b9bd7305224dac4ebc91dba85ddddcf99))
-
-### [0.16.2](https://github.com/dynamic-labs/DynamicAuth/compare/v0.16.1...v0.16.2) (2023-04-18)
+* add magic social wallet connector ([#1848](https://github.com/dynamic-labs/DynamicAuth/issues/1848)) ([3f49d22](https://github.com/dynamic-labs/DynamicAuth/commit/3f49d2222ddf90835e3e3d58ac860835f33c9910))
 
 
 ### Bug Fixes
 
-* type=module requires dot cjs files for running with node ([#1890](https://github.com/dynamic-labs/DynamicAuth/issues/1890)) ([83e4e1e](https://github.com/dynamic-labs/DynamicAuth/commit/83e4e1e7956d9bcb3a29c5c147001241ae2a5345))
+* type=module requires dot cjs files for running with node ([#1890](https://github.com/dynamic-labs/DynamicAuth/issues/1890)) ([5751d6e](https://github.com/dynamic-labs/DynamicAuth/commit/5751d6ebd6df376b241e812c5ae860b3a0cf6c80))
 
 ### [0.16.1](https://github.com/dynamic-labs/DynamicAuth/compare/v0.16.0...v0.16.1) (2023-04-15)
 

package/package.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.16.4";
+var version = "0.17.0-RC.1";
 var dependencies = {
 	"react-focus-lock": "^2.9.2",
 	"@dynamic-labs/sdk-api": "0.0.174",
-	"@dynamic-labs/iconic": "^0.1.16",
+	"@dynamic-labs/iconic": "^0.1.17",
 	"@dynamic-labs/wallet-book": "^0.0.11",
 	"@hcaptcha/react-hcaptcha": "~1.4.4",
 	"country-list": "^2.3.0",

package/package.js

@@ -1,8 +1,8 @@
-var version = "0.16.4";
+var version = "0.17.0-RC.1";
 var dependencies = {
 	"react-focus-lock": "^2.9.2",
 	"@dynamic-labs/sdk-api": "0.0.174",
-	"@dynamic-labs/iconic": "^0.1.16",
+	"@dynamic-labs/iconic": "^0.1.17",
 	"@dynamic-labs/wallet-book": "^0.0.11",
 	"@hcaptcha/react-hcaptcha": "~1.4.4",
 	"country-list": "^2.3.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.16.4",
+  "version": "0.17.0-RC.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -9,7 +9,7 @@
   "dependencies": {
     "react-focus-lock": "^2.9.2",
     "@dynamic-labs/sdk-api": "0.0.174",
-    "@dynamic-labs/iconic": "^0.1.16",
+    "@dynamic-labs/iconic": "^0.1.17",
     "@dynamic-labs/wallet-book": "^0.0.11",
     "@hcaptcha/react-hcaptcha": "~1.4.4",
     "country-list": "^2.3.0",
@@ -17,9 +17,9 @@
     "formik": "^2.2.9",
     "qrcode": "^1.5.1",
     "ethers": "^5.7.2",
-    "@dynamic-labs/logger": "0.16.4",
-    "@dynamic-labs/multi-wallet": "0.16.4",
-    "@dynamic-labs/wallet-connector-core": "0.16.4"
+    "@dynamic-labs/logger": "0.17.0-RC.1",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.1",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.1"
   },
   "devDependencies": {
     "semver": "^7.3.8"

package/src/index.cjs

@@ -63,12 +63,12 @@ var pencilAltIcon = require('./lib/shared/assets/pencil-alt-icon.cjs');
 var pencil = require('./lib/shared/assets/pencil.cjs');
 var tooltipArrow = require('./lib/shared/assets/tooltip-arrow.cjs');
 var switchHorizontal = require('./lib/shared/assets/switch-horizontal.cjs');
+var dotsHorizontal = require('./lib/shared/assets/dots-horizontal.cjs');
 var index$2 = require('./lib/shared/consts/index.cjs');
 var logger = require('./lib/shared/logger.cjs');
 require('./lib/utils/constants/colors.cjs');
 var multiWallet = require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/sdk-api');
-var isSameWalletName = require('./lib/utils/functions/isSameWalletName/isSameWalletName.cjs');
 var ShadowDOM = require('./lib/components/ShadowDOM/ShadowDOM.cjs');
 require('./lib/context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -76,8 +76,9 @@ require('react-focus-lock');
 require('./lib/components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('./lib/components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('./lib/components/Transition/OpacityTransition/OpacityTransition.cjs');
-require('./lib/context/ViewContext/ViewContext.cjs');
 require('./lib/config/ApiEndpoint.cjs');
+var isSameWalletName = require('./lib/utils/functions/isSameWalletName/isSameWalletName.cjs');
+require('./lib/context/ViewContext/ViewContext.cjs');
 require('./lib/context/ErrorContext/ErrorContext.cjs');
 require('ethers');
 var useWalletItemActions = require('./lib/utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
@@ -165,6 +166,7 @@ exports.PencilAltIcon = pencilAltIcon.ReactComponent;
 exports.PencilIcon = pencil.ReactComponent;
 exports.TooltipArrow = tooltipArrow.ReactComponent;
 exports.SwitchHorizontalIcon = switchHorizontal.ReactComponent;
+exports.DotsHorizontalIcon = dotsHorizontal.ReactComponent;
 exports.authModalZIndex = index$2.authModalZIndex;
 exports.countryCodes = index$2.countryCodes;
 exports.defaultWalletsForChains = index$2.defaultWalletsForChains;
@@ -178,8 +180,8 @@ Object.defineProperty(exports, 'normalizeWalletName', {
   enumerable: true,
   get: function () { return multiWallet.normalizeWalletName; }
 });
-exports.isSameWalletName = isSameWalletName.isSameWalletName;
 exports.ShadowDOM = ShadowDOM.ShadowDOM;
+exports.isSameWalletName = isSameWalletName.isSameWalletName;
 exports.useWalletItemActions = useWalletItemActions.useWalletItemActions;
 exports.useUserUpdateRequest = useUserUpdateRequest.useUserUpdateRequest;
 exports.DynamicConnectButton = DynamicConnectButton.DynamicConnectButton;

package/src/index.js

@@ -59,12 +59,12 @@ export { ReactComponent as PencilAltIcon } from './lib/shared/assets/pencil-alt-
 export { ReactComponent as PencilIcon } from './lib/shared/assets/pencil.js';
 export { ReactComponent as TooltipArrow } from './lib/shared/assets/tooltip-arrow.js';
 export { ReactComponent as SwitchHorizontalIcon } from './lib/shared/assets/switch-horizontal.js';
+export { ReactComponent as DotsHorizontalIcon } from './lib/shared/assets/dots-horizontal.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';
 export { normalizeWalletName } from '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/sdk-api';
-export { isSameWalletName } from './lib/utils/functions/isSameWalletName/isSameWalletName.js';
 export { ShadowDOM } from './lib/components/ShadowDOM/ShadowDOM.js';
 import './lib/context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -72,8 +72,9 @@ import 'react-focus-lock';
 import './lib/components/Transition/ZoomTransition/ZoomTransition.js';
 import './lib/components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import './lib/components/Transition/OpacityTransition/OpacityTransition.js';
-import './lib/context/ViewContext/ViewContext.js';
 import './lib/config/ApiEndpoint.js';
+export { isSameWalletName } from './lib/utils/functions/isSameWalletName/isSameWalletName.js';
+import './lib/context/ViewContext/ViewContext.js';
 import './lib/context/ErrorContext/ErrorContext.js';
 import 'ethers';
 export { useWalletItemActions } from './lib/utils/hooks/useWalletItemActions/useWalletItemActions.js';

package/src/lib/Main.cjs

@@ -17,18 +17,22 @@ require('./utils/constants/colors.cjs');
 var usePreventPageScroll = require('./shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
 var index$1 = require('./shared/consts/index.cjs');
 var useInternalDynamicContext = require('./context/DynamicContext/useInternalDynamicContext.cjs');
-var isSameWalletName = require('./utils/functions/isSameWalletName/isSameWalletName.cjs');
 require('./components/ShadowDOM/ShadowDOM.cjs');
 require('./context/ThemeContext/ThemeContext.cjs');
 var Portal = require('./components/Portal/Portal.cjs');
 require('react-dom');
 require('./config/ApiEndpoint.cjs');
+var isSameWalletName = require('./utils/functions/isSameWalletName/isSameWalletName.cjs');
 require('./context/ErrorContext/ErrorContext.cjs');
 require('ethers');
 var useWalletItemActions = require('./utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
 require('./utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('./components/IconButton/IconButton.cjs');
+require('./components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('./components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('./components/Transition/OpacityTransition/OpacityTransition.cjs');
 var DynamicAuthLayout = require('./layout/DynamicAuthLayout/DynamicAuthLayout.cjs');
+var SocialRedirectContext = require('./context/SocialRedirectContext/SocialRedirectContext.cjs');
 var useVerifyOnAwaitingSignature = require('./utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.cjs');
 var isSelectedWalletAlreadyConnected = require('./utils/functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.cjs');
 var viewToComponentMap = require('./views/viewToComponentMap.cjs');
@@ -85,9 +89,9 @@ const Main = () => {
         }
     }, [wallets]);
     const showDynamicAuth = showAuthFlow && !isProjectSettingsLoading;
-    return (jsxRuntime.jsx(index.FooterAnimationContextProvider, { children: jsxRuntime.jsx(Portal.Portal, Object.assign({ zIndex: index$1.authModalZIndex, isShown: showDynamicAuth, handleClose: handleClose, withBackdrop: true, transitionEvents: {
-                onUnmount: handleOnPortalUnmount,
-            } }, { children: jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, Object.assign({ transitionProps: { isShown: showDynamicAuth }, appName: appName, onClose: handleClose, walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, projectSettings: projectSettings, newToWeb3WalletChainMap: newToWeb3WalletChainMap, walletConnector: selectedWalletConnector, privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl }, { children: viewToComponentMap.viewToComponentMap[view] })) })) }));
+    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: {
+                    onUnmount: handleOnPortalUnmount,
+                } }, { children: jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, Object.assign({ transitionProps: { isShown: showDynamicAuth }, appName: appName, onClose: handleClose, walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, projectSettings: projectSettings, newToWeb3WalletChainMap: newToWeb3WalletChainMap, walletConnector: selectedWalletConnector, privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl }, { children: viewToComponentMap.viewToComponentMap[view] })) })) }) }));
 };
 
 exports.Main = Main;

package/src/lib/Main.js

@@ -13,18 +13,22 @@ import './utils/constants/colors.js';
 import { usePreventPageScroll } from './shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
 import { authModalZIndex } from './shared/consts/index.js';
 import { useInternalDynamicContext } from './context/DynamicContext/useInternalDynamicContext.js';
-import { isSameWalletName } from './utils/functions/isSameWalletName/isSameWalletName.js';
 import './components/ShadowDOM/ShadowDOM.js';
 import './context/ThemeContext/ThemeContext.js';
 import { Portal } from './components/Portal/Portal.js';
 import 'react-dom';
 import './config/ApiEndpoint.js';
+import { isSameWalletName } from './utils/functions/isSameWalletName/isSameWalletName.js';
 import './context/ErrorContext/ErrorContext.js';
 import 'ethers';
 import { useWalletItemActions } from './utils/hooks/useWalletItemActions/useWalletItemActions.js';
 import './utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import './components/IconButton/IconButton.js';
+import './components/Transition/ZoomTransition/ZoomTransition.js';
+import './components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import './components/Transition/OpacityTransition/OpacityTransition.js';
 import { DynamicAuthLayout } from './layout/DynamicAuthLayout/DynamicAuthLayout.js';
+import { SocialRedirectContextProvider } from './context/SocialRedirectContext/SocialRedirectContext.js';
 import { useVerifyOnAwaitingSignature } from './utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.js';
 import { isSelectedWalletAlreadyConnected } from './utils/functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.js';
 import { viewToComponentMap } from './views/viewToComponentMap.js';
@@ -81,9 +85,9 @@ const Main = () => {
         }
     }, [wallets]);
     const showDynamicAuth = showAuthFlow && !isProjectSettingsLoading;
-    return (jsx(FooterAnimationContextProvider, { children: jsx(Portal, Object.assign({ zIndex: authModalZIndex, isShown: showDynamicAuth, handleClose: handleClose, withBackdrop: true, transitionEvents: {
-                onUnmount: handleOnPortalUnmount,
-            } }, { children: jsx(DynamicAuthLayout, Object.assign({ transitionProps: { isShown: showDynamicAuth }, appName: appName, onClose: handleClose, walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, projectSettings: projectSettings, newToWeb3WalletChainMap: newToWeb3WalletChainMap, walletConnector: selectedWalletConnector, privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl }, { children: viewToComponentMap[view] })) })) }));
+    return (jsx(SocialRedirectContextProvider, { children: jsx(FooterAnimationContextProvider, { children: jsx(Portal, Object.assign({ zIndex: authModalZIndex, isShown: showDynamicAuth, handleClose: handleClose, withBackdrop: true, transitionEvents: {
+                    onUnmount: handleOnPortalUnmount,
+                } }, { children: jsx(DynamicAuthLayout, Object.assign({ transitionProps: { isShown: showDynamicAuth }, appName: appName, onClose: handleClose, walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, projectSettings: projectSettings, newToWeb3WalletChainMap: newToWeb3WalletChainMap, walletConnector: selectedWalletConnector, privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl }, { children: viewToComponentMap[view] })) })) }) }));
 };
 
 export { Main, Main as default };

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

@@ -30,12 +30,12 @@ require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 
 const AnimatePresence = ({ children, animationComponent, }) => {
-    const [isPresent, setIsPresent] = React.useState(true);
+    const [isShown, setIsShown] = React.useState(true);
     const forceRerender = useForceUpdate.useForceUpdate();
     const childrenRef = React.useRef(null);
     const isChildrenPresent = React.useMemo(() => Boolean(children), [children]);
     const prevIsChildrenPresent = usePrevious.usePrevious(isChildrenPresent);
-    const onAnimationEnd = React.useCallback(() => {
+    const onUnmount = React.useCallback(() => {
         childrenRef.current = null;
         forceRerender();
     }, [forceRerender]);
@@ -46,16 +46,16 @@ const AnimatePresence = ({ children, animationComponent, }) => {
     }, [children]);
     React.useEffect(() => {
         if (isChildrenPresent && !prevIsChildrenPresent) {
-            setIsPresent(true);
+            setIsShown(true);
         }
         if (prevIsChildrenPresent && !isChildrenPresent) {
-            setIsPresent(false);
+            setIsShown(false);
         }
     }, [isChildrenPresent, prevIsChildrenPresent]);
     return React.cloneElement(animationComponent, {
         children: children || childrenRef.current,
-        isPresent,
-        onAnimationEnd,
+        isShown,
+        onUnmount,
     });
 };
 

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

@@ -26,12 +26,12 @@ import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 
 const AnimatePresence = ({ children, animationComponent, }) => {
-    const [isPresent, setIsPresent] = useState(true);
+    const [isShown, setIsShown] = useState(true);
     const forceRerender = useForceUpdate();
     const childrenRef = useRef(null);
     const isChildrenPresent = useMemo(() => Boolean(children), [children]);
     const prevIsChildrenPresent = usePrevious(isChildrenPresent);
-    const onAnimationEnd = useCallback(() => {
+    const onUnmount = useCallback(() => {
         childrenRef.current = null;
         forceRerender();
     }, [forceRerender]);
@@ -42,16 +42,16 @@ const AnimatePresence = ({ children, animationComponent, }) => {
     }, [children]);
     useEffect(() => {
         if (isChildrenPresent && !prevIsChildrenPresent) {
-            setIsPresent(true);
+            setIsShown(true);
         }
         if (prevIsChildrenPresent && !isChildrenPresent) {
-            setIsPresent(false);
+            setIsShown(false);
         }
     }, [isChildrenPresent, prevIsChildrenPresent]);
     return cloneElement(animationComponent, {
         children: children || childrenRef.current,
-        isPresent,
-        onAnimationEnd,
+        isShown,
+        onUnmount,
     });
 };
 

package/src/lib/components/AnimatePresence/AnimatePresence.types.d.ts

@@ -1,8 +1,6 @@
 import { FC, PropsWithChildren, ReactElement } from 'react';
-export type AnimationComponentProps<T extends Record<string, unknown> = Record<string, unknown>> = PropsWithChildren<T & {
-    isPresent?: boolean;
-    onAnimationEnd?: () => void;
-}>;
+import { ITransitionOptions } from '../Transition/transition.type';
+export type AnimationComponentProps<T extends Record<string, unknown> = Record<string, unknown>> = PropsWithChildren<T & ITransitionOptions>;
 export type AnimationComponent<T extends Record<string, unknown> = Record<string, unknown>> = FC<AnimationComponentProps<T>>;
 export type AnimatePresenceProps = {
     animationComponent: ReactElement<AnimationComponentProps>;

package/src/lib/components/AnimatePresence/index.d.ts

@@ -1,3 +1,2 @@
 export { AnimatePresence } from './AnimatePresence';
-export * from './animations';
 export type { AnimationComponent } from './AnimatePresence.types';

package/src/lib/components/IconListTile/IconListTile.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var ListTile = require('../ListTile/ListTile.cjs');
+
+const IconListTile = (_a) => {
+    var { children, className } = _a, props = _tslib.__rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx(ListTile.ListTile, Object.assign({}, props, { className: classNames.classNames(className, 'icon-list-tile') }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'icon-list-tile--children' }, { children: children })) })));
+};
+
+exports.IconListTile = IconListTile;

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

@@ -0,0 +1,2 @@
+import { ListTileComponent } from '../ListTile';
+export declare const IconListTile: ListTileComponent;

package/src/lib/components/IconListTile/IconListTile.js

@@ -0,0 +1,11 @@
+import { __rest } from '../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { ListTile } from '../ListTile/ListTile.js';
+
+const IconListTile = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (jsx(ListTile, Object.assign({}, props, { className: classNames(className, 'icon-list-tile') }, { children: jsx("div", Object.assign({ className: 'icon-list-tile--children' }, { children: children })) })));
+};
+
+export { IconListTile };

package/src/lib/components/IconListTile/index.d.ts

@@ -0,0 +1 @@
+export { IconListTile } from './IconListTile';

package/src/lib/components/ListTile/ListTile.cjs

@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: children })) })), trailing] })));
+const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
 
 exports.ListTile = ListTile;

package/src/lib/components/ListTile/ListTile.js

@@ -2,6 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Typography } from '../Typography/Typography.js';
 
-const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: children })) })), trailing] })));
+const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
 
 export { ListTile };

package/src/lib/components/ListTile/index.d.ts

@@ -1 +1,2 @@
 export { ListTile } from './ListTile';
+export type { ListTileComponent } from './ListTile.types';

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.cjs

@@ -5,13 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
-var VerticalDrawerAnimation = require('../AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.cjs');
 var Typography = require('../Typography/Typography.cjs');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
 
 const typographyColor = {
     error: 'error-1',
 };
-const ModalHeaderBanner = ({ message, type = 'error', }) => (jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerAnimation.VerticalDrawerAnimation, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('modal-header-banner', {
+const ModalHeaderBanner = ({ message, type = 'error', }) => (jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('modal-header-banner', {
             'modal-header-banner__error': type === 'error',
         }) }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: true }, { children: message })) }))) })));
 

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.js

@@ -1,13 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
-import { VerticalDrawerAnimation } from '../AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.js';
 import { Typography } from '../Typography/Typography.js';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition/VerticalDrawerTransition.js';
 
 const typographyColor = {
     error: 'error-1',
 };
-const ModalHeaderBanner = ({ message, type = 'error', }) => (jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerAnimation, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsx("div", Object.assign({ className: classNames('modal-header-banner', {
+const ModalHeaderBanner = ({ message, type = 'error', }) => (jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsx("div", Object.assign({ className: classNames('modal-header-banner', {
             'modal-header-banner__error': type === 'error',
         }) }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: true }, { children: message })) }))) })));
 

package/src/lib/components/OverlayCard/OverlayCard.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+var SlideInUpTransition = require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../config/ApiEndpoint.cjs');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../context/ViewContext/ViewContext.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('../ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('react-focus-lock');
+require('../IconButton/IconButton.cjs');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var OverlayCard_context = require('./OverlayCard.context.cjs');
+
+const noContextError = new Error('OverlayCard is not a child of OverlayCardTarget, please add OverlayCardTarget where the card should be displayed');
+const OverlayCard = ({ isOpen, children, onClickOverlay, }) => {
+    const context = React.useContext(OverlayCard_context.overlayCardContext);
+    if (!context) {
+        throw noContextError;
+    }
+    const { portal } = context;
+    if (!portal)
+        return null;
+    return reactDom.createPortal(jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(OpacityTransition.OpacityTransition, {}) }, { children: isOpen && (jsxRuntime.jsx("div", { onClick: onClickOverlay, className: 'overlay-card--overlay' })) })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(SlideInUpTransition.SlideInUpTransition, {}) }, { children: isOpen && (jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(OpacityTransition.OpacityTransition, {}) }, { children: isOpen && jsxRuntime.jsx("div", Object.assign({ className: 'overlay-card--content' }, { children: children })) }))) }))] }), portal);
+};
+
+exports.OverlayCard = OverlayCard;
+exports.noContextError = noContextError;

package/src/lib/components/OverlayCard/OverlayCard.context.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const overlayCardContext = React.createContext(false);
+
+exports.overlayCardContext = overlayCardContext;

package/src/lib/components/OverlayCard/OverlayCard.context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type OverlayCardContext = {
+    portal: HTMLDivElement | null;
+};
+export declare const overlayCardContext: import("react").Context<OverlayCardContext>;
+export {};

package/src/lib/components/OverlayCard/OverlayCard.context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const overlayCardContext = createContext(false);
+
+export { overlayCardContext };

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

@@ -0,0 +1,8 @@
+import { FC, MouseEventHandler, PropsWithChildren } from 'react';
+type OverlayCardProps = {
+    isOpen: boolean;
+    onClickOverlay?: MouseEventHandler<HTMLDivElement>;
+};
+export declare const noContextError: Error;
+export declare const OverlayCard: FC<PropsWithChildren<OverlayCardProps>>;
+export {};

package/src/lib/components/OverlayCard/OverlayCard.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import { SlideInUpTransition } from '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../config/ApiEndpoint.js';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../context/ViewContext/ViewContext.js';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import 'react-focus-lock';
+import '../IconButton/IconButton.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { overlayCardContext } from './OverlayCard.context.js';
+
+const noContextError = new Error('OverlayCard is not a child of OverlayCardTarget, please add OverlayCardTarget where the card should be displayed');
+const OverlayCard = ({ isOpen, children, onClickOverlay, }) => {
+    const context = useContext(overlayCardContext);
+    if (!context) {
+        throw noContextError;
+    }
+    const { portal } = context;
+    if (!portal)
+        return null;
+    return createPortal(jsxs("div", { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(OpacityTransition, {}) }, { children: isOpen && (jsx("div", { onClick: onClickOverlay, className: 'overlay-card--overlay' })) })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(SlideInUpTransition, {}) }, { children: isOpen && (jsx(AnimatePresence, Object.assign({ animationComponent: jsx(OpacityTransition, {}) }, { children: isOpen && jsx("div", Object.assign({ className: 'overlay-card--content' }, { children: children })) }))) }))] }), portal);
+};
+
+export { OverlayCard, noContextError };

package/src/lib/components/OverlayCard/OverlayCardTarget.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var OverlayCard_context = require('./OverlayCard.context.cjs');
+
+const OverlayCardTarget = ({ children }) => {
+    const { Provider } = OverlayCard_context.overlayCardContext;
+    const [portal, setPortal] = React.useState(null);
+    return (jsxRuntime.jsxs(Provider, Object.assign({ value: {
+            portal,
+        } }, { children: [children, jsxRuntime.jsx("div", { ref: setPortal })] })));
+};
+
+exports.OverlayCardTarget = OverlayCardTarget;

package/src/lib/components/OverlayCard/OverlayCardTarget.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const OverlayCardTarget: FC<PropsWithChildren>;

package/src/lib/components/OverlayCard/OverlayCardTarget.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { overlayCardContext } from './OverlayCard.context.js';
+
+const OverlayCardTarget = ({ children }) => {
+    const { Provider } = overlayCardContext;
+    const [portal, setPortal] = useState(null);
+    return (jsxs(Provider, Object.assign({ value: {
+            portal,
+        } }, { children: [children, jsx("div", { ref: setPortal })] })));
+};
+
+export { OverlayCardTarget };