Display genesis (or chain, if known), update deps (#19)

* Display genesis (or chain, if known), update deps

* Build optimizations

package.json

@@ -9,7 +9,6 @@
     "packages/*"
   ],
   "engines": {
-    "node": ">=10.13.0",
     "yarn": "^1.10.1"
   },
   "resolutions": {
@@ -27,8 +26,8 @@
     "watch": "cd packages/extension && webpack --config webpack.config.js --watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.4",
-    "@polkadot/dev-react": "^0.30.0-beta.4",
+    "@babel/core": "^7.4.5",
+    "@polkadot/dev-react": "^0.30.0-beta.5",
     "@polkadot/ts": "^0.1.56"
   }
 }

packages/extension-ui/package.json

@@ -5,7 +5,7 @@
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "license": "Apache-2",
   "dependencies": {
-    "@polkadot/ui-identicon": "^0.39.0-beta.5",
+    "@polkadot/ui-identicon": "^0.39.1",
     "@types/react-router": "^5.0.0",
     "@types/react-router-dom": "^4.3.3",
     "react-router": "^5.0.0",

packages/extension-ui/src/Popup/Signing/Details.tsx

@@ -4,15 +4,19 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import findChain from '@polkadot/extension/chains';
 
 type Props = {
   className?: string,
+  genesisHash: string,
   method: string,
   nonce: string,
   url: string
 };
 
-function Details ({ className, method, nonce, url }: Props) {
+function Details ({ className, genesisHash, method, nonce, url }: Props) {
+  const chain = findChain(genesisHash);
+
   return (
     <table className={className}>
       <tbody>
@@ -20,6 +24,10 @@ function Details ({ className, method, nonce, url }: Props) {
           <td className='label'>from</td>
           <td className='data'>{url}</td>
         </tr>
+        <tr>
+          <td className='label'>{chain ? 'chain' : 'genesis'}</td>
+          <td className='data'>{chain || genesisHash}</td>
+        </tr>
         <tr>
           <td className='label'>nonce</td>
           <td className='data'>{nonce}</td>

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -20,7 +20,7 @@ type Props = {
   url: string
 };
 
-function Request ({ isFirst, onAction, request: { address, method, nonce }, signId, url }: Props) {
+function Request ({ isFirst, onAction, request: { address, genesisHash, method, nonce }, signId, url }: Props) {
   const onCancel = (): void => {
     cancelRequest(signId)
       .then(() => onAction())
@@ -32,6 +32,7 @@ function Request ({ isFirst, onAction, request: { address, method, nonce }, sign
   return (
     <Address address={address}>
       <Details
+        genesisHash={genesisHash}
         method={method}
         nonce={nonce}
         url={url}

packages/extension-ui/src/Popup/Signing/Unlock.tsx

@@ -39,7 +39,7 @@ function Unlock ({ className, onSign }: Props) {
         type='password'
       />
       <Button
-        label='Sign the extrinsic'
+        label='Sign the transaction'
         onClick={onClick}
       />
     </div>

packages/extension-ui/src/components/Box.tsx

@@ -21,7 +21,8 @@ function Box ({ children, className }: Props) {
 }
 
 export default styled(Box)`
-  background: ${defaults.box.info.background};
+  background: transparent;
+  border-top: ${defaults.hdrBorder};
   border-radius: ${defaults.borderRadius};
   color: ${defaults.color};
   font-family: ${defaults.fontFamily};

packages/extension-ui/src/components/Header.tsx

@@ -23,6 +23,7 @@ function Header ({ children, className, label }: Props) {
 
 export default styled(Header)`
   background: ${defaults.hdrBg};
+  border-top: ${defaults.hdrBorder};
   box-sizing: border-box;
   color: ${defaults.hdrColor};
   font-family: ${defaults.fontFamily};

packages/extension-ui/src/components/defaults.ts

@@ -21,6 +21,7 @@ const defaults: { [index: string]: any } = {
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
   fontSize: '1rem',
   hdrBg: 'transparent',
+  hdrBorder: '0.25rem solid #eee',
   hdrColor: '#ccc',
   inputBorder: '#ccc',
   inputPadding: '0.5rem 0.75rem',

packages/extension/package.json

@@ -5,9 +5,9 @@
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "license": "Apache-2",
   "dependencies": {
-    "@polkadot/api": "^0.79.0-beta.33",
+    "@polkadot/api": "^0.79.1",
     "@polkadot/extension-ui": "^0.1.1-beta.0",
-    "@polkadot/ui-keyring": "^0.39.0-beta.5"
+    "@polkadot/ui-keyring": "^0.39.1"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.86",

packages/extension/public/popup.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>polkadot{.js}</title>
   </head>
-  <body style="border-top:0.25rem solid #ccc; box-sizing:border-box; height:580px; margin:0; padding:0 0.75rem; width:480px;">
+  <body style="box-sizing:border-box; height:580px; margin:0; padding:0 0.75rem; width:480px;">
     <div id="root"></div>
     <script src='./popup.js'></script>
   </body>

packages/extension/src/background/types.ts

@@ -48,6 +48,7 @@ export type MessageExtrinsicSignCancel = {
 export type MessageExtrinsicSign = {
   address: string,
   blockHash: string,
+  genesisHash: string,
   method: string,
   nonce: string
 };

packages/extension/src/chains.ts

@@ -0,0 +1,18 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+// Array<[genesisHash, name]>
+const chains = [
+  ['0xdcd1346701ca8396496e52aa2785b1748deb6db09551b72159dcb3e08991025b', 'Alexander'],
+  ['0x10c08714a10c7da78f40a60f6f732cf0dba97acfb5e2035445b032386157d5c3', 'Emberic Elm'],
+  ['0xe1aa646d87d3c0ba5cf5f09d2ff6deb9c373b75d9660ba184b4ca953f92565e6', 'Flaming Fir']
+];
+
+export default function findChain (genesisHash: string): string | null {
+  const chain = chains.find(([hash]) => hash === genesisHash);
+
+  return chain
+    ? chain[1]
+    : null;
+}

packages/extension/src/inject/Signer.ts

@@ -2,10 +2,11 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { SignatureOptions } from '@polkadot/types/types';
+import { SignerOptions } from '@polkadot/api/types';
+import { IExtrinsic } from '@polkadot/types/types';
 import { Signer as ISigner, SendRequest } from './types';
 
-import { Extrinsic, Hash } from '@polkadot/types';
+import { Hash } from '@polkadot/types';
 import { SubmittableResult } from '@polkadot/api/SubmittableExtrinsic';
 
 let sendRequest: SendRequest;
@@ -15,16 +16,15 @@ export default class Signer implements ISigner {
     sendRequest = _sendRequest;
   }
 
-  async sign (extrinsic: Extrinsic, address: string, { blockHash, nonce }: SignatureOptions): Promise<number> {
+  async sign (extrinsic: IExtrinsic, address: string, { blockHash, genesisHash, nonce }: SignerOptions): Promise<number> {
     // Bit of a hack - with this round-about way, we skip any keyring deps
-    const cleaned = JSON.parse(JSON.stringify({
+    const { id, signature } = await sendRequest('extrinsic.sign', JSON.parse(JSON.stringify({
       address,
       blockHash,
+      genesisHash,
       method: extrinsic.method.toHex(),
       nonce
-    }));
-
-    const { id, signature } = await sendRequest('extrinsic.sign', cleaned);
+    })));
 
     extrinsic.addSignature(address as any, signature, nonce);
 

packages/extension/webpack.config.js

@@ -2,19 +2,16 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { WebpackPluginServe } = require('webpack-plugin-serve');
 
 const packages = [
+  'extension',
   'extension-ui'
 ];
 
-const DEFAULT_THEME = 'polkadot';
-
 function createWebpack ({ alias = {}, context }) {
   const pkgJson = require(path.join(context, 'package.json'));
   const ENV = process.env.NODE_ENV || 'development';
@@ -22,7 +19,7 @@ function createWebpack ({ alias = {}, context }) {
 
   return {
     context,
-    devtool: 'source-map',
+    devtool: false,
     entry: {
       background: './src/background/index.ts',
       inject: './src/inject/index.ts',
@@ -78,20 +75,11 @@ function createWebpack ({ alias = {}, context }) {
       hints: false
     },
     plugins: [
-      isProd
-        ? null
-        : new WebpackPluginServe({
-          port: 3001,
-          static: path.join(process.cwd(), '/build')
-        }),
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       new webpack.DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify(ENV),
-          VERSION: JSON.stringify(pkgJson.version),
-          UI_MODE: JSON.stringify(process.env.UI_MODE || 'full'),
-          UI_THEME: JSON.stringify(process.env.UI_THEME || DEFAULT_THEME),
-          WS_URL: JSON.stringify(process.env.WS_URL)
+          VERSION: JSON.stringify(pkgJson.version)
         }
       }),
       new CopyWebpackPlugin([{ from: 'public' }])