@dynamic-labs/sdk-react-core 0.16.12-viem.0 → 0.16.12

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

@@ -24,7 +24,7 @@ require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTrans
 require('../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../../config/ApiEndpoint.cjs');
 require('../../../../../context/ErrorContext/ErrorContext.cjs');
-require('../../../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs');
+require('ethers');
 require('../../../../../context/MockContext/MockContext.cjs');
 require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

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

@@ -20,7 +20,7 @@ import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransi
 import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../../config/ApiEndpoint.js';
 import '../../../../../context/ErrorContext/ErrorContext.js';
-import '../../../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.js';
+import 'ethers';
 import '../../../../../context/MockContext/MockContext.js';
 import '../../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

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

@@ -27,7 +27,7 @@ require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransiti
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../config/ApiEndpoint.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('../../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs');
+require('ethers');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

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

@@ -23,7 +23,7 @@ import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransitio
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../config/ApiEndpoint.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import '../../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.js';
+import 'ethers';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

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

@@ -26,7 +26,7 @@ require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransiti
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../config/ApiEndpoint.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('../../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs');
+require('ethers');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

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

@@ -22,7 +22,7 @@ import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransitio
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../config/ApiEndpoint.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import '../../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.js';
+import 'ethers';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -24,7 +24,7 @@ require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../config/ApiEndpoint.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
-require('../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs');
+require('ethers');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -20,7 +20,7 @@ import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.j
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../config/ApiEndpoint.js';
 import '../../../context/ErrorContext/ErrorContext.js';
-import '../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.js';
+import 'ethers';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs

@@ -23,7 +23,7 @@ var Portal = require('../../components/Portal/Portal.cjs');
 require('react-dom');
 require('../../config/ApiEndpoint.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
-require('../TransactionConfirmationModal/TransactionConfirmationModal.cjs');
+require('ethers');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
@@ -46,7 +46,7 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
         didConfirmRef.current = false;
         setShow(false);
     }, [setShow]);
-    const { isLoading, mutate: confirm, data: signedMessage, error: signMessageError, } = useMutation.useMutation(handler, {
+    const { isLoading, mutate: confirm, data: signedMessage, error: signMessageError, } = useMutation.useMutation(() => handler(message), {
         onSuccess: () => {
             didConfirmRef.current = true;
             setShow(false);

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js

@@ -19,7 +19,7 @@ import { Portal } from '../../components/Portal/Portal.js';
 import 'react-dom';
 import '../../config/ApiEndpoint.js';
 import '../../context/ErrorContext/ErrorContext.js';
-import '../TransactionConfirmationModal/TransactionConfirmationModal.js';
+import 'ethers';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
@@ -42,7 +42,7 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
         didConfirmRef.current = false;
         setShow(false);
     }, [setShow]);
-    const { isLoading, mutate: confirm, data: signedMessage, error: signMessageError, } = useMutation(handler, {
+    const { isLoading, mutate: confirm, data: signedMessage, error: signMessageError, } = useMutation(() => handler(message), {
         onSuccess: () => {
             didConfirmRef.current = true;
             setShow(false);

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.types.d.ts

@@ -1,11 +1,11 @@
 import { FC } from 'react';
-import { Bytes } from '../../shared/types';
+import { ethers } from 'ethers';
 export type SignMessageConfirmationModalProps = {
     appLogoUrl?: string;
     appName?: string;
     appOrigin: string;
-    handler: () => Promise<string>;
-    message: string | Bytes;
+    handler: (message: string | ethers.utils.Bytes) => Promise<string>;
+    message: string | ethers.utils.Bytes;
     onReject: (error: unknown) => void;
     onSignMessage: (signedMessage: string) => void;
 };

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var viem = require('viem');
+var ethers = require('ethers');
 var multiWallet = require('@dynamic-labs/multi-wallet');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
@@ -27,6 +27,8 @@ var Portal = require('../../components/Portal/Portal.cjs');
 require('react-dom');
 require('../../config/ApiEndpoint.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
+var useFetchCurrency = require('../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs');
+var transactionErrorMessage = require('./helpers/transactionErrorMessage.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
@@ -41,11 +43,9 @@ var AppOriginTile = require('../../components/AppOriginTile/AppOriginTile.cjs');
 var AnimatePresence = require('../../components/AnimatePresence/AnimatePresence.cjs');
 var VerticalDrawerAnimation = require('../../components/AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.cjs');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
-var useFetchCurrency = require('../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs');
-var transactionErrorMessage = require('./helpers/transactionErrorMessage.cjs');
 
-const digitsLimitSub = BigInt(1e8);
-const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onTransactionResponseSuccess, appLogoUrl, appName, transaction, buttonText = 'Send', }) => {
+const digitsLimitSub = 1e8;
+const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onTransactionResponseSuccess, appLogoUrl, appName, transaction, buttonText = 'Send', provider, }) => {
     usePreventPageScroll.usePreventPageScroll(true);
     const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const didConfirmRef = React.useRef(false);
@@ -78,22 +78,20 @@ const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onT
     ]);
     const { data: effectiveValue, isLoading: isEffectiveValueLoading } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const val = yield value;
-        return val ? BigInt(val) : undefined;
+        return val ? ethers.ethers.BigNumber.from(val) : undefined;
     }));
     const { data: effectiveGasPrice, isLoading: isEffectiveGasPriceLoading } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const publicClient = yield primaryWallet.connector.getWeb3Provider();
-        const gasPrice = yield publicClient.getGasPrice();
-        const estimatedGas = yield publicClient.estimateGas(Object.assign({ account: from, to,
-            value }, transaction));
+        const gasPrice = yield provider.getGasPrice();
+        const estimatedGas = yield provider.estimateGas(transaction);
         return gasPrice && estimatedGas
-            ? BigInt(gasPrice) * estimatedGas
+            ? ethers.ethers.BigNumber.from(gasPrice).mul(estimatedGas)
             : undefined;
     }));
     const { data: effectiveToAddress, isLoading: isEffectiveToAddressLoading } = usePromise.usePromise(() => to);
     const { data: effectiveFromAddress, isLoading: isEffectiveFromAddressLoading, } = usePromise.usePromise(() => from);
     const total = React.useMemo(() => {
         if (effectiveGasPrice !== undefined && effectiveValue !== undefined) {
-            return effectiveGasPrice + effectiveValue;
+            return effectiveGasPrice.add(effectiveValue);
         }
         return effectiveValue || effectiveGasPrice;
     }, [effectiveGasPrice, effectiveValue]);
