This is the UI component that is gonna be used as a container for all dashboard items.

• Should receive content throught <slot>
• Should receive title as a prop
• For styles refer to zeplin screens, use/create tailwind classes for paddings/text/colors

Prevents pushing code that doesn't pass tests

Problem: currently most of the bitshares users are confused which account type / security method to choose
Goal: create a user-friendly UI to make it easy to utilize all signup/login methods available at bitshares:

• cloud account with password
• wallet account with backup phrase
• wallet account with key file

Use Login.vue for examples

• Should have two forms (password/private key) (see zeplin) with tabs switch
• Should be able to copy generated password from the input field to clipboard
• Should have validations: all fields are required, passwords/pins should match, account name shouldn't be used on bitshares

Use Components/Input.vue

Should receive props & display accordingly:

1. :value - [String] input value
2. :disabled - [Boolean] if input is disabled
3. :icon - [String] if it has icon displayed on the left side
4. :title - [String] input title
5. :type - [String] text/number - type of input

Should $emit 'input' event on change

Portfolio is a widget that should display a basic table with asset names and token amount information. Take into account that additional columns will be added in future. Create Portfolio and PortfolioItem components. This task is for markup only. Portfolio card should be placed in the Dashboard component. Use mock data for display.

https://github.com/vue-styleguidist/vue-styleguidist

Cornerstone element of the entire UI. Tool to create orders, both simple to use and powerful to tune order details: market or limit price orders, manual or percentage input of order volume, automatically calculates USD equivalent price and total value.

We need a pack of svg icons you use in mockups either in zeplin project or uploaded somewhere

For feature/bug etc

https://blog.github.com/2018-05-02-issue-template-improvements/

Need mobile/desktop versions & behaviour specifications

Can we use zeplin for design layouts? Would be so much more convinient.

https://zeplin.io/

https://github.com/TrustyFund/vuex-bitshares

Create separate branch in it named "bitshares-community-ui"

Guys, what do you think if we got another branch for current development works (dev) that could be supervised by me and @youaresofunny, as we gonna accept PRs into it with work for current issues. And that dev branch would be merged into staging once every other week or so (aka our internal release) with your reviews? Basically we gonna ship PRs to staging in a batch. I think that would be convenient for everybody involved.

Should we make an app blocked from unauthorized user? So basically the user is redirected to login page if he is not authorized. Or the user always has access to main dashboard, and authorization provides additional features to him

Basic Login to Bitshares

• prevent unauthorized access
• validate account name
• validate fields: both required & show errors

Create Header View component

• Should be locked to bottom on small screen width - use tailwind
• Should generate bottom buttons dynamically from an array
• Should emit an event on button click

See Zeplin for design

Create documentation guide for developers, which covers dev process, project structure, used libraries, common practices

Provide a user-friendly interface to track markets performance stats in minimised and expanded views

• Integrate Portfolio and Transactions history,
• Fix minor stuff
• UI polishing

Use Components/Button.vue

• Styling - use tailwind classes

• Should receive props & display accordingly:

  1. :text - [String] button text
  2. :disabled - [Boolean] if button disabled or not
  3. :loading - [Boolean] if button has a loading state -> display some css loader inside (make loader a component as well)
  4. :size= - [String] optional, "normal" - default, "small" - smaller
  5. :width - [String] optional, "full" -> 100% width
  6. :type - [String] optional, "round" should make the button round

• Should $emit 'click' event on click

• Should have Styleguidist Button doc with examples

• Covered by jest unit-tests

Use it on Brainkey login screen

Clean and simple UI with the list of all buy and sell orders, with visual representation of orders volume at each price level, ability to change price step, minimised and expanded versions

Add SVG Icon component to the project
https://github.com/MMF-FE/vue-svgicon

Setup sass variables files for commonly used styles (colors, fonts, paddings), light/dark themes should be available.

• Card on a Dashboard
• Display user's recent transactions
• Should be scrollable

Initial setup (vuex, router, libs)

Should look like this:

• Can be used as a drag'n'drop container for a file or as a file select button
• Should read a file
• Should display a filename with extension after reading
• Should emit 'select' event with file as a param
• When file is selected should be able to select another file/remove existing

Need desktop/mobile design

Responsive layout for widgets inside the Dashboard

Add it to Header

Should Have a User icon and logged in username next to it.

Change 'vuex-bitshares' submodule repo adresss to https://github.com/bitshares/vuex-bitshares and update setup docs

Could you please enable issues in https://github.com/bitshares/vuex-bitshares repo? Because creating issues in the repo for another repo will get confusing.

It's a checkbox under the "settings" menu in repo page

Widget (Card) with user's transactions history. Should be placed into Dashboard component.

Please provide team members access to bitshares/vuex-bitshares repo & give me and @youaresofunny admin rights in it 🤝

• Component should be placed in Header
• Should display locked/unlocked status (vuex getters will be provided)
• If it is locked - on click should display a small popup with input field for password and "Unlock" Button

2. Dispatch action to unlock wallet by clicking the "Unlock" Button and show notification with success/error (vuex action for this will be provided later)

https://tailwindcss.com/

Up to the 4 optional tabs

• Should recieve props:

1. :titles - [Array] array of string, tab titles
2. :active - [String] optional, which tab should be active when component is rendered

• Should display tab titles as a top row with selected tab highlighted
• Should have <slot>'s for tabs content
• Should display only tab content of the selected tab

UPD
For styling:

• For colors (border, text color) use/create tailwind.css color variables in 'tailwind.js.' file in the root folder

Create BitShares connection indicator component. Should look like small green circle when connected to bitshares, red when disconnected. Place it in the Main.vue component

Some vuex-bitshares dependencies are outdated which sometimes causes crash when cloning project

That has Header, Body and Footer @ all with tailwindcss classes

A modal that is displayed to backup user's brainkey
Detailed descripion and vuex actions/getters will be provided later

Initialize bitshares connection

Use vuex-bitshares "Connection" module for it. Create init action in theapp vuex module, that should dispatch connection action.

Using keyfile/brainkey

Use vuex-bitshares for this, see trusty-vue-ui for example auth.

We'll need ability to deploy to staging and production, as well as separate branch deploys.