Skip to content

feat: implement swap+send#23703

Merged
BZahory merged 10 commits intodevelopfrom
mb843/swap-and-send
May 26, 2024
Merged

feat: implement swap+send#23703
BZahory merged 10 commits intodevelopfrom
mb843/swap-and-send

Conversation

@BZahory
Copy link
Copy Markdown
Contributor

@BZahory BZahory commented Mar 25, 2024

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.

Open in GitHub Codespaces

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 as "
  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

new.flow.recording.mov

Existing functionality

Basic send: ERC-20

Screen.Recording.2024-05-24.at.9.55.51.PM.mov

Basic send: Native Asset

Screen.Recording.2024-05-24.at.9.56.56.PM.mov

Basic send: ERC-1155

Screen.Recording.2024-05-24.at.9.57.56.PM.mov

Basic send: ERC-721

Screen.Recording.2024-05-24.at.9.59.42.PM.mov

Fun stuff

Swap+Send Native -> ERC-20

Screen.Recording.2024-05-24.at.10.03.24.PM.mov

Swap+Send ERC-20 -> Native

Screen.Recording.2024-05-24.at.10.04.51.PM.mov

Swap+Send ERC-20 -> ERC-20

Screen.Recording.2024-05-24.at.10.05.45.PM.mov

Pre-merge author checklist

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

@BZahory BZahory requested a review from a team as a code owner March 25, 2024 16:29
@BZahory BZahory marked this pull request as draft March 25, 2024 16:29
@github-actions
Copy link
Copy Markdown
Contributor

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.

@darkwing darkwing force-pushed the release-send branch 2 times, most recently from 62ce1ca to 76c19b0 Compare March 27, 2024 23:47
@BZahory BZahory force-pushed the mb843/swap-and-send branch from da5ccce to 5af4375 Compare April 1, 2024 19:21
@BZahory BZahory force-pushed the mb843/swap-and-send branch from 5af4375 to 445ded4 Compare April 11, 2024 14:50
@darkwing darkwing force-pushed the release-send branch 2 times, most recently from c3c62d5 to 62b1b4f Compare April 12, 2024 16:57
@BZahory BZahory force-pushed the mb843/swap-and-send branch from 445ded4 to 06baed6 Compare April 18, 2024 15:48
@BZahory BZahory force-pushed the mb843/swap-and-send branch 2 times, most recently from c5eae22 to fe5df5a Compare April 19, 2024 20:02
@BZahory BZahory force-pushed the mb843/swap-and-send branch from f0455a3 to 0b2d7a4 Compare May 6, 2024 12:03
@BZahory BZahory force-pushed the mb843/swap-and-send branch from 0b2d7a4 to 8abd2d0 Compare May 8, 2024 06:45
@BZahory BZahory force-pushed the mb843/swap-and-send branch from fbf3ac0 to a3fa6a7 Compare May 10, 2024 15:29
BZahory added a commit to MetaMask/core that referenced this pull request May 21, 2024
## Explanation

### What is the current state of things and why does it need to change?

With MetaMask/metamask-extension#23703, we will
be implementing a new type of transaction, swap+send – a swap targeting
the recipient. To properly track this transaction, we will need a new
transaction type with new properties.

### What is the solution your changes offer and how does it work?

We add a new `swapAndSend` transaction type with properties that track
the source+destination tokens, as well as the recipient.

### Are there any changes whose purpose might not obvious to those
unfamiliar with the domain?

We include certain swap properties that we may not use initially (e.g.,
`swapTokenValue`, `swapMetaData`) in case we add more parity with the
swaps functionality over time.

### If your primary goal was to update one package but you found you had
to update another one along the way, why did you do so?

The `TransactionType` enum was abstracted to this library rather than
the Extension.

### If you had to upgrade a dependency, why did you do so?

N/A

## References

