Retrieve light specs via import(...) (#8062)

* Retrieve light specs via import(...)

* Dynamic paths

* Remove assert

packages/react-api/src/Api.tsx

@@ -25,7 +25,7 @@ import { formatBalance, isNumber, isTestChain, objectSpread, stringify } from '@
 import { defaults as addressDefaults } from '@polkadot/util-crypto/address/defaults';
 
 import ApiContext from './ApiContext';
-import { lightSpecs, relaySpecs } from './lightClient';
+import { lightSpecs, relaySpecs } from './light';
 import registry from './typeRegistry';
 import { decodeUrlTypes } from './urlTypes';
 
@@ -238,7 +238,7 @@ async function loadOnReady (api: ApiPromise, endpoint: LinkOption | null, inject
  * @internal
  * Creates a ScProvider from a <relay>[/parachain] string
  */
-function getLightProvider (chain: string): ScProvider {
+async function getLightProvider (chain: string): Promise<ScProvider> {
   const [sc, relayName, paraName] = chain.split('/');
 
   if (sc !== 'substrate-connect') {
@@ -249,9 +249,15 @@ function getLightProvider (chain: string): ScProvider {
 
   const relay = new ScProvider(relaySpecs[relayName]);
 
-  return paraName
-    ? new ScProvider(lightSpecs[relayName][paraName], relay)
-    : relay;
+  if (!paraName) {
+    return relay;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const specMod = await import(`${lightSpecs[relayName][paraName]}`);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  return new ScProvider(JSON.stringify(specMod.default), relay);
 }
 
 /**
@@ -263,7 +269,7 @@ async function createApi (apiUrl: string, signer: ApiSigner, onError: (error: un
 
   try {
     const provider = isLight
-      ? getLightProvider(apiUrl.replace('light://', ''))
+      ? await getLightProvider(apiUrl.replace('light://', ''))
       : new WsProvider(apiUrl);
 
     api = new ApiPromise({

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

@@ -7,17 +7,17 @@ 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);
+    .entries<Record<string, string>>({ kusama })
+    .reduce((all: Record<string, Record<string, string>>, [r, v]) => {
+      all[r] = Object
+        .entries<string>(v)
+        .reduce((specs: Record<string, string>, [k, v]) => {
+          specs[k] = `./light/${r}/${v}`;
 
-          return paras;
+          return specs;
         }, {});
 
-      return relays;
+      return all;
     }, {});
 
 export const relaySpecs: Record<string, string> = {

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

@@ -1,13 +1,10 @@
 // Copyright 2017-2022 @polkadot/react-api authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-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 specs: Record<string, unknown> = {
-  gm,
-  tinkernet
+export const specs: Record<string, string> = {
+  gm: 'gm.json',
+  tinkernet: 'tinkernet.json'
 };