Pull RawPayload and ExtensionStore from deps (#55)

* Pull RawPayload and ExtensionStore from deps

* Use {method,section}Name from Method

* Cleanup method display (known) with meta

package.json

@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
-    "@polkadot/dev-react": "^0.30.0-beta.8",
-    "@polkadot/ts": "^0.1.58"
+    "@polkadot/dev-react": "^0.30.0-beta.10",
+    "@polkadot/ts": "^0.1.59"
   }
 }

packages/extension-ui/package.json

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

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

@@ -40,18 +40,20 @@ function Request ({ authId, className, isFirst, onAction, request: { origin }, u
         />
       }
       intro={
-        <div>An application, identified as <div className='tab-name'>{origin}</div> is requesting access from <div className='tab-url'>{url}</div>.</div>
+        <div className='tab-info'>An application, self-identifying as <span className='tab-name'>{origin}</span> is requesting access from <span className='tab-url'>{url}</span>.</div>
       }
     >
       <ActionBar>
         <Link isDanger onClick={onReject}>Reject</Link>
       </ActionBar>
-      <Tip header='access' type='warn'>Only approve this request if you trust the application. Approving gives the application access to the addresses of your accounts.</Tip>
       {isFirst && (
-        <Button
-          label='Yes, allow this application access'
-          onClick={onApprove}
-        />
+        <>
+          <Tip header='access' type='warn'>Only approve this request if you trust the application. Approving gives the application access to the addresses of your accounts.</Tip>
+          <Button
+            label='Yes, allow this application access'
+            onClick={onApprove}
+          />
+        </>
       )}
     </IconBox>
   );
@@ -63,9 +65,17 @@ export default withOnAction(styled(Request)`
     color: ${defaults.btnColorDanger};
   }
 
+  .tab-info {
+    overflow: hidden;
+  }
+
   .tab-name,
   .tab-url {
     color: ${defaults.linkColor};
     display: inline-block;
+    max-width: 20rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
   }
 `);

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

@@ -30,13 +30,28 @@ function renderMethod (data: string, meta?: Metadata | null) {
   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>
+    <>
+      <tr>
+        <td className='label'>method</td>
+        <td className='data'>{method.sectionName}.{method.methodName}</td>
+      </tr>
+      <tr>
+        <td className='label'>&nbsp;</td>
+        <td className='data'><pre>{JSON.stringify(method.toJSON().args, null, 2)}</pre></td>
+      </tr>
+      {method.meta && (
+        <tr>
+          <td className='label'>info</td>
+          <td className='data'>
+            <details>
+              <summary>{method.meta.documentation.join(' ')}</summary>
+            </details>
+          </td>
+        </tr>
+      )}
+    </>
   );
 }
 
@@ -75,7 +90,7 @@ export default styled(Details)`
     overflow: hidden;
     text-align: left;
     text-overflow: ellipsis;
-    vertical-align: top;
+    vertical-align: middle;
     width: 100%;
 
     pre {
@@ -87,8 +102,25 @@ export default styled(Details)`
 
   td.label {
     opacity: 0.5;
+    padding: 0 0.5rem;
     text-align: right;
-    vertical-align: top;
+    vertical-align: middle;
     white-space: nowrap;
   }
