feat(light-apps): Add in-page WasmProvider in provider list

.gitignore

@@ -2,9 +2,10 @@
 build/
 dist/
 lib/
-packages/electron-app/static/substrate
 coverage/
 master-build.zip
+packages/electron-app/static/substrate
+packages/light-apps/public/*.wasm
 
 # node_modules
 node_modules/

package.json

@@ -19,7 +19,7 @@
   "scripts": {
     "build:ui": "yarn clean && lerna exec yarn build --stream --scope=@substrate/ui-components --scope=@substrate/light --scope=@substrate/light-apps",
     "build:electron": "yarn build:ui && lerna run build --scope=@substrate/electron-app",
-    "build:extension": "INLINE_RUNTIME_CHUNK=false yarn build:ui && lerna run build --scope=@substrate/extension-app",
+    "build:extension": "CI=false INLINE_RUNTIME_CHUNK=false yarn build:ui && lerna run build --scope=@substrate/extension-app",
     "clean": "rimraf packages/**/build packages/**/lib packages/**/dist",
     "lint": "tsc --noEmit && eslint --ext js,ts,tsx .",
     "package:electron": "yarn build:electron && lerna run package --scope=@substrate/electron-app",

packages/electron-app/package.json

@@ -7,8 +7,8 @@
   "private": true,
   "repository": "https://github.com/paritytech/substrate-light-ui.git",
   "scripts": {
-    "prebuild": "copyfiles -u 2 \"../light-apps/build/**/*\" static/",
-    "build": "electron-webpack",
+    "copy:static": "copyfiles -u 2 \"../light-apps/build/**/*\" static/",
+    "build": "yarn copy:static && electron-webpack",
     "electron": "electron dist/main/main.js",
     "package": "electron-builder",
     "start": "electron-webpack dev",

packages/extension-app/src/background/clients.ts

@@ -6,9 +6,12 @@
 
 import { ProviderMeta } from '@polkadot/extension-inject/types';
 import { ProviderInterface } from '@polkadot/rpc-provider/types';
-import { kusama_cc3, LightClient, westend } from '@substrate/light';
-
-import { WasmProvider } from './WasmProvider';
+import {
+  kusama_cc3,
+  LightClient,
+  WasmProvider,
+  westend,
+} from '@substrate/light';
 
 // We bundled the .wasm file inside the extension, at this relative url. See
 // the structure of the output `build/` folder.

packages/extension-app/src/background/handlers/State.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 @paritytech/substrate-light-ui authors & contributors
+// Copyright 2018-2020 @paritytech/substrate-light-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.
 

packages/extension-app/src/background/handlers/handlers.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 @paritytech/substrate-light-ui authors & contributors
+// Copyright 2018-2020 @paritytech/substrate-light-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.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 @paritytech/substrate-light-ui authors & contributors
+// Copyright 2018-2020 @paritytech/substrate-light-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.
 

packages/extension-app/src/extensionizer.d.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 @paritytech/substrate-light-ui authors & contributors
+// Copyright 2018-2020 @paritytech/substrate-light-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.
 

packages/extension-app/webpack.config.js

@@ -61,6 +61,7 @@ function createWebpack({ alias = {}, context }) {
         },
         {
           test: /\.js$/,
+          // https://github.com/webpack/webpack/issues/6719#issuecomment-546840116
           loader: require.resolve('@open-wc/webpack-import-meta-loader'),
         },
         {

packages/light-apps/craco.config.js

@@ -0,0 +1,24 @@
+// Copyright 2018-2020 @paritytech/substrate-light-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.
+
+module.exports = {
+  babel: {
+    plugins: ['@babel/plugin-syntax-import-meta'],
+  },
+  webpack: {
+    alias: {},
+    plugins: [],
+    configure: {
+      module: {
+        rules: [
+          {
+            test: /\.js$/,
+            // https://github.com/webpack/webpack/issues/6719#issuecomment-546840116
+            loader: require.resolve('@open-wc/webpack-import-meta-loader'),
+          },
+        ],
+      },
+    },
+  },
+};

packages/light-apps/package.json

@@ -14,15 +14,17 @@
     "not op_mini all"
   ],
   "scripts": {
-    "start": "BROWSER=none SKIP_PREFLIGHT_CHECK=true react-scripts start",
-    "build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
+    "build": "yarn copy:wasm && SKIP_PREFLIGHT_CHECK=true craco build",
+    "copy:wasm": "copyfiles -Eu5 \"../light/src/generated/kusama_cc3/kusama_cc3.wasm\" public",
+    "start": "yarn copy:wasm && BROWSER=none SKIP_PREFLIGHT_CHECK=true craco start",
     "test": "jest --coverage"
   },
   "dependencies": {
     "@polkadot/extension-dapp": "^0.24.0-beta.17",
     "@polkadot/ui-assets": "^0.51.1",
     "@rehooks/local-storage": "^2.3.0",
     "@substrate/context": "^0.3.24",
+    "@substrate/light": "^0.3.32",
     "@substrate/ui-components": "^0.3.32",
     "@types/chrome": "^0.0.104",
     "@types/react-dom": "^16.9.6",
@@ -33,8 +35,10 @@
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.4.1",
     "semantic-ui-css": "^2.4.1",
-    "store": "^2.0.12",
     "tachyons": "^4.11.1",
     "web-ext-types": "^3.2.1"
+  },
+  "devDependencies": {
+    "@craco/craco": "^5.6.4"
   }
 }

