Initial commit

.babelrc

@@ -0,0 +1,11 @@
+{
+  "extends": "@polkadot/dev/config/babel",
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "^@polkadot/portal-(chains|db-chain|db|p2p|rpc|runtime|state|wasm)(.*)": "./packages/portal-\\1/src\\2",
+        "^@polkadot/portal": "./packages/portal/src"
+      }
+    }]
+  ]
+}

.codeclimate.yml

@@ -0,0 +1,3 @@
+exclude_patterns:
+- "**/*.spec.js"
+- "**/flow-typed/*"

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+[*]
+indent_style=space
+indent_size=2
+tab_width=2
+end_of_line=lf
+charset=utf-8
+trim_trailing_whitespace=true
+max_line_length=120
+insert_final_newline=true

.eslintignore

@@ -0,0 +1,2 @@
+**/build/*
+**/node_modules/*

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "./node_modules/@polkadot/dev/config/eslint.js"
+  ]
+}

.flowconfig

@@ -0,0 +1,16 @@
+[ignore]
+<PROJECT_ROOT>/build
+<PROJECT_ROOT>/packages/.*/build
+
+[include]
+
+[libs]
+node_modules/@polkadot/dev/flow-typed
+
+[lints]
+all=warn
+
+[options]
+include_warnings=true
+module.name_mapper='^@polkadot/content-\(accounts\|home\|settings\)\(.*\)$' -> '<PROJECT_ROOT>/packages/content-\1/src\2'
+module.name_mapper='^@polkadot/portal\(.*\)$' -> '<PROJECT_ROOT>/packages/portal/src\1'

.gitignore

@@ -0,0 +1,13 @@
+build/
+coverage/
+node_modules/
+tmp/
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+package-lock.json
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@polkadot/dev/config/stylelint"
+}

.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+node_js:
+  - "8"
+cache:
+  yarn: true
+  directories:
+    - node_modules
+before_install:
+  - npm install --global lerna yarn --cache-min 999999999
+install:
+  - yarn install
+script:
+  - yarn polkadot-dev-build-travis

LICENSE

