From 1a5b0fa0c51919d4576f15d16cde7be52da22cce Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 7 May 2019 09:57:46 +0200
Subject: [PATCH] Markdown for the settings app (#1068)

---
 packages/app-settings/src/index.css    |  3 +-
 packages/app-settings/src/index.tsx    |  4 +-
 packages/app-settings/src/md/basics.md | 60 ++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 packages/app-settings/src/md/basics.md

diff --git a/packages/app-settings/src/index.css b/packages/app-settings/src/index.css
index 6c8ae06962..684bf2547d 100644
--- a/packages/app-settings/src/index.css
+++ b/packages/app-settings/src/index.css
@@ -3,7 +3,6 @@
 /* of the Apache-2.0 license. See the LICENSE file for details. */
 
 .settings-General {
-
   .ui.menu {
     justify-content: flex-end;
     margin-bottom: 0;
@@ -30,4 +29,4 @@
     height: 300px;
     position: relative;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/app-settings/src/index.tsx b/packages/app-settings/src/index.tsx
index d3b38196a4..9376f85cce 100644
--- a/packages/app-settings/src/index.tsx
+++ b/packages/app-settings/src/index.tsx
@@ -7,10 +7,11 @@ import { TabItem } from '@polkadot/ui-app/Tabs';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
-import { Tabs } from '@polkadot/ui-app';
+import { HelpOverlay, Tabs } from '@polkadot/ui-app';
 
 import './index.css';
 
+import md from './md/basics.md';
 import translate from './translate';
 import Developer from './Developer';
 import General from './General';
@@ -47,6 +48,7 @@ class App extends React.PureComponent<Props, State> {
 
     return (
       <main className='settings--App'>
+        <HelpOverlay md={md} />
         <header>
           <Tabs
             basePath={basePath}
diff --git a/packages/app-settings/src/md/basics.md b/packages/app-settings/src/md/basics.md
new file mode 100644
index 0000000000..a6e23ac21e
--- /dev/null
+++ b/packages/app-settings/src/md/basics.md
@@ -0,0 +1,60 @@
+# Settings
+
+Here you are able to tweak a number of the settings for your interface - where it connects to, the actual theme and if you are a developer, have access to some additional features to allow for a stress-free connection to a (possibly) custom chain.
+
+# General
+
+In the general section you can setup the basic operation for your UI.
+
+- **endpoint** Defines the node to connect to. Select from one of the available hosted RPCs or connect to your own by specifying a custom URL. (Be aware that custome URLs should be behind secure WebSockets if you are using a UI hosted on a https endpoint)
+- **theme** Swap between a Polkadot or Substrate themed interface.
+- **mode** By default the UI appears in a fully-featured mode. You can select to only have the core features (which provides all the basics, unless you are a power user).
+
+# Developer
+
+In this section, you are able to define custom types to be added to the underlying API. When developing a custom chain, it is typical that additional types are added. Defining them here allows the underlying API (and therefore the UI) have an understanding how to encode and decode these types.
+
+Types are saved accross refreshes, so it is a single operation for all future usages of the UI. For the definitions, a simple JSON format is used, and example could be -
+
+```
+{
+  "TransactionInput": {
+    "parent_output": "Hash",
+    "signature": "Signature"
+  },
+  "TransactionOutput": {
+    "value": "u128",
+    "pubkey": "Hash",
+    "sale": "u32"
+  },
+  "Transaction": {
+    "inputs": "Vec<TransactionInput>",
+    "outputs": "Vec<TransactionOutput>"
+  }
+}
+```
+
+Be aware that the types are registered in the order they appear here. Since `Transaction` above requires both `TransactionInput` and `TransactionOutput` it is defined after the definitions for those are available. (Circular deps are not supported here). For a slightly more complex example, using both types and enums, the following would be used -
+
+```
+{
+  "SimpleEnum": {
+    "_enum": ["One", "Two", "Three"]
+  },
+  "TypeEnum": {
+    "_enum": {
+      "One": "u32",
+      "Two": "u64",
+      "Three": null
+    }
+  }.
+  "MyNumber": "u32",
+  "Thing": {
+    "count_enum": "SimpleEnum",
+    "type_enum": "TypeEnum",
+    "counter": "MyNumber",
+    "ids": "Vec<AccountId>"
+  },
+  "ArrayThing": "Vec<Thing>"
+}
+```