add substrate-connect tutorial

[bernardoaraujor]

Submitting for preliminary review.

The tutorial shouldn't be published until https://github.com/paritytech/devops/issues/1724 is closed, because currently the bootnodes on Statemint chainspec don't provide WebSockets yet.

Ready.

[netlify]

✅ Deploy Preview for substrate-docs-md ready!

Name	Link
🔨 Latest commit	1454831
🔍 Latest deploy log	https://app.netlify.com/sites/substrate-docs-md/deploys/62b0f61c474f2a0008bb7c91
😎 Deploy Preview	https://deploy-preview-1122--substrate-docs-md.netlify.app/tutorials/light-clients/browser-extension
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[wirednkod]

Its good to mention here that these tutorials are using the @polkadot/rpc-provider/substrate-connect that is created using substrate-connect in order to interact with (and only) polkadotJS - for faster and easy integration.

For more advanced implementations (e.g. for library authors) @substrate-connect should be installed/used

[bernardoaraujor]

Its good to mention here that these tutorials are using the @polkadot/rpc-provider/substrate-connect that is created using substrate-connect in order to interact with (and only) polkadotJS - for faster and easy integration.

For more advanced implementations (e.g. for library authors) @substrate-connect should be installed/used

@wirednkod added a few words via 8c5c691

[bernardoaraujor]

@sacha-l https://github.com/paritytech/devops/issues/1724 is closed, PR is ready for review/merging.

[netlify]

✅ Deploy Preview for substrate-docs ready!

Name	Link
🔨 Latest commit	d287b67
🔍 Latest deploy log	https://app.netlify.com/sites/substrate-docs/deploys/62b60926f88d6f0009f0faa9
😎 Deploy Preview	https://deploy-preview-1122--substrate-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[nuke-web3]

LGTM now, pending Lisa's OK

[nuke-web3]

@lisa-parity you approve of the structure here? We can refactor if you think it is needed, and/or move to the "right place" in nav

[lisa-parity]

@bernardoaraujor , I just have a couple of questions:

• Should this be a standalone tutorial section with only light client node topics (will there be more tutiorials that would go into the section?)mor should it go into the Get started section or should it go into an Integrate tools section (where I could see adding other tutorials, for example something about using Sidecar)?
• What's the thinking about splitting this into multiple files? It doesn't quite seem like there's quite enough material for splitting it up but the first part seems glossed over a bit.

I'll try to run through the tutorial(s) myself this week and then maybe I'll have a clear idea about what it is divided up like this.

[bernardoaraujor]

@bernardoaraujor , I just have a couple of questions:

• Should this be a standalone tutorial section with only light client node topics (will there be more tutiorials that would go into the section?)mor should it go into the Get started section or should it go into an Integrate tools section (where I could see adding other tutorials, for example something about using Sidecar)?

In regards to section, it doesn't have to be a standalone tutorial section. Either Get Started or Integrate Tools is fine. I'm not planning on writing anything else, but maybe @wirednkod could decide to do so in the future.

• What's the thinking about splitting this into multiple files? It doesn't quite seem like there's quite enough material for splitting it up but the first part seems glossed over a bit.

Just for conceptual organization, but we could merge it all into a single file if you prefer.

[wirednkod]

This is a webpack config issue. In details you will need:

• install buffer in your dev dependencies:
  yarn add -D buffer or npm i --save-dev buffer
• Add it in the webpack.config.js:

  resolve: {
    fallback: {
      buffer: require.resolve("buffer")
    },

Have a look at this config that I have used in a minimal demo, using substrate connect.

[lisa-parity]

okay one more ?, I have gotten everything working, but when I connect to the statemint.json, the console displays:
[smoldot] Chain initialization complete for polkadot. Name: "Polkadot". Genesis hash: 0x91b1…90c3. State root hash: 0x29d0d972cd27cbc511e9589fcb7a4506d5eb6a9e8df205f00472e5ab354a4e17. Network identity: 12D3KooWRse9u6Z9ukP4C92YCCH2gXziNm8ThRch2owaaFh9H6D1. Chain specification or database starting at: 0xae3e…f81d (#11228238)
smoldot-light.js:38 [sync-service-polkadot] GrandPa warp sync still in progress and taking a long time

smoldot-light.js:41 [sync-service-polkadot] GrandPa warp sync finished to #11335898 (0x1c1a…3847)
smoldot-light.js:41 [runtime-polkadot] Finalized block runtime ready. Spec version: 9250. Size of :code: 1.2 MiB.
smoldot-light.js:41 [smoldot] Parachain initialization complete for statemint. Name: "Statemint". Genesis hash: 0x68d5…de2f. State root hash: 0xc1ef26b567de07159e4ecd415fbbb0340c56a09c4d72c82516d0f3bc2b782c80. Network identity: 12D3KooWArq3iZHdK2jtRZSJzJkkWrKm17JTa9kjwjZkq9Htx5xR. Relay chain: polkadot (id: 1000)

then messages like this:
[smoldot] Smoldot v0.6.25. Current memory usage: 140 MiB. Average download: 39.8 kiB/s. Average upload: 460 B/s.
smoldot-light.js:41
[smoldot] Smoldot v0.6.25. Current memory usage: 141 MiB. Average download: 12.1 kiB/s. Average upload: 195 B/s.

not the output from this line:
console.log(New block #${lastHeader.number} has hash ${lastHeader.hash});

maybe related to this:

[wirednkod]

not the output from this line: console.log(New block #${lastHeader.number} has hash ${lastHeader.hash});

Long story short - in order to connect to any relay/para chain the bootnodes need to be listening for WebSocket connections (see this request towards devops that explain bit more). I am not sure if for Statemint this is the case. For sure this works for Westend and Westmint, and you can check this parachain demo that implements I assume the example you want to implement.

EDIT: Actually wss is active for bootnodes of statemint (as can be seen here). I replicated what I think you try to do, by altering the demo linked above, and I managed to connect to statemint.

[lisa-parity]

Thanks for all of you help, @wirednkod ! I got it all working (though your demos are much cooler 😉).
I consolidated the pages and couldn't think of a good way to do that using this PR, so I created a separate one for the content I tested.
Closing this PR in favor of #1312