Task 2 – Order Page

Main Goal

The order page must look and work exactly like FF.IO. Changeum.io already copied FF.IO very well.

Please test the order page on FF.IO and Changeum.io before working.

Part 1 – Amount, Colors, Arrow

• If user enters an amount on the home page, it must show the same exact amount on the order page.
  Example: user enters 870.50 USDT → show 870.50 Do NOT show 870.500000 or extra zeros, Check this (https://prnt.sc/lVW8YxdtxkLS)
• Input amount color and output amount color must match with coins colors.
  Example: USDT = green, BTC = orange Same colors everywhere. (https://prnt.sc/XwYLU39wUQkQ)
• The arrow between coins is bad now. Make it like FF.IO or Changeum.io.

Part 2 – Layout and Columns

• Reduce column width to match FF.IO.
• All text must be centered.
• Order ID color and Time Remaining color must match the destination coin color. ((https://prnt.sc/J2okgtxXueIT))

Part 3 – Address and Amount Section

• Expand this section so wallet address fits in one line.
• Add copy button for the amount.
• User must be able to copy amount by clicking the amount text or button
• Amount color must always match the coin color (like FF.IO) the send coin, Example USDT -> BTC ( USDT in Green so when it said send XXXX amount to ) the XXXX must be in color green.
• Address must be easy to copy: click on address OR click copy button.

Part 4 – QR Code

• QR code inside a column looks bad.
• Make QR code layout like FF.IO or Changeum.io.
• QR must be clear and well positioned.

Part 5 – Progress Bar

• Replace current progress bar with a new luminous progress bar.
• I already created the design in AI Studio. I will give you link
• Use Variant U.
• I will provide the code. Implement it in the correct place.

General Notes

• The final order page should be 100% identical to FF.IO.
• FF.IO and Changeum.io look perfect on mobile. Please fix Mobile view as 90% of users are doing exchange on mobile.
• Our website looks bad on mobile now. Fix to be like changeum .
• Keep green bar when orders are completed .
• Keep expired order bar as well.