Bridge UI Polish

[vthunder]

Note, mainnet launch blockers have been moved to separate issues:

• Bridge UI: USD estimate (based on token price) #17
• Bridge UI chain name/token name fixes #18
• Bridge UI: link to terms & conditions #19

Polish issues:

• Title creeps down into UI when resizing window (possibly layout breakpoint issue)
• Initiate transaction button should capitalize Avail and Ethereum (capital A and E)
• Add modals after successful tx submission (bridge & claim) as per this design: https://app.excalidraw.com/s/AsHObj6FXco/9irgNmfbGFA
• Time estimate is just wrong. Filed as: Bridge UI time estimates are very wrong #21
• Replace depositor/receiver/explorer links with a single "Details" link that ops a modal with details
• From, To instead of depositor and receiver.
• Label explorer links as "Outgoing tx" and "Claim tx" instead of "Destination transaction" and an arrow
• Button to paste should be labeled "Paste address" instead of "Add address"
• Change item title from "Sent [n] AVAIL" to "[n] AVAIL" (remove "Sent")
• “Pending” pill should be a button. It looks like a button, but it is not clickable.
• Destination text field is not clickable - is confusing to me. It took me a while to realize that it was prefilled with my address from the wallet, but it looked grayed out like a default/example value.
• Once claim fully completes, it just silently moves to the history. It deserves much more notification, like a persistent alert saying “N transfers complete” that you can click on to open the Transactions tab, and ideally also a highlight on the transactions that completed since the tab was last viewed.
• Transaction history does not paginate when there are more items than fit on one screen. Also, at 4 items it scrolls slightly.
• Mock up merging with title all in one line: "[n] AVAIL from Ethereum to Avail" (if it looks ok I prefer this)
• Background image should be for the whole site, making this fix below will do that:

[Genesis3800]

@abheektripathy leaving an fyi since you asked to stress test the bridge UI and leave the feedback here.

1. When I use a wallet that I did an older txn with, it shows me that the months old txn is still pending, when I recall claiming it on Sepolia.
   Most probably a simple UI error?

2. Also I think the UI should only show transferrable AVAIL tokens, the amount of locked/staked tokens should not be counted in the UI.

3. Also when I opened the UI after 13 hours hoping to claim my bridged AVAIL tokens on Ethereum, I don't see anything in my txn history.

[abheektripathy]

hey @Genesis3800 lemme look at the locked tokens and the ui issue, but other than that can you see if the history is working the way it's supposed to now?

p.s thanks for the feedback appreciate it

[Genesis3800]

Yes ser, will look at it first thing tomorrow

[Genesis3800]

Yes the history is now showing as it is supposed to.

[vthunder]

Filed remaining tasks as separate issues; closing