@dynamic-labs/sdk-react-core 4.29.2 → 4.29.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/package.cjs +1 -1
- package/package.js +1 -1
- package/package.json +11 -11
- package/src/lib/components/TransactionCard/SendBalanceTransactionCard.cjs +11 -13
- package/src/lib/components/TransactionCard/SendBalanceTransactionCard.d.ts +2 -1
- package/src/lib/components/TransactionCard/SendBalanceTransactionCard.js +11 -13
- package/src/lib/components/TransactionCard/TransactionCard.cjs +8 -11
- package/src/lib/components/TransactionCard/TransactionCard.js +8 -11
- package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs +1 -1
- package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
|
|
2
|
+
### [4.29.4](https://github.com/dynamic-labs/dynamic-auth/compare/v4.29.3...v4.29.4) (2025-08-26)
|
|
3
|
+
|
|
4
|
+
### [4.29.3](https://github.com/dynamic-labs/dynamic-auth/compare/v4.29.2...v4.29.3) (2025-08-26)
|
|
5
|
+
|
|
2
6
|
### [4.29.2](https://github.com/dynamic-labs/dynamic-auth/compare/v4.29.1...v4.29.2) (2025-08-25)
|
|
3
7
|
|
|
4
8
|
|
package/package.cjs
CHANGED
package/package.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dynamic-labs/sdk-react-core",
|
|
3
|
-
"version": "4.29.
|
|
3
|
+
"version": "4.29.4",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@dynamic-labs/sdk-api-core": "0.0.758",
|
|
6
6
|
"@dynamic-labs-sdk/client": "0.0.1-alpha.24",
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
"yup": "0.32.11",
|
|
16
16
|
"react-international-phone": "4.5.0",
|
|
17
17
|
"bs58": "5.0.0",
|
|
18
|
-
"@dynamic-labs/assert-package-version": "4.29.
|
|
19
|
-
"@dynamic-labs/iconic": "4.29.
|
|
20
|
-
"@dynamic-labs/logger": "4.29.
|
|
21
|
-
"@dynamic-labs/multi-wallet": "4.29.
|
|
22
|
-
"@dynamic-labs/rpc-providers": "4.29.
|
|
23
|
-
"@dynamic-labs/store": "4.29.
|
|
24
|
-
"@dynamic-labs/types": "4.29.
|
|
25
|
-
"@dynamic-labs/utils": "4.29.
|
|
26
|
-
"@dynamic-labs/wallet-book": "4.29.
|
|
27
|
-
"@dynamic-labs/wallet-connector-core": "4.29.
|
|
18
|
+
"@dynamic-labs/assert-package-version": "4.29.4",
|
|
19
|
+
"@dynamic-labs/iconic": "4.29.4",
|
|
20
|
+
"@dynamic-labs/logger": "4.29.4",
|
|
21
|
+
"@dynamic-labs/multi-wallet": "4.29.4",
|
|
22
|
+
"@dynamic-labs/rpc-providers": "4.29.4",
|
|
23
|
+
"@dynamic-labs/store": "4.29.4",
|
|
24
|
+
"@dynamic-labs/types": "4.29.4",
|
|
25
|
+
"@dynamic-labs/utils": "4.29.4",
|
|
26
|
+
"@dynamic-labs/wallet-book": "4.29.4",
|
|
27
|
+
"@dynamic-labs/wallet-connector-core": "4.29.4",
|
|
28
28
|
"eventemitter3": "5.0.1"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
@@ -4,14 +4,11 @@
|
|
|
4
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
5
|
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
var reactI18next = require('react-i18next');
|
|
8
|
-
require('react');
|
|
9
|
-
require('../../context/DynamicContext/DynamicContext.cjs');
|
|
10
|
-
require('../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
|
|
11
7
|
require('@dynamic-labs/sdk-api-core');
|
|
12
8
|
require('../../shared/logger.cjs');
|
|
13
9
|
require('@dynamic-labs/iconic');
|
|
14
10
|
require('@dynamic-labs/wallet-connector-core');
|
|
11
|
+
require('react');
|
|
15
12
|
var tooltip = require('../../shared/assets/tooltip.cjs');
|
|
16
13
|
require('../../context/ViewContext/ViewContext.cjs');
|
|
17
14
|
require('@dynamic-labs/wallet-book');
|
|
@@ -20,6 +17,12 @@ require('@dynamic-labs/utils');
|
|
|
20
17
|
require('../../utils/constants/colors.cjs');
|
|
21
18
|
require('../../utils/constants/values.cjs');
|
|
22
19
|
require('../../shared/consts/index.cjs');
|
|
20
|
+
var networksAndChains = require('../../utils/functions/networksAndChains/networksAndChains.cjs');
|
|
21
|
+
var Icon = require('../Icon/Icon.cjs');
|
|
22
|
+
var utils = require('../TransactionConfirmationPageLayout/utils.cjs');
|
|
23
|
+
var Typography = require('../Typography/Typography.cjs');
|
|
24
|
+
require('../../context/DynamicContext/DynamicContext.cjs');
|
|
25
|
+
require('../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
|
|
23
26
|
require('../../events/dynamicEvents.cjs');
|
|
24
27
|
require('../../../../_virtual/_tslib.cjs');
|
|
25
28
|
require('../../context/CaptchaContext/CaptchaContext.cjs');
|
|
@@ -27,7 +30,6 @@ require('../../context/ErrorContext/ErrorContext.cjs');
|
|
|
27
30
|
require('@dynamic-labs/multi-wallet');
|
|
28
31
|
require('react-international-phone');
|
|
29
32
|
require('../../store/state/nonce/nonce.cjs');
|
|
30
|
-
var networksAndChains = require('../../utils/functions/networksAndChains/networksAndChains.cjs');
|
|
31
33
|
require('@dynamic-labs-sdk/client/core');
|
|
32
34
|
require('../../client/client.cjs');
|
|
33
35
|
require('@dynamic-labs-sdk/client');
|
|
@@ -60,10 +62,9 @@ require('../../context/FieldsStateContext/FieldsStateContext.cjs');
|
|
|
60
62
|
require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
|
|
61
63
|
require('@dynamic-labs/rpc-providers');
|
|
62
64
|
require('../../store/state/walletOptions/walletOptions.cjs');
|
|
65
|
+
require('react-i18next');
|
|
63
66
|
require('../Accordion/components/AccordionItem/AccordionItem.cjs');
|
|
64
67
|
require('../Alert/Alert.cjs');
|
|
65
|
-
var Typography = require('../Typography/Typography.cjs');
|
|
66
|
-
var Icon = require('../Icon/Icon.cjs');
|
|
67
68
|
var Tooltip = require('../Tooltip/Tooltip.cjs');
|
|
68
69
|
require('../IconButton/IconButton.cjs');
|
|
69
70
|
require('../InlineWidget/InlineWidget.cjs');
|
|
@@ -97,7 +98,6 @@ require('../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
|
|
|
97
98
|
require('../../context/PasskeyContext/PasskeyContext.cjs');
|
|
98
99
|
require('../../context/OnrampContext/OnrampContext.cjs');
|
|
99
100
|
require('../../store/state/sendBalances.cjs');
|
|
100
|
-
var utils = require('../TransactionConfirmationPageLayout/utils.cjs');
|
|
101
101
|
var useNetworkConfigurationsFromProjectSettings = require('../../utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.cjs');
|
|
102
102
|
require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
|
|
103
103
|
require('../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
|
|
@@ -111,9 +111,8 @@ require('../../store/state/multichainBalances.cjs');
|
|
|
111
111
|
require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
|
|
112
112
|
var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
|
|
113
113
|
|
|
114
|
-
const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, }) => {
|
|
114
|
+
const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, }) => {
|
|
115
115
|
var _a;
|
|
116
|
-
const { t } = reactI18next.useTranslation();
|
|
117
116
|
const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
|
|
118
117
|
const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
|
|
119
118
|
evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
|
|
@@ -125,14 +124,13 @@ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol,
|
|
|
125
124
|
networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
|
|
126
125
|
networkInfo,
|
|
127
126
|
});
|
|
128
|
-
const renderTransferDetails = () => (jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsx("div", { className: 'transaction-card__assets-container', children: jsxRuntime.jsx("div", { className: 'transaction-card__out', children: jsxRuntime.jsxs("div", { className: 'transaction-card__info-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary',
|
|
127
|
+
const renderTransferDetails = () => (jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsx("div", { className: 'transaction-card__assets-container', children: jsxRuntime.jsx("div", { className: 'transaction-card__out', children: jsxRuntime.jsxs("div", { className: 'transaction-card__info-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: t('dyn_send_transaction.confirmation.data.transfer.send') }), jsxRuntime.jsxs("div", { className: 'transaction-card__amount-symbol', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__token-info', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__token-row', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'error-1', "data-testid": 'transaction-transfer-amount', children: ["-", valueRounded ||
|
|
129
128
|
((transaction === null || transaction === void 0 ? void 0 : transaction.value)
|
|
130
129
|
? transaction.format(transaction.value, {
|
|
131
130
|
precision: 6,
|
|
132
131
|
})
|
|
133
132
|
: '')] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: currencySymbol })] }), transactionValue && (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'error-1', "data-testid": 'transaction-transfer-amount-fiat', children: ["$", utils.getDisplayFiatPrice(Number(transactionValue) || Number(valueRounded) || 0, currentToken)] }))] }), jsxRuntime.jsx("div", { className: 'transaction-card__icon', children: jsxRuntime.jsx("div", { className: 'transaction-card__icon__container', children: jsxRuntime.jsx("img", { src: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.logoURI) ||
|
|
134
|
-
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl)
|
|
135
|
-
(chain === null || chain === void 0 ? void 0 : chain.icon), alt: currencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }) }) }));
|
|
133
|
+
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: currencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }) }) }));
|
|
136
134
|
const renderTransactionDetails = () => (jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsxs("div", { className: 'transaction-card__details', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress.shortenWalletAddress(transaction.to, 4, 4) })] }), !isGasSponsored && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', "data-testid": 'transaction-network', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxRuntime.jsxs("div", { className: 'transaction-card__network-info', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Ethereum' }), jsxRuntime.jsx("img", { src: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0]) || (chain === null || chain === void 0 ? void 0 : chain.icon), alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Network fees are paid to process your transaction', className: 'transaction-confirmation', children: jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'fee-tooltip', children: jsxRuntime.jsx(tooltip.ReactComponent, {}) }) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__value', children: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: Number(gasFiatValue) <= 0.01
|
|
137
135
|
? '<$0.01'
|
|
138
136
|
: `$${gasFiatValue}` })) : (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: [transaction.fee.gas
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TokenBalance } from '@dynamic-labs/sdk-api-core';
|
|
3
3
|
import { IUITransaction } from '@dynamic-labs/types';
|
|
4
|
-
export declare const SendBalanceTransactionCard: ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, }: {
|
|
4
|
+
export declare const SendBalanceTransactionCard: ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, }: {
|
|
5
5
|
transaction: IUITransaction;
|
|
6
6
|
currentToken: TokenBalance | undefined;
|
|
7
7
|
currencySymbol: string | undefined;
|
|
@@ -12,4 +12,5 @@ export declare const SendBalanceTransactionCard: ({ transaction, currentToken, c
|
|
|
12
12
|
totalGasFiatValue: string;
|
|
13
13
|
currency: string | undefined;
|
|
14
14
|
total: bigint | undefined;
|
|
15
|
+
t: any;
|
|
15
16
|
}) => JSX.Element;
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import { useTranslation } from 'react-i18next';
|
|
4
|
-
import 'react';
|
|
5
|
-
import '../../context/DynamicContext/DynamicContext.js';
|
|
6
|
-
import '../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
|
|
7
3
|
import '@dynamic-labs/sdk-api-core';
|
|
8
4
|
import '../../shared/logger.js';
|
|
9
5
|
import '@dynamic-labs/iconic';
|
|
10
6
|
import '@dynamic-labs/wallet-connector-core';
|
|
7
|
+
import 'react';
|
|
11
8
|
import { ReactComponent as SvgTooltip } from '../../shared/assets/tooltip.js';
|
|
12
9
|
import '../../context/ViewContext/ViewContext.js';
|
|
13
10
|
import '@dynamic-labs/wallet-book';
|
|
@@ -16,6 +13,12 @@ import '@dynamic-labs/utils';
|
|
|
16
13
|
import '../../utils/constants/colors.js';
|
|
17
14
|
import '../../utils/constants/values.js';
|
|
18
15
|
import '../../shared/consts/index.js';
|
|
16
|
+
import { getNetworkInfoEntry } from '../../utils/functions/networksAndChains/networksAndChains.js';
|
|
17
|
+
import { Icon } from '../Icon/Icon.js';
|
|
18
|
+
import { getDisplayFiatPrice } from '../TransactionConfirmationPageLayout/utils.js';
|
|
19
|
+
import { Typography } from '../Typography/Typography.js';
|
|
20
|
+
import '../../context/DynamicContext/DynamicContext.js';
|
|
21
|
+
import '../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
|
|
19
22
|
import '../../events/dynamicEvents.js';
|
|
20
23
|
import '../../../../_virtual/_tslib.js';
|
|
21
24
|
import '../../context/CaptchaContext/CaptchaContext.js';
|
|
@@ -23,7 +26,6 @@ import '../../context/ErrorContext/ErrorContext.js';
|
|
|
23
26
|
import '@dynamic-labs/multi-wallet';
|
|
24
27
|
import 'react-international-phone';
|
|
25
28
|
import '../../store/state/nonce/nonce.js';
|
|
26
|
-
import { getNetworkInfoEntry } from '../../utils/functions/networksAndChains/networksAndChains.js';
|
|
27
29
|
import '@dynamic-labs-sdk/client/core';
|
|
28
30
|
import '../../client/client.js';
|
|
29
31
|
import '@dynamic-labs-sdk/client';
|
|
@@ -56,10 +58,9 @@ import '../../context/FieldsStateContext/FieldsStateContext.js';
|
|
|
56
58
|
import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
|
|
57
59
|
import '@dynamic-labs/rpc-providers';
|
|
58
60
|
import '../../store/state/walletOptions/walletOptions.js';
|
|
61
|
+
import 'react-i18next';
|
|
59
62
|
import '../Accordion/components/AccordionItem/AccordionItem.js';
|
|
60
63
|
import '../Alert/Alert.js';
|
|
61
|
-
import { Typography } from '../Typography/Typography.js';
|
|
62
|
-
import { Icon } from '../Icon/Icon.js';
|
|
63
64
|
import { Tooltip } from '../Tooltip/Tooltip.js';
|
|
64
65
|
import '../IconButton/IconButton.js';
|
|
65
66
|
import '../InlineWidget/InlineWidget.js';
|
|
@@ -93,7 +94,6 @@ import '../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
|
|
|
93
94
|
import '../../context/PasskeyContext/PasskeyContext.js';
|
|
94
95
|
import '../../context/OnrampContext/OnrampContext.js';
|
|
95
96
|
import '../../store/state/sendBalances.js';
|
|
96
|
-
import { getDisplayFiatPrice } from '../TransactionConfirmationPageLayout/utils.js';
|
|
97
97
|
import { useNetworkConfigurationsFromProjectSettings } from '../../utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.js';
|
|
98
98
|
import '../../store/state/connectorsInitializing/connectorsInitializing.js';
|
|
99
99
|
import '../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
|
|
@@ -107,9 +107,8 @@ import '../../store/state/multichainBalances.js';
|
|
|
107
107
|
import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
|
|
108
108
|
import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
|
|
109
109
|
|
|
110
|
-
const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, }) => {
|
|
110
|
+
const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, }) => {
|
|
111
111
|
var _a;
|
|
112
|
-
const { t } = useTranslation();
|
|
113
112
|
const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
|
|
114
113
|
const networkInfo = useNetworkConfigurationsFromProjectSettings({
|
|
115
114
|
evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
|
|
@@ -121,14 +120,13 @@ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol,
|
|
|
121
120
|
networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
|
|
122
121
|
networkInfo,
|
|
123
122
|
});
|
|
124
|
-
const renderTransferDetails = () => (jsx("div", { className: 'transaction-card', children: jsx("div", { className: 'transaction-card__assets-container', children: jsx("div", { className: 'transaction-card__out', children: jsxs("div", { className: 'transaction-card__info-container', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary',
|
|
123
|
+
const renderTransferDetails = () => (jsx("div", { className: 'transaction-card', children: jsx("div", { className: 'transaction-card__assets-container', children: jsx("div", { className: 'transaction-card__out', children: jsxs("div", { className: 'transaction-card__info-container', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', children: t('dyn_send_transaction.confirmation.data.transfer.send') }), jsxs("div", { className: 'transaction-card__amount-symbol', children: [jsxs("div", { className: 'transaction-card__token-info', children: [jsxs("div", { className: 'transaction-card__token-row', children: [jsxs(Typography, { variant: 'body_normal', color: 'error-1', "data-testid": 'transaction-transfer-amount', children: ["-", valueRounded ||
|
|
125
124
|
((transaction === null || transaction === void 0 ? void 0 : transaction.value)
|
|
126
125
|
? transaction.format(transaction.value, {
|
|
127
126
|
precision: 6,
|
|
128
127
|
})
|
|
129
128
|
: '')] }), jsx(Typography, { variant: 'body_normal', color: 'secondary', children: currencySymbol })] }), transactionValue && (jsxs(Typography, { variant: 'body_small', color: 'error-1', "data-testid": 'transaction-transfer-amount-fiat', children: ["$", getDisplayFiatPrice(Number(transactionValue) || Number(valueRounded) || 0, currentToken)] }))] }), jsx("div", { className: 'transaction-card__icon', children: jsx("div", { className: 'transaction-card__icon__container', children: jsx("img", { src: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.logoURI) ||
|
|
130
|
-
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl)
|
|
131
|
-
(chain === null || chain === void 0 ? void 0 : chain.icon), alt: currencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }) }) }));
|
|
129
|
+
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: currencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }) }) }));
|
|
132
130
|
const renderTransactionDetails = () => (jsx("div", { className: 'transaction-card', children: jsxs("div", { className: 'transaction-card__details', children: [jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress(transaction.to, 4, 4) })] }), !isGasSponsored && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', "data-testid": 'transaction-network', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxs("div", { className: 'transaction-card__network-info', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Ethereum' }), jsx("img", { src: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0]) || (chain === null || chain === void 0 ? void 0 : chain.icon), alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsx(Tooltip, { content: 'Network fees are paid to process your transaction', className: 'transaction-confirmation', children: jsx(Icon, { size: 'small', className: 'fee-tooltip', children: jsx(SvgTooltip, {}) }) })] }), jsx("div", { className: 'transaction-card__value', children: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) ? (jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: Number(gasFiatValue) <= 0.01
|
|
133
131
|
? '<$0.01'
|
|
134
132
|
: `$${gasFiatValue}` })) : (jsxs(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: [transaction.fee.gas
|
|
@@ -97,6 +97,7 @@ require('../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
|
|
|
97
97
|
require('../../context/PasskeyContext/PasskeyContext.cjs');
|
|
98
98
|
require('../../context/OnrampContext/OnrampContext.cjs');
|
|
99
99
|
require('../../store/state/sendBalances.cjs');
|
|
100
|
+
var useNetworkConfigurationsFromProjectSettings = require('../../utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.cjs');
|
|
100
101
|
require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
|
|
101
102
|
require('../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
|
|
102
103
|
require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
|
|
@@ -116,8 +117,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
116
117
|
const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, }) => {
|
|
117
118
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
118
119
|
const { t } = reactI18next.useTranslation();
|
|
119
|
-
const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
|
|
120
|
-
const networkInfo = {
|
|
120
|
+
const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
|
|
121
|
+
const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
|
|
122
|
+
evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
|
|
123
|
+
projectSettings,
|
|
124
|
+
});
|
|
121
125
|
const { chain } = useFetchChain.useFetchChain(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
|
|
122
126
|
const networkInfoEntry = networksAndChains.getNetworkInfoEntry({
|
|
123
127
|
chain: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain,
|
|
@@ -153,14 +157,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
153
157
|
// for solana, the fee is included in the outgoing assets already
|
|
154
158
|
return (outgoingAssetsTotal +
|
|
155
159
|
(nativeCurrencySymbol === 'SOL' || isGasSponsored ? 0 : feeInUsd || 0));
|
|
156
|
-
}, [
|
|
157
|
-
simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets,
|
|
158
|
-
nativeCurrencySymbol,
|
|
159
|
-
feeInUsd,
|
|
160
|
-
blockaidOn,
|
|
161
|
-
isAATransaction,
|
|
162
|
-
isGasSponsored,
|
|
163
|
-
]);
|
|
160
|
+
}, [simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets, nativeCurrencySymbol, feeInUsd]);
|
|
164
161
|
const getTotalAmountInUsdDisplay = (totalAmountInUsd) => {
|
|
165
162
|
if (!totalAmountInUsd)
|
|
166
163
|
return undefined;
|
|
@@ -191,7 +188,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
191
188
|
}
|
|
192
189
|
return `$${usdPrice.toFixed(2)}`;
|
|
193
190
|
};
|
|
194
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `transaction-card__${transfer.direction}`, children: jsxRuntime.jsxs("div", { className: 'transaction-card__info-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary',
|
|
191
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `transaction-card__${transfer.direction}`, children: jsxRuntime.jsxs("div", { className: 'transaction-card__info-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: transfer.direction === 'in' ? 'Receive' : 'Send' }), jsxRuntime.jsxs("div", { className: 'transaction-card__amount-symbol', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__token-info', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__token-row', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: transfer.direction === 'in' ? 'green-1' : 'error-1', children: [transfer.direction === 'out' ? '-' : '+', getAmountDisplay()] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: (_b = (transfer.asset.symbol || transfer.asset.name)) !== null && _b !== void 0 ? _b : nativeCurrencySymbol })] }), Number(transfer.usdPrice) > 0 && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: transfer.direction === 'in' ? 'green-1' : 'error-1', children: getUsdPriceDisplay() }))] }), jsxRuntime.jsx("div", { className: 'transaction-card__icon', children: jsxRuntime.jsx("div", { className: 'transaction-card__icon__container', children: jsxRuntime.jsx("img", { src: transfer.asset.logoUrl ||
|
|
195
192
|
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: (_c = transfer.asset.symbol) !== null && _c !== void 0 ? _c : nativeCurrencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: 'transaction-card__divider' }))] }));
|
|
196
193
|
};
|
|
197
194
|
const inAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
|
|
@@ -93,6 +93,7 @@ import '../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
|
|
|
93
93
|
import '../../context/PasskeyContext/PasskeyContext.js';
|
|
94
94
|
import '../../context/OnrampContext/OnrampContext.js';
|
|
95
95
|
import '../../store/state/sendBalances.js';
|
|
96
|
+
import { useNetworkConfigurationsFromProjectSettings } from '../../utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.js';
|
|
96
97
|
import '../../store/state/connectorsInitializing/connectorsInitializing.js';
|
|
97
98
|
import '../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
|
|
98
99
|
import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
|
|
@@ -108,8 +109,11 @@ import { useInternalDynamicContext } from '../../context/DynamicContext/useDynam
|
|
|
108
109
|
const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, }) => {
|
|
109
110
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
110
111
|
const { t } = useTranslation();
|
|
111
|
-
const { primaryWallet } = useInternalDynamicContext();
|
|
112
|
-
const networkInfo = {
|
|
112
|
+
const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
|
|
113
|
+
const networkInfo = useNetworkConfigurationsFromProjectSettings({
|
|
114
|
+
evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
|
|
115
|
+
projectSettings,
|
|
116
|
+
});
|
|
113
117
|
const { chain } = useFetchChain(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
|
|
114
118
|
const networkInfoEntry = getNetworkInfoEntry({
|
|
115
119
|
chain: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain,
|
|
@@ -145,14 +149,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
145
149
|
// for solana, the fee is included in the outgoing assets already
|
|
146
150
|
return (outgoingAssetsTotal +
|
|
147
151
|
(nativeCurrencySymbol === 'SOL' || isGasSponsored ? 0 : feeInUsd || 0));
|
|
148
|
-
}, [
|
|
149
|
-
simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets,
|
|
150
|
-
nativeCurrencySymbol,
|
|
151
|
-
feeInUsd,
|
|
152
|
-
blockaidOn,
|
|
153
|
-
isAATransaction,
|
|
154
|
-
isGasSponsored,
|
|
155
|
-
]);
|
|
152
|
+
}, [simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets, nativeCurrencySymbol, feeInUsd]);
|
|
156
153
|
const getTotalAmountInUsdDisplay = (totalAmountInUsd) => {
|
|
157
154
|
if (!totalAmountInUsd)
|
|
158
155
|
return undefined;
|
|
@@ -183,7 +180,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
183
180
|
}
|
|
184
181
|
return `$${usdPrice.toFixed(2)}`;
|
|
185
182
|
};
|
|
186
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: `transaction-card__${transfer.direction}`, children: jsxs("div", { className: 'transaction-card__info-container', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary',
|
|
183
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: `transaction-card__${transfer.direction}`, children: jsxs("div", { className: 'transaction-card__info-container', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', children: transfer.direction === 'in' ? 'Receive' : 'Send' }), jsxs("div", { className: 'transaction-card__amount-symbol', children: [jsxs("div", { className: 'transaction-card__token-info', children: [jsxs("div", { className: 'transaction-card__token-row', children: [jsxs(Typography, { variant: 'body_normal', color: transfer.direction === 'in' ? 'green-1' : 'error-1', children: [transfer.direction === 'out' ? '-' : '+', getAmountDisplay()] }), jsx(Typography, { variant: 'body_normal', color: 'primary', children: (_b = (transfer.asset.symbol || transfer.asset.name)) !== null && _b !== void 0 ? _b : nativeCurrencySymbol })] }), Number(transfer.usdPrice) > 0 && (jsx(Typography, { variant: 'body_small', color: transfer.direction === 'in' ? 'green-1' : 'error-1', children: getUsdPriceDisplay() }))] }), jsx("div", { className: 'transaction-card__icon', children: jsx("div", { className: 'transaction-card__icon__container', children: jsx("img", { src: transfer.asset.logoUrl ||
|
|
187
184
|
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: (_c = transfer.asset.symbol) !== null && _c !== void 0 ? _c : nativeCurrencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }), index < array.length - 1 && (jsx("div", { className: 'transaction-card__divider' }))] }));
|
|
188
185
|
};
|
|
189
186
|
const inAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
|
package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs
CHANGED
|
@@ -142,7 +142,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
|
|
|
142
142
|
const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
|
|
143
143
|
const gasFiatValue = fiatUtils.getGasFiatValue(currentToken, transaction, nativePrice);
|
|
144
144
|
const totalGasFiatValue = fiatUtils.getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
|
|
145
|
-
return hideModal ? null : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), !sendBalanceTransaction && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__banner', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.banner', children: t('dyn_send_transaction.data.banner') }) })), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [!sendBalanceTransaction ? (jsxRuntime.jsx(TransactionCard.TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev', simulationResult: simulationResult, recipient: recipient })) : (jsxRuntime.jsx(SendBalanceTransactionCard.SendBalanceTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = utils.getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency === null || currency === void 0 ? void 0 : currency.symbol, total: total })), children && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children }))] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: alert && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [(onClickBack || onClickClose) && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'primary', buttonPadding: 'medium', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'medium', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', dataTestId: 'transaction-confirmation-send', children: t('dyn_send_transaction.confirmation.send') })] }), jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, {}), displayPoweredByDynamicFooter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__divider' }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' })] }))] })] }));
|
|
145
|
+
return hideModal ? null : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), !sendBalanceTransaction && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__banner', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.banner', children: t('dyn_send_transaction.data.banner') }) })), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [!sendBalanceTransaction ? (jsxRuntime.jsx(TransactionCard.TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev', simulationResult: simulationResult, recipient: recipient })) : (jsxRuntime.jsx(SendBalanceTransactionCard.SendBalanceTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = utils.getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency === null || currency === void 0 ? void 0 : currency.symbol, total: total, t: t })), children && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children }))] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: alert && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [(onClickBack || onClickClose) && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'primary', buttonPadding: 'medium', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'medium', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', dataTestId: 'transaction-confirmation-send', children: t('dyn_send_transaction.confirmation.send') })] }), jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, {}), displayPoweredByDynamicFooter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__divider' }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' })] }))] })] }));
|
|
146
146
|
};
|
|
147
147
|
|
|
148
148
|
exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;
|
package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js
CHANGED
|
@@ -138,7 +138,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
|
|
|
138
138
|
const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }));
|
|
139
139
|
const gasFiatValue = getGasFiatValue(currentToken, transaction, nativePrice);
|
|
140
140
|
const totalGasFiatValue = getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
|
|
141
|
-
return hideModal ? null : (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), !sendBalanceTransaction && (jsx("div", { className: 'transaction-confirmation__banner', children: jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.banner', children: t('dyn_send_transaction.data.banner') }) })), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'transaction-confirmation__body', children: [jsxs("div", { className: 'transaction-confirmation__content', children: [!sendBalanceTransaction ? (jsx(TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev', simulationResult: simulationResult, recipient: recipient })) : (jsx(SendBalanceTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency === null || currency === void 0 ? void 0 : currency.symbol, total: total })), children && (jsx("div", { className: 'transaction-confirmation__rows', children: children }))] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: alert && (jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [(onClickBack || onClickClose) && (jsx(TypographyButton, { buttonVariant: 'primary', buttonPadding: 'medium', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'medium', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', dataTestId: 'transaction-confirmation-send', children: t('dyn_send_transaction.confirmation.send') })] }), jsx(NeedHelpSection, {}), displayPoweredByDynamicFooter && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-confirmation__divider' }), jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' })] }))] })] }));
|
|
141
|
+
return hideModal ? null : (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), !sendBalanceTransaction && (jsx("div", { className: 'transaction-confirmation__banner', children: jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.banner', children: t('dyn_send_transaction.data.banner') }) })), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'transaction-confirmation__body', children: [jsxs("div", { className: 'transaction-confirmation__content', children: [!sendBalanceTransaction ? (jsx(TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev', simulationResult: simulationResult, recipient: recipient })) : (jsx(SendBalanceTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency === null || currency === void 0 ? void 0 : currency.symbol, total: total, t: t })), children && (jsx("div", { className: 'transaction-confirmation__rows', children: children }))] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: alert && (jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [(onClickBack || onClickClose) && (jsx(TypographyButton, { buttonVariant: 'primary', buttonPadding: 'medium', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'medium', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', dataTestId: 'transaction-confirmation-send', children: t('dyn_send_transaction.confirmation.send') })] }), jsx(NeedHelpSection, {}), displayPoweredByDynamicFooter && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-confirmation__divider' }), jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' })] }))] })] }));
|
|
142
142
|
};
|
|
143
143
|
|
|
144
144
|
export { TransactionConfirmationPageLayout };
|