From 5e44eed77685f2d92b5558ceca286f5330f1032d Mon Sep 17 00:00:00 2001 From: Arjun Porwal <65214523+ap211unitech@users.noreply.github.com> Date: Fri, 22 Aug 2025 17:41:05 +0530 Subject: [PATCH] White screen issue on forking chain (#11787) * fix: white screen issue on fork chain * feat: improve ux for local forking * fix: build --- packages/apps/package.json | 2 +- packages/apps/src/Root.tsx | 2 + packages/apps/src/overlays/BeforeInit.tsx | 64 +++++++++ packages/react-api/src/Api.tsx | 7 +- yarn.lock | 157 +++++++++++----------- 5 files changed, 146 insertions(+), 86 deletions(-) create mode 100644 packages/apps/src/overlays/BeforeInit.tsx diff --git a/packages/apps/package.json b/packages/apps/package.json index 7a75eabbfe..ad244cb064 100644 --- 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", diff --git a/packages/apps/src/Root.tsx b/packages/apps/src/Root.tsx index 58a360d6e6..d6f9d08bc3 100644 --- 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 { } isElectron={isElectron} store={store} > diff --git a/packages/apps/src/overlays/BeforeInit.tsx b/packages/apps/src/overlays/BeforeInit.tsx new file mode 100644 index 0000000000..64da2d1fd4 --- /dev/null +++ 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 ( + <> + + + +
{t('Waiting to establish a connection with the remote endpoint.')}
+ +
+ +
+
+ + + ); +}; + +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; diff --git a/packages/react-api/src/Api.tsx b/packages/react-api/src/Api.tsx index 6460f68d28..17bdcff05f 100644 --- 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 | null { +export function ApiCtxRoot ({ apiUrl, beforeApiInit, children, isElectron, store: keyringStore }: Props): React.ReactElement | null { const { queuePayload, queueSetTxStatus } = useQueue(); const [state, setState] = useState(EMPTY_STATE); const [isApiConnected, setIsApiConnected] = useState(false); const [isApiInitialized, setIsApiInitialized] = useState(false); const [apiError, setApiError] = useState(null); const [extensions, setExtensions] = useState(); - 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 ( diff --git a/yarn.lock b/yarn.lock index 4eeaff49c7..bfe929608c 100644 --- 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"