[MB-843](https://consensyssoftware.atlassian.net/browse/METABRIDGE-843)

MetaMask/metamask-extension#23703
(MetaMask/metamask-extension#24429 latest in
merge train targeting that branch)

<!--
Are there any issues that this pull request is tied to? Are there other
links that reviewers should consult to understand these changes better?


For example:

* -->

## Changelog

<!--
If you're making any consumer-facing changes, list those changes here as
if you were updating a changelog, using the template below as a guide.

(CATEGORY is one of BREAKING, ADDED, CHANGED, DEPRECATED, REMOVED, or
FIXED. For security-related issues, follow the Security Advisory
process.)

Please take care to name the exact pieces of the API you've added or
changed (e.g. types, interfaces, functions, or methods).

If there are any breaking changes, make sure to offer a solution for
consumers to follow once they upgrade to the changes.

Finally, if you're only making changes to development scripts or tests,
you may replace the template below with "None".
-->

### `@metamask/transaction-controller`

- **ADDED**: `swapAndSend` type and respective 
- **ADDED**: `updateSwapAndSendTransaction()`
- **ADDED**: `TransactionMetaBase` properties: `destinationTokenAmount`,
`sourceTokenAddress`, `sourceTokenAmount`, `sourceTokenDecimals`,
`swapAndSendRecipient`

## Checklist

- [x] I've updated the test suite for new or updated code as appropriate
- [x] I've updated documentation (JSDoc, Markdown, etc.) for new or
updated code as appropriate
- [x] I've highlighted breaking changes using the "BREAKING" category
above as appropriate
@BZahory BZahory force-pushed the mb843/swap-and-send branch from a3fa6a7 to 6b5250e Compare May 22, 2024 20:48
@BZahory BZahory force-pushed the mb843/swap-and-send branch from ca18ea6 to 88efd3e Compare May 24, 2024 23:53
@BZahory BZahory marked this pull request as ready for review May 25, 2024 01:54
@BZahory BZahory requested a review from a team as a code owner May 25, 2024 01:54
BZahory and others added 6 commits May 25, 2024 00:04
<!--
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.
-->

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

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

Fixes:

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

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

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

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

- [ ] I’ve followed [MetaMask 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.

- [ ] 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: micaelae <100321200+micaelae@users.noreply.github.com>
<!--
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?
-->

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

## **Related issues**

Fixes:

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

---------

Signed-off-by: Ethan Wessel <ethan.wessel@consensys.net>
Co-authored-by: Ethan Wessel <ethan.wessel@consensys.net>
Signed-off-by: Ethan Wessel <ethan.wessel@consensys.net>
Co-authored-by: micaelae <100321200+micaelae@users.noreply.github.com>
Co-authored-by: Ethan Wessel <ejwessel@gmail.com>
<!--
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?
-->

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

## **Related issues**

Fixes:

## **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 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: Bilal Zahory <bilal.zahory@consensys.net>
@BZahory BZahory force-pushed the mb843/swap-and-send branch from b5c6a9d to 3f59f82 Compare May 25, 2024 04:05
@BZahory BZahory added the team-bridge-deprecated DEPRECATED: please use "team-swaps-and-bridge" instead label May 25, 2024
micaelae
micaelae previously approved these changes May 25, 2024
sleepytanya
sleepytanya previously approved these changes May 25, 2024
Copy link
Copy Markdown
Contributor

@sleepytanya sleepytanya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@BZahory BZahory dismissed stale reviews from sleepytanya and micaelae via bad8ea9 May 25, 2024 04:28
micaelae
micaelae previously approved these changes May 25, 2024
sleepytanya
sleepytanya previously approved these changes May 25, 2024
@BZahory BZahory dismissed stale reviews from sleepytanya and micaelae via 780d8ba May 25, 2024 15:44
sleepytanya
sleepytanya previously approved these changes May 25, 2024
micaelae
micaelae previously approved these changes May 25, 2024
@BZahory BZahory dismissed stale reviews from micaelae and sleepytanya via f748aa0 May 25, 2024 18:07
@BZahory BZahory force-pushed the mb843/swap-and-send branch from f748aa0 to 8562dbb Compare May 25, 2024 19:40
@BZahory BZahory merged commit d0a0037 into develop May 26, 2024
@BZahory BZahory deleted the mb843/swap-and-send branch May 26, 2024 01:54
@github-actions github-actions bot locked and limited conversation to collaborators May 26, 2024
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [d324bd2]
Page Load Metrics (766 ± 517 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint59155942612
domContentLoaded94916126
load4828007661077517
domInteractive84916126
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%)

@gauthierpetetin gauthierpetetin added the release-12.0.0 Issue or pull request that will be included in release 12.0.0 label Jun 6, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-12.0.0 Issue or pull request that will be included in release 12.0.0 team-bridge-deprecated DEPRECATED: please use "team-swaps-and-bridge" instead

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants