diff --git a/.storybook/main.js b/.storybook/main.js
index de856adf8857..2b4384250c9c 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -52,6 +52,9 @@ module.exports = {
config.resolve.alias['../../../../../../store/actions'] = require.resolve(
'../ui/__mocks__/actions.js',
);
+ config.resolve.alias['../../../store/actions'] = require.resolve(
+ '../ui/__mocks__/actions.js',
+ );
// Import within controller-utils crashes storybook.
config.resolve.alias['@ethereumjs/util'] = require.resolve(
'../ui/__mocks__/ethereumjs-util.js',
diff --git a/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx b/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx
index fc58008d7784..08329536b524 100644
--- a/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx
+++ b/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx
@@ -20,8 +20,7 @@ const BaseTransactionInfo = () => {
<>
diff --git a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx
index a2e6a73b4353..b5d579994ef9 100644
--- a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx
+++ b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx
@@ -22,8 +22,7 @@ const NFTTokenTransferInfo = () => {
{!isWalletInitiated && (
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx
index b89e87350a36..df1136ec5213 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx
@@ -22,8 +22,7 @@ const TokenTransferInfo = () => {
{!isWalletInitiated && (
diff --git a/ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx b/ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx
index 044eca8d887c..d08f9d7d1c52 100644
--- a/ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx
+++ b/ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx
@@ -6,7 +6,7 @@ import Tooltip from '../../../../components/ui/tooltip';
import { AmountPill } from './amount-pill';
import {
AssetIdentifier,
- NATIVE_ASSET_IDENTIFIER,
+ NativeAssetIdentifier,
TokenAssetIdentifier,
} from './types';
@@ -24,17 +24,28 @@ jest.mock('../../../../components/ui/tooltip', () => ({
}));
const TOKEN_ID_MOCK = '0xabc';
+const CHAIN_ID_MOCK = '0x1';
+
+const NATIVE_ASSET_MOCK: NativeAssetIdentifier = {
+ chainId: CHAIN_ID_MOCK,
+ standard: TokenStandard.none,
+};
const ERC20_ASSET_MOCK: TokenAssetIdentifier = {
+ chainId: CHAIN_ID_MOCK,
standard: TokenStandard.ERC20,
address: '0x456',
};
+
const ERC721_ASSET_MOCK: TokenAssetIdentifier = {
+ chainId: CHAIN_ID_MOCK,
standard: TokenStandard.ERC721,
address: '0x123',
tokenId: TOKEN_ID_MOCK,
};
+
const ERC1155_ASSET_MOCK: TokenAssetIdentifier = {
+ chainId: CHAIN_ID_MOCK,
standard: TokenStandard.ERC1155,
address: '0x789',
tokenId: TOKEN_ID_MOCK,
@@ -114,7 +125,7 @@ describe('AmountPill', () => {
amount: BigNumber;
expected: { text: string; tooltip: string };
}) => {
- renderAndExpect(NATIVE_ASSET_IDENTIFIER, amount, expected);
+ renderAndExpect(NATIVE_ASSET_MOCK, amount, expected);
},
);
});
diff --git a/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx b/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx
index 477119b02284..4b11adf0e17b 100644
--- a/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx
+++ b/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx
@@ -10,7 +10,7 @@ import { AvatarNetwork } from '../../../../components/component-library/avatar-n
import { mockNetworkState } from '../../../../../test/stub/networks';
import mockState from '../../../../../test/data/mock-state.json';
import { AssetPill } from './asset-pill';
-import { NATIVE_ASSET_IDENTIFIER, TokenAssetIdentifier } from './types';
+import { NativeAssetIdentifier, TokenAssetIdentifier } from './types';
jest.mock('../../../../components/component-library/avatar-network', () => ({
AvatarNetworkSize: { Sm: 'Sm' },
@@ -22,6 +22,8 @@ jest.mock('../../../../components/app/name', () => ({
default: jest.fn(() => null),
}));
+const CHAIN_ID_MOCK = '0x1';
+
describe('AssetPill', () => {
beforeEach(() => {
jest.clearAllMocks();
@@ -61,10 +63,12 @@ describe('AssetPill', () => {
},
});
- renderWithProvider(
- ,
- store,
- );
+ const asset: NativeAssetIdentifier = {
+ chainId,
+ standard: TokenStandard.none,
+ };
+
+ renderWithProvider(, store);
expect(screen.getByText(expected.ticker)).toBeInTheDocument();
@@ -81,6 +85,7 @@ describe('AssetPill', () => {
it('renders Name component with correct props when asset standard is not none', () => {
const asset: TokenAssetIdentifier = {
+ chainId: CHAIN_ID_MOCK,
standard: TokenStandard.ERC20,
address: '0x1234567890123456789012345678901234567890',
};
diff --git a/ui/pages/confirmations/components/simulation-details/asset-pill.tsx b/ui/pages/confirmations/components/simulation-details/asset-pill.tsx
index 1545c86e452c..99bd2b3af8ef 100644
--- a/ui/pages/confirmations/components/simulation-details/asset-pill.tsx
+++ b/ui/pages/confirmations/components/simulation-details/asset-pill.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { NameType } from '@metamask/name-controller';
import { useSelector } from 'react-redux';
+import { Hex } from '@metamask/utils';
import {
AvatarNetwork,
AvatarNetworkSize,
@@ -18,16 +19,20 @@ import {
} from '../../../../helpers/constants/design-system';
import Name from '../../../../components/app/name';
import { TokenStandard } from '../../../../../shared/constants/transaction';
-import {
- getCurrentChainId,
- getNativeCurrencyImage,
-} from '../../../../selectors';
-import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
+import { getNetworkConfigurationsByChainId } from '../../../../selectors';
+import { CHAIN_ID_TOKEN_IMAGE_MAP } from '../../../../../shared/constants/network';
import { AssetIdentifier } from './types';
-const NativeAssetPill: React.FC = () => {
- const ticker = useSelector(getNativeCurrency);
- const imgSrc = useSelector(getNativeCurrencyImage);
+const NativeAssetPill: React.FC<{ chainId: Hex }> = ({ chainId }) => {
+ const imgSrc =
+ CHAIN_ID_TOKEN_IMAGE_MAP[chainId as keyof typeof CHAIN_ID_TOKEN_IMAGE_MAP];
+
+ const networkConfigurationsByChainId = useSelector(
+ getNetworkConfigurationsByChainId,
+ );
+
+ const network = networkConfigurationsByChainId?.[chainId];
+ const { nativeCurrency } = network;
return (
{
}}
>
- {ticker}
+ {nativeCurrency}
);
@@ -60,9 +65,10 @@ const NativeAssetPill: React.FC = () => {
* @param props
* @param props.asset
*/
-export const AssetPill: React.FC<{ asset: AssetIdentifier }> = ({ asset }) => {
- // TODO: Temporary pending multi-chain support in simulations;
- const chainId = useSelector(getCurrentChainId);
+export const AssetPill: React.FC<{
+ asset: AssetIdentifier;
+}> = ({ asset }) => {
+ const { chainId } = asset;
return (
= ({ asset }) => {
}}
>
{asset.standard === TokenStandard.none ? (
-
+
) : (
,
+): TransactionMeta {
+ return metadata as TransactionMeta;
+}
const meta: Meta = {
title: 'Components/App/SimulationDetails',
@@ -96,180 +97,207 @@ type Story = StoryObj;
export const MultipleTokens: Story = {
args: {
- simulationData: {
- nativeBalanceChange: {
- ...DUMMY_BALANCE_CHANGE,
- difference: '0x12345678912345678',
- isDecrease: true,
- },
- tokenBalanceChanges: [
- {
- ...DUMMY_BALANCE_CHANGE,
- address: ERC20_TOKEN_1_MOCK,
- difference: '0x123456',
- isDecrease: false,
- standard: SimulationTokenStandard.erc20,
- },
- {
- ...DUMMY_BALANCE_CHANGE,
- address: ERC20_TOKEN_2_MOCK,
- difference: '0x123456901',
- isDecrease: false,
- standard: SimulationTokenStandard.erc20,
- },
- {
+ transaction: createTransactionMeta({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: {
+ nativeBalanceChange: {
...DUMMY_BALANCE_CHANGE,
- address: ERC721_TOKEN_MOCK,
- difference: '0x1',
- isDecrease: false,
- id: '0x721',
- standard: SimulationTokenStandard.erc721,
- },
- {
- ...DUMMY_BALANCE_CHANGE,
- address: ERC1155_TOKEN_MOCK,
- difference: '0x13',
- isDecrease: false,
- id: '0x1155',
- standard: SimulationTokenStandard.erc1155,
+ difference: '0x12345678912345678',
+ isDecrease: true,
},
- ],
- },
+ tokenBalanceChanges: [
+ {
+ ...DUMMY_BALANCE_CHANGE,
+ address: ERC20_TOKEN_1_MOCK,
+ difference: '0x123456',
+ isDecrease: false,
+ standard: SimulationTokenStandard.erc20,
+ },
+ {
+ ...DUMMY_BALANCE_CHANGE,
+ address: ERC20_TOKEN_2_MOCK,
+ difference: '0x123456901',
+ isDecrease: false,
+ standard: SimulationTokenStandard.erc20,
+ },
+ {
+ ...DUMMY_BALANCE_CHANGE,
+ address: ERC721_TOKEN_MOCK,
+ difference: '0x1',
+ isDecrease: false,
+ id: '0x721',
+ standard: SimulationTokenStandard.erc721,
+ },
+ {
+ ...DUMMY_BALANCE_CHANGE,
+ address: ERC1155_TOKEN_MOCK,
+ difference: '0x13',
+ isDecrease: false,
+ id: '0x1155',
+ standard: SimulationTokenStandard.erc1155,
+ },
+ ],
+ },
+ }),
},
};
export const SendSmallAmount: Story = {
args: {
- simulationData: {
- nativeBalanceChange: {
- ...DUMMY_BALANCE_CHANGE,
- difference: '0x123',
- isDecrease: true,
+ transaction: createTransactionMeta({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: {
+ nativeBalanceChange: {
+ ...DUMMY_BALANCE_CHANGE,
+ difference: '0x123',
+ isDecrease: true,
+ },
+ tokenBalanceChanges: [],
},
- tokenBalanceChanges: [],
- },
+ }),
},
};
export const LongValuesAndNames: Story = {
args: {
- simulationData: {
- nativeBalanceChange: {
- ...DUMMY_BALANCE_CHANGE,
- difference: '0x12345678912345678',
- isDecrease: true,
- },
- tokenBalanceChanges: [
- {
- ...DUMMY_BALANCE_CHANGE,
- address: ERC20_TOKEN_1_MOCK,
- difference: '0x42345909',
- isDecrease: false,
- standard: SimulationTokenStandard.erc20,
- },
- {
+ transaction: createTransactionMeta({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: {
+ nativeBalanceChange: {
...DUMMY_BALANCE_CHANGE,
- address: ERC20_TOKEN_2_MOCK,
- difference: '0x123456901',
- isDecrease: false,
- standard: SimulationTokenStandard.erc20,
+ difference: '0x12345678912345678',
+ isDecrease: true,
},
- ],
- },
+ tokenBalanceChanges: [
+ {
+ ...DUMMY_BALANCE_CHANGE,
+ address: ERC20_TOKEN_1_MOCK,
+ difference: '0x42345909',
+ isDecrease: false,
+ standard: SimulationTokenStandard.erc20,
+ },
+ {
+ ...DUMMY_BALANCE_CHANGE,
+ address: ERC20_TOKEN_2_MOCK,
+ difference: '0x123456901',
+ isDecrease: false,
+ standard: SimulationTokenStandard.erc20,
+ },
+ ],
+ },
+ }),
},
};
export const PolygonNativeAsset: Story = {
args: {
- simulationData: {
- nativeBalanceChange: {
- ...DUMMY_BALANCE_CHANGE,
- difference: '0x9345678923456789',
- isDecrease: true,
+ transaction: createTransactionMeta({
+ chainId: CHAIN_IDS.POLYGON,
+ simulationData: {
+ nativeBalanceChange: {
+ ...DUMMY_BALANCE_CHANGE,
+ difference: '0x9345678923456789',
+ isDecrease: true,
+ },
+ tokenBalanceChanges: [],
},
- tokenBalanceChanges: [],
- },
+ }),
},
- decorators: [
- (story) => {story()},
- ],
};
export const ArbitrumNativeAsset: Story = {
args: {
- simulationData: {
- nativeBalanceChange: {
- ...DUMMY_BALANCE_CHANGE,
- difference: '0x9345678923456789',
- isDecrease: true,
+ transaction: createTransactionMeta({
+ chainId: CHAIN_IDS.ARBITRUM,
+ simulationData: {
+ nativeBalanceChange: {
+ ...DUMMY_BALANCE_CHANGE,
+ difference: '0x9345678923456789',
+ isDecrease: true,
+ },
+ tokenBalanceChanges: [],
},
- tokenBalanceChanges: [],
- },
+ }),
},
- decorators: [
- (story) => {story()},
- ],
};
export const ReceiveOnly: Story = {
args: {
- simulationData: {
- nativeBalanceChange: {
- previousBalance: '0x2',
- newBalance: '0x1',
- difference: '0x12345678912345678',
- isDecrease: false,
+ transaction: createTransactionMeta({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: {
+ nativeBalanceChange: {
+ previousBalance: '0x2',
+ newBalance: '0x1',
+ difference: '0x12345678912345678',
+ isDecrease: false,
+ },
+ tokenBalanceChanges: [],
},
- tokenBalanceChanges: [],
- },
+ }),
},
};
export const SendOnly: Story = {
args: {
- simulationData: {
- nativeBalanceChange: {
- previousBalance: '0x1',
- newBalance: '0x2',
- difference: '0x12345678912345678',
- isDecrease: true,
+ transaction: createTransactionMeta({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: {
+ nativeBalanceChange: {
+ previousBalance: '0x1',
+ newBalance: '0x2',
+ difference: '0x12345678912345678',
+ isDecrease: true,
+ },
+ tokenBalanceChanges: [],
},
- tokenBalanceChanges: [],
- },
+ }),
},
};
export const NoBalanceChanges: Story = {
args: {
- simulationData: {
- nativeBalanceChange: undefined,
- tokenBalanceChanges: [],
- },
+ transaction: createTransactionMeta({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: {
+ nativeBalanceChange: undefined,
+ tokenBalanceChanges: [],
+ },
+ }),
},
};
export const Loading: Story = {
args: {
- simulationData: undefined,
+ transaction: createTransactionMeta({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: undefined,
+ }),
},
};
export const TransactionReverted: Story = {
args: {
- simulationData: {
- error: { code: SimulationErrorCode.Reverted },
- nativeBalanceChange: undefined,
- tokenBalanceChanges: [],
- },
+ transaction: createTransactionMeta({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: {
+ error: { code: SimulationErrorCode.Reverted },
+ nativeBalanceChange: undefined,
+ tokenBalanceChanges: [],
+ },
+ }),
},
};
export const GenericError: Story = {
args: {
- simulationData: {
- error: {},
- nativeBalanceChange: undefined,
- tokenBalanceChanges: [],
- },
+ transaction: createTransactionMeta({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: {
+ error: {},
+ nativeBalanceChange: undefined,
+ tokenBalanceChanges: [],
+ },
+ }),
},
};
diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx
index 5971e513e3a1..5bb182ac7e66 100644
--- a/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx
+++ b/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx
@@ -4,6 +4,7 @@ import { screen } from '@testing-library/react';
import {
SimulationData,
SimulationErrorCode,
+ TransactionMeta,
} from '@metamask/transaction-controller';
import { BigNumber } from 'bignumber.js';
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
@@ -28,8 +29,9 @@ jest.mock('./useSimulationMetrics');
const renderSimulationDetails = (simulationData?: Partial) =>
renderWithProvider(
,
store,
);
diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx
index 79d5c2105a9c..0ad01e921cff 100644
--- a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx
+++ b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx
@@ -1,7 +1,7 @@
import {
- SimulationData,
SimulationError,
SimulationErrorCode,
+ TransactionMeta,
} from '@metamask/transaction-controller';
import React from 'react';
import {
@@ -30,10 +30,9 @@ import { useBalanceChanges } from './useBalanceChanges';
import { useSimulationMetrics } from './useSimulationMetrics';
export type SimulationDetailsProps = {
- simulationData?: SimulationData;
- transactionId: string;
enableMetrics?: boolean;
isTransactionsRedesign?: boolean;
+ transaction: TransactionMeta;
};
/**
@@ -172,20 +171,19 @@ const SimulationDetailsLayout: React.FC<{
* Preview of a transaction's effects using simulation data.
*
* @param props
- * @param props.simulationData - The simulation data to display.
- * @param props.transactionId - The ID of the transaction being simulated.
+ * @param props.transaction - Metadata of the transaction that was simulated.
* @param props.enableMetrics - Whether to enable simulation metrics.
* @param props.isTransactionsRedesign - Whether or not the component is being
* used inside the transaction redesign flow.
*/
export const SimulationDetails: React.FC = ({
- simulationData,
- transactionId,
+ transaction,
enableMetrics = false,
isTransactionsRedesign = false,
}: SimulationDetailsProps) => {
const t = useI18nContext();
- const balanceChangesResult = useBalanceChanges(simulationData);
+ const { chainId, id: transactionId, simulationData } = transaction;
+ const balanceChangesResult = useBalanceChanges({ chainId, simulationData });
const loading = !simulationData || balanceChangesResult.pending;
useSimulationMetrics({
diff --git a/ui/pages/confirmations/components/simulation-details/types.ts b/ui/pages/confirmations/components/simulation-details/types.ts
index 7db6a30357cd..c1a3290f6838 100644
--- a/ui/pages/confirmations/components/simulation-details/types.ts
+++ b/ui/pages/confirmations/components/simulation-details/types.ts
@@ -2,10 +2,6 @@ import { Hex } from '@metamask/utils';
import { BigNumber } from 'bignumber.js';
import { TokenStandard } from '../../../../../shared/constants/transaction';
-export const NATIVE_ASSET_IDENTIFIER: NativeAssetIdentifier = {
- standard: TokenStandard.none,
-};
-
/**
* Describes an amount of fiat.
*/
@@ -17,6 +13,7 @@ export type FiatAmount = FiatAmountAvailable | typeof FIAT_UNAVAILABLE;
* Identifies the native asset of a chain.
*/
export type NativeAssetIdentifier = {
+ chainId: Hex;
standard: TokenStandard.none;
address?: undefined;
tokenId?: undefined;
@@ -26,6 +23,7 @@ export type NativeAssetIdentifier = {
* Uniquely identifies a token asset on a chain.
*/
export type TokenAssetIdentifier = {
+ chainId: Hex;
standard: Exclude;
address: Hex;
tokenId?: Hex;
diff --git a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts
index 5dc0be870538..f77774c6ec4a 100644
--- a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts
+++ b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts
@@ -57,6 +57,8 @@ const DIFFERENCE_1_MOCK: Hex = '0x11';
const DIFFERENCE_2_MOCK: Hex = '0x2';
const DIFFERENCE_ETH_MOCK: Hex = '0x1234567890123456789';
+const CHAIN_ID_MOCK = '0x123';
+
const dummyBalanceChange = {
previousBalance: '0xIGNORE' as Hex,
newBalance: '0xIGNORE' as Hex,
@@ -98,7 +100,10 @@ describe('useBalanceChanges', () => {
describe('pending states', () => {
it('returns pending=true if no simulation data', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
- useBalanceChanges(undefined),
+ useBalanceChanges({
+ chainId: CHAIN_ID_MOCK,
+ simulationData: undefined,
+ }),
);
expect(result.current).toEqual({ pending: true, value: [] });
await waitForNextUpdate();
@@ -119,7 +124,7 @@ describe('useBalanceChanges', () => {
],
};
const { result, unmount, waitForNextUpdate } = renderHook(() =>
- useBalanceChanges(simulationData),
+ useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
);
await waitForNextUpdate();
@@ -143,7 +148,7 @@ describe('useBalanceChanges', () => {
],
};
const { result, unmount, waitForNextUpdate } = renderHook(() =>
- useBalanceChanges(simulationData),
+ useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
);
await waitForNextUpdate();
@@ -161,7 +166,9 @@ describe('useBalanceChanges', () => {
nativeBalanceChange: undefined,
tokenBalanceChanges,
};
- return renderHook(() => useBalanceChanges(simulationData));
+ return renderHook(() =>
+ useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
+ );
};
it('maps token balance changes correctly', async () => {
@@ -181,6 +188,7 @@ describe('useBalanceChanges', () => {
expect(changes).toEqual([
{
asset: {
+ chainId: CHAIN_ID_MOCK,
address: ERC20_TOKEN_ADDRESS_1_MOCK,
standard: TokenStandard.ERC20,
tokenId: undefined,
@@ -237,6 +245,7 @@ describe('useBalanceChanges', () => {
expect(result.current.value).toEqual([
{
asset: {
+ chainId: CHAIN_ID_MOCK,
address: NFT_TOKEN_ADDRESS_MOCK,
standard: TokenStandard.ERC721,
tokenId: TOKEN_ID_1_MOCK,
@@ -307,7 +316,9 @@ describe('useBalanceChanges', () => {
nativeBalanceChange,
tokenBalanceChanges: [],
};
- return renderHook(() => useBalanceChanges(simulationData));
+ return renderHook(() =>
+ useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
+ );
};
it('maps native balance change correctly', async () => {
@@ -323,6 +334,7 @@ describe('useBalanceChanges', () => {
expect(changes).toEqual([
{
asset: {
+ chainId: CHAIN_ID_MOCK,
standard: TokenStandard.none,
},
amount: new BigNumber('-5373.003641998677469065'),
@@ -382,7 +394,7 @@ describe('useBalanceChanges', () => {
],
};
const { result, waitForNextUpdate } = renderHook(() =>
- useBalanceChanges(simulationData),
+ useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
);
await waitForNextUpdate();
@@ -390,6 +402,7 @@ describe('useBalanceChanges', () => {
const changes = result.current.value;
expect(changes).toHaveLength(2);
expect(changes[0].asset).toEqual({
+ chainId: CHAIN_ID_MOCK,
standard: TokenStandard.none,
});
expect(changes[0].amount).toEqual(
@@ -397,6 +410,7 @@ describe('useBalanceChanges', () => {
);
expect(changes[0].fiatAmount).toBe(Number('-16119.010925996032'));
expect(changes[1].asset).toEqual({
+ chainId: CHAIN_ID_MOCK,
address: ERC20_TOKEN_ADDRESS_1_MOCK,
standard: TokenStandard.ERC20,
});
diff --git a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts
index 2a198d76ea36..1bbc9cb5eec8 100644
--- a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts
+++ b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts
@@ -11,14 +11,14 @@ import { ContractExchangeRates } from '@metamask/assets-controllers';
import { useAsyncResultOrThrow } from '../../../../hooks/useAsyncResult';
import { TokenStandard } from '../../../../../shared/constants/transaction';
import { getConversionRate } from '../../../../ducks/metamask/metamask';
-import { getCurrentChainId, getCurrentCurrency } from '../../../../selectors';
+import { getCurrentCurrency } from '../../../../selectors';
import { fetchTokenExchangeRates } from '../../../../helpers/utils/util';
import { ERC20_DEFAULT_DECIMALS, fetchErc20Decimals } from '../../utils/token';
import {
BalanceChange,
FIAT_UNAVAILABLE,
- NATIVE_ASSET_IDENTIFIER,
+ NativeAssetIdentifier,
TokenAssetIdentifier,
} from './types';
@@ -94,17 +94,25 @@ async function fetchTokenFiatRates(
function getNativeBalanceChange(
nativeBalanceChange: SimulationBalanceChange | undefined,
nativeFiatRate: number | undefined,
+ chainId: Hex,
): BalanceChange | undefined {
if (!nativeBalanceChange) {
return undefined;
}
- const asset = NATIVE_ASSET_IDENTIFIER;
+
+ const asset: NativeAssetIdentifier = {
+ chainId,
+ standard: TokenStandard.none,
+ };
+
const amount = getAssetAmount(nativeBalanceChange, NATIVE_DECIMALS);
+
const fiatAmount = nativeFiatRate
? amount
.times(convertNumberToStringWithPrecisionWarning(nativeFiatRate))
.toNumber()
: FIAT_UNAVAILABLE;
+
return { asset, amount, fiatAmount };
}
@@ -113,9 +121,11 @@ function getTokenBalanceChanges(
tokenBalanceChanges: SimulationTokenBalanceChange[],
erc20Decimals: Record,
erc20FiatRates: Partial>,
+ chainId: Hex,
): BalanceChange[] {
return tokenBalanceChanges.map((tokenBc) => {
const asset: TokenAssetIdentifier = {
+ chainId,
standard: convertStandard(tokenBc.standard),
address: tokenBc.address.toLowerCase() as Hex,
tokenId: tokenBc.id,
@@ -140,10 +150,13 @@ function getTokenBalanceChanges(
}
// Compiles a list of balance changes from simulation data
-export const useBalanceChanges = (
- simulationData: SimulationData | undefined,
-): { pending: boolean; value: BalanceChange[] } => {
- const chainId = useSelector(getCurrentChainId);
+export const useBalanceChanges = ({
+ chainId,
+ simulationData,
+}: {
+ chainId: Hex;
+ simulationData?: SimulationData;
+}): { pending: boolean; value: BalanceChange[] } => {
const fiatCurrency = useSelector(getCurrentCurrency);
const nativeFiatRate = useSelector(getConversionRate);
@@ -171,11 +184,14 @@ export const useBalanceChanges = (
const nativeChange = getNativeBalanceChange(
nativeBalanceChange,
nativeFiatRate,
+ chainId,
);
+
const tokenChanges = getTokenBalanceChanges(
tokenBalanceChanges,
erc20Decimals.value,
erc20FiatRates.value,
+ chainId,
);
const balanceChanges: BalanceChange[] = [
diff --git a/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts b/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts
index 1f5c349d0050..15e8327176ea 100644
--- a/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts
+++ b/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts
@@ -4,7 +4,6 @@ import {
} from '@metamask/transaction-controller';
import { useContext, useEffect, useState } from 'react';
import { NameType } from '@metamask/name-controller';
-import { useSelector } from 'react-redux';
import { useTransactionEventFragment } from '../../hooks/useTransactionEventFragment';
import {
UseDisplayNameRequest,
@@ -17,7 +16,6 @@ import {
MetaMetricsEventCategory,
MetaMetricsEventName,
} from '../../../../../shared/constants/metametrics';
-import { getCurrentChainId } from '../../../../selectors';
import { calculateTotalFiat } from './fiat-display';
import { BalanceChange } from './types';
import { useLoadingTime } from './useLoadingTime';
@@ -65,9 +63,6 @@ export function useSimulationMetrics({
}: UseSimulationMetricsProps) {
const { loadingTime, setLoadingComplete } = useLoadingTime();
- // TODO: Temporary pending multi-chain support in simulations.
- const chainId = useSelector(getCurrentChainId);
-
if (!loading) {
setLoadingComplete();
}
@@ -79,7 +74,7 @@ export function useSimulationMetrics({
value: asset.address as string,
type: NameType.ETHEREUM_ADDRESS,
preferContractSymbol: true,
- variation: chainId,
+ variation: asset.chainId,
}));
const displayNames = useDisplayNames(displayNameRequests);
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
index 1ae7eaaeb33d..c07b8a263f8a 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
@@ -543,11 +543,7 @@ export default class ConfirmTransactionBase extends Component {
const { simulationData } = txData;
const simulationDetails = (
-
+
);
const showTotals = Boolean(simulationData?.error);
diff --git a/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx b/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx
index 4492ed4e4844..5e4ef2511a51 100644
--- a/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx
+++ b/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx
@@ -366,10 +366,7 @@ export const SmartTransactionStatusPage = ({
{canShowSimulationDetails && (
-
+
)}