Add light client support for test networks of Westend and Rococo

package.json

@@ -29,11 +29,13 @@
     "@polkadot/extension-dapp": "^0.46.2",
     "@polkadot/keyring": "^12.1.2",
     "@polkadot/networks": "^12.1.2",
+    "@polkadot/rpc-provider": "^10.9.1",
     "@polkadot/types": "^10.6.1",
     "@polkadot/ui-keyring": "^3.3.1",
     "@polkadot/ui-settings": "^3.3.1",
     "@polkadot/util": "^12.1.2",
     "@polkadot/util-crypto": "^12.1.2",
+    "@substrate/connect": "^0.7.33",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",

src/NodeInfo.js

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react'
-import { Card, Icon, Grid } from 'semantic-ui-react'
+import { Form, Card, Icon, Grid } from 'semantic-ui-react'
 
 import { useSubstrateState } from './substrate-lib'
+const INIT_URL = '/substrate-front-end-template'
 
 function Main(props) {
   const { api, socket } = useSubstrateState()
   const [nodeInfo, setNodeInfo] = useState({})
+  const [conn] = useState(window.location.href.split('?')[1] || undefined)
 
   useEffect(() => {
     const getInfo = async () => {
@@ -27,11 +29,43 @@ function Main(props) {
     <Grid.Column>
       <Card>
         <Card.Content>
+          <Form>
+            <Form.Group style={{ overflowX: 'auto', flexDirection: 'column' }}>
+              <label>Connect:</label>
+              <Form.Radio
+                label="Local"
+                name="localNode"
+                value="localNode"
+                checked={!conn}
+                onChange={() => {
+                  window.location.href = INIT_URL
+                }}
+              />
+              <Form.Radio
+                label="Westend Light Client"
+                name="westend_lc"
+                value="westend_lc"
+                checked={conn === 'westend_light_client'}
+                onChange={() => {
+                  window.location.href = INIT_URL + '?westend_light_client'
+                }}
+              />
+              <Form.Radio
+                label="Rococo Light Client"
+                name="rococo_lc"
+                value="rococo_lc"
+                checked={conn === 'rococo_light_client'}
+                onChange={() => {
+                  window.location.href = INIT_URL + '?rococo_light_client'
+                }}
+              />
+            </Form.Group>
+          </Form>
           <Card.Header>{nodeInfo.nodeName}</Card.Header>
           <Card.Meta>
             <span>{nodeInfo.chain}</span>
           </Card.Meta>
-          <Card.Description>{socket}</Card.Description>
+          {!conn ? <Card.Description>{socket}</Card.Description> : null}
         </Card.Content>
         <Card.Content extra>
           <Icon name="setting" />v{nodeInfo.nodeVersion}

src/substrate-lib/SubstrateContext.js

@@ -2,6 +2,9 @@ import React, { useReducer, useContext, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import jsonrpc from '@polkadot/types/interfaces/jsonrpc'
 import { ApiPromise, WsProvider } from '@polkadot/api'
+
+import { ScProvider } from '@polkadot/rpc-provider/substrate-connect'
+import * as Sc from '@substrate/connect'
 import { web3Accounts, web3Enable } from '@polkadot/extension-dapp'
 import { keyring as Keyring } from '@polkadot/ui-keyring'
 import { isTestChain } from '@polkadot/util'
@@ -57,16 +60,29 @@ const reducer = (state, action) => {
 ///
 // Connecting to the Substrate node
 
-const connect = (state, dispatch) => {
+const connect = async (state, dispatch) => {
   const { apiState, socket, jsonrpc } = state
   // We only want this function to be performed once
   if (apiState) return
 
   dispatch({ type: 'CONNECT_INIT' })
 
   console.log(`Connected socket: ${socket}`)
-  const provider = new WsProvider(socket)
-  const _api = new ApiPromise({ provider, rpc: jsonrpc })
+
+  let provider
+  let who = window.location.href.split('?')[1]
+
+  if (who === 'westend_light_client') {
+    provider = new ScProvider(Sc, Sc.WellKnownChain.westend2)
+    await provider.connect()
+  } else if (who === 'rococo_light_client') {
+    provider = new ScProvider(Sc, Sc.WellKnownChain.rococo_v2_2)
+    await provider.connect()
+  } else {
+    // fallback to local_api
+    provider = new WsProvider(socket)
+  }
+  const _api = new ApiPromise({ provider, jsonrpc })
 
   // Set listeners for disconnection and reconnection event.
   _api.on('connected', () => {