Support both poc-1 & latest encodings

packages/app-explorer/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.47",
-    "@polkadot/primitives-codec": "^0.16.12",
-    "@polkadot/primitives-json": "^0.16.12",
+    "@polkadot/primitives-codec": "^0.16.15",
+    "@polkadot/primitives-json": "^0.16.15",
     "@polkadot/ui-app": "^0.6.10",
     "@polkadot/util-crypto": "^0.22.2"
   }

packages/app-explorer/src/index.css

@@ -10,6 +10,18 @@
   background: transparent !important;
 }
 
+.explorer--NodeInfo {
+  font-size: 0.75rem;
+  opacity: 0.5;
+  margin-bottom: 0.5rem;
+  text-align: left;
+}
+
+.explorer--NodeInfo div {
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
 .explorer--BestHash,
 .explorer--BestNumber {
   font-weight: 100;

packages/app-explorer/src/index.js

@@ -10,7 +10,10 @@ import './index.css';
 import React from 'react';
 
 import classes from '@polkadot/ui-app/util/classes';
+import Chain from '@polkadot/ui-react-rx/Chain';
 import BestNumber from '@polkadot/ui-react-rx/BestNumber';
+import NodeName from '@polkadot/ui-react-rx/NodeName';
+import NodeVersion from '@polkadot/ui-react-rx/NodeVersion';
 
 import BestHash from './BestHash';
 import BlockHeaders from './BlockHeaders';
@@ -24,6 +27,16 @@ function ExplorerApp ({ className, style, t }: Props): React$Node {
       className={classes('explorer--App', className)}
       style={style}
     >
+      <div className='explorer--NodeInfo'>
+        <Chain label={t('app.chain', {
+          defaultValue: 'chain: '
+        })} />
+        <NodeName label={t('app.name', {
+          defaultValue: 'client: '
+        })}
+        />
+        <NodeVersion label='v.' />
+      </div>
       <BestNumber
         className='explorer--BestNumber'
         label={t('app.bestNumber', {

packages/app-extrinsics/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.47",
-    "@polkadot/extrinsics-codec": "^0.16.12",
+    "@polkadot/extrinsics-codec": "^0.16.15",
     "@polkadot/ui-app": "^0.6.10",
     "@polkadot/ui-signer": "^0.6.10",
     "react-dropzone": "^4.2.9"

packages/app-extrinsics/src/Extrinsic.js

@@ -3,8 +3,10 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
+import type { EncodingVersions } from '@polkadot/extrinsics-codec/types';
 import type { Extrinsic$Method } from '@polkadot/extrinsics/types';
 import type { BareProps } from '@polkadot/ui-app/types';
+import type { ApiProps } from '@polkadot/ui-react-rx/types';
 import type { RawParam } from '@polkadot/ui-app/Params/types';
 import type { EncodedMessage } from '@polkadot/ui-signer/types';
 
@@ -15,10 +17,11 @@ import InputExtrinsic from '@polkadot/ui-app/InputExtrinsic';
 import Params from '@polkadot/ui-app/Params';
 import classes from '@polkadot/ui-app/util/classes';
 import isUndefined from '@polkadot/util/is/undefined';
+import withApi from '@polkadot/ui-react-rx/with/api';
 
 import paramComponents from './Params';
 
-type Props = BareProps & {
+type Props = BareProps & ApiProps & {
   defaultValue: Extrinsic$Method,
   isError?: boolean,
   isPrivate?: boolean,
@@ -29,21 +32,34 @@ type Props = BareProps & {
 
 type State = {
   extrinsic: Extrinsic$Method,
-  values: Array<RawParam>
+  values: Array<RawParam>,
+  apiSupport: EncodingVersions
 };
 
-export default class Extrinsic extends React.PureComponent<Props, State> {
+class Extrinsic extends React.PureComponent<Props, State> {
   state: State;
 
   constructor (props: Props) {
     super(props);
 
     this.state = {
       extrinsic: props.defaultValue,
-      values: []
+      values: [],
+      apiSupport: 'poc-1'
     };
   }
 
+  componentDidMount () {
+    // FIXME should be shared component, no unmount here
+    this.props.api.system.version().subscribe((nodeVersion?: string) => {
+      this.setState({
+        apiSupport: nodeVersion === undefined || nodeVersion === '0.1.0'
+          ? 'poc-1'
+          : 'latest'
+      });
+    });
+  }
+
   render (): React$Node {
     const { className, defaultValue, isError, isPrivate, labelMethod, labelSection, style } = this.props;
     const { extrinsic } = this.state;
@@ -73,7 +89,7 @@ export default class Extrinsic extends React.PureComponent<Props, State> {
   nextState (newState: $Shape<State>): void {
     this.setState(newState, () => {
       const { onChange } = this.props;
-      const { extrinsic, values } = this.state;
+      const { apiSupport, extrinsic, values } = this.state;
       const params = Object.values(extrinsic.params);
       const isValid = values.length === params.length &&
         params.reduce((isValid, param, index) =>
@@ -82,7 +98,7 @@ export default class Extrinsic extends React.PureComponent<Props, State> {
           !isUndefined(values[index].value) &&
           values[index].isValid, true);
       const value = isValid && extrinsic.params
-        ? encode(extrinsic, values.map((p) => p.value))
+        ? encode(extrinsic, values.map((p) => p.value), apiSupport)
         : new Uint8Array([]);
 
       onChange({
@@ -101,3 +117,5 @@ export default class Extrinsic extends React.PureComponent<Props, State> {
     this.nextState({ values });
   }
 }
+
+export default withApi(Extrinsic);

packages/ui-app/package.json

@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.47",
-    "@polkadot/extrinsics-substrate": "^0.16.12",
-    "@polkadot/storage-substrate": "^0.16.12",
+    "@polkadot/extrinsics-substrate": "^0.16.15",
+    "@polkadot/storage-substrate": "^0.16.15",
     "@polkadot/ui-keyring": "^0.6.10",
-    "@polkadot/ui-react": "^0.13.13",
-    "@polkadot/ui-react-rx": "^0.13.13",
+    "@polkadot/ui-react": "^0.13.19",
+    "@polkadot/ui-react-rx": "^0.13.19",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",
     "i18next-xhr-backend": "^1.5.1",

packages/ui-keyring/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.47",
-    "@polkadot/ui-react": "^0.13.13",
+    "@polkadot/ui-react": "^0.13.19",
     "@polkadot/util-keyring": "^0.22.2",
     "store": "^2.0.12"
   },

packages/ui-signer/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.47",
-    "@polkadot/extrinsics": "^0.16.12",
+    "@polkadot/extrinsics": "^0.16.15",
     "@polkadot/ui-app": "^0.6.10",
     "@polkadot/ui-keyring": "^0.6.10"
   },

packages/ui-signer/src/Modal.js

@@ -3,6 +3,7 @@
 // of the ISC license. See the LICENSE file for details.
 // @flow
 
+import type { EncodingVersions } from '@polkadot/extrinsics-codec/types';
 import type { ApiProps } from '@polkadot/ui-react-rx/types';
 import type { I18nProps } from '@polkadot/ui-app/types';
 import type { QueueTx, QueueTx$MessageSetStatus } from './types';
@@ -32,6 +33,7 @@ type UnlockI18n = {
 }
 
 type State = {
+  apiSupport: EncodingVersions,
   currentItem?: QueueTx,
   password: string,
   unlockError: UnlockI18n | null
@@ -44,12 +46,13 @@ class Signer extends React.PureComponent<Props, State> {
     super(props);
 
     this.state = {
+      apiSupport: 'poc-1',
       password: '',
       unlockError: null
     };
   }
 
-  static getDerivedStateFromProps ({ queue }: Props, { currentItem, password, unlockError }: State): State {
+  static getDerivedStateFromProps ({ queue }: Props, { apiSupport, currentItem, password, unlockError }: State): State {
     const nextItem = queue.find(({ status }) =>
       status === 'queued'
     );
@@ -64,12 +67,24 @@ class Signer extends React.PureComponent<Props, State> {
       );
 
     return {
+      apiSupport,
       currentItem: nextItem,
       password: isSame ? password : '',
       unlockError: isSame ? unlockError : null
     };
   }
 
+  componentDidMount () {
+    // FIXME should be shared component, no unmount here
+    this.props.api.system.version().subscribe((nodeVersion?: string) => {
+      this.setState({
+        apiSupport: nodeVersion === undefined || nodeVersion === '0.1.0'
+          ? 'poc-1'
+          : 'latest'
+      });
+    });
+  }
+
   componentDidUpdate (prevProps: Props, prevState: State) {
     const { currentItem } = this.state;
 
@@ -226,14 +241,19 @@ class Signer extends React.PureComponent<Props, State> {
     }
 
     const { api, queueSetStatus } = this.props;
+    const { apiSupport } = this.state;
 
     queueSetStatus(id, 'sending');
 
     let data = values;
 
     if (rpc.isSigned === true && publicKey) {
-      // flowlint-next-line unclear-type:off
-      data = [signMessage(publicKey, nonce, ((data[0]: any): Uint8Array)).data];
+      data = [
+        signMessage(
+          // flowlint-next-line unclear-type:off
+          publicKey, nonce, ((data[0]: any): Uint8Array), apiSupport
+        ).data
+      ];
     }
 
     const { error, result, status } = await submitMessage(api, data, rpc);

packages/ui-signer/src/sign.js

@@ -4,19 +4,22 @@
 // @flow
 
 import type BN from 'bn.js';
+import type { EncodingVersions } from '@polkadot/extrinsics-codec/types';
 import type { Signed } from './types';
 
 import encodeCall from '@polkadot/extrinsics-codec/encode/call';
 import keyring from '@polkadot/ui-keyring';
 import u8aConcat from '@polkadot/util/u8a/concat';
 import u8aToHex from '@polkadot/util/u8a/toHex';
 
-export default function signMessage (publicKey: Uint8Array, nonce: BN | number, value: Uint8Array): Signed {
-  const message = encodeCall(publicKey, nonce, value);
+export default function signMessage (publicKey: Uint8Array, nonce: BN | number, value: Uint8Array, apiSupport: EncodingVersions): Signed {
+  console.log('signMessage :   support ::', apiSupport);
+
+  const message = encodeCall(publicKey, nonce, value, apiSupport);
   const signature = keyring.getPair(publicKey).sign(message);
 
-  console.log(`  message :: ${u8aToHex(message)}`);
-  console.log(`signature :: ${u8aToHex(signature)}`);
+  console.log(`signMessage :   message :: ${u8aToHex(message)}`);
+  console.log(`signMessage : signature :: ${u8aToHex(signature)}`);
 
   return {
     data: u8aConcat(message, signature),