@dynamic-labs/sdk-react-core 0.18.0-RC.5 → 0.18.0-RC.7

package/CHANGELOG.md

@@ -1,4 +1,35 @@
 
+## [0.18.0-RC.7](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.6...v0.18.0-RC.7) (2023-06-23)
+
+
+### Features
+
+* add bridge connect button ([#2399](https://github.com/dynamic-labs/DynamicAuth/issues/2399)) ([6987eea](https://github.com/dynamic-labs/DynamicAuth/commit/6987eeae8f49a5d077de6c4343b83ecbb1fc8b89))
+* add useTimeout, useInterval and useIsomorphicLayoutEffect hooks ([#2418](https://github.com/dynamic-labs/DynamicAuth/issues/2418)) ([3ed8595](https://github.com/dynamic-labs/DynamicAuth/commit/3ed859526a6ec982b61a4335a9a63512d0e631e3))
+* **DYN-2411:** WalletLockedView when user has valid jwt and all of their wallets are disconnected ([#2273](https://github.com/dynamic-labs/DynamicAuth/issues/2273)) ([2e6d0d6](https://github.com/dynamic-labs/DynamicAuth/commit/2e6d0d6ed734eb628bd05b6ad64560c496ad915f))
+* **DYN-2598:** add powered by, update copy and paddings in the select wallet chain layout ([#2391](https://github.com/dynamic-labs/DynamicAuth/issues/2391)) ([f2a7924](https://github.com/dynamic-labs/DynamicAuth/commit/f2a79241dcf1ea5720242c2cc65a6fcd077ea0e9))
+* **solana:** add logic to get network based on genesis hash ([#2402](https://github.com/dynamic-labs/DynamicAuth/issues/2402)) ([b76c626](https://github.com/dynamic-labs/DynamicAuth/commit/b76c62660bae334aef84678db5d8349a3d575630))
+
+
+### Bug Fixes
+
+* better handling of the CB wallet provider ([#2376](https://github.com/dynamic-labs/DynamicAuth/issues/2376)) ([720e510](https://github.com/dynamic-labs/DynamicAuth/commit/720e510d0793c530d06db5eaa1d5a7be608703bb))
+* clear AUTH_USER when there is no AUTH_TOKEN on LS ([#2423](https://github.com/dynamic-labs/DynamicAuth/issues/2423)) ([bf1e1c0](https://github.com/dynamic-labs/DynamicAuth/commit/bf1e1c0f8a7a7a852c67ef363613deecacdad92e))
+* set auth mode to connect-and-sign when verifiying wallet ([#2369](https://github.com/dynamic-labs/DynamicAuth/issues/2369)) ([666aa69](https://github.com/dynamic-labs/DynamicAuth/commit/666aa6954d19551a354af933a69ab8eeee7a98b5))
+* use getAuthTokenValue in initExpirationTime ([#2422](https://github.com/dynamic-labs/DynamicAuth/issues/2422)) ([fa8ff78](https://github.com/dynamic-labs/DynamicAuth/commit/fa8ff78d64421ca4447794fe9af53c175adf94c3))
+
+## [0.18.0-RC.6](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.5...v0.18.0-RC.6) (2023-06-20)
+
+
+### Features
+
+* add export keys option for magic wallets ([#2377](https://github.com/dynamic-labs/DynamicAuth/issues/2377)) ([6b40f53](https://github.com/dynamic-labs/DynamicAuth/commit/6b40f538f207691b54fe2f245ed6018c467b83fe))
+
+
+### Bug Fixes
+
+* add polyfill for css layers ([#2386](https://github.com/dynamic-labs/DynamicAuth/issues/2386)) ([3d489f5](https://github.com/dynamic-labs/DynamicAuth/commit/3d489f59d676864134a94d031697e0f83fc0d742))
+
 ## [0.18.0-RC.5](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.4...v0.18.0-RC.5) (2023-06-20)
 
 

package/package.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.0-RC.5";
+var version = "0.18.0-RC.7";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.218",
+	"@dynamic-labs/sdk-api": "0.0.222",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	yup: "0.32.11",

package/package.js

@@ -1,8 +1,8 @@
-var version = "0.18.0-RC.5";
+var version = "0.18.0-RC.7";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.218",
+	"@dynamic-labs/sdk-api": "0.0.222",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	yup: "0.32.11",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.18.0-RC.5",
+  "version": "0.18.0-RC.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -9,20 +9,20 @@
   "dependencies": {
     "react-focus-lock": "2.9.2",
     "@dynamic-labs/iconic": "0.1.23",
-    "@dynamic-labs/sdk-api": "0.0.218",
+    "@dynamic-labs/sdk-api": "0.0.222",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
     "yup": "0.32.11",
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.18.0-RC.5",
-    "@dynamic-labs/multi-wallet": "0.18.0-RC.5",
-    "@dynamic-labs/rpc-providers": "0.18.0-RC.5",
-    "@dynamic-labs/types": "0.18.0-RC.5",
-    "@dynamic-labs/utils": "0.18.0-RC.5",
-    "@dynamic-labs/wallet-book": "0.18.0-RC.5",
-    "@dynamic-labs/wallet-connector-core": "0.18.0-RC.5"
+    "@dynamic-labs/logger": "0.18.0-RC.7",
+    "@dynamic-labs/multi-wallet": "0.18.0-RC.7",
+    "@dynamic-labs/rpc-providers": "0.18.0-RC.7",
+    "@dynamic-labs/types": "0.18.0-RC.7",
+    "@dynamic-labs/utils": "0.18.0-RC.7",
+    "@dynamic-labs/wallet-book": "0.18.0-RC.7",
+    "@dynamic-labs/wallet-connector-core": "0.18.0-RC.7"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/index.cjs

@@ -13,6 +13,7 @@ var DynamicNav = require('./lib/widgets/DynamicWidget/components/DynamicNav/Dyna
 var DynamicUserProfile = require('./lib/widgets/DynamicWidget/components/DynamicUserProfile/DynamicUserProfile.cjs');
 var FundingWidget = require('./lib/widgets/FundingWidget/FundingWidget.cjs');
 var DynamicBridgeWidget = require('./lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.cjs');
+var DynamicBridgeConnectButton = require('./lib/widgets/DynamicBridgeWidget/components/DynamicBridgeConnectButton/DynamicBridgeConnectButton.cjs');
 require('react/jsx-runtime');
 require('react');
 var classNames = require('./lib/utils/functions/classNames/classNames.cjs');
@@ -60,6 +61,7 @@ var footerInfoIcon = require('./lib/shared/assets/footer-info-icon.cjs');
 var footerEyeIcon = require('./lib/shared/assets/footer-eye-icon.cjs');
 var footerGasIcon = require('./lib/shared/assets/footer-gas-icon.cjs');
 var footerKeyIcon = require('./lib/shared/assets/footer-key-icon.cjs');
+var key = require('./lib/shared/assets/key.cjs');
 var puzzle = require('./lib/shared/assets/puzzle.cjs');
 var link = require('./lib/shared/assets/link.cjs');
 var externalLink = require('./lib/shared/assets/externalLink.cjs');
@@ -71,6 +73,7 @@ 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 send = require('./lib/shared/assets/send.cjs');
+var questionMark = require('./lib/shared/assets/question-mark.cjs');
 var index$2 = require('./lib/shared/consts/index.cjs');
 var logger = require('./lib/shared/logger.cjs');
 require('./lib/utils/constants/colors.cjs');
@@ -136,6 +139,7 @@ exports.DynamicNav = DynamicNav.ShadowedDynamicNav;
 exports.DynamicUserProfile = DynamicUserProfile.ShadowedDynamicUserProfile;
 exports.FundingWidget = FundingWidget.FundingWidget;
 exports.DynamicBridgeWidget = DynamicBridgeWidget.DynamicBridgeWidget;
+exports.DynamicBridgeConnectButton = DynamicBridgeConnectButton.DynamicBridgeConnectButton;
 exports.classNames = classNames.classNames;
 exports.decodeJwt = decodeJwt.decodeJwt;
 exports.validateType = validateType.validateType;
@@ -181,6 +185,7 @@ exports.InfoIcon = footerInfoIcon.ReactComponent;
 exports.EyeIcon = footerEyeIcon.ReactComponent;
 exports.GasIcon = footerGasIcon.ReactComponent;
 exports.KeyIcon = footerKeyIcon.ReactComponent;
+exports.KeyOutlineIcon = key.ReactComponent;
 exports.PuzzleIcon = puzzle.ReactComponent;
 exports.LinkIcon = link.ReactComponent;
 exports.ExternalLinkIcon = externalLink.ReactComponent;
@@ -192,6 +197,7 @@ exports.TooltipArrow = tooltipArrow.ReactComponent;
 exports.SwitchHorizontalIcon = switchHorizontal.ReactComponent;
 exports.DotsHorizontalIcon = dotsHorizontal.ReactComponent;
 exports.SendIcon = send.ReactComponent;
+exports.QuestionMarkIcon = questionMark.ReactComponent;
 exports.authModalZIndex = index$2.authModalZIndex;
 exports.countryCodes = index$2.countryCodes;
 exports.defaultWalletsForChains = index$2.defaultWalletsForChains;

package/src/index.js

@@ -9,6 +9,7 @@ export { ShadowedDynamicNav as DynamicNav } from './lib/widgets/DynamicWidget/co
 export { ShadowedDynamicUserProfile as DynamicUserProfile } from './lib/widgets/DynamicWidget/components/DynamicUserProfile/DynamicUserProfile.js';
 export { FundingWidget } from './lib/widgets/FundingWidget/FundingWidget.js';
 export { DynamicBridgeWidget } from './lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.js';
+export { DynamicBridgeConnectButton } from './lib/widgets/DynamicBridgeWidget/components/DynamicBridgeConnectButton/DynamicBridgeConnectButton.js';
 import 'react/jsx-runtime';
 import 'react';
 export { classNames } from './lib/utils/functions/classNames/classNames.js';
@@ -56,6 +57,7 @@ export { ReactComponent as InfoIcon } from './lib/shared/assets/footer-info-icon
 export { ReactComponent as EyeIcon } from './lib/shared/assets/footer-eye-icon.js';
 export { ReactComponent as GasIcon } from './lib/shared/assets/footer-gas-icon.js';
 export { ReactComponent as KeyIcon } from './lib/shared/assets/footer-key-icon.js';
+export { ReactComponent as KeyOutlineIcon } from './lib/shared/assets/key.js';
 export { ReactComponent as PuzzleIcon } from './lib/shared/assets/puzzle.js';
 export { ReactComponent as LinkIcon } from './lib/shared/assets/link.js';
 export { ReactComponent as ExternalLinkIcon } from './lib/shared/assets/externalLink.js';
@@ -67,6 +69,7 @@ export { ReactComponent as TooltipArrow } from './lib/shared/assets/tooltip-arro
 export { ReactComponent as SwitchHorizontalIcon } from './lib/shared/assets/switch-horizontal.js';
 export { ReactComponent as DotsHorizontalIcon } from './lib/shared/assets/dots-horizontal.js';
 export { ReactComponent as SendIcon } from './lib/shared/assets/send.js';
+export { ReactComponent as QuestionMarkIcon } from './lib/shared/assets/question-mark.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';

package/src/lib/Main.cjs

@@ -51,7 +51,7 @@ var viewToComponentMap = require('./views/viewToComponentMap.cjs');
 require('./main.global.cjs');
 
 const Main = () => {
-    const { selectedWalletConnector, appName, connectedWallets, isProjectSettingsLoading, projectSettings, privacyPolicyUrl, setShowAuthFlow, showAuthFlow, termsOfServiceUrl, newToWeb3WalletChainMap, wallets, clearStatesOnBackClick, user, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { selectedWalletConnector, connectedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, } = useInternalDynamicContext.useInternalDynamicContext();
     const { view, goToInitialView } = ViewContext.useViewContext();
     const { setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
     usePreventPageScroll.usePreventPageScroll(showAuthFlow);
@@ -106,7 +106,7 @@ const Main = () => {
     const showDynamicAuth = showAuthFlow && !isProjectSettingsLoading;
     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] })) })) }) }));
+                } }, { children: jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, Object.assign({ transitionProps: { isShown: showDynamicAuth }, onClose: handleClose, projectSettings: projectSettings, walletConnector: selectedWalletConnector }, { children: viewToComponentMap.viewToComponentMap[view] })) })) }) }));
 };
 
 exports.Main = Main;

package/src/lib/Main.js

@@ -47,7 +47,7 @@ import { viewToComponentMap } from './views/viewToComponentMap.js';
 import './main.global.js';
 
 const Main = () => {
-    const { selectedWalletConnector, appName, connectedWallets, isProjectSettingsLoading, projectSettings, privacyPolicyUrl, setShowAuthFlow, showAuthFlow, termsOfServiceUrl, newToWeb3WalletChainMap, wallets, clearStatesOnBackClick, user, } = useInternalDynamicContext();
+    const { selectedWalletConnector, connectedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, } = useInternalDynamicContext();
     const { view, goToInitialView } = useViewContext();
     const { setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
     usePreventPageScroll(showAuthFlow);
@@ -102,7 +102,7 @@ const Main = () => {
     const showDynamicAuth = showAuthFlow && !isProjectSettingsLoading;
     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] })) })) }) }));
