@dynamic-labs/sdk-react-core 4.7.2 → 4.8.0

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.
Files changed (46) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/package.cjs +1 -1
  3. package/package.js +1 -1
  4. package/package.json +11 -11
  5. package/src/lib/components/NetworkPicker/components/NetworkSwitchControl/NetworkSwitchControl.cjs +2 -2
  6. package/src/lib/components/NetworkPicker/components/NetworkSwitchControl/NetworkSwitchControl.js +2 -2
  7. package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs +6 -1
  8. package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js +6 -1
  9. package/src/lib/components/TransactionCard/SendBalanceTransactionCard.cjs +7 -2
  10. package/src/lib/components/TransactionCard/SendBalanceTransactionCard.d.ts +1 -2
  11. package/src/lib/components/TransactionCard/SendBalanceTransactionCard.js +7 -2
  12. package/src/lib/components/TransactionCard/TransactionCard.cjs +16 -12
  13. package/src/lib/components/TransactionCard/TransactionCard.js +16 -12
  14. package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs +1 -1
  15. package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js +1 -1
  16. package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs +14 -4
  17. package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.d.ts +1 -0
  18. package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js +14 -4
  19. package/src/lib/context/DynamicContext/DynamicContext.cjs +12 -11
  20. package/src/lib/context/DynamicContext/DynamicContext.js +12 -11
  21. package/src/lib/context/DynamicContext/types/SettingsOverrides.d.ts +10 -0
  22. package/src/lib/styles/index.shadow.cjs +1 -1
  23. package/src/lib/styles/index.shadow.js +1 -1
  24. package/src/lib/utils/functions/getTransactionLink/getTransactionLink.cjs +22 -0
  25. package/src/lib/utils/functions/getTransactionLink/getTransactionLink.d.ts +5 -0
  26. package/src/lib/utils/functions/getTransactionLink/getTransactionLink.js +18 -0
  27. package/src/lib/utils/functions/isMultiAssetSupportedNetwork/isMultiAssetSupportedNetwork.cjs +9 -4
  28. package/src/lib/utils/functions/isMultiAssetSupportedNetwork/isMultiAssetSupportedNetwork.js +9 -4
  29. package/src/lib/utils/functions/isSupportedNetwork/isSupportedNetwork.cjs +3 -3
  30. package/src/lib/utils/functions/isSupportedNetwork/isSupportedNetwork.js +3 -3
  31. package/src/lib/utils/functions/networksAndChains/networksAndChains.cjs +31 -11
  32. package/src/lib/utils/functions/networksAndChains/networksAndChains.d.ts +6 -2
  33. package/src/lib/utils/functions/networksAndChains/networksAndChains.js +31 -11
  34. package/src/lib/utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.cjs +11 -3
  35. package/src/lib/utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.d.ts +2 -1
  36. package/src/lib/utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.js +11 -3
  37. package/src/lib/utils/hooks/useTokenBalances/useTokenBalances.cjs +5 -8
  38. package/src/lib/utils/hooks/useTokenBalances/useTokenBalances.js +5 -8
  39. package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.cjs +0 -1
  40. package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.js +0 -1
  41. package/src/lib/views/SendBalanceView/SendBalanceView.cjs +3 -1
  42. package/src/lib/views/SendBalanceView/SendBalanceView.js +3 -1
  43. package/src/lib/widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs +3 -2
  44. package/src/lib/widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js +3 -2
  45. package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useSubmitWalletFunding/useSubmitWalletFunding.cjs +9 -2
  46. package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useSubmitWalletFunding/useSubmitWalletFunding.js +9 -2
package/CHANGELOG.md CHANGED
@@ -1,4 +1,18 @@
1
1
 
