Inject keyring only on dev chains (#717)

* Inject keyring only on dev chains

* Remove useless deconstruct

packages/app-js/src/Editor.tsx

@@ -7,10 +7,11 @@ import { BareProps } from '@polkadot/ui-app/types';
 import React from 'react';
 import CodeFlask from 'codeflask';
 
-import WRAPPING from './snippets/wrapping';
+import makeWrapper from './snippets/wrapping';
 
 type Props = BareProps & {
   children?: React.ReactNode,
+  isDevelopment: boolean,
   code: string,
   onEdit: (code: string) => void,
   snippet: string
@@ -30,6 +31,7 @@ export default class Editor extends React.PureComponent<Props> {
 
   constructor (props: Props) {
     super(props);
+
     this.id = `flask-${Date.now()}`;
   }
 
@@ -53,11 +55,12 @@ export default class Editor extends React.PureComponent<Props> {
   }
 
   componentDidUpdate () {
-    const { code, onEdit, snippet } = this.props;
+    const { code, isDevelopment, onEdit, snippet } = this.props;
 
     if (snippet !== this.state.snippet) {
       onEdit(code);
-      this.editor.updateCode(`${WRAPPING}${code}`);
+
+      this.editor.updateCode(`${makeWrapper(isDevelopment)}${code}`);
       this.setState({ snippet });
     }
   }

packages/app-js/src/index.tsx

@@ -30,7 +30,7 @@ type Injected = {
   },
   global: null,
   hashing: typeof hashing,
-  keyring: KeyringInstance,
+  keyring: KeyringInstance | null,
   util: typeof util,
   window: null
 };
@@ -60,8 +60,8 @@ class App extends React.PureComponent<Props, State> {
   }
 
   render () {
+    const { isDevelopment, t } = this.props;
     const { code, isRunning, logs, snippet } = this.state;
-    const { t } = this.props;
     const options = snippets.map(({ code, ...options }) => ({ ...options }));
 
     return (
@@ -79,6 +79,7 @@ class App extends React.PureComponent<Props, State> {
         <section className='js--Content'>
           <Editor
             code={code}
+            isDevelopment={isDevelopment}
             snippet={snippet}
             onEdit={this.onEdit}
           >
@@ -113,9 +114,8 @@ class App extends React.PureComponent<Props, State> {
   }
 
   private runJs = async (): Promise<void> => {
-    const { api } = this.props;
+    const { api, isDevelopment } = this.props;
     const { code } = this.state;
-    const { keyring } = uiKeyring;
 
     this.stopJs();
     this.clearConsole();
@@ -128,7 +128,9 @@ class App extends React.PureComponent<Props, State> {
       },
       global: null,
       hashing,
-      keyring,
+      keyring: isDevelopment
+        ? uiKeyring.keyring
+        : null,
       util,
       window: null
     };

packages/app-js/src/snippets/wrapping.ts

@@ -2,9 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-export default `// All code is wrapped within an async closure, allowing access to api, hashing, keyring, util.
-// (async ({ api, hashing, keyring, util }) => {
+export default function makeWrapper (isDevelopment: boolean): string {
+  const args = `api, hashing, ${isDevelopment ? 'keyring, ' : ''}util`;
+
+  return `// All code is wrapped within an async closure, allowing access to ${args}.
+// (async ({ ${args} }) => {
 //   ... any user code is executed here ...
 // })();
 
 `;
+}

packages/ui-api/src/Api.tsx

@@ -95,6 +95,7 @@ export default class ApiWrapper extends React.PureComponent<Props, State> {
       tokenSymbol: undefined
     };
     const tokenSymbol = properties.get('tokenSymbol') || found.tokenSymbol;
+    const isDevelopment = isTestChain(chain || '');
 
     console.log('api: found chain', chain, [...properties.entries()]);
 
@@ -105,10 +106,10 @@ export default class ApiWrapper extends React.PureComponent<Props, State> {
 
     // setup keyring (loadAll) only after prefix has been set
     keyring.setAddressPrefix(properties.get('networkId') || found.networkId as any || 42);
-    keyring.setDevMode(isTestChain(chain || ''));
+    keyring.setDevMode(isDevelopment);
     keyring.loadAll();
 
-    this.setState({ chain });
+    this.setState({ chain, isDevelopment });
   }
 
   private subscribeIsConnected = (api: ApiPromise) => {
@@ -134,7 +135,7 @@ export default class ApiWrapper extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { api, apiDefaultTx, chain, isApiConnected, isApiReady, setApiUrl } = this.state;
+    const { api, apiDefaultTx, chain, isApiConnected, isApiReady, isDevelopment, setApiUrl } = this.state;
 
     return (
       <ApiContext.Provider
@@ -143,6 +144,7 @@ export default class ApiWrapper extends React.PureComponent<Props, State> {
           apiDefaultTx,
           isApiConnected,
           isApiReady: isApiReady && !!chain,
+          isDevelopment,
           setApiUrl
         }}
       >

packages/ui-api/src/types.ts

@@ -19,6 +19,7 @@ export type ApiProps = {
   apiDefaultTx: SubmittableExtrinsicFunction,
   isApiConnected: boolean,
   isApiReady: boolean,
+  isDevelopment: boolean,
   setApiUrl: (url?: string) => void
 };