+                } }, { children: jsx(DynamicAuthLayout, Object.assign({ transitionProps: { isShown: showDynamicAuth }, onClose: handleClose, projectSettings: projectSettings, walletConnector: selectedWalletConnector }, { children: viewToComponentMap[view] })) })) }) }));
 };
 
 export { Main, Main as default };

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

@@ -42,7 +42,7 @@ require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 
-const AccordionItem = ({ children, className = '', isOpen, dataTestId, }) => {
+const AccordionItem = ({ children, className = '', isOpen, dataTestId, dimOnHide = false, }) => {
     const childRef = React.useRef(null);
     const lastValidChildHeight = React.useRef();
     const [childEntry] = useResizeObserver.useResizeObserver(childRef);
@@ -59,9 +59,11 @@ const AccordionItem = ({ children, className = '', isOpen, dataTestId, }) => {
             lastValidChildHeight.current = childHeight;
         }
     }, [childEntry]);
-    return (jsxRuntime.jsx("div", Object.assign({ "data-testid": dataTestId, style: { maxHeight }, className: classNames.classNames(className, 'accordion-item', {
+    return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": dataTestId, style: { maxHeight }, className: classNames.classNames(className, 'accordion-item', {
             'accordion-item--full-height': Boolean(maxHeight),
-        }) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: childRef }, { children: children })) })));
+        }) }, { children: [dimOnHide && (jsxRuntime.jsx("div", { "data-testid": 'accordion-item-curtain', className: classNames.classNames('accordion-item__curtain', {
+                    'accordion-item__curtain--dimmed': !isOpen,
+                }) })), jsxRuntime.jsx("div", Object.assign({ ref: childRef }, { children: children }))] })));
 };
 
 exports.AccordionItem = AccordionItem;

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

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo, useEffect } from 'react';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import '@dynamic-labs/utils';
@@ -38,7 +38,7 @@ import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 
-const AccordionItem = ({ children, className = '', isOpen, dataTestId, }) => {
+const AccordionItem = ({ children, className = '', isOpen, dataTestId, dimOnHide = false, }) => {
     const childRef = useRef(null);
     const lastValidChildHeight = useRef();
     const [childEntry] = useResizeObserver(childRef);
@@ -55,9 +55,11 @@ const AccordionItem = ({ children, className = '', isOpen, dataTestId, }) => {
             lastValidChildHeight.current = childHeight;
         }
     }, [childEntry]);