2
+ ## [4.8.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.7.2...v4.8.0) (2025-02-25)
3
+
4
+
5
+ ### Features
6
+
7
+ * add support for network switching for SOL wallets ([#8095](https://github.com/dynamic-labs/dynamic-auth/issues/8095)) ([8997b39](https://github.com/dynamic-labs/dynamic-auth/commit/8997b399e1e5cd294aad8b719d39928eed5e911d))
8
+ * add support for solNetworks override ([#8138](https://github.com/dynamic-labs/dynamic-auth/issues/8138)) ([8c3f374](https://github.com/dynamic-labs/dynamic-auth/commit/8c3f374a9b2b451f984aed98e7ce506552e2a6c5))
9
+ * **react-native:** add account abstraction multi-chain ([#8132](https://github.com/dynamic-labs/dynamic-auth/issues/8132)) ([c64a26e](https://github.com/dynamic-labs/dynamic-auth/commit/c64a26e16943d913edf4683084f59592a9aeedfc))
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * ensure zero dev network cache use project id ([#8133](https://github.com/dynamic-labs/dynamic-auth/issues/8133)) ([408c4ed](https://github.com/dynamic-labs/dynamic-auth/commit/408c4ed764a623b6d870cd24973320e5ca4a74c7))
15
+
2
16
  ### [4.7.2](https://github.com/dynamic-labs/dynamic-auth/compare/v4.7.1...v4.7.2) (2025-02-22)
3
17
 
4
18
  ### Features
package/package.cjs CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
5
5
 
6
- var version = "4.7.2";
6
+ var version = "4.8.0";
7
7
  var dependencies = {
8
8
  "@dynamic-labs/sdk-api-core": "0.0.628",
9
9
  "@hcaptcha/react-hcaptcha": "1.4.4",
package/package.js CHANGED
@@ -1,5 +1,5 @@
1
1
  'use client'
2
- var version = "4.7.2";
2
+ var version = "4.8.0";
3
3
  var dependencies = {
4
4
  "@dynamic-labs/sdk-api-core": "0.0.628",
5
5
  "@hcaptcha/react-hcaptcha": "1.4.4",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dynamic-labs/sdk-react-core",
3
- "version": "4.7.2",
3
+ "version": "4.8.0",
4
4
  "dependencies": {
5
5
  "@dynamic-labs/sdk-api-core": "0.0.628",
6
6
  "@hcaptcha/react-hcaptcha": "1.4.4",
@@ -14,16 +14,16 @@
14
14
  "yup": "0.32.11",
15
15
  "react-international-phone": "4.2.5",
16
16
  "bs58": "5.0.0",
17
- "@dynamic-labs/assert-package-version": "4.7.2",
18
- "@dynamic-labs/iconic": "4.7.2",
19
- "@dynamic-labs/logger": "4.7.2",
20
- "@dynamic-labs/multi-wallet": "4.7.2",
21
- "@dynamic-labs/rpc-providers": "4.7.2",
22
- "@dynamic-labs/store": "4.7.2",
23
- "@dynamic-labs/types": "4.7.2",
24
- "@dynamic-labs/utils": "4.7.2",
25
- "@dynamic-labs/wallet-book": "4.7.2",
26
- "@dynamic-labs/wallet-connector-core": "4.7.2",
17
+ "@dynamic-labs/assert-package-version": "4.8.0",
18
+ "@dynamic-labs/iconic": "4.8.0",
19
+ "@dynamic-labs/logger": "4.8.0",
20
+ "@dynamic-labs/multi-wallet": "4.8.0",
21
+ "@dynamic-labs/rpc-providers": "4.8.0",
22
+ "@dynamic-labs/store": "4.8.0",
23
+ "@dynamic-labs/types": "4.8.0",
24
+ "@dynamic-labs/utils": "4.8.0",
25
+ "@dynamic-labs/wallet-book": "4.8.0",
26
+ "@dynamic-labs/wallet-connector-core": "4.8.0",
27
27
  "eventemitter3": "5.0.1"
28
28
  },
29
29
  "devDependencies": {
package/src/lib/components/NetworkPicker/components/NetworkSwitchControl/NetworkSwitchControl.cjs CHANGED
@@ -126,7 +126,7 @@ const NetworkSwitchControl = ({ enabledNetworks, className = '', activeClassName
126
126
  }
127
127
  return (jsxRuntime.jsxs("div", { "data-testid": 'NetworkSwitchControl', onClick: () => network && setIsOpen(!isOpen), className: classNames.classNames('network-switch-control__container', {
128
128
  [activeClassName]: isOpen,
129
- }, className), children: [currentNetwork.iconUrls.length > 0 && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] }));
129
+ }, className), children: [currentNetwork.iconUrls.length > 0 && (jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'network-switch-control__network-icon', children: jsxRuntime.jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] }));
130
130
  }
131
131
  return (jsxRuntime.jsxs("button", { "data-testid": 'NetworkSwitchControl', type: 'button', onClick: (e) => {
132
132
  e.stopPropagation();
@@ -134,7 +134,7 @@ const NetworkSwitchControl = ({ enabledNetworks, className = '', activeClassName
134
134
  }, className: classNames.classNames(className, 'network-switch-control__container', {
135
135
  [activeClassName]: isOpen,
136
136
  'network-switch-control__container--error': !(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name),
137
- }), children: [(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [((_b = currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.iconUrls) === null || _b === void 0 ? void 0 : _b[0]) && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] })) : (jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName })), enabledNetworks.length > 1 && (jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'small', className: classNames.classNames('network-switch-control__arrow-icon', {
137
+ }), children: [(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [((_b = currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.iconUrls) === null || _b === void 0 ? void 0 : _b[0]) && (jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'network-switch-control__network-icon', children: jsxRuntime.jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] })) : (jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName })), enabledNetworks.length > 1 && (jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'small', className: classNames.classNames('network-switch-control__arrow-icon', {
138
138
  'network-switch-control__arrow-icon--active': isOpen,
139
139
  }), children: jsxRuntime.jsx(stroke.ReactComponent, {}) }))] }));
140
140
  };
package/src/lib/components/NetworkPicker/components/NetworkSwitchControl/NetworkSwitchControl.js CHANGED
@@ -122,7 +122,7 @@ const NetworkSwitchControl = ({ enabledNetworks, className = '', activeClassName
122
122
  }
123
123
  return (jsxs("div", { "data-testid": 'NetworkSwitchControl', onClick: () => network && setIsOpen(!isOpen), className: classNames('network-switch-control__container', {
124
124
  [activeClassName]: isOpen,
125
- }, className), children: [currentNetwork.iconUrls.length > 0 && (jsx(Icon, { size: 'small', children: jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsx(Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] }));
125
+ }, className), children: [currentNetwork.iconUrls.length > 0 && (jsx(Icon, { size: 'small', className: 'network-switch-control__network-icon', children: jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsx(Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] }));
126
126
  }
127
127
  return (jsxs("button", { "data-testid": 'NetworkSwitchControl', type: 'button', onClick: (e) => {
128
128
  e.stopPropagation();
@@ -130,7 +130,7 @@ const NetworkSwitchControl = ({ enabledNetworks, className = '', activeClassName
130
130
  }, className: classNames(className, 'network-switch-control__container', {
131
131
  [activeClassName]: isOpen,
132
132
  'network-switch-control__container--error': !(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name),
133
- }), children: [(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name) ? (jsxs(Fragment, { children: [((_b = currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.iconUrls) === null || _b === void 0 ? void 0 : _b[0]) && (jsx(Icon, { size: 'small', children: jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsx(Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] })) : (jsx(UnsupportedNetwork, { showMsg: showNetworkName })), enabledNetworks.length > 1 && (jsx(Icon, { color: 'text-primary', size: 'small', className: classNames('network-switch-control__arrow-icon', {
133
+ }), children: [(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name) ? (jsxs(Fragment, { children: [((_b = currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.iconUrls) === null || _b === void 0 ? void 0 : _b[0]) && (jsx(Icon, { size: 'small', className: 'network-switch-control__network-icon', children: jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsx(Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] })) : (jsx(UnsupportedNetwork, { showMsg: showNetworkName })), enabledNetworks.length > 1 && (jsx(Icon, { color: 'text-primary', size: 'small', className: classNames('network-switch-control__arrow-icon', {
134
134
  'network-switch-control__arrow-icon--active': isOpen,
135
135
  }), children: jsx(SvgStroke, {}) }))] }));
136
136
  };
package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs CHANGED
@@ -123,7 +123,12 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
123
123
  });
124
124
  React.useEffect(() => {
125
125
  const getNativeTokenAndFetchBalance = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
126
- const nativeTokenInfo = networksAndChains.getNetworkInfoEntry(chain, networkInfo);
126
+ var _a;
127
+ const nativeTokenInfo = networksAndChains.getNetworkInfoEntry({
128
+ chain: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain,
129
+ networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
130
+ networkInfo,
131
+ });
127
132
  if (!nativeTokenInfo) {
128
133
  logger.logger.error('Token info not found. Please make sure you are on a supported chain and it is enabled. See https://docs.dynamic.xyz/chains/enabling-chains');
129
134
  return;
package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js CHANGED
@@ -119,7 +119,12 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
119
119
  });
120
120
  useEffect(() => {
121
121
  const getNativeTokenAndFetchBalance = () => __awaiter(void 0, void 0, void 0, function* () {
122
- const nativeTokenInfo = getNetworkInfoEntry(chain, networkInfo);
122
+ var _a;
123
+ const nativeTokenInfo = getNetworkInfoEntry({
124
+ chain: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain,
125
+ networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
126
+ networkInfo,
127
+ });
123
128
  if (!nativeTokenInfo) {
124
129
  logger.error('Token info not found. Please make sure you are on a supported chain and it is enabled. See https://docs.dynamic.xyz/chains/enabling-chains');
125
130
  return;
package/src/lib/components/TransactionCard/SendBalanceTransactionCard.cjs CHANGED
@@ -102,14 +102,19 @@ require('../../store/state/tokenBalances.cjs');
102
102
  require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
103
103
  var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
104
104
 
105
- const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, walletKey, }) => {
105
+ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, }) => {
106
+ var _a;
106
107
  const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
107
108
  const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
108
109
  evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
109
110
  projectSettings,
110
111
  });
111
112
  const { chain } = useFetchChain.useFetchChain(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
112
- const networkInfoEntry = networksAndChains.getNetworkInfoEntry(chain, networkInfo);
113
+ const networkInfoEntry = networksAndChains.getNetworkInfoEntry({
114
+ chain: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain,
115
+ networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
116
+ networkInfo,
117
+ });
113
118
  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 ||
114
119
  ((transaction === null || transaction === void 0 ? void 0 : transaction.value)
115
120
  ? transaction.format(transaction.value, {
package/src/lib/components/TransactionCard/SendBalanceTransactionCard.d.ts CHANGED
@@ -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, t, walletKey, }: {
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;
@@ -13,5 +13,4 @@ export declare const SendBalanceTransactionCard: ({ transaction, currentToken, c
13
13
  currency: string | undefined;
14
14
  total: bigint | undefined;
15
15
  t: any;
16
- walletKey: string;
17
16
  }) => JSX.Element;
package/src/lib/components/TransactionCard/SendBalanceTransactionCard.js CHANGED
@@ -98,14 +98,19 @@ import '../../store/state/tokenBalances.js';
98
98
  import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
99
99
  import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
100
100
 
101
- const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, walletKey, }) => {
101
+ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, }) => {
102
+ var _a;
102
103
  const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
103
104
  const networkInfo = useNetworkConfigurationsFromProjectSettings({
104
105
  evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
105
106
  projectSettings,
106
107
  });
107
108
  const { chain } = useFetchChain(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
108
- const networkInfoEntry = getNetworkInfoEntry(chain, networkInfo);
109
+ const networkInfoEntry = getNetworkInfoEntry({
110
+ chain: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain,
111
+ networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
112
+ networkInfo,
113
+ });
109
114
  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 ||
110
115
  ((transaction === null || transaction === void 0 ? void 0 : transaction.value)
111
116
  ? transaction.format(transaction.value, {
package/src/lib/components/TransactionCard/TransactionCard.cjs CHANGED
@@ -106,7 +106,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
106
106
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
107
107
 
108
108
  const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, }) => {
109
- var _a, _b, _c, _d, _e, _f;
109
+ var _a, _b, _c, _d, _e, _f, _g;
110
110
  const { t } = reactI18next.useTranslation();
111
111
  const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
112
112
  const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
@@ -114,8 +114,12 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
114
114
  projectSettings,
115
115
  });
116
116
  const { chain } = useFetchChain.useFetchChain(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
117
- const networkInfoEntry = networksAndChains.getNetworkInfoEntry(chain, networkInfo);
118
- const { symbol: nativeCurrencySymbol, decimals: nativeCurrencyDecimals } = (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _a !== void 0 ? _a : {};
117
+ const networkInfoEntry = networksAndChains.getNetworkInfoEntry({
118
+ chain: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain,
119
+ networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
120
+ networkInfo,
121
+ });
122
+ const { symbol: nativeCurrencySymbol, decimals: nativeCurrencyDecimals } = (_b = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _b !== void 0 ? _b : {};
119
123
  const blockaidOn = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.showTotalFiat;
120
124
  const feeInUsd = React.useMemo(() => {
121
125
  var _a;
@@ -153,9 +157,9 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
153
157
  : `~$${totalAmountInUsd.toFixed(2)}`;
154
158
  };
155
159
  const renderAssetTransfer = (transfer, index, array) => {
156
- var _a, _b;
157
- if ((transfer.asset.type === 'NATIVE' || transfer.asset.type === 'SOL') &&
158
- transfer.asset.chainName === 'Solana' &&
160
+ var _a, _b, _c;
161
+ if (['NATIVE', 'SOL', 'ETH'].includes(transfer.asset.type) &&
162
+ ((_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain) === 'SOL' &&
159
163
  transaction.fee.gas) {
160
164
  transfer.amount = (Number(transfer.amount) -
161
165
  Number(transaction.fee.gas) / Math.pow(10, 9)).toString();
@@ -175,10 +179,10 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
175
179
  }
176
180
  return `$${usdPrice.toFixed(2)}`;
177
181
  };
178
- 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 ||
179
- (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' }))] }));
182
+ 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 ||
183
+ (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' }))] }));
180
184
  };
181
- const inAssets = ((_b = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _b === void 0 ? void 0 : _b.flatMap((assetDiff) => {
185
+ const inAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
182
186
  var _a;
183
187
  return ((_a = assetDiff.transferIn) === null || _a === void 0 ? void 0 : _a.map((inTransfer) => {
184
188
  var _a, _b;
@@ -190,7 +194,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
190
194
  });
191
195
  })) || [];
192
196
  })) || [];
193
- const outAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
197
+ const outAssets = ((_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _d === void 0 ? void 0 : _d.flatMap((assetDiff) => {
194
198
  var _a;
195
199
  return ((_a = assetDiff.transferOut) === null || _a === void 0 ? void 0 : _a.map((outTransfer) => {
196
200
  var _a, _b;
@@ -219,13 +223,13 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
219
223
  }
220
224
  if (transaction.fee.gas) {
221
225
  return `${transaction.format(transaction.fee.gas, {
222
- precision: 6,
226
+ precision: 8,
223
227
  })} ${nativeCurrencySymbol}`;
224
228
  }
225
229
  return `-- ${nativeCurrencySymbol}`;
226
230
  };
227
231
  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, 4, 4) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__divider' })] })), !recipient &&
228
- (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], 4, 4) })] }), 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 &&
232
+ (transaction.to || ((_e = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _e === void 0 ? void 0 : _e[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((_f = transaction.to) !== null && _f !== void 0 ? _f : (_g = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _g === void 0 ? void 0 : _g[0], 4, 4) })] }), 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 &&
229
233
  totalAmountInUsd !== undefined &&
230
234
  totalAmountInUsd > 0 &&
231
235
  !(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) }) })] })] }))] }) })] }));
package/src/lib/components/TransactionCard/TransactionCard.js CHANGED
@@ -98,7 +98,7 @@ import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
98
98
  import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
99
99
 
100
100
  const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATransaction, recipient, }) => {
101
- var _a, _b, _c, _d, _e, _f;
101
+ var _a, _b, _c, _d, _e, _f, _g;
102
102
  const { t } = useTranslation();
103
103
  const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
104
104
  const networkInfo = useNetworkConfigurationsFromProjectSettings({
@@ -106,8 +106,12 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
106
106
  projectSettings,
107
107
  });
108
108
  const { chain } = useFetchChain(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
109
- const networkInfoEntry = getNetworkInfoEntry(chain, networkInfo);
110
- const { symbol: nativeCurrencySymbol, decimals: nativeCurrencyDecimals } = (_a = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _a !== void 0 ? _a : {};
109
+ const networkInfoEntry = getNetworkInfoEntry({
110
+ chain: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain,
111
+ networkId: chain === null || chain === void 0 ? void 0 : chain.chainId,
112
+ networkInfo,
113
+ });
114
+ const { symbol: nativeCurrencySymbol, decimals: nativeCurrencyDecimals } = (_b = networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency) !== null && _b !== void 0 ? _b : {};
111
115
  const blockaidOn = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.showTotalFiat;
112
116
  const feeInUsd = useMemo(() => {
113
117
  var _a;
@@ -145,9 +149,9 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
145
149
  : `~$${totalAmountInUsd.toFixed(2)}`;
146
150
  };
147
151
  const renderAssetTransfer = (transfer, index, array) => {
148
- var _a, _b;
149
- if ((transfer.asset.type === 'NATIVE' || transfer.asset.type === 'SOL') &&
150
- transfer.asset.chainName === 'Solana' &&
152
+ var _a, _b, _c;
153
+ if (['NATIVE', 'SOL', 'ETH'].includes(transfer.asset.type) &&
154
+ ((_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain) === 'SOL' &&
151
155
  transaction.fee.gas) {
152
156
  transfer.amount = (Number(transfer.amount) -
153
157
  Number(transaction.fee.gas) / Math.pow(10, 9)).toString();
@@ -167,10 +171,10 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
167
171
  }
168
172
  return `$${usdPrice.toFixed(2)}`;
169
173
  };
170
- 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 ||
171
- (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' }))] }));
174
+ 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 ||
175
+ (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' }))] }));
172
176
  };
173
- const inAssets = ((_b = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _b === void 0 ? void 0 : _b.flatMap((assetDiff) => {
177
+ const inAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.inAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
174
178
  var _a;
175
179
  return ((_a = assetDiff.transferIn) === null || _a === void 0 ? void 0 : _a.map((inTransfer) => {
176
180
  var _a, _b;
@@ -182,7 +186,7 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
182
186
  });
183
187
  })) || [];
184
188
  })) || [];
185
- const outAssets = ((_c = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _c === void 0 ? void 0 : _c.flatMap((assetDiff) => {
189
+ const outAssets = ((_d = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.outAssets) === null || _d === void 0 ? void 0 : _d.flatMap((assetDiff) => {
186
190
  var _a;
187
191
  return ((_a = assetDiff.transferOut) === null || _a === void 0 ? void 0 : _a.map((outTransfer) => {
188
192
  var _a, _b;
@@ -211,13 +215,13 @@ const TransactionCard = ({ transaction, simulationResult, isGasSponsored, isAATr
211
215
  }
212
216
  if (transaction.fee.gas) {
213
217
  return `${transaction.format(transaction.fee.gas, {
214
- precision: 6,
218
+ precision: 8,
215
219
  })} ${nativeCurrencySymbol}`;
216
220
  }
217
221
  return `-- ${nativeCurrencySymbol}`;
218
222
  };
219
223
  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, 4, 4) })] }), jsx("div", { className: 'transaction-card__divider' })] })), !recipient &&
220
- (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], 4, 4) })] }), 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 &&
224
+ (transaction.to || ((_e = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _e === void 0 ? void 0 : _e[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((_f = transaction.to) !== null && _f !== void 0 ? _f : (_g = simulationResult === null || simulationResult === void 0 ? void 0 : simulationResult.counterparties) === null || _g === void 0 ? void 0 : _g[0], 4, 4) })] }), 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 &&
221
225
  totalAmountInUsd !== undefined &&
222
226
  totalAmountInUsd > 0 &&
223
227
  !(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
@@ -133,7 +133,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
133
133
  const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
134
134
  const gasFiatValue = fiatUtils.getGasFiatValue(currentToken, transaction, nativePrice);
135
135
  const totalGasFiatValue = fiatUtils.getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
136
- 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, walletKey: walletKey })), 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' })] }))] })] }));
136
+ 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' })] }))] })] }));
137
137
  };
