Metadata for known chains (#40)

* Metadata for known chains

* Decode from metadata

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

@@ -5,6 +5,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import findChain from '@polkadot/extension/chains';
+import fromMetadata from '@polkadot/extrinsics/fromMetadata';
+import { Metadata, Method } from '@polkadot/types';
 
 type Props = {
   className?: string,
@@ -14,6 +16,29 @@ type Props = {
   url: string
 };
 
+function renderMethod (data: string, meta?: Metadata | null) {
+  if (!meta) {
+    return (
+      <tr>
+        <td className='label'>method data</td>
+        <td className='data'>{data}</td>
+      </tr>
+    );
+  }
+
+  Method.injectMethods(fromMetadata(meta));
+
+  const method = new Method(data);
+  const methodfn = Method.findFunction(method.callIndex);
+
+  return (
+    <tr>
+      <td className='label'>{methodfn.section}.{methodfn.method}</td>
+      <td className='data'><pre>{JSON.stringify(method.toJSON().args, null, 2)}</pre></td>
+    </tr>
+  );
+}
+
 function Details ({ className, genesisHash, method, nonce, url }: Props) {
   const chain = findChain(genesisHash);
 
@@ -26,16 +51,13 @@ function Details ({ className, genesisHash, method, nonce, url }: Props) {
         </tr>
         <tr>
           <td className='label'>{chain ? 'chain' : 'genesis'}</td>
-          <td className='data'>{chain || genesisHash}</td>
+          <td className='data'>{chain ? chain.name : genesisHash}</td>
         </tr>
         <tr>
           <td className='label'>nonce</td>
           <td className='data'>{nonce}</td>
         </tr>
-        <tr>
-          <td className='label'>method</td>
-          <td className='data'>{method}</td>
-        </tr>
+        {renderMethod(method, chain ? chain.meta : null)}
       </tbody>
     </table>
   );
@@ -52,11 +74,20 @@ export default styled(Details)`
     overflow: hidden;
     text-align: left;
     text-overflow: ellipsis;
+    vertical-align: top;
     width: 100%;
+
+    pre {
+      font-family: inherit;
+      font-size: 0.75rem;
+      margin: 0;
+    }
   }
 
   td.label {
     opacity: 0.5;
     text-align: right;
+    vertical-align: top;
+    white-space: nowrap;
   }
 `;

packages/extension/src/chains.ts

@@ -1,18 +0,0 @@
-// 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/chains/index.ts

@@ -0,0 +1,31 @@
+// 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.
+
+import { Metadata } from '@polkadot/types';
+
+// imports chain details, generally metadata. For the generation of these,
+// curl -H "Content-Type: application/json" -d '{"id":1, "jsonrpc":"2.0", "method": "state_getMetadata", "params":[]}' http://localhost:9933
+import alexander from './alexander';
+
+type Chain = {
+  meta?: Metadata,
+  name: string
+};
+
+const chains: { [genesisHash: string]: Chain } = {
+  '0xdcd1346701ca8396496e52aa2785b1748deb6db09551b72159dcb3e08991025b': {
+    name: 'Alexander',
+    meta: new Metadata(alexander.meta)
+  },
+  '0x10c08714a10c7da78f40a60f6f732cf0dba97acfb5e2035445b032386157d5c3': {
+    name: 'Emberic Elm'
+  },
+  '0xe1aa646d87d3c0ba5cf5f09d2ff6deb9c373b75d9660ba184b4ca953f92565e6': {
+    name: 'Flaming Fir'
+  }
+};
+
+export default function findChain (genesisHash: string): Chain | null {
+  return chains[genesisHash] || null;
+}