Slow App Loading with Substrate Connect Extension; Direct API Use Didn't Help

[71walceli]

We're using the Substrate Connect (SC) extension to speed up blockchain connections, but our app still loads slowly in production, often taking 10+ seconds.

• On localhost, the app connects in less than 5 seconds.
• On deployed instances, the connection speed is inconsistent and mostly slow, similar to not using SC at all.
• As a workaround, we tried using createScProvider directly, but no chain or parachain would connect with it, rendering app totally useless.

Steps to reproduce the issue

Steps to Reproduce the Issue

1. Get to deployed instances
2. App will take some time to load, as usual
3. Install Substrate Connect extension (0.14.2).
4. Run the app locally and observe the fast connection.
5. Get to deployed instance.
6. App may or may not load faster. Reload nornally or bypassing cache.
7. Whenevber you reload, app's URL won't show up in SC addon UI, until it seems to get loaded.

Describe the results you received

• With SC extension installed:
  • Localhost: Fast connection (<2s)
  • Deployed instance: Mostly 10+ seconds, sometimes faster as expected, but it feels as though SC wasn't installed for the most part.
• With createScProvider directly:
  • No connection at all (no chain or parachain connects)

Describe the results you expected

• With the SC extension installed, the app should consistently load faster both locally and when deployed.
• Using createScProvider should allow us to connect directly.

Substrate-Connect version

0.14.2 (latest release & GitHub tag)

Provider

Chrome

Browser version

Brave Version 1.76.74 Chromium: 134.0.6998.89 (Official Build) (64-bit)

Additional environment details

No response

Additional information

• Issue #2607 – Related to SC API not connecting.
• ReactiveDOT Issue #568 – Related issue.

Key Question:

Why does the app fail to load quickly in production despite the SC extension? Could this be an issue with how the extension interacts with deployed environments?

This keeps the focus on the slow loading issue, while mentioning the direct API attempt as a failed workaround. Let me know if you'd like further refinements! 😊

Screenshots

• Video of the issue: Watch here.
• Result of using the API directly
  • 

Would appreciate any insights or fixes! 🚀

[71walceli]

So I tried adapting ReactiveDOT config to use @substrate/connect APIs

import {
  polkadot,
  polkadot_people,
  ksmcc3,
  ksmcc3_people,
  westend2,
  westend2_people,
  paseo,
  paseo_people,
} from "@polkadot-api/descriptors";
import { createScClient, WellKnownChain } from "@substrate/connect";
import { defineConfig, type ChainConfig, type Config } from "@reactive-dot/core";
import { LedgerWallet } from "@reactive-dot/wallet-ledger";
import { WalletConnect } from "@reactive-dot/wallet-walletconnect";
import { registerDotConnect } from "dot-connect";
import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";

const getProviders = async () => {
  const lightClientProvider = createScClient();
  const polkadotProvider = await lightClientProvider.addWellKnownChain(WellKnownChain.polkadot);
  const kusamaProvider = await lightClientProvider.addWellKnownChain(WellKnownChain.ksmcc3);
  const paseoProvider = await lightClientProvider.addWellKnownChain(WellKnownChain.paseo);
  const westendProvider = await lightClientProvider.addWellKnownChain(WellKnownChain.westend2);

  return {
    lightClientProvider,
    polkadot: polkadotProvider,
    ksmcc3: kusamaProvider, 
    paseo: paseoProvider,
    westend: westendProvider
  };};
export let providers = await getProviders();

export type ApiConfig = Config & {
  chains: Record<
    string,
    ChainConfig & {
      name: string;
      symbol: string;
      registrarIndex?: number;
    }
  >;
};

