📊 Introduce Market Tab with Swap Button and Real-Time Data

[shivekkhurana]

trafficstars

Feature Issue

User Story

As a User, I want to check the pulse of the market, so that I can keep my degeneracy in check.

Description

Add a new tab to the application called "Market Tab". The tab should display real-time data and poll for updates every 3 seconds. The polling should stop when the user is not on screen.

The top of the page should show a "Swap Button".

On this tab, there will be supported and unsupported tokens. Supported tokens are the ones that a user can hold and operate in our wallet: ex: eth, usdc etc. Unsupported tokens are BTC/SOL etc.

• Clicking on an unsupported asset should show the details page.
• Clicking on a supported token should show the details page with CTAs to Swap and Buy.

Acceptance Criteria

• [ ] The Trading Tab is added to the application.
• [ ] The tab displays real-time data and polls for updates every 3 seconds.
• [ ] The polling stops when the user is not on screen.
• [ ] The top of the page shows a "Swap Button".
• [ ] Clicking on an unsupported asset shows the details page.
• [ ] Clicking on a supported token shows the details page with CTAs to Swap and Buy.
• [ ] The design meets the requirements as shown in the Figma file: https://www.figma.com/design/ap45P6fWjRI4q43WMBivwP/Trading?node-id=613-32608&t=inkeNajfKptAahNX-4