📈 Swaps as a New Tab - Trading Section

[shivekkhurana]

User Story

As a user, I want to expose the swap feature as a new tab in the main App frame so that I can easily access it.

Description

This is the first stage of exposing revenue generating features under the banner of "Trading" tab. For now, trading has swaps, but soon we'll add more components to it.

The new structure of the App tabs will be:

1. Wallet - is default
2. Trading (Swaps)
3. Messenger
4. Communities

The swap feature will be accessible at the same level as Wallet, Messenger, and Communities.

Acceptance Criteria

• The swap feature is accessible from the main App frame.
• The trading tab should have a blue dot (super script) to indicate that this is new.
• The swap feature is displayed correctly as in the Figma design.
• The swaps should open with certain defaults: mainnet for chain, weth for receive token and usdt for send token
• For default account:
• • If we have the last used account in db, use that
• • Else use the account with the most value in it
• When the swap is complete, the user should be redirected to Trading tab with a toast of the txn. On clicking the toast, the user should be taken to wallet activity.

Notes

• Figma design link: https://www.figma.com/design/ap45P6fWjRI4q43WMBivwP/Trading?node-id=102-66340&m=dev
• You might run intro a problem where you get stuck on the swaps screen, because we use a custom keyboard. And there is no way to go back. In this case, we'll need to make an event handler to hide the keyboard when the user presses anywhere other than the input fields or clickable anchors.