export const config = defineConfig({
  chains: {
    polkadot: {
      name: "Polkadot",
      symbol: "DOT",
      descriptor: polkadot,
      provider: providers.polkadot,
    },
    polkadot_people: {
      name: "Polkadot People",
      symbol: "DOT",
      descriptor: polkadot_people,
      provider: await providers.polkadot.addChain(JSON.stringify(polkadot_people)),
      registrarIndex: import.meta.env.VITE_APP_REGISTRAR_INDEX__PEOPLE_POLKADOT,
    },

    ksmcc3: {
      name: "Kusama",
      symbol: "KSM",
      descriptor: ksmcc3,
      provider: providers.ksmcc3,
    },
    ksmcc3_people: {
      name: "Kusama People",
      symbol: "KSM",
      descriptor: ksmcc3_people,
      provider: await providers.ksmcc3.addChain(JSON.stringify(ksmcc3_people)),
      registrarIndex: import.meta.env.VITE_APP_REGISTRAR_INDEX__PEOPLE_KUSAMA,
    },

    paseo: {
      name: "Paseo",
      symbol: "PAS",
      descriptor: paseo,
      provider: providers.paseo,
    },
    paseo_people: {
      name: "Paseo People",
      symbol: "PAS",
      descriptor: paseo_people,
      provider: await providers.paseo.addChain(JSON.stringify(paseo_people)),
      registrarIndex: import.meta.env.VITE_APP_REGISTRAR_INDEX__PEOPLE_PASEO,
    },

    westend2: {
      name: "Westend",
      symbol: "WND",
      descriptor: westend2,
      provider: providers.westend,
    },
    westend2_people: {
      name: "Westend People",
      symbol: "WND",
      descriptor: westend2_people,
      provider: await providers.westend.addChain(JSON.stringify(westend2_people)),
      registrarIndex: import.meta.env.VITE_APP_REGISTRAR_INDEX__PEOPLE_WESTEND,
    },
  },
  targetChains: import.meta.env.VITE_APP_AVAILABLE_CHAINS 
    ? import.meta.env.VITE_APP_AVAILABLE_CHAINS.split(',').map(key => key.trim())
    : ["polkadot_people", "ksmcc3_people", "westend2_people", "rococo_people"]
  ,
  wallets: [
    new InjectedWalletProvider(),
    new LedgerWallet(),
    new WalletConnect({
      projectId: import.meta.env.VITE_APP_WALLET_CONNECT_PROJECT_ID,
      providerOptions: {
        metadata: {
          name: "w3reg",
          description: "web3 registrar.",
          url: globalThis.origin,
          icons: ["/logo.png"],
        },
      },
      chainIds: [
        "polkadot:67fa177a097bfa18f77ea95ab56e9bcd", // people-polkadot
        "polkadot:1eb6fb0ba5187434de017a70cb84d4f4", // people-westend
        "polkadot:c1af4cb4eb3918e5db15086c0cc5ec17", // people-ksmcc3
      ],
      optionalChainIds: [
        // "polkadot:42a6fe2a73c2a8920a8ece6bdbaa63fc", // people-rococo
        "polkadot:91b171bb158e2d3848fa23a9f1c25182", // polkadot
        "polkadot:b0a8d493285c2df73290dfb7e61f870f", // ksmcc3
        "polkadot:e143f23803ac50e8f6f8e62695d1ce9e", // westend
      ],
    }),
  ],
} as const satisfies ApiConfig);

// Register dot-connect custom elements & configure supported wallets
registerDotConnect({
  wallets: config.wallets,
});

[ryanleecode]

I've submitted a new version with latest chainspecs (few hours for approval), let me know if it is better. however they were old 3 weeks old so i dont think it should have big impact.

I've tried connecting to https://dev.w3reg.org/ and yes i can see its quite slow. I cannot compare to local dev since i don't have access to your environment though / nor do i know where the codebase is.

[71walceli]

You can locally test w3registrar if you'd like...

[71walceli]

I got 0.14.3 running. Now we wonder if it has to do with the way we set up reactiveDOT/PAPI, as it still seems to work 100% locally. I actually noticed, on reload, it might manage to connect quickly. Only that single reload does it load up fast. Subsequent reloads are always slower. Website's URL wouldn't show up in SC extension.

We have following questions and considerations:

• Is it necessary to use some @substrate-connect API?
• Does it have to do with something lower level, such as some smoldot/PAPI/reactiveDOT script being deferred or somehow loading late?
• Does it have to do with our Web Server or Cloudflare setup?

Maybe it does load faster every first time dev.w3reg.org is visited for the first time... idk...

[71walceli]

Or maybe it's trying to connect to insecure bootnodes. That might work with localhost, but not with any HTTPS Web service on any browser...

I could see more than 100 of those grouped messages.

[71walceli]

Ways to go:

• Disable all non-HTTPS bootnodes in SC extension
• Make smoldot skip insecure bootnodes
• Cen a chain spec with only HTTPS bootnodes.

Wouldn't hurt to know how SC hooks into our app.

Thanks a lot for the attention given!

[ryanleecode]

Ways to go:

• Disable all non-HTTPS bootnodes in SC extension
• Make smoldot skip insecure bootnodes
• Cen a chain spec with only HTTPS bootnodes.

Wouldn't hurt to know how SC hooks into our app.

Thanks a lot for the attention given!

Very interesting! I will look into this