@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/layout/DynamicAuthLayout/FooterContent/EmptyFooterContent/empty-footer-content.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+/* istanbul ignore next */
+const EmptyFooterContent = () => (jsxRuntime.jsx("div", { "data-testid": 'empty-footer-content' }));
+
+exports.EmptyFooterContent = EmptyFooterContent;

package/src/lib/layout/DynamicAuthLayout/FooterContent/EmptyFooterContent/empty-footer-content.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EmptyFooterContent: () => JSX.Element;

package/src/lib/layout/DynamicAuthLayout/FooterContent/EmptyFooterContent/empty-footer-content.es.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+
+/* istanbul ignore next */
+const EmptyFooterContent = () => (jsx("div", { "data-testid": 'empty-footer-content' }));
+
+export { EmptyFooterContent };

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/Item/Item.cjs.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var Typography = require('../../../../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../../context/ViewContext/ViewContext.cjs.js');
+require('../../../../../utils/constants/colors.cjs.js');
+require('../../../../../shared/consts/index.cjs.js');
+require('../../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../../config/ApiEndpoint.cjs.js');
+require('../../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../../../components/IconButton/IconButton.cjs.js');
+
+const Item = ({ heading, StartIcon, EndIcon, message, url, }) => (jsxRuntime.jsxs("a", Object.assign({ className: 'footer-buttons-item', href: url, rel: 'noopener noreferrer', target: '_blank' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'footer-buttons-item__icon--left' }, { children: jsxRuntime.jsx(StartIcon, {}) })), jsxRuntime.jsxs("div", Object.assign({ className: 'footer-buttons-item__typography' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h2', weight: 'regular', color: 'primary', variant: 'body_normal' }, { children: heading })), message && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'p', weight: 'regular', color: 'secondary' }, { children: message })))] })), EndIcon && jsxRuntime.jsx(EndIcon, { style: { height: '1.5rem', width: '1.5rem' } })] })));
+
+exports.Item = Item;

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/Item/Item.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Icon } from '../../../../../shared';
+interface Props {
+    EndIcon?: Icon;
+    StartIcon: Icon;
+    heading: string;
+    message?: string;
+    url: string;
+}
+export declare const Item: React.FC<Props>;
+export {};

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/Item/Item.es.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Typography } from '../../../../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../../context/ViewContext/ViewContext.es.js';
+import '../../../../../utils/constants/colors.es.js';
+import '../../../../../shared/consts/index.es.js';
+import '../../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../../config/ApiEndpoint.es.js';
+import '../../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../../context/MockContext/MockContext.es.js';
+import '../../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../../components/IconButton/IconButton.es.js';
+
+const Item = ({ heading, StartIcon, EndIcon, message, url, }) => (jsxs("a", Object.assign({ className: 'footer-buttons-item', href: url, rel: 'noopener noreferrer', target: '_blank' }, { children: [jsx("div", Object.assign({ className: 'footer-buttons-item__icon--left' }, { children: jsx(StartIcon, {}) })), jsxs("div", Object.assign({ className: 'footer-buttons-item__typography' }, { children: [jsx(Typography, Object.assign({ as: 'h2', weight: 'regular', color: 'primary', variant: 'body_normal' }, { children: heading })), message && (jsx(Typography, Object.assign({ as: 'p', weight: 'regular', color: 'secondary' }, { children: message })))] })), EndIcon && jsx(EndIcon, { style: { height: '1.5rem', width: '1.5rem' } })] })));
+
+export { Item };

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/Item/index.d.ts

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

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/NewToWeb3WalletItem/NewToWeb3WalletItem.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var WalletListItem = require('../../../../../views/WalletList/WalletListItem/WalletListItem.cjs.js');
+
+const NewToWeb3WalletItem = ({ children, style, wallet, }) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, connectedWallets: [], usingMultiWallet: false, tile: children
+        ? ({ onClick }) => (jsxRuntime.jsx("button", Object.assign({ className: 'new-to-web3--button', style: style, onClick: onClick }, { children: children })))
+        : undefined }));
+
+exports.NewToWeb3WalletItem = NewToWeb3WalletItem;

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/NewToWeb3WalletItem/NewToWeb3WalletItem.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { WalletOption } from '../../../../../shared';
+export declare const NewToWeb3WalletItem: ({ children, style, wallet, }: {
+    children?: ReactNode;
+    style?: Record<string, unknown> | undefined;
+    wallet: WalletOption;
+}) => JSX.Element;

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/NewToWeb3WalletItem/NewToWeb3WalletItem.es.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { WalletListItem } from '../../../../../views/WalletList/WalletListItem/WalletListItem.es.js';
+
+const NewToWeb3WalletItem = ({ children, style, wallet, }) => (jsx(WalletListItem, { wallet: wallet, connectedWallets: [], usingMultiWallet: false, tile: children
+        ? ({ onClick }) => (jsx("button", Object.assign({ className: 'new-to-web3--button', style: style, onClick: onClick }, { children: children })))
+        : undefined }));
+
+export { NewToWeb3WalletItem };

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/NewToWeb3WalletItem/index.d.ts

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

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.cjs.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+require('react');
+var Typography = require('../../../../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../../shared/logger.cjs.js');
+var setToLS = require('../../../../../shared/utils/functions/storage/setToLS.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../../../../context/ViewContext/ViewContext.cjs.js');
+var localStorage = require('../../../../../utils/constants/localStorage.cjs.js');
+require('../../../../../utils/constants/colors.cjs.js');
+require('../../../../../shared/consts/index.cjs.js');
+require('../../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../../config/ApiEndpoint.cjs.js');
+require('../../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../../../components/IconButton/IconButton.cjs.js');
+var NewToWeb3WalletItem = require('../NewToWeb3WalletItem/NewToWeb3WalletItem.cjs.js');
+
+const WalletExtensionOrAppContinueButton = ({ wallet, selectedUrl, }) => {
+    const showRefreshOnceInstalledWalletButton = Boolean(selectedUrl.length) && !(wallet === null || wallet === void 0 ? void 0 : wallet.isInstalledOnBrowser);
+    const walletConnectionAfterPageReloadHandler = () => {
+        if (!(wallet === null || wallet === void 0 ? void 0 : wallet.name)) {
+            return;
+        }
+        setToLS.setToLS(localStorage.NEWTOWEB3_WALLET_EXTENSION_FLAG_KEY, wallet.name);
+        window.location.reload();
+    };
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'new-to-web3-buttons__container' }, { children: [!multiWallet.isMobile() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(wallet === null || wallet === void 0 ? void 0 : wallet.isInstalledOnBrowser) && (jsxRuntime.jsx(NewToWeb3WalletItem.NewToWeb3WalletItem, Object.assign({ wallet: wallet }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'p', "data-testid": 'desktop-interactive-wallet-item', variant: 'body_normal', weight: 'bold' }, { children: "Continue" })) }))), showRefreshOnceInstalledWalletButton && (jsxRuntime.jsx("button", Object.assign({ onClick: walletConnectionAfterPageReloadHandler }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'p', "data-testid": 'refresh-once-installed-button', variant: 'body_normal', weight: 'bold' }, { children: "Continue once installed" })) })))] })), wallet && multiWallet.isMobile() && (jsxRuntime.jsx(NewToWeb3WalletItem.NewToWeb3WalletItem, Object.assign({ wallet: wallet }, { children: jsxRuntime.jsx("p", Object.assign({ "data-testid": 'mobile-interactive-wallet-item' }, { children: "Continue once installed" })) })))] })));
+};
+
+exports.WalletExtensionOrAppContinueButton = WalletExtensionOrAppContinueButton;

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { WalletOption } from '../../../../../shared';
+type Props = {
+    selectedUrl: string;
+    wallet: WalletOption | undefined;
+};
+export declare const WalletExtensionOrAppContinueButton: ({ wallet, selectedUrl, }: Props) => JSX.Element;
+export {};

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.es.js

