neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add help on critical apps (#1030)

Browse Source 
* add help on account app

* add help on addresses app

* add help on transfer app

* typos

* add help for voting app

* add help slidein for accounts

* correction session needs to be ed25519

* add transfer and address book

* add democracy and fix typo

* Update packages/app-democracy/src/md/basic.md

Co-Authored-By: Tbaut <33178835+Tbaut@users.noreply.github.com>

* Apply suggestions from code review

Co-Authored-By: Tbaut <33178835+Tbaut@users.noreply.github.com>

* Update packages/app-transfer/src/md/basic.md

* use both DOTs and Units, move crypto to help, fix typo
This commit is contained in:
Thibaut Sardan 2019-04-29 17:13:17 +02:00 committed by Jaco Greeff
parent e874d1d453
commit 345cd06539
22 changed files with 137 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -18,7 +18,7 @@ The repo is split into a number of packages, each representing an application. T
- [apps](packages/apps/) This is the main entry point. It handles the selection sidebar and routing to the specific application being displayed.
- [app-accounts](packages/app-accounts/) A basic account management app.
- [app-address-book](packages/app-address-book/) A basic address management app.
- [app-democracy](packages/app-democracy/) A basic voting app, allowing votes on activate proposals and referendums.
- [app-democracy](packages/app-democracy/) A basic voting app, allowing votes on activate proposals and referenda.
- [app-explorer](packages/app-explorer/) A simple block explorer. It only shows the most recent blocks, updating as they become available.
- [app-extrinsics](packages/app-extrinsics/) Submission of extrinsics to a node.
- [app-js](packages/app-js/) An online code editor with [@polkadot-js/api](https://github.com/polkadot-js/api/tree/master/packages/api) access to the currently connected node.
@ -27,7 +27,7 @@ The repo is split into a number of packages, each representing an application. T
- [app-nodeinfo](packages/app-nodeinfo/) Node information and status
- [app-storage](packages/app-storage/) A simple node storage query application. Multiple queries can be queued and updates as new values become available.
- [app-toolbox](packages/app-toolbox/) Sumission of raw data to RPC endpoints and utility hashing functions.
- [app-transfer](packages/app-transfer/) A basic account management app, allowing transfer of DOTs between accounts.
- [app-transfer](packages/app-transfer/) A basic account management app, allowing transfer of Units/DOTs between accounts.
In addition the following libraries are also included in the repo. These are to be moved to the [@polkadot/ui](https://github.com/polkadot-js/ui/) repository once it reaches a base level of stability and usability. (At this point with the framework being tested on the apps above, it makes development easier having it close)

17
packages/app-accounts/src/Creator.tsx
View File

@ -150,8 +150,9 @@ class Creator extends React.PureComponent<Props, State> {
<Input
autoFocus
className='full'
help={t('Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g "name_you_want - stash".')}
isError={!isNameValid}
label={t('name your account')}
label={t('name')}
onChange={this.onChangeName}
value={name}
/>
@ -159,12 +160,13 @@ class Creator extends React.PureComponent<Props, State> {
<div className='ui--row'>
<Input
className='full'
help={t('The private key for your account is derived from this seed. This seed must be kept secret as anyone in its possession has access to the funds of this account. If you validate, use the seed of the session account as the "--key" parameter of your node.')}
isAction
isError={!isSeedValid}
label={
seedType === 'bip'
? t('create from the following mnemonic seed')
: t('create from the following seed (hex or string)')
? t('mnemonic seed')
: t('seed (hex or string)')
}
onChange={this.onChangeSeed}
value={seed}
@ -180,8 +182,9 @@ class Creator extends React.PureComponent<Props, State> {
<div className='ui--row'>
<Password
className='full'
help={t('This password is used to encrypt your private key. It must be strong and unique! You will need it to sign transactions with this account. You can recover this account using this password together with the backup file (generated in the next step).')}
isError={!isPassValid}
label={t('your password for this account')}
label={t('password')}
onChange={this.onChangePass}
value={password}
/>
@ -195,6 +198,7 @@ class Creator extends React.PureComponent<Props, State> {
<div className='ui--row'>
<Dropdown
defaultValue={pairType}
help={t('Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use "ed25519".')}
label={t('keypair crypto type')}
onChange={this.onChangePairType}
options={uiSettings.availableCryptos}
@ -203,6 +207,7 @@ class Creator extends React.PureComponent<Props, State> {
<div className='ui--row'>
<Input
className='full'
help={t('You can set a custom derivation path for this account using the following syntax "/<soft-key>//<hard-key>". The "/<soft-key>" and "//<hard-key>" may be repeated and mixed`.')}
isError={!!deriveError}
label={t('secret derivation path')}
onChange={this.onChangeDerive}
@ -263,7 +268,7 @@ class Creator extends React.PureComponent<Props, State> {
<Modal.Content>
{t('We will provide you with a generated backup file after your account is created. As long as you have access to your account you can always redownload this file later.')}
<Modal.Description>
{t('Please make sure to save this file in a secure location as it is the only way to restore your account.')}
{t('Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.')}
</Modal.Description>
<AddressSummary
className='accounts--Modal-Address'
@ -299,7 +304,7 @@ class Creator extends React.PureComponent<Props, State> {
isPassValid: false,
isSeedValid: true,
isValid: false,
name: 'new keypair',
name: 'new account',
password: '',
pairType,
seedType,

7
packages/app-accounts/src/Editor.tsx
View File

@ -115,9 +115,10 @@ class Editor extends React.PureComponent<Props, State> {
<div className='ui--row'>
<InputAddress
className='full'
help={t('Select the account you wish to edit.')}
hideAddress
isInput={false}
label={t('using my account')}
label={t('account')}
onChange={this.onChangeAccount}
type='account'
value={address}
@ -126,8 +127,9 @@ class Editor extends React.PureComponent<Props, State> {
<div className='ui--row'>
<Input
className='full'
help={t('Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g "name_you_want - stash".')}
isEditable
label={t('identified by the name')}
label={t('name')}
onChange={this.onChangeName}
value={editedName}
/>
@ -135,6 +137,7 @@ class Editor extends React.PureComponent<Props, State> {
<div className='ui--row'>
<Dropdown
defaultValue={type}
help={t('Cryptography used to create this account. It cannot be changed after the account creation. Note that a stash account must use ed25519.')}
isDisabled
label={t('keypair crypto type')}
options={uiSettings.availableCryptos}

6
packages/app-accounts/src/Restore.tsx
View File

@ -72,8 +72,9 @@ class Restore extends React.PureComponent<Props, State> {
<InputFile
accept={acceptedFormats}
className='full'
help={t('Select the JSON key file that was downloaded when you created the account. This JSON file contains your private key encrypted with your password.')}
isError={!isFileValid}
label={t('previously backed-up json keyfile')}
label={t('backup file')}
onChange={this.onChangeFile}
withLabel
/>
@ -82,8 +83,9 @@ class Restore extends React.PureComponent<Props, State> {
<Password
autoFocus
className='full'
help={t('Type the password chosen at the account creation. It was used to encrypt your account\'s private key in the backup file.')}
isError={!isPassValid}
label={t('decrypt keyfile using the password')}
label={t('password')}
onChange={this.onChangePass}
value={password}
/>

6
packages/app-accounts/src/Vanity/index.tsx
View File

@ -114,16 +114,18 @@ class VanityApp extends React.PureComponent<Props, State> {
<Input
autoFocus
className='medium'
help={t('Type here what you would like your address to contain. This tool will generate the keys and show the associated addresses that best match your search. You can use "?" as a wildcard for a character.')}
isDisabled={isRunning}
isError={!isMatchValid}
label={t('generate address with ? as a wildcard')}
label={t('Search for')}
onChange={this.onChangeMatch}
value={match}
/>
<Dropdown
className='medium'
help={t('Should the search be case sensitive, e.g if you select "no" your search for "Some" may return addresses containing "somE" or "sOme"...')}
isDisabled={isRunning}
label={t('perform a case sensitive search/match')}
label={t('case sensitive')}
options={BOOL_OPTIONS}
onChange={this.onChangeCase}
value={withCase}

6
packages/app-accounts/src/index.tsx
View File

@ -12,14 +12,15 @@ import './index.css';
import React from 'react';
import { Route, Switch } from 'react-router';
import accountObservable from '@polkadot/ui-keyring/observable/accounts';
import { Tabs } from '@polkadot/ui-app';
import { HelpOverlay, Tabs } from '@polkadot/ui-app';
import { withMulti, withObservable } from '@polkadot/ui-api';
import basicMd from './md/basic.md';
import Creator from './Creator';
import Editor from './Editor';
import Restore from './Restore';
import Vanity from './Vanity';
import translate from './translate';
import Vanity from './Vanity';
type Props = AppProps & I18nProps & {
allAccounts?: SubjectInfo
@ -100,6 +101,7 @@ class AccountsApp extends React.PureComponent<Props, State> {
return (
<main className='accounts--App'>
<HelpOverlay md={basicMd} />
<header>
<Tabs
basePath={basePath}

34
packages/app-accounts/src/md/basic.md Normal file
View File

@ -0,0 +1,34 @@
# Account
An account is identified by its public address on the network. The network will **not** know about the name you give to this account in this app. It is totally fine to give away this address, this is also the only information needed to receive funds.
# Security
The public address is generated from a private key, itself generated from a seed or a mnemonic phrase. The seed or the mnemonic phrase should **never be shared with anybody** as they give access to your funds. It must be stored securely.
The password needed to create an account is used to encrypt your private key. You must choose a strong and unique password.
This password is also used to encrypt the private key in the backup file downloaded upon account creation. Thanks to this file together with your account password, you can recover your account.
# Account recovery
You can recover an account from its:
- seed or mnemonic:
From the "Create account" tab, type your seed or mnemonic in the associated field.
- backup file (also called JSON keystore file) and the account's password:
From the "Restore account" tab. Upload your backup file and type in the password associated.
# Minimum allowed balance
Accounts with a balance lower than the minimal amount, 100 milliUnits (miliDOTs for Polkadot) as of writing are considered as nonexistent for the network. If an account's balance ever drops below this amount, it is removed from the network. In this application, it will still be visible, but with a balance of 0.
For a fund transfer to a **new account** (read an account with a balance of 0), if the amount transferred is less than the minimum allowed balance, then the transfer will "succeed" but the destination account will not be created (read its balance will remain 0); this essentially burns the transfer balance from the sender, because the receiver's balance never exceed the minimum allowed balance.
If the receiver already exists (read it has a balance greater than 0), it is perfectly possible to transfer very low amounts.
# Cryptography
Substrate and Polkadot use Schnorrkel/Ristretto x25519 ("sr25519") as its key derivation and signing algorithm.
Sr25519 is based on the same underlying Curve25519 as its EdDSA counterpart, Ed25519. However, it uses Schnorr signatures instead of the EdDSA scheme. Schnorr signatures bring some noticeable benefits over the ECDSA/EdDSA schemes. For one, it is more efficient and still retains the same feature set and security assumptions. Additionally, it allows for native multisignature through signature aggregation.
If you wish to validate, the `session` account needs to use "ed25519" cryptography.

6
packages/app-address-book/src/Creator.tsx
View File

@ -83,8 +83,9 @@ class Creator extends React.PureComponent<Props, State> {
<Input
autoFocus
className='full'
help={t('Paste here the address of the contact you want to add to your address book.')}
isError={!isAddressValid}
label={t('add the following address')}
label={t('address')}
onChange={this.onChangeAddress}
value={address}
/>
@ -92,8 +93,9 @@ class Creator extends React.PureComponent<Props, State> {
<div className='ui--row'>
<Input
className='full'
help={t('Type the name of your contact. This name will be used across all the apps. It can be edited later on.')}
isError={!isNameValid}
label={t('name the entry')}
label={t('name')}
onChange={this.onChangeName}
value={name}
/>

6
packages/app-address-book/src/Editor.tsx
View File

@ -99,9 +99,10 @@ class Editor extends React.PureComponent<Props, State> {
<div className='ui--row'>
<InputAddress
className='full'
help={t('Select the contact you want to edit or forget.')}
hideAddress
isInput={false}
label={t('edit the selected address')}
label={t('contact')}
onChange={this.onChangeAddress}
type='address'
value={address}
@ -110,7 +111,8 @@ class Editor extends React.PureComponent<Props, State> {
<div className='ui--row'>
<Input
className='full'
label={t('identified by the name')}
help={t('Name associated with the selected contact. You can change it here. This name will be changed across all the apps.')}
label={t('name')}
onChange={this.onChangeName}
value={editedName}
/>

3
packages/app-address-book/src/index.tsx
View File

@ -11,9 +11,11 @@ import './index.css';
import React from 'react';
import { Route, Switch } from 'react-router';
import addressObservable from '@polkadot/ui-keyring/observable/addresses';
import { HelpOverlay } from '@polkadot/ui-app';
import Tabs, { TabItem } from '@polkadot/ui-app/Tabs';
import { withMulti, withObservable } from '@polkadot/ui-api';
import basicMd from './md/basic.md';
import Creator from './Creator';
import Editor from './Editor';
import translate from './translate';
@ -86,6 +88,7 @@ class AddressBookApp extends React.PureComponent<Props, State> {
return (
<main className='address-book--App'>
<HelpOverlay md={basicMd} />
<header>
<Tabs
basePath={basePath}

6
packages/app-address-book/src/md/basic.md Normal file
View File

@ -0,0 +1,6 @@
# Address book
You can store and get quick access to the most commonly used address, such as a friends' account.
Any contact you create in this interface will be reflected in the application.
You can edit the name of a contact by selecting it and changing its name. To remove a contact from the list, select it in the `Edit contact` tab and click "Forget".

4
packages/app-democracy/src/Referendums.tsx
View File

@ -22,7 +22,7 @@ class Referendums extends React.PureComponent<Props> {
return (
<section className='democracy--Referendums'>
<h1>{t('referendums')}</h1>
<h1>{t('referendum')}</h1>
{this.renderReferendums()}
</section>
);
@ -37,7 +37,7 @@ class Referendums extends React.PureComponent<Props> {
if (!referendums.length) {
return (
<div className='ui disabled'>
{t('no available referendums')}
{t('no available referendum')}
</div>
);
}

2
packages/app-democracy/src/Summary.tsx
View File

@ -31,7 +31,7 @@ class Summary extends React.PureComponent<Props> {
<CardSummary label={t('proposals')}>
{formatNumber(democracy_publicPropCount)}
</CardSummary>
<CardSummary label={t('referendums')}>
<CardSummary label={t('referenda')}>
{formatNumber(democracy_referendumCount)}
</CardSummary>
<CardSummary label={t('active')}>

1
packages/app-democracy/src/Voting.tsx
View File

@ -39,6 +39,7 @@ class Voting extends React.PureComponent<Props, State> {
return (
<div className='democracy--Referendum-vote'>
<InputAddress
help={t('Select the account you wish to vote with. You can approve "yay" or deny "nay" the proposal.')}
label={t('vote using my account')}
onChange={this.onChangeAccount}
placeholder='0x...'

4
packages/app-democracy/src/index.tsx
View File

@ -7,8 +7,9 @@ import { AppProps, BareProps, I18nProps } from '@polkadot/ui-app/types';
import './index.css';
import React from 'react';
import { Tabs } from '@polkadot/ui-app';
import { HelpOverlay,Tabs } from '@polkadot/ui-app';
import basicMd from './md/basic.md';
import Proposals from './Proposals';
import Referendums from './Referendums';
import Summary from './Summary';
@ -22,6 +23,7 @@ class App extends React.PureComponent<Props> {
return (
<main className='democracy--App'>
<HelpOverlay md={basicMd} />
<header>
<Tabs
basePath={basePath}

13
packages/app-democracy/src/md/basic.md Normal file
View File

@ -0,0 +1,13 @@
# Democracy
This application lets you view proposals and vote for or against a referendum.
Anyone can create a proposal by bonding the minimum deposit for a certain period of time (No. of Blocks). If someone likes the proposal, they could deposit the same amount of tokens to support it. The minimum deposit is currently 5 Units/DOTs.
# Proposals
This lists the proposals that you can not vote on yet. The proposal with the highest amount of Units/DOTs supporting it will be selected in the next launch period for everyone to vote. This selected proposal evolved in a referendum. The tokens locked to support each proposal will be released once the proposal is tabled.
# Referendum
This lists the proposal that you can now vote for "yay" or against "nay".
At the end of the launch period, and depending on the outcome of the referendum, the action that was subjected to vote will be executed or rejected.

9
packages/app-transfer/src/Transfer.tsx
View File

@ -49,19 +49,22 @@ class Transfer extends React.PureComponent<Props, State> {
{this.renderAddress(accountId, 'medium')}
<div className='transfer--Transfer-data'>
<InputAddress
label={t('from my source account')}
help={t('Select the account you want to send funds from.')}
label={t('from')}
onChange={this.onChangeFrom}
type='account'
/>
<InputAddress
label={t('to the recipient address')}
help={t('Select a contact or paste the address you want to send funds to.')}
label={t('to')}
onChange={this.onChangeTo}
type='all'
/>
<InputBalance
autoFocus
help={t('Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 mili is equivalent to sending 0.001.')}
isError={!hasAvailable}
label={t('transfer a value of')}
label={t('amount')}
onChange={this.onChangeAmount}
/>
<Checks

5
packages/app-transfer/src/index.tsx
View File

@ -5,10 +5,10 @@
import { AppProps, I18nProps } from '@polkadot/ui-app/types';
import React from 'react';
import { Tabs } from '@polkadot/ui-app';
import { HelpOverlay,Tabs } from '@polkadot/ui-app';
import './index.css';
import basicMd from './md/basic.md';
import Transfer from './Transfer';
import translate from './translate';
@ -20,6 +20,7 @@ class App extends React.PureComponent<Props> {
return (
<main className='transfer--App'>
<HelpOverlay md={basicMd} />
<header>
<Tabs
basePath={basePath}

22
packages/app-transfer/src/md/basic.md Normal file
View File

@ -0,0 +1,22 @@
# Transfer
This tab allows you to send funds from one account you own to another account.
# Minimum allowed balance
Accounts with a balance lower than the minimal amount, 100 miliUnits (miliDOTs for Polkadot) as of writing, are considered as inexistent for the network. If an account's balance ever drops below this amount, it is removed from the network. In this application, it will still be visible, but with a balance of 0.
For a fund transfer to a **new account** (read an account with a balance of 0), if the amount transferred is less than the minimum allowed balance, then the transfer will "succeed" but the destination account will not be created (read its balance will remain 0); this essentially burns the transfer balance from the sender, because the receiver's balance never exceed the minimum allowed balance.
If the receiver already exists (read it has a balance greater than 0), it is perfectly possible to transfer very low amounts.
# Fees
Fees will be added to the transfer amount on top of the amount you wish to send.
An information box will show you the amount of fees that you will need to pay for the transfer and the total amount that will be deducted from the sender.
- transfer:
You need to pay fees to transfer funds from one account to the other in order to pay for the security of the network.
- account creation
In addition to the transfer fees, if you are sending funds to an account with a 0 balance, not only do you need to make sure to send enough funds (see the "minimum allowed balance" section) but you will need to pay a creation fee. This is to prevent the generation of unused account.

2
packages/ui-app/src/InputFile.tsx
View File

@ -62,7 +62,7 @@ class InputFile extends React.PureComponent<Props, State> {
<div className='label'>
{
!file || clearContent
? placeholder || t('drag and drop the file here')
? placeholder || t('click to select or drag and drop the file here')
: placeholder || t('{{name}} ({{size}} bytes)', {
replace: file
})

4
packages/ui-app/src/Password.tsx
View File

@ -15,6 +15,7 @@ type Props = BareProps & {
autoFocus?: boolean,
children?: React.ReactNode,
defaultValue?: any,
help?: string,
isDisabled?: boolean,
isError?: boolean,
label?: string,
@ -36,7 +37,7 @@ export default class Password extends React.PureComponent<Props, State> {
};
render () {
const { autoFocus, children, className, defaultValue, isDisabled, isError, label, name, onChange, onKeyDown, style, tabIndex, value, withLabel } = this.props;
const { autoFocus, children, className, defaultValue, help, isDisabled, isError, label, name, onChange, onKeyDown, style, tabIndex, value, withLabel } = this.props;
const { isVisible } = this.state;
return (
@ -44,6 +45,7 @@ export default class Password extends React.PureComponent<Props, State> {
autoFocus={autoFocus}
className={classes('ui--Password', className)}
defaultValue={defaultValue}
help={help}
isAction
isDisabled={isDisabled}
isError={isError}

2
packages/ui-params/src/Param/KeyValueArray.tsx
View File

@ -40,7 +40,7 @@ class KeyValueArray extends React.PureComponent<Props, State> {
constructor (props: Props) {
super(props);
this.placeholderEmpty = props.t('drag and drop JSON key/value (hex-encoded) file');
this.placeholderEmpty = props.t('click to select or drag and drop JSON key/value (hex-encoded) file');
this.state = {
placeholder: this.placeholderEmpty
};