@@ -0,0 +1,15 @@
+ISC License (ISC)
+
+Copyright 2017-2018 Jaco Greeff <jacogr@gmail.com>
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,12 @@
+[![polkadotjs](https://img.shields.io/badge/polkadot-js-orange.svg?style=flat-square)](https://polkadot.js.org)
+![isc](https://img.shields.io/badge/license-ISC-lightgrey.svg?style=flat-square)
+[![style](https://img.shields.io/badge/code%20style-semistandard-lightgrey.svg?style=flat-square)](https://github.com/Flet/semistandard)
+[![npm](https://img.shields.io/npm/v/@polkadot/portal.svg?style=flat-square)](https://www.npmjs.com/package/@polkadot/portal)
+[![travis](https://img.shields.io/travis/polkadot-js/portal.svg?style=flat-square)](https://travis-ci.org/polkadot-js/portal)
+[![greenkeeper](https://img.shields.io/badge/greenkeeper-enabled-brightgreen.svg?style=flat-square)](https://greenkeeper.io/)
+[![dependency](https://img.shields.io/david/polkadot-js/portal.svg?style=flat-square)](https://david-dm.org/polkadot-js/portal)
+[![devDependency](https://img.shields.io/david/dev/polkadot-js/portal.svg?style=flat-square)](https://david-dm.org/polkadot-js/portal#info=devDependencies)
+
+# @polkadot/portal
+
+A Portal into the Polkadot network. Provides a view and interaction layer from a browser.

flow-typed/i18next-browser-languagedetector.js

@@ -0,0 +1,5 @@
+// @flow
+
+declare module 'i18next-browser-languagedetector' {
+  declare module.exports: {}
+}

flow-typed/i18next-xhr-backend.js

@@ -0,0 +1,5 @@
+// @flow
+
+declare module 'i18next-xhr-backend' {
+  declare module.exports: {}
+}

flow-typed/i18next.js

@@ -0,0 +1,23 @@
+// @flow
+
+declare type I18Next$Config = {
+  fallbackLng?: string,
+  ns?: Array<string>,
+  defaultNS?: string,
+  debug?: boolean,
+  interpolation?: {
+    escapeValue: boolean
+  },
+  react?: {
+    wait: boolean
+  }
+};
+
+declare module 'i18next' {
+  declare type I18Next = {
+    use: (any) => I18Next,
+    init: (I18Next$Config) => I18Next
+  };
+
+  declare module.exports: I18Next
+}

flow-typed/react-i18next.js

@@ -0,0 +1,18 @@
+// @flow
+
+declare type I18Next$Translate$Config = {
+  defaultValue: string,
+  replace?: {
+    [string]: string
+  }
+};
+
+declare type I18Next$Translate = (key: string, config: I18Next$Translate$Config) => string;
+
+declare module 'react-i18next' {
+  declare module.exports: {
+    I18nextProvider: React$StatelessFunctionalComponent<*>,
+    reactI18nextModule: {},
+    translate: (context: string | Array<string>) => (component: React$Component<*> | React$StatelessFunctionalComponent<*>) => React$StatelessFunctionalComponent<*>
+  }
+}

flow-typed/react-remarkable.js

@@ -0,0 +1,5 @@
+// @flow
+
+declare module 'react-remarkable' {
+  declare module.exports: React$StatelessFunctionalComponent<*>
+}

jest.config.js

@@ -0,0 +1 @@
+module.exports = require('@polkadot/dev/config/jest');

lerna.json

@@ -0,0 +1,14 @@
+{
+  "lerna": "2.5.1",
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "command": {
+    "publish": {
+      "allowBranch": "master"
+    }
+  },
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.1.0"
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "version": "0.1.0",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "cd packages/portal && react-scripts build",
+    "check": "eslint packages && flow check",
+    "start": "cd packages/portal && react-scripts start",
+    "test": "jest --coverage"
+  },
+  "dependencies": {
+    "@polkadot/portal": "^0.1.0"
+  },
+  "devDependencies": {
+    "@polkadot/dev": "^0.17.8",
+    "lerna": "^2.5.1",
+    "react-scripts": "^2.0.0-next.b2fd8db8"
+  },
+  "browserslist": {
+    "development": [
+      "last 2 chrome versions",
+      "last 2 firefox versions",
+      "last 2 edge versions"
+    ],
+    "production": [
+      ">1%",
+      "last 4 versions",
+      "Firefox ESR",
+      "not ie < 11"
+    ]
+  }
+}

packages/content-testing/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@polkadot/content-testing",
+  "version": "0.1.0",
+  "main": "src/index.js",
+  "repository": "https://github.com/polkadot-js/portal.git",
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "license": "ISC",
+  "private": true,
+  "scripts": {
+    "build": "react-scripts build",
+    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
+    "start": "react-scripts start",
+    "test": "react-scripts test --env=jsdom --coverage"
+  },
+  "devDependencies": {
+    "@polkadot/rx-react": "^0.2.2",
+    "@polkadot/ui-react": "^0.9.10",
+    "@polkadot/util": "^0.18.6",
+    "@polkadot/util-keyring": "^0.18.6",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "semantic-ui-css": "^2.3.1",
+    "semantic-ui-react": "^0.79.1"
+  }
+}

packages/content-testing/src/Body/Body.css

@@ -0,0 +1,13 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.testing--Body {
+  padding: 0;
+}
+
+.testing--Body-BlockNumber {
+  margin-bottom: 1rem;
+  opacity: 0.5;
+  text-align: right;
+}

packages/content-testing/src/Body/index.js

@@ -0,0 +1,78 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps } from '@polkadot/portal/types';
+
+import './Body.css';
+
+import React from 'react';
+// import { Observable } from 'rxjs/Observable';
+// import { from as fromObservable } from 'rxjs/observable/from';
+import Input from 'semantic-ui-react/dist/es/elements/Input';
+import Label from 'semantic-ui-react/dist/es/elements/Label';
+import Balance from '@polkadot/rx-react/Balance';
+import BlockNumber from '@polkadot/rx-react/BlockNumber';
+import ContextProvider from '@polkadot/rx-react/ContextProvider';
+import withObservableParams from '@polkadot/rx-react/with/observableParams';
+
+import InputAddress from '../InputAddress';
+import addrRecipient from '../subject/addrRecipient';
+import addrSender from '../subject/addrSender';
+
+type Props = BaseProps & {};
+
+function publicMap (pair: KeyringPair): Uint8Array {
+  return pair.publicKey();
+}
+
+const RecipientBalance = withObservableParams(Balance, addrRecipient, publicMap);
+const SenderBalance = withObservableParams(Balance, addrSender, publicMap);
+
+export default function Body ({ className, style }: Props) {
+  return (
+    <ContextProvider>
+      <div
+        className={['testing--Body', className].join(' ')}
+        style={style}
+      >
+        <BlockNumber
+          className='testing--Body-BlockNumber'
+          label='best block #'
+        />
+
+        <div>
+          <Label>using the selected account</Label>
+          <InputAddress
+            placeholder='0x...'
+            subject={addrSender}
+          />
+        </div>
+
+        <div>
+          <Label>with an available balance of</Label>
+          <SenderBalance className='ui disabled dropdown selection' />
+        </div>
+
+        <div>
+          <Label>send an amount of</Label>
+          <Input />
+        </div>
+
+        <div>
+          <Label>to the recipient</Label>
+          <InputAddress
+            placeholder='0x...'
+            subject={addrRecipient}
+          />
+        </div>
+
+        <div>
+          <Label>with an available balance of</Label>
+          <RecipientBalance className='ui disabled dropdown selection' />
+        </div>
+      </div>
+    </ContextProvider>
+  );
+}

packages/content-testing/src/InputAddress/InputAddress.css

@@ -0,0 +1,9 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.ui--InputAddress {}
+
+.ui--InputAddress > .text {
+  width: 100%;
+}

packages/content-testing/src/InputAddress/PairDisplay.css

@@ -0,0 +1,32 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.ui--InputyAddress-PairDisplay {
+  position: relative;
+  white-space: nowrap;
+}
+
+.ui--InputyAddress-PairDisplay-icon {
+  position: absolute;
+  top: -9px;
+  left: 0;
+}
+
+.ui--InputyAddress-PairDisplay-address,
+.ui--InputyAddress-PairDisplay-name {
+  display: inline-block;
+}
+
+.ui--InputyAddress-PairDisplay-address {
+  font-family: monospace;
+  margin-left: 1rem;
+  opacity: 0.5;
+  position: absolute;
+  right: 0;
+}
+
+.ui--InputyAddress-PairDisplay-name {
+  margin-left: 3rem;
+  text-transform: uppercase;
+}

packages/content-testing/src/InputAddress/PairDisplay.js

@@ -0,0 +1,40 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps } from '@polkadot/portal/types';
+import type { KeyringPair } from '@poladot/util-keyring/types';
+
+import './PairDisplay.css';
+
+import React from 'react';
+import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
+import u8aToHex from '@polkadot/util/u8a/toHex';
+
+type Props = BaseProps & {
+  pair: KeyringPair
+};
+
+export default function PairDisplay ({ className, name, pair, style }: Props): React$Node {
+  const publicKey = pair.publicKey();
+
+  return (
+    <div
+      className={['ui--InputyAddress-PairDisplay', className].join(' ')}
+      style={style}
+    >
+      <IdentityIcon
+        address={publicKey}
+        className='ui--InputyAddress-PairDisplay-icon'
+        size={32}
+      />
+      <div className='ui--InputyAddress-PairDisplay-name'>
+        {name}
+      </div>
+      <div className='ui--InputyAddress-PairDisplay-address'>
+        {u8aToHex(publicKey)}
+      </div>
+    </div>
+  );
+}

packages/content-testing/src/InputAddress/index.js

@@ -0,0 +1,50 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps } from '@polkadot/portal/types';
+
+import './InputAddress.css';
+
+import React from 'react';
+import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
+
+import PairDisplay from './PairDisplay';
+import keyring from '../keyring';
+
+type Props = BaseProps & {
+  subject: rxjs$Subject
+};
+
+const testOptions = Object.keys(keyring).map((name) => ({
+  text: (
+    <PairDisplay
+      key={name}
+      name={name}
+      pair={keyring[name]}
+    />
+  ),
+  value: name
+}));
+
+export default function InputAddress (_props: Props): React$Node {
+  const props = Object.assign({}, _props, {
+    className: ['ui--InputAddress', _props.className].join(' ')
+  });
+  const onChange = (_, { value }) => {
+    if (_props.subject) {
+      _props.subject.next(keyring[value]);
+    }
+  };
+
+  return (
+    <Dropdown
+      search
+      selection
+      options={testOptions}
+      onChange={onChange}
+      {...props}
+    />
+  );
+}

packages/content-testing/src/index.js

@@ -0,0 +1,10 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import 'semantic-ui-css/semantic.min.css';
+
+import Body from './Body';
+
+export default Body;

packages/content-testing/src/keyring.js

@@ -0,0 +1,10 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import testKeyring from '@polkadot/util-keyring/testing';
+
+const keyring = testKeyring();
+
+export default keyring;

packages/content-testing/src/subject/addr.js

@@ -0,0 +1,10 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+
+export default function addr () {
+  return new ReplaySubject(1);
+}

packages/content-testing/src/subject/addrRecipient.js

@@ -0,0 +1,10 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import addr from './addr';
+
+const subject = addr();
+
+export default subject;

packages/content-testing/src/subject/addrSender.js

@@ -0,0 +1,10 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import addr from './addr';
+
+const subject = addr();
+
+export default subject;

packages/portal/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

packages/portal/LICENSE

@@ -0,0 +1,15 @@
+ISC License (ISC)
+
+Copyright 2017-2018 Jaco Greeff <jacogr@gmail.com>
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

packages/portal/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@polkadot/portal",
+  "version": "0.1.0",
+  "description": "A Portal into the Polkadot network",
+  "main": "src/index.js",
+  "repository": "https://github.com/polkadot-js/portal.git",
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "license": "ISC",
+  "private": false,
+  "scripts": {
+    "build": "react-scripts build",
+    "check": "stylelint 'src/**/*.css' && eslint src && flow check",
+    "start": "react-scripts start",
+    "test": "react-scripts test --env=jsdom --coverage"
+  },
+  "devDependencies": {
+    "@polkadot/content-testing": "^0.1.0",
+    "@polkadot/ui-react": "^0.9.10",
+    "i18next": "^11.1.1",
+    "i18next-browser-languagedetector": "^2.2.0",
+    "i18next-xhr-backend": "^1.5.1",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "react-i18next": "^7.5.1",
+    "react-remarkable": "^1.1.3",
+    "react-router-dom": "^4.2.2",
+    "semantic-ui-css": "^2.3.1",
+    "semantic-ui-react": "^0.79.1"
+  },
+  "dependencies": {}
+}

packages/portal/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <title>Polkadot Portal</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>

packages/portal/public/locales/en/portal.json

@@ -0,0 +1 @@
+{}

packages/portal/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/portal/src/App/App.css

@@ -0,0 +1,17 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.portal--App {
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+}
+
+.portal--App-column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-grow: 1;
+  overflow-y: auto;
+}

packages/portal/src/App/App.spec.js

@@ -0,0 +1,17 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './index';
+
+describe('App', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+
+    ReactDOM.render(<App />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});

packages/portal/src/App/index.js

@@ -0,0 +1,30 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps } from '../types';
+
+import './App.css';
+
+import React from 'react';
+import { translate } from 'react-i18next';
+
+import Content from '../Content';
+import SideBar from '../SideBar';
+
+type Props = BaseProps & {};
+
+export default translate(['portal'])(
+  function App ({ className, style }: Props) {
+    return (
+      <div
+        className={['portal--App', className].join(' ')}
+        style={style}
+      >
+        <SideBar className='portal--App-column' />
+        <Content className='portal--App-column' />
+      </div>
+    );
+  }
+);

packages/portal/src/Content/Content.css

@@ -0,0 +1,9 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.portal--Content {
+  padding: 1em;
+  text-align: left;
+  width: 100%;
+}

packages/portal/src/Content/index.js

@@ -0,0 +1,38 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps } from '../types';
+
+import './Content.css';
+
+import React from 'react';
+import { translate } from 'react-i18next';
+import { Route } from 'react-router-dom';
+
+import routes from '../routes';
+
+type Props = BaseProps & {};
+
+export default translate(['portal'])(
+  function Content ({ className, style }: Props) {
+    return (
+      <div
+        className={['portal--Content', className].join(' ')}
+        style={style}
+      >
+        {
+          routes.map(({ component, isExact, key, path }) => (
+            <Route
+              component={component}
+              exact={isExact}
+              key={key}
+              path={path}
+            />
+          ))
+        }
+      </div>
+    );
+  }
+);

packages/portal/src/SideBar/Item.css

@@ -0,0 +1,13 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.portal--SideBar-Item {}
+
+.portal--SideBar-Item-NavLink {
+  white-space: nowrap;
+}
+
+.portal--SideBar-Item-NavLink-active {
+  color: inherit;
+}

packages/portal/src/SideBar/Item.js

@@ -0,0 +1,34 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps, Routes } from '../types';
+
+import './Item.css';
+
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import Icon from 'semantic-ui-react/dist/es/elements/Icon';
+import Menu from 'semantic-ui-react/dist/es/collections/Menu';
+
+type Props = BaseProps & Routes & {};
+
+export default function Item ({ className, i18n, icon, isExact, name, path, style, t }: Props) {
+  return (
+    <Menu.Item
+      className={['portal--SideBar-Item', className].join(' ')}
+      name={name}
+      style={style}
+    >
+      <NavLink
+        activeClassName='portal--SideBar-Item-NavLink-active'
+        className='portal--SideBar-Item-NavLink'
+        exact={isExact}
+        to={path}
+      >
+        <Icon name={icon} /> {t(`sidebar.${name}`, i18n)}
+      </NavLink>
+    </Menu.Item>
+  );
+}

packages/portal/src/SideBar/SideBar.css

@@ -0,0 +1,10 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.portal--SideBar {
+  flex-shrink: 0;
+  min-width: 12em;
+  padding: 0.75em;
+  text-align: left;
+}

packages/portal/src/SideBar/index.js

@@ -0,0 +1,43 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps } from '../types';
+
+import './SideBar.css';
+
+import React from 'react';
+import { translate } from 'react-i18next';
+import Menu from 'semantic-ui-react/dist/es/collections/Menu';
+
+import routes from '../routes';
+import Item from './Item';
+
+type Props = BaseProps & {};
+
+export default translate(['portal'])(
+  function SideBar ({ className, style, t }: Props) {
+    return (
+      <div
+        className={['portal--SideBar', className].join(' ')}
+        style={style}
+      >
+        <Menu
+          secondary
+          vertical
+        >
+          {
+            routes.map((props) => (
+              <Item
+                name={props.key}
+                t={t}
+                {...props}
+              />
+            ))
+          }
+        </Menu>
+      </div>
+    );
+  }
+);

packages/portal/src/i18n.js

@@ -0,0 +1,30 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-xhr-backend';
+import { reactI18nextModule } from 'react-i18next';
+
+const CONFIG = {
+  fallbackLng: 'en',
+  ns: ['portal'],
+  defaultNS: 'portal',
+  debug: true,
+  interpolation: {
+    escapeValue: false
+  },
+  react: {
+    wait: true
+  }
+};
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(reactI18nextModule)
+  .init(CONFIG);
+
+export default i18n;

packages/portal/src/index.css

@@ -0,0 +1,20 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;  /*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
+  padding: 0;
+}
+
+#root {
+  color: #333;
+  font-family: sans-serif;
+  height: 100%;
+}

packages/portal/src/index.js

@@ -0,0 +1,26 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import 'semantic-ui-css/semantic.min.css';
+import './semantic.css';
+import './index.css';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { I18nextProvider } from 'react-i18next';
+import { HashRouter } from 'react-router-dom';
+
+import i18n from './i18n';
+import App from './App';
+
+ReactDOM.render(
+  <I18nextProvider i18n={i18n}>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </I18nextProvider>,
+  // flowlint-next-line unclear-type:off
+  ((document.getElementById('root'): any): Element)
+);

packages/portal/src/routes/index.js

@@ -0,0 +1,16 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { Routes } from '../types';
+
+// import accounts from './accounts';
+// import home from './home';
+// import settings from './settings';
+import testing from './testing';
+
+export default (([].concat(
+  testing
+  // , home, accounts, settings
+)): Routes);

packages/portal/src/routes/testing.js

@@ -0,0 +1,22 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { Routes } from '../types';
+
+import Testing from '@polkadot/content-testing';
+
+export default ([
+  {
+    component: Testing,
+    i18n: {
+      defaultValue: 'Testing'
+    },
+    icon: 'braille',
+    isExact: true,
+    isHidden: false,
+    key: 'testing',
+    path: '/'
+  }
+]: Routes);

packages/portal/src/semantic.css

@@ -0,0 +1,33 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.ui.dropdown {
+  /* from .ui.fluid.dropdown */
+  display: block;
+  min-width: 0;
+  width: 100%;
+}
+
+.ui.dropdown,
+.ui.input {
+  /* bottom margin for all inputs */
+  margin-bottom: 0.5rem;
+}
+
+.ui.input {
+  /* from .ui.fluid.input */
+  display: flex;
+}
+
+.ui.input > input {
+  /* from .ui.fluid.input > input */
+  width: 0;
+}
+
+.ui.label {
+  background: transparent;
+  font-weight: normal;
+  position: relative;
+  z-index: 1;
+}

packages/portal/src/types.js

@@ -0,0 +1,24 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+export type BaseProps = {
+  className?: string,
+  style?: {
+    [string]: string
+  },
+  t: I18Next$Translate
+};
+
+export type Route = {
+  component: React$StatelessFunctionalComponent<*>,
+  i18n: I18Nex$tTranslate$Config,
+  icon: React$StatelessFunctionalComponent<*>,
+  isExact: boolean,
+  isHidden: boolean,
+  name: string,
+  path: string
+};
+
+export type Routes = Array<Route>;