[Grant / Bounty Proposal] Fronted Revamp

[zhongeric]

Proposal to revamp Horizon's frontend

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 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. See (#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 if possible - 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:

Timeline: 3-4 weeks, part time Compensation: $10,000

Please reply with comments / suggestions / critiques, etc. and let me know if the team is willing to sponsor this proposal!

You can reach me at ezhong1900@gmail.com

[zhongeric]

Closing and posting in https://github.com/harmony-one/bounties/issues/95