Swap Page - swap widget

Velodrome swap page

• The swap widget can be made more responsive so that the user can be able to see all details without having to scroll the page
• Add a dropdown-like icon beside the token icon or name so that the user can understand it can be clicked to change the token
• Price info can be aligned to a single row or rows & columns for a consistent view
  • Example solution:
    • ETH per VELO → <0.01
    • VELO per ETH → 20,626.57
    • Slippage → 2%
• We can also add an option to adjust max slippage (optional)

Swap page - mobile view

• In the mobile view, there is no padding for the swap widget. This makes the widget stuck to both sides in the mobile view

Swap Page - transaction initiated

Swap page - transaction initiated

• When a transaction is initiated with the introduction of a list button beside the theme switch icon breaks the design of connect wallet button.

transaction initiated - mobile view

• Connect wallet button design overlaps in the mobile view when the transaction is initiated

Suggested solution:

1. Adjust button size and padding between buttons on both the views
2. Show all the buttons but disable the list button by default, and enable it when the transaction is initiated.