@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/data/api.es.js

@@ -0,0 +1,334 @@
+import { __awaiter } from '../../../_virtual/_tslib.es.js';
+import { EmailVerificationError, DynamicError, EmailAlreadyExistsError, UsernameAlreadyExistsError, WalletUsedError, WalletNotDeployedError, ChainalysisError, NoAccessError } from '@dynamic-labs/multi-wallet';
+import { SDKApi, Configuration, ChainEnum, WalletProviderEnum, AuthModeEnum } from '@dynamic-labs/sdk-api';
+import { VERSION, API_VERSION } from '../../version.es.js';
+import ApiEndpoint from '../config/ApiEndpoint.es.js';
+import { logger } from '../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '../context/ViewContext/ViewContext.es.js';
+import 'react';
+import '../utils/constants/colors.es.js';
+import '../shared/consts/index.es.js';
+
+const sdkApi = (jwt) => {
+    const settings = {
+        basePath: ApiEndpoint.getBaseUrl(),
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    };
+    if (jwt) {
+        settings.headers.Authorization = `Bearer ${jwt}`;
+    }
+    settings.headers['x-dyn-version'] = `WalletKit/${VERSION}`;
+    settings.headers['x-dyn-api-version'] = `API/${API_VERSION}`;
+    return new SDKApi(new Configuration(settings));
+};
+const fetchNonce = (environmentId) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const res = yield sdkApi().getNonce({
+            environmentId,
+        });
+        return res.nonce;
+    }
+    catch (e) {
+        return undefined;
+    }
+});
+const createEmailVerification = ({ email, environmentId, }) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const res = yield sdkApi().createEmailVerification({
+            emailVerificationCreateRequest: {
+                email,
+            },
+            environmentId,
+        });
+        return res;
+    }
+    catch (e) {
+        const data = yield e.json();
+        logger.error(data.error);
+        throw new EmailVerificationError(data.code);
+    }
+});
+const signInWithEmailVerification = ({ verificationToken, verificationUUID, environmentId, }) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const res = yield sdkApi().signInWithEmailVerification({
+            emailVerificationVerifyRequest: {
+                verificationToken,
+                verificationUUID,
+            },
+            environmentId,
+        });
+        return res;
+    }
+    catch (e) {
+        const data = yield e.json();
+        logger.error(data.error);
+        throw new EmailVerificationError(data.code);
+    }
+});
+const retryEmailVerification = ({ email, environmentId, verificationUUID, }) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const res = yield sdkApi().retryEmailVerification({
+            emailVerificationRetryRequest: {
+                email,
+                verificationUUID,
+            },
+            environmentId,
+        });
+        return res;
+    }
+    catch (e) {
+        const data = yield e.json();
+        logger.error(data.error);
+        throw new EmailVerificationError(data.code);
+    }
+});
+const verifyEmail = ({ verificationToken, verificationUUID, environmentId, }, userJwt) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const res = yield sdkApi(userJwt).verifyEmailVerification({
+            emailVerificationVerifyRequest: {
+                verificationToken,
+                verificationUUID,
+            },
+            environmentId,
+        });
+        return res;
+    }
+    catch (e) {
+        const data = yield e.json();
+        logger.error(data.error);
+        throw new EmailVerificationError(data.code);
+    }
+});
+const revokeSession = ({ environmentId, sessionId, }, userJwt) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        yield sdkApi(userJwt).revokeSession({
+            environmentId,
+        });
+    }
+    catch (error) {
+        const body = yield error.json();
+        logger.error(Error(body.error.message));
+    }
+});
+const linkWallet = (environmentId, { messageToSign, signedMessage, publicWalletAddress, chain, walletName, walletProvider, }, userJwt) => __awaiter(void 0, void 0, void 0, function* () {
+    // We should find a better way to do this than force type casting
+    const verifyRequest = {
+        chain,
+        messageToSign,
+        publicWalletAddress,
+        signedMessage,
+        walletName,
+        walletProvider,
+    };
+    try {
+        const { jwt } = yield sdkApi(userJwt).verifyLink({
+            environmentId,
+            verifyRequest,
+        });
+        return jwt;
+    }
+    catch (e) {
+        logger.error(e);
+        const data = yield e.json();
+        if (data.code === 'reassign_wallet_confirm' ||
+            data.code === 'reassign_wallet_error') {
+            throw new WalletUsedError(data.code);
+        }
+        return undefined;
+    }
+});
+const unlinkWallet = ({ environmentId, primaryWalletId, walletId, }, userJwt) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const { jwt } = yield sdkApi(userJwt).verifyUnlink({
+            environmentId,
+            verifyUnlinkRequest: {
+                primaryWalletId,
+                walletId,
+            },
+        });
+        return jwt;
+    }
+    catch (e) {
+        return undefined;
+    }
+});
+const transferWallet = (environmentId, { messageToSign, signedMessage, publicWalletAddress, chain, walletName, walletProvider, skipEmptyAccountCheck = false, }, userJwt) => __awaiter(void 0, void 0, void 0, function* () {
+    // We should find a better way to do this than force type casting
+    const verifyRequest = {
+        chain,
+        messageToSign,
+        publicWalletAddress,
+        signedMessage,
+        skipEmptyAccountCheck,
+        walletName,
+        walletProvider,
+    };
+    try {
+        const { jwt } = yield sdkApi(userJwt).verifyTransfer({
+            environmentId,
+            verifyRequest,
+        });
+        return jwt;
+    }
+    catch (_a) {
+        return undefined;
+    }
+});
+const mapChainToChainEnum = (chain) => {
+    const foundChain = Object.values(ChainEnum).find((value) => value === chain);
+    if (!foundChain) {
+        throw new DynamicError(`Invalid chain ${chain}`);
+    }
+    return foundChain;
+};
+const mapProviderToProviderEnum = (provider) => {
+    const foundProvider = Object.values(WalletProviderEnum).find((value) => value === provider);
+    if (!foundProvider) {
+        throw new DynamicError(`Invalid provider ${provider}`);
+    }
+    return foundProvider;
+};
+const mapAuthModeTypeToEnum = (authMode) => {
+    const found = Object.values(AuthModeEnum).find((value) => value === authMode);
+    if (!found) {
+        throw new DynamicError(`Invalid authMode ${authMode}`);
+    }
+    return found;
+};
+const createVisit = ({ authMode, chain, environmentId, walletProvider, publicWalletAddress, walletName, }) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const connectRequest = {
+            address: publicWalletAddress,
+            authMode: mapAuthModeTypeToEnum(authMode),
+            chain: mapChainToChainEnum(chain),
+            provider: mapProviderToProviderEnum(walletProvider),
+            walletName,
+        };
+        yield sdkApi().createVisit({
+            connectRequest,
+            environmentId,
+        });
+    }
+    catch (error) {
+        // log error to console, don't do anything else
+        logger.error(error);
+    }
+});
+const verifyWallet = (environmentId, { messageToSign, signedMessage, publicWalletAddress, chain, walletName, walletProvider, captchaToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    // We should find a better way to do this than force type casting
+    const verifyRequest = {
+        captchaToken,
+        chain,
+        messageToSign,
+        publicWalletAddress,
+        signedMessage,
+        walletName,
+        walletProvider,
+    };
+    try {
+        const { jwt } = yield sdkApi().verify({
+            environmentId,
+            verifyRequest,
+        });
+        return jwt;
+    }
+    catch (e) {
+        logger.error(e);
+        const data = yield e.json();
+        if (data.code === 'wallet_not_deployed') {
+            throw new WalletNotDeployedError();
+        }
+        if (data.error.code === 'chainalysis_blocked_wallet') {
+            throw new ChainalysisError(data.payload.walletPublicKey);
+        }
+        if (data.error.code === 'missing_from_list') {
+            throw new NoAccessError(data.payload.walletPublicKey);
+        }
+        return undefined;
+    }
+});
+const fetchNetworkSettings = (environmentId) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const res = yield sdkApi().getNetworksConfigurationByEnvId({
+            environmentId,
+        });
+        return res;
+    }
+    catch (e) {
+        logger.error(e);
+        return undefined;
+    }
+});
+const fetchProjectSettings = (environmentId) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const res = yield sdkApi().getEnvironmentSettings({
+            environmentId,
+        });
+        return res;
+    }
+    catch (e) {
+        logger.error(e);
+        return undefined;
+    }
+});
+const updateUserProfileFields = (jwt, environmentId, fields) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        if (!jwt)
+            throw new DynamicError('User not authenticated');
+        const res = yield sdkApi(jwt).updateSelf({
+            environmentId,
+            userFields: fields,
+        });
+        return res;
+    }
+    catch (e) {
+        logger.error(e);
+        if (e instanceof Response) {
+            const error = yield e.json();
+            if (error.code === 'email_already_exists') {
+                throw new EmailAlreadyExistsError();
+            }
+            else if (error.code === 'username_already_exists') {
+                throw new UsernameAlreadyExistsError();
+            }
+        }
+        throw e;
+    }
+});
+const verifyOAuth = (environmentId, providerType, { code }, userJwt) => __awaiter(void 0, void 0, void 0, function* () {
+    const oauthRequest = {
+        code,
+    };
+    try {
+        const { jwt } = yield sdkApi(userJwt).oauthVerify({
+            environmentId,
+            oauthRequest,
+            providerType,
+        });
+        return jwt;
+    }
+    catch (e) {
+        logger.error(e);
+        return undefined;
+    }
+});
+const unlinkOAuth = ({ environmentId, verifiedCrentialId, }, userJwt) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const { jwt } = yield sdkApi(userJwt).verifyUnlink({
+            environmentId,
+            verifyUnlinkRequest: {
+                verifiedCrentialId,
+            },
+        });
+        return jwt;
+    }
+    catch (e) {
+        return undefined;
+    }
+});
+
+export { createEmailVerification, createVisit, fetchNetworkSettings, fetchNonce, fetchProjectSettings, linkWallet, mapAuthModeTypeToEnum, mapChainToChainEnum, mapProviderToProviderEnum, retryEmailVerification, revokeSession, signInWithEmailVerification, transferWallet, unlinkOAuth, unlinkWallet, updateUserProfileFields, verifyEmail, verifyOAuth, verifyWallet };

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

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../context/FooterAnimationContext/index.cjs.js');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs.js');
+var getDynamicLayoutData = require('../../utils/functions/getDynamicLayoutData/getDynamicLayoutData.cjs.js');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+var SlideInUpTransition = require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+require('../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../config/ApiEndpoint.cjs.js');
+require('../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+var MockContext = 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 VerticalAccordion = require('../../components/Accordion/components/VerticalAccordion/VerticalAccordion.cjs.js');
+var AccordionItem = require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs.js');
+var AnimatePresence = require('../../components/AnimatePresence/AnimatePresence.cjs.js');
+var VerticalDrawerAnimation = require('../../components/AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.cjs.js');
+var isUserLinkingWallet = require('../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.cjs.js');
+var Footer = require('./Footer/Footer.cjs.js');
+var emptyFooterContent = require('./FooterContent/EmptyFooterContent/empty-footer-content.cjs.js');
+var WalletMoreInfoContent = require('./FooterContent/WalletMoreInfoContent/WalletMoreInfoContent.cjs.js');
+var WalletListFooterContent = require('./FooterContent/WalletListFooterContent/WalletListFooterContent.cjs.js');
+var header = require('./Header/header.cjs.js');
+
+const DynamicAuthLayout = ({ appName, children, onClose, newToWeb3WalletChainMap, transitionProps, projectSettings, walletConnector, walletName = '', className = '', }) => {
+    const { view } = ViewContext.useViewContext();
+    const { user } = useInternalDynamicContext.useInternalDynamicContext();
+    const { headerData, footerData } = getDynamicLayoutData.getDynamicLayoutData({
+        view,
+    });
+    const footerRef = React.useRef(null);
+    const { isFooterExpanded } = index.useFooterAnimationContext();
+    const { mockedSDK } = MockContext.useMockContext();
+    const renderFooterContent = () => {
+        switch (view) {
+            case 'wallet-connect-mobile-wallets-list':
+            case 'wallet-list':
+            case 'login-with-email-or-wallet-full-wallet-list':
+                return (jsxRuntime.jsx(WalletListFooterContent.WalletListFooterContent, { chains: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains, newToWeb3WalletChainMap: newToWeb3WalletChainMap }));
+            case 'pending-signature-without-back-button':
+            case 'pending-signature':
+                return (jsxRuntime.jsx(WalletMoreInfoContent.WalletMoreInfoContent, { appName: appName, variant: 'sign', walletName: walletName }));
+            case 'pending-connect':
+                return jsxRuntime.jsx(WalletMoreInfoContent.WalletMoreInfoContent, { appName: appName, variant: 'connect' });
+            case 'qr-code':
+                return jsxRuntime.jsx(WalletMoreInfoContent.WalletMoreInfoContent, { appName: appName, variant: 'connect' });
+            /* istanbul ignore next */
+            default:
+                return jsxRuntime.jsx(emptyFooterContent.EmptyFooterContent, {});
+        }
+    };
+    const showFooter = 
+    // Notice the negation here
+    !((view === 'qr-code' && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaQrCode)) ||
+        view === 'no-qr-not-installed' ||
+        view === 'wallet-used' ||
+        view === 'chainalysis-blocked-wallet' ||
+        view === 'wallet-sign' ||
+        view === 'collect-user-data' ||
+        isUserLinkingWallet.isUserLinkingWallet(user, view, mockedSDK));
+    const showHeader = view !== 'collect-user-data' &&
+        view !== 'no-access' &&
+        view !== 'chainalysis-blocked-wallet' &&
+        view !== 'update-email' &&
+        view !== 'verify-email' &&
+        view !== 'network-not-supported' &&
+        view !== 'email-wallet-otp-verification-view';
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showHeader && (jsxRuntime.jsx(header.Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings })), children] }));
+    const modalClassName = classNames.classNames(className, 'dynamic-auth-layout__container');
+    return (jsxRuntime.jsx("div", Object.assign({ className: 'dynamic-auth-layout__modal' }, { children: jsxRuntime.jsx(SlideInUpTransition.SlideInUpTransition, Object.assign({ isShown: Boolean(transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.isShown) }, { children: jsxRuntime.jsx("div", Object.assign({ className: modalClassName, "data-testid": 'dynamic-auth-modal' }, { children: jsxRuntime.jsxs(VerticalAccordion.VerticalAccordion, { children: [jsxRuntime.jsx(AccordionItem.AccordionItem, Object.assign({ isOpen: !isFooterExpanded }, { children: content })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerAnimation.VerticalDrawerAnimation, {}) }, { children: footerData && showFooter && (jsxRuntime.jsx(Footer.Footer, { icon: footerData.icon, heading: footerData.heading, footerRef: footerRef, projectSettings: projectSettings })) })), footerData && showFooter && (jsxRuntime.jsx(AccordionItem.AccordionItem, Object.assign({ isOpen: isFooterExpanded }, { children: jsxRuntime.jsx("div", { children: renderFooterContent() }, isFooterExpanded.toString()) })))] }) })) })) })));
+};
+
+exports.DynamicAuthLayout = DynamicAuthLayout;

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

