Revamp Harmony Bridge (Horizon) frontend

[zhongeric]

Description

The frontend for Harmony's bridge (https://bridge.harmony.one/erc20) works well, but there are significant flaws in its UI / UX which confuse new users and over complicate the process. This bounty is for a v2 version of the bridge frontend that is familiar to users of other bridge platforms and easier to maintain.

Context

This is the current UI:

My thoughts:

• This bridge UI is nontraditional. See: https://bridge.terra.money/, https://bridge.avax.network/, etc. where dropdowns are used for source & destination network selection rather than the pairs being expressed as buttons. Dropdowns will enable the addition of new networks in the future
• The right hand column makes very little intuitive sense. Rather than relying on paragraphs of text to explain why the user's configuration is incorrect, we should add form validation to restrict such errors from occurring. Guide the user rather than elaborating. Not to mention the text does not change as we switch from BSC to ETH
• BEP20 and HRC20 tokens can be represented better. The user should be selecting their token, not their token type and then the token. There also is no validation preventing users from mismatching token+networks (https://github.com/harmony-one/ethhmy-bridge.frontend/issues/140)

A V2 version should be:

1. Intuitive to use
2. Minimize number of user interactions / freeform input, thus reducing potential errors and lost tokens
3. Handle errors and provide resolution steps for users instead of relying on FAQ page

I would like to draw inspiration from other bridges on other chains:

Adopting, a single column, top - bottom UI flow, in addition to using two dropdowns for thee source chain (BSC, ETH, or ONE) and the destination chain. Adding a comprehensive token selector + support for custom tokens, and adding a button allowing the user to select the MAX number of a token (a feature lacking in the current version).

This is just what I sketched together in ~5 min, so some details may be missing, but the general idea is there. It's very similar to the terra bridge above, but that's just the core components. I want to add detailed error handling and resolution (auto prompt metamask to switch networks if required rather than showing error msg), etc. that is within scope.

I would like to take this on - I have 2-3 years of experience working with React + Typescript, I've skimmed through the repo and this is within my scope. Thus, I propose the following grant / bounty (not sure what to call this) for me to begin work:

Acceptance Criteria

• [ ] Submit high-fidelity mockups of proposed new frontend for review in this thread
• [ ] Develop new V2 frontend components & UI that interfaces with the backend without backend changes
• [ ] PR submit to relevant repo and work with Harmony team to review and merge
• [ ] Add testing suite and relevant tests
• [ ] Test bridge txns with private testnets
• [ ] Documentation for new components, types, and for future eyes
• [ ] Video walkthrough!

Anticipated timeline: 2 weeks (part time)

Reward

USD $15,000 equivalent of ONE token

[LeoHChen]

@gupadhyaya , would like to sponsor this bounty?

[zhongeric]

Feel free to update the reward as you see fit / fair @LeoHChen @gupadhyaya

[givp]

@zhongeric we are moving away from posting external bounties on Github. If you post this on the forum, it will be reviewed much quicker. https://talk.harmony.one/c/funding-proposals/bounties/45

[zhongeric]

@givp sounds good, just posted here: https://talk.harmony.one/t/bounty-harmony-horizon-bridge-frontend-revamp/10249. Thanks!