Skip to content

Commit

Permalink
feat: Add ui_customizations metric for transactions
Browse files Browse the repository at this point in the history
  • Loading branch information
@pedronfigueiredo
pedronfigueiredo committed Jul 10, 2024
1 parent 059166b commit 3cb2611
Show file tree
Hide file tree
Showing 4 changed files with 451 additions and 173 deletions.
8 changes: 8 additions & 0 deletions app/scripts/lib/transaction/metrics.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import {
getSnapAndHardwareInfoForMetrics,
type SnapAndHardwareMessenger,
} from '../snap-keyring/metrics';
import { REDESIGN_TRANSACTION_TYPES } from '../../../../ui/pages/confirmations/utils';

export type TransactionMetricsRequest = {
createEventFragment: (
Expand Down Expand Up @@ -978,6 +979,13 @@ async function buildEventFragmentProperties({
uiCustomizations.push(MetaMetricsEventUiCustomization.GasEstimationFailed);
}

if (
REDESIGN_TRANSACTION_TYPES.includes(transactionMeta.type as TransactionType)
) {
uiCustomizations.push(
MetaMetricsEventUiCustomization.RedesignedConfirmation,
);
}
const smartTransactionMetricsProperties =
getSmartTransactionMetricsProperties(
transactionMetricsRequest,
Expand Down
217 changes: 44 additions & 173 deletions ...ons/contract-interaction-redesign.spec.js → ...ons/contract-interaction-redesign.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
import GanacheContractAddressRegistry from '../../../seeder/ganache-contract-address-registry';
import {
assertAdvancedGasDetails,
assertAdvancedGasDetailsWithL2Breakdown,
confirmContractDeploymentTransaction,
confirmDepositTransaction,
confirmDepositTransactionWithCustomNonce,
createContractDeploymentTransaction,
createDepositTransaction,
TestSuiteArguments,
toggleAdvancedDetails,
toggleOnCustomNonce,
toggleOnHexData,
} from './shared';

const { hexToNumber } = require('@metamask/utils');
const {
defaultGanacheOptions,
Expand All @@ -8,7 +24,6 @@ const {
withFixtures,
} = require('../../../helpers');
const FixtureBuilder = require('../../../fixture-builder');
const { scrollAndConfirmAndAssertConfirm } = require('../helpers');
const { SMART_CONTRACTS } = require('../../../seeder/smart-contracts');
const { CHAIN_IDS } = require('../../../../../shared/constants/network');

Expand All @@ -34,10 +49,10 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
smartContract,
title: this.test?.fullTitle(),
},
async ({ driver, contractRegistry }) => {
const contractAddress = await contractRegistry.getContractAddress(
smartContract,
);
async ({ driver, contractRegistry }: TestSuiteArguments) => {
const contractAddress = await (
contractRegistry as GanacheContractAddressRegistry
).getContractAddress(smartContract);
await unlockWallet(driver);

await openDapp(driver, contractAddress);
Expand All @@ -62,10 +77,10 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
smartContract,
title: this.test?.fullTitle(),
},
async ({ driver, contractRegistry }) => {
const contractAddress = await contractRegistry.getContractAddress(
smartContract,
);
async ({ driver, contractRegistry }: TestSuiteArguments) => {
const contractAddress = await (
contractRegistry as GanacheContractAddressRegistry
).getContractAddress(smartContract);
await unlockWallet(driver);

await openDapp(driver, contractAddress);
Expand Down Expand Up @@ -95,10 +110,10 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
smartContract,
title: this.test?.fullTitle(),
},
async ({ driver, contractRegistry }) => {
const contractAddress = await contractRegistry.getContractAddress(
smartContract,
);
async ({ driver, contractRegistry }: TestSuiteArguments) => {
const contractAddress = await (
contractRegistry as GanacheContractAddressRegistry
).getContractAddress(smartContract);
await unlockWallet(driver);

await openDapp(driver, contractAddress);
Expand Down Expand Up @@ -128,10 +143,10 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
smartContract,
title: this.test?.fullTitle(),
},
async ({ driver, contractRegistry }) => {
const contractAddress = await contractRegistry.getContractAddress(
smartContract,
);
async ({ driver, contractRegistry }: TestSuiteArguments) => {
const contractAddress = await (
contractRegistry as GanacheContractAddressRegistry
).getContractAddress(smartContract);
await unlockWallet(driver);

await openDapp(driver, contractAddress);
Expand Down Expand Up @@ -160,10 +175,10 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
smartContract,
title: this.test?.fullTitle(),
},
async ({ driver, contractRegistry }) => {
const contractAddress = await contractRegistry.getContractAddress(
smartContract,
);
async ({ driver, contractRegistry }: TestSuiteArguments) => {
const contractAddress = await (
contractRegistry as GanacheContractAddressRegistry
).getContractAddress(smartContract);
await unlockWallet(driver);

await openDapp(driver, contractAddress);
Expand Down Expand Up @@ -195,10 +210,10 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
smartContract,
title: this.test?.fullTitle(),
},
async ({ driver, contractRegistry }) => {
const contractAddress = await contractRegistry.getContractAddress(
smartContract,
);
async ({ driver, contractRegistry }: TestSuiteArguments) => {
const contractAddress = await (
contractRegistry as GanacheContractAddressRegistry
).getContractAddress(smartContract);
await unlockWallet(driver);

await openDapp(driver, contractAddress);
Expand Down Expand Up @@ -238,10 +253,10 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
smartContract,
title: this.test?.fullTitle(),
},
async ({ driver, contractRegistry }) => {
const contractAddress = await contractRegistry.getContractAddress(
smartContract,
);
async ({ driver, contractRegistry }: TestSuiteArguments) => {
const contractAddress = await (
contractRegistry as GanacheContractAddressRegistry
).getContractAddress(smartContract);
await unlockWallet(driver);

await openDapp(driver, contractAddress);
Expand All @@ -258,147 +273,3 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
});
});
});

async function createContractDeploymentTransaction(driver) {
await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
await driver.clickElement(`#deployButton`);
}

async function confirmContractDeploymentTransaction(driver) {
await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);

await driver.waitForSelector({
css: '.confirm-page-container-summary__action__name',
text: 'Contract deployment',
});

await driver.clickElement({ text: 'Confirm', tag: 'button' });

await driver.delay(2000);
await driver.waitUntilXWindowHandles(2);

await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
await driver.clickElement({ text: 'Activity', tag: 'button' });
await driver.waitForSelector(
'.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)',
);
}

async function createDepositTransaction(driver) {
await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
await driver.clickElement(`#depositButton`);
}

async function confirmDepositTransaction(driver) {
await driver.waitUntilXWindowHandles(3);

await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);

await driver.waitForSelector({
css: 'h2',
text: 'Transaction request',
});

await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
await toggleAdvancedDetails(driver);

await driver.waitForSelector({
css: 'p',
text: 'Nonce',
});

await scrollAndConfirmAndAssertConfirm(driver);
}

async function confirmDepositTransactionWithCustomNonce(driver, customNonce) {
await driver.waitUntilXWindowHandles(3);
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);

await driver.waitForSelector({
css: 'h2',
text: 'Transaction request',
});

await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
await toggleAdvancedDetails(driver);

await driver.waitForSelector({
css: 'p',
text: 'Nonce',
});

await driver.clickElement('.edit-nonce-btn');
await driver.fill('[data-testid="custom-nonce-input"]', customNonce);
await driver.clickElement({
text: 'Save',
tag: 'button',
});
await scrollAndConfirmAndAssertConfirm(driver);

// Confirm tx was submitted with the higher nonce
await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);

await driver.delay(500);

const sendTransactionListItem = await driver.findElement(
'.transaction-list__pending-transactions .activity-list-item',
);
await sendTransactionListItem.click();

await driver.waitForSelector({
css: '.transaction-breakdown__value',
text: customNonce,
});
}

async function toggleOnCustomNonce(driver) {
// switch to metamask page and open the three dots menu
await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);

// Open settings menu button
const accountOptionsMenuSelector =
'[data-testid="account-options-menu-button"]';
await driver.clickElement(accountOptionsMenuSelector);

// Click settings from dropdown menu
const globalMenuSettingsSelector = '[data-testid="global-menu-settings"]';
await driver.waitForSelector(globalMenuSettingsSelector);
await driver.clickElement(globalMenuSettingsSelector);

// Click Advanced tab
const advancedTabRawLocator = {
text: 'Advanced',
tag: 'div',
};
await driver.clickElement(advancedTabRawLocator);

// Toggle on custom toggle setting (off by default)
await driver.clickElement('.custom-nonce-toggle');

// Close settings
await driver.clickElement(
'.settings-page__header__title-container__close-button',
);
}

async function toggleAdvancedDetails(driver) {
// TODO - Scroll button not shown in Firefox if advanced details enabled too fast.
await driver.delay(1000);

await driver.clickElement(`[data-testid="header-advanced-details-button"]`);
}

async function assertAdvancedGasDetails(driver) {
await driver.waitForSelector({ css: 'p', text: 'Estimated fee' });
await driver.waitForSelector({ css: 'p', text: 'Speed' });
await driver.waitForSelector({ css: 'p', text: 'Max fee' });
}

async function assertAdvancedGasDetailsWithL2Breakdown(driver) {
await driver.waitForSelector({ css: 'p', text: 'Estimated fee' });
await driver.waitForSelector({ css: 'p', text: 'L1 fee' });
await driver.waitForSelector({ css: 'p', text: 'L2 fee' });
await driver.waitForSelector({ css: 'p', text: 'Speed' });
await driver.waitForSelector({ css: 'p', text: 'Max fee' });
}
Loading

0 comments on commit 3cb2611

Please sign in to comment.