Update rx-react/rx-api packages (16.3 compliant) (#4)

* Update rx-react/rx-api packages (16.3 compliant)

* onChange & subject is optional

* Cleanup translations

* Clean up logging

* Upgrades

* Use yarn on Travis

* install -> add

* No lerna global install

* Ignore engines

* Update dev

* Final dependency bumps

* Simplify travis.yml more

.travis.yml

@@ -1,13 +1,9 @@
 language: node_js
 node_js:
-  - "8"
+  - "9"
 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

flow-typed/react-i18next.js

@@ -14,6 +14,6 @@ declare module 'react-i18next' {
     I18nextProvider: React$StatelessFunctionalComponent<*>,
     Trans: React$StatelessFunctionalComponent<*>,
     reactI18nextModule: {},
-    translate: (context: string | Array<string>) => (component: React$Component<*> | React$StatelessFunctionalComponent<*>) => React$StatelessFunctionalComponent<*>
+    translate: (context: string | Array<string>) => (Component: React$ComponentType<*>) => React$StatelessFunctionalComponent<*>
   }
 }

flow-typed/react-router.js

@@ -0,0 +1,7 @@
+// @flow
+
+declare module 'react-router' {
+  declare module.exports: {
+    withRouter: (Component: React$ComponentType<*>) => React$StatelessFunctionalComponent<*>;
+  }
+}

package.json

@@ -14,9 +14,9 @@
     "@polkadot/portal": "^0.1.0"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.17.9",
+    "@polkadot/dev": "^0.17.11",
     "lerna": "^2.5.1",
-    "react-scripts": "^2.0.0-next.b2fd8db8"
+    "react-scripts": "2.0.0-next.66cc7a90"
   },
   "browserslist": {
     "development": [

packages/app-explorer/package.json

@@ -16,7 +16,7 @@
     "@polkadot/primitives": "^0.10.3",
     "@polkadot/primitives-codec": "^0.10.3",
     "@polkadot/primitives-json": "^0.10.3",
-    "@polkadot/rx-react": "^0.3.6",
+    "@polkadot/rx-react": "^0.4.6",
     "@polkadot/util": "^0.19.2",
     "@polkadot/util-crypto": "^0.19.2",
     "react": "^16.3.1",

packages/app-explorer/src/App/index.js

@@ -8,9 +8,9 @@ import type { BaseProps } from '@polkadot/portal/types';
 import './App.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import BestNumber from '@polkadot/rx-react/BestNumber';
 
+import translate from '../translate';
 import BestHash from '../BestHash';
 import BlockHeaders from '../BlockHeaders';
 
@@ -34,4 +34,4 @@ function App ({ className, style, t }: Props): React$Node {
   );
 }
 
-export default translate(['explorer'])(App);
+export default translate(App);

packages/app-explorer/src/BestHash.js

@@ -7,11 +7,12 @@ import type { Header } from '@polkadot/primitives/header';
 import type { BaseProps } from './types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import headerHash from '@polkadot/primitives-codec/header/hash';
 import withApiCall from '@polkadot/rx-react/with/apiCall';
 import u8aToHexShort from '@polkadot/util/u8a/toHexShort';
 
+import translate from './translate';
+
 type Props = BaseProps & {
   value?: Header
 };
@@ -31,10 +32,9 @@ function BestHash ({ className, style, value }: Props): React$Node {
   );
 }
 
-export default withApiCall(
-  translate(['explorer'])(BestHash),
-  {
+export default translate(
+  withApiCall({
     method: 'newHead',
     section: 'chain'
-  }
+  })(BestHash)
 );

packages/app-explorer/src/BlockHeader/index.js

@@ -9,10 +9,11 @@ import type { BaseProps } from '../types';
 import './BlockHeader.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import headerHash from '@polkadot/primitives-codec/header/hash';
 import u8aToHex from '@polkadot/util/u8a/toHex';
 
+import translate from '../translate';
+
 type Props = BaseProps & {
   label?: string,
   value?: Header
@@ -65,4 +66,4 @@ function BlockHeader ({ className, label = '#', value, style }: Props): React$No
   );
 }
 
-export default translate(['explorer'])(BlockHeader);
+export default translate(BlockHeader);

