liskhq / lisk-desktop Goto Github PK

View Code? Open in Web Editor NEW

581.0 33.0 95.0 144.76 MB

🖥 Lisk graphical user interface for desktop

Home Page: https://lisk.com/wallet

License: GNU General Public License v3.0

JavaScript 86.84% Shell 0.11% CSS 11.91% HTML 0.48% Gherkin 0.63% Groovy 0.03%

javascript electron lisk ui desktop blockchain blockchain-wallet

lisk-desktop's Introduction

Lisk Desktop

Installation

You can download the latest release from Lisk.com. The link automatically detects your operating system and downloads the correct app. Currently we are supporting the following operating systems:

MacOS (individual builds for Apple Silicon and Intel chips)
Windows
Linux

For Contributors

Please see CONTRIBUTING_GUIDE.md for more information.

Development

Using Commercial Fonts

Basier Circle and Gilroy used in the production version are commercial fonts. This repository only contains open fonts and uses Open Sans as a replacement for the commercial ones.

If you have licensed copies of Basier Circle and Gilroy, you can add them to fonts folder. If you don't have the fonts, you need to remove lines 25 - 81 of type.css. After that, the build and dev yarn scripts run without any errors.

Setup environment

The development environment currently depends on:

Node.js version 16 (lts/gallium). The below instructions assume nvm is being used to manage Node.js versions.
Python version 2.7.18 is required is being used on encrypt/decrypt by the lisk-sdk.

Note: For Windows users, make sure to set the correct msvs_version config for installing and packing the Lisk Desktop application.

git clone https://github.com/LiskHQ/lisk-desktop.git
cd lisk-desktop
nvm use
yarn --cwd app && yarn
yarn run dev

Open http://localhost:8080 to access the wallet.

Build

Production build

To build the project simply run

yarn run build

Under the hood, this script runs

yarn run build:prod

to build the React app under src/ and

yarn run build:electron

to build the electron app under app/ using webpack. You can run the above scripts individually if you're looking to see the changes solely on one of the two said applications.

Run Electron

If you have already built the application as described above, you can launch Electron using

yarn run start

Run with parameters

To launch a version which supports hardware wallets, you can run

yarn run dev:hw

or to launch electron and receive live updates from already running webpack-dev-server on port 8080 and you can run

LISK_DESKTOP_URL="http://localhost:8080" DEBUG=true yarn run start

This comes with Redux dev tools.

How to use the Ledger hardware wallet

Please see HARDWARE_WALLET_DEVELOPMENT.md for more information.

Distribution

Windows

Build package for Windows (on Windows in Git BASH).

yarn run pack:win

macOS

Build package for macOS (on macOs)

yarn run pack

Linux

Build package for Linux (on Linux).

yarn run pack

Testing

Unit tests

Single run

yarn run test

Run each time a file changes

yarn run test:live

Directory Layout

Note: The following layout structure may not appear exactly as shown below due to the legacy code/features. However, this is the layout that we try to follow:

├── .husky/                        # Contains a pre commit hook which checks that files are prettified before committing.
├── app/                           # Electron based application that launces the react app.
├── build/                         # Build specific materials.
├── coverage/                      # Results of Jest test coverage.
├── dist/                          # Platform specific built outputs.
├── docs/                          # Project documentation such as contribution guides and development guidelines.
├── libs/                          # Modules which can be consumed individually in other projects.
│   ├── hardwareWallet/            # HardwareWallet integrations.
│   ├── wcm/                       # Wallet connect.
├── node_modules/                  # 3rd-party libraries and utilities.
├── setup/                         # The top most application layer, contains MainRouter and globally imported css files.
│   ├── config/                    # Automation scripts (Webpack configurations, i18n scanner, etc.).
│   ├── react/                     # React presentational components are located here.
│   │   ├── app/                   # The bootstrap React application.
│   │   ├── assets/                # Static files (images, fonts, etc.).
├── src/                           # Application source code.
│   ├── const/                     # Static configurations and other values used throughout the application.
│   ├── locales/                   # Contains the built localization files.
│   ├── modules/                   # Divided logic in domain specific areas, an example structure is shown below.
│   │   ├── hardwareWallet/        # Module/Domain.
│   │       ├── __fixtures__/      # Contains mock data for the hardwareWallet module.
│   │       ├── components/        # Components related to the hardwareWallet domain.
│   │       ├── hooks/             # Hooks related to the hardwareWallet domain.
│   │       ├── store/             # Redux encapsulated logic related to the hardwareWallet domain.
│   │           ├── actions/       # HardwareWallet actions.
│   │           ├── selectors/     # HardwareWallet selectors.
│   │           ├── reducers/      # HardwareWallet reducers.
│   │       ├── utils/             # Utils used in the hardwareWallet module. Global utils should be put in src/utils.
│   ├── redux/                     # Contains the root reducer, all other reducers are imported here. It also has legacy pattern, selectors, and actions (these should now be encapsulated in its specific module).
│   ├── routes/                    # Contains all routes in the application as well as modals.
│   │   ├── routes.js              # Route and modal paths with metadata. This object is used in all our links.
│   │   ├── routesMap.js           # Maps components to routes, this is used in the MainRouter.js.
│   ├── service/                   # Add services, such as mock services.
│   ├── theme/                     # Themed components (Button, Input, etc.).
│   ├── utils/                     # Global utility functions used throughout the app.
        ├── i18n/                  # Localization setup.
└──e2e/                            # E2E tests written with Playwright and Cucumber; also some helpers used by unit tests that live in /src.

Contributors

See contributors section.

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.

lisk-desktop's People

Contributors

Stargazers

Watchers

Forkers

budezllc richardmax kutrange corbifex snatic takahashitomotsugu tejasrsuthar yagamidev jf8 slaweet cryptopython itssujan alepop webmaster128 michaeltomasik wendelas jaredricesr sysn yashitkumarsingh watsoncoders arunbaruah haakondf asfixcom kevlarrecords lucasjyjung smyle12 ildoje nico-dfg yarooo85 sosisoon 6a6abepa matthelonianxl whale-guru-dev zanguient hoeseung18k cade88 renekorss adooylabs psygaruda rushabhpathak dixitank digideskio wyh136 nanosoftwaresystems hhy5277 moosty mygirl8893 yzportfolio jondubois forklifters yangmain leasehold gustu andrzejekkapuscinski nansys nguyendoanh99 s3x0r loocolook lemii jesusthehun tomfelix densmirnov hirishh oreineke kaliszuktomasz ebadico tkespeo vishalrajole tj327 fchavant usamahameed tposiadalaespeo ksepehri-troy przemerr pcwu eliotmess zhelectron isalga vibratious curvesy rocktyy rionetwork nathanvikky panszpila supercoder-m-d zondax dorucioclea gg-big-org manugowda cristobacl levinhgithub punkrock eniolam1000752 klayrhq jeremyd88

lisk-desktop's Issues

Implement on-boarding process

Expected behaviour

https://drive.google.com/drive/u/2/folders/1xp7ld3iNBkMFiU4T9LjYyTOU6pDRO8SE

Actual behaviour

There is no on-boarding process.

Implement redesign of forging center

Expected behaviour

To be designed

Actual behaviour

It has old design.

Implement redesign of safekeeping step of get account

Implement redesign of send component

Implement redesign of transactions component

It should look like the screenshot with these exceptions:

"Reference" column should be omitted because that data field comes wiht Lisk Core 1.0.0.
filter part can be a different issue.

Make adjustments for running in browser

Subtasks to accomplish

Optimize dependencies and load times #11
Setup bundle size limits CI #10
Optimise css bundles #87

Add unit tests to uncovered utilities

Expected behaviour

All of the modules should have unit tests
All of the modules should follows best practices

Actual behaviour

Currently some utility modules don't have any unit tests and some of the don't follow best practices. here is a list of them:

externalLinks
notifications
ipcLocale
socketShim

Implement redesign of settings

The L breakpoint of settings should look like this:

Here are the individual parts:

For all details and measurements see:
https://drive.google.com/drive/u/2/folders/1WWQLE32ohpiG4YyflflE5w3TppOI7yRQ

Implement delegate registration

Expected behaviour

https://drive.google.com/drive/u/2/folders/165bjpbU0-7dG9AwaXE7rFXvmk09RMA4y

Create css implementation guide

Implement drag'n'drop of accounts in account switcher

Expected behaviour

Should allow to reorder accounts with drag and drop

Actual behaviour

Not implemented yet

Set up karma-coverage check

Expected behaviour

Our CI should not pass with insufficient test coverage. We should use karma-coverage check to set thresholds for whole the project and individual files. In this task, we can use excludes and overrides for files that don't have reasonable test coverage (~80-90%) and create subsequent tasks to improve test coverage of those files.

Long term we should aim for test coverage >90% for each file.

Actual behaviour

Jenkins passes regardless of test coverage.

Add autoprefixer to webpack config

Expected behaviour

We should have some browser prefixes for some css features.This lets us to have same styles in all modern browsers.

Actual behaviour

We don't have them in our current version.

Steps to reproduce

Add postcss autoprefixer plugin to the project.
Add autoprefixer to our postcss configs in webpack config file and it will automatically add browsers prefixes to our css files.

Implement redesign of create new account component

This should be done in these parts:

Create multistep component #12
Implement redesign of create step of get account #20
Implement redesign of safekeeping step of get account #19
Implement redesign of confirm step of get account #18

Update Register and SetSecondPassphrase to use MultiStep component

Expected behaviour

We want to implement/update Register and SetSeconPassphrase components using MultiStep component. in order to do so we have to update Passphrase component and subcomponents.

Actual behaviour

Presently we use in-component conditions to render multiple steps of passphrase generation

Implement redesign of passphrase input component

Add new fonts to project

we need to convert nrw fonts to woff format and add theme to type.css

Apply redesigned styles to basic UI components

Implement responsive design of the MVP

Implement responsive design of

Implement redesign of account switcher

It should look like this:

The edit mode will be done in a follow-up #44
Other follow-up feature enhancements implied by the design are #45 and #43

Implement redesign of create step of get account

Implement redesign of confirm step of get account

Change saved accounts to save on login

Expected behaviour

Account should be saved when user logs in or creates a new account.
It should no longer display a toast when the account is saved.
It should make sure that the account is saved not saved multiple times if already saved.
The button mentioned below should be removed.

Actual behaviour

There is a button in account switcher to save the current account

Optimize js dependencies and load times

Some hints:

use webpack --optimize-minimize
remove unused locales of moment.js with context-replacement-plugin
react-toolbox - remove unused components
split bundles into our code and vendor code
split bundles into what is needed on homepage (login) and rest

Make sure that everything works same in all major browsers

Expected behaviour

Everything works same in all major browsers

Actual behaviour

We haven't tested it yet, so we don't know.

Implement the account visual

Expected behaviour

Each account should have a visual which is

significantly different from visuals of other accounts, so users can tell accounts apart
has the same look and feel across accounts

Actual behaviour

There is no account visual

Implement redesign of menu and layout

Should look like this, except for top right elements:

Search will be implemented later when lisk-service product is available
Account has a separate ticket

All e2e tests should pass after applying new typography rules.
New component should follow semantic HTML and use basic typography rules

Actual behaviour

Transaction component CSS rules news some tweaks
Some e2e tests fail because of styling issues

Steps to reproduce

See src/components/transactions/transactions.css
Run e2e tests

Ignore case when e2e testing the text of elements

Expected behaviour

Text case is a design aspect and it doesn't affect the functionality of the components. Desired is that we do not take the test case into account while testing the inner text of elements.

Actual behaviour

Presently e2e tests expect LOGOUT and SENDEN while the new design shows them as Logout and Send. same is true for any other inner text of the elements.

Steps to reproduce

Change the value of LOGOUT to Logout and run the e2e tests.

Implement redesign of voting

Will be done in these parts:

Implement redesign of delegate list view #155
Implement redesign of delegate vote dialog #156
Implement filters of delegate list #215
Implement S breakpoint of delegates list #216
Implement S breakpoint of voting #217

Create multistep component

The goal is to create a multistep component for "create new account component"

Implement multiple unlocked accounts

Expected behaviour

Following #42 it should be possible to keep multiple accounts unlocked.
In other words, switching accounts should not log out of the first account.

Actual behaviour

Only one account can be unlocked (passphrase saved in redux store) at a time.

Implement redesign of Login page

Setup bundle size limits CI

https://github.com/siddharthkp/bundlesize

Avoid duplicate logic for saved accounts in localStorage and redux

Expected behaviour

saved accounts actions should only save to redux. localStorage should be updated based on what is in redux. There should be only two operations with localStorage: load data to redux and store data from redux. The first should happen on launch, the second on each change of saved accounts in redux.

Actual behaviour

CRUD operations on saved accounts are done twice: in redux and localStorage

Implement the dashboard

This should be tackled in the following subtasks:

Implement layout and latest activity of dashboard #131
Implement basic currency graph for dashboard #132
Implement advanced features of currency graph for dashboard #133

Create proper modal for success/failure messages

Expected behaviour

We need a reusable modal for the success/failure messages after making a transaction (vote, send etc)

Actual behaviour

We have none

Create redesigned account component

It should look like this:

if the timeout is too time-taking to implement, delegate in to another ticket.
the ... floating icon should not be implemented here, but as part of #9

Implement 2nd passphrase registration

Expected behaviour

https://drive.google.com/drive/u/2/folders/1VN2ExrJseFdTPpZP3JwGs1AYQz3Xu4KE

Implement search for accounts, transactions

Expected behaviour

https://drive.google.com/drive/u/2/folders/1DCjJ15LFRAaAjvo5D1cBBLNsxU3ujS03

These parts should be implemented:

Search landing page #247
Search result: LiskID #176
TransactionID detail page #246
Recent searches saved in localStorage #245
Implement XS breakpoint of search #263
Implement empty search result page #269

Create integration tests for account switcher

Expected behaviour

There should be 4 integration tests and 1 e2e test of account switcher.

Actual behaviour

There are no integration tests and 5 e2e tests of account switcher.

Implement edit mode in redesigned account switcher

Expected behaviour

The edit mode should allow to:

Remove account with a confirmation step

The drag and drop of accounts will be done in another ticket #52

Actual behaviour

After #9 the account switcher will not have the edit mode and remove will have no confirmation step.

Create initial set of common css files

We intend to create a set of CSS files including:

variables.css:
This files includes variables for:
- Font sizes
- Sizes (box dimensions, border details, ...)
- Colors
- Z-Indexes ( in order to ensure the gap of required z-indexes for different elements like modal, alerts, custom menus, etc)
- Margins
- Paddings
- Box properties (shadows, etc.)
- Media Queries
mixins.css
As name suggests, preserved for CSS mixins.
type.css
As name suggests, includes typographical rules
.global.css
Our common rules must go here.
These rules must consist of only app related and positioning/visibility rules