packages/light-apps/src/components/ContextGate/extensionizer.d.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 @paritytech/substrate-light-ui authors & contributors
+// Copyright 2018-2020 @paritytech/substrate-light-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.
 

packages/light-apps/src/components/TopBar/ChooseProvider/discover.ts

@@ -2,10 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+/* eslint-disable @typescript-eslint/camelcase */
+
 import { WsProvider } from '@polkadot/api';
 import { ProviderMeta } from '@polkadot/extension-inject/types';
 import { ProviderInterface } from '@polkadot/rpc-provider/types';
+import { kusama_cc3, WasmProvider, westend } from '@substrate/light';
 
+import { detectEnvironment } from '../../../util/env';
 import { Injected } from '../../context';
 
 /**
@@ -18,19 +22,43 @@ export interface LazyProvider extends ProviderMeta {
 }
 
 /**
- * These fallback providers connect to a centralized remote RPC node.
+ * The URL to the WASM blob of the light client. In this project, we put it in
+ * the `public` folder so that it's statically available.
  */
-export const FALLBACK_PROVIDERS: Record<string, LazyProvider> = {
-  'westend-WsProvider': {
-    description: 'Remote node hosted by W3F',
-    id: 'westend-WsProvider',
+const WASM_BLOB_URL = '/kusama_cc3.wasm';
+
+/**
+ * These are the WASM providers that the user can run directly inside the
+ * browser tab. They are only available in `TAB_ENV`. Note that we made sure to
+ * copy the WASM blob inside
+ */
+export const TAB_WASM_PROVIDERS: Record<string, LazyProvider> = {
+  'kusama-WasmProvider': {
+    description: 'In-tab WASM light client',
+    id: 'kusama-WasmProvider',
+    network: 'kusama',
+    node: 'light',
+    source: 'tab',
+    start: (): Promise<ProviderInterface> =>
+      Promise.resolve(new WasmProvider(kusama_cc3.fromUrl(WASM_BLOB_URL))),
+    transport: 'WasmProvider',
+  },
+  'westend-WasmProvider': {
+    description: 'In-tab WASM light client',
+    id: 'westend-WasmProvider',
     network: 'westend',
     node: 'light',
-    source: 'fallback',
+    source: 'tab',
     start: (): Promise<ProviderInterface> =>
-      Promise.resolve(new WsProvider('wss://westend-rpc.polkadot.io')),
-    transport: 'WsProvider',
+      Promise.resolve(new WasmProvider(westend.fromUrl(WASM_BLOB_URL))),
+    transport: 'WasmProvider',
   },
+};
+
+/**
+ * These fallback providers connect to a centralized remote RPC node.
+ */
+export const FALLBACK_PROVIDERS: Record<string, LazyProvider> = {
   'kusama-WsProvider': {
     description: 'Remote node hosted by W3F',
     id: 'kusama-WsProvider',
@@ -41,6 +69,16 @@ export const FALLBACK_PROVIDERS: Record<string, LazyProvider> = {
       Promise.resolve(new WsProvider('wss://kusama-rpc.polkadot.io')),
     transport: 'WsProvider',
   },
+  'westend-WsProvider': {
+    description: 'Remote node hosted by W3F',
+    id: 'westend-WsProvider',
+    network: 'westend',
+    node: 'light',
+    source: 'fallback',
+    start: (): Promise<ProviderInterface> =>
+      Promise.resolve(new WsProvider('wss://westend-rpc.polkadot.io')),
+    transport: 'WsProvider',
+  },
 };
 
 interface ProviderSources {
@@ -101,13 +139,16 @@ async function getProvidersFromInjected(
 export async function getAllProviders(
   additionalSources: ProviderSources = {}
 ): Promise<Record<string, LazyProvider>> {
-  const [extensionProviders, fallbackProviders] = await Promise.all([
-    getProvidersFromInjected(additionalSources.injected),
-    Promise.resolve(FALLBACK_PROVIDERS),
-  ]);
+  const extensionProviders = await getProvidersFromInjected(
+    additionalSources.injected
+  );
+
+  const isTabEnv = detectEnvironment() === 'TAB_ENV';
 
   return {
-    ...fallbackProviders,
+    // Only add tab WASM providers if we're in a browser tab
+    ...(isTabEnv ? TAB_WASM_PROVIDERS : {}),
+    ...FALLBACK_PROVIDERS,
     ...extensionProviders,
   };
 }

packages/light-apps/src/components/context/ProviderContext/ProviderContext.tsx

@@ -41,9 +41,16 @@ export function ProviderContextProvider(
   const [provider, setProvider] = useState<ProviderInterface>();
 
   useEffect(() => {
+    // Stop the currently running provider
+    if (provider) {
+      provider.disconnect();
+    }
+
     if (lazy) {
       lazy.start().then(setProvider).catch(l.error);
     }
+    // We don't want `provider` in the deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lazy]);
 
   return (

packages/light/package.json

@@ -13,6 +13,6 @@
   },
   "repository": "https://github.com/paritytech/substrate-light-ui.git",
   "scripts": {
-    "build": "rimraf lib && mkdir lib && cp -r src/generated lib/generated && tsc"
+    "build": "rimraf lib && copyfiles -Eu2 \"src/generated/**/*\" lib/generated && tsc"
   }
 }

packages/extension-app/src/background/WasmProvider.ts → packages/light/src/WasmProvider.ts

@@ -1,9 +1,7 @@
-// Copyright 2017-2019 @paritytech/substrate-light-ui authors & contributors
+// Copyright 2018-2020 @paritytech/substrate-light-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.
 
-/* eslint-disable @typescript-eslint/camelcase */
-
 import Coder from '@polkadot/rpc-provider/coder';
 import {
   ProviderInterface,
@@ -12,9 +10,10 @@ import {
   ProviderInterfaceEmitted,
 } from '@polkadot/rpc-provider/types';
 import { assert, logger } from '@polkadot/util';
-import { LightClient, WasmRpcClient } from '@substrate/light';
 import EventEmitter from 'eventemitter3';
 
+import { LightClient, WasmRpcClient } from './types';
+
 // Same as https://github.com/polkadot-js/api/blob/57ca9a9c3204339e1e1f693fcacc33039868dc27/packages/rpc-provider/src/ws/Provider.ts#L17
 interface SubscriptionHandler {
   callback: ProviderInterfaceCallback;
@@ -36,14 +35,7 @@ export class WasmProvider implements ProviderInterface {
     this.#coder = new Coder();
     this.light = light;
 
-    light
-      .startClient()
-      .then((rpcClient) => {
-        this.#rpcClient = rpcClient;
-        this.#isConnected = true;
-        this.emit('connected');
-      })
-      .catch((error) => l.error(error));
+    this.connect();
   }
 
   /**
@@ -61,14 +53,24 @@ export class WasmProvider implements ProviderInterface {
   }
 
   public connect(): void {
-    console.error('connect is noop');
+    this.light
+      .startClient()
+      .then((rpcClient) => {
+        this.#rpcClient = rpcClient;
+        this.#isConnected = true;
+        this.emit('connected');
+      })
+      .catch(l.error);
   }
 
   /**
-   * @description Manually disconnect from the connection, clearing autoconnect logic
+   * @description Manually disconnect from the connection.
    */
   public disconnect(): void {
-    console.error('disconnect is noop');
+    if (this.#rpcClient) {
+      l.log('Destroying WASM light client');
+      this.#rpcClient.free();
+    }
   }
 
   /**
@@ -168,9 +170,9 @@ export class WasmProvider implements ProviderInterface {
    * const rpc = new Rpc(provider);
    *
    * rpc.state.subscribeStorage([[storage.balances.freeBalance, <Address>]], (_, values) => {
-   *   console.log(values)
+   *   l.log(values)
    * }).then((subscriptionId) => {
-   *   console.log('balance changes subscription id: ', subscriptionId)
+   *   l.log('balance changes subscription id: ', subscriptionId)
    * })
    * ```
    */