Workers Auto Approve
Design concept for HOPR dapp
design, dapp, UI, UX, mockup
We need a design concept for the HOPR dapp. The HOPR dapp should look and feel similar to the [uniswap.exchange](uniswap.exchange) widget: The overall widget comprises three tabs that can be easily integrated into other applications. As such it needs to be minimal and light. It gives some basic statistics on the payment channel network of [HOPR](hopr.network), allows people to stake (open payment channels via e.g. Metamask), and lets you vote on the HOPR DAO (also via e.g. Metamask).
### Tasks & acceptance criteria are:
1. Mockup fulfills the described functionality
2. Design delivered as separate images which show the three basic functions / tabs. Clickable prototype would be even better but not must-have.
3. Apart from the images, a short summary document should define the colors, line widths, fonts, weights, sizes that are used in the concept
4. Mockup in Courier New / Console style, similar to our website hopr.network
5. Minimal and clean design
### Tabs & features
1.1. Double-Y plot showing the total amount of staked tokens as well as the total number of payment channels over time. This should look somewhat similar to the `Pool Statistics` widget on [uniswap.info](uniswap.info), it should also include a box with detailed numbers when hovering over the chart. X- and both Y-axes should have labels and titles.
1.2 Under that plot we show the Table with all HOPR payment channels. The first two columns show `from` and `to` Ethereum address (each with link to Etherscan) of the payment channel, followed by amounts, opening time and status (`open`, `closed` or `pending` - not shown in hand-drawn sketch)
2.1. Dialog to open new payment channel, user can enter the `from` and `to` Ethereum address of the payment channel, enter the amount of HOPR tokens that they want to stake and then press the `stake` button to send the transaction (via e.g. Metamask). Under the stake button we show some status info on the connected (e.g. Metamask) wallet address and HOPR tokens on that address. Maybe that font could be a bit smaller as could be the explanatory text under the `from` and `to` fields.
2.2. Under the new payment channel dialog is a list of channels that the current user has staked to (or the text `You have not opened any payment channels yet`). It is similar to the table under 1.2. but it only shows channels of the current user. All channels with status `open` have a `withdraw` button.
3. Vote: List of past or currently ongoing votes. Here we can for now copy the UI as is from Aragon but adjust according to our design concept (fonts, colors etc) - if multiple votes are currently ongoing, they are rendered under one another.
Setup your profile
Tell us a little about you:
No results found for
Type to search skills..
Required [[totalcharacter]] / 240
Are you currently looking for work?
[[ option.string ]]
Setup your profile
Our tools are based on the principles of earn (💰), learn (📖), and meet (💬).
Select the ones you are interested in. You can change it later in your settings.
I'm also an organization manager looking for a great community.
Enable your organization profile
Gitcoin products can help grow community around your brand. Create your tribe, events, and incentivize your community with bounties. Announce new and upcoming events using townsquare. Find top-quality hackers and fund them to work with you on a grant.
These are the organizations you own. If you don't see your organization here please be sure that information is public on your GitHub profile. Gitcoin will sync this information for you.
Select the products you are interested in:
Out of the box you will receive Tribes Lite for your organization. Please provide us with a contact email: