Adjust light relay/para mappings (#8059)

* Adjust light relay/para mappings

* Adjust resolveJsonModule

packages/react-api/src/Api.tsx

@@ -3,7 +3,7 @@
 
 import type { LinkOption } from '@polkadot/apps-config/endpoints/types';
 import type { InjectedExtension } from '@polkadot/extension-inject/types';
-import type { ProviderInterface, ProviderStats } from '@polkadot/rpc-provider/types';
+import type { ProviderStats } from '@polkadot/rpc-provider/types';
 import type { ChainProperties, ChainType } from '@polkadot/types/interfaces';
 import type { KeyringStore } from '@polkadot/ui-keyring/types';
 import type { ApiProps, ApiState } from './types';
@@ -11,7 +11,7 @@ import type { ApiProps, ApiState } from './types';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import store from 'store';
 
-import { ApiPromise, WsProvider } from '@polkadot/api';
+import { ApiPromise, ScProvider, WsProvider } from '@polkadot/api';
 import { deriveMapCache, setDeriveCache } from '@polkadot/api-derive/util';
 import { ethereumChains, typesBundle } from '@polkadot/apps-config';
 import { web3Accounts, web3Enable } from '@polkadot/extension-dapp';
@@ -19,14 +19,13 @@ import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import { StatusContext } from '@polkadot/react-components/Status';
 import { useApiUrl, useEndpoint } from '@polkadot/react-hooks';
 import ApiSigner from '@polkadot/react-signer/signers/ApiSigner';
-import { ScProvider, WellKnownChain } from '@polkadot/rpc-provider/substrate-connect';
 import { keyring } from '@polkadot/ui-keyring';
 import { settings } from '@polkadot/ui-settings';
 import { formatBalance, isNumber, isTestChain, objectSpread, stringify } from '@polkadot/util';
 import { defaults as addressDefaults } from '@polkadot/util-crypto/address/defaults';
 
 import ApiContext from './ApiContext';
-import { lightSpecs } from './light-client-specs';
+import { lightSpecs, relaySpecs } from './lightClient';
 import registry from './typeRegistry';
 import { decodeUrlTypes } from './urlTypes';
 
@@ -235,44 +234,40 @@ async function loadOnReady (api: ApiPromise, endpoint: LinkOption | null, inject
   };
 }
 
-function getLightProvider (chain = 'polkadot') {
-  const [relayArg, paraArg] = chain.split('/');
+/**
+ * @internal
+ * Creates a ScProvider from a <relay>[/parachain] string
+ */
+function getLightProvider (chain: string): ScProvider {
+  const [sc, relayName, paraName] = chain.split('/');
 
-  const wellKnown = () => {
-    switch (relayArg) {
-      case 'kusama':
-        return WellKnownChain.ksmcc3;
-      case 'polkadot':
-        return WellKnownChain.polkadot;
-      case 'rococo':
-        return WellKnownChain.rococo_v2_2;
-      case 'westend':
-        return WellKnownChain.westend2;
-      default:
-        throw new Error(`Unable to construct light chain ${chain}`);
-    }
-  };
+  if (sc !== 'substrate-connect') {
+    throw new Error(`Cannot connect to non substrate-connect protocol ${chain}`);
+  } else if (!relaySpecs[relayName] || (paraName && (!lightSpecs[relayName] || !lightSpecs[relayName][paraName]))) {
+    throw new Error(`Unable to construct light chain ${chain}`);
+  }
 
-  const relay = new ScProvider(wellKnown());
+  const relay = new ScProvider(relaySpecs[relayName]);
 
-  return paraArg && lightSpecs[paraArg]
-    ? new ScProvider(JSON.stringify(lightSpecs[paraArg]), relay)
+  return paraName
+    ? new ScProvider(lightSpecs[relayName][paraName], relay)
     : relay;
 }
 
+/**
+ * @internal
+ */
 async function createApi (apiUrl: string, signer: ApiSigner, onError: (error: unknown) => void): Promise<Record<string, Record<string, string>>> {
   const types = getDevTypes();
   const isLight = apiUrl.startsWith('light://');
 
   try {
-    const providers = [0].map((): ProviderInterface =>
-      isLight
-        ? getLightProvider(apiUrl.replace('light://substrate-connect/', ''))
-        : new WsProvider(apiUrl)
-    );
+    const provider = isLight
+      ? getLightProvider(apiUrl.replace('light://', ''))
+      : new WsProvider(apiUrl);
 
     api = new ApiPromise({
-      provider: providers[0],
+      provider,
       registry,
       signer,
       types,
@@ -281,9 +276,7 @@ async function createApi (apiUrl: string, signer: ApiSigner, onError: (error: un
 
     // See https://github.com/polkadot-js/api/pull/4672#issuecomment-1078843960
     if (isLight) {
-      for (let i = 0; i < providers.length; i++) {
-        await providers[i].connect();
-      }
+      await provider.connect();
     }
   } catch (error) {
     onError(error);

packages/react-api/src/lightClient/index.ts

@@ -0,0 +1,28 @@
+// Copyright 2017-2022 @polkadot/react-api authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { ScProvider } from '@polkadot/api';
+
+import { specs as kusama } from './kusama';
+
+export const lightSpecs: Record<string, Record<string, string>> =
+  Object
+    .entries<Record<string, unknown>>({ kusama })
+    .reduce((relays: Record<string, Record<string, string>>, [k, s]) => {
+      relays[k] = Object
+        .entries<unknown>(s)
+        .reduce((paras: Record<string, string>, [k, v]) => {
+          paras[k] = JSON.stringify(v);
+
+          return paras;
+        }, {});
+
+      return relays;
+    }, {});
+
+export const relaySpecs: Record<string, string> = {
+  kusama: ScProvider.WellKnownChain.ksmcc3,
+  polkadot: ScProvider.WellKnownChain.polkadot,
+  rococo: ScProvider.WellKnownChain.rococo_v2_2,
+  westend: ScProvider.WellKnownChain.westend2
+};

packages/react-api/src/lightClient/kusama/index.ts

@@ -1,15 +1,13 @@
 // Copyright 2017-2022 @polkadot/react-api authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/* eslint sort-keys: ["error", "asc", { caseSensitive: false }] */
-
-import gmSpec from './gm.json';
-import tinkernetSpec from './tinkernet.json';
+import gm from './gm.json' assert { type: 'json' };
+import tinkernet from './tinkernet.json' assert { type: 'json' };
 
 // Add your imported spec here in alphabetical order.
 // The key here reflects the URL of the light client endpoint.
 // e.g. light://substrate-connect/kusama/gm
-export const lightSpecs: Record<string, unknown> = {
-  gm: gmSpec,
-  tinkernet: tinkernetSpec
+export const specs: Record<string, unknown> = {
+  gm,
+  tinkernet
 };

tsconfig.base.json

@@ -3,6 +3,7 @@
 	"compilerOptions": {
     "composite": false,
     "jsx": "react",
+    "resolveJsonModule": true,
 		"paths": {
       "@polkadot/apps/*": ["apps/src/*"],
       "@polkadot/apps": ["apps/src"],

tsconfig.build.json

@@ -2,8 +2,7 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": "./packages",
-    "outDir": "./build",
-    "resolveJsonModule": true,
+    "outDir": "./build"
   },
   "exclude": [
     "build/**/*",