feat: btc send flow e2e (#28340)

<!--
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?
-->

This PR reintroduces the happy path send flow tests for BTC

## **Related issues**

Fixes: MetaMask/accounts-planning#668

## **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] -->

## **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.

---------

Co-authored-by: Charly Chevalier <charly.chevalier@consensys.net>

test/e2e/constants.ts

@@ -51,6 +51,19 @@ export const DEFAULT_BTC_ACCOUNT = 'bc1qg6whd6pc0cguh6gpp3ewujm53hv32ta9hdp252';
 /* Default (mocked) BTC balance used by the Bitcoin RPC provider */
 export const DEFAULT_BTC_BALANCE = 1; // BTC
 
+/* Default BTC fees rate */
+export const DEFAULT_BTC_FEES_RATE = 0.00001; // BTC
+
+/* Default BTC conversion rate to USD */
+export const DEFAULT_BTC_CONVERSION_RATE = 62000; // USD
+
+/* Default BTC transaction ID */
+export const DEFAULT_BTC_TRANSACTION_ID =
+  'e4111a707317da67d49a71af4cbcf6c0546f900ca32c3842d2254e315d1fca18';
+
+/* Number of sats in 1 BTC */
+export const SATS_IN_1_BTC = 100000000; // sats
+
 /* Default (mocked) SOLANA address created using test SRP */
 export const DEFAULT_SOLANA_ACCOUNT =
   'E6Aa9DDv7zsePJHosoqiNb3cFuup3fkXTyRH2pZ1nVzP';

test/e2e/flask/btc/btc-send.spec.ts

@@ -0,0 +1,163 @@
+import { strict as assert } from 'assert';
+import { Suite } from 'mocha';
+import { Driver } from '../../webdriver/driver';
+import { DEFAULT_BTC_ACCOUNT, DEFAULT_BTC_BALANCE } from '../../constants';
+import {
+  getTransactionRequest,
+  SendFlowPlaceHolders,
+  withBtcAccountSnap,
+} from './common-btc';
+
+export async function startSendFlow(driver: Driver, recipient?: string) {
+  // Wait a bit so the MultichainRatesController is able to fetch BTC -> USD rates.
+  await driver.delay(1000);
+
+  // Start the send flow.
+  const sendButton = await driver.waitForSelector({
+    text: 'Send',
+    tag: 'button',
+    css: '[data-testid="coin-overview-send"]',
+  });
+  // FIXME: Firefox test is flaky without this delay. The send flow doesn't start properly.
+  if (driver.browser === 'firefox') {
+    await driver.delay(1000);
+  }
+  await sendButton.click();
+
+  // See the review button is disabled by default.
+  await driver.waitForSelector({
+    text: 'Review',
+    tag: 'button',
+    css: '[disabled]',
+  });
+
+  if (recipient) {
+    // Set the recipient address (if any).
+    await driver.pasteIntoField(
+      `input[placeholder="${SendFlowPlaceHolders.RECIPIENT}"]`,
+      recipient,
+    );
+  }
+}
+
+describe('BTC Account - Send', function (this: Suite) {
+  it('can send complete the send flow', async function () {
+    await withBtcAccountSnap(
+      { title: this.test?.fullTitle() },
+      async (driver, mockServer) => {
+        await startSendFlow(driver, DEFAULT_BTC_ACCOUNT);
+
+        // TODO: Remove delay here. There is a race condition if the amount and address are set too fast.
+        await driver.delay(1000);
+
+        // Set the amount to send.
+        const mockAmountToSend = '0.5';
+        await driver.pasteIntoField(
+          `input[placeholder="${SendFlowPlaceHolders.AMOUNT}"]`,
+          mockAmountToSend,
+        );
+
+        // From here, the "summary panel" should have some information about the fees and total.
+        await driver.waitForSelector({
+          text: 'Total',
+          tag: 'p',
+        });
+
+        // The review button will become available.
+        const snapReviewButton = await driver.findClickableElement({
+          text: 'Review',
+          tag: 'button',
+          css: '.snap-ui-renderer__footer-button',
+        });
+        assert.equal(await snapReviewButton.isEnabled(), true);
+        await snapReviewButton.click();
+
+        // TODO: There isn't any check for the fees and total amount. This requires calculating the vbytes used in a transaction dynamically.
+        // We already have unit tests for these calculations on the Snap.
+
+        // ------------------------------------------------------------------------------
+        // From here, we have moved to the confirmation screen (second part of the flow).
+
+        // We should be able to send the transaction right away.
+        const snapSendButton = await driver.waitForSelector({
+          text: 'Send',
+          tag: 'button',
+          css: '.snap-ui-renderer__footer-button',
+        });
+        assert.equal(await snapSendButton.isEnabled(), true);
+        await snapSendButton.click();
+
+        // Check that we are selecting the "Activity tab" right after the send.
+        await driver.waitForSelector({
+          tag: 'div',
+          text: 'Bitcoin activity is not supported',
+        });
+
+        const transaction = await getTransactionRequest(mockServer);
+        assert(transaction !== undefined);
+      },
+    );
+  });
+
+  it('can send the max amount', async function () {
+    await withBtcAccountSnap(
+      { title: this.test?.fullTitle() },
+      async (driver, mockServer) => {
+        await startSendFlow(driver, DEFAULT_BTC_ACCOUNT);
+
+        // TODO: Remove delay here. There is a race condition if the amount and address are set too fast.
+        await driver.delay(1000);
+
+        // Use the max spendable amount of that account.
+        await driver.clickElement({
+          text: 'Max',
+          tag: 'button',
+        });
+
+        // From here, the "summary panel" should have some information about the fees and total.
+        await driver.waitForSelector({
+          text: 'Total',
+          tag: 'p',
+        });
+
+        await driver.waitForSelector({
+          text: `${DEFAULT_BTC_BALANCE} BTC`,
+          tag: 'p',
+        });
+
+        // The review button will become available.
+        const snapReviewButton = await driver.findClickableElement({
+          text: 'Review',
+          tag: 'button',
+          css: '.snap-ui-renderer__footer-button',
+        });
+        assert.equal(await snapReviewButton.isEnabled(), true);
+        await snapReviewButton.click();
+
+        // TODO: There isn't any check for the fees and total amount. This requires calculating the vbytes used in a transaction dynamically.
+        // We already have unit tests for these calculations on the snap.
+
+        // ------------------------------------------------------------------------------
+        // From here, we have moved to the confirmation screen (second part of the flow).
+
+        // We should be able to send the transaction right away.
+        const snapSendButton = await driver.waitForSelector({
+          text: 'Send',
+          tag: 'button',
+          css: '.snap-ui-renderer__footer-button',
+        });
+        assert.equal(await snapSendButton.isEnabled(), true);
+        await snapSendButton.click();
+
+        // Check that we are selecting the "Activity tab" right after the send.
+        await driver.waitForSelector({
+          tag: 'div',
+          text: 'Bitcoin activity is not supported',
+        });
+
+        const transaction = await getTransactionRequest(mockServer);
+        assert(transaction !== undefined);
+      },
+    );
+  });
+});