-    return (jsx("div", Object.assign({ "data-testid": dataTestId, style: { maxHeight }, className: classNames(className, 'accordion-item', {
+    return (jsxs("div", Object.assign({ "data-testid": dataTestId, style: { maxHeight }, className: classNames(className, 'accordion-item', {
             'accordion-item--full-height': Boolean(maxHeight),
-        }) }, { children: jsx("div", Object.assign({ ref: childRef }, { children: children })) })));
+        }) }, { children: [dimOnHide && (jsx("div", { "data-testid": 'accordion-item-curtain', className: classNames('accordion-item__curtain', {
+                    'accordion-item__curtain--dimmed': !isOpen,
+                }) })), jsx("div", Object.assign({ ref: childRef }, { children: children }))] })));
 };
 
 export { AccordionItem };

package/src/lib/components/Accordion/components/AccordionItem/AccordionItem.types.d.ts

@@ -3,5 +3,6 @@ export type AccordionItemProps = {
     className?: string;
     dataTestId?: string;
     isOpen: boolean;
+    dimOnHide?: boolean;
 };
 export type AccordionItemComponent = FC<PropsWithChildren<AccordionItemProps>>;

package/src/lib/components/DynamicConnectButton/DynamicConnectButton.cjs

@@ -7,10 +7,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
-var classNames = require('../../utils/functions/classNames/classNames.cjs');
-var Button = require('../Button/Button.cjs');
+var ConnectButton = require('./components/ConnectButton.cjs');
 