@@ -0,0 +1,42 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { isMobile } from '@dynamic-labs/multi-wallet';
+import 'react';
+import { Typography } from '../../../../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../../shared/logger.es.js';
+import { setToLS } from '../../../../../shared/utils/functions/storage/setToLS.es.js';
+import '@dynamic-labs/iconic';
+import '../../../../../context/ViewContext/ViewContext.es.js';
+import { NEWTOWEB3_WALLET_EXTENSION_FLAG_KEY } from '../../../../../utils/constants/localStorage.es.js';
+import '../../../../../utils/constants/colors.es.js';
+import '../../../../../shared/consts/index.es.js';
+import '../../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../../config/ApiEndpoint.es.js';
+import '../../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../../context/MockContext/MockContext.es.js';
+import '../../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../../components/IconButton/IconButton.es.js';
+import { NewToWeb3WalletItem } from '../NewToWeb3WalletItem/NewToWeb3WalletItem.es.js';
+
+const WalletExtensionOrAppContinueButton = ({ wallet, selectedUrl, }) => {
+    const showRefreshOnceInstalledWalletButton = Boolean(selectedUrl.length) && !(wallet === null || wallet === void 0 ? void 0 : wallet.isInstalledOnBrowser);
+    const walletConnectionAfterPageReloadHandler = () => {
+        if (!(wallet === null || wallet === void 0 ? void 0 : wallet.name)) {
+            return;
+        }
+        setToLS(NEWTOWEB3_WALLET_EXTENSION_FLAG_KEY, wallet.name);
+        window.location.reload();
+    };
+    return (jsxs("div", Object.assign({ className: 'new-to-web3-buttons__container' }, { children: [!isMobile() && (jsxs(Fragment, { children: [(wallet === null || wallet === void 0 ? void 0 : wallet.isInstalledOnBrowser) && (jsx(NewToWeb3WalletItem, Object.assign({ wallet: wallet }, { children: jsx(Typography, Object.assign({ as: 'p', "data-testid": 'desktop-interactive-wallet-item', variant: 'body_normal', weight: 'bold' }, { children: "Continue" })) }))), showRefreshOnceInstalledWalletButton && (jsx("button", Object.assign({ onClick: walletConnectionAfterPageReloadHandler }, { children: jsx(Typography, Object.assign({ as: 'p', "data-testid": 'refresh-once-installed-button', variant: 'body_normal', weight: 'bold' }, { children: "Continue once installed" })) })))] })), wallet && isMobile() && (jsx(NewToWeb3WalletItem, Object.assign({ wallet: wallet }, { children: jsx("p", Object.assign({ "data-testid": 'mobile-interactive-wallet-item' }, { children: "Continue once installed" })) })))] })));
+};
+
+export { WalletExtensionOrAppContinueButton };

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/WalletExtensionOrAppContinueButton/index.d.ts

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

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/WalletListFooterContent.cjs.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var iconic = require('@dynamic-labs/iconic');
+var walletBook = require('@dynamic-labs/wallet-book');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+var puzzle = require('../../../../shared/assets/puzzle.cjs.js');
+var index = require('../../../../shared/utils/functions/getValueByKey/index.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+var parseWalletLinks = require('../../../../utils/functions/parseWalletLinks/parseWalletLinks.cjs.js');
+var Typography = require('../../../../components/Typography/Typography.cjs.js');
+var pixelToRem = require('../../../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../../components/IconButton/IconButton.cjs.js');
+var EnterTileAnimation = require('../../../../components/EnterTileAnimation/EnterTileAnimation.cjs.js');
+var NewToWeb3WalletItem = require('./NewToWeb3WalletItem/NewToWeb3WalletItem.cjs.js');
+var Item = require('./Item/Item.cjs.js');
+var WalletExtensionOrAppContinueButton = require('./WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.cjs.js');
+
+const WalletListFooterContent = ({ chains, newToWeb3WalletChainMap, }) => {
+    var _a;
+    const { wallets } = useInternalDynamicContext.useInternalDynamicContext();
+    const [selectedUrl, setSelectedUrl] = React.useState('');
+    const chainName = ((_a = chains === null || chains === void 0 ? void 0 : chains.filter((chain) => Boolean(chain.enabled)).find((enabledChain) => enabledChain.name === newToWeb3WalletChainMap.primary_chain)) === null || _a === void 0 ? void 0 : _a.name) || 'evm';
+    const walletName = index.getValueByKey(newToWeb3WalletChainMap === null || newToWeb3WalletChainMap === void 0 ? void 0 : newToWeb3WalletChainMap.wallets, chainName);
+    const newToWeb3Wallet = wallets.find((wallet) => multiWallet.normalizeWalletName(wallet.name) === walletName);
+    const isCustodialServiceWallet = newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.canConnectViaCustodialService;
+    const links = walletBook.getWalletLinks(walletName);
+    const { currentDesktopUrl, canShowAndroidAppButton, canShowIosAppButton } = parseWalletLinks.parseWalletLinks(links);
+    const walletLinksElements = [
+        {
+            content: 'Install Desktop extension',
+            icon: puzzle.ReactComponent,
+            isEnabled: Boolean(currentDesktopUrl === null || currentDesktopUrl === void 0 ? void 0 : currentDesktopUrl.length) && !multiWallet.isMobile(),
+            url: currentDesktopUrl,
+        },
+        {
+            content: 'Install iOS app',
+            icon: iconic.AppleIcon,
+            isEnabled: canShowIosAppButton,
+            url: links.ios,
+        },
+        {
+            content: 'Install Android app',
+            icon: iconic.AndroidIcon,
+            isEnabled: canShowAndroidAppButton,
+            url: links.android,
+        },
+    ];
+    return (jsxRuntime.jsx("div", Object.assign({ className: 'walletlist-footer-content__container' }, { children: jsxRuntime.jsxs(EnterTileAnimation.EnterTileAnimation, Object.assign({ delay: '300ms' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'walletlist-footer-content__icon' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName, style: { height: pixelToRem.pixelToRem(56), width: pixelToRem.pixelToRem(56) } }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'walletlist-footer-content__typography-wrapper' }, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ as: 'p', variant: 'title', weight: 'medium' }, { children: ["We recommend installing ", walletBook.getWalletBookWallet(walletName).name] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-footer-content__typography--label' }, { children: "Select your preferred option below:" }))] })), jsxRuntime.jsx("div", Object.assign({ className: 'walletlist-footer-content__buttons-wrapper' }, { children: walletLinksElements.map((element, i) => element.isEnabled ? (jsxRuntime.jsx("button", Object.assign({ onClick: () => setSelectedUrl(element.url) }, { children: jsxRuntime.jsx(Item.Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }), i)) : undefined) })), isCustodialServiceWallet && (jsxRuntime.jsxs("div", Object.assign({ className: 'walletlist-footer-content__custodial-wallet-area' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'walletlist-footer-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular' }, { children: "If you don't want to install a wallet, then use:" })), jsxRuntime.jsx(NewToWeb3WalletItem.NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] }))), jsxRuntime.jsx(WalletExtensionOrAppContinueButton.WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] })) })));
+};
+
+exports.WalletListFooterContent = WalletListFooterContent;

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/WalletListFooterContent.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ProjectSettingsChains } from '@dynamic-labs/sdk-api';
+import { ChainToWalletMap } from '../../../../shared';
+interface Props {
+    chains: ProjectSettingsChains[] | undefined;
+    newToWeb3WalletChainMap: ChainToWalletMap;
+}
+export declare const WalletListFooterContent: ({ chains, newToWeb3WalletChainMap, }: Props) => JSX.Element;
+export {};

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/WalletListFooterContent.es.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { normalizeWalletName, isMobile } from '@dynamic-labs/multi-wallet';
+import { AppleIcon, AndroidIcon } from '@dynamic-labs/iconic';
+import { getWalletLinks, WalletIcon, getWalletBookWallet } from '@dynamic-labs/wallet-book';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgPuzzle } from '../../../../shared/assets/puzzle.es.js';
+import { getValueByKey } from '../../../../shared/utils/functions/getValueByKey/index.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import { parseWalletLinks } from '../../../../utils/functions/parseWalletLinks/parseWalletLinks.es.js';
+import { Typography } from '../../../../components/Typography/Typography.es.js';
+import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../components/IconButton/IconButton.es.js';
+import { EnterTileAnimation } from '../../../../components/EnterTileAnimation/EnterTileAnimation.es.js';
+import { NewToWeb3WalletItem } from './NewToWeb3WalletItem/NewToWeb3WalletItem.es.js';
+import { Item } from './Item/Item.es.js';
+import { WalletExtensionOrAppContinueButton } from './WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.es.js';
+
+const WalletListFooterContent = ({ chains, newToWeb3WalletChainMap, }) => {
+    var _a;
+    const { wallets } = useInternalDynamicContext();
+    const [selectedUrl, setSelectedUrl] = useState('');
+    const chainName = ((_a = chains === null || chains === void 0 ? void 0 : chains.filter((chain) => Boolean(chain.enabled)).find((enabledChain) => enabledChain.name === newToWeb3WalletChainMap.primary_chain)) === null || _a === void 0 ? void 0 : _a.name) || 'evm';
+    const walletName = getValueByKey(newToWeb3WalletChainMap === null || newToWeb3WalletChainMap === void 0 ? void 0 : newToWeb3WalletChainMap.wallets, chainName);
+    const newToWeb3Wallet = wallets.find((wallet) => normalizeWalletName(wallet.name) === walletName);
+    const isCustodialServiceWallet = newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.canConnectViaCustodialService;
+    const links = getWalletLinks(walletName);
+    const { currentDesktopUrl, canShowAndroidAppButton, canShowIosAppButton } = parseWalletLinks(links);
+    const walletLinksElements = [
+        {
+            content: 'Install Desktop extension',
+            icon: SvgPuzzle,
+            isEnabled: Boolean(currentDesktopUrl === null || currentDesktopUrl === void 0 ? void 0 : currentDesktopUrl.length) && !isMobile(),
+            url: currentDesktopUrl,
+        },
+        {
+            content: 'Install iOS app',
+            icon: AppleIcon,
+            isEnabled: canShowIosAppButton,
+            url: links.ios,
+        },
+        {
+            content: 'Install Android app',
+            icon: AndroidIcon,
+            isEnabled: canShowAndroidAppButton,
+            url: links.android,
+        },
+    ];
+    return (jsx("div", Object.assign({ className: 'walletlist-footer-content__container' }, { children: jsxs(EnterTileAnimation, Object.assign({ delay: '300ms' }, { children: [jsx("div", Object.assign({ className: 'walletlist-footer-content__icon' }, { children: jsx(WalletIcon, { walletName: walletName, style: { height: pixelToRem(56), width: pixelToRem(56) } }) })), jsxs("div", Object.assign({ className: 'walletlist-footer-content__typography-wrapper' }, { children: [jsxs(Typography, Object.assign({ as: 'p', variant: 'title', weight: 'medium' }, { children: ["We recommend installing ", getWalletBookWallet(walletName).name] })), jsx(Typography, Object.assign({ as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-footer-content__typography--label' }, { children: "Select your preferred option below:" }))] })), jsx("div", Object.assign({ className: 'walletlist-footer-content__buttons-wrapper' }, { children: walletLinksElements.map((element, i) => element.isEnabled ? (jsx("button", Object.assign({ onClick: () => setSelectedUrl(element.url) }, { children: jsx(Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }), i)) : undefined) })), isCustodialServiceWallet && (jsxs("div", Object.assign({ className: 'walletlist-footer-content__custodial-wallet-area' }, { children: [jsx(Typography, Object.assign({ className: 'walletlist-footer-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular' }, { children: "If you don't want to install a wallet, then use:" })), jsx(NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] }))), jsx(WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] })) })));
+};
+
+export { WalletListFooterContent };

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/index.d.ts

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

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletMoreInfoContent/WalletMoreInfoContent.cjs.js

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+require('react');
+var Typography = require('../../../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+var footerEyeIcon = require('../../../../shared/assets/footer-eye-icon.cjs.js');
+var footerGasIcon = require('../../../../shared/assets/footer-gas-icon.cjs.js');
+var footerKeyIcon = require('../../../../shared/assets/footer-key-icon.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+var InfoItem = require('../../../../components/InfoItem/InfoItem.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../../components/IconButton/IconButton.cjs.js');
+var EnterTileAnimation = require('../../../../components/EnterTileAnimation/EnterTileAnimation.cjs.js');
+var PoweredByDynamic = require('../../../../components/PoweredByDynamic/PoweredByDynamic.cjs.js');
+
+const WalletMoreInfoContent = ({ appName, variant, walletName, }) => {
+    const defaultSignContent = {
+        info: [
+            {
+                content: 'Signing proves you have access to your wallet. It’s a bit like verifying your email by clicking an email confirmation link in your inbox during signup. This does not approve a transaction.',
+                icon: footerKeyIcon.ReactComponent,
+                title: 'Confirms you own your wallet',
+            },
+            {
+                icon: footerGasIcon.ReactComponent,
+                title: 'There are no associated gas costs',
+            },
+        ],
+    };
+    const signInfoMessage = walletName === multiWallet.phantomLedgerWalletName
+        ? {
+            info: [
+                {
+                    content: 'By connecting a wallet to a website, you are allowing the site to read the contents of your wallet. This does not approve a transaction.',
+                    icon: footerEyeIcon.ReactComponent,
+                    title: 'Allows read access',
+                },
+                {
+                    content: (jsxRuntime.jsxs("div", Object.assign({ className: 'footer-more-info-content__item--phantom-ledger' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'p', variant: 'body_small', weight: 'regular' }, { children: "Ledger does not support message signing functionality, commonly used to log in to sites. Instead, we sign a transaction as a proxy to prove ownership of the wallet." })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ as: 'p', variant: 'body_small', weight: 'regular' }, { children: [jsxRuntime.jsx("strong", { children: "Important" }), ": we do not", ' ', jsxRuntime.jsx("strong", { children: "broadcast" }), " this transaction, meaning Ledger based login will still be gasless."] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'p', variant: 'body_small', weight: 'regular' }, { children: "Phantom in turn shows that a fee may apply as part of the \u201Ctransaction\u201D." })), jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'p', variant: 'body_small', weight: 'regular' }, { children: "As always, please be cautious of the extensions and websites you use to prevent unwanted transactions from being broadcasted to the network." }))] }))),
+                    icon: footerGasIcon.ReactComponent,
+                    title: walletName === multiWallet.phantomLedgerWalletName
+                        ? 'Why do I see a fee when using ledger'
+                        : 'There are no associated gas costs',
+                },
+            ],
+        }
+        : defaultSignContent;
+    const copys = {
+        connect: {
+            info: [
+                {
+                    content: 'By connecting a wallet to a website, you are allowing the site to read the contents of your wallet. This does not approve a transaction.',
+                    icon: footerEyeIcon.ReactComponent,
+                    title: 'Allows read access',
+                },
+                {
+                    icon: footerGasIcon.ReactComponent,
+                    title: 'There are no associated gas costs',
+                },
+            ],
+        },
+        sign: signInfoMessage,
+    };
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'footer-more-info-content__wrapper' }, { children: [copys[variant].info.map((item, index) => (jsxRuntime.jsx("div", Object.assign({ className: 'footer-more-info-content__item' }, { children: jsxRuntime.jsx(EnterTileAnimation.EnterTileAnimation, Object.assign({ delay: `${0.3 + index * 0.2}s` }, { children: jsxRuntime.jsx(InfoItem.InfoItem, { Icon: item.icon, title: item.title, content: item.content }) })) }), index))), jsxRuntime.jsx(EnterTileAnimation.EnterTileAnimation, Object.assign({ delay: `${0.3 + copys[variant].info.length * 0.2}s` }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { align: 'left' }) }))] })));
+};
+
+exports.WalletMoreInfoContent = WalletMoreInfoContent;

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletMoreInfoContent/WalletMoreInfoContent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface Props {
+    appName?: string;
+    variant: 'connect' | 'sign';
+    walletName?: string;
+}
+export declare const WalletMoreInfoContent: ({ appName, variant, walletName, }: Props) => JSX.Element;
+export {};

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletMoreInfoContent/WalletMoreInfoContent.es.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { phantomLedgerWalletName } from '@dynamic-labs/multi-wallet';
+import 'react';
+import { Typography } from '../../../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgFooterEyeIcon } from '../../../../shared/assets/footer-eye-icon.es.js';
+import { ReactComponent as SvgFooterGasIcon } from '../../../../shared/assets/footer-gas-icon.es.js';
+import { ReactComponent as SvgFooterKeyIcon } from '../../../../shared/assets/footer-key-icon.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import { InfoItem } from '../../../../components/InfoItem/InfoItem.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../components/IconButton/IconButton.es.js';
+import { EnterTileAnimation } from '../../../../components/EnterTileAnimation/EnterTileAnimation.es.js';
+import { PoweredByDynamic } from '../../../../components/PoweredByDynamic/PoweredByDynamic.es.js';
+
+const WalletMoreInfoContent = ({ appName, variant, walletName, }) => {
+    const defaultSignContent = {
+        info: [
+            {
+                content: 'Signing proves you have access to your wallet. It’s a bit like verifying your email by clicking an email confirmation link in your inbox during signup. This does not approve a transaction.',
+                icon: SvgFooterKeyIcon,
+                title: 'Confirms you own your wallet',
+            },
+            {
+                icon: SvgFooterGasIcon,
+                title: 'There are no associated gas costs',
+            },
+        ],
+    };
+    const signInfoMessage = walletName === phantomLedgerWalletName
+        ? {
+            info: [
+                {
+                    content: 'By connecting a wallet to a website, you are allowing the site to read the contents of your wallet. This does not approve a transaction.',
+                    icon: SvgFooterEyeIcon,
+                    title: 'Allows read access',
+                },
+                {
+                    content: (jsxs("div", Object.assign({ className: 'footer-more-info-content__item--phantom-ledger' }, { children: [jsx(Typography, Object.assign({ as: 'p', variant: 'body_small', weight: 'regular' }, { children: "Ledger does not support message signing functionality, commonly used to log in to sites. Instead, we sign a transaction as a proxy to prove ownership of the wallet." })), jsxs(Typography, Object.assign({ as: 'p', variant: 'body_small', weight: 'regular' }, { children: [jsx("strong", { children: "Important" }), ": we do not", ' ', jsx("strong", { children: "broadcast" }), " this transaction, meaning Ledger based login will still be gasless."] })), jsx(Typography, Object.assign({ as: 'p', variant: 'body_small', weight: 'regular' }, { children: "Phantom in turn shows that a fee may apply as part of the \u201Ctransaction\u201D." })), jsx(Typography, Object.assign({ as: 'p', variant: 'body_small', weight: 'regular' }, { children: "As always, please be cautious of the extensions and websites you use to prevent unwanted transactions from being broadcasted to the network." }))] }))),
+                    icon: SvgFooterGasIcon,
+                    title: walletName === phantomLedgerWalletName
+                        ? 'Why do I see a fee when using ledger'
+                        : 'There are no associated gas costs',
+                },
+            ],
+        }
+        : defaultSignContent;
+    const copys = {
+        connect: {
+            info: [
+                {
+                    content: 'By connecting a wallet to a website, you are allowing the site to read the contents of your wallet. This does not approve a transaction.',
+                    icon: SvgFooterEyeIcon,
+                    title: 'Allows read access',
+                },
+                {
+                    icon: SvgFooterGasIcon,
+                    title: 'There are no associated gas costs',
+                },
+            ],
+        },
+        sign: signInfoMessage,
+    };
+    return (jsxs("div", Object.assign({ className: 'footer-more-info-content__wrapper' }, { children: [copys[variant].info.map((item, index) => (jsx("div", Object.assign({ className: 'footer-more-info-content__item' }, { children: jsx(EnterTileAnimation, Object.assign({ delay: `${0.3 + index * 0.2}s` }, { children: jsx(InfoItem, { Icon: item.icon, title: item.title, content: item.content }) })) }), index))), jsx(EnterTileAnimation, Object.assign({ delay: `${0.3 + copys[variant].info.length * 0.2}s` }, { children: jsx(PoweredByDynamic, { align: 'left' }) }))] })));
+};
+
+export { WalletMoreInfoContent };

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletMoreInfoContent/index.d.ts

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

package/src/lib/layout/DynamicAuthLayout/FooterContent/index.d.ts

@@ -0,0 +1,3 @@
+export { EmptyFooterContent } from './EmptyFooterContent/empty-footer-content';
+export { WalletMoreInfoContent } from './WalletMoreInfoContent';
+export { WalletListFooterContent } from './WalletListFooterContent/WalletListFooterContent';