diff --git a/README.md b/README.md index fde50d5cf8..f17294895f 100644 --- a/README.md +++ b/README.md @@ -10,22 +10,24 @@ A Portal into the Polkadot and Substrate networks. Provides a view and interacti This can be accessed as a hosted application via [https://polkadot.js.org/apps/](https://polkadot.js.org/apps/) to explorer any of the supported Polkadot and Substrate chains +**Important** If you are a chain developer and would like to add support for your chain to the UI, all teh local configuration (API types, settings, logos) can be customized in [the apps-config package](../apps-config/README.md), complete with instructions of what goes where. + ## overview The repo is split into a number of packages, each representing an application. These are - - [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 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. -- [app-settings](packages/app-settings/) A basic settings management app, allowing choice of language, node to connect to, and theme -- [app-staking](packages/app-staking/) A basic staking management app, allowing staking and nominations. -- [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/) Submission of raw data to RPC endpoints and utility hashing functions. -- [app-transfer](packages/app-transfer/) A basic account management app, allowing transfer of Units/DOTs between accounts. +- [page-accounts](packages/page-accounts/) A basic account management app. +- [page-address-book](packages/page-address-book/) A basic address management app. +- [page-democracy](packages/page-democracy/) A basic voting app, allowing votes on activate proposals and referenda. +- [page-explorer](packages/page-explorer/) A simple block explorer. It only shows the most recent blocks, updating as they become available. +- [page-extrinsics](packages/page-extrinsics/) Submission of extrinsics to a node. +- [page-js](packages/page-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. +- [page-settings](packages/page-settings/) A basic settings management app, allowing choice of language, node to connect to, and theme +- [page-staking](packages/page-staking/) A basic staking management app, allowing staking and nominations. +- [page-storage](packages/page-storage/) A simple node storage query application. Multiple queries can be queued and updates as new values become available. +- [page-toolbox](packages/page-toolbox/) Submission of raw data to RPC endpoints and utility hashing functions. +- [page-transfer](packages/page-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) @@ -50,11 +52,11 @@ To get started - ## I want to code around -There is a base template available [app-123code](packages/app-123code/) that acts as a simple starting point for adding additional apps to the UI. Alternatively if you just want some place where you can write some code, it does the trick. +There is a base template available [page-123code](packages/page-123code/) that acts as a simple starting point for adding additional apps to the UI. Alternatively if you just want some place where you can write some code, it does the trick. While it is hidden from the sidebar, it is accessible via [http://127.0.0.1:3000/#/123code](http://127.0.0.1:3000/#/123code) -Be sure to follow the [app-123code/README.md](packages/app-123code/README.md) instructions. +Be sure to follow the [page-123code/README.md](packages/page-123code/README.md) instructions. ## Docker diff --git a/packages/apps-config/README.md b/packages/apps-config/README.md index 21cb500530..012a0365f4 100644 --- a/packages/apps-config/README.md +++ b/packages/apps-config/README.md @@ -1,3 +1,38 @@ # @polkadot/apps-config -General config for various services, including settings, external links & types +General config for various services, including settings, external links & types. This is a central source of all the configuration settings that can be tweaked. This also means that it can be customized (via PR) to support any additional chains. The internals are split into a number of settings - + +- [api](./api) - Here you can add any chain or node-type specific types configuration. When added, it means that when the UI connects to either a runtime with a spec name, or a chain with a specific name, the types will be automatically added to the API as used in the app. +- [links](./links) - These are all links to external providers such as explorers. This information is used anywhere where there is an external lik to determine the providers for these links. +- [logos](./logos) - Logos for chain and node spec specific overrides. This means that when the runtime/chain is detected, the specific logo would be used. +- [settings](./settings) - These are used in dropdowns, specifically under the settings page. + +Customization for each of these are discussed next. + +## Api + +The API config can be done in one of two ways - + +- [chain](./api/chain) - Here we are mapping to a specific chain name. Generally the next type would be preferred, however if you are supporting multiple chains with individual config, you would probably want to add the chain-specific information in here. +- [spec](./api/spec) - Here we are mapping from the runtime spec name of the chain to specific types. This means that when connected to a specific spec, these types will be injected. + +The actual type definitions you should be familiar with, it is exactly the same as you would upload via the settings page in JSON, or as detailed in the [API types pages](https://polkadot.js.org/api/start/types.extend.html#extending-types). + +## Links + +We are not going to spend too much time here, since it is generally applicable to explorers and like services. However, should you run one of these services, you can take a look at the existing configs and customize for your setup. + +## Logos + +These are self-explanatory and config here actually does get used in other parts such as well. Basically the information here is broken down into a couple of catagories - + +- chains - Specific logos when connecting to a specific chain +- nodes - Logos that are used when connecting to a specific runtime spec type (catch-all) +- named - These logos are used [settings](./settings) + +## Settings + +There are 2 general areas of interest here - + +- [endpoints](./settings/endpoints) - This is where we can add additional endpoints to appear in the dropdowns. We would like to keep this to mostly live networks, although based on demand can probably extend to a testing-only section as well. +- [ss58](./settings/ss58) - Should you wish to add your ss58Format to the settings dropdown, this is where the configuration take place diff --git a/packages/apps-config/src/logos/index.ts b/packages/apps-config/src/logos/index.ts index 884cc0d9e9..651d2c06b1 100644 --- a/packages/apps-config/src/logos/index.ts +++ b/packages/apps-config/src/logos/index.ts @@ -24,14 +24,17 @@ const chainLogos: Record = { }; // overrides based on the actual software node type (all '-' converted to ' ') -const nodeLogos: Record = { - 'centrifuge chain': nodeCentrifuge, - 'edgeware node': nodeEdgeware, - 'node template': nodeSubstrate, - 'parity polkadot': nodePolkadot, - 'polkadot js': nodePolkadotJs, - 'substrate node': nodeSubstrate -}; +const nodeLogos: Record = [ + ['centrifuge chain', nodeCentrifuge], + ['edgeware node', nodeEdgeware], + ['node template', nodeSubstrate], + ['parity polkadot', nodePolkadot], + ['polkadot js', nodePolkadotJs], + ['substrate node', nodeSubstrate] +].reduce((logos, [node, logo]): Record => ({ + ...logos, + [node.toLowerCase().replace(/-/g, ' ')]: logo +}), {}); // overrides when we pass an explicit logo name const namedLogos: Record = { diff --git a/packages/apps-config/src/settings/endpoints.ts b/packages/apps-config/src/settings/endpoints.ts index d23e68395e..ecfbae6a09 100644 --- a/packages/apps-config/src/settings/endpoints.ts +++ b/packages/apps-config/src/settings/endpoints.ts @@ -4,6 +4,11 @@ import { Option } from './types'; +// The available endpoints that will show in the dropdown. For the most part (with the exception of +// Polkadot) we try to keep this to live chains only, with RPCs hosted by the community/chain vendor +// info: The chain logo name as defined in ../logos, specifically in namedLogos +// text: The text to display on teh dropdown +// value: The actual hosted secure websocket endpoint export default [ { info: 'kusama', diff --git a/packages/apps-config/src/settings/languages.ts b/packages/apps-config/src/settings/languages.ts index d6d244126e..4320b89843 100644 --- a/packages/apps-config/src/settings/languages.ts +++ b/packages/apps-config/src/settings/languages.ts @@ -4,6 +4,8 @@ import { Option } from './types'; +// These are the available languages. For each there are translation files available +// in packages/apps/public/locales (Don't edit unless adding a new translation) export default [ { text: 'Default browser language (auto-detect)', @@ -18,4 +20,9 @@ export default [ text: '汉语', value: 'zh' } -].map((option): Option => ({ ...option, withI18n: false })); + // For ja, we only have the settings page, remove until comprehensive + // , { + // text: '日本語', + // value: 'ja' + // } +].map((option): Option => ({ ...option })); diff --git a/packages/apps-config/src/settings/ss58.ts b/packages/apps-config/src/settings/ss58.ts index 5d0d425af5..03749429fc 100644 --- a/packages/apps-config/src/settings/ss58.ts +++ b/packages/apps-config/src/settings/ss58.ts @@ -4,6 +4,10 @@ import { Option } from './types'; +// Definitions here are with the following values - +// info: the name of a logo as defined in ../logos, specifically in namedLogos +// text: The text you wish to display in the dropdown +// value: The actual ss5Format value (as registered) export default [ { info: 'default',