search

joticajulian / kondor

Koinos Wallet in your browser
MIT License
11 stars 6 forks source link

Update frontend of dashboard to support dApps #64

Closed joticajulian closed 12 months ago

joticajulian commented 1 year ago

We want to introduce more dApps in Kondor Wallet. Then the new design consists in a dashboard with a widget at the top and a list of dApps.

This is the current status

image

And this is the new design for the dashboard (see https://github.com/joticajulian/kondor/blob/main/src/index/views/4-Dashboard.vue)

image

The new design must consist in a set of components:

  1. Nav: No need to change this part.
  2. Widget of Tokens: It has the current balance of Koin. And below it has a list of token icons. These icons have a tooltip showing the balance of each one. When the user clicks on the icon the token is displayed in the widget by replacing the Koin balance.
  3. Section of dApp icons that will trigger new pages dedicated to each dApp.

Initially the wallet will start with these tokens: Koin, VHP, and Vapor.

This task corresponds just to the html and css work. The JS code is a good to have but not required.

Create a PR to merge into the dev branch.

gyauelvis commented 1 year ago

I would love to take this project but the problem is i don't understand the issue. Could you please explain it better. I understand you want to update the frontend of your dashboard but which part do you want to update specifically could you be clear about that.

joticajulian commented 1 year ago

Hi thanks for the support. Check this file: https://github.com/joticajulian/kondor/blob/main/src/index/views/4-Dashboard.vue

Currently it contains:

  1. koin balance
  2. mana circle
  3. some buttons (buy, send, swap)
  4. tab page at the bottom.

For the new design we want this:

  1. widget component with 100% width: This is a component loaded from another file in components folder. In future updates the user will be able to configure the preferred widget. For the moment we will have just 1. So create a new file for it in components folder. This component will contain:
    • koin balance
    • mana circle
    • list of mini tokens. The tooltip of each one will display the balance of that token. When the user clicks in one of them then the koin balance is replaced by the balance of this token (As this is just frontend design put some dummy data in these tokens, no need to consult the real balance). Each token has a different logo.
    • 4 buttons: buy, send, swap, more.
  2. Below the principal component display a list of dApps. Put some image on each of them. In the future we will create pages for each dApp.

The PR should point to the "dev" branch.

If you need further details just let me know ;)

joticajulian commented 12 months ago

implemented in v0.9.0