White screen issue on forking chain (#11787)

* fix: white screen issue on fork chain * feat: improve ux for local forking * fix: build
2025-08-22 17:41:05 +05:30 · 2025-08-22 17:41:05 +05:30 · 5e44eed776
commit 5e44eed776
parent 7d28f2f7b0
5 changed files with 146 additions and 86 deletions
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@ -16,7 +16,7 @@
  "type": "module",
  "version": "0.163.2-6-x",
  "dependencies": {
-    "@acala-network/chopsticks-core": "^1.0.1",
+    "@acala-network/chopsticks-core": "^1.2.1",
    "@polkadot/apps-config": "^0.163.2-6-x",
    "@polkadot/apps-routing": "^0.163.2-6-x",
    "@polkadot/dev": "^0.83.3",
--- a/packages/apps/src/Root.tsx
+++ b/packages/apps/src/Root.tsx
@ -12,6 +12,7 @@ import { ApiCtxRoot } from '@polkadot/react-api';
 import { ApiStatsCtxRoot, BlockAuthorsCtxRoot, BlockEventsCtxRoot, KeyringCtxRoot, PayWithAssetCtxRoot, QueueCtxRoot, WindowSizeCtxRoot } from '@polkadot/react-hooks';
 import { settings } from '@polkadot/ui-settings';

+import BeforeApiInit from './overlays/BeforeInit.js';
 import Apps from './Apps.js';

 interface Props {
@ -44,6 +45,7 @@ function Root ({ isElectron, store }: Props): React.ReactElement<Props> {
        <QueueCtxRoot>
          <ApiCtxRoot
            apiUrl={settings.apiUrl}
+            beforeApiInit={<BeforeApiInit />}
            isElectron={isElectron}
            store={store}
          >
--- a/packages/apps/src/overlays/BeforeInit.tsx
+++ b/packages/apps/src/overlays/BeforeInit.tsx
@ -0,0 +1,64 @@
+// Copyright 2017-2025 @polkadot/apps authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { Spinner, styled } from '@polkadot/react-components';
+import GlobalStyle from '@polkadot/react-components/styles';
+import { useTheme } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate.js';
+import BaseOverlay from './Base.js';
+
+const BeforeApiInit = () => {
+  const { themeClassName } = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <GlobalStyle />
+      <StyledDiv className={` apps--Wrapper ${themeClassName}`}>
+        <BaseOverlay
+          icon='globe'
+          type='info'
+        >
+          <div>{t('Waiting to establish a connection with the remote endpoint.')}</div>
+        </BaseOverlay>
+        <div className='connecting'>
+          <Spinner label='Initializing connection' />
+        </div>
+        <div id={'portals'} />
+      </StyledDiv>
+    </>
+  );
+};
+
+const StyledDiv = styled.div`
+  background: var(--bg-page);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  .connecting {
+    padding-block: calc(3.5rem + 56px);
+  }
+
+  ${[
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
+    10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
+    20, 21, 22, 23, 24
+  ].map((n) => `
+    .greyAnim-${n} {
+      animation: greyAnim${n} 2s;
+    }
+
+    @keyframes greyAnim${n} {
+      0% { background: #a6a6a6; }
+      50% { background: darkorange; }
+      100% { background: #a6a6a6; }
+    }
+  `).join('')}
+`;
+
+export default BeforeApiInit;
--- a/packages/react-api/src/Api.tsx
+++ b/packages/react-api/src/Api.tsx
@ -35,6 +35,7 @@ interface Props {
  apiUrl: string;
  isElectron: boolean;
  store?: KeyringStore;
+  beforeApiInit?: React.ReactNode
 }

 interface ChainData {
@ -287,14 +288,14 @@ async function createApi (apiUrl: string, signer: ApiSigner, isLocalFork: boolea
  return { fork: chopsticksFork, types };
 }

-export function ApiCtxRoot ({ apiUrl, children, isElectron, store: keyringStore }: Props): React.ReactElement<Props> | null {
+export function ApiCtxRoot ({ apiUrl, beforeApiInit, children, isElectron, store: keyringStore }: Props): React.ReactElement<Props> | null {
  const { queuePayload, queueSetTxStatus } = useQueue();
  const [state, setState] = useState<ApiState>(EMPTY_STATE);
  const [isApiConnected, setIsApiConnected] = useState(false);
  const [isApiInitialized, setIsApiInitialized] = useState(false);
  const [apiError, setApiError] = useState<null | string>(null);
  const [extensions, setExtensions] = useState<InjectedExtension[] | undefined>();
-  const [isLocalFork] = useState(store.get('localFork') === apiUrl);
+  const isLocalFork = useMemo(() => store.get('localFork') === apiUrl, [apiUrl]);
  const apiEndpoint = useEndpoint(apiUrl);
  const peopleEndpoint = usePeopleEndpoint(apiEndpoint?.relayName || apiEndpoint?.info);
  const coreTimeEndpoint = useCoretimeEndpoint(apiEndpoint?.relayName || apiEndpoint?.info);
@ -373,7 +374,7 @@ export function ApiCtxRoot ({ apiUrl, children, isElectron, store: keyringStore
  }, [apiEndpoint, apiUrl, queuePayload, queueSetTxStatus, keyringStore, isLocalFork]);

  if (!value.isApiInitialized) {
-    return null;
+    return <>{beforeApiInit}</>;
  }

  return (
--- a/yarn.lock
+++ b/yarn.lock
@ -19,36 +19,36 @@ __metadata:
  languageName: node
  linkType: hard

-"@acala-network/chopsticks-core@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@acala-network/chopsticks-core@npm:1.0.1"
+"@acala-network/chopsticks-core@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@acala-network/chopsticks-core@npm:1.2.1"
  dependencies:
-    "@acala-network/chopsticks-executor": "npm:1.0.1"
-    "@polkadot/rpc-provider": "npm:^14.0.1"
-    "@polkadot/types": "npm:^14.0.1"
-    "@polkadot/types-codec": "npm:^14.0.1"
-    "@polkadot/types-known": "npm:^14.0.1"
-    "@polkadot/util": "npm:^13.2.2"
-    "@polkadot/util-crypto": "npm:^13.2.2"
-    comlink: "npm:^4.4.1"
+    "@acala-network/chopsticks-executor": "npm:1.2.1"
+    "@polkadot/rpc-provider": "npm:^16.4.1"
+    "@polkadot/types": "npm:^16.4.1"
+    "@polkadot/types-codec": "npm:^16.4.1"
+    "@polkadot/types-known": "npm:^16.4.1"
+    "@polkadot/util": "npm:^13.5.3"
+    "@polkadot/util-crypto": "npm:^13.5.3"
+    comlink: "npm:^4.4.2"
    eventemitter3: "npm:^5.0.1"
    lodash: "npm:^4.17.21"
-    lru-cache: "npm:^11.0.1"
-    pino: "npm:^9.5.0"
-    pino-pretty: "npm:^11.3.0"
-    rxjs: "npm:^7.8.1"
-    zod: "npm:^3.23.8"
-  checksum: 10/a81c3a1a964eda7a07e1794956efbf2f466d9a4cc9d1812dca1fb9932568a443afeea5f1b6b5de03960424da46b577a7cc40bb851c0083a0c95ff1a4bde2519f
+    lru-cache: "npm:^11.1.0"
+    pino: "npm:^9.7.0"
+    pino-pretty: "npm:^13.0.0"
+    rxjs: "npm:^7.8.2"
+    zod: "npm:^3.25.76"
+  checksum: 10/2e2607dafdeaba81a387447aec4a3eb80b37f7f69caa417eba614d7fa496d127ea54ec81fc0613f424aaf22ede21ce16073658ba7eac9a71c932ee4ae01e17a7
  languageName: node
  linkType: hard

-"@acala-network/chopsticks-executor@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@acala-network/chopsticks-executor@npm:1.0.1"
+"@acala-network/chopsticks-executor@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@acala-network/chopsticks-executor@npm:1.2.1"
  dependencies:
-    "@polkadot/util": "npm:^13.2.2"
+    "@polkadot/util": "npm:^13.5.3"
    "@polkadot/wasm-util": "npm:^7.4.1"
-  checksum: 10/d9b0b1b39d5882d35a3ddcff67169e0541a6112dd1df1d3c05a4e097ee1c3fe23a463c7447b7f8bffa10bf4ac6c84c789ec7fcea9b42fa6358a59aaa9f27c695
+  checksum: 10/1d4e842d5ab6fb5b0d089f3cbc08c44dbca5e889356a48ba50949e3ae1b0ea08d4fe6e32e5363bf129200a286adc8a294f9aeb26ddb92b1b054597dd546b5cb0
  languageName: node
  linkType: hard

@ -2197,7 +2197,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@polkadot/apps@workspace:packages/apps"
  dependencies:
-    "@acala-network/chopsticks-core": "npm:^1.0.1"
+    "@acala-network/chopsticks-core": "npm:^1.2.1"
    "@polkadot/apps-config": "npm:^0.163.2-6-x"
    "@polkadot/apps-routing": "npm:^0.163.2-6-x"
    "@polkadot/dev": "npm:^0.83.3"
@ -4792,15 +4792,6 @@ __metadata:
  languageName: node
  linkType: hard

-"abort-controller@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "abort-controller@npm:3.0.0"
-  dependencies:
-    event-target-shim: "npm:^5.0.0"
-  checksum: 10/ed84af329f1828327798229578b4fe03a4dd2596ba304083ebd2252666bdc1d7647d66d0b18704477e1f8aa315f055944aa6e859afebd341f12d0a53c37b4b40
-  languageName: node
-  linkType: hard
-
 "accepts@npm:~1.3.4, accepts@npm:~1.3.5, accepts@npm:~1.3.8":
  version: 1.3.8
  resolution: "accepts@npm:1.3.8"
@ -6612,10 +6603,10 @@ __metadata:
  languageName: node
  linkType: hard

-"comlink@npm:^4.4.1":
-  version: 4.4.1
-  resolution: "comlink@npm:4.4.1"
-  checksum: 10/3d953e987874bf0d60c02a3dd96e9f661141e58709eaab82097369c585382935651ce61f004e7bb1a5eb868ca8d8734d1cec885965ae53c56567d91b9539f2d0
+"comlink@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "comlink@npm:4.4.2"
+  checksum: 10/ecee53b5b4536b3aa3f7636c383f831e68fbc013def77665cc7fad873d72cfa23b994e1ec4b49e83e4e909c1089a03acae03a523e33a5e5ed938cdb613456434
  languageName: node
  linkType: hard

@ -8992,13 +8983,6 @@ __metadata:
  languageName: node
  linkType: hard

-"event-target-shim@npm:^5.0.0":
-  version: 5.0.1
-  resolution: "event-target-shim@npm:5.0.1"
-  checksum: 10/49ff46c3a7facbad3decb31f597063e761785d7fdb3920d4989d7b08c97a61c2f51183e2f3a03130c9088df88d4b489b1b79ab632219901f184f85158508f4c8
-  languageName: node
-  linkType: hard
-
 "eventemitter3@npm:^4.0.0":
  version: 4.0.7
  resolution: "eventemitter3@npm:4.0.7"
@ -12330,10 +12314,10 @@ __metadata:
  languageName: node
  linkType: hard

-"lru-cache@npm:^11.0.1":
-  version: 11.0.2
-  resolution: "lru-cache@npm:11.0.2"
-  checksum: 10/25fcb66e9d91eaf17227c6abfe526a7bed5903de74f93bfde380eb8a13410c5e8d3f14fe447293f3f322a7493adf6f9f015c6f1df7a235ff24ec30f366e1c058
+"lru-cache@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "lru-cache@npm:11.1.0"
+  checksum: 10/5011011675ca98428902de774d0963b68c3a193cd959347cb63b781dad4228924124afab82159fd7b8b4db18285d9aff462b877b8f6efd2b41604f806c1d9db4
  languageName: node
  linkType: hard

@ -14227,9 +14211,9 @@ __metadata:
  languageName: node
  linkType: hard

-"pino-pretty@npm:^11.3.0":
-  version: 11.3.0
-  resolution: "pino-pretty@npm:11.3.0"
+"pino-pretty@npm:^13.0.0":
+  version: 13.1.1
+  resolution: "pino-pretty@npm:13.1.1"
  dependencies:
    colorette: "npm:^2.0.7"
    dateformat: "npm:^4.6.3"
@ -14241,13 +14225,12 @@ __metadata:
    on-exit-leak-free: "npm:^2.1.0"
    pino-abstract-transport: "npm:^2.0.0"
    pump: "npm:^3.0.0"
-    readable-stream: "npm:^4.0.0"
-    secure-json-parse: "npm:^2.4.0"
+    secure-json-parse: "npm:^4.0.0"
    sonic-boom: "npm:^4.0.1"
-    strip-json-comments: "npm:^3.1.1"
+    strip-json-comments: "npm:^5.0.2"
  bin:
    pino-pretty: bin.js
-  checksum: 10/8494a07dc7428806648beffd0d6809a4cd25fb6ef48c567597d6534e7868a5eec477601c7aea65c7e7dd329ffa62182fe266fbc3e3726e39b9a49e2133f416cb
+  checksum: 10/b03520c99907f675fbc7d6395f27f60456d06562f2c84040064b575c6dec6c517eef6c147a846d587a1395878796dc4d4ac027acac1eae5022dd59d69c15ad7f
  languageName: node
  linkType: hard

@ -14258,16 +14241,16 @@ __metadata:
  languageName: node
  linkType: hard

-"pino@npm:^9.5.0":
-  version: 9.6.0
-  resolution: "pino@npm:9.6.0"
+"pino@npm:^9.7.0":
+  version: 9.9.0
+  resolution: "pino@npm:9.9.0"
  dependencies:
    atomic-sleep: "npm:^1.0.0"
    fast-redact: "npm:^3.1.1"
    on-exit-leak-free: "npm:^2.1.0"
    pino-abstract-transport: "npm:^2.0.0"
    pino-std-serializers: "npm:^7.0.0"
-    process-warning: "npm:^4.0.0"
+    process-warning: "npm:^5.0.0"
    quick-format-unescaped: "npm:^4.0.3"
    real-require: "npm:^0.2.0"
    safe-stable-stringify: "npm:^2.3.1"
@ -14275,7 +14258,7 @@ __metadata:
    thread-stream: "npm:^3.0.0"
  bin:
    pino: bin.js
-  checksum: 10/0a36125718dc2350bbaff243e4856108a80805dc1b305da1e246460cd22396d11a8b3a78b39b0b270cce4fb8ae6aa6e584f5387f6c2ee47348aae5db49d919e6
+  checksum: 10/afd3d8ed8580736d4599aa3508bd9eac52d15dd991590f2172d241fe6bee346557dc8c4b176f208bd8e3941c4eef040359aac22a7e6db4bd793246d5bde9f77c
  languageName: node
  linkType: hard

@ -14641,10 +14624,10 @@ __metadata:
  languageName: node
  linkType: hard

-"process-warning@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "process-warning@npm:4.0.0"
-  checksum: 10/0d6ec069f3a6fe1d3379c0247329a297f1f3b9ea7e1d828db0a8f61e0e8337a98b7eb201547350924bc4a101ddcf2fa5cf5563ffe2c54c27651f7996d328483e
+"process-warning@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "process-warning@npm:5.0.0"
+  checksum: 10/10f3e00ac9fc1943ec4566ff41fff2b964e660f853c283e622257719839d340b4616e707d62a02d6aa0038761bb1fa7c56bc7308d602d51bd96f05f9cd305dcd
  languageName: node
  linkType: hard

@ -15224,19 +15207,6 @@ __metadata:
  languageName: node
  linkType: hard

-"readable-stream@npm:^4.0.0":
-  version: 4.5.2
-  resolution: "readable-stream@npm:4.5.2"
-  dependencies:
-    abort-controller: "npm:^3.0.0"
-    buffer: "npm:^6.0.3"
-    events: "npm:^3.3.0"
-    process: "npm:^0.11.10"
-    string_decoder: "npm:^1.3.0"
-  checksum: 10/01b128a559c5fd76a898495f858cf0a8839f135e6a69e3409f986e88460134791657eb46a2ff16826f331682a3c4d0c5a75cef5e52ef259711021ba52b1c2e82
-  languageName: node
-  linkType: hard
-
 "readdir-glob@npm:^1.1.2":
  version: 1.1.3
  resolution: "readdir-glob@npm:1.1.3"
@ -15866,6 +15836,15 @@ __metadata:
  languageName: node
  linkType: hard

+"rxjs@npm:^7.8.2":
+  version: 7.8.2
+  resolution: "rxjs@npm:7.8.2"
+  dependencies:
+    tslib: "npm:^2.1.0"
+  checksum: 10/03dff09191356b2b87d94fbc1e97c4e9eb3c09d4452399dddd451b09c2f1ba8d56925a40af114282d7bc0c6fe7514a2236ca09f903cf70e4bbf156650dddb49d
+  languageName: node
+  linkType: hard
+
 "safe-array-concat@npm:^1.0.0, safe-array-concat@npm:^1.0.1":
  version: 1.0.1
  resolution: "safe-array-concat@npm:1.0.1"
@ -16009,10 +15988,10 @@ __metadata:
  languageName: node
  linkType: hard

-"secure-json-parse@npm:^2.4.0":
-  version: 2.7.0
-  resolution: "secure-json-parse@npm:2.7.0"
-  checksum: 10/974386587060b6fc5b1ac06481b2f9dbbb0d63c860cc73dc7533f27835fdb67b0ef08762dbfef25625c15bc0a0c366899e00076cb0d556af06b71e22f1dede4c
+"secure-json-parse@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "secure-json-parse@npm:4.0.0"
+  checksum: 10/c36c9dec9afaf4ef929a5469995d70d2f20d3d89b57219f22e0349b342715987283dbc1a80ab6f39e0bb28f8c3f3f073ce5363765c20c8d003ac243b4a89bd3d
  languageName: node
  linkType: hard

@ -16897,7 +16876,7 @@ __metadata:
  languageName: node
  linkType: hard

-"string_decoder@npm:^1.1.1, string_decoder@npm:^1.3.0":
+"string_decoder@npm:^1.1.1":
  version: 1.3.0
  resolution: "string_decoder@npm:1.3.0"
  dependencies:
@ -17009,6 +16988,13 @@ __metadata:
  languageName: node
  linkType: hard

+"strip-json-comments@npm:^5.0.2":
+  version: 5.0.3
+  resolution: "strip-json-comments@npm:5.0.3"
+  checksum: 10/3ccbf26f278220f785e4b71f8a719a6a063d72558cc63cb450924254af258a4f4c008b8c9b055373a680dc7bd525be9e543ad742c177f8a7667e0b726258e0e4
+  languageName: node
+  linkType: hard
+
 "strip-json-comments@npm:~2.0.1":
  version: 2.0.1
  resolution: "strip-json-comments@npm:2.0.1"
@ -19271,13 +19257,20 @@ __metadata:
  languageName: node
  linkType: hard

-"zod@npm:^3.21.4, zod@npm:^3.23.8":
+"zod@npm:^3.21.4":
  version: 3.24.1
  resolution: "zod@npm:3.24.1"
  checksum: 10/54e25956495dec22acb9399c168c6ba657ff279801a7fcd0530c414d867f1dcca279335e160af9b138dd70c332e17d548be4bc4d2f7eaf627dead50d914fec27
  languageName: node
  linkType: hard

+"zod@npm:^3.25.76":
+  version: 3.25.76
+  resolution: "zod@npm:3.25.76"
+  checksum: 10/f0c963ec40cd96858451d1690404d603d36507c1fc9682f2dae59ab38b578687d542708a7fdbf645f77926f78c9ed558f57c3d3aa226c285f798df0c4da16995
+  languageName: node
+  linkType: hard
+
 "zwitch@npm:^2.0.0":
  version: 2.0.2
  resolution: "zwitch@npm:2.0.2"