@dynamic-labs/sdk-react-core 4.96.3 → 4.96.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 +10 -0
- package/package.cjs +1 -1
- package/package.js +1 -1
- package/package.json +12 -12
- package/src/lib/components/TransactionCard/TransactionCard.cjs +21 -13
- package/src/lib/components/TransactionCard/TransactionCard.d.ts +2 -0
- package/src/lib/components/TransactionCard/TransactionCard.js +21 -13
- 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,14 @@
|
|
|
1
1
|
|
|
2
|
+
### [4.96.4](https://github.com/dynamic-labs/dynamic-auth/compare/v4.96.3...v4.96.4) (2026-08-26)
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
### Bug Fixes
|
|
6
|
+
|
|
7
|
+
* remediate high-severity tar, nanoid and js-yaml vulnerabilities (v4) ([#12269](https://github.com/dynamic-labs/dynamic-auth/issues/12269)) ([15a32fe](https://github.com/dynamic-labs/dynamic-auth/commit/15a32fe023038efaa3298d6792997a86b5f0cb0b))
|
|
8
|
+
* **transaction-card:** use walletConnector prop for network/fee instead of primaryWallet [v4 backport] ([#12065](https://github.com/dynamic-labs/dynamic-auth/issues/12065)) ([699c42b](https://github.com/dynamic-labs/dynamic-auth/commit/699c42b876eba7e1b0129eda27fa096ba7e567fc)), closes [#12063](https://github.com/dynamic-labs/dynamic-auth/issues/12063)
|
|
9
|
+
* **waas-svm:** instrument sponsorship retry attempts [v4 backport] ([#12282](https://github.com/dynamic-labs/dynamic-auth/issues/12282)) ([b2f2392](https://github.com/dynamic-labs/dynamic-auth/commit/b2f23929093ebb48214c1ddb65b3e56a58e9f8da))
|
|
10
|
+
* **wallet-connect:** reopen WalletConnect IndexedDB when the browser closes the connection (v4 backport) ([#12263](https://github.com/dynamic-labs/dynamic-auth/issues/12263)) ([4d0105d](https://github.com/dynamic-labs/dynamic-auth/commit/4d0105d2343c5bf75f89382e4be01b75413569e7))
|
|
11
|
+
|
|
2
12
|
### [4.96.3](https://github.com/dynamic-labs/dynamic-auth/compare/v4.96.2...v4.96.3) (2026-08-19)
|
|
3
13
|
|
|
4
14
|
|
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.96.
|
|
3
|
+
"version": "4.96.4",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@dynamic-labs/sdk-api-core": "0.12.0",
|
|
6
6
|
"@dynamic-labs-sdk/client": "1.27.1",
|
|
@@ -18,17 +18,17 @@
|
|
|
18
18
|
"react-i18next": "13.5.0",
|
|
19
19
|
"react-international-phone": "4.5.0",
|
|
20
20
|
"yup": "0.32.11",
|
|
21
|
-
"@dynamic-labs/assert-package-version": "4.96.
|
|
22
|
-
"@dynamic-labs/iconic": "4.96.
|
|
23
|
-
"@dynamic-labs/locale": "4.96.
|
|
24
|
-
"@dynamic-labs/logger": "4.96.
|
|
25
|
-
"@dynamic-labs/multi-wallet": "4.96.
|
|
26
|
-
"@dynamic-labs/rpc-providers": "4.96.
|
|
27
|
-
"@dynamic-labs/store": "4.96.
|
|
28
|
-
"@dynamic-labs/types": "4.96.
|
|
29
|
-
"@dynamic-labs/utils": "4.96.
|
|
30
|
-
"@dynamic-labs/wallet-book": "4.96.
|
|
31
|
-
"@dynamic-labs/wallet-connector-core": "4.96.
|
|
21
|
+
"@dynamic-labs/assert-package-version": "4.96.4",
|
|
22
|
+
"@dynamic-labs/iconic": "4.96.4",
|
|
23
|
+
"@dynamic-labs/locale": "4.96.4",
|
|
24
|
+
"@dynamic-labs/logger": "4.96.4",
|
|
25
|
+
"@dynamic-labs/multi-wallet": "4.96.4",
|
|
26
|
+
"@dynamic-labs/rpc-providers": "4.96.4",
|
|
27
|
+
"@dynamic-labs/store": "4.96.4",
|
|
28
|
+
"@dynamic-labs/types": "4.96.4",
|
|
29
|
+
"@dynamic-labs/utils": "4.96.4",
|
|
30
|
+
"@dynamic-labs/wallet-book": "4.96.4",
|
|
31
|
+
"@dynamic-labs/wallet-connector-core": "4.96.4",
|
|
32
32
|
"eventemitter3": "5.0.1"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
@@ -126,21 +126,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
126
126
|
|
|
127
127
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
128
128
|
|
|
129
|
-
const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, }) => {
|
|
130
|
-
var _a, _b, _c, _d, _e, _f
|
|
129
|
+
const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, walletConnector, }) => {
|
|
130
|
+
var _a, _b, _c, _d, _e, _f;
|
|
131
131
|
const { t } = reactI18next.useTranslation();
|
|
132
132
|
const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
|
|
133
133
|
const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
|
|
134
134
|
evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
|
|
135
135
|
projectSettings,
|
|
136
136
|
});
|
|
137
|
-
const
|
|
137
|
+
const activeConnector = walletConnector !== null && walletConnector !== void 0 ? walletConnector : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
|
|
138
|
+
const { chain } = useFetchChain.useFetchChain(activeConnector);
|
|
138
139
|
const networkInfoEntry = networksAndChains.getNetworkInfoEntry({
|
|
139
|
-
chain:
|
|
140
|
+
chain: activeConnector === null || activeConnector === void 0 ? void 0 : activeConnector.connectedChain,
|
|
140
141
|
networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
|
|
141
142
|
networkInfo,
|
|
142
143
|
});
|
|
143
|
-
const { symbol: nativeCurrencySymbol, decimals: nativeCurrencyDecimals } = (
|
|
144
|
+
const { symbol: nativeCurrencySymbol, decimals: nativeCurrencyDecimals } = (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _a !== void 0 ? _a : {};
|
|
144
145
|
const blockaidOn = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.showTotalFiat;
|
|
145
146
|
const feeInUsd = React.useMemo(() => {
|
|
146
147
|
var _a;
|
|
@@ -169,7 +170,14 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
169
170
|
// for solana, the fee is included in the outgoing assets already
|
|
170
171
|
return (outgoingAssetsTotal +
|
|
171
172
|
(nativeCurrencySymbol === 'SOL' || isGasSponsored ? 0 : feeInUsd || 0));
|
|
172
|
-
}, [
|
|
173
|
+
}, [
|
|
174
|
+
simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets,
|
|
175
|
+
nativeCurrencySymbol,
|
|
176
|
+
feeInUsd,
|
|
177
|
+
blockaidOn,
|
|
178
|
+
isAATransaction,
|
|
179
|
+
isGasSponsored,
|
|
180
|
+
]);
|
|
173
181
|
const getTotalAmountInUsdDisplay = (totalAmountInUsd) => {
|
|
174
182
|
if (!totalAmountInUsd)
|
|
175
183
|
return undefined;
|
|
@@ -178,9 +186,9 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
178
186
|
: `~$${totalAmountInUsd.toFixed(2)}`;
|
|
179
187
|
};
|
|
180
188
|
const renderAssetTransfer = (transfer, index, array) => {
|
|
181
|
-
var _a, _b
|
|
189
|
+
var _a, _b;
|
|
182
190
|
if (['NATIVE', 'SOL', 'ETH'].includes(transfer.asset.type) &&
|
|
183
|
-
(
|
|
191
|
+
(activeConnector === null || activeConnector === void 0 ? void 0 : activeConnector.connectedChain) === 'SOL' &&
|
|
184
192
|
transaction.fee.gas) {
|
|
185
193
|
transfer.amount = (Number(transfer.amount) -
|
|
186
194
|
Number(transaction.fee.gas) / Math.pow(10, 9)).toString();
|
|
@@ -200,10 +208,10 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
200
208
|
}
|
|
201
209
|
return `$${usdPrice.toFixed(2)}`;
|
|
202
210
|
};
|
|
203
|
-
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: (
|
|
204
|
-
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: (
|
|
211
|
+
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: (_a = (transfer.asset.symbol || transfer.asset.name)) !== null && _a !== void 0 ? _a : 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 ||
|
|
212
|
+
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: (_b = transfer.asset.symbol) !== null && _b !== void 0 ? _b : nativeCurrencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: 'transaction-card__divider' }))] }));
|
|
205
213
|
};
|
|
206
|
-
const inAssets = ((
|
|
214
|
+
const inAssets = ((_b = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _b === void 0 ? void 0 : _b.flatMap((assetDiff) => {
|
|
207
215
|
var _a;
|
|
208
216
|
return ((_a = assetDiff.transferIn) === null || _a === void 0 ? void 0 : _a.map((inTransfer) => {
|
|
209
217
|
var _a, _b;
|
|
@@ -215,7 +223,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
215
223
|
});
|
|
216
224
|
})) || [];
|
|
217
225
|
})) || [];
|
|
218
|
-
const outAssets = ((
|
|
226
|
+
const outAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
|
|
219
227
|
var _a;
|
|
220
228
|
return ((_a = assetDiff.transferOut) === null || _a === void 0 ? void 0 : _a.map((outTransfer) => {
|
|
221
229
|
var _a, _b;
|
|
@@ -250,7 +258,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
250
258
|
return `-- ${nativeCurrencySymbol}`;
|
|
251
259
|
};
|
|
252
260
|
return (jsxRuntime.jsxs("div", { className: 'transaction-card-container', children: [allAssets.length > 0 && (jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsx("div", { className: 'transaction-card__assets-container', children: allAssets.map((asset, index, array) => (jsxRuntime.jsx(React__default["default"].Fragment, { children: renderAssetTransfer(asset, index, array) }, `asset-${index}`))) }) })), jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsxs("div", { className: 'transaction-card__details', children: [recipient && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.recipient', children: t('dyn_send_transaction.confirmation.data.recipient') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-recipient', children: shortenWalletAddress.shortenWalletAddress(recipient) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__divider' })] })), !recipient &&
|
|
253
|
-
(transaction.to || ((
|
|
261
|
+
(transaction.to || ((_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _d === void 0 ? void 0 : _d[0])) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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((_e = transaction.to) !== null && _e !== void 0 ? _e : (_f = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _f === void 0 ? void 0 : _f[0]) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__divider' })] })), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', 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], alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), !isGasSponsored && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: getGasFeeDisplay() }) })] })] })), blockaidOn &&
|
|
254
262
|
totalAmountInUsd !== undefined &&
|
|
255
263
|
totalAmountInUsd > 0 &&
|
|
256
264
|
!(isAATransaction && !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', weight: 'bold', copykey: 'dyn_send_transaction.confirmation.data.total', children: t('dyn_send_transaction.confirmation.data.total') }), jsxRuntime.jsx("div", { className: 'transaction-card__total-amount', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-total', children: getTotalAmountInUsdDisplay(totalAmountInUsd) }) })] })] }))] }) })] }));
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IUITransaction } from '@dynamic-labs/types';
|
|
3
3
|
import { SimulateTransactionResponse as SimulationResult } from '@dynamic-labs/sdk-api-core';
|
|
4
|
+
import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
|
|
4
5
|
type TransactionCardProps = {
|
|
5
6
|
transaction: IUITransaction;
|
|
6
7
|
simulationResult: SimulationResult | undefined;
|
|
7
8
|
isGasSponsored: boolean;
|
|
8
9
|
isAATransaction: boolean;
|
|
9
10
|
recipient?: string;
|
|
11
|
+
walletConnector?: WalletConnector;
|
|
10
12
|
};
|
|
11
13
|
export declare const TransactionCard: React.FC<TransactionCardProps>;
|
|
12
14
|
export {};
|
|
@@ -118,21 +118,22 @@ import '../../store/state/multichainBalances.js';
|
|
|
118
118
|
import '@dynamic-labs/store';
|
|
119
119
|
import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
|
|
120
120
|
|
|
121
|
-
const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, }) => {
|
|
122
|
-
var _a, _b, _c, _d, _e, _f
|
|
121
|
+
const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, walletConnector, }) => {
|
|
122
|
+
var _a, _b, _c, _d, _e, _f;
|
|
123
123
|
const { t } = useTranslation();
|
|
124
124
|
const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
|
|
125
125
|
const networkInfo = useNetworkConfigurationsFromProjectSettings({
|
|
126
126
|
evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
|
|
127
127
|
projectSettings,
|
|
128
128
|
});
|
|
129
|
-
const
|
|
129
|
+
const activeConnector = walletConnector !== null && walletConnector !== void 0 ? walletConnector : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
|
|
130
|
+
const { chain } = useFetchChain(activeConnector);
|
|
130
131
|
const networkInfoEntry = getNetworkInfoEntry({
|
|
131
|
-
chain:
|
|
132
|
+
chain: activeConnector === null || activeConnector === void 0 ? void 0 : activeConnector.connectedChain,
|
|
132
133
|
networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
|
|
133
134
|
networkInfo,
|
|
134
135
|
});
|
|
135
|
-
const { symbol: nativeCurrencySymbol, decimals: nativeCurrencyDecimals } = (
|
|
136
|
+
const { symbol: nativeCurrencySymbol, decimals: nativeCurrencyDecimals } = (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _a !== void 0 ? _a : {};
|
|
136
137
|
const blockaidOn = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.showTotalFiat;
|
|
137
138
|
const feeInUsd = useMemo(() => {
|
|
138
139
|
var _a;
|
|
@@ -161,7 +162,14 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
161
162
|
// for solana, the fee is included in the outgoing assets already
|
|
162
163
|
return (outgoingAssetsTotal +
|
|
163
164
|
(nativeCurrencySymbol === 'SOL' || isGasSponsored ? 0 : feeInUsd || 0));
|
|
164
|
-
}, [
|
|
165
|
+
}, [
|
|
166
|
+
simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets,
|
|
167
|
+
nativeCurrencySymbol,
|
|
168
|
+
feeInUsd,
|
|
169
|
+
blockaidOn,
|
|
170
|
+
isAATransaction,
|
|
171
|
+
isGasSponsored,
|
|
172
|
+
]);
|
|
165
173
|
const getTotalAmountInUsdDisplay = (totalAmountInUsd) => {
|
|
166
174
|
if (!totalAmountInUsd)
|
|
167
175
|
return undefined;
|
|
@@ -170,9 +178,9 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
170
178
|
: `~$${totalAmountInUsd.toFixed(2)}`;
|
|
171
179
|
};
|
|
172
180
|
const renderAssetTransfer = (transfer, index, array) => {
|
|
173
|
-
var _a, _b
|
|
181
|
+
var _a, _b;
|
|
174
182
|
if (['NATIVE', 'SOL', 'ETH'].includes(transfer.asset.type) &&
|
|
175
|
-
(
|
|
183
|
+
(activeConnector === null || activeConnector === void 0 ? void 0 : activeConnector.connectedChain) === 'SOL' &&
|
|
176
184
|
transaction.fee.gas) {
|
|
177
185
|
transfer.amount = (Number(transfer.amount) -
|
|
178
186
|
Number(transaction.fee.gas) / Math.pow(10, 9)).toString();
|
|
@@ -192,10 +200,10 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
192
200
|
}
|
|
193
201
|
return `$${usdPrice.toFixed(2)}`;
|
|
194
202
|
};
|
|
195
|
-
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: (
|
|
196
|
-
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: (
|
|
203
|
+
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: (_a = (transfer.asset.symbol || transfer.asset.name)) !== null && _a !== void 0 ? _a : 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 ||
|
|
204
|
+
(networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: (_b = transfer.asset.symbol) !== null && _b !== void 0 ? _b : nativeCurrencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }), index < array.length - 1 && (jsx("div", { className: 'transaction-card__divider' }))] }));
|
|
197
205
|
};
|
|
198
|
-
const inAssets = ((
|
|
206
|
+
const inAssets = ((_b = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _b === void 0 ? void 0 : _b.flatMap((assetDiff) => {
|
|
199
207
|
var _a;
|
|
200
208
|
return ((_a = assetDiff.transferIn) === null || _a === void 0 ? void 0 : _a.map((inTransfer) => {
|
|
201
209
|
var _a, _b;
|
|
@@ -207,7 +215,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
207
215
|
});
|
|
208
216
|
})) || [];
|
|
209
217
|
})) || [];
|
|
210
|
-
const outAssets = ((
|
|
218
|
+
const outAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
|
|
211
219
|
var _a;
|
|
212
220
|
return ((_a = assetDiff.transferOut) === null || _a === void 0 ? void 0 : _a.map((outTransfer) => {
|
|
213
221
|
var _a, _b;
|
|
@@ -242,7 +250,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
|
|
|
242
250
|
return `-- ${nativeCurrencySymbol}`;
|
|
243
251
|
};
|
|
244
252
|
return (jsxs("div", { className: 'transaction-card-container', children: [allAssets.length > 0 && (jsx("div", { className: 'transaction-card', children: jsx("div", { className: 'transaction-card__assets-container', children: allAssets.map((asset, index, array) => (jsx(React__default.Fragment, { children: renderAssetTransfer(asset, index, array) }, `asset-${index}`))) }) })), jsx("div", { className: 'transaction-card', children: jsxs("div", { className: 'transaction-card__details', children: [recipient && (jsxs(Fragment, { children: [jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.recipient', children: t('dyn_send_transaction.confirmation.data.recipient') }), jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-recipient', children: shortenWalletAddress(recipient) })] }), jsx("div", { className: 'transaction-card__divider' })] })), !recipient &&
|
|
245
|
-
(transaction.to || ((
|
|
253
|
+
(transaction.to || ((_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _d === void 0 ? void 0 : _d[0])) && (jsxs(Fragment, { 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((_e = transaction.to) !== null && _e !== void 0 ? _e : (_f = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _f === void 0 ? void 0 : _f[0]) })] }), jsx("div", { className: 'transaction-card__divider' })] })), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', 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], alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) || 'Network icon', width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), !isGasSponsored && (jsxs(Fragment, { children: [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: jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: getGasFeeDisplay() }) })] })] })), blockaidOn &&
|
|
246
254
|
totalAmountInUsd !== undefined &&
|
|
247
255
|
totalAmountInUsd > 0 &&
|
|
248
256
|
!(isAATransaction && !isGasSponsored) && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'bold', copykey: 'dyn_send_transaction.confirmation.data.total', children: t('dyn_send_transaction.confirmation.data.total') }), jsx("div", { className: 'transaction-card__total-amount', children: jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-total', children: getTotalAmountInUsdDisplay(totalAmountInUsd) }) })] })] }))] }) })] }));
|
package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs
CHANGED
|
@@ -176,7 +176,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
|
|
|
176
176
|
const totalGasFiatValue = fiatUtils.getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
|
|
177
177
|
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: [error && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__error', children: jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: transactionLink && transactionSignature ? (jsxRuntime.jsx(reactI18next.Trans, { i18nKey: 'dyn_send_transaction.error_message.confirmation_timeout_with_link', components: {
|
|
178
178
|
link: (jsxRuntime.jsx(Typography.Typography, { as: 'a', href: transactionLink, target: '_blank', rel: 'noreferrer', className: 'transaction-confirmation__error-link', variant: 'body_small' })),
|
|
179
|
-
} })) : (error) }) })), !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, onFeeUpdate: fetchTransactionFee })), 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, { walletCredential: walletCredential }), displayPoweredByDynamicFooter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__divider' }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' })] }))] })] }));
|
|
179
|
+
} })) : (error) }) })), !sendBalanceTransaction ? (jsxRuntime.jsx(TransactionCard.TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev', simulationResult: simulationResult, recipient: recipient, walletConnector: walletConnector })) : (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, onFeeUpdate: fetchTransactionFee })), 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, { walletCredential: walletCredential }), displayPoweredByDynamicFooter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__divider' }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' })] }))] })] }));
|
|
180
180
|
};
|
|
181
181
|
|
|
182
182
|
exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;
|
package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js
CHANGED
|
@@ -172,7 +172,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
|
|
|
172
172
|
const totalGasFiatValue = getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
|
|
173
173
|
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: [error && (jsx("div", { className: 'transaction-confirmation__error', children: jsx(ErrorContainer, { children: transactionLink && transactionSignature ? (jsx(Trans, { i18nKey: 'dyn_send_transaction.error_message.confirmation_timeout_with_link', components: {
|
|
174
174
|
link: (jsx(Typography, { as: 'a', href: transactionLink, target: '_blank', rel: 'noreferrer', className: 'transaction-confirmation__error-link', variant: 'body_small' })),
|
|
175
|
-
} })) : (error) }) })), !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, onFeeUpdate: fetchTransactionFee })), 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, { walletCredential: walletCredential }), displayPoweredByDynamicFooter && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-confirmation__divider' }), jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' })] }))] })] }));
|
|
175
|
+
} })) : (error) }) })), !sendBalanceTransaction ? (jsx(TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'zerodev', simulationResult: simulationResult, recipient: recipient, walletConnector: walletConnector })) : (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, onFeeUpdate: fetchTransactionFee })), 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, { walletCredential: walletCredential }), displayPoweredByDynamicFooter && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-confirmation__divider' }), jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' })] }))] })] }));
|
|
176
176
|
};
|
|
177
177
|
|
|
178
178
|
export { TransactionConfirmationPageLayout };
|