-const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsxRuntime.jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames.classNames('dynamic-connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
 const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName = '', children, }) => {
     const { isProjectSettingsLoading, setShowAuthFlow, setSelectedWalletConnector, loginWithEmail, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
@@ -34,8 +32,7 @@ const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName =
         setShowAuthFlow,
         setView,
     ]);
-    return (jsxRuntime.jsx(ConnectButton, Object.assign({ isLoading: isProjectSettingsLoading, isActive: didUserClick, onClick: handleOnClick, buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName }, { children: children })));
+    return (jsxRuntime.jsx(ConnectButton.ConnectButton, Object.assign({ isLoading: isProjectSettingsLoading, isActive: didUserClick, onClick: handleOnClick, buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName }, { children: children })));
 };
 
-exports.ConnectButton = ConnectButton;
 exports.DynamicConnectButton = DynamicConnectButton;

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

@@ -1,12 +1,4 @@
-import { FC, PropsWithChildren, ReactNode } from 'react';
-export type ConnectButtonProps = {
-    buttonClassName?: string;
-    buttonContainerClassName?: string;
-    isLoading?: boolean;
-    isActive?: boolean;
-    onClick?: () => void;
-};
-export declare const ConnectButton: FC<PropsWithChildren<ConnectButtonProps>>;
+import { ReactNode } from 'react';
 type Props = {
     buttonClassName?: string;
     buttonContainerClassName?: string;

package/src/lib/components/DynamicConnectButton/DynamicConnectButton.js

@@ -3,10 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
-import { classNames } from '../../utils/functions/classNames/classNames.js';
-import { Button } from '../Button/Button.js';
+import { ConnectButton } from './components/ConnectButton.js';
 
-const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsx(Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames('dynamic-connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
 const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName = '', children, }) => {
     const { isProjectSettingsLoading, setShowAuthFlow, setSelectedWalletConnector, loginWithEmail, } = useInternalDynamicContext();
     const { setView } = useViewContext();
@@ -33,4 +31,4 @@ const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName =
     return (jsx(ConnectButton, Object.assign({ isLoading: isProjectSettingsLoading, isActive: didUserClick, onClick: handleOnClick, buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName }, { children: children })));
 };
 
-export { ConnectButton, DynamicConnectButton };
+export { DynamicConnectButton };

package/src/lib/components/DynamicConnectButton/components/ConnectButton.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../../Button/Button.cjs');
+var classNames = require('../../../utils/functions/classNames/classNames.cjs');
+
+const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsxRuntime.jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames.classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
+
+exports.ConnectButton = ConnectButton;

package/src/lib/components/DynamicConnectButton/components/ConnectButton.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+export type ConnectButtonProps = {
+    buttonClassName?: string;
+    buttonContainerClassName?: string;
+    isLoading?: boolean;
+    isActive?: boolean;
+    onClick?: () => void;
+};
+export declare const ConnectButton: FC<PropsWithChildren<ConnectButtonProps>>;

package/src/lib/components/DynamicConnectButton/components/ConnectButton.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../../Button/Button.js';
+import { classNames } from '../../../utils/functions/classNames/classNames.js';
+
+const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsx(Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
+
+export { ConnectButton };

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

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from 'react';
 export type ModalHeaderProps = {
     alignContent?: 'bottom';
     children?: ReactNode;
-    leading?: ReactNode;
+    leading?: ReactElement | ReactElement[];
     positionAbsolute?: boolean;
     trailing?: ReactNode;
 };

package/src/lib/components/OTPVerificationView/OTPVerificationView.cjs

@@ -44,7 +44,6 @@ require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secondar
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var TosAndPp = require('../TosAndPp/TosAndPp.cjs');
 var PinField = require('../PinField/PinField.cjs');
 var ModalHeaderBanner = require('../ModalHeaderBanner/ModalHeaderBanner.cjs');
 var shortenEmail = require('../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
@@ -53,9 +52,9 @@ require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }))] })));
 };
 
 exports.OTPVerificationView = OTPVerificationView;

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

