feat: implement swap+send

[BZahory]

Description

As part of the ongoing monetization initiative in default experiences, Swap+Send was prioritized and assigned to the bridge team in an effort to capture revenue immediately following a send transaction; these typically go to MetaMask alternatives (i.e., Uniswap).

This PR fully implements the full Swap+Send experience, without degrading the existing swaps experience.

Related issues

METABRIDGE-843

Manual testing steps

1. Go to Send page
2. Ensure that toggling the swap button switches the places of the fiat and raw token amount
   • ensure that both accept input and correctly adjust their counterpart
3. Ensure that existing send functionality (i.e., sending ERC-20s/1155s/721s, native assets, and all respective warnings and guardrails) is preserved when the destination asset picker is not selected
4. Ensure that the max button maxes out the source-side asset
5. Ensure that the max button state can be disabled with the "Clear" button or by typing
6. Ensure that typing when no input is focused automatically focuses the input
7. Ensure that the input does not accept invalid characters
8. Ensure that an asset picker modal opens when clicking either asset picker and that you can search for and select an asset for the asset picker you clicked on
9. Ensure that selecting a blocked swaps token (or other unswappable asset) disables the destination asset picker
   • But does not hamper send functionality
10. Ensure that fiat values are accurate if available, or that the token amount centers if not available
11. Ensure that the swap+send quote card skeleton shows as soon as the form becomes valid for a swap+send (i.e., an amount is entered, the source and destination assets differ)
12. Ensure that the confirm button is enabled if a swap+send quote is received, and disabled – with a red error text, when appropriate – otherwise
13. Ensure that a tooltip is shown for overflowing numbers in the input, a swap+send primed submit button, and when hovering the gas fee info icon
14. Ensure that a trade – and an approval, if ERC-20 – is submitted on click for a swap+send
15. Ensure that you are routed to the activity tab on the home screen
16. Ensure that the title for the history item is "Send <A> as <B>"
17. Ensure that the source and destination amount – which will be updated with on-chain data when available – is available to be seen on click
18. Ensure that the recipient is the recipient of the swap+send, not the swap contract
19. Ensure that the recipient receive their funds

Screenshots/Recordings

Before

https://github.com/MetaMask/metamask-extension/assets/44588480/b5067372-ccec-4d34-977c-8dd8e42e8dc5

Existing functionality

Basic send: ERC-20

https://github.com/MetaMask/metamask-extension/assets/44588480/31bad9cd-9d90-40f2-b13b-da8333789e2d

Basic send: Native Asset

https://github.com/MetaMask/metamask-extension/assets/44588480/aeeedf49-e46c-4b62-9606-42493135ed23

Basic send: ERC-1155

https://github.com/MetaMask/metamask-extension/assets/44588480/b2311811-8f6f-485f-bcac-0259a51dba13

Basic send: ERC-721

https://github.com/MetaMask/metamask-extension/assets/44588480/519b74d1-0b60-4073-bcb7-1eb6bda98772

Fun stuff

Swap+Send Native -> ERC-20

https://github.com/MetaMask/metamask-extension/assets/44588480/cb9a652a-6543-4cfd-8148-81eeb896bcef

Swap+Send ERC-20 -> Native

https://github.com/MetaMask/metamask-extension/assets/44588480/bf532e1e-b125-4301-981b-43c3232d61cd

Swap+Send ERC-20 -> ERC-20

https://github.com/MetaMask/metamask-extension/assets/44588480/88ece0e5-4bef-477e-84f1-b9f99e313b33

Pre-merge author checklist

• [x] I’ve followed MetaMask Coding Standards.
• [x] I've clearly explained what problem this PR is solving and how it is solved.
• [x] I've linked related issues
• [x] I've included manual testing steps
• [x] I've included screenshots/recordings if applicable
• [x] I’ve included tests if applicable
• [x] I’ve documented my code using JSDoc format if applicable
• [x] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
• [x] I’ve properly set the pull request status:
  • [x] In case it's not yet "ready for review", I've set it to "draft".
  • [x] In case it's "ready for review", I've changed it from "draft" to "non-draft".

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.

[github-actions[bot]]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[socket-security[bot]]

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No dependency changes detected in pull request

[metamaskbot]

Builds ready [d324bd2]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (766 ± 517 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	59	155	94	26	12
		domContentLoaded	9	49	16	12	6
		load	48	2800	766	1077	517
		domInteractive	8	49	16	12	6

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 60 Bytes (0.00%)
• ui: 6.28 KiB (0.09%)
• common: 44.54 KiB (0.70%)