polkadot-js / apps Goto Github PK

These are cool to use, easy to setup, however it is not known unless you actually read the sources. Libraries should be properly documented throughout.

Dovetails on

polkadot-js/dev#132
polkadot-js/api#108

1. Add settings app, packages/app-settings
2. Allow configuration of WS endpoint, anything allowed (ws://|wss:// prefixed)
3. Show 2 pre-configured options, one for poc-1 hosted node (wss://poc-1.polkadot.io:9944) and one for locally-running node (ws://127.0.0.1:9944)
4. WS URL should be stored in localstorage - by default we probably want to pull in WS_URL env variable for the running-instance default.
5. On changing and setting endpoint via setApiWsUrl (assuming we wrap with ui-react-rx/with/api we probably need to refresh - the API itself won't automatically refresh existing subscriptions (that needs to be fix at the API layer, probably more involved - phase II)

#101

This is really moving up the chain, need gaps to expand - docs are lacking, seriously lacking :(

Currently we are not allowing params to be inputted

This setup is just "off"

The "Forget" should have rounding right, the "Reset" rounding left. Pure CSS in the case where spacers are used in Button Groups.

This is incorrect -

https://github.com/polkadot-js/apps/blob/master/packages/ui-signer/src/sign.ts#L33

It basically will add the length based on the chain (as per the other encoded values), however in this case it is actually provided by a (now) obsolete client. Assuming that POC-2 aligns the clients, the check can actually be removed to always encode with the length.

• Allows users to stake/unstake
• Allows a view of current validators + their balances
• Allows a view of current intentions (i.e. accounts wishing to stake) + their balances
• indication if any current accounts are validators and/or has the intention to stake (this probably goes on accounts/addresses as well)

Safari also not tested - Babel config is set properly, but none of the dev team has actually tried Chrome, alas, reports are there are some issues..

Goal:

We want to be able to manage the accounts and addresses better, so the user actually have a better way of categorizing their accounts and, at first glance, be able to see what the account/address relates to.

Background:

With the number of icons, accounts and addresses in the system, it is quite difficult to, at first glance, be able to see what this relates to. On Alexander, my setup has 12+ accounts (for various purposes), and it can be difficult to spot the "right one".

The suggestion here is to to add additional metadata to the saved keyring infomation, initially just focussed on labels that the user can add.

Actions:

• Add the ability for the user to define custom labels (used either for accounts of addresses) - this can simply be an input with "pick from existing" or "add new"
• Defined labels are saved in storage (basically anything defined in the accounts/addresses)
• Re-use this component on accounts and addresses - as mentioned above, just another add/edit input
• Save this information along with the account. The Keyring supports the meta fields so a "labels" array can just be added with no other overhead.
• For the AddressSummary and AddressRow components, show the actual attached labels (as available) - this way it is useful wherever it is used in the UI

Optionally:

• With the AddressRow, AddressSummary components, allow in-place adding of labels. So without adding an account to my addressbook, I can label it with a "+" (This can actually be a "quick add to addresses" functionality - so specify labels & name, save.

Follow-ups:

Once the above is in-place, we can start doing filtering through the UI based on labels. i.e. on staking, I can filter to see only the validators I am interested in, based on their labelling.

Keyring supports extraction, just need a way of selecting, unlocking and saving. (Or just move from storage -> file)

When trying to Sign message on https://poc-1.polkadot.io/#/toolbox with a non-preset account, I can't type in my/any password.

When running the latest version of polkadot-js, if I click "Create account" on the Accounts page it returns the following error in Chrome Inspector Console Uncaught TypeError: all.splice(...)[0].alpha(...).string is not a function

When select the "Extrinsics tab" and then choose "timestamp" from the selection box under the "from extrinsic section" label it crashes with Error: Assertion failed. See screenshots below:

staking.transactionFee() from storage should be included and shown on-screen when we are submitting an extrinsic. (i.e. it is probably useful to have a "total to be sent" display).

Especially in POC-1, this is confusing for some users - they transfer 1 DOT, however 101 gets deducted (100 DOT tx fee as set). For dev chains this is set to 1 DOT only, i.e. 2 gets deducted.

• ids
• how they are connected
• ping times

Still needs the RPCs on the Node, i.e. those are not available yet.

https://hackmd.io/mQw_42k-Tlu-D3cMltwWBA?view

... not a high priority since the functionality is just a "o, this can be cool", however should bring in a nice boost which should make it actually useful. https://github.com/alexcrichton/wasm-sodium

(For the command-line app the generation uses natively compiled sodium (as available), it is faster.)

Probably seeing this bit as a POC, when done properly it is added to the @polkadot/util-crypto, however in that case we probably wnat native & wasm support. So for now, trial with just the vanitygen app.

I pulled the latest changes from the master branch and then switched to the latest Node.js version using NVM with nvm use v10.4.0. I then ran yarn install, but it gave the following error sh: polkadot-dev-yarn-only: command not found:

$ yarn
yarn install v0.24.6
(node:12387) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "[email protected]" has unmet peer dependency "react@^15.0.0 || ^16.0.0".
[4/4] 📃  Building fresh packages...
$ polkadot-dev-yarn-only
sh: polkadot-dev-yarn-only: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

It's trying to run the line "postinstall": "polkadot-dev-yarn-only", in package.json.
I understand that the intention is that after installing the dependencies into the node_modules/ directory, it'd run indirectly via a shell script the Node.js CLI script that would then be available in ./node_modules/@polkadot/dev/scripts/polkadot-dev-yarn-only.js. When using "postinstall": "polkadot-dev-yarn-only", it tries to calling a binary executable file in node_modules/.bin named polkadot-dev-yarn-only but it doesn't exist and the shell script /node_modules/@polkadot/dev/scripts/polkadot-dev-yarn-only doesn't exist either.

Not sure if this is a bug or wanted behavior.

E.g. on https://poc-1.polkadot.io/#/storage if I change my selection in with storage key it doesn't accept my previous selection in who: AccountId w/o actively re-selecting.

This is just something small... however it is not very obvious that if you change the name the save becomes active. Most will expect to "click before doing". The functionality without extra clicks is not bad, however it is completely non-obvious.

I am using the master branch for the latest version of Polkadot to run a Polkadot Node on my local machine. I am using it to connect to PoC-2 Testnet with polkadot --chain=poc-2 --ws-port=8081. Unfortunately it does not appear to be backwards compatible, as poc-1 is no longer an available value for the --chain CLI option in the latest version of Polkadot. If I then run the latest version of Polkadot.js apps portal front-end and try to connect it to PoC-2 using WebSockets with WS_URL=wss://poc-2.polkadot.io:9944 yarn run start and open http://localhost:3000/ in Chrome web browser it gives the following error in Chrome Inspector WebSocket connection to 'wss://poc-2.polkadot.io:9944/' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED. It only works if I connect to PoC-1 via WebSockets with WS_URL=wss://poc-1.polkadot.io:9944 yarn run start. How can I connect to PoC-2 via WebSockets?

Current implementation is probably a bit anti-pattern-ish. (Trying to shoe-horn in a functional component - especially the append is fragile. Do it with a proper component & in-class refs)

Currently we have duplicated logic. It would mean a bit of rework on the signer since it currently has a purpose of unlock, sign & submit, but from an overall perspective we don't want keychain management in multiple places.

There are some magic hacks in there now where onChange is not pushed through since the component being wrapped could need it. Check for the onChange handlers and change the source, making it explicit and less black-magic -

https://github.com/polkadot-js/apps/blob/master/packages/ui-react-rx/src/with/observable.tsx#L94

As implemented in paritytech/polkadot#195

It is currently a (tiny bit) of mental gymnasics since it is not always clear when to use functional or PureComponent. (Well, it is - the latter has state and lifecycle methods). However, moving between files has some context-switching overhead.

It probably makes sense to convert all functional components to PureComponent - slightly less performant (?), however from a "this is how it is done" perspective it makes understanding and contributing easier.

(Not super important, however something to look at)

(Low priority, just for when bored)

Now that we have PostCSS, we can cleanup the CSS nicely, as an example, https://github.com/polkadot-js/apps/blob/master/packages/ui-app/src/styles/components.css -

.ui--output {
  background: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #f5f5f5;
  box-sizing: border-box;
  line-height: 1em;
  margin-bottom: 0.5em;
  padding: 0.75em 1em;
  position: relative;
  word-wrap: break-word;
 
  &.error {
    background: #fff6f6;
    border-color: #e0b4b4;
  } 

  .ui--output-button {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
  }
}

Nesting, variables, slowly does it.

The serialisation of exterinsics now expects an array of bytes ([255, 245, 69, ..]) instead of a hex string (0xfff545...) - need to wait until a conclusion in reached and a fix is available. For now the enumerable accounts #102 is untested on master, where it actually has effect.

(Still be be fully expanded)

1. Shows a list of proposals (either for "general voting" or "council voting")
2. Allows ability to see the votes, what it actually entails, the time left, etc.
3. Allows the ability to make a vote on the proposal
4. Shows own votes slightly differently, i.e. "yes, you have done this" vs "no, you are not involved"
   ...

i.e.

The above (and the actual comment around extending) does not bode well for things like the chain lookup where the options may change. This is the one place where a MobX (or alike) store can help - which obviously needs to be triggered in int's own right. (Possibly the trigger could be an observable instead of a store?)

What happens currently -

1. Go to extrinsics page
2. Start/stop node with dev chain
3. Testing accounts don't immediately show up, rather leaving and entering the page makes them show

e.g something that is very useful

WS_URL=wss://poc-1.polkadot.io:9944 yarn run start

As the telemetry is available, pull it in as an app - the front-end can be pulled-in, the back-end is hosted, i.e. it should connect to the same one. There are probably some smaller changes required on the telemetry app, i.e. not connecting by default to the host. For the most part, should just be a navigation entry and launching.

Not an immediate, telemetry UI should stabilise first.

@maciejhirsz Any additional comments here? (Don't do anything to change/adapt, but would like to explore the possibility in the future)

Currently children are defined as any across all of the base, this should be React.ReactNode, example -

https://github.com/polkadot-js/apps/blob/master/packages/ui-app/src/Input.tsx#L17

i.e. currently a list of accounts will show the addresses, however probably should be expanded to show the actual identitycon as well.

Where param names as displayed, it can be "paramName = paramValue"

Basically take what we have and turn it from a "text-dump" into something that actually looks and feels usable