Add qr support for networkSpecs (#299)

* add qr support for networkSpecs

* make lint happy with spaces

* make lint happier

* remove path id in networkspecs type

* Update tsconfig.json

packages/react-qr/src/NetworkSpecs.tsx

@@ -0,0 +1,39 @@
+// Copyright 2017-2020 @polkadot/react-qr authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { NetworkSpecsStruct } from '@polkadot/ui-settings';
+
+import React, { useEffect, useState } from 'react';
+import QrDisplay from './Display';
+import { BaseProps } from './types';
+
+import { encodeString } from './util';
+
+interface Props extends BaseProps {
+  networkSpecs: NetworkSpecsStruct;
+}
+
+function DisplayNetworkSpecs ({ className, networkSpecs, size, style }: Props): React.ReactElement<Props> | null {
+  const [data, setData] = useState<Uint8Array | null>(null);
+
+  useEffect((): void => {
+    setData(encodeString(JSON.stringify(networkSpecs)));
+  }, [networkSpecs]);
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <QrDisplay
+      className={className}
+      skipEncoding={true}
+      size={size}
+      style={style}
+      value={data}
+    />
+  );
+}
+
+export default React.memo(DisplayNetworkSpecs);

packages/react-qr/src/index.tsx

@@ -6,3 +6,4 @@ export { default as QrDisplayAddress } from './DisplayAddress';
 export { default as QrDisplayPayload } from './DisplayPayload';
 export { default as QrScanAddress } from './ScanAddress';
 export { default as QrScanSignature } from './ScanSignature';
+export { default as QrNetworkSpecs } from './NetworkSpecs';

packages/ui-settings/src/index.ts

@@ -4,7 +4,7 @@
 
 import settings, { Settings } from './Settings';
 export { ENDPOINT_DEFAULT, ICON_DEFAULT, ICON_DEFAULT_HOST, LANGUAGE_DEFAULT, LOCKING_DEFAULT, PREFIX_DEFAULT, UIMODE_DEFAULT, UITHEME_DEFAULT } from './defaults';
-export { SettingsStruct } from './types';
+export { SettingsStruct, NetworkSpecsStruct } from './types';
 
 export default settings;
 

packages/ui-settings/src/types.ts

@@ -20,3 +20,12 @@ export interface SettingsStruct {
   uiMode: string;
   uiTheme: string;
 }
+
+export interface NetworkSpecsStruct {
+  color: string;
+  decimals: number;
+  genesisHash: string;
+  prefix: number;
+  title: string;
+  unit: string;
+}