@dynamic-labs/sdk-react-core 0.17.0-RC.19 → 0.17.0-RC.20

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

@@ -25,15 +25,16 @@ import '../../../Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useFetchChain } from '../../../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js';
+import '../../../IconButton/IconButton.js';
+import '@dynamic-labs/wallet-book';
+import '../../../Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import '../../../IconButton/IconButton.js';
-import '../../../Alert/Alert.js';
 import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';
-import '@dynamic-labs/wallet-book';
 import '../../../SendBalanceForm/SendBalanceForm.js';
 import { capitalize } from '../../../../shared/utils/functions/capitalize/capitalize.js';
 

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

@@ -30,17 +30,18 @@ require('../Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../context/ErrorContext/ErrorContext.cjs');
-require('../../context/MockContext/MockContext.cjs');
-require('../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var IconButton = require('../IconButton/IconButton.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
-require('../Alert/Alert.cjs');
+var IconButton = require('../IconButton/IconButton.cjs');
+var IconWithStatus = require('../IconWithStatus/IconWithStatus.cjs');
 var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs');
+require('../Alert/Alert.cjs');
+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 IconWithStatus = require('../IconWithStatus/IconWithStatus.cjs');
 var ModalHeaderBanner = require('../ModalHeaderBanner/ModalHeaderBanner.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');

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

@@ -26,17 +26,18 @@ import '../Transition/OpacityTransition/OpacityTransition.js';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../context/ErrorContext/ErrorContext.js';
-import '../../context/MockContext/MockContext.js';
-import '../../context/CaptchaContext/CaptchaContext.js';
-import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { IconButton } from '../IconButton/IconButton.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { ModalHeader } from '../ModalHeader/ModalHeader.js';
-import '../Alert/Alert.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { IconWithStatus } from '../IconWithStatus/IconWithStatus.js';
 import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
+import '../Alert/Alert.js';
+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 { IconWithStatus } from '../IconWithStatus/IconWithStatus.js';
 import { ModalHeaderBanner } from '../ModalHeaderBanner/ModalHeaderBanner.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';

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

@@ -23,14 +23,15 @@ require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-focus-lock');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
-require('@dynamic-labs/wallet-book');
 require('../SendBalanceForm/SendBalanceForm.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');

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

@@ -19,14 +19,15 @@ import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-focus-lock';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
-import '@dynamic-labs/wallet-book';
 import '../SendBalanceForm/SendBalanceForm.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/components/Portal/Portal.cjs

@@ -23,15 +23,16 @@ require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 var useKeyboardEventListener = require('../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.cjs');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
-require('@dynamic-labs/wallet-book');
 require('../SendBalanceForm/SendBalanceForm.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');

package/src/lib/components/Portal/Portal.js

@@ -19,15 +19,16 @@ import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import { useKeyboardEventListener } from '../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.js';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
-import '@dynamic-labs/wallet-book';
 import '../SendBalanceForm/SendBalanceForm.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/components/SelectNetworkButton/SelectNetworkButton.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../Button/Button.cjs');
+
+const SelectNetworkButton = ({ networkId, networkName, networkIconUrl, onClick, }) => {
+    const networkImage = (jsxRuntime.jsx("img", { alt: networkName, className: 'select-network-button__icon', src: networkIconUrl }));
+    return (jsxRuntime.jsxs(Button.Button, Object.assign({ dataTestId: 'SelectNetworkButton', onClick: () => onClick(networkId), buttonRounded: 'default', expanded: true, className: 'select-network-button' }, { children: ["Select", networkImage, networkName, " network"] })));
+};
+
+exports.SelectNetworkButton = SelectNetworkButton;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type SelectNetworkButtonProps = {
+    networkIconUrl?: string;
+    networkId: string | number;
+    networkName?: string;
+    onClick: (networkId: string | number) => void;
+};
+export declare const SelectNetworkButton: FC<SelectNetworkButtonProps>;

package/src/lib/components/SelectNetworkButton/SelectNetworkButton.js

@@ -0,0 +1,9 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from '../Button/Button.js';
+
+const SelectNetworkButton = ({ networkId, networkName, networkIconUrl, onClick, }) => {
+    const networkImage = (jsx("img", { alt: networkName, className: 'select-network-button__icon', src: networkIconUrl }));
+    return (jsxs(Button, Object.assign({ dataTestId: 'SelectNetworkButton', onClick: () => onClick(networkId), buttonRounded: 'default', expanded: true, className: 'select-network-button' }, { children: ["Select", networkImage, networkName, " network"] })));
+};
+
+export { SelectNetworkButton };

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

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+type SelectWalletChainLayoutProps = {
+    HeaderIcon?: ReactElement;
+    onClose?: () => void;
+    onBack?: () => void;
+};
+export declare const SelectWalletChainLayout: FC<PropsWithChildren<SelectWalletChainLayoutProps>>;
+export {};

