feat: substrate-connect integration (#368)

.changeset/neat-fireants-smell.md

@@ -0,0 +1,5 @@
+---
+"@reactive-dot/core": minor
+---
+
+Added SubstrateConnect integration.

apps/docs/react/getting-started/setup.mdx

@@ -54,23 +54,17 @@ For more information on metadata syncing and type generation, please refer to th
 // `dot` is the name we gave to `npx papi add`
 import { dot } from "@polkadot-api/descriptors";
 import { defineConfig } from "@reactive-dot/core";
+import { createLightClientProvider } from "@reactive-dot/core/providers/light-client.js";
 import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";
-import { chainSpec } from "polkadot-api/chains/polkadot";
-import { getSmProvider } from "polkadot-api/sm-provider";
-import { startFromWorker } from "polkadot-api/smoldot/from-worker";
 
-const smoldot = startFromWorker(
-  new Worker(new URL("polkadot-api/smoldot/worker", import.meta.url), {
-    type: "module",
-  }),
-);
+const lightClientProvider = createLightClientProvider();
 
 export const config = defineConfig({
   chains: {
     // "polkadot" here can be any unique string value
     polkadot: {
       descriptor: dot,
-      provider: getSmProvider(smoldot.addChain({ chainSpec })),
+      provider: lightClientProvider.addRelayChain({ id: "polkadot" }),
     },
   },
   wallets: [new InjectedWalletProvider()],

apps/docs/vue/getting-started/setup.mdx

@@ -54,23 +54,17 @@ For more information on metadata syncing and type generation, please refer to th
 // `dot` is the name we gave to `npx papi add`
 import { dot } from "@polkadot-api/descriptors";
 import { defineConfig } from "@reactive-dot/core";
+import { createLightClientProvider } from "@reactive-dot/core/providers/light-client.js";
 import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";
-import { chainSpec } from "polkadot-api/chains/polkadot";
-import { getSmProvider } from "polkadot-api/sm-provider";
-import { startFromWorker } from "polkadot-api/smoldot/from-worker";
-
-const smoldot = startFromWorker(
-  new Worker(new URL("polkadot-api/smoldot/worker", import.meta.url), {
-    type: "module",
-  }),
-);
+
+const lightClientProvider = createLightClientProvider();
 
 export const config = defineConfig({
   chains: {
     // "polkadot" here can be any unique string value
     polkadot: {
       descriptor: dot,
-      provider: getSmProvider(smoldot.addChain({ chainSpec })),
+      provider: lightClientProvider.addRelayChain({ id: "polkadot" }),
     },
   },
   wallets: [new InjectedWalletProvider()],

examples/react/.papi/descriptors/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-autogenerated.2857293709118977602",
+  "version": "0.1.0-autogenerated.14047238154392085370",
   "name": "@polkadot-api/descriptors",
   "files": [
     "dist"

examples/react/.papi/polkadot-api.json

@@ -6,6 +6,14 @@
       "chain": "polkadot",
       "metadata": ".papi/metadata/polkadot.scale"
     },
+    "polkadot_asset_hub": {
+      "chain": "polkadot_asset_hub",
+      "metadata": ".papi/metadata/polkadot_asset_hub.scale"
+    },
+    "polkadot_people": {
+      "chain": "polkadot_people",
+      "metadata": ".papi/metadata/polkadot_people.scale"
+    },
     "kusama": {
       "chain": "ksmcc3",
       "metadata": ".papi/metadata/kusama.scale"

examples/react/src/config.ts

@@ -1,42 +1,41 @@
-import { kusama, polkadot, westend } from "@polkadot-api/descriptors";
+import {
+  kusama,
+  polkadot,
+  polkadot_asset_hub,
+  polkadot_people,
+  westend,
+} from "@polkadot-api/descriptors";
 import { defineConfig } from "@reactive-dot/core";
+import { createLightClientProvider } from "@reactive-dot/core/providers/light-client.js";
 import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";
 import { LedgerWallet } from "@reactive-dot/wallet-ledger";
 import { WalletConnect } from "@reactive-dot/wallet-walletconnect";
-import { getSmProvider } from "polkadot-api/sm-provider";
-import { startFromWorker } from "polkadot-api/smoldot/from-worker";
 
-const smoldot = startFromWorker(
-  new Worker(new URL("polkadot-api/smoldot/worker", import.meta.url), {
-    type: "module",
-  }),
-);
+const lightClientProvider = createLightClientProvider();
+
+const polkadotProvider = lightClientProvider.addRelayChain({ id: "polkadot" });
 
 export const config = defineConfig({
   chains: {
     polkadot: {
       descriptor: polkadot,
-      provider: getSmProvider(
-        import("polkadot-api/chains/polkadot").then(({ chainSpec }) =>
-          smoldot.addChain({ chainSpec }),
-        ),
-      ),
+      provider: polkadotProvider,
+    },
+    polkadot_asset_hub: {
+      descriptor: polkadot_asset_hub,
+      provider: polkadotProvider.addParachain({ id: "polkadot_asset_hub" }),
+    },
+    polkadot_people: {
+      descriptor: polkadot_people,
+      provider: polkadotProvider.addParachain({ id: "polkadot_people" }),
     },
     kusama: {
       descriptor: kusama,
-      provider: getSmProvider(
-        import("polkadot-api/chains/ksmcc3").then(({ chainSpec }) =>
-          smoldot.addChain({ chainSpec }),
-        ),
-      ),
+      provider: lightClientProvider.addRelayChain({ id: "kusama" }),
     },
     westend: {
       descriptor: westend,
-      provider: getSmProvider(
-        import("polkadot-api/chains/westend2").then(({ chainSpec }) =>
-          smoldot.addChain({ chainSpec }),
-        ),
-      ),
+      provider: lightClientProvider.addRelayChain({ id: "westend" }),
     },
   },
   wallets: [

examples/vue/.papi/descriptors/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-autogenerated.2857293709118977602",
+  "version": "0.1.0-autogenerated.14047238154392085370",
   "name": "@polkadot-api/descriptors",
   "files": [
     "dist"

examples/vue/.papi/polkadot-api.json

@@ -6,6 +6,14 @@
       "chain": "polkadot",
       "metadata": ".papi/metadata/polkadot.scale"
     },
+    "polkadot_asset_hub": {
+      "chain": "polkadot_asset_hub",
+      "metadata": ".papi/metadata/polkadot_asset_hub.scale"
+    },
+    "polkadot_people": {
+      "chain": "polkadot_people",
+      "metadata": ".papi/metadata/polkadot_people.scale"
+    },
     "kusama": {
       "chain": "ksmcc3",
       "metadata": ".papi/metadata/kusama.scale"

examples/vue/src/config.ts

@@ -1,43 +1,61 @@
-import { kusama, polkadot, westend } from "@polkadot-api/descriptors";
+import {
+  kusama,
+  polkadot,
+  polkadot_asset_hub,
+  polkadot_people,
+  westend,
+} from "@polkadot-api/descriptors";
 import { defineConfig } from "@reactive-dot/core";
+import { createLightClientProvider } from "@reactive-dot/core/providers/light-client.js";
 import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";
-import { getSmProvider } from "polkadot-api/sm-provider";
-import { startFromWorker } from "polkadot-api/smoldot/from-worker";
+import { LedgerWallet } from "@reactive-dot/wallet-ledger";
+import { WalletConnect } from "@reactive-dot/wallet-walletconnect";
 
-const smoldot = startFromWorker(
-  new Worker(new URL("polkadot-api/smoldot/worker", import.meta.url), {
-    type: "module",
-  }),
-);
+const lightClientProvider = createLightClientProvider();
+
+const polkadotProvider = lightClientProvider.addRelayChain({ id: "polkadot" });
 
 export const config = defineConfig({
   chains: {
     polkadot: {
       descriptor: polkadot,
-      provider: getSmProvider(
-        import("polkadot-api/chains/polkadot").then(({ chainSpec }) =>
-          smoldot.addChain({ chainSpec }),
-        ),
-      ),
+      provider: polkadotProvider,
+    },
+    polkadot_asset_hub: {
+      descriptor: polkadot_asset_hub,
+      provider: polkadotProvider.addParachain({ id: "polkadot_asset_hub" }),
+    },
+    polkadot_people: {
+      descriptor: polkadot_people,
+      provider: polkadotProvider.addParachain({ id: "polkadot_people" }),
     },
     kusama: {
       descriptor: kusama,
-      provider: getSmProvider(
-        import("polkadot-api/chains/ksmcc3").then(({ chainSpec }) =>
-          smoldot.addChain({ chainSpec }),
-        ),
-      ),
+      provider: lightClientProvider.addRelayChain({ id: "kusama" }),
     },
     westend: {
       descriptor: westend,
-      provider: getSmProvider(
-        import("polkadot-api/chains/westend2").then(({ chainSpec }) =>
-          smoldot.addChain({ chainSpec }),
-        ),
-      ),
+      provider: lightClientProvider.addRelayChain({ id: "westend" }),
     },
   },
   wallets: [
-    new InjectedWalletProvider({ originName: "ReactiveDOT Vue Example" }),
+    new InjectedWalletProvider({ originName: "ReactiveDOT React Example" }),
+    new LedgerWallet(),
+    new WalletConnect({
+      projectId: "68f5b7e972a51cf379b127f51a791c34",
+      providerOptions: {
+        metadata: {
+          name: "ReactiveDOT example",
+          description: "Simple React App showcasing ReactiveDOT",
+          url: globalThis.location.origin,
+          icons: ["https://walletconnect.com/walletconnect-logo.png"],
+        },
+      },
+      chainIds: [
+        "polkadot:91b171bb158e2d3848fa23a9f1c25182", // Polkadot
+        "polkadot:b0a8d493285c2df73290dfb7e61f870f", // Kusama
+        "polkadot:e143f23803ac50e8f6f8e62695d1ce9e", // Westend
+      ],
+    }),
   ],
 });

packages/core/package.json

@@ -25,6 +25,7 @@
   ],
   "exports": {
     ".": "./build/index.js",
+    "./providers/light-client.js": "./build/providers/light-client/index.js",
     "./wallets.js": "./build/wallets/index.js",
     "./internal/maths.js": "./build/maths/index.js",
     "./internal.js": "./build/internal.js"
@@ -36,7 +37,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@reactive-dot/utils": "workspace:^"
+    "@reactive-dot/utils": "workspace:^",
+    "@substrate/smoldot-discovery": "^2.0.1"
   },
   "devDependencies": {
     "@reactive-dot/eslint-config": "workspace:^",

packages/core/src/actions/get-client.ts

@@ -1,16 +1,32 @@
 import type { ChainConfig } from "../config.js";
+import {
+  createClientFromLightClientProvider,
+  isLightClientProvider,
+  type LightClientProvider,
+} from "../providers/light-client/provider.js";
 import { createClient } from "polkadot-api";
 import type { JsonRpcProvider } from "polkadot-api/ws-provider/web";
 
 export async function getClient(chainConfig: ChainConfig) {
   const providerOrGetter = await chainConfig.provider;
 
+  if (isLightClientProvider(providerOrGetter)) {
+    return createClientFromLightClientProvider(providerOrGetter);
+  }
+
   // Hack to detect wether function is a `JsonRpcProvider` or a getter of `JsonRpcProvider`
-  const provider = await (providerOrGetter.length > 0
-    ? (providerOrGetter as JsonRpcProvider)
+  const providerOrController = await (providerOrGetter.length > 0
+    ? (providerOrGetter as JsonRpcProvider | LightClientProvider)
     : (
-        providerOrGetter as Exclude<typeof providerOrGetter, JsonRpcProvider>
+        providerOrGetter as Exclude<
+          typeof providerOrGetter,
+          JsonRpcProvider | LightClientProvider
+        >
       )());
 
-  return createClient(provider);
+  if (isLightClientProvider(providerOrController)) {
+    return createClientFromLightClientProvider(providerOrController);
+  }
+
+  return createClient(providerOrController);
 }

packages/core/src/config.ts

@@ -1,11 +1,12 @@
+import type { LightClientProvider } from "./providers/light-client/provider.js";
 import type { Gettable } from "./types.js";
 import type { Wallet, WalletProvider } from "./wallets/index.js";
 import type { JsonRpcProvider } from "@polkadot-api/json-rpc-provider";
 import type { ChainDefinition } from "polkadot-api";
 
 export type ChainConfig = {
   readonly descriptor: ChainDefinition;
-  readonly provider: Gettable<JsonRpcProvider>;
+  readonly provider: Gettable<JsonRpcProvider | LightClientProvider>;
 };
 
 export type Config<

packages/core/src/providers/light-client/index.ts

@@ -0,0 +1 @@
+export { createLightClientProvider } from "./provider.js";