Connecting overlay

flow-typed/react-i18next.js

@@ -12,6 +12,7 @@ declare type I18Next$Translate = (key: string, config: I18Next$Translate$Config)
 declare module 'react-i18next' {
   declare module.exports: {
     I18nextProvider: React$StatelessFunctionalComponent<*>,
+    Trans: React$StatelessFunctionalComponent<*>,
     reactI18nextModule: {},
     translate: (context: string | Array<string>) => (component: React$Component<*> | React$StatelessFunctionalComponent<*>) => React$StatelessFunctionalComponent<*>
   }

packages/app-explorer/package.json

@@ -16,11 +16,12 @@
     "@polkadot/primitives": "^0.10.3",
     "@polkadot/primitives-codec": "^0.10.3",
     "@polkadot/primitives-json": "^0.10.3",
-    "@polkadot/rx-react": "^0.2.20",
+    "@polkadot/rx-react": "^0.3.6",
     "@polkadot/util": "^0.19.2",
     "@polkadot/util-crypto": "^0.19.2",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
+    "react-i18next": "^7.5.1",
     "semantic-ui-css": "^2.3.1",
     "semantic-ui-react": "^0.79.1"
   }

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

@@ -8,25 +8,30 @@ 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 BestHash from '../BestHash';
 import BlockHeaders from '../BlockHeaders';
 
 type Props = BaseProps & {};
 
