From 0ddd5f5cffcb7c9ecf753507abb6762a66d95936 Mon Sep 17 00:00:00 2001 From: Derrick Hammer Date: Thu, 3 Aug 2023 14:55:09 -0400 Subject: [PATCH] feat: add tracking of bootup progress and show a loading bar --- shared/util.ts | 10 ++++ src/main/background/boot.ts | 55 +++++++++++++++++----- src/main/background/bridge.ts | 6 +++ ui/apps/dashboard/App.jsx | 11 ++++- ui/apps/dashboard/components/Progress.jsx | 13 +++++ ui/apps/dashboard/components/Progress.scss | 55 ++++++++++++++++++++++ 6 files changed, 136 insertions(+), 14 deletions(-) create mode 100644 ui/apps/dashboard/components/Progress.jsx create mode 100644 ui/apps/dashboard/components/Progress.scss diff --git a/shared/util.ts b/shared/util.ts index 53696c5..e66fb48 100644 --- a/shared/util.ts +++ b/shared/util.ts @@ -27,3 +27,13 @@ export async function waitForConnected(cb?: Function) { await swarmClient.ready(); await cb?.(); } + +export async function listenBootStatus(cb: (percent: number) => void) { + const port = browser.runtime.connect(); + + port.onMessage.addListener((data: any) => { + if (data?.method === "bootStatus") { + cb(data.data); + } + }); +} diff --git a/src/main/background/boot.ts b/src/main/background/boot.ts index 849c93d..5e82e3e 100644 --- a/src/main/background/boot.ts +++ b/src/main/background/boot.ts @@ -1,7 +1,7 @@ import tldEnum from "@lumeweb/tld-enum"; import { handleKernelMessage } from "./kernel.js"; import browser from "webextension-polyfill"; -import { bridgeListener } from "./bridge.js"; +import { bridgeListener, broadcastToBridges } from "./bridge.js"; import WebEngine from "../../webEngine.js"; import InternalProvider from "../../contentProviders/internalProvider.js"; import IpfsProvider from "../../contentProviders/ipfsProvider.js"; @@ -27,6 +27,8 @@ import type { KernelAuthStatus } from "@lumeweb/libweb"; let engine: WebEngine; +const BOOT_FUNCTIONS: (() => Promise)[] = []; + export async function boot() { tldEnum.list.push("localhost"); window.addEventListener("message", handleKernelMessage); @@ -54,19 +56,29 @@ export async function doInit() { engine.registerContentProvider(new IpfsProvider(engine)); engine.registerContentProvider(new ServerProvider(engine)); - await swarmClient.addRelay( - "2d7ae1517caf4aae4de73c6d6f400765d2dd00b69d65277a29151437ef1c7d1d", - ); - // IRC - await peerDiscoveryClient.register( - "zduL5de7GC5DVpf92FkShUZZrTpUi6hki2BaTaVwjs9cnmCmKWNywBWyHR", + BOOT_FUNCTIONS.push( + async () => + await swarmClient.addRelay( + "2d7ae1517caf4aae4de73c6d6f400765d2dd00b69d65277a29151437ef1c7d1d", + ), ); - await networkRegistryClient.registerType("content"); - await networkRegistryClient.registerType("blockchain"); - await handshakeClient.register(); - await ethClient.register(); - await ipfsClient.register(); + // IRC + BOOT_FUNCTIONS.push( + async () => + await peerDiscoveryClient.register( + "zduL5de7GC5DVpf92FkShUZZrTpUi6hki2BaTaVwjs9cnmCmKWNywBWyHR", + ), + ); + BOOT_FUNCTIONS.push( + async () => await networkRegistryClient.registerType("content"), + ); + BOOT_FUNCTIONS.push( + async () => await networkRegistryClient.registerType("blockchain"), + ); + BOOT_FUNCTIONS.push(async () => await handshakeClient.register()); + BOOT_FUNCTIONS.push(async () => await ethClient.register()); + BOOT_FUNCTIONS.push(async () => await ipfsClient.register()); const resolvers = [ "zduRfyhiAu871qg14RUapxxsBS4gaFxnWXs1jxf3guk2vVAhSx6vJp1kxo", // CID @@ -75,8 +87,25 @@ export async function doInit() { ]; for (const resolver of resolvers) { - await dnsClient.registerResolver(resolver); + BOOT_FUNCTIONS.push(async () => dnsClient.registerResolver(resolver)); } + await bootup(); + weAreBooted(); } + +async function bootup() { + for (const entry of Object.entries(BOOT_FUNCTIONS)) { + await entry[1](); + const decPercent = (parseInt(entry[0]) + 1) / BOOT_FUNCTIONS.length; + broadcastBootStatus(decPercent * 100); + } +} + +function broadcastBootStatus(percent: number) { + broadcastToBridges({ + method: "bootStatus", + data: percent, + }); +} diff --git a/src/main/background/bridge.ts b/src/main/background/bridge.ts index 67ea586..12b6b0e 100644 --- a/src/main/background/bridge.ts +++ b/src/main/background/bridge.ts @@ -54,3 +54,9 @@ export function bridgeListener(port: any) { }); }); } + +export function broadcastToBridges(data: any) { + for (const port of Object.entries(getOpenPorts())) { + (port[1] as any).postMessage(data); + } +} diff --git a/ui/apps/dashboard/App.jsx b/ui/apps/dashboard/App.jsx index 606f0fa..17319ba 100644 --- a/ui/apps/dashboard/App.jsx +++ b/ui/apps/dashboard/App.jsx @@ -2,11 +2,12 @@ import "./App.scss"; import { useEffect, useState } from "react"; import Header from "./components/Header.jsx"; import Art from "./components/Art.jsx"; -import { waitForConnected } from "../../../shared/util.ts"; +import { listenBootStatus, waitForConnected } from "../../../shared/util.ts"; import { createClient } from "@lumeweb/kernel-network-registry-client"; import Network from "./components/Network.jsx"; import Footer from "./components/Footer.jsx"; import classNames from "classnames"; +import Progress from "./components/Progress.jsx"; const networkClient = createClient(); @@ -29,6 +30,7 @@ export default function App() { let [networks, setNetworks] = useState({}); let [showConnected, setShowConnected] = useState(false); let [artPulse, setArtPulse] = useState(false); + let [bootPercent, setBootPercent] = useState(0); useEffect(() => { getNetworks().then((networks) => { @@ -51,10 +53,17 @@ export default function App() { } }, [connected]); + useEffect(() => { + listenBootStatus((percent) => { + setBootPercent(percent); + }); + }); + return (
+ {!showConnected && }

All set.

diff --git a/ui/apps/dashboard/components/Progress.jsx b/ui/apps/dashboard/components/Progress.jsx new file mode 100644 index 0000000..d53ca6f --- /dev/null +++ b/ui/apps/dashboard/components/Progress.jsx @@ -0,0 +1,13 @@ +import "./Progress.scss"; + +export default function Progress({ percent }) { + return ( +
+ +
+
Loading Network
+
{percent}%
+
+
+ ); +} diff --git a/ui/apps/dashboard/components/Progress.scss b/ui/apps/dashboard/components/Progress.scss new file mode 100644 index 0000000..756db73 --- /dev/null +++ b/ui/apps/dashboard/components/Progress.scss @@ -0,0 +1,55 @@ + +.progress { + padding-top: 19.5em; + border-radius: 1.75em; + min-width: 38em; + margin-top: 1em; + margin-left: 41vw; + margin-right: auto; + text-align: center; + display: flex; + flex-direction: column; + + progress { + border-radius: 1.75em; + height: 24px; + background: #131313; + border: none; + width: 100%; + max-width: 100%; + + &::-webkit-progress-bar, &::-moz-progress-bar { + background: #62C554; + box-shadow: inset 0 0 1em 1px black; + border-radius: 1.75em; + } + } + + .status { + margin-top: 3em; + display: flex; + width: 100%; + max-width: 100%; + + .status-text { + flex: 1; + color: #656565; + font-size: 10px; + line-height: 12.1px; + font-family: Inter; + font-weight: 700; + text-transform: uppercase; + text-align: left; + } + + .status-percent { + flex: 1; + color: #D9D9D9; + font-size: 10px; + line-height: 12.1px; + font-family: Inter; + font-weight: 700; + text-align: right; + } + } +}