138
138
 
139
139
  exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;
package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js CHANGED
@@ -129,7 +129,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
129
129
  const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }));
130
130
  const gasFiatValue = getGasFiatValue(currentToken, transaction, nativePrice);
131
131
  const totalGasFiatValue = getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
132
- 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, walletKey: walletKey })), 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' })] }))] })] }));
132
+ 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' })] }))] })] }));
133
133
  };
134
134
 
135
135
  export { TransactionConfirmationPageLayout };
package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
5
5
 
6
+ var _tslib = require('../../../../_virtual/_tslib.cjs');
6
7
  var jsxRuntime = require('react/jsx-runtime');
7
8
  var reactI18next = require('react-i18next');
8
9
  require('@dynamic-labs/utils');
@@ -11,7 +12,6 @@ var Alert = require('../Alert/Alert.cjs');
11
12
  var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
12
13
  require('react');
13
14
  var Typography = require('../Typography/Typography.cjs');
14
- require('../../../../_virtual/_tslib.cjs');
15
15
  require('@dynamic-labs/sdk-api-core');
16
16
  require('../../shared/logger.cjs');
17
17
  require('@dynamic-labs/iconic');
@@ -50,6 +50,7 @@ require('../../utils/functions/compareChains/compareChains.cjs');
50
50
  require('../../context/ThemeContext/ThemeContext.cjs');
