@dynamic-labs/sdk-react-core 0.17.0-RC.16 → 0.17.0-RC.17

package/CHANGELOG.md

@@ -1,4 +1,24 @@
 
+## [0.17.0-RC.17](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.16...v0.17.0-RC.17) (2023-05-17)
+
+
+### Features
+
+* distinguish walletconnect deeplink types ([#2093](https://github.com/dynamic-labs/DynamicAuth/issues/2093)) ([dcd29f7](https://github.com/dynamic-labs/DynamicAuth/commit/dcd29f7cfc5e6481aaaae502b3fc4e4d225f1fc1))
+* **social:** pass did token to verify request ([#2124](https://github.com/dynamic-labs/DynamicAuth/issues/2124)) ([60d73a5](https://github.com/dynamic-labs/DynamicAuth/commit/60d73a5f432d488979f33fe29666d1afa8fc0e8e))
+* support optional priority and stalltimeout for customer provided rpc urls ([#2091](https://github.com/dynamic-labs/DynamicAuth/issues/2091)) ([eebacda](https://github.com/dynamic-labs/DynamicAuth/commit/eebacda6a9d6ba583eff4e4e5a38eb9945c4825e))
+
+
+### Bug Fixes
+
+* add and remove event listeners for Solflare ([#2127](https://github.com/dynamic-labs/DynamicAuth/issues/2127)) ([978c7ba](https://github.com/dynamic-labs/DynamicAuth/commit/978c7ba0e3745e26d9dfc9b7c46a24adc913f02f))
+* get publicKey from provider if no address and publicKey are returned on connect ([#2126](https://github.com/dynamic-labs/DynamicAuth/issues/2126)) ([c9c9b2a](https://github.com/dynamic-labs/DynamicAuth/commit/c9c9b2af81f660aa651fc4b0e01cd3c823bb0229))
+* remove detect known secondary wallet modal ([#2117](https://github.com/dynamic-labs/DynamicAuth/issues/2117)) ([0e8bbd8](https://github.com/dynamic-labs/DynamicAuth/commit/0e8bbd8c385fe528a7af3ccc037812df9d6e0c84))
+* revert changes for select wallet to work with solflare ([#2120](https://github.com/dynamic-labs/DynamicAuth/issues/2120)) ([76cf228](https://github.com/dynamic-labs/DynamicAuth/commit/76cf228c495d6592da4c88b8a0d5a5fc480861ae))
+* setIsVerifying to false when selecting a connector ([#2133](https://github.com/dynamic-labs/DynamicAuth/issues/2133)) ([8ddeba3](https://github.com/dynamic-labs/DynamicAuth/commit/8ddeba377f35dfb4a104cd6bd7ee6315d574710f))
+* setPrimaryWallet and useSyncPrimaryWallet updates ([#2128](https://github.com/dynamic-labs/DynamicAuth/issues/2128)) ([fb47b17](https://github.com/dynamic-labs/DynamicAuth/commit/fb47b17ddc7f41c29f140a1a85a1e47dbf017fff))
+* update text color and add close button on extension not installed prompt ([#2122](https://github.com/dynamic-labs/DynamicAuth/issues/2122)) ([b4848a0](https://github.com/dynamic-labs/DynamicAuth/commit/b4848a0a8094b4ceac67e2667d277a9aa5e2e137))
+
 ## [0.17.0-RC.16](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.15...v0.17.0-RC.16) (2023-05-15)
 
 

package/package.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.17.0-RC.16";
+var version = "0.17.0-RC.17";
 var dependencies = {
 	"react-focus-lock": "^2.9.2",
 	"@dynamic-labs/iconic": "^0.1.19",
-	"@dynamic-labs/sdk-api": "0.0.192",
+	"@dynamic-labs/sdk-api": "0.0.195",
 	"@dynamic-labs/wallet-book": "^0.0.15",
 	"@hcaptcha/react-hcaptcha": "~1.4.4",
 	"country-list": "^2.3.0",

package/package.js

@@ -1,8 +1,8 @@
-var version = "0.17.0-RC.16";
+var version = "0.17.0-RC.17";
 var dependencies = {
 	"react-focus-lock": "^2.9.2",
 	"@dynamic-labs/iconic": "^0.1.19",
-	"@dynamic-labs/sdk-api": "0.0.192",
+	"@dynamic-labs/sdk-api": "0.0.195",
 	"@dynamic-labs/wallet-book": "^0.0.15",
 	"@hcaptcha/react-hcaptcha": "~1.4.4",
 	"country-list": "^2.3.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.17.0-RC.16",
+  "version": "0.17.0-RC.17",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -9,7 +9,7 @@
   "dependencies": {
     "react-focus-lock": "^2.9.2",
     "@dynamic-labs/iconic": "^0.1.19",
-    "@dynamic-labs/sdk-api": "0.0.192",
+    "@dynamic-labs/sdk-api": "0.0.195",
     "@dynamic-labs/wallet-book": "^0.0.15",
     "@hcaptcha/react-hcaptcha": "~1.4.4",
     "country-list": "^2.3.0",
@@ -17,12 +17,12 @@
     "formik": "^2.2.9",
     "qrcode": "1.5.1",
     "ethers": "^5.7.2",
-    "@dynamic-labs/logger": "0.17.0-RC.16",
-    "@dynamic-labs/multi-wallet": "0.17.0-RC.16",
-    "@dynamic-labs/rpc-providers": "0.17.0-RC.16",
-    "@dynamic-labs/types": "0.17.0-RC.16",
-    "@dynamic-labs/utils": "0.17.0-RC.16",
-    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.16"
+    "@dynamic-labs/logger": "0.17.0-RC.17",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.17",
+    "@dynamic-labs/rpc-providers": "0.17.0-RC.17",
+    "@dynamic-labs/types": "0.17.0-RC.17",
+    "@dynamic-labs/utils": "0.17.0-RC.17",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.17"
   },
   "devDependencies": {
     "semver": "^7.3.8"

package/src/lib/components/Divider/Divider.cjs

@@ -18,6 +18,7 @@ require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
 require('react-dom');
 require('react-focus-lock');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
@@ -34,6 +35,8 @@ require('../Alert/Alert.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 
-const Divider = ({ text }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'divider' }, { children: [jsxRuntime.jsx("div", { className: 'divider__dash' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'divider__text', variant: 'body_small', color: 'secondary' }, { children: text })), jsxRuntime.jsx("div", { className: 'divider__dash' })] })));
+const Divider = ({ text, className = '', fullWidth = false }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('divider', className, {
+        'divider__full-width': fullWidth,
+    }) }, { children: [jsxRuntime.jsx("div", { className: 'divider__dash' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'divider__text', variant: 'body_small', color: 'secondary' }, { children: text })), jsxRuntime.jsx("div", { className: 'divider__dash' })] })));
 
 exports.Divider = Divider;

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

@@ -1,4 +1,8 @@
 /// <reference types="react" />
-export declare const Divider: ({ text }: {
+type Props = {
+    className?: string;
+    fullWidth?: boolean;
     text: string;
-}) => JSX.Element;
+};
+export declare const Divider: ({ text, className, fullWidth }: Props) => JSX.Element;
+export {};

package/src/lib/components/Divider/Divider.js

@@ -14,6 +14,7 @@ import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
 import 'react-dom';
 import 'react-focus-lock';
 import '../Transition/ZoomTransition/ZoomTransition.js';
@@ -30,6 +31,8 @@ import '../Alert/Alert.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 
-const Divider = ({ text }) => (jsxs("div", Object.assign({ className: 'divider' }, { children: [jsx("div", { className: 'divider__dash' }), jsx(Typography, Object.assign({ className: 'divider__text', variant: 'body_small', color: 'secondary' }, { children: text })), jsx("div", { className: 'divider__dash' })] })));
+const Divider = ({ text, className = '', fullWidth = false }) => (jsxs("div", Object.assign({ className: classNames('divider', className, {
+        'divider__full-width': fullWidth,
+    }) }, { children: [jsx("div", { className: 'divider__dash' }), jsx(Typography, Object.assign({ className: 'divider__text', variant: 'body_small', color: 'secondary' }, { children: text })), jsx("div", { className: 'divider__dash' })] })));
 
 export { Divider };

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

@@ -35,3 +35,4 @@ export * from './OTPVerificationView';
 export * from './IconListTile';
 export * from './Transition';
 export * from './Popper';
+export * from './TransactionConfirmationPageLayout';

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -35,9 +35,9 @@ var ApiEndpoint = require('../../config/ApiEndpoint.cjs');
 var ThemeContext = require('../ThemeContext/ThemeContext.cjs');
 var useFetchNetworkConfigurations = require('../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.cjs');
 var useMultiWalletWidgetState = require('../../utils/hooks/multiWallet/useMultiWalletWidgetState/useMultiWalletWidgetState.cjs');
+var useSyncPrimaryWallet = require('../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.cjs');
 var useWalletEventListeners = require('../../utils/hooks/useWalletEventListeners/useWalletEventListeners.cjs');
 var LoadingContext = require('../LoadingContext/LoadingContext.cjs');
-var useSyncPrimaryWallet = require('../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.cjs');
 var useFetchWalletsForChainsMap = require('../../utils/hooks/useFetchWalletsForChainsMap/useFetchWalletsForChainsMap.cjs');
 var useHandleUnlinkWallet = require('../../utils/hooks/useHandleUnlinkWallet/useHandleUnlinkWallet.cjs');
 var app = require('../../app.cjs');
@@ -98,6 +98,8 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const [isVerifying, setIsVerifying] = React.useState(false);
     const { projectSettings, isLoading: isProjectSettingsLoading } = useFetchProjectSettings.useFetchProjectSettings({ authToken: getAuthToken.getAuthToken(), environmentId });
     const multiWallet = (_c = deprecatedMultiWallet !== null && deprecatedMultiWallet !== void 0 ? deprecatedMultiWallet : (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet) !== null && _c !== void 0 ? _c : false;
+    // ensures that when user comes back to site and primary wallet is out of sync, we don't show widget popup
+    const [showWidgetStatePopup, setShowWidgetStatePopup] = React.useState(!multiWallet);
     const { configurations: serverNetworkConfigurations, handleRemoveLsNetworks, } = useFetchNetworkConfigurations.useFetchNetworkConfigurations({
         authToken: getAuthToken.getAuthToken(),
         environmentId,
@@ -152,11 +154,6 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         currentWallet: primaryWallet !== null && primaryWallet !== void 0 ? primaryWallet : connectedWallet,
     });
     const walletForUserFacingContext = authMode === 'connect-and-sign' || user ? primaryWallet : connectedWallet;
-    useSyncPrimaryWallet.useSyncPrimaryWallet({
-        multiWalletWidgetState,
-        primaryWallet,
-        setMultiWalletWidgetState,
-    });
     const { clearAllWalletConnectSessions, clearOphanedWalletConnectSessions } = useClearWalletConnectSessions.useClearWalletConnectSessions({
         connectors: walletConnectors,
     });
@@ -200,6 +197,17 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         environmentId,
         walletConnectors,
     ]);
+    useSyncPrimaryWallet.useSyncPrimaryWallet({
+        computeConnectedStateForWallets,
+        handleLogOut,
+        multiWalletWidgetState,
+        primaryWallet,
+        secondaryWallets,
+        setMultiWalletWidgetState,
+        setPrimaryWallet,
+        setShowWidgetStatePopup,
+        showWidgetStatePopup,
+    });
     const handleUnlinkWallet = useHandleUnlinkWallet.useHandleUnlinkWallet({
         environmentId,
         primaryWalletId,
@@ -350,11 +358,13 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setShowAuthFlow,
             setShowDynamicUserProfile,
             setShowQrcodeModal,
+            setShowWidgetStatePopup,
             setUser,
             shadowDOMEnabled,
             showAuthFlow,
             showDynamicUserProfile,
             showQrcodeModal,
+            showWidgetStatePopup,
             signWithEmailWalletName,
             siweStatement,
             socialMediaIconUrl: ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportUrls) || socialMediaIconUrl,
@@ -437,6 +447,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         showAuthFlow,
         showDynamicUserProfile,
         showQrcodeModal,
+        showWidgetStatePopup,
         signWithEmailWalletName,
         siweStatement,
         socialMediaIconUrl,
@@ -470,8 +481,9 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     // DYN-1140 - Opens Widget when multiWalletWidgetState changes
     React.useEffect(() => {
         // If statement to secure SingleWallet widget
-        if (!multiWallet)
+        if (!multiWallet && multiWalletWidgetState !== 'awaiting_account_switch') {
             return;
+        }
         // We need to make sure that the user is logged in so that we do not try to display the widget before authorization
         if (user && multiWalletWidgetState !== 'idle' && !showDynamicUserProfile) {
             setShowDynamicUserProfile(true);

package/src/lib/context/DynamicContext/DynamicContext.d.ts

@@ -79,11 +79,13 @@ export interface IDynamicContext {
     setShowAuthFlow: Dispatch<SetStateAction<boolean>>;
     setShowDynamicUserProfile: Dispatch<SetStateAction<boolean>>;
     setShowQrcodeModal: Dispatch<SetStateAction<boolean>>;
+    setShowWidgetStatePopup: Dispatch<SetStateAction<boolean>>;
     setUser: Dispatch<SetStateAction<UserProfile | undefined>>;
     shadowDOMEnabled: boolean;
     showAuthFlow: boolean;
     showDynamicUserProfile: boolean;
     showQrcodeModal: boolean;
+    showWidgetStatePopup: boolean;
     signWithEmailWalletName?: string;
     siweStatement?: string;
     socialMediaIconUrl?: Record<string, string> | Record<SocialNetworkIconType, string>;

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -31,9 +31,9 @@ import ApiEndpoint from '../../config/ApiEndpoint.js';
 import { ThemeContextProvider } from '../ThemeContext/ThemeContext.js';
 import { useFetchNetworkConfigurations } from '../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.js';
 import { useMultiWalletWidgetState } from '../../utils/hooks/multiWallet/useMultiWalletWidgetState/useMultiWalletWidgetState.js';
+import { useSyncPrimaryWallet } from '../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.js';
 import { useWalletEventListeners } from '../../utils/hooks/useWalletEventListeners/useWalletEventListeners.js';
 import { LoadingContextProvider } from '../LoadingContext/LoadingContext.js';
-import { useSyncPrimaryWallet } from '../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.js';
 import { useFetchWalletsForChainsMap } from '../../utils/hooks/useFetchWalletsForChainsMap/useFetchWalletsForChainsMap.js';
 import { useHandleUnlinkWallet } from '../../utils/hooks/useHandleUnlinkWallet/useHandleUnlinkWallet.js';
 import { DynamicAuthFlow } from '../../app.js';
@@ -94,6 +94,8 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const [isVerifying, setIsVerifying] = useState(false);
     const { projectSettings, isLoading: isProjectSettingsLoading } = useFetchProjectSettings({ authToken: getAuthToken(), environmentId });
     const multiWallet = (_c = deprecatedMultiWallet !== null && deprecatedMultiWallet !== void 0 ? deprecatedMultiWallet : (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet) !== null && _c !== void 0 ? _c : false;
+    // ensures that when user comes back to site and primary wallet is out of sync, we don't show widget popup
+    const [showWidgetStatePopup, setShowWidgetStatePopup] = useState(!multiWallet);
     const { configurations: serverNetworkConfigurations, handleRemoveLsNetworks, } = useFetchNetworkConfigurations({
         authToken: getAuthToken(),
         environmentId,
@@ -148,11 +150,6 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         currentWallet: primaryWallet !== null && primaryWallet !== void 0 ? primaryWallet : connectedWallet,
     });
     const walletForUserFacingContext = authMode === 'connect-and-sign' || user ? primaryWallet : connectedWallet;
-    useSyncPrimaryWallet({
-        multiWalletWidgetState,
-        primaryWallet,
-        setMultiWalletWidgetState,
-    });
     const { clearAllWalletConnectSessions, clearOphanedWalletConnectSessions } = useClearWalletConnectSessions({
         connectors: walletConnectors,
     });
@@ -196,6 +193,17 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         environmentId,
         walletConnectors,
     ]);
+    useSyncPrimaryWallet({
+        computeConnectedStateForWallets,
+        handleLogOut,
+        multiWalletWidgetState,
+        primaryWallet,
+        secondaryWallets,
+        setMultiWalletWidgetState,
+        setPrimaryWallet,
+        setShowWidgetStatePopup,
+        showWidgetStatePopup,
+    });
     const handleUnlinkWallet = useHandleUnlinkWallet({
         environmentId,
         primaryWalletId,
@@ -346,11 +354,13 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setShowAuthFlow,
             setShowDynamicUserProfile,
             setShowQrcodeModal,
+            setShowWidgetStatePopup,
             setUser,
             shadowDOMEnabled,
             showAuthFlow,
             showDynamicUserProfile,
             showQrcodeModal,
+            showWidgetStatePopup,
             signWithEmailWalletName,
             siweStatement,
             socialMediaIconUrl: ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportUrls) || socialMediaIconUrl,
@@ -433,6 +443,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         showAuthFlow,
         showDynamicUserProfile,
         showQrcodeModal,
+        showWidgetStatePopup,
         signWithEmailWalletName,
         siweStatement,
         socialMediaIconUrl,
@@ -466,8 +477,9 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     // DYN-1140 - Opens Widget when multiWalletWidgetState changes
     useEffect(() => {
         // If statement to secure SingleWallet widget
-        if (!multiWallet)
+        if (!multiWallet && multiWalletWidgetState !== 'awaiting_account_switch') {
             return;
+        }
         // We need to make sure that the user is logged in so that we do not try to display the widget before authorization
         if (user && multiWalletWidgetState !== 'idle' && !showDynamicUserProfile) {
             setShowDynamicUserProfile(true);

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.cjs

@@ -82,6 +82,7 @@ const SocialRedirectContextProvider = ({ children, }) => {
                 yield verifyWallet({
                     oauth: {
                         accessToken: session.accessToken,
+                        didToken: session.didToken,
                         provider: providerFromParams,
                     },
                     publicWalletAddress: address,

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.js

@@ -78,6 +78,7 @@ const SocialRedirectContextProvider = ({ children, }) => {
                 yield verifyWallet({
                     oauth: {
                         accessToken: session.accessToken,
+                        didToken: session.didToken,
                         provider: providerFromParams,
                     },
                     publicWalletAddress: address,

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs

@@ -6,7 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ethers = require('ethers');
 var utils = require('@dynamic-labs/utils');
-var Typography = require('../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 var getChainIcon = require('../../shared/utils/functions/chain/getChainIcon.cjs');
@@ -17,8 +16,6 @@ var formatBigNumber = require('../../shared/utils/functions/formatBigNumber/form
 var usePreventPageScroll = require('../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
 require('@dynamic-labs/iconic');
 require('../../context/ViewContext/ViewContext.cjs');
-var close = require('../../shared/assets/close.cjs');
-var signCircle = require('../../shared/assets/sign-circle.cjs');
 var index = require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -38,22 +35,17 @@ require('../../context/CaptchaContext/CaptchaContext.cjs');
 var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
 var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var Button = require('../../components/Button/Button.cjs');
-var IconButton = require('../../components/IconButton/IconButton.cjs');
-var ModalHeader = require('../../components/ModalHeader/ModalHeader.cjs');
-var Alert = require('../../components/Alert/Alert.cjs');
-var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
-var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs');
-var AppOriginTile = require('../../components/AppOriginTile/AppOriginTile.cjs');
-var AnimatePresence = require('../../components/AnimatePresence/AnimatePresence.cjs');
+require('../../components/IconButton/IconButton.cjs');
+require('../../components/Alert/Alert.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-var VerticalDrawerTransition = require('../../components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
+var TransactionConfirmationPageLayout = require('../../components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs');
+var TransactionRow = require('../../components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.cjs');
 
-const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onTransactionResponseSuccess, appLogoUrl, appName, transaction, buttonText = 'Send', provider, }) => {
+const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onTransactionResponseSuccess, appLogoUrl, appName, transaction, provider, }) => {
     usePreventPageScroll.usePreventPageScroll(true);
     const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const didConfirmRef = React.useRef(false);
@@ -100,19 +92,20 @@ const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onT
         onTransactionResponseSuccess,
         onReject,
     ]);
-    const ChainIcon = getChainIcon.getChainIcon('evm');
-    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: handleOnReject, "data-testid": 'close', disabled: isLoading }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    const ChainIconComponent = getChainIcon.getChainIcon('evm');
+    const chainIcon = (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(ChainIconComponent, {}) })));
+    const errorMessage = transactionError && transactionErrorMessage.transactionErrorMessage(transactionError);
+    const warningMessage = React.useMemo(() => {
+        const showInsufficientFundsWarningMessage = hasInsufficientFunds && missingFunds;
+        if (!showInsufficientFundsWarningMessage)
+            return;
+        const amountLeft = formatBigNumber.formatBigNumber(missingFunds, 5);
+        return `Insufficient funds due to gas price increase from estimate. Please add ${amountLeft} ${currencySymbol} to continue.`;
+    }, [currencySymbol, hasInsufficientFunds, missingFunds]);
     return (jsxRuntime.jsx(Portal.Portal, Object.assign({ handleClose: handleOnReject, isShown: show, zIndex: index.authModalZIndex, withBackdrop: true, elementId: 'dynamic-send-transaction', transitionEvents: {
             onUnmount: handleOnModalUnmount,
-        } }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, 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: transactionError && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: transactionErrorMessage.transactionErrorMessage(transactionError) })) }))) })), 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.jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-info' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "From (You)" })), isTransactionFromAddressLoading && jsxRuntime.jsx(CoinCell, { children: "--" }), !isTransactionFromAddressLoading &&
-                                                    transactionFromAddress && (jsxRuntime.jsx(CoinCell, { children: shortenWalletAddress.shortenWalletAddress(transactionFromAddress, 4, 4) })), !isTransactionFromAddressLoading &&
-                                                    !transactionFromAddress && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "To" })), isTransactionToAddressLoading && jsxRuntime.jsx(CoinCell, { children: "--" }), !isTransactionToAddressLoading && !transactionToAddress && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isTransactionToAddressLoading && transactionToAddress && (jsxRuntime.jsx(CoinCell, { children: shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) }))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Amount" })), isEffectiveValueLoading && (jsxRuntime.jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}) }, { children: "--" }))), !isEffectiveValueLoading && transactionValue && (jsxRuntime.jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}), dataTestId: 'transaction-amount', title: formatBigNumber.formatBigNumber(transactionValue) }, { children: formatBigNumber.formatBigNumber(transactionValue, 10) }))), !isEffectiveValueLoading && !transactionValue && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular', symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}) }, { children: "0" })))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Gas (estimated)" })), isGasPriceLoading && jsxRuntime.jsx(CoinCell, { children: "--" }), !isGasPriceLoading && !gasEstimate && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isGasPriceLoading && gasEstimate && (jsxRuntime.jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}), dataTestId: 'transaction-gas-free', title: formatBigNumber.formatBigNumber(gasEstimate) }, { children: formatBigNumber.formatBigNumber(gasEstimate, 10) })))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Total" })), total && (jsxRuntime.jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}), dataTestId: 'transaction-total', title: formatBigNumber.formatBigNumber(total) }, { children: formatBigNumber.formatBigNumber(total, 10) }))), !total && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] }))] }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: hasInsufficientFunds && missingFunds && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsxs(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: ["Insufficient funds due to gas price increase from estimate. Please add ", formatBigNumber.formatBigNumber(missingFunds, 5), ' ', currencySymbol, " to continue."] })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" })), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: () => sendTransaction(), expanded: true, buttonRounded: 'default', loading: isLoading, disabled: isLoadingTransaction || hasInsufficientFunds }, { children: buttonText }))] })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }))] })) })));
-};
-const CoinCell = ({ children, symbol, icon, color = 'primary', weight = 'medium', dataTestId, title, }) => (jsxRuntime.jsxs("div", Object.assign({ "data-testid": dataTestId, style: {
-        alignItems: 'center',
-        display: 'flex',
-        gap: '0.25rem',
-        minWidth: 0,
-    } }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ title: title, color: color, variant: 'body_normal', weight: weight, truncate: true }, { children: children })), symbol && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular' }, { children: symbol }))), icon && jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: icon }))] })));
+        } }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation' }, { children: jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, Object.assign({ appOrigin: appOrigin, appLogoUrl: appLogoUrl, appName: appName, isLoading: isLoading, disableSendButton: isLoadingTransaction || hasInsufficientFunds, onClickSend: () => sendTransaction(), onClickClose: handleOnReject, displayPoweredByDynamicFooter: true, error: errorMessage, warningMessage: warningMessage, title: title }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'From (You)', isLoading: isTransactionFromAddressLoading, title: transactionFromAddress }, { children: shortenWalletAddress.shortenWalletAddress(transactionFromAddress, 4, 4) })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'To', isLoading: isTransactionToAddressLoading, title: transactionToAddress }, { children: transactionToAddress &&
+                            shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Amount', isLoading: isEffectiveValueLoading, isEmpty: !transactionValue, title: transactionValue && formatBigNumber.formatBigNumber(transactionValue), suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount' }, { children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Gas (estimated)', isEmpty: !gasEstimate, isLoading: isGasPriceLoading, title: gasEstimate && formatBigNumber.formatBigNumber(gasEstimate), suffix: gasEstimate && currencySymbol, icon: gasEstimate && chainIcon, dataTestId: 'transaction-gas-free' }, { children: gasEstimate ? formatBigNumber.formatBigNumber(gasEstimate, 10) : 'N/A' })), jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Total', isEmpty: !total, title: total && formatBigNumber.formatBigNumber(total), suffix: total && currencySymbol, icon: total && chainIcon, dataTestId: 'transaction-total' }, { children: total ? formatBigNumber.formatBigNumber(total, 10) : 'N/A' }))] })) })) })));
+};
 
 exports.TransactionConfirmationModal = TransactionConfirmationModal;