feat(refactor): @substrate/connect updates (#2196)

package.json

@@ -23,13 +23,13 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@ledgerhq/hw-transport-webhid": "^6.29.2",
     "@polkadot-api/merkleize-metadata": "^1.1.2",
-    "@polkadot/api": "^12.2.2",
+    "@polkadot/api": "^12.2.3",
     "@polkadot/keyring": "^13.0.2",
-    "@polkadot/rpc-provider": "10.11.2",
+    "@polkadot/rpc-provider": "^12.2.3",
     "@polkadot/util": "^13.0.2",
     "@polkadot/util-crypto": "^13.0.2",
     "@polkawatch/ddp-client": "^2.0.16",
-    "@substrate/connect": "0.7.35",
+    "@substrate/connect": "^1.1.0",
     "@w3ux/extension-assets": "0.3.1",
     "@w3ux/hooks": "1.1.0",
     "@w3ux/react-connect-kit": "1.3.1",

src/contexts/Api/index.tsx

@@ -421,11 +421,10 @@ export const APIProvider = ({ children, network }: APIProviderProps) => {
     reInitialiseApi(connectionType);
   }, [network]);
 
-  // Call `cancelFn` and `unsubscribe` on active instnace on unmount.
+  // Call `unsubscribe` on active instnace on unmount.
   useEffect(
     () => () => {
       const instance = ApiController.get(network);
-      instance?.cancelFn?.();
       instance?.unsubscribe();
     },
     []

src/controllers/Api/index.tsx

@@ -39,9 +39,7 @@ export class ApiController {
     // NOTE: This method should only be called to connect to a new network. We therefore assume we
     // want to disconnect from all other existing instances for the previous network.
     await Promise.all(
-      Object.entries(this.#instances).map(async ([key, instance]) => {
-        // Cancel pending Sc loading before destroying instance.
-        instance?.cancelFn?.();
+      Object.entries(this.#instances).map(async ([key]) => {
         await this.destroy(key as NetworkName);
       })
     );

src/model/Api/index.ts

@@ -2,19 +2,13 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { ApiPromise, WsProvider } from '@polkadot/api';
-import { ScProvider } from '@polkadot/rpc-provider/substrate-connect';
 import { SyncController } from 'controllers/Sync';
 import type { NetworkName } from 'types';
 import { NetworkList } from 'config/networks';
-import { makeCancelable } from '@w3ux/utils';
-import { WellKnownChain } from '@substrate/connect';
-import type {
-  APIEventDetail,
-  ConnectionType,
-  EventApiStatus,
-  SubstrateConnect,
-} from './types';
+import type { APIEventDetail, ConnectionType, EventApiStatus } from './types';
 import { SubscriptionsController } from 'controllers/Subscriptions';
+import { ScProvider } from '@polkadot/rpc-provider/substrate-connect';
+import * as Sc from '@substrate/connect';
 
 export class Api {
   // ------------------------------------------------------
@@ -36,9 +30,6 @@ export class Api {
   // The current connection type.
   #connectionType: ConnectionType;
 
-  // Cancel function of dynamic substrate connect import.
-  cancelFn: () => void;
-
   // ------------------------------------------------------
   // Getters.
   // ------------------------------------------------------
@@ -121,17 +112,11 @@ export class Api {
 
   // Dynamically load and connect to Substrate Connect.
   async initScProvider() {
-    // Dynamically load Substrate Connect.
-    const ScPromise = makeCancelable(import('@substrate/connect'));
-    this.cancelFn = ScPromise.cancel;
-    const Sc = (await ScPromise.promise) as SubstrateConnect;
-
     // Get light client key from network list.
-    const lightClientKey = NetworkList[this.network].endpoints
-      .lightClient as WellKnownChain;
+    const lightClientKey = NetworkList[this.network].endpoints.lightClient;
 
     // Instantiate light client provider.
-    this.#provider = new ScProvider(Sc, WellKnownChain[lightClientKey]);
+    this.#provider = new ScProvider(Sc, Sc.WellKnownChain[lightClientKey]);
     await this.#provider.connect();
   }
 

src/model/Api/types.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type * as ScType from '@substrate/connect';
 import type { NetworkName } from 'types';
 
 export interface APIConfig {
@@ -17,11 +16,6 @@ export interface APIEventDetail {
   err?: string;
 }
 
-export interface SubstrateConnect {
-  WellKnownChain: (typeof ScType)['WellKnownChain'];
-  createScClient: (typeof ScType)['createScClient'];
-}
-
 export type ConnectionType = 'ws' | 'sc';
 
 export type ApiStatus = 'connecting' | 'connected' | 'disconnected' | 'ready';

vite.config.ts

@@ -27,13 +27,6 @@ export default defineConfig({
   ],
   build: {
     outDir: 'build',
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          '@substrate/connect': ['@substrate/connect'],
-        },
-      },
-    },
   },
   server: {
     fs: {