51
51
  require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
52
52
  require('bs58');
53
+ var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
53
54
  require('@dynamic-labs/types');
54
55
  require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
55
56
  require('../../context/LoadingContext/LoadingContext.cjs');
@@ -85,6 +86,7 @@ var sendBalances = require('../../store/state/sendBalances.cjs');
85
86
  require('../Input/Input.cjs');
86
87
  require('../OverlayCard/OverlayCard.cjs');
87
88
  var utils = require('../TransactionConfirmationPageLayout/utils.cjs');
89
+ var getTransactionLink = require('../../utils/functions/getTransactionLink/getTransactionLink.cjs');
88
90
  require('../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
89
91
  require('../../context/PasskeyContext/PasskeyContext.cjs');
90
92
  require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
@@ -105,15 +107,23 @@ require('../IsBrowser/IsBrowser.cjs');
105
107
  require('../Popper/Popper/Popper.cjs');
106
108
  require('../Popper/PopperContext/PopperContext.cjs');
107
109
 
108
- const TransactionStatusLayout = ({ destinationAddress, transactionValue, networkCurrency, onDone, displayPoweredByDynamicFooter = true, onClickClose, transaction, currentToken, isNativeToken, }) => {
110
+ const TransactionStatusLayout = ({ destinationAddress, transactionValue, networkCurrency, onDone, displayPoweredByDynamicFooter = true, onClickClose, transaction, currentToken, isNativeToken, transactionHash, }) => {
109
111
  const { t } = reactI18next.useTranslation();
110
- const { showFiat } = useInternalDynamicContext.useInternalDynamicContext();
112
+ const { showFiat, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
111
113
  const { nativePrice } = sendBalances.useSendBalanceState();
114
+ const { data: txLink } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
115
+ if (!(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) || !transactionHash)
116
+ return;
117
+ return getTransactionLink.getTransactionLink({
118
+ transactionHash,
119
+ walletConnector: primaryWallet.connector,
120
+ });
121
+ }));
112
122
  const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
113
123
  const totalFiatCost = fiatUtils.getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
114
124
  return (jsxRuntime.jsxs("div", { className: 'transaction-status-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx(Icon.Icon, { size: 'large', className: 'transaction-status-layout__status-icon', children: jsxRuntime.jsx(checkBlue.ReactComponent, {}) }) }), jsxRuntime.jsxs("div", { className: 'transaction-status-layout__body', children: [jsxRuntime.jsxs("div", { className: 'transaction-status-layout__sent_to', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'transaction-status-layout__title', copykey: 'dyn_send_transaction.succeeded.title', children: [t('dyn_send_transaction.succeeded.title'), ' '] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', className: 'transaction-status-layout__title', copykey: 'dyn_send_transaction.succeeded.title', children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })] }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__content', children: jsxRuntime.jsx("div", { className: 'transaction-status-layout__rows', children: jsxRuntime.jsxs(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-status-layout__title', copykey: 'dyn_send_transaction.succeeded.title', children: [`${utils.getValueRounded(isNativeToken, transaction)} ${networkCurrency} `, showFiat &&
115
125
  (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) &&
116
- `($${Number(totalFiatCost) <= 0.01 ? '<0.01' : totalFiatCost})`] }) }) }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: jsxRuntime.jsx(Alert.Alert, { variant: 'info', copykey: 'dyn_send_transaction.info_message.refresh_balance_time', children: t('dyn_send_transaction.info_message.refresh_balance_time') }) }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'small', expanded: true, onClick: onDone, loading: false, copykey: 'dyn_send_transaction.succeeded.continue_button', dataTestId: 'transaction-done-continue', children: t('dyn_send_transaction.succeeded.continue_button') }) }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
126
+ `($${Number(totalFiatCost) <= 0.01 ? '<0.01' : totalFiatCost})`] }) }) }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: jsxRuntime.jsx(Alert.Alert, { variant: 'info', copykey: 'dyn_send_transaction.info_message.refresh_balance_time', children: t('dyn_send_transaction.info_message.refresh_balance_time') }) }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__transaction-link-container', children: txLink && (jsxRuntime.jsx(Typography.Typography, { as: 'a', href: txLink, target: '_blank', rel: 'noreferrer', className: 'transaction-status-layout__transaction-link-container__transaction-link', variant: 'body_small', children: t('dyn_wallet_funding.success_txn_link') })) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'small', expanded: true, onClick: onDone, loading: false, copykey: 'dyn_send_transaction.succeeded.continue_button', dataTestId: 'transaction-done-continue', children: t('dyn_send_transaction.succeeded.continue_button') }) }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
117
127
  };
118
128
 
119
129
  exports.TransactionStatusLayout = TransactionStatusLayout;
package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.d.ts CHANGED
@@ -13,5 +13,6 @@ export type Props = {
13
13
  transaction: IUITransaction;
14
14
  currentToken?: TokenBalance;
15
15
  isNativeToken: boolean;
16
+ transactionHash?: string;
16
17
  };
17
18
  export declare const TransactionStatusLayout: FC<Props>;