@@ -9,8 +9,6 @@ type OtpVerificationLayoutProps = {
     onClickEditEmail?: MouseEventHandler<HTMLButtonElement>;
     onPinChange?: (value: string) => void;
     onPinComplete: (value: string) => void;
-    privacyPolicyUrl?: string;
-    termsOfServiceUrl?: string;
 };
 export declare const OTPVerificationView: FC<OtpVerificationLayoutProps>;
 export {};

package/src/lib/components/OTPVerificationView/OTPVerificationView.js

@@ -40,7 +40,6 @@ import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secondary
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { TosAndPp } from '../TosAndPp/TosAndPp.js';
 import { PinField } from '../PinField/PinField.js';
 import { ModalHeaderBanner } from '../ModalHeaderBanner/ModalHeaderBanner.js';
 import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
@@ -49,9 +48,9 @@ import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
     const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsx(PoweredByDynamic, {})] }))] })));
+    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsx(PoweredByDynamic, {}) }))] })));
 };
 
 export { OTPVerificationView };

package/src/lib/components/SelectWalletChainLayout/SelectWalletChainLayout.cjs

@@ -5,7 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var Typography = require('../Typography/Typography.cjs');
 var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 
-const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains, so select your preferred chain to connect with." })), jsxRuntime.jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] }))] }));
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains. Select which chain you'd like to connect to" })), jsxRuntime.jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
 
 exports.SelectWalletChainLayout = SelectWalletChainLayout;

