feat: add ability to export network specifications from network setting screen

[hanwencheng]

It would be nice if we could have an additional button to export the current network specifications to QR code, which could be used for Signer or otther places.

It rely on the PR on Polkadot.js/UI for display the networkSpecs QR code : polkadot-js/ui#299

How it works

After node connected, user could click the button, and the current network specs will be shown.

User could set the color with a 6-digit hex text input, or use a generate random button.

How to Test

Sidebar Select "Settings" Button -> Select "Metadata" Tab

[jacogr]

Will take a look when CI is happy, atm seems like a draft, so probably too early.

[hanwencheng]

yeah, it is work in progress, I will update it in the weekend.

[jacogr]

Will go through, but I must admit that I am completely at a loss here. So we are generating a screen with random inputs that is not way tied to anything on chain and then get a QR to scan this?

[hanwencheng]

The idea is if user is using their own node, and want to export the network information to Signer (related issue ) they will need to get the networrk info. It is convienient and trusted to directly use Polkadot.js to get these info.

Network info mainly can not be changed, whereas user is still capable to change name, path id and color.

[jacogr]

Ok, the issues is that all that info is available in chain properties, ss58, decimals, etc. - yet we expect the user to input these? Does not make any sense to me.

[hanwencheng]

Gensis Hash, Prefix, and Decimals are disabled Input Component, user cannot input them. I used Input component as convinieent and though it has same styling with the previous component like name, path Id and color.

[jacogr]

Ok, so what is color meant to be? PathId?

(Colors are aligned with Polkascan based on chain only in apps, pathId has no meaning)

[hanwencheng]

I did not realize that there is already ui-highlight-border class with chain color, now I use it as default color if it is a known network with 451fd12 . Color is the same as it is using here for UI to distinguish different chains. User can use custom color for it in case it is a custom node that not unknown to us.

Path ID is special for Signer, when user derive a network for an identity, the derived account will automatically prefixed with its pathId, e.g In Kusama network, path id is kusama, so every account derived will be prefixed with //kusama, like //kusama//funding, //kusama//staking, etc. The name is indeed hard to understand, or probably we should call it Path Prefix.

[jacogr]

The "special to signer" stuff I would remove here. Atm it has not context in the Apps UI (paths are on the list somewhere here, as in the extension, but it really is app-specific. Passing stuff along is fine, but it needs to be known on both sides)

PS: Sorry fo the stoopid questions earlier, I missed the initial screenshot - and then (mistake #2), also missed the isDisabled in the code. So comedy of errors on my side.

[hanwencheng]

Removed the pathId in commit 71effda , building test cannot pass because polkadot-js/ui#299 is not merged.

[jacogr]

Some small comments.

[hanwencheng]

Refactor Modal into "Metadata" tab, see the updated screenshot in PR description.

Thanks for adding useChainInfo hooker!

[jacogr]

Can we just adapt this form to be -

return (
  <div className={className}>
...

[jacogr]

Thank you very much.

[polkadot-js-bot]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.