package/src/lib/components/SendBalanceForm/SendBalanceForm.cjs

@@ -1,24 +1,42 @@
 'use strict';
 
-require('react/jsx-runtime');
-require('formik');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var formik = require('formik');
 var yup = require('yup');
-require('react');
-require('@dynamic-labs/sdk-api');
-require('../../shared/logger.cjs');
-require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
-require('../../context/ViewContext/ViewContext.cjs');
-require('@dynamic-labs/utils');
-require('../../utils/constants/colors.cjs');
-require('ethers');
-require('../../shared/consts/index.cjs');
+var Input = require('../Input/Input.cjs');
+var Button = require('../Button/Button.cjs');
 
-yup.object().shape({
+const sendBalanceFormValidationSchema = yup.object().shape({
     amount: yup.string()
         .required('required')
         .matches(/^\d+(\.\d{1,8})?$/, 'invalidFormat'),
     recipient: yup.string()
         .required('required')
         .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
-});
+});
+const sendBalanceFormInitialValues = {
+    amount: '',
+    recipient: '',
+};
+const mapFieldAndErrorToMessage = {
+    amount: {
+        invalidFormat: 'The amount is in invalid format',
+        required: 'The amount field is required',
+    },
+    recipient: {
+        invalidFormat: 'The address is in invalid format',
+        required: 'The recipient is required',
+    },
+};
+const getDisplayErrorMessage = (errors, field) => {
+    const errorType = errors[field];
+    if (errorType) {
+        return mapFieldAndErrorToMessage[field][errorType];
+    }
+    return '';
+};
+const SendBalanceForm = ({ initialValues, onSubmit }) => (jsxRuntime.jsx(formik.Formik, Object.assign({ initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false }, { children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, Object.assign({ className: 'send-balance-form' }, { children: [jsxRuntime.jsx(formik.Field, { className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input.Input, error: errors['amount'], message: touched['amount'] && getDisplayErrorMessage(errors, 'amount') }), jsxRuntime.jsx(formik.Field, { className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], message: touched['recipient'] && getDisplayErrorMessage(errors, 'recipient') }), jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button' }, { children: "Send now" }))] }))) })));
+
+exports.SendBalanceForm = SendBalanceForm;

package/src/lib/components/SendBalanceForm/SendBalanceForm.js

@@ -1,22 +1,38 @@
-import 'react/jsx-runtime';
-import 'formik';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Formik, Form, Field } from 'formik';
 import { object, string } from 'yup';
-import 'react';
-import '@dynamic-labs/sdk-api';
-import '../../shared/logger.js';
-import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
-import '../../context/ViewContext/ViewContext.js';
-import '@dynamic-labs/utils';
-import '../../utils/constants/colors.js';
-import 'ethers';
-import '../../shared/consts/index.js';
+import { Input } from '../Input/Input.js';
+import { Button } from '../Button/Button.js';
 
-object().shape({
+const sendBalanceFormValidationSchema = object().shape({
     amount: string()
         .required('required')
         .matches(/^\d+(\.\d{1,8})?$/, 'invalidFormat'),
     recipient: string()
         .required('required')
         .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
-});
+});
+const sendBalanceFormInitialValues = {
+    amount: '',
+    recipient: '',
+};
+const mapFieldAndErrorToMessage = {
+    amount: {
+        invalidFormat: 'The amount is in invalid format',
+        required: 'The amount field is required',
+    },
+    recipient: {
+        invalidFormat: 'The address is in invalid format',
+        required: 'The recipient is required',
+    },
+};
+const getDisplayErrorMessage = (errors, field) => {
+    const errorType = errors[field];
+    if (errorType) {
+        return mapFieldAndErrorToMessage[field][errorType];
+    }
+    return '';
+};
+const SendBalanceForm = ({ initialValues, onSubmit }) => (jsx(Formik, Object.assign({ initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false }, { children: ({ errors, touched }) => (jsxs(Form, Object.assign({ className: 'send-balance-form' }, { children: [jsx(Field, { className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input, error: errors['amount'], message: touched['amount'] && getDisplayErrorMessage(errors, 'amount') }), jsx(Field, { className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], message: touched['recipient'] && getDisplayErrorMessage(errors, 'recipient') }), jsx(Button, Object.assign({ dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button' }, { children: "Send now" }))] }))) })));
+
+export { SendBalanceForm };

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var walletBook = require('@dynamic-labs/wallet-book');
+var IconButton = require('../IconButton/IconButton.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+require('react');
+var close = require('../../shared/assets/close.cjs');
+var chevronLeft = require('../../shared/assets/chevron-left.cjs');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
+var Typography = require('../Typography/Typography.cjs');
+var Icon = require('../Icon/Icon.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
+var Alert = require('../Alert/Alert.cjs');
+var SendBalanceForm = require('../SendBalanceForm/SendBalanceForm.cjs');
+var TokenBalanceCard = require('./components/TokenBalanceCard/TokenBalanceCard.cjs');
+
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, }) => {
+    const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+};
+
+exports.SendBalancePageLayout = SendBalancePageLayout;

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

@@ -6,6 +6,7 @@ export type SendBalancePageLayoutProps = {
     currencySymbol: string;
     displayPoweredByDynamicFooter?: boolean;
     error?: string;
+    initialValues?: SendBalanceFormValues;
     isLoading: boolean;
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { IconButton } from '../IconButton/IconButton.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
+import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+import { ModalHeader } from '../ModalHeader/ModalHeader.js';
+import { Typography } from '../Typography/Typography.js';
+import { Icon } from '../Icon/Icon.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
+import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition/VerticalDrawerTransition.js';
+import { Alert } from '../Alert/Alert.js';
+import { SendBalanceForm } from '../SendBalanceForm/SendBalanceForm.js';
+import { TokenBalanceCard } from './components/TokenBalanceCard/TokenBalanceCard.js';
+
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, }) => {
+    const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
+    const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
+    return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+};
+
+export { SendBalancePageLayout };

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/TokenBalanceCard.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('ethers');
+require('react');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../shared/consts/index.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
+var Typography = require('../../../Typography/Typography.cjs');
+
+const TokenBalanceCard = ({ chain, currencySymbol, balance, }) => {
+    const ChainIcon = getChainIcon.getChainIcon(chain);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card__chain' }, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(ChainIcon, {}) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: currencySymbol }))] })), Boolean(balance) && (jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card__balance-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: "Balance:" })), jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card__balance' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: balance })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: currencySymbol }))] }))] })))] })));
+};
+
+exports.TokenBalanceCard = TokenBalanceCard;

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/TokenBalanceCard.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.js';
+import '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import 'ethers';
+import 'react';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../shared/consts/index.js';
+import { Icon } from '../../../Icon/Icon.js';
+import { Typography } from '../../../Typography/Typography.js';
+
+const TokenBalanceCard = ({ chain, currencySymbol, balance, }) => {
+    const ChainIcon = getChainIcon(chain);
+    return (jsxs("div", Object.assign({ className: 'token-balance-card' }, { children: [jsxs("div", Object.assign({ className: 'token-balance-card__chain' }, { children: [jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(ChainIcon, {}) })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: currencySymbol }))] })), Boolean(balance) && (jsxs("div", Object.assign({ className: 'token-balance-card__balance-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: "Balance:" })), jsxs("div", Object.assign({ className: 'token-balance-card__balance' }, { children: [jsx(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: balance })), jsx(Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: currencySymbol }))] }))] })))] })));
+};
+
+export { TokenBalanceCard };

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

@@ -22,6 +22,7 @@ require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
 var usePrevious = require('../../utils/hooks/usePrevious/usePrevious.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
@@ -33,9 +34,9 @@ require('../Transition/OpacityTransition/OpacityTransition.cjs');
 var useHover = require('../../utils/hooks/useHover/useHover.cjs');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
-require('@dynamic-labs/wallet-book');
 require('../SendBalanceForm/SendBalanceForm.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');

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

@@ -18,6 +18,7 @@ import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
 import { usePrevious } from '../../utils/hooks/usePrevious/usePrevious.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
@@ -29,9 +30,9 @@ import '../Transition/OpacityTransition/OpacityTransition.js';
 import { useHover } from '../../utils/hooks/useHover/useHover.js';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
-import '@dynamic-labs/wallet-book';
 import '../SendBalanceForm/SendBalanceForm.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
+var IconButton = require('../IconButton/IconButton.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+require('react');
+var close = require('../../shared/assets/close.cjs');
+var check = require('../../shared/assets/check.cjs');
+var signCircle = require('../../shared/assets/sign-circle.cjs');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+var IconWithStatus = require('../IconWithStatus/IconWithStatus.cjs');
+var Typography = require('../Typography/Typography.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+var Button = require('../Button/Button.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('react-dom');
+require('../ShadowDOM/ShadowDOM.cjs');
+require('react-focus-lock');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../Alert/Alert.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../SendBalanceForm/SendBalanceForm.cjs');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var TransactionRow = require('../TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.cjs');
+
+const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
+    const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    const networkIcon = (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] })));
+};
+
+exports.TransactionStatusLayout = TransactionStatusLayout;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { FC, MouseEventHandler, ReactNode } from 'react';
 export type Props = {
     NetworkIcon?: ReactNode;
     amount: string;
@@ -6,6 +6,7 @@ export type Props = {
     displayPoweredByDynamicFooter?: boolean;
     networkCurrency: string;
     networkName: string;
-    onDone: () => void;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
+    onDone: MouseEventHandler<HTMLButtonElement>;
 };
 export declare const TransactionStatusLayout: FC<Props>;