Harmony Horizon bridge frontend revamp
Description
The frontend for Harmony’s bridge (Horizon) 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.
Previous support for this refractor include: Community DAO Bounty Proposal - Bridge UX Revamp/Update - #4 by kevin
Context
This is the current UI: Harmony ONE-ETH Bridge
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 (Users chose wrong tokens type while bridging wrapped tokens - interface restrictions required · Issue #140 · harmony-one/ethhmy-bridge.frontend · GitHub)
A V2 version should be:
- Intuitive to use
- Minimize number of user interactions / freeform input, thus reducing potential errors and lost tokens
- 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 (namely the Terra bridge).
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 a first iteration of a high-fidelity mockup based on the points discussed above. Colors and styling will likely be changed later, some components were borrowed for now for convenience.
I would like to take this on - I have 2-3 years of experience working with React + Typescript, as well as familiarity with ethers & web3.js. 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). I’ve already started working on a high fidelity mockup and am ready to share it with the team for feedback.
Reward
USD $10,000 equivalent of ONE token
