Skip to content

Commit

Permalink
feat: Native asset send (#27979)
Browse files Browse the repository at this point in the history
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Implements redesigned native asset transfer (Simple send) both for
wallet initiated and dApp initiated confirmations. Includes e2e tests.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27979?quickstart=1)

## **Related issues**

Fixes: MetaMask/MetaMask-planning#3028
MetaMask/MetaMask-planning#3027

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

<img width="358" alt="Screenshot 2024-10-21 at 10 32 05"
src="https://github.com/user-attachments/assets/a8149e22-0f5a-49e5-b051-cc3969db9d1a">

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
  • Loading branch information
pedronfigueiredo authored Oct 30, 2024
1 parent 7e765c3 commit 5bb3885
Show file tree
Hide file tree
Showing 18 changed files with 970 additions and 80 deletions.
65 changes: 51 additions & 14 deletions app/scripts/lib/transaction/metrics.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ describe('Transaction metrics', () => {
eip_1559_version: '0',
gas_edit_attempted: 'none',
gas_estimation_failed: false,
is_smart_transaction: undefined,
gas_edit_type: 'none',
network: mockNetworkId,
referrer: ORIGIN_METAMASK,
Expand All @@ -155,8 +156,8 @@ describe('Transaction metrics', () => {
token_standard: TokenStandard.none,
transaction_speed_up: false,
transaction_type: TransactionType.simpleSend,
ui_customizations: null,
transaction_advanced_view: null,
ui_customizations: ['redesigned_confirmation'],
transaction_advanced_view: undefined,
transaction_contract_method: undefined,
};

Expand Down Expand Up @@ -233,7 +234,10 @@ describe('Transaction metrics', () => {
persist: true,
properties: {
...expectedProperties,
ui_customizations: ['gas_estimation_failed'],
ui_customizations: [
'gas_estimation_failed',
'redesigned_confirmation',
],
gas_estimation_failed: true,
},
sensitiveProperties: expectedSensitiveProperties,
Expand Down Expand Up @@ -263,7 +267,10 @@ describe('Transaction metrics', () => {
...expectedProperties,
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
ppom_eth_call_count: 5,
ppom_eth_getCode_count: 3,
},
Expand Down Expand Up @@ -353,7 +360,10 @@ describe('Transaction metrics', () => {
persist: true,
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand All @@ -370,7 +380,10 @@ describe('Transaction metrics', () => {
{
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand Down Expand Up @@ -490,7 +503,10 @@ describe('Transaction metrics', () => {
persist: true,
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand All @@ -510,7 +526,10 @@ describe('Transaction metrics', () => {
{
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand Down Expand Up @@ -687,7 +706,10 @@ describe('Transaction metrics', () => {
persist: true,
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand All @@ -709,7 +731,10 @@ describe('Transaction metrics', () => {
{
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand Down Expand Up @@ -820,7 +845,10 @@ describe('Transaction metrics', () => {
persist: true,
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand All @@ -841,7 +869,10 @@ describe('Transaction metrics', () => {
{
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand Down Expand Up @@ -947,7 +978,10 @@ describe('Transaction metrics', () => {
persist: true,
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand All @@ -964,7 +998,10 @@ describe('Transaction metrics', () => {
{
properties: {
...expectedProperties,
ui_customizations: ['flagged_as_malicious'],
ui_customizations: [
'flagged_as_malicious',
'redesigned_confirmation',
],
security_alert_reason: BlockaidReason.maliciousDomain,
security_alert_response: 'Malicious',
ppom_eth_call_count: 5,
Expand Down
6 changes: 6 additions & 0 deletions test/e2e/page-objects/pages/test-dapp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ class TestDapp {
tag: 'button',
};

private readonly simpleSendButton = '#sendButton';

private readonly erc721MintButton = '#mintButton';

private readonly erc721TransferFromButton = '#transferFromButton';
Expand Down Expand Up @@ -186,6 +188,10 @@ class TestDapp {
});
}

async clickSimpleSendButton() {
await this.driver.clickElement(this.simpleSendButton);
}

async clickERC721MintButton() {
await this.driver.clickElement(this.erc721MintButton);
}
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/tests/confirmations/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export function withRedesignConfirmationFixtures(
transactionEnvelopeType === TransactionEnvelopeType.legacy
? defaultGanacheOptions
: defaultGanacheOptionsForType2Transactions,
smartContract,
testSpecificMock: mocks,
...(smartContract && { smartContract }),
...(mocks && { testSpecificMock: mocks }),
title,
},
testFunction,
Expand Down
32 changes: 16 additions & 16 deletions test/e2e/tests/confirmations/navigation.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,15 @@ describe('Navigation Signature - Different signature types', function (this: Sui
'[data-testid="confirm-nav__next-confirmation"]',
);

// Verify Transaction Sending ETH is displayed
await verifyTransaction(driver, 'Sending ETH');
// Verify simple send transaction is displayed
await driver.waitForSelector({
tag: 'h3',
text: 'Transfer request',
});

await driver.clickElement('[data-testid="next-page"]');
await driver.clickElement(
'[data-testid="confirm-nav__next-confirmation"]',
);

// Verify Sign Typed Data v3 confirmation is displayed
await verifySignedTypeV3Confirmation(driver);
Expand All @@ -78,10 +83,15 @@ describe('Navigation Signature - Different signature types', function (this: Sui
'[data-testid="confirm-nav__previous-confirmation"]',
);

// Verify Sign Typed Data v3 confirmation is displayed
await verifyTransaction(driver, 'Sending ETH');
// Verify simple send transaction is displayed
await driver.waitForSelector({
tag: 'h3',
text: 'Transfer request',
});

await driver.clickElement('[data-testid="previous-page"]');
await driver.clickElement(
'[data-testid="confirm-nav__previous-confirmation"]',
);

// Verify Sign Typed Data v3 confirmation is displayed
await verifySignTypedData(driver);
Expand Down Expand Up @@ -179,13 +189,3 @@ async function queueSignaturesAndTransactions(driver: Driver) {
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
await driver.waitForSelector(By.xpath("//div[normalize-space(.)='1 of 3']"));
}

async function verifyTransaction(
driver: Driver,
expectedTransactionType: string,
) {
await driver.waitForSelector({
tag: 'span',
text: expectedTransactionType,
});
}
113 changes: 113 additions & 0 deletions test/e2e/tests/confirmations/transactions/native-send-redesign.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
import { TransactionEnvelopeType } from '@metamask/transaction-controller';
import { DAPP_URL } from '../../../constants';
import {
unlockWallet,
veryLargeDelayMs,
WINDOW_TITLES,
} from '../../../helpers';
import TokenTransferTransactionConfirmation from '../../../page-objects/pages/confirmations/redesign/token-transfer-confirmation';
import HomePage from '../../../page-objects/pages/homepage';
import SendTokenPage from '../../../page-objects/pages/send/send-token-page';
import TestDapp from '../../../page-objects/pages/test-dapp';
import { Driver } from '../../../webdriver/driver';
import { withRedesignConfirmationFixtures } from '../helpers';
import { TestSuiteArguments } from './shared';

const TOKEN_RECIPIENT_ADDRESS = '0x2f318C334780961FB129D2a6c30D0763d9a5C970';

describe('Confirmation Redesign Native Send @no-mmi', function () {
describe('Wallet initiated', async function () {
it('Sends a type 0 transaction (Legacy)', async function () {
await withRedesignConfirmationFixtures(
this.test?.fullTitle(),
TransactionEnvelopeType.legacy,
async ({ driver }: TestSuiteArguments) => {
await createWalletInitiatedTransactionAndAssertDetails(driver);
},
);
});

it('Sends a type 2 transaction (EIP1559)', async function () {
await withRedesignConfirmationFixtures(
this.test?.fullTitle(),
TransactionEnvelopeType.feeMarket,
async ({ driver }: TestSuiteArguments) => {
await createWalletInitiatedTransactionAndAssertDetails(driver);
},
);
});
});

describe('dApp initiated', async function () {
it('Sends a type 0 transaction (Legacy)', async function () {
await withRedesignConfirmationFixtures(
this.test?.fullTitle(),
TransactionEnvelopeType.legacy,
async ({ driver }: TestSuiteArguments) => {
await createDAppInitiatedTransactionAndAssertDetails(driver);
},
);
});

it('Sends a type 2 transaction (EIP1559)', async function () {
await withRedesignConfirmationFixtures(
this.test?.fullTitle(),
TransactionEnvelopeType.feeMarket,
async ({ driver }: TestSuiteArguments) => {
await createDAppInitiatedTransactionAndAssertDetails(driver);
},
);
});
});
});

async function createWalletInitiatedTransactionAndAssertDetails(
driver: Driver,
) {
await unlockWallet(driver);

const testDapp = new TestDapp(driver);

await testDapp.openTestDappPage({ contractAddress: null, url: DAPP_URL });

await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
const homePage = new HomePage(driver);
await homePage.startSendFlow();
const sendToPage = new SendTokenPage(driver);
await sendToPage.check_pageIsLoaded();
await sendToPage.fillRecipient(TOKEN_RECIPIENT_ADDRESS);
await sendToPage.fillAmount('1');
await sendToPage.goToNextScreen();

const tokenTransferTransactionConfirmation =
new TokenTransferTransactionConfirmation(driver);
await tokenTransferTransactionConfirmation.check_walletInitiatedHeadingTitle();
await tokenTransferTransactionConfirmation.check_networkParagraph();
await tokenTransferTransactionConfirmation.check_networkFeeParagraph();

await tokenTransferTransactionConfirmation.clickFooterConfirmButton();
}

async function createDAppInitiatedTransactionAndAssertDetails(driver: Driver) {
await unlockWallet(driver);

const testDapp = new TestDapp(driver);

await testDapp.openTestDappPage({ contractAddress: null, url: DAPP_URL });

await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);

await testDapp.clickSimpleSendButton();

await driver.delay(veryLargeDelayMs);
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
const tokenTransferTransactionConfirmation =
new TokenTransferTransactionConfirmation(driver);
await tokenTransferTransactionConfirmation.check_dappInitiatedHeadingTitle();
await tokenTransferTransactionConfirmation.check_networkParagraph();
await tokenTransferTransactionConfirmation.check_networkFeeParagraph();

await tokenTransferTransactionConfirmation.clickScrollToBottomButton();
await tokenTransferTransactionConfirmation.clickFooterConfirmButton();
}
4 changes: 3 additions & 1 deletion ui/pages/confirmations/components/confirm/header/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
TransactionType,
} from '@metamask/transaction-controller';
import React from 'react';
import { ORIGIN_METAMASK } from '../../../../../../shared/constants/app';
import {
AvatarNetwork,
AvatarNetworkSize,
Expand Down Expand Up @@ -30,6 +31,7 @@ const CONFIRMATIONS_WITH_NEW_HEADER = [
TransactionType.tokenMethodTransfer,
TransactionType.tokenMethodTransferFrom,
TransactionType.tokenMethodSafeTransferFrom,
TransactionType.simpleSend,
];

const Header = () => {
Expand Down Expand Up @@ -88,7 +90,7 @@ const Header = () => {
currentConfirmation?.type &&
CONFIRMATIONS_WITH_NEW_HEADER.includes(currentConfirmation.type);
const isWalletInitiated =
(currentConfirmation as TransactionMeta)?.origin === 'metamask';
(currentConfirmation as TransactionMeta)?.origin === ORIGIN_METAMASK;
if (isConfirmationWithNewHeader && isWalletInitiated) {
return <WalletInitiatedHeader />;
} else if (isConfirmationWithNewHeader && !isWalletInitiated) {
Expand Down
Loading

0 comments on commit 5bb3885

Please sign in to comment.