-export default function App ({ className, style }: Props): React$Node {
+function App ({ className, style, t }: Props): React$Node {
   return (
     <div
       className={['explorer--App', className].join(' ')}
       style={style}
     >
       <BestNumber
         className='explorer--App-BestNumber'
-        label='best #'
+        label={t('app.bestNumber', {
+          defaultValue: 'best #'
+        })}
       />
       <BestHash className='explorer--App-BestHash' />
       <BlockHeaders />
     </div>
   );
 }
+
+export default translate(['explorer'])(App);

packages/app-explorer/src/BestHash.js

@@ -7,6 +7,7 @@ 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';
@@ -31,7 +32,7 @@ function BestHash ({ className, style, value }: Props): React$Node {
 }
 
 export default withApiCall(
-  BestHash,
+  translate(['explorer'])(BestHash),
   {
     method: 'newHead',
     section: 'chain'

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

@@ -9,6 +9,7 @@ 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';
 
@@ -17,7 +18,7 @@ type Props = BaseProps & {
   value?: Header
 };
 
-export default function BlockHeader ({ className, label = '#', value, style }: Props): React$Node {
+function BlockHeader ({ className, label = '#', value, style }: Props): React$Node {
   if (!value) {
     return null;
   }
@@ -63,3 +64,5 @@ export default function BlockHeader ({ className, label = '#', value, style }: P
     </div>
   );
 }
+
+export default translate(['explorer'])(BlockHeader);

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

@@ -7,6 +7,7 @@ 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 BlockHeader from '../BlockHeader';
@@ -36,7 +37,7 @@ function BlockHeaders ({ className, style, value }: Props): React$Node {
 }
 
 export default withApiCall(
-  BlockHeaders,
+  translate(['explorer'])(BlockHeaders),
   {
     method: 'newHead',
     section: 'chain'

packages/app-explorer/src/types.js

@@ -7,5 +7,6 @@ export type BaseProps = {
   className?: string,
   style?: {
     [string]: string
-  }
+  },
+  t: I18Next$Translate
 };

packages/app-extrinsics/package.json

@@ -13,13 +13,14 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.20",
-    "@polkadot/ui-react": "^0.9.10",
+    "@polkadot/rx-react": "^0.3.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",
     "semantic-ui-css": "^2.3.1",
     "semantic-ui-react": "^0.79.1"
   }

packages/app-extrinsics/src/Account.js

@@ -6,6 +6,7 @@
 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';
@@ -17,7 +18,7 @@ type Props = BaseProps & {
   subject: rxjs$BehaviorSubject<*>
 };
 
-export default function Account ({ className, label, subject, style }: Props): React$Node {
+function Account ({ className, label, subject, style, t }: Props): React$Node {
   const AccountBalance = withObservableParams(Balance, subject);
 
   return (
@@ -33,7 +34,11 @@ export default function Account ({ className, label, subject, style }: Props): R
         />
       </div>
       <div className='small'>
-        <Label>with an available balance of</Label>
+        <Label>
+          {t('account.balance', {
+            defaultValue: 'with an available balance of'
+          })}
+        </Label>
         <AccountBalance
           className='ui disabled dropdown selection'
           classNameUpdated='hasUpdated'
@@ -42,3 +47,5 @@ export default function Account ({ className, label, subject, style }: Props): R
     </div>
   );
 }
+
+export default translate(['extrinsics'])(Account);

packages/app-extrinsics/src/App.js

@@ -6,6 +6,7 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 
 import CallDisplay from './CallDisplay';
 import CallSelect from './CallSelect';
@@ -15,7 +16,7 @@ import Signer from './Signer';
 
 type Props = BaseProps & {};
 
-export default function App ({ className, style }: Props) {
+function App ({ className, style }: Props): React$Node {
   return (
     <div
       className={['extrinsics--App', className].join(' ')}
@@ -29,3 +30,5 @@ export default function App ({ className, style }: Props) {
     </div>
   );
 }
+
+export default translate(['extrinsics'])(App);

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

@@ -8,14 +8,19 @@ import type { BaseProps } from '../types';
 import './CallDisplay.css';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 
-export default function Error ({ className, style }: BaseProps): React$Node {
+function ErrorDisplay ({ className, style, t }: BaseProps): React$Node {
   return (
     <div
       className={['extrinsics--CallDisplay-error', className].join(' ')}
       style={style}
     >
-      ERROR: Invalid or unimplemented extrinsic function
+      {t('calldisplay.error', {
+        defaultValue: 'ERROR: Invalid or unimplemented extrinsic function'
+      })}
     </div>
   );
 }
+
+export default translate(['extrinsics'])(ErrorDisplay);

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

@@ -8,6 +8,7 @@ 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';
 
@@ -32,7 +33,7 @@ const COMPONENTS = {
   'staking_unstake': StakingUnstake
 };
 
-function CallDisplay ({ className, style, value }: Props): React$Node {
+function CallDisplay ({ className, style, t, value }: Props): React$Node {
   // flowlint-next-line sketchy-null-string:off
   if (!value) {
     return null;
@@ -55,10 +56,15 @@ function CallDisplay ({ className, style, value }: Props): React$Node {
         onClick={onSubmit}
         primary
       >
-        Submit Extrinsic
+        {t('calldisplay.submit', {
+          defaultValue: 'Submit Extrinsic'
+        })}
       </Button>
     </div>
   );
 }
 
-export default withObservable(CallDisplay, extrinsicName);
+export default withObservable(
+  translate(['extrinsics'])(CallDisplay),
+  extrinsicName
+);

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

@@ -8,6 +8,7 @@ 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';
 
@@ -39,14 +40,18 @@ extrinsics.sections.forEach(({ description, methods, name }) => {
   });
 });
 
-export default function CallSelect ({ className, style }: Props) {
+function CallSelect ({ className, style, t }: Props): React$Node {
   return (
     <div
       className={['extrinsics--CallSelect', 'extrinsics--split', className].join(' ')}
       style={style}
     >
       <div className='large'>
-        <Label>submit the following extrinsic</Label>
+        <Label>
+          {t('callselect.label', {
+            defaultValue: 'submit the following extrinsic'
+          })}
+        </Label>
         <Dropdown
           selection
           onChange={onChange}
@@ -56,3 +61,5 @@ export default function CallSelect ({ className, style }: Props) {
     </div>
   );
 }
+
+export default translate(['extrinsics'])(CallSelect);

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

@@ -9,14 +9,15 @@ 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
 };
 
-export default function PairDisplay ({ className, pair, style }: Props): React$Node {
+function PairDisplay ({ className, pair, style }: Props): React$Node {
   const publicKey = pair.publicKey();
   const { name } = pair.getMeta();
 
@@ -26,9 +27,9 @@ export default function PairDisplay ({ className, pair, style }: Props): React$N
       style={style}
     >
       <IdentityIcon
-        address={publicKey}
         className='ui--InputyAddress-PairDisplay-icon'
         size={32}
+        value={publicKey}
       />
       <div className='ui--InputyAddress-PairDisplay-name'>
         {name}
@@ -39,3 +40,5 @@ export default function PairDisplay ({ className, pair, style }: Props): React$N
     </div>
   );
 }
+
+export default translate(['extrinsics'])(PairDisplay);

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

@@ -8,6 +8,7 @@ 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 PairDisplay from './PairDisplay';
@@ -31,7 +32,7 @@ const options = keyring.getPairs().map((pair) => {
   };
 });
 
-export default function InputAddress (props: Props): React$Node {
+function InputAddress (props: Props): React$Node {
   // eslint-disable-next-line no-unused-vars
   const onChange = (event: SyntheticEvent<*>, { value }): void => {
     if (props.subject) {
@@ -49,3 +50,5 @@ export default function InputAddress (props: Props): React$Node {
     />
   );
 }
+
+export default translate(['extrinsics'])(InputAddress);

packages/app-extrinsics/src/Nonce.js

@@ -6,6 +6,7 @@
 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';
@@ -16,14 +17,18 @@ type Props = BaseProps & {};
 
 const SenderNonce = withObservableParams(RxNonce, senderAddr);
 
-export default function Nonce ({ className, style }: Props) {
+function Nonce ({ className, style, t }: Props): React$Node {
   return (
     <div
       className={['extrinsics--split', className].join(' ')}
       style={style}
     >
       <div className='small'>
-        <Label>with an index</Label>
+        <Label>
+          {t('nonce.label', {
+            defaultValue: 'with an index'
+          })}
+        </Label>
         <SenderNonce
           className='ui disabled dropdown selection'
           classNameUpdated='hasUpdated'
@@ -33,3 +38,5 @@ export default function Nonce ({ className, style }: Props) {
     </div>
   );
 }
+
+export default translate(['extrinsics'])(Nonce);