@dynamic-labs/sdk-react-core 0.17.0-RC.2 → 0.17.0-RC.21

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.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type TokenBalanceCardProps = {
+    balance?: string;
+    chain: string;
+    currencySymbol: string;
+};
+export declare const TokenBalanceCard: FC<TokenBalanceCardProps>;
+export {};

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/SendBalancePageLayout/components/TokenBalanceCard/index.d.ts

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

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

@@ -0,0 +1 @@
+export * from './TokenBalanceCard';

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

@@ -0,0 +1,2 @@
+export { SendBalancePageLayout } from './SendBalancePageLayout';
+export type { SendBalancePageLayoutProps } from './SendBalancePageLayout';

package/src/lib/components/ShadowDOM/utils.cjs

@@ -5,12 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../context/ViewContext/ViewContext.cjs');
 require('react');
 var isSSR = require('../../shared/utils/functions/isSSR/isSSR.cjs');
+require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('ethers');
 require('../../shared/consts/index.cjs');
 
 const isShadowDOMFlagEnabled = () => {

package/src/lib/components/ShadowDOM/utils.js

@@ -1,12 +1,14 @@
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../context/ViewContext/ViewContext.js';
 import 'react';
 import { isSSR } from '../../shared/utils/functions/isSSR/isSSR.js';
+import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import 'ethers';
 import '../../shared/consts/index.js';
 
 const isShadowDOMFlagEnabled = () => {

package/src/lib/components/Spinner/spinner.cjs

@@ -6,11 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 require('react');
 var spinner = require('../../shared/assets/spinner.cjs');
+require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('ethers');
 require('../../shared/consts/index.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 

package/src/lib/components/Spinner/spinner.js

@@ -2,11 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import 'react';
 import { ReactComponent as SvgSpinner } from '../../shared/assets/spinner.js';
+import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import 'ethers';
 import '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 

package/src/lib/components/Toolkit/Toolkit.cjs

@@ -8,11 +8,14 @@ var Typography = require('../Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('ethers');
 var index = require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
 var isEmailProviderEnabled = require('../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
 var ThemeSwitch = require('./components/ThemeSwitch.cjs');

package/src/lib/components/Toolkit/Toolkit.js

@@ -4,11 +4,14 @@ import { Typography } from '../Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import 'ethers';
 import { toolkitZIndex } from '../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/multi-wallet';
 import { isEmailProviderEnabled } from '../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
 import { ThemeSwitch } from './components/ThemeSwitch.js';

package/src/lib/components/Toolkit/components/LoginWithEmailViewDisplayPriorityOrderSwitch.cjs

@@ -7,12 +7,14 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useInte
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('react');
 var isDisplayOrderPriorityForWeb3 = require('../../../shared/utils/functions/isDisplayOrderPriorityForWeb3/isDisplayOrderPriorityForWeb3.cjs');
 var isDisplayOrderPriorityForWeb2 = require('../../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.cjs');
+require('@dynamic-labs/utils');
 require('../../../utils/constants/colors.cjs');
+require('ethers');
 require('../../../shared/consts/index.cjs');
 var Switch = require('../../Switch/Switch.cjs');
 

package/src/lib/components/Toolkit/components/LoginWithEmailViewDisplayPriorityOrderSwitch.js

@@ -3,12 +3,14 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useIn
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import '../../../context/ViewContext/ViewContext.js';
 import 'react';
 import { isDisplayOrderPriorityForWeb3 } from '../../../shared/utils/functions/isDisplayOrderPriorityForWeb3/isDisplayOrderPriorityForWeb3.js';
 import { isDisplayOrderPriorityForWeb2 } from '../../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.js';
+import '@dynamic-labs/utils';
 import '../../../utils/constants/colors.js';
+import 'ethers';
 import '../../../shared/consts/index.js';
 import { Switch } from '../../Switch/Switch.js';
 

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

@@ -8,16 +8,21 @@ var reactDom = require('react-dom');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 var tooltipArrow = require('../../shared/assets/tooltip-arrow.cjs');
 var debounce = require('../../shared/utils/functions/debounce/debounce.cjs');
+require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('ethers');
 var index = require('../../shared/consts/index.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 require('../../config/ApiEndpoint.cjs');
+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');
@@ -28,7 +33,11 @@ require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../Transition/OpacityTransition/OpacityTransition.cjs');
 var useHover = require('../../utils/hooks/useHover/useHover.cjs');
 require('../IconButton/IconButton.cjs');
-require('ethers');
+require('../Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('../SendBalanceForm/SendBalanceForm.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

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

@@ -4,16 +4,21 @@ import { createPortal } from 'react-dom';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgTooltipArrow } from '../../shared/assets/tooltip-arrow.js';
 import { debounce } from '../../shared/utils/functions/debounce/debounce.js';
+import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import 'ethers';
 import { tooltipZIndex } from '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import '../../config/ApiEndpoint.js';
+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';
@@ -24,7 +29,11 @@ import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../Transition/OpacityTransition/OpacityTransition.js';
 import { useHover } from '../../utils/hooks/useHover/useHover.js';
 import '../IconButton/IconButton.js';
-import 'ethers';
+import '../Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import '../SendBalanceForm/SendBalanceForm.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
+var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs');
+var Icon = require('../Icon/Icon.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 signCircle = require('../../shared/assets/sign-circle.cjs');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+var IconButton = require('../IconButton/IconButton.cjs');
+var Typography = require('../Typography/Typography.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 AppOriginTile = require('../AppOriginTile/AppOriginTile.cjs');
+var Button = require('../Button/Button.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
+    const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { 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(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+};
+
+exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;

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

@@ -0,0 +1,17 @@
+import { FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
+type TransactionConfirmationPageLayoutProps = {
+    appLogoUrl?: string;
+    appName?: string;
+    appOrigin?: string;
+    disableSendButton?: boolean;
+    displayPoweredByDynamicFooter?: boolean;
+    error?: string;
+    isLoading: boolean;
+    onClickBack?: MouseEventHandler<HTMLButtonElement>;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
+    onClickSend: MouseEventHandler<HTMLButtonElement>;
+    title?: ReactNode;
+    warningMessage?: string;
+};
+export declare const TransactionConfirmationPageLayout: FC<PropsWithChildren<TransactionConfirmationPageLayoutProps>>;
+export {};

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ModalHeader } from '../ModalHeader/ModalHeader.js';
+import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
+import { Icon } from '../Icon/Icon.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 { ReactComponent as SvgSignCircle } from '../../shared/assets/sign-circle.js';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { Typography } from '../Typography/Typography.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 { AppOriginTile } from '../AppOriginTile/AppOriginTile.js';
+import { Button } from '../Button/Button.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
+
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
+    const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsx(SvgClose, {}) })));
+    const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignCircle, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: warningMessage && (jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'transaction-confirmation__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+};
+
+export { TransactionConfirmationPageLayout };

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../../../Typography/Typography.cjs');
+var Skeleton = require('../../../Skeleton/Skeleton.cjs');
+
+const TransactionRow = ({ label, title, children, isEmpty = false, isLoading = false, suffix, dataTestId, icon, }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-row' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-row__label' }, { children: label })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-row__content', "data-testid": dataTestId }, { children: [isLoading && (jsxRuntime.jsx(Skeleton.Skeleton, { count: 1, className: 'transaction-row__skeleton' })), isLoading === false && children !== undefined && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ title: title, color: isEmpty ? 'secondary' : 'primary', variant: 'body_normal', weight: isEmpty ? 'regular' : 'medium', truncate: true }, { children: children })), suffix && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular' }, { children: suffix }))), icon] }))] }))] })));
+
+exports.TransactionRow = TransactionRow;

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.d.ts

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+type TransactionRowProps = {
+    dataTestId?: string;
+    icon?: ReactNode;
+    isEmpty?: boolean;
+    isLoading?: boolean;
+    label: ReactNode;
+    suffix?: ReactNode;
+    title?: string;
+};
+export declare const TransactionRow: FC<PropsWithChildren<TransactionRowProps>>;
+export {};

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.js