package/src/lib/components/SelectWalletChainLayout/SelectWalletChainLayout.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 
-const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxs("div", { children: [jsx(IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains, so select your preferred chain to connect with." })), jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] }))] }));
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxs("div", { children: [jsx(IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains. Select which chain you'd like to connect to" })), jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] })), jsx(PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
 
 export { SelectWalletChainLayout };

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -60,7 +60,7 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
             const childrenBounding = childrenRef.current.getBoundingClientRect();
             setVector([
                 childrenBounding.left + childrenBounding.width / 2,
-                childrenBounding.top,
+                childrenBounding.top - 4, //add 4px margin over the children
             ]);
         }
     }, []);

package/src/lib/components/Tooltip/Tooltip.js

@@ -56,7 +56,7 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
             const childrenBounding = childrenRef.current.getBoundingClientRect();
             setVector([
                 childrenBounding.left + childrenBounding.width / 2,
-                childrenBounding.top,
+                childrenBounding.top - 4, //add 4px margin over the children
             ]);
         }
     }, []);

package/src/lib/components/TosAndPp/TosAndPp.cjs

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/utils');
+var isConnectOnly = require('../../utils/hooks/authenticationHooks/helpers/isConnectOnly.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, mode, }) => {
-    if (!privacyPolicyUrl || !termsOfServiceUrl) {
-        return null;
-    }
-    return (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_mini', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", mode, ", you agree to our\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Services" })), "\u00A0&\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, }) => {
+    const { user, authMode } = useInternalDynamicContext.useInternalDynamicContext();
+    return (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", isConnectOnly.isConnectOnly(user, authMode) ? 'connecting' : 'logging in', ", you agree to", jsxRuntime.jsx("br", {}), "our\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Services" })), "\u00A0&\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
 };
 
 exports.TosAndPp = TosAndPp;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 type Props = {
-    mode: 'connecting' | 'signing' | 'logging in';
-    privacyPolicyUrl?: string;
-    termsOfServiceUrl?: string;
+    privacyPolicyUrl: string;
+    termsOfServiceUrl: string;
 };
-export declare const TosAndPp: ({ privacyPolicyUrl, termsOfServiceUrl, mode, }: Props) => JSX.Element | null;
+export declare const TosAndPp: ({ privacyPolicyUrl, termsOfServiceUrl, }: Props) => JSX.Element | null;
 export {};

package/src/lib/components/TosAndPp/TosAndPp.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/utils';
+import { isConnectOnly } from '../../utils/hooks/authenticationHooks/helpers/isConnectOnly.js';
 import { Typography } from '../Typography/Typography.js';
 
-const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, mode, }) => {
-    if (!privacyPolicyUrl || !termsOfServiceUrl) {
-        return null;
-    }
-    return (jsxs(Typography, Object.assign({ variant: 'body_mini', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", mode, ", you agree to our\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Services" })), "\u00A0&\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, }) => {
+    const { user, authMode } = useInternalDynamicContext();
+    return (jsxs(Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", isConnectOnly(user, authMode) ? 'connecting' : 'logging in', ", you agree to", jsx("br", {}), "our\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Services" })), "\u00A0&\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
 };
 
 export { TosAndPp };