+
+  details {
+    cursor: pointer;
+    max-width: 24rem;
+
+    &[open] summary {
+      white-space: normal;
+    }
+
+    summary {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      outline: 0;
+    }
+  }
 `;

packages/extension/package.json

@@ -5,9 +5,9 @@
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "license": "Apache-2",
   "dependencies": {
-    "@polkadot/api": "^0.80.1",
+    "@polkadot/api": "^0.81.0-beta.1",
     "@polkadot/extension-ui": "^0.1.1-beta.23",
-    "@polkadot/ui-keyring": "^0.40.1"
+    "@polkadot/ui-keyring": "^0.41.0-beta.3"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.86",

packages/extension/src/background/handlers/Extension.ts

@@ -8,10 +8,10 @@ import { AuthorizeRequest, MessageTypes, MessageAccountCreate, MessageAccountEdi
 
 import keyring from '@polkadot/ui-keyring';
 import accountsObservable from '@polkadot/ui-keyring/observable/accounts';
+import { SignaturePayloadRaw } from '@polkadot/types';
 import { mnemonicGenerate, mnemonicValidate } from '@polkadot/util-crypto';
 import { assert, u8aToHex } from '@polkadot/util';
 
-import RawPayload from '../RawPayload';
 import State from './State';
 import { createSubscription, unsubscribe } from './subscriptions';
 
@@ -23,10 +23,10 @@ function transformAccounts (accounts: SubjectInfo): Array<KeyringJson> {
 }
 
 export default class Extension {
-  private _state: State;
+  state: State;
 
   constructor (state: State) {
-    this._state = state;
+    this.state = state;
   }
 
   private accountsCreate ({ name, password, suri, type }: MessageAccountCreate): boolean {
@@ -71,7 +71,7 @@ export default class Extension {
   }
 
   private authorizeApprove ({ id }: MessageAuthorizeApprove): boolean {
-    const queued = this._state.getAuthRequest(id);
+    const queued = this.state.getAuthRequest(id);
 
     assert(queued, 'Unable to find request');
 
@@ -83,7 +83,7 @@ export default class Extension {
   }
 
   private authorizeReject ({ id }: MessageAuthorizeReject): boolean {
-    const queued = this._state.getAuthRequest(id);
+    const queued = this.state.getAuthRequest(id);
 
     assert(queued, 'Unable to find request');
 
@@ -95,13 +95,13 @@ export default class Extension {
   }
 
   private authorizeRequests (): Array<AuthorizeRequest> {
-    return this._state.allAuthRequests;
+    return this.state.allAuthRequests;
   }
 
   // FIXME This looks very much like what we have in accounts
   private authorizeSubscribe (id: string, port: chrome.runtime.Port): boolean {
     const cb = createSubscription(id, port);
-    const subscription = this._state.authSubject.subscribe((requests: Array<AuthorizeRequest>) =>
+    const subscription = this.state.authSubject.subscribe((requests: Array<AuthorizeRequest>) =>
       cb(requests)
     );
 
@@ -133,7 +133,7 @@ export default class Extension {
   }
 
   private signingApprove ({ id, password }: MessageExtrinsicSignApprove): boolean {
-    const queued = this._state.getSignRequest(id);
+    const queued = this.state.getSignRequest(id);
 
     assert(queued, 'Unable to find request');
 
@@ -148,7 +148,7 @@ export default class Extension {
 
     pair.decodePkcs8(password);
 
-    const payload = new RawPayload({ blockHash, method, nonce });
+    const payload = new SignaturePayloadRaw({ blockHash, method, nonce });
     const signature = u8aToHex(payload.sign(pair));
 
     pair.lock();
@@ -162,7 +162,7 @@ export default class Extension {
   }
 
   private signingCancel ({ id }: MessageExtrinsicSignCancel): boolean {
-    const queued = this._state.getSignRequest(id);
+    const queued = this.state.getSignRequest(id);
 
     assert(queued, 'Unable to find request');
 
@@ -174,13 +174,13 @@ export default class Extension {
   }
 
   private signingRequests (): Array<SigningRequest> {
-    return this._state.allSignRequests;
+    return this.state.allSignRequests;
   }
 
   // FIXME This looks very much like what we have in authorization
   private signingSubscribe (id: string, port: chrome.runtime.Port): boolean {
     const cb = createSubscription(id, port);
-    const subscription = this._state.signSubject.subscribe((requests: Array<SigningRequest>) =>
+    const subscription = this.state.signSubject.subscribe((requests: Array<SigningRequest>) =>
       cb(requests)
     );
 

packages/extension/src/background/handlers/Tabs.ts

@@ -21,14 +21,14 @@ function transformAccounts (accounts: SubjectInfo): Accounts {
 }
 
 export default class Tabs {
-  private _state: State;
+  state: State;
 
   constructor (state: State) {
-    this._state = state;
+    this.state = state;
   }
 
   private authorize (url: string, request: MessageAuthorize) {
-    return this._state.authorizeUrl(url, request);
+    return this.state.authorizeUrl(url, request);
   }
 
   private accountsList (url: string): Accounts {
@@ -56,7 +56,7 @@ export default class Tabs {
 
     assert(pair, 'Unable to find keypair');
 
-    return this._state.signQueue(url, request);
+    return this.state.signQueue(url, request);
   }
 
   async handle (id: string, type: MessageTypes, request: any, url: string, port: chrome.runtime.Port): Promise<any> {

packages/extension/src/background/handlers/index.ts

@@ -9,8 +9,6 @@ import Extension from './Extension';
 import State from './State';
 import Tabs from './Tabs';
 
-const FALLBACK_URL = '<unknown>';
-
 const state = new State();
 const extension = new Extension(state);
 const tabs = new Tabs(state);
@@ -20,14 +18,14 @@ export default function handler ({ id, message, request }: MessageRequest, port:
   const sender = port.sender as chrome.runtime.MessageSender;
   const from = isPopup
     ? 'popup'
-    : (sender.tab && sender.tab.url) || sender.url;
-  const source = `${from || FALLBACK_URL}: ${id}: ${message}`;
+    : (sender.tab && sender.tab.url) || sender.url || '<unknown>';
+  const source = `${from}: ${id}: ${message}`;
 
   console.log(` [in] ${source}`); // :: ${JSON.stringify(request)}`);
 
   const promise = isPopup
     ? extension.handle(id, message, request, port)
-    : tabs.handle(id, message, request, from || FALLBACK_URL, port);
+    : tabs.handle(id, message, request, from, port);
 
   promise
     .then((response) => {