@@ -0,0 +1,7 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Typography } from '../../../Typography/Typography.js';
+import { Skeleton } from '../../../Skeleton/Skeleton.js';
+
+const TransactionRow = ({ label, title, children, isEmpty = false, isLoading = false, suffix, dataTestId, icon, }) => (jsxs("div", Object.assign({ className: 'transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-row__label' }, { children: label })), jsxs("div", Object.assign({ className: 'transaction-row__content', "data-testid": dataTestId }, { children: [isLoading && (jsx(Skeleton, { count: 1, className: 'transaction-row__skeleton' })), isLoading === false && children !== undefined && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ title: title, color: isEmpty ? 'secondary' : 'primary', variant: 'body_normal', weight: isEmpty ? 'regular' : 'medium', truncate: true }, { children: children })), suffix && (jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular' }, { children: suffix }))), icon] }))] }))] })));
+
+export { TransactionRow };

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/index.d.ts

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

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

@@ -0,0 +1 @@
+export * from './TransactionRow';

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

@@ -0,0 +1,2 @@
+export { TransactionConfirmationPageLayout } from './TransactionConfirmationPageLayout';
+export { TransactionRow } from './components';

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+export type Props = {
+    arrowIconClassName?: string;
+    className?: string;
+    destinationAddress: string;
+    originAddress: string;
+    textClassName?: string;
+    walletIconClassName?: string;
+    walletName?: string;
+};
+export declare const TransactionOriginDestination: FC<Props>;

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

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

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ModalHeader } from '../ModalHeader/ModalHeader.js';
+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 SvgCheck } from '../../shared/assets/check.js';
+import { ReactComponent as SvgSignCircle } from '../../shared/assets/sign-circle.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 { IconWithStatus } from '../IconWithStatus/IconWithStatus.js';
+import { Typography } from '../Typography/Typography.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
+import { Button } from '../Button/Button.js';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ThemeContext/ThemeContext.js';
+import '../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import 'react-dom';
+import '../ShadowDOM/ShadowDOM.js';
+import 'react-focus-lock';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.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 '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { TransactionRow } from '../TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.js';
+
+const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
+    const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsx(SvgClose, {}) })));
+    const networkIcon = (jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
+    return (jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) })), jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsx(TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress(destinationAddress, 3, 3) })), jsxs(TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxs(TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsx(Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'transaction-status-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] })));
+};
+
+export { TransactionStatusLayout };