@@ -109,24 +107,14 @@ const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onT
     const ChainIcon = getChainIcon.getChainIcon('evm');
     const formatValue = (value, sub) => {
         if (!sub) {
-            return viem.formatEther(value);
+            return ethers.ethers.utils.formatEther(value);
         }
-        return viem.formatEther(value - (value % sub));
+        return ethers.ethers.utils.formatEther(value.sub(value.mod(sub)));
     };
     const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: handleOnReject, "data-testid": 'close', disabled: isLoading }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     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(VerticalDrawerAnimation.VerticalDrawerAnimation, {}) }, { children: transactionError && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(ErrorContainer.ErrorContainer, { 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)" })), isEffectiveFromAddressLoading && jsxRuntime.jsx(CoinCell, { children: "--" }), !isEffectiveFromAddressLoading && effectiveFromAddress && (jsxRuntime.jsx(CoinCell, { children: shortenWalletAddress.shortenWalletAddress(effectiveFromAddress, 4, 4) })), !isEffectiveFromAddressLoading && !effectiveFromAddress && (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" })), isEffectiveToAddressLoading && jsxRuntime.jsx(CoinCell, { children: "--" }), !isEffectiveToAddressLoading && !effectiveToAddress && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveToAddressLoading && effectiveToAddress && (jsxRuntime.jsx(CoinCell, { children: shortenWalletAddress.shortenWalletAddress(effectiveToAddress, 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 && Boolean(effectiveValue) && (jsxRuntime.jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}), dataTestId: 'transaction-amount', 
-                                                    // justification: Boolean(effectiveValue) is checked above
-                                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                                    title: formatValue(effectiveValue) }, { children: formatValue(effectiveValue, digitsLimitSub) }))), !isEffectiveValueLoading && !effectiveValue && (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: "Gas (estimated)" })), isEffectiveGasPriceLoading && jsxRuntime.jsx(CoinCell, { children: "--" }), !isEffectiveGasPriceLoading && !effectiveGasPrice && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveGasPriceLoading &&
-                                                    Boolean(effectiveGasPrice) && (jsxRuntime.jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}), dataTestId: 'transaction-gas-free', 
-                                                    // justification: Boolean(effectiveValue) is checked above
-                                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                                    title: formatValue(effectiveGasPrice) }, { children: formatValue(effectiveGasPrice, digitsLimitSub) })))] })), 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" })), Boolean(total) && (jsxRuntime.jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}), dataTestId: 'transaction-total', 
-                                                    // justification: Boolean(total) is checked above
-                                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                                    title: formatValue(total) }, { children: formatValue(total, digitsLimitSub) }))), !total && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] }))] }))] })), 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 }, { children: buttonText }))] })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }))] })) })));
+        } }, { 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(VerticalDrawerAnimation.VerticalDrawerAnimation, {}) }, { children: transactionError && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(ErrorContainer.ErrorContainer, { 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)" })), isEffectiveFromAddressLoading && jsxRuntime.jsx(CoinCell, { children: "--" }), !isEffectiveFromAddressLoading && effectiveFromAddress && (jsxRuntime.jsx(CoinCell, { children: shortenWalletAddress.shortenWalletAddress(effectiveFromAddress, 4, 4) })), !isEffectiveFromAddressLoading && !effectiveFromAddress && (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" })), isEffectiveToAddressLoading && jsxRuntime.jsx(CoinCell, { children: "--" }), !isEffectiveToAddressLoading && !effectiveToAddress && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveToAddressLoading && effectiveToAddress && (jsxRuntime.jsx(CoinCell, { children: shortenWalletAddress.shortenWalletAddress(effectiveToAddress, 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 && effectiveValue && (jsxRuntime.jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}), dataTestId: 'transaction-amount', title: formatValue(effectiveValue) }, { children: formatValue(effectiveValue, digitsLimitSub) }))), !isEffectiveValueLoading && !effectiveValue && (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: "Gas (estimated)" })), isEffectiveGasPriceLoading && jsxRuntime.jsx(CoinCell, { children: "--" }), !isEffectiveGasPriceLoading && !effectiveGasPrice && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveGasPriceLoading && effectiveGasPrice && (jsxRuntime.jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsxRuntime.jsx(ChainIcon, {}), dataTestId: 'transaction-gas-free', title: formatValue(effectiveGasPrice) }, { children: formatValue(effectiveGasPrice, digitsLimitSub) })))] })), 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: formatValue(total) }, { children: formatValue(total, digitsLimitSub) }))), !total && (jsxRuntime.jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] }))] }))] })), 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 }, { 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',

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.js

@@ -1,7 +1,7 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useCallback, useMemo } from 'react';
-import { formatEther } from 'viem';
+import { ethers } from 'ethers';
 import { DynamicError } from '@dynamic-labs/multi-wallet';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