@@ -0,0 +1,18 @@
+import { FC, PropsWithChildren } from 'react';
+import type { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { ProjectSettings } from '@dynamic-labs/sdk-api';
+import { ChainToWalletMap, ModalProps } from '../../shared/types';
+import { ITransitionOptions } from '../../components/Transition/transition.type';
+interface Props {
+    appName?: string;
+    className?: string;
+    newToWeb3WalletChainMap: ChainToWalletMap;
+    privacyPolicyUrl: string | undefined;
+    projectSettings?: ProjectSettings;
+    termsOfServiceUrl: string | undefined;
+    transitionProps?: Pick<ITransitionOptions, 'isShown'>;
+    walletConnector?: WalletConnector | null;
+    walletName: string | undefined;
+}
+export declare const DynamicAuthLayout: FC<PropsWithChildren<Props> & ModalProps>;
+export {};

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

@@ -0,0 +1,87 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useFooterAnimationContext } from '../../context/FooterAnimationContext/index.es.js';
+import { useViewContext } from '../../context/ViewContext/ViewContext.es.js';
+import { getDynamicLayoutData } from '../../utils/functions/getDynamicLayoutData/getDynamicLayoutData.es.js';
+import '../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import { SlideInUpTransition } from '../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../config/ApiEndpoint.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import { useMockContext } from '../../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 { VerticalAccordion } from '../../components/Accordion/components/VerticalAccordion/VerticalAccordion.es.js';
+import { AccordionItem } from '../../components/Accordion/components/AccordionItem/AccordionItem.es.js';
+import { AnimatePresence } from '../../components/AnimatePresence/AnimatePresence.es.js';
+import { VerticalDrawerAnimation } from '../../components/AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.es.js';
+import { isUserLinkingWallet } from '../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.es.js';
+import { Footer } from './Footer/Footer.es.js';
+import { EmptyFooterContent } from './FooterContent/EmptyFooterContent/empty-footer-content.es.js';
+import { WalletMoreInfoContent } from './FooterContent/WalletMoreInfoContent/WalletMoreInfoContent.es.js';
+import { WalletListFooterContent } from './FooterContent/WalletListFooterContent/WalletListFooterContent.es.js';
+import { Header } from './Header/header.es.js';
+
+const DynamicAuthLayout = ({ appName, children, onClose, newToWeb3WalletChainMap, transitionProps, projectSettings, walletConnector, walletName = '', className = '', }) => {
+    const { view } = useViewContext();
+    const { user } = useInternalDynamicContext();
+    const { headerData, footerData } = getDynamicLayoutData({
+        view,
+    });
+    const footerRef = useRef(null);
+    const { isFooterExpanded } = useFooterAnimationContext();
+    const { mockedSDK } = useMockContext();
+    const renderFooterContent = () => {
+        switch (view) {
+            case 'wallet-connect-mobile-wallets-list':
+            case 'wallet-list':
+            case 'login-with-email-or-wallet-full-wallet-list':
+                return (jsx(WalletListFooterContent, { chains: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains, newToWeb3WalletChainMap: newToWeb3WalletChainMap }));
+            case 'pending-signature-without-back-button':
+            case 'pending-signature':
+                return (jsx(WalletMoreInfoContent, { appName: appName, variant: 'sign', walletName: walletName }));
+            case 'pending-connect':
+                return jsx(WalletMoreInfoContent, { appName: appName, variant: 'connect' });
+            case 'qr-code':
+                return jsx(WalletMoreInfoContent, { appName: appName, variant: 'connect' });
+            /* istanbul ignore next */
+            default:
+                return jsx(EmptyFooterContent, {});
+        }
+    };
+    const showFooter = 
+    // Notice the negation here
+    !((view === 'qr-code' && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaQrCode)) ||
+        view === 'no-qr-not-installed' ||
+        view === 'wallet-used' ||
+        view === 'chainalysis-blocked-wallet' ||
+        view === 'wallet-sign' ||
+        view === 'collect-user-data' ||
+        isUserLinkingWallet(user, view, mockedSDK));
+    const showHeader = view !== 'collect-user-data' &&
+        view !== 'no-access' &&
+        view !== 'chainalysis-blocked-wallet' &&
+        view !== 'update-email' &&
+        view !== 'verify-email' &&
+        view !== 'network-not-supported' &&
+        view !== 'email-wallet-otp-verification-view';
+    const content = (jsxs(Fragment, { children: [showHeader && (jsx(Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings })), children] }));
+    const modalClassName = classNames(className, 'dynamic-auth-layout__container');
+    return (jsx("div", Object.assign({ className: 'dynamic-auth-layout__modal' }, { children: jsx(SlideInUpTransition, Object.assign({ isShown: Boolean(transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.isShown) }, { children: jsx("div", Object.assign({ className: modalClassName, "data-testid": 'dynamic-auth-modal' }, { children: jsxs(VerticalAccordion, { children: [jsx(AccordionItem, Object.assign({ isOpen: !isFooterExpanded }, { children: content })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerAnimation, {}) }, { children: footerData && showFooter && (jsx(Footer, { icon: footerData.icon, heading: footerData.heading, footerRef: footerRef, projectSettings: projectSettings })) })), footerData && showFooter && (jsx(AccordionItem, Object.assign({ isOpen: isFooterExpanded }, { children: jsx("div", { children: renderFooterContent() }, isFooterExpanded.toString()) })))] }) })) })) })));
+};
+
+export { DynamicAuthLayout };