packages/app-explorer/src/BlockHeaders/index.js

@@ -7,9 +7,9 @@ import type { Header } from '@polkadot/primitives/header';
 import type { BaseProps } from '../types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import withApiCall from '@polkadot/rx-react/with/apiCall';
 
+import translate from '../translate';
 import BlockHeader from '../BlockHeader';
 import { blockHeaders } from '../subjects';
 import transform from './transform';
@@ -36,14 +36,15 @@ function BlockHeaders ({ className, style, value }: Props): React$Node {
   );
 }
 
-export default withApiCall(
-  translate(['explorer'])(BlockHeaders),
-  {
-    method: 'newHead',
-    section: 'chain'
-  },
-  {
-    subject: blockHeaders,
-    transform
-  }
+export default translate(
+  withApiCall(
+    {
+      method: 'newHead',
+      section: 'chain'
+    },
+    {
+      subject: blockHeaders,
+      transform
+    }
+  )(BlockHeaders)
 );

packages/app-explorer/src/translate.js

@@ -0,0 +1,8 @@
+// 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 { translate } from 'react-i18next';
+
+export default translate(['explorer']);

packages/app-extrinsics/package.json

@@ -13,11 +13,10 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.3.6",
+    "@polkadot/rx-react": "^0.4.6",
     "@polkadot/ui-react": "^0.9.11",
     "@polkadot/util": "^0.19.2",
     "@polkadot/util-keyring": "^0.19.2",
-    "prop-types": "^15.6.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "react-i18next": "^7.5.1",

packages/app-extrinsics/src/Account.js

@@ -6,11 +6,11 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 import Balance from '@polkadot/rx-react/Balance';
 import withObservableParams from '@polkadot/rx-react/with/observableParams';
 
+import translate from './translate';
 import InputAddress from './InputAddress';
 
 type Props = BaseProps & {
@@ -19,7 +19,7 @@ type Props = BaseProps & {
 };
 
 function Account ({ className, label, subject, style, t }: Props): React$Node {
-  const AccountBalance = withObservableParams(Balance, subject);
+  const AccountBalance = withObservableParams(subject)(Balance);
 
   return (
     <div
@@ -48,4 +48,4 @@ function Account ({ className, label, subject, style, t }: Props): React$Node {
   );
 }
 
-export default translate(['extrinsics'])(Account);
+export default translate(Account);

packages/app-extrinsics/src/App.js

@@ -6,13 +6,13 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 
 import CallDisplay from './CallDisplay';
 import CallSelect from './CallSelect';
 import Nonce from './Nonce';
 import Sender from './Sender';
 import Signer from './Signer';
+import translate from './translate';
 
 type Props = BaseProps & {};
 
@@ -31,4 +31,4 @@ function App ({ className, style }: Props): React$Node {
   );
 }
 
-export default translate(['extrinsics'])(App);
+export default translate(App);

packages/app-extrinsics/src/CallDisplay/Error.js

@@ -8,7 +8,8 @@ import type { BaseProps } from '../types';
 import './CallDisplay.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
+
+import translate from '../translate';
 
 function ErrorDisplay ({ className, style, t }: BaseProps): React$Node {
   return (
@@ -23,4 +24,4 @@ function ErrorDisplay ({ className, style, t }: BaseProps): React$Node {
   );
 }
 
-export default translate(['extrinsics'])(ErrorDisplay);
+export default translate(ErrorDisplay);

packages/app-extrinsics/src/CallDisplay/index.js

@@ -8,10 +8,10 @@ import type { BaseProps } from '../types';
 import './CallDisplay.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import Button from 'semantic-ui-react/dist/es/elements/Button';
 import withObservable from '@polkadot/rx-react/with/observable';
 
+import translate from '../translate';
 import StakingStake from '../Staking/Stake';
 import StakingTransfer from '../Staking/Transfer';
 import StakingUnstake from '../Staking/Unstake';
@@ -64,7 +64,6 @@ function CallDisplay ({ className, style, t, value }: Props): React$Node {
   );
 }
 
-export default withObservable(
-  translate(['extrinsics'])(CallDisplay),
-  extrinsicName
+export default translate(
+  withObservable(extrinsicName)(CallDisplay)
 );

packages/app-extrinsics/src/CallSelect/index.js

@@ -8,10 +8,10 @@ import type { BaseProps } from '../types';
 import './CallSelect.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 
+import translate from '../translate';
 import { extrinsicName } from '../subjects';
 import extrinsics from '../extrinsics';
 
@@ -62,4 +62,4 @@ function CallSelect ({ className, style, t }: Props): React$Node {
   );
 }
 
-export default translate(['extrinsics'])(CallSelect);
+export default translate(CallSelect);

packages/app-extrinsics/src/InputAddress/PairDisplay.js

@@ -4,20 +4,22 @@
 // @flow
 
 import type { KeyringPair } from '@polkadot/util-keyring/types';
-import type { BaseProps } from '../types';
 
 import './PairDisplay.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import u8aToHex from '@polkadot/util/u8a/toHex';
 
-type Props = BaseProps & {
-  pair: KeyringPair
+type Props = {
+  className?: string,
+  pair: KeyringPair,
+  style?: {
+    [string]: string
+  }
 };
 
-function PairDisplay ({ className, pair, style }: Props): React$Node {
+export default function PairDisplay ({ className, pair, style }: Props): React$Node {
   const publicKey = pair.publicKey();
   const { name } = pair.getMeta();
 
@@ -40,5 +42,3 @@ function PairDisplay ({ className, pair, style }: Props): React$Node {
     </div>
   );
 }
-
-export default translate(['extrinsics'])(PairDisplay);

packages/app-extrinsics/src/InputAddress/index.js

@@ -3,40 +3,42 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseProps } from '../types';
-
 import './InputAddress.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
+import hexToU8a from '@polkadot/util/hex/toU8a';
+import u8aToHex from '@polkadot/util/u8a/toHex';
 
 import PairDisplay from './PairDisplay';
 import keyring from '../keyring';
 
-type Props = BaseProps & {
-  subject: rxjs$Subject<*>
+type Props = {
+  className?: string,
+  onChange?: (event: SyntheticEvent<*>, value: Uint8Array) => void,
+  style?: {
+    [string]: string
+  },
+  subject?: rxjs$Subject<*>
 };
 
-const options = keyring.getPairs().map((pair) => {
-  const publicKey = pair.publicKey();
-
-  return {
-    text: (
-      <PairDisplay
-        key={publicKey.toString()}
-        pair={pair}
-      />
-    ),
-    value: publicKey
-  };
-});
+const options = keyring.getPairs().map((pair) => ({
+  text: (
+    <PairDisplay pair={pair} />
+  ),
+  value: u8aToHex(pair.publicKey())
+}));
 
-function InputAddress (props: Props): React$Node {
-  // eslint-disable-next-line no-unused-vars
+export default function InputAddress (props: Props): React$Node {
   const onChange = (event: SyntheticEvent<*>, { value }): void => {
+    const u8a = hexToU8a(value);
+
     if (props.subject) {
-      props.subject.next(value);
+      props.subject.next(u8a);
+    }
+
+    if (props.onChange) {
+      props.onChange(event, u8a);
     }
   };
 
@@ -50,5 +52,3 @@ function InputAddress (props: Props): React$Node {
     />
   );
 }
-
-export default translate(['extrinsics'])(InputAddress);

packages/app-extrinsics/src/Nonce.js

@@ -6,16 +6,16 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 import RxNonce from '@polkadot/rx-react/Nonce';
 import withObservableParams from '@polkadot/rx-react/with/observableParams';
 
+import translate from './translate';
 import { senderAddr, senderIndex } from './subjects';
 
 type Props = BaseProps & {};
 
-const SenderNonce = withObservableParams(RxNonce, senderAddr);
+const SenderNonce = withObservableParams(senderAddr)(RxNonce);
 
 function Nonce ({ className, style, t }: Props): React$Node {
   return (
@@ -39,4 +39,4 @@ function Nonce ({ className, style, t }: Props): React$Node {
   );
 }
 
-export default translate(['extrinsics'])(Nonce);
+export default translate(Nonce);

packages/app-extrinsics/src/Recipient.js

@@ -6,8 +6,8 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 
+import translate from './translate';
 import Account from './Account';
 import { recipientAddr } from './subjects';
 
@@ -26,4 +26,4 @@ function Recipient (props: Props): React$Node {
   );
 }
 
-export default translate(['extrinsics'])(Recipient);
+export default translate(Recipient);

packages/app-extrinsics/src/Sender.js

@@ -6,10 +6,10 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 
 import Account from './Account';
 import { senderAddr } from './subjects';
+import translate from './translate';
 
 type Props = BaseProps & {};
 
@@ -26,4 +26,4 @@ function Sender (props: Props): React$Node {
   );
 }
 
-export default translate(['extrinsics'])(Sender);
+export default translate(Sender);

packages/app-extrinsics/src/Signer/Extrinsic.js

@@ -6,12 +6,14 @@
 import type { BaseProps, QueueTx } from '../types';
 
 import React from 'react';
-import { Trans, translate } from 'react-i18next';
+import { Trans } from 'react-i18next';
 import Modal from 'semantic-ui-react/dist/es/modules/Modal';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import u8aToHex from '@polkadot/util/u8a/toHex';
 import u8aToHexShort from '@polkadot/util/u8a/toHexShort';
 
+import translate from '../translate';
+
 type Props = BaseProps & {
   value: QueueTx
 };
@@ -47,4 +49,4 @@ function Extrinsic ({ className, style, t, value: { message, method, publicKey }
   );
 }
 
-export default translate(['extrinsics'])(Extrinsic);
+export default translate(Extrinsic);

packages/app-extrinsics/src/Signer/index.js

@@ -3,26 +3,27 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseContext, BaseProps, QueueTx } from '../types';
+import type { ApiProps } from '@polkadot/rx-react/types';
+import type { BaseProps, QueueTx } from '../types';
 
 import './Signer.css';
 
-import PropTypes from 'prop-types';
 import React from 'react';
-import { translate } from 'react-i18next';
 import Button from 'semantic-ui-react/dist/es/elements/Button';
 import Modal from 'semantic-ui-react/dist/es/modules/Modal';
+import withApi from '@polkadot/rx-react/with/api';
 import withObservable from '@polkadot/rx-react/with/observable';
 
 import { queueTx } from '../subjects';
+import translate from '../translate';
 import Extrinsic from './Extrinsic';
 import submitExtrinsic from './submit';
 
-type Props = BaseProps & {
+type Props = BaseProps & ApiProps & {
   value?: QueueTx
 };
 
-function Signer ({ className, style, t, value }: Props, { api }: BaseContext): React$Node {
+function Signer ({ api, className, style, t, value }: Props): React$Node {
   if (!value) {
     return null;
   }
@@ -66,11 +67,8 @@ function Signer ({ className, style, t, value }: Props, { api }: BaseContext): R
   );
 }
 
-Signer.contextTypes = {
-  api: PropTypes.object
-};
-
-export default withObservable(
-  translate(['extrinsics'])(Signer),
-  queueTx
+export default translate(
+  withApi(
+    withObservable(queueTx)(Signer)
+  )
 );

packages/app-extrinsics/src/Staking/Stake/index.js

@@ -6,8 +6,8 @@
 import type { BaseProps } from '../../types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 
+import translate from '../../translate';
 import getValues from './getValues';
 
 type Props = BaseProps & {};
@@ -23,4 +23,4 @@ function StakingStake ({ className, style }: Props): React$Node {
 
 StakingStake.getValues = getValues;
 
-export default translate(['extrinsics'])(StakingStake);
+export default translate(StakingStake);

packages/app-extrinsics/src/Staking/Transfer/Amount.js

@@ -7,10 +7,10 @@ import type { BaseProps } from '../../types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { translate } from 'react-i18next';
 import Input from 'semantic-ui-react/dist/es/elements/Input';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 
+import translate from '../../translate';
 import { amount } from './subjects';
 
 type Props = BaseProps & {};
@@ -36,7 +36,7 @@ function Amount ({ className, style, t }: Props): React$Node {
         </Label>
         <Input
           defaultValue={1}
-          min={0}
+          min={1}
           onChange={onChange}
           type='number'
         />
@@ -45,4 +45,4 @@ function Amount ({ className, style, t }: Props): React$Node {
   );
 }
 
-export default translate(['extrinsics'])(Amount);
+export default translate(Amount);

packages/app-extrinsics/src/Staking/Transfer/index.js

@@ -6,8 +6,8 @@
 import type { BaseProps } from '../../types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 
+import translate from '../../translate';
 import Recipient from '../../Recipient';
 import Amount from './Amount';
 import getValues from './getValues';
@@ -28,4 +28,4 @@ function StakingTransfer ({ className, style }: Props): React$Node {
 
 StakingTransfer.getValues = getValues;
 
-export default translate(['extrinsics'])(StakingTransfer);
+export default translate(StakingTransfer);

packages/app-extrinsics/src/Staking/Transfer/subjects.js

@@ -6,4 +6,4 @@
 import BN from 'bn.js';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-export const amount = new BehaviorSubject(new BN(0));
+export const amount = new BehaviorSubject(new BN(1));

packages/app-extrinsics/src/Staking/Unstake/index.js

@@ -6,8 +6,8 @@
 import type { BaseProps } from '../../types';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 
+import translate from '../../translate';
 import getValues from './getValues';
 
 type Props = BaseProps & {};
@@ -23,4 +23,4 @@ function StakingUnstake ({ className, style }: Props): React$Node {
 
 StakingUnstake.getValues = getValues;
 
-export default translate(['extrinsics'])(StakingUnstake);
+export default translate(StakingUnstake);

packages/app-extrinsics/src/translate.js

@@ -0,0 +1,8 @@
+// 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 { translate } from 'react-i18next';
+
+export default translate(['extrinsics']);

packages/app-extrinsics/src/types.js

@@ -3,8 +3,6 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { RxApiInterface } from '@polkadot/rx-api/types';
-
 export type BaseProps = {
   className?: string,
   style?: {
@@ -13,10 +11,6 @@ export type BaseProps = {
   t: I18Next$Translate
 };
 
-export type BaseContext = {
-  api: RxApiInterface
-};
-
 export type QueueTx = {
   message: Uint8Array,
   method: string,

packages/portal/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@polkadot/app-explorer": "^0.1.0",
     "@polkadot/app-extrinsics": "^0.1.0",
-    "@polkadot/rx-react": "^0.3.6",
+    "@polkadot/rx-react": "^0.4.6",
     "@polkadot/ui-react": "^0.9.11",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",

packages/portal/src/App/index.js

@@ -8,15 +8,15 @@ import type { BaseProps } from '../types';
 import './App.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 
+import translate from '../translate';
 import Connecting from '../Connecting';
 import Content from '../Content';
 import SideBar from '../SideBar';
 
 type Props = BaseProps & {};
 
-function App ({ className, style }: Props) {
+function App ({ className, style }: Props): React$Node {
   return (
     <div
       className={['portal--App', className].join(' ')}
@@ -29,4 +29,4 @@ function App ({ className, style }: Props) {
   );
 }
 
-export default translate(['portal'])(App);
+export default translate(App);

packages/portal/src/Connecting/index.js

@@ -8,9 +8,10 @@ import type { BaseProps } from '../types';
 import './Connecting.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import withApiCall from '@polkadot/rx-react/with/apiCall';
 
+import translate from '../translate';
+
 type Props = BaseProps & {
   value: boolean
 };
@@ -34,9 +35,8 @@ function Connecting ({ className, style, value, t }: Props): React$Node {
   );
 }
 
-export default withApiCall(
-  translate(['portal'])(Connecting),
-  {
+export default translate(
+  withApiCall({
     method: 'isConnected'
-  }
+  })(Connecting)
 );

packages/portal/src/Content/index.js

@@ -3,19 +3,22 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { BaseContext, BaseProps } from '../types';
+import type { Location } from 'react-router-dom';
+import type { BaseProps } from '../types';
 
 import './Content.css';
 
-import PropTypes from 'prop-types';
 import React from 'react';
-import { translate } from 'react-i18next';
+import { withRouter } from 'react-router';
 
 import routing from '../routing';
+import translate from '../translate';
 
-type Props = BaseProps & {};
+type Props = BaseProps & {
+  location: Location
+};
 
-function Content ({ className, style }: Props, { router: { route: { location } } }: BaseContext) {
+function Content ({ className, location, style }: Props): React$Node {
   const app = location.pathname.slice(1) || routing.default;
 
   return (
@@ -31,9 +34,6 @@ function Content ({ className, style }: Props, { router: { route: { location } }
     </div>
   );
 }
-
-Content.contextTypes = {
-  router: PropTypes.object
-};
-
-export default translate(['portal'])(Content);
+export default translate(
+  withRouter(Content)
+);

packages/portal/src/NotFound/index.js

@@ -8,9 +8,10 @@ import type { BaseProps } from '../types';
 import './NotFound.css';
 
 import React from 'react';
-import { translate } from 'react-i18next';
 
-function NotFound ({ className, style, t }: BaseProps) {
+import translate from '../translate';
+
+function NotFound ({ className, style, t }: BaseProps): React$Node {
   return (
     <div
       className={['portal--NotFound', className].join(' ')}
@@ -23,4 +24,4 @@ function NotFound ({ className, style, t }: BaseProps) {
   );
 }
 
-export default translate(['portal'])(NotFound);
+export default translate(NotFound);

packages/portal/src/SideBar/Item.js

@@ -14,7 +14,10 @@ import Menu from 'semantic-ui-react/dist/es/collections/Menu';
 
 type Props = BaseProps & Route & {};
 
-export default function Item ({ className, i18n, icon, isExact, name, path, style, t }: Props) {
+export default function Item ({ className, i18n, icon, isExact, name, path, style, t }: Props): React$Node {
+  // flowlint-next-line sketchy-null-string:off
+  const to = path || `/${name}`;
+
   return (
     <Menu.Item
       className={['portal--SideBar-Item', className].join(' ')}
@@ -25,8 +28,7 @@ export default function Item ({ className, i18n, icon, isExact, name, path, styl
         activeClassName='portal--SideBar-Item-NavLink-active'
         className='portal--SideBar-Item-NavLink'
         exact={isExact}
-        // flowlint-next-line sketchy-null-string:off
-        to={path || `/${name}`}
+        to={to}
       >
         <Icon name={icon} /> {t(`sidebar.${name}`, i18n)}
       </NavLink>

packages/portal/src/SideBar/index.js

@@ -8,15 +8,15 @@ 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 routing from '../routing';
+import translate from '../translate';
 import Item from './Item';
 
 type Props = BaseProps & {};
 
-function SideBar ({ className, style, t }: Props) {
+function SideBar ({ className, style, t }: Props): React$Node {
   return (
     <div
       className={['portal--SideBar', className].join(' ')}
@@ -40,4 +40,4 @@ function SideBar ({ className, style, t }: Props) {
   );
 }
 
-export default translate(['portal'])(SideBar);
+export default translate(SideBar);

packages/portal/src/index.js

@@ -11,7 +11,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { I18nextProvider } from 'react-i18next';
 import { HashRouter } from 'react-router-dom';
-import ContextProvider from '@polkadot/rx-react/ContextProvider';
+import Api from '@polkadot/rx-react/Api';
 
 import i18n from './i18n';
 
@@ -35,13 +35,13 @@ const Component = (() => {
 })();
 
 ReactDOM.render(
-  <I18nextProvider i18n={i18n}>
-    <ContextProvider>
+  <Api>
+    <I18nextProvider i18n={i18n}>
       <HashRouter>
         <Component />
       </HashRouter>
-    </ContextProvider>
-  </I18nextProvider>,
+    </I18nextProvider>
+  </Api>,
   // flowlint-next-line unclear-type:off
   ((document.getElementById('root'): any): Element)
 );

packages/portal/src/translate.js

@@ -0,0 +1,8 @@
+// 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 { translate } from 'react-i18next';
+
+export default translate(['portal']);

packages/portal/src/types.js

@@ -3,7 +3,6 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
-import type { Location } from 'react-router-dom';
 import type { RxApiInterface } from '@polkadot/rx-api/types';
 
 export type BaseProps = {