diff --git a/src/components/App.tsx b/src/components/App.tsx index d325a23..3e28b91 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -36,12 +36,12 @@ const App: React.FC = () => { - {true || ethStatus?.syncState === "syncing" || + {ethStatus?.syncState === "syncing" || handshakeStatus?.syncState === "syncing" ? (
{ethStatus?.syncState === "syncing" ? ( - + {ethStatus.sync.toFixed(1)}% Syncing Ethereum Network ) : ethStatus?.syncState === "done" ? ( diff --git a/src/components/Browser.tsx b/src/components/Browser.tsx index f96bfc9..d13c4d7 100644 --- a/src/components/Browser.tsx +++ b/src/components/Browser.tsx @@ -38,6 +38,8 @@ interface BrowserContextType { setUrl: React.Dispatch>; isLoadingPage: boolean; setIsLoadingPage: React.Dispatch>; + authStatus: LumeAuthStatus; + setAuthStatus: React.Dispatch>; } const BrowserStateContext = createContext( @@ -51,10 +53,18 @@ export function BrowserStateProvider({ }) { const [url, setUrl] = useState(""); const [isLoadingPage, setIsLoadingPage] = useState(false); + const [authStatus, setAuthStatus] = useState("idle"); return ( {children} @@ -71,15 +81,18 @@ export function useBrowserState() { return context; } +type LumeAuthStatus = "idle" | "done" | "syncing"; + async function boot({ onInit, onAuth, onBoot, }: { onInit: (inited: boolean) => Promise | void; - onAuth: (authed: boolean) => Promise | void; + onAuth: (authed: LumeAuthStatus) => Promise | void; onBoot: (booted: boolean) => Promise | void; }) { + await onAuth("idle"); let err = false; const reg = await navigator.serviceWorker.register("/sw.js"); await reg.update(); @@ -91,7 +104,8 @@ async function boot({ }); await onInit(true); await kernelLoaded() - .then((result) => { + .then(async (result) => { + await onAuth("syncing"); if ("indexeddb_error" === (result as string)) { alert( "Error: Please ensure 3rd party cookies are enabled, and any security like brave shield is off, then reload the app", @@ -105,7 +119,7 @@ async function boot({ if (err) { return; } - await onAuth(true); + await onAuth("done"); BOOT_FUNCTIONS.push( async () => @@ -140,10 +154,11 @@ async function boot({ for (const resolver of resolvers) { BOOT_FUNCTIONS.push(async () => dnsClient.registerResolver(resolver)); } - BOOT_FUNCTIONS.push(async () => onBoot(true)); await bootup(); + await onBoot(true); + await Promise.all([ ethClient.ready(), handshakeClient.ready(), @@ -152,7 +167,7 @@ async function boot({ } async function bootup() { - for (const entry of Object.entries(BOOT_FUNCTIONS)) { + for await (const entry of Object.entries(BOOT_FUNCTIONS)) { console.log(entry[1].toString()); await entry[1](); } @@ -182,8 +197,8 @@ export function Navigator() { const browse = (inputValue: string) => { try { - if(inputValue === "") { - setUrl("about:blank") + if (inputValue === "") { + setUrl("about:blank"); } // Try to parse it as a URL const url = parseUrl(inputValue); @@ -235,7 +250,8 @@ export function Navigator() { } export function Browser() { - const { url, setUrl, isLoadingPage, setIsLoadingPage } = useBrowserState(); + const { url, setUrl, isLoadingPage, setIsLoadingPage, setAuthStatus } = + useBrowserState(); const status = useLumeStatus(); const auth = useAuth(); const iframeRef = useRef(null); @@ -243,7 +259,11 @@ export function Browser() { useEffect(() => { boot({ onAuth(authed) { - auth.setIsLoggedIn(authed); + console.log({authed}) + setAuthStatus(authed); + if (authed === "done") { + auth.setIsLoggedIn(true); + } }, onBoot(booted) { status.setReady(booted); @@ -256,7 +276,9 @@ export function Browser() { ); }, []); - const handleIframeLoad = (event: React.SyntheticEvent) => { + const handleIframeLoad = ( + event: React.SyntheticEvent, + ) => { try { const newUrl = iframeRef?.current?.contentWindow?.location.href as string; const urlObj = new URL(newUrl); @@ -267,8 +289,8 @@ export function Browser() { setUrl(realUrl); } const readyState = event.currentTarget.contentDocument?.readyState; - console.log("[debug]",{readyState}); - if(readyState === 'interactive') { + console.log("[debug]", { readyState }); + if (readyState === "interactive") { setIsLoadingPage(false); } } catch (e) { @@ -285,7 +307,7 @@ export function Browser() { if (iframe) { const observer = new MutationObserver((mutationsList, observer) => { for (let mutation of mutationsList) { - console.log("[debug] Mutated ", {mutation}) + console.log("[debug] Mutated ", { mutation }); if ( mutation.type === "attributes" && mutation.attributeName === "src" @@ -318,14 +340,14 @@ export function Browser() { setUrl(_url.toString() || "about:blank"); }} /> - ) : null} + ) : null} - + ); } diff --git a/src/components/Lume.tsx b/src/components/Lume.tsx index f4fc2f1..3de0da3 100644 --- a/src/components/Lume.tsx +++ b/src/components/Lume.tsx @@ -4,10 +4,13 @@ import { LumeIdentityTrigger, useAuth, useLumeStatus, + useNetworks, } from "@lumeweb/sdk"; +import { useBrowserState } from "./Browser"; const Lume: React.FC = () => { const { isLoggedIn } = useAuth(); + const { authStatus } = useBrowserState(); const { ready, inited } = useLumeStatus(); return ( @@ -17,14 +20,14 @@ const Lume: React.FC = () => { )} - {isLoggedIn && } + {isLoggedIn && } ); }; diff --git a/src/components/StartPage.tsx b/src/components/StartPage.tsx index cf76797..22ff2fc 100644 --- a/src/components/StartPage.tsx +++ b/src/components/StartPage.tsx @@ -26,8 +26,6 @@ const StartPage = ({ setUrl }: Props) => { from the Ethereum Name Service (ENS) and Handshake protocol, providing a secure and decentralized browsing experience.

- {/* TODO: Add the lume loading indicators for the networks. */} - {/* */} {inited && ready ? (

@@ -63,11 +61,11 @@ const StartPage = ({ setUrl }: Props) => { ) : null} {inited && !ready && isLoggedIn ? (
-

Be patient

-

We are starting the engines.

+

You are logged in.

+

We are now starting to sync the networks.

) : null} {!isLoggedIn ? (