package/src/lib/layout/DynamicAuthLayout/Footer/Footer.cjs.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../../context/FooterAnimationContext/index.cjs.js');
+var ThemeContext = require('../../../context/ThemeContext/ThemeContext.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');
+var arrowDown = require('../../../shared/assets/arrow-down.cjs.js');
+require('../../../utils/constants/colors.cjs.js');
+require('../../../shared/consts/index.cjs.js');
+var Skeleton = require('../../../components/Skeleton/Skeleton.cjs.js');
+var classNames = require('../../../utils/functions/classNames/classNames.cjs.js');
+var Typography = require('../../../components/Typography/Typography.cjs.js');
+require('../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../components/ShadowDOM/ShadowDOM.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 Footer = ({ heading, icon, projectSettings }) => {
+    const { theme } = ThemeContext.useThemeContext();
+    const { isFooterExpanded, setIsFooterExpanded } = index.useFooterAnimationContext();
+    const borderClassName = React.useMemo(() => {
+        if (isFooterExpanded) {
+            return 'footer--border-bottom';
+        }
+        return 'footer--border-top';
+    }, [theme, isFooterExpanded]);
+    const arrowClassName = React.useMemo(() => {
+        const classes = ['footer__arrow'];
+        if (isFooterExpanded) {
+            classes.push('footer__arrow--open');
+        }
+        return classes.join(' ');
+    }, [isFooterExpanded]);
+    return (jsxRuntime.jsx("div", Object.assign({ onClick: () => projectSettings && setIsFooterExpanded(!isFooterExpanded), className: classNames.classNames('footer', borderClassName), role: 'button', "data-testid": 'wallet-footer-container' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'footer__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'footer__container--heading' }, { children: [!projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'footer__skeleton--icon' })) : (Boolean(icon) && (jsxRuntime.jsx("div", Object.assign({ className: 'footer__container--icon', "data-testid": 'wallet-footer-icon' }, { children: icon })))), jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h3', variant: 'body_normal' }, { children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'footer__skeleton--heading' })) : (heading) }))] })), projectSettings && jsxRuntime.jsx(arrowDown.ReactComponent, { className: arrowClassName })] })) })));
+};
+
+exports.Footer = Footer;

