Merge branch 'develop' into feature/migrate-account-tracker-controlle…

…r-to-bc2

jest.config.js

@@ -1,12 +1,10 @@
 module.exports = {
   collectCoverageFrom: [
-    '<rootDir>/app/**/*.(js|ts|tsx)',
-    '<rootDir>/development/**/*.(js|ts|tsx)',
-    '<rootDir>/offscreen/**/*.(js|ts|tsx)',
+    '<rootDir>/app/scripts/**/*.(js|ts|tsx)',
     '<rootDir>/shared/**/*.(js|ts|tsx)',
-    '<rootDir>/test/**/*.(js|ts|tsx)',
-    '<rootDir>/types/**/*.(js|ts|tsx)',
     '<rootDir>/ui/**/*.(js|ts|tsx)',
+    '<rootDir>/development/build/transforms/**/*.js',
+    '<rootDir>/test/unit-global/**/*.test.(js|ts|tsx)',
   ],
   coverageDirectory: './coverage/unit',
   coveragePathIgnorePatterns: ['.stories.*', '.snap'],

test/data/confirmations/contract-interaction.ts

@@ -1,4 +1,6 @@
 import {
+  SimulationData,
+  TransactionMeta,
   TransactionStatus,
   TransactionType,
 } from '@metamask/transaction-controller';
@@ -22,12 +24,14 @@ export const genUnapprovedContractInteractionConfirmation = ({
   address = CONTRACT_INTERACTION_SENDER_ADDRESS,
   txData = DEPOSIT_METHOD_DATA,
   chainId = CHAIN_ID,
+  simulationData,
 }: {
   address?: Hex;
   txData?: Hex;
   chainId?: string;
-} = {}): Confirmation =>
-  ({
+  simulationData?: SimulationData;
+} = {}): Confirmation => {
+  const confirmation: Confirmation = {
     actionId: String(400855682),
     chainId,
     dappSuggestedGasFees: {
@@ -160,4 +164,12 @@ export const genUnapprovedContractInteractionConfirmation = ({
     userEditedGasLimit: false,
     userFeeLevel: 'medium',
     verifiedOnBlockchain: false,
-  } as SignatureRequestType);
+  } as SignatureRequestType;
+
+  // Overwrite simulation data if provided
+  if (simulationData) {
+    (confirmation as TransactionMeta).simulationData = simulationData;
+  }
+
+  return confirmation;
+};

test/e2e/tests/metrics/dapp-viewed.spec.js

@@ -14,11 +14,40 @@ const {
   MetaMetricsEventName,
 } = require('../../../../shared/constants/metametrics');
 
-async function mockedDappViewedEndpoint(mockServer) {
+async function mockedDappViewedEndpointFirstVisit(mockServer) {
   return await mockServer
     .forPost('https://api.segment.io/v1/batch')
     .withJsonBodyIncluding({
-      batch: [{ type: 'track', event: MetaMetricsEventName.DappViewed }],
+      batch: [
+        {
+          type: 'track',
+          event: MetaMetricsEventName.DappViewed,
+          properties: {
+            is_first_visit: true,
+          },
+        },
+      ],
+    })
+    .thenCallback(() => {
+      return {
+        statusCode: 200,
+      };
+    });
+}
+
+async function mockedDappViewedEndpointReVisit(mockServer) {
+  return await mockServer
+    .forPost('https://api.segment.io/v1/batch')
+    .withJsonBodyIncluding({
+      batch: [
+        {
+          type: 'track',
+          event: MetaMetricsEventName.DappViewed,
+          properties: {
+            is_first_visit: false,
+          },
+        },
+      ],
     })
     .thenCallback(() => {
       return {
@@ -67,7 +96,7 @@ describe('Dapp viewed Event @no-mmi', function () {
   const validFakeMetricsId = 'fake-metrics-fd20';
   it('is not sent when metametrics ID is not valid', async function () {
     async function mockSegment(mockServer) {
-      return [await mockedDappViewedEndpoint(mockServer)];
+      return [await mockedDappViewedEndpointFirstVisit(mockServer)];
     }
 
     await withFixtures(
@@ -93,7 +122,7 @@ describe('Dapp viewed Event @no-mmi', function () {
 
   it('is sent when navigating to dapp with no account connected', async function () {
     async function mockSegment(mockServer) {
-      return [await mockedDappViewedEndpoint(mockServer)];
+      return [await mockedDappViewedEndpointFirstVisit(mockServer)];
     }
 
     await withFixtures(
@@ -125,8 +154,8 @@ describe('Dapp viewed Event @no-mmi', function () {
   it('is sent when opening the dapp in a new tab with one account connected', async function () {
     async function mockSegment(mockServer) {
       return [
-        await mockedDappViewedEndpoint(mockServer),
-        await mockedDappViewedEndpoint(mockServer),
+        await mockedDappViewedEndpointFirstVisit(mockServer),
+        await mockedDappViewedEndpointReVisit(mockServer),
         await mockPermissionApprovedEndpoint(mockServer),
       ];
     }
@@ -163,8 +192,8 @@ describe('Dapp viewed Event @no-mmi', function () {
   it('is sent when refreshing dapp with one account connected', async function () {
     async function mockSegment(mockServer) {
       return [
-        await mockedDappViewedEndpoint(mockServer),
-        await mockedDappViewedEndpoint(mockServer),
+        await mockedDappViewedEndpointFirstVisit(mockServer),
+        await mockedDappViewedEndpointReVisit(mockServer),
         await mockPermissionApprovedEndpoint(mockServer),
       ];
     }
@@ -189,10 +218,9 @@ describe('Dapp viewed Event @no-mmi', function () {
         // refresh dapp
         await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
         await driver.refresh();
-
         const events = await getEventPayloads(driver, mockedEndpoints);
 
-        // events are original dapp viewed, new dapp viewed when refresh, and permission approved
+        // events are original dapp viewed, navigate to dapp, new dapp viewed when refresh, new dapp viewed when navigate and permission approved
         const dappViewedEventProperties = events[1].properties;
         assert.equal(dappViewedEventProperties.is_first_visit, false);
         assert.equal(dappViewedEventProperties.number_of_accounts, 1);
@@ -204,10 +232,10 @@ describe('Dapp viewed Event @no-mmi', function () {
   it('is sent when navigating to a connected dapp', async function () {
     async function mockSegment(mockServer) {
       return [
-        await mockedDappViewedEndpoint(mockServer),
-        await mockedDappViewedEndpoint(mockServer),
-        await mockedDappViewedEndpoint(mockServer),
-        await mockedDappViewedEndpoint(mockServer),
+        await mockedDappViewedEndpointFirstVisit(mockServer),
+        await mockedDappViewedEndpointReVisit(mockServer),
+        await mockedDappViewedEndpointFirstVisit(mockServer),
+        await mockedDappViewedEndpointReVisit(mockServer),
         await mockPermissionApprovedEndpoint(mockServer),
       ];
     }
@@ -247,7 +275,7 @@ describe('Dapp viewed Event @no-mmi', function () {
 
   it('is sent when connecting dapp with two accounts', async function () {
     async function mockSegment(mockServer) {
-      return [await mockedDappViewedEndpoint(mockServer)];
+      return [await mockedDappViewedEndpointFirstVisit(mockServer)];
     }
     await withFixtures(
       {
@@ -299,8 +327,8 @@ describe('Dapp viewed Event @no-mmi', function () {
   it('is sent when reconnect to a dapp that has been connected before', async function () {
     async function mockSegment(mockServer) {
       return [
-        await mockedDappViewedEndpoint(mockServer),
-        await mockedDappViewedEndpoint(mockServer),
+        await mockedDappViewedEndpointFirstVisit(mockServer),
+        await mockedDappViewedEndpointReVisit(mockServer),
       ];
     }
 

ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.test.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
+import { SimulationErrorCode } from '@metamask/transaction-controller';
 import {
   getMockConfirmState,
+  getMockConfirmStateForTransaction,
   getMockContractInteractionConfirmState,
 } from '../../../../../../../../test/data/confirmations/helper';
 import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
+import { CHAIN_IDS } from '../../../../../../../../shared/constants/network';
+import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../../test/data/confirmations/contract-interaction';
 import { TransactionDetails } from './transaction-details';
 
 jest.mock(
@@ -39,4 +43,22 @@ describe('<TransactionDetails />', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('renders component for transaction details with amount', () => {
+    const simulationDataMock = {
+      error: { code: SimulationErrorCode.Disabled },
+      tokenBalanceChanges: [],
+    };
+    const contractInteraction = genUnapprovedContractInteractionConfirmation({
+      simulationData: simulationDataMock,
+      chainId: CHAIN_IDS.GOERLI,
+    });
+    const state = getMockConfirmStateForTransaction(contractInteraction);
+    const mockStore = configureMockStore(middleware)(state);
+    const { getByTestId } = renderWithConfirmContextProvider(
+      <TransactionDetails />,
+      mockStore,
+    );
+    expect(getByTestId('transaction-details-amount-row')).toBeInTheDocument();
+  });
 });

ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.tsx

@@ -16,6 +16,10 @@ import { selectPaymasterAddress } from '../../../../../../../selectors/account-a
 import { selectConfirmationAdvancedDetailsOpen } from '../../../../../selectors/preferences';
 import { useConfirmContext } from '../../../../../context/confirm';
 import { useFourByte } from '../../hooks/useFourByte';
+import { ConfirmInfoRowCurrency } from '../../../../../../../components/app/confirm/info/row/currency';
+import { PRIMARY } from '../../../../../../../helpers/constants/common';
+import { useUserPreferencedCurrency } from '../../../../../../../hooks/useUserPreferencedCurrency';
+import { HEX_ZERO } from '../constants';
 
 export const OriginRow = () => {
   const t = useI18nContext();
@@ -83,6 +87,30 @@ export const MethodDataRow = () => {
   );
 };
 
+const AmountRow = () => {
+  const t = useI18nContext();
+  const { currentConfirmation } = useConfirmContext<TransactionMeta>();
+  const { currency } = useUserPreferencedCurrency(PRIMARY);
+
+  const value = currentConfirmation?.txParams?.value;
+  const simulationData = currentConfirmation?.simulationData;
+
+  if (!value || value === HEX_ZERO || !simulationData?.error) {
+    return null;
+  }
+
+  return (
+    <ConfirmInfoSection>
+      <ConfirmInfoRow
+        data-testid="transaction-details-amount-row"
+        label={t('amount')}
+      >
+        <ConfirmInfoRowCurrency value={value} currency={currency} />
+      </ConfirmInfoRow>
+    </ConfirmInfoSection>
+  );
+};
+
 const PaymasterRow = () => {
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
@@ -124,6 +152,7 @@ export const TransactionDetails = () => {
         <RecipientRow />
         {showAdvancedDetails && <MethodDataRow />}
       </ConfirmInfoSection>
+      <AmountRow />
       <PaymasterRow />
     </>
   );