bitshares / bitshares/bitshares-ui

[Wallet Redesign] Layout

Open
#2,667 4 comments 0 reactions 0 assignees View on GitHub
[6] Documentation [6] New UX
Dominant language
JavaScript
Stars
520
Forks
575
Avg merge
12h 7m
Merged PRs (30d)
5

Description

# Layout

Todo
- [x] Add balance in header menu
- [x] Make left side bar available in 3 states -
a) fully visible
b) partially visible (only icons)
c) non-visible (for mobile only)
- [ ] Add bottom menu
---

I would like to split the Layout by 2 parts:
- Header
- Left Sidebar

![image](https://user-images.githubusercontent.com/35899973/57423381-7808bc80-721c-11e9-8c8f-bd3f8fb35b81.png)

## Header

On a header, we will put the links to pay user attention to them:
- **News** - it is a good practice to let our users know about wallet & core last updates, maintaining, critical fixes or any business information like about upcoming events
- **Request Feature** - not important right now but should be on the beginning (alpha/beta testing) to be able to get our user priorities and change our roadmap based on it
- **Need Help** - if a user is confused about something we will redirect him to Wallet telegram chat to ask his question.
- **Membership** - unfortunately, users do not pay enough attention to membership and I would like to tell more about this feature. If it doesn’t make sense we will remove it
- **Invite & Earn** - there we will tell users more about the referral program and provide them more cases about how bitshares can be used for Business purposes.
- **Beginners Guide** - it is the same Beginners Guide which user will see when opens Wallet for the first time.
- **“Lock/Unlock”** wallet
- **Change active account**
- **User Menu Dropdown** (when user hover on a “User” icon he will see the dropdown with links to features with relates to user like :
* * Contacts
* * Accounts
* * Permissions
* * Membership

## Main Menu & Left Sidebar

This is the main navigation through the app.

- Click on a “Logo” will redirect the user to “Landing Page”.

- **Dashboard** - On a dashboard, the user can add/manage/delete widgets which important especially for him

- **Exchange** - It is Exchange and that’s it :)

- **Wallet** - All assets, their balances, and history will be there

- **Manage Funds** - The user can find all operations regarding his own balance and assets. Also there, the user can find the “Vesting Balances” section.

- **Orders** - All information about orders, active orders, margins, etc.

- **Blockchain** - info about blockchain, explorer, etc.

- **Business** - This is a specific section which will contain tools to use bitshares for business purposes. Also, this section will contain a lot of use cases, helpers, etc. to let users know everything about the business benefits of bitshares.

- **Governance** - voting section will all information about government, what is that, who are committee members, etc.

- **Settings** - it is settings ;)

- **Language Selector** - list with all available languages and “Add language” option with a link to guide how to propose and add your own language. I would like to motivate users to help us to translate an Exchange.

Sections **Business** and **Governance** will be extended will cool tours, helpers, examples of usage, etc. because it is the most complicated part for common Exchange user.

Contributor guide

Open the contributing guide

Research direction

Start by locating the wallet's existing header, sidebar, and responsive navigation entry points; the issue names no files or tests. Review the listed header links and sidebar states before implementing the remaining bottom menu and splitting the layout into header and left-sidebar sections. Done means the requested navigation structure and desktop/mobile layout states are implemented.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.