package/src/lib/layout/DynamicAuthLayout/Footer/Footer.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode, RefObject } from 'react';
+import { ProjectSettings } from '@dynamic-labs/sdk-api';
+interface Props {
+    footerRef: RefObject<HTMLDivElement>;
+    heading: string;
+    icon?: ReactNode;
+    projectSettings?: ProjectSettings;
+}
+export declare const Footer: FC<Props>;
+export {};

package/src/lib/layout/DynamicAuthLayout/Footer/Footer.es.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useFooterAnimationContext } from '../../../context/FooterAnimationContext/index.es.js';
+import { useThemeContext } from '../../../context/ThemeContext/ThemeContext.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 { ReactComponent as SvgArrowDown } from '../../../shared/assets/arrow-down.es.js';
+import '../../../utils/constants/colors.es.js';
+import '../../../shared/consts/index.es.js';
+import { Skeleton } from '../../../components/Skeleton/Skeleton.es.js';
+import { classNames } from '../../../utils/functions/classNames/classNames.es.js';
+import { Typography } from '../../../components/Typography/Typography.es.js';
+import '../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../components/ShadowDOM/ShadowDOM.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 Footer = ({ heading, icon, projectSettings }) => {
+    const { theme } = useThemeContext();
+    const { isFooterExpanded, setIsFooterExpanded } = useFooterAnimationContext();
+    const borderClassName = useMemo(() => {
+        if (isFooterExpanded) {
+            return 'footer--border-bottom';
+        }
+        return 'footer--border-top';
+    }, [theme, isFooterExpanded]);
+    const arrowClassName = useMemo(() => {
+        const classes = ['footer__arrow'];
+        if (isFooterExpanded) {
+            classes.push('footer__arrow--open');
+        }
+        return classes.join(' ');
+    }, [isFooterExpanded]);
+    return (jsx("div", Object.assign({ onClick: () => projectSettings && setIsFooterExpanded(!isFooterExpanded), className: classNames('footer', borderClassName), role: 'button', "data-testid": 'wallet-footer-container' }, { children: jsxs("div", Object.assign({ className: 'footer__container' }, { children: [jsxs("div", Object.assign({ className: 'footer__container--heading' }, { children: [!projectSettings ? (jsx(Skeleton, { className: 'footer__skeleton--icon' })) : (Boolean(icon) && (jsx("div", Object.assign({ className: 'footer__container--icon', "data-testid": 'wallet-footer-icon' }, { children: icon })))), jsx(Typography, Object.assign({ as: 'h3', variant: 'body_normal' }, { children: !projectSettings ? (jsx(Skeleton, { className: 'footer__skeleton--heading' })) : (heading) }))] })), projectSettings && jsx(SvgArrowDown, { className: arrowClassName })] })) })));
+};
+
+export { Footer };

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

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