Add a light-electron package, which will create an Electron app, and load the react app inside it.

See Fether for an example implementation: https://github.com/paritytech/fether/tree/master/packages/fether-electron

One difference with Fether (which we'll actually switch to inside Fether too): If possible, don't download substrate, but just bundle the binary within the Electron app.

Clicking on any identity here should set the recipient.

• How/when to raise issue
• PR style guidelines (storybook new ui components if PR requires it)
• Adding Labels
• Template: https://gist.github.com/PurpleBooth/b24679402957c63ec426

Just to have more space to work with, and also since the identity card is meant to just be a quick overview of, well, identity, it should be minimizable.

Then when user wants to see more things, or actually do something more involved with managing their identity, they can expand and go about their business.

Use ApiRx for now, just showing the balance should be enough.

Find a nice way to connect ApiRx to React props: HOC (like light.js-react, or @polkadot/ui-api), or <Subscribable />?

So far this issue has come up for webpack and jest, with react-scripts using an older version on purpose as I guess they want to make sure their dependencies are stable. When they overlap, this is not a problem, but every couple versions this comes up so a sustainable solution to this would be a resolutions field.

To start after #27.

• Bundle the native binary for Electron, he idea is similar to openethereum/fether#204, probably to be done on the CI level.
• Bundle the wasm binary for the extension, we can commit the .wasm to this repo for now

Emily from Web3 just sent me the finalized color palette with the official Polkadot colors.

Before starting we need to agree on one of the font-color/ background combinations on the second page of the pdf.

20190212_Polkadot_Color_Palette.pdf

Something like ui.aragon.org

Comes after Storybooking

Note: the left sidebar is removed

When I click on the refresh button here, it takes 2-3 seconds on my machine to generate a new keypair.

After adding some console.logs, it's this part that's slow.

More console.logs should be added to investigate further.

This issue can be divided into sub-issues for smaller components

Note: let's disallow account creation from raw seed

In Onboarding flow, as well as in Identity-app, the inputs for address and recovery phrase are too small.

should look like:

 keyring.loadAll({
      addressPrefix: properties.get('networkId') || found.networkId as any,
      isDevelopment: isTestChain(chain || ''),
      type: 'ed25519'
    });

once Schnorkkel support PR polkadot-js/apps#710 is in

This screen is a bit confusing imo:

• address book: I can't see the list of my addresses. The tab only allows adding addresses, and redirects to transfer
• on the right are my accounts, but adding them is done on the left, either with Wallet (= add with phrase) or Create Account (= add new one).

Some ideas:

• Remove the term "Wallet". Do as polkadot/apps, use "Accounts" for my accounts, and "Addresses" for my saved addresses.
• Maybe have 2 panes: one on the left to see/add/remove my accounts (i.e. the current "Saved Accounts" pane, + a button to add/remove accounts); and one similar one on the right for my saved addresses.

After implementing styled-components into the Fether project in this PR openethereum/fether#357, I found that when I tried went to debug in Dev Tools > Elements, it displays the CSS class name value of HTML elements as a hash of the styled-component name i.e.
<div class="sc-EHOje dGUdfn">, whereas previously it showed the class name.

To solve the issue I installed relevant tooling (see https://www.styled-components.com/docs/tooling) 'babel-plugin-styled-components' plugin that displays the style-component name that we specified instead of just the hash that's meaningless to me i.e. <div class="App__DivContent-sc-1l7hwf9-0 jhbGUD">, where DivContent is the name of the styled-component that we created.

However in this project we are using TypeScript, so we'd need this plugin https://www.styled-components.com/docs/tooling#typescript-plugin

Like in apps, be able to choose the granularity of the units on the particular chain.

working on it but sometimes the redirect doesn't happen after create new account or import.

https://github.com/atlassian/yarn-deduplicate

so we don't have extraneous dependencies and don't run into hoisting issues in future

One for create account, one for restore account

To close this issue, we'd need to:

• successfully run the electron-builder to generate a distributable
• run the executable from multiple different machines
• manually test that the features work on each machine

--

I've iceboxed this as we'd need to keep testing this as the project develops, so no point in doing it at this stage, though it's coming up.

From #24

https://storybook.js.org/basics/guide-react/

Steps would be more or less:

1. Setup: add Storybook and Enzyme into package.json
2. Take ui-components and move it into storybook
3. Automated visual testing with CI

Each story should be located in the same directory as related component. Each component ought to be moved to its own directory.

tsc --noEmit and
Stuff like:

• indentation
• prop ordering
• whitespaces
• variable names too short or too long
• lines that go on for too long
• import ordering (absolute external paths vs. absolute same-workspace paths vs. relative paths)
• ... and other stuff but these are the main annoyances

After yarn, yarn start I got errors in a console:

@polkadot/light-apps: Compiling...
@polkadot/light-apps: Failed to compile.
@polkadot/light-apps: /Users/alex/code/substrate-light-ui/packages/light-apps/src/Content/index.tsx
@polkadot/light-apps: Type error: Cannot find module '@polkadot/ui-components'.  TS2307
@polkadot/light-apps:      5 | import React from 'react';
@polkadot/light-apps:      6 | import { withRouter, RouteComponentProps } from 'react-router';
@polkadot/light-apps:   >  7 | import { Container, IdentityCard } from '@polkadot/ui-components';
@polkadot/light-apps:        |                                         ^
@polkadot/light-apps:      8 | 
@polkadot/light-apps:      9 | import routing from '../routing';
@polkadot/light-apps:     10 | import NotFound from './NotFound';

This is a nice to have but I think it will become increasingly useful as the project gets bigger. Basically Automated Visual Testing alerts us whenever a component doesn't visually look as expected. Complements unit tests (later on for more involved business logic), as "In a majority of cases, what a user sees is what you really care about, not how it was achieved."

Automated Visual Testing: https://storybook.js.org/docs/testing/automated-visual-testing/

Right now:

1. We build each package's TS (yarn start does that), and put it in the correspondent build/ folder
2. Other packages use the generated definitions from these build/ folder

Ideally:

1. We don't need to build each package's TS
2. Other packages use directly the source .ts files

Cf @polkadot/* projects, and the usage of baseUrl and paths fields in tsconfig.json. Make it work with CRA2.

use styled components theme for color scheme

along with addon-knobs, addon-links, addon-actions

Considering the target demographic is noobie users, definitely need a step after initially creating an account to show what things are for what, as well as a detailed security overview.

I think for the 'tutorial' it'd just look like a Feature Tour overlay, like http://tracelytics.github.io/pageguide/ or http://linkedin.github.io/hopscotch/

Places to add this:

• While Submit Transfer hasn't yet Finalised
• While connecting to node
• While getting Balance

Here's the current one, which is not very user-friendly.

I don't think this would be in the scope of the MVP but it is definitely coming up so opening this issue to start a discussion.

Update: July 19, 2019. Brain dump some ideas from the retreat.

Since users won't be authoring blocks or anything with the light client, I propose the governance app on substrate-light-ui will be to:
--- CORE

• - Allow users to keep up with and vote on active proposals and upcoming referenda on the particular chain the user is subscribed to.
• - Allow users to view and vote on the current council and its operating parameters.
  • - Bring in ability to vote on council as well, need to think more deeply on the UX to guide them toward a thoughtful decision. and more so towards guiding them away from thoughtless ones.
• - Allow users opt to nominate validators instead perhaps as part of the onboarding process and ideally never have to think about it again. [WIP] #434 #390

--- NICE TO HAVE

• - Figure out a way to make 1-click nomination actually a workable UX, particularly concerning the accounts setup and balance allocation between the accounts.
• - Allow users to subscribe to certain types of governance referenda/proposals regarding which
  they wish to be notified, i.e. a broweser/taskbar notification, email, even SMS via Twilio
• [ ]

They will not be able to participate in:

• anything related to council Edit: yes, they are currently able to view the active council and eventually also to have a vote, but there'd need to be some more thought given to how to make that process mistake-proof as possible before letting that genie out of the box.
• reporting misbehaviors Edit: this is only part of the consensus so of course it won't be a UI option.
• proposing a runtime upgrade, or proposing anything at all, actually. Eventually, will include some more commonplace

https://wiki.parity.io/Validator-Set-Tutorial-4.html

hmmm. started happening after updating to latest Substrate

Affected areas:

light-apps/IdentityCard.tsx:148
transfer-app/Saved:
identity-app/SavedAccounts:

Blocked by: @polkadot/api needs to have TS support for the freeBalances query

Quoting Jaco:
" Nothing critical, but we probably want to publish this via Parity (we have an npm repo for @parity) - and copyright probably needs to mirror what we have elsewhere in the Parity repos."

Looking at the ui-components package (https://github.com/paritytech/substrate-light-ui/tree/d7a0759f8f40ec57a4f709e96c19254f12af2139/packages/ui-components/src), I feel that it's going to be a huge dump of UI-stuff-we-don't-know-where-to-put very soon, a la parity-js/ui.

I propose, in the ui-components package, to put only UI components that satisfy either:

• Component is used across multiple other packages
• Component might be used by external projects

It would be wise also to split components inside ui-components into:

• those that are theme-related (Container, button, ...), i.e. the basics
• those that are somewhat intelligent/complex (CopyButton, AddressSummary)

All other UI used inside the app should be app-specific components, hance don't go inside ui-components, but inside the relevant app.

We could also use Storybook to organize the UI components.

These are only ideas for now, what do you think?

Currently, after my PR in #36 the following actions require a forcible update of the entire component tree to show up. This is quite💩UX-wise and should be fixed:

• Select account in Saved Accounts
• Forget account in Identity Card (currently it looks like it actually updates but that is by manually setting state)
• Adding account from Wallet

Right now we're by default importing all the types from @types hence the issues with duplicate identifiers, i.e. we're getting duplicates from @types/react-native and styled-components even though not even making a react native app...

So we can specify exactly which types we want. something like:

{
  "extends": "./node_modules/@polkadot/dev/config/tsconfig",
  "types": ["node", "jest", "styled-components"] 
}

The only hesitation is that we need to be vigilant about the types field as more components get added throughout development. Especially as currently the only time the duplicate identifier issue comes up is with version 4.1.3 of styled-components and reverting to v4.1.0 solves the issue. If it comes up again somewhere else, this is defintiely a go. As of now, onice.