@@ -23,6 +23,8 @@ import { Portal } from '../../components/Portal/Portal.js';
 import 'react-dom';
 import '../../config/ApiEndpoint.js';
 import '../../context/ErrorContext/ErrorContext.js';
+import { useFetchCurrency } from '../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js';
+import { transactionErrorMessage } from './helpers/transactionErrorMessage.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';
@@ -37,11 +39,9 @@ import { AppOriginTile } from '../../components/AppOriginTile/AppOriginTile.js';
 import { AnimatePresence } from '../../components/AnimatePresence/AnimatePresence.js';
 import { VerticalDrawerAnimation } from '../../components/AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
-import { useFetchCurrency } from '../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js';
-import { transactionErrorMessage } from './helpers/transactionErrorMessage.js';
 
-const digitsLimitSub = BigInt(1e8);
-const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onTransactionResponseSuccess, appLogoUrl, appName, transaction, buttonText = 'Send', }) => {
+const digitsLimitSub = 1e8;
+const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onTransactionResponseSuccess, appLogoUrl, appName, transaction, buttonText = 'Send', provider, }) => {
     usePreventPageScroll(true);
     const { primaryWallet } = useInternalDynamicContext();
     const didConfirmRef = useRef(false);
@@ -74,22 +74,20 @@ const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onT
     ]);
     const { data: effectiveValue, isLoading: isEffectiveValueLoading } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
         const val = yield value;
-        return val ? BigInt(val) : undefined;
+        return val ? ethers.BigNumber.from(val) : undefined;
     }));
     const { data: effectiveGasPrice, isLoading: isEffectiveGasPriceLoading } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
-        const publicClient = yield primaryWallet.connector.getWeb3Provider();
-        const gasPrice = yield publicClient.getGasPrice();
-        const estimatedGas = yield publicClient.estimateGas(Object.assign({ account: from, to,
-            value }, transaction));
+        const gasPrice = yield provider.getGasPrice();
+        const estimatedGas = yield provider.estimateGas(transaction);
         return gasPrice && estimatedGas
-            ? BigInt(gasPrice) * estimatedGas
+            ? ethers.BigNumber.from(gasPrice).mul(estimatedGas)
             : undefined;
     }));
     const { data: effectiveToAddress, isLoading: isEffectiveToAddressLoading } = usePromise(() => to);
     const { data: effectiveFromAddress, isLoading: isEffectiveFromAddressLoading, } = usePromise(() => from);
     const total = useMemo(() => {
         if (effectiveGasPrice !== undefined && effectiveValue !== undefined) {
-            return effectiveGasPrice + effectiveValue;
+            return effectiveGasPrice.add(effectiveValue);
         }
         return effectiveValue || effectiveGasPrice;
     }, [effectiveGasPrice, effectiveValue]);
@@ -105,24 +103,14 @@ const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onT
     const ChainIcon = getChainIcon('evm');
     const formatValue = (value, sub) => {
         if (!sub) {
-            return formatEther(value);
+            return ethers.utils.formatEther(value);
         }
-        return formatEther(value - (value % sub));
+        return ethers.utils.formatEther(value.sub(value.mod(sub)));
     };
     const closeButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: handleOnReject, "data-testid": 'close', disabled: isLoading }, { children: jsx(SvgClose, {}) })));
     return (jsx(Portal, Object.assign({ handleClose: handleOnReject, isShown: show, zIndex: authModalZIndex, withBackdrop: true, elementId: 'dynamic-send-transaction', transitionEvents: {
             onUnmount: handleOnModalUnmount,
-        } }, { children: jsxs("div", Object.assign({ className: 'transaction-confirmation' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, 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(VerticalDrawerAnimation, {}) }, { children: transactionError && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(ErrorContainer, { children: transactionErrorMessage(transactionError) }) }))) })), 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 }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-info' }, { children: [jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "From (You)" })), isEffectiveFromAddressLoading && jsx(CoinCell, { children: "--" }), !isEffectiveFromAddressLoading && effectiveFromAddress && (jsx(CoinCell, { children: shortenWalletAddress(effectiveFromAddress, 4, 4) })), !isEffectiveFromAddressLoading && !effectiveFromAddress && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "To" })), isEffectiveToAddressLoading && jsx(CoinCell, { children: "--" }), !isEffectiveToAddressLoading && !effectiveToAddress && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveToAddressLoading && effectiveToAddress && (jsx(CoinCell, { children: shortenWalletAddress(effectiveToAddress, 4, 4) }))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Amount" })), isEffectiveValueLoading && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}) }, { children: "--" }))), !isEffectiveValueLoading && Boolean(effectiveValue) && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}), dataTestId: 'transaction-amount', 
-                                                    // justification: Boolean(effectiveValue) is checked above
-                                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                                    title: formatValue(effectiveValue) }, { children: formatValue(effectiveValue, digitsLimitSub) }))), !isEffectiveValueLoading && !effectiveValue && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Gas (estimated)" })), isEffectiveGasPriceLoading && jsx(CoinCell, { children: "--" }), !isEffectiveGasPriceLoading && !effectiveGasPrice && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveGasPriceLoading &&
-                                                    Boolean(effectiveGasPrice) && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}), dataTestId: 'transaction-gas-free', 
-                                                    // justification: Boolean(effectiveValue) is checked above
-                                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                                    title: formatValue(effectiveGasPrice) }, { children: formatValue(effectiveGasPrice, digitsLimitSub) })))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Total" })), Boolean(total) && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}), dataTestId: 'transaction-total', 
-                                                    // justification: Boolean(total) is checked above
-                                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                                    title: formatValue(total) }, { children: formatValue(total, digitsLimitSub) }))), !total && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] }))] }))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" })), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: () => sendTransaction(), expanded: true, buttonRounded: 'default', loading: isLoading, disabled: isLoadingTransaction }, { children: buttonText }))] })), jsx(PoweredByDynamic, {})] }))] })) })));
+        } }, { children: jsxs("div", Object.assign({ className: 'transaction-confirmation' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, 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(VerticalDrawerAnimation, {}) }, { children: transactionError && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(ErrorContainer, { children: transactionErrorMessage(transactionError) }) }))) })), 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 }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-info' }, { children: [jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "From (You)" })), isEffectiveFromAddressLoading && jsx(CoinCell, { children: "--" }), !isEffectiveFromAddressLoading && effectiveFromAddress && (jsx(CoinCell, { children: shortenWalletAddress(effectiveFromAddress, 4, 4) })), !isEffectiveFromAddressLoading && !effectiveFromAddress && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "To" })), isEffectiveToAddressLoading && jsx(CoinCell, { children: "--" }), !isEffectiveToAddressLoading && !effectiveToAddress && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveToAddressLoading && effectiveToAddress && (jsx(CoinCell, { children: shortenWalletAddress(effectiveToAddress, 4, 4) }))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Amount" })), isEffectiveValueLoading && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}) }, { children: "--" }))), !isEffectiveValueLoading && effectiveValue && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}), dataTestId: 'transaction-amount', title: formatValue(effectiveValue) }, { children: formatValue(effectiveValue, digitsLimitSub) }))), !isEffectiveValueLoading && !effectiveValue && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Gas (estimated)" })), isEffectiveGasPriceLoading && jsx(CoinCell, { children: "--" }), !isEffectiveGasPriceLoading && !effectiveGasPrice && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveGasPriceLoading && effectiveGasPrice && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}), dataTestId: 'transaction-gas-free', title: formatValue(effectiveGasPrice) }, { children: formatValue(effectiveGasPrice, digitsLimitSub) })))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Total" })), total && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}), dataTestId: 'transaction-total', title: formatValue(total) }, { children: formatValue(total, digitsLimitSub) }))), !total && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] }))] }))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" })), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: () => sendTransaction(), expanded: true, buttonRounded: 'default', loading: isLoading, disabled: isLoadingTransaction }, { children: buttonText }))] })), jsx(PoweredByDynamic, {})] }))] })) })));
 };
 const CoinCell = ({ children, symbol, icon, color = 'primary', weight = 'medium', dataTestId, title, }) => (jsxs("div", Object.assign({ "data-testid": dataTestId, style: {
         alignItems: 'center',

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.types.d.ts

@@ -1,14 +1,15 @@
 import { FC, ReactNode } from 'react';
-import { TransactionReceipt, TransactionRequest } from 'viem';
+import { ethers } from 'ethers';
 export type TransactionConfirmationModalProps = {
     appLogoUrl?: string;
     appName?: string;
     appOrigin: string;
     buttonText?: ReactNode;
-    handler: (transaction: TransactionRequest) => Promise<TransactionReceipt>;
+    handler: (transaction: ethers.utils.Deferrable<ethers.providers.TransactionRequest>) => Promise<ethers.providers.TransactionResponse>;
     onReject: (error: unknown) => void;
-    onTransactionResponseSuccess: (transactionResponse: TransactionReceipt) => void;
+    onTransactionResponseSuccess: (transactionResponse: ethers.providers.TransactionResponse) => void;
+    provider: ethers.providers.Web3Provider;
     title: ReactNode;
-    transaction: TransactionRequest;
+    transaction: ethers.utils.Deferrable<ethers.providers.TransactionRequest>;
 };
 export type TransactionConfirmationModalComponent = FC<TransactionConfirmationModalProps>;

package/src/lib/shared/types/index.d.ts

@@ -2,14 +2,6 @@ import React from 'react';
 import type { NetworkConfigurationMap, EvmRpcProvider, SolanaRpcProvider } from '@dynamic-labs/multi-wallet';
 import type { FetchPublicAddressOpts, WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { WalletProviderEnum, ProjectSettings, UserFields, NameServiceData, JwtVerifiedCredential } from '@dynamic-labs/sdk-api';
-export type Deferrable<T> = {
-    [K in keyof T]: T[K] | Promise<T[K]>;
-};
-interface ArrayLike<T> {
-    readonly [n: number]: T;
-    readonly length: number;
-}
-export type Bytes = ArrayLike<number>;
 export type BrowserName = 'brave' | 'chrome' | 'edge' | 'firefox' | 'safari';
 export type Wallet = {
     address: string;
@@ -141,4 +133,3 @@ export type DynamicEventsCallbacks = {
     onUnlinkSuccess?: (unlinkedWallet: JwtVerifiedCredential) => void;
     onUserProfileUpdate?: (user: UserProfile) => void;
 };
-export {};