Fixing (#227)

* Supporting bigInt in production and reading rpc query parameter correctly

* Fixing issue when React strict mode is enabled, and better logic for keyring initialization

README.md

@@ -64,12 +64,12 @@ When writing and deploying your own front end, you should configure:
 - `DEVELOPMENT_KEYRING` in `src/config/common.json` be set to `false`.
   See [Keyring](https://polkadot.js.org/docs/api/start/keyring).
 
-### Specifying Connecting Node
+### Specifying Connecting WebSocket
 
 There are two ways to specify it:
 
 - With `PROVIDER_SOCKET` in `{common, development, production}.json`.
-- With `rpc=<ws or wss connection>` query paramter after the URL. This overrides the above setting.
+- With `rpc=<ws or wss connection>` query parameter after the URL. This overrides the above setting.
 
 ## Reusable Components
 
@@ -114,3 +114,23 @@ You can reuse this component for a wide variety of queries and transactions. See
 The [Account Selector](./src/AccountSelector.js) provides the user with a unified way to
 select their account from a keyring. If the Balances module is installed in the runtime,
 it also displays the user's token balance. It is included in the template already.
+
+## Miscellaneous
+
+- Polkadot-js API and related crypto libraries depend on [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) that is only supported by modern browsers. To ensure that react-scripts properly transpile your webapp code, update the `package.json` file:
+
+  ```json
+  {
+    "browserslist": {
+      "production": [
+        ">0.2%",
+        "not ie <= 99",
+        "not android <= 4.4.4",
+        "not dead",
+        "not op_mini all"
+      ]
+    }
+  }
+  ```
+
+  Refer to [this doc page](https://github.com/vacp2p/docs.wakuconnect.dev/blob/develop/content/docs/guides/07_reactjs_relay.md).

package.json

@@ -39,7 +39,7 @@
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.0",
     "semantic-ui-css": "Semantic-Org/Semantic-UI-CSS#master",
-    "semantic-ui-react": "^2.0.4",
+    "semantic-ui-react": "^2.1.1",
     "stream-browserify": "^3.0.0"
   },
   "devDependencies": {
@@ -65,6 +65,8 @@
   "browserslist": {
     "production": [
       ">0.2%",
+      "not ie <= 99",
+      "not android <= 4.4.4",
       "not dead",
       "not op_mini all"
     ],

src/config/common.json

@@ -1,5 +1,4 @@
 {
-  "APP_NAME": "substrate-front-end-tutorial",
-  "DEVELOPMENT_KEYRING": true,
-  "RPC": {}
+  "APP_NAME": "substrate-front-end-template",
+  "CUSTOM_RPC_METHODS": {}
 }

src/config/development.json

@@ -1,3 +1,4 @@
 {
-  "PROVIDER_SOCKET": "ws://127.0.0.1:9944"
+  "PROVIDER_SOCKET": "ws://127.0.0.1:9944",
+  "DEVELOPMENT_KEYRING": true
 }

src/index.js

@@ -3,4 +3,9 @@ import ReactDOM from 'react-dom'
 
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

src/substrate-lib/SubstrateContext.js

@@ -4,21 +4,19 @@ import jsonrpc from '@polkadot/types/interfaces/jsonrpc'
 
 import { ApiPromise, WsProvider } from '@polkadot/api'
 import { web3Accounts, web3Enable } from '@polkadot/extension-dapp'
-import keyring from '@polkadot/ui-keyring'
+import { keyring as Keyring } from '@polkadot/ui-keyring'
 
 import config from '../config'
 
 const parsedQuery = new URLSearchParams(window.location.search)
-const connectedSocket = parsedQuery.rpc || config.PROVIDER_SOCKET
-console.log(`Connected socket: ${connectedSocket}`)
-
+const connectedSocket = parsedQuery.get('rpc') || config.PROVIDER_SOCKET
 ///
 // Initial state for `useReducer`
 
-const INIT_STATE = {
+const initialState = {
   // These are the states
   socket: connectedSocket,
-  jsonrpc: { ...jsonrpc, ...config.RPC },
+  jsonrpc: { ...jsonrpc, ...config.CUSTOM_RPC_METHODS },
   keyring: null,
   keyringState: null,
   api: null,
@@ -63,6 +61,7 @@ const connect = (state, dispatch) => {
 
   dispatch({ type: 'CONNECT_INIT' })
 
+  console.log(`Connected socket: ${socket}`)
   const provider = new WsProvider(socket)
   const _api = new ApiPromise({ provider, rpc: jsonrpc })
 
@@ -78,52 +77,48 @@ const connect = (state, dispatch) => {
 
 ///
 // Loading accounts from dev and polkadot-js extension
-
-let loadAccts = false
+let keyringLoadAll = false
 const loadAccounts = (state, dispatch) => {
+  const { keyring, keyringState } = state
+  if (keyring || keyringState) return
+  dispatch({ type: 'LOAD_KEYRING' })
+
   const asyncLoadAccounts = async () => {
-    dispatch({ type: 'LOAD_KEYRING' })
     try {
       await web3Enable(config.APP_NAME)
       let allAccounts = await web3Accounts()
       allAccounts = allAccounts.map(({ address, meta }) => ({
         address,
         meta: { ...meta, name: `${meta.name} (${meta.source})` },
       }))
-      keyring.loadAll(
-        { isDevelopment: config.DEVELOPMENT_KEYRING },
-        allAccounts
-      )
-      dispatch({ type: 'SET_KEYRING', payload: keyring })
+
+      if (!keyringLoadAll) {
+        Keyring.loadAll(
+          { isDevelopment: config.DEVELOPMENT_KEYRING },
+          allAccounts
+        )
+        keyringLoadAll = true
+      }
+
+      dispatch({ type: 'SET_KEYRING', payload: Keyring })
     } catch (e) {
       console.error(e)
       dispatch({ type: 'KEYRING_ERROR' })
     }
   }
-
-  const { keyringState } = state
-  // If `keyringState` is not null `asyncLoadAccounts` is running.
-  if (keyringState) return
-  // If `loadAccts` is true, the `asyncLoadAccounts` has been run once.
-  if (loadAccts) return dispatch({ type: 'SET_KEYRING', payload: keyring })
-
-  // This is the heavy duty work
-  loadAccts = true
   asyncLoadAccounts()
 }
 
 const SubstrateContext = React.createContext()
 
 const SubstrateContextProvider = props => {
-  // filtering props and merge with default param value
-  const initState = { ...INIT_STATE }
   const neededPropNames = ['socket']
   neededPropNames.forEach(key => {
-    initState[key] =
-      typeof props[key] === 'undefined' ? initState[key] : props[key]
+    initialState[key] =
+      typeof props[key] === 'undefined' ? initialState[key] : props[key]
   })
 
-  const [state, dispatch] = useReducer(reducer, initState)
+  const [state, dispatch] = useReducer(reducer, initialState)
   connect(state, dispatch)
   loadAccounts(state, dispatch)
 

yarn.lock

@@ -12371,9 +12371,9 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"semantic-ui-react@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "semantic-ui-react@npm:2.0.4"
+"semantic-ui-react@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "semantic-ui-react@npm:2.1.1"
   dependencies:
     "@babel/runtime": ^7.10.5
     "@fluentui/react-component-event-listener": ~0.51.6
@@ -12391,7 +12391,7 @@ resolve@^2.0.0-next.3:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
-  checksum: db2105ca7ab21a572854f12a0146482bf0124eeb1bdd603603f1f1073d5d3ddffc81db2b4158fc8cc109523f1b6373135caccf02d81e0cec9436830b6fdf6756
+  checksum: c62ffd545c460816c6ad1a1dadb51d871f9cae793da9271196d9059bad124d502c7e758761fa45bf6218af8781eae4b5b5e1a4aac02c35d74fb1705bef8f1636
   languageName: node
   linkType: hard
 
@@ -13127,7 +13127,7 @@ resolve@^2.0.0-next.3:
     react-dom: ^17.0.2
     react-scripts: ^5.0.0
     semantic-ui-css: "Semantic-Org/Semantic-UI-CSS#master"
-    semantic-ui-react: ^2.0.4
+    semantic-ui-react: ^2.1.1
     semistandard: ^16.0.0
     stream-browserify: ^3.0.0
   languageName: unknown