4 changed files with 49 additions and 91 deletions
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -36,36 +36,29 @@ const App: React.FC = () => {
        </div>
      </div>
      <Navigator />
-      {ethStatus?.syncState === "syncing" ||
+      {true || ethStatus?.syncState === "syncing" ||
      handshakeStatus?.syncState === "syncing" ? (
        <div className="py-4 -mb-4 flex flex-row gap-x-3">
          {ethStatus?.syncState === "syncing" ? (
            <span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
-              <CircleProgressBar radius={5} strokeWidth={3} percentage={Math.floor(ethStatus.sync)} />
+              <CircleProgressBar radius={5} strokeWidth={3} percentage={Math.floors(ethStatus.sync)} />
              <span className="font-bold font-mono text-orange-400 mr-2">{ethStatus.sync.toFixed(1)}%</span> Syncing Ethereum Network
            </span>
          ) : ethStatus?.syncState === "done" ? (
            <span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
-              <CircleProgressBar radius={5} strokeWidth={3} percentage={100} />{" "}
-              Ethereum Synced
+              <CircleProgressBar radius={5} strokeWidth={3} percentage={100} />
+              {" "} Ethereum Synced
            </span>
          ) : null}
          {handshakeStatus?.syncState === "syncing" ? (
            <span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
-              <CircleProgressBar
-                radius={5}
-                strokeWidth={3}
-                percentage={Math.floor(handshakeStatus.sync)}
-              />
-              <span className="font-bold font-mono text-orange-400 mr-2">
-                {handshakeStatus.sync.toFixed(1)}%
-              </span>{" "}
-              Syncing Handshake Network
+              <CircleProgressBar radius={5} strokeWidth={3} percentage={Math.floor(handshakeStatus.sync)} />
+              <span className="font-bold font-mono text-orange-400 mr-2">{handshakeStatus.sync.toFixed(1)}%</span> Syncing Handshake Network
            </span>
          ) : handshakeStatus?.syncState === "done" ? (
            <span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
-              <CircleProgressBar radius={5} strokeWidth={3} percentage={100} />{" "}
-              Handshake Synced
+              <CircleProgressBar radius={5} strokeWidth={3} percentage={100} />
+              {" "} Handshake Synced
            </span>
          ) : null}
        </div>
@ -74,21 +67,11 @@ const App: React.FC = () => {
  );
 };

-const CircleProgressBar = ({
-  radius,
-  strokeWidth,
-  textSize,
-  percentage,
-}: {
-  radius: number;
-  strokeWidth: number;
-  textSize?: number;
-  percentage: number;
-}) => {
+const CircleProgressBar = ({ radius, strokeWidth, textSize, percentage } : {radius: number, strokeWidth: number, textSize?: number, percentage: number}) => {
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (percentage / 100) * circumference;
-  const color = Math.ceil(percentage) >= 100 ? "green-500" : "orange-400";
-
+  const color = Math.ceil(percentage) >= 100 ? "green-500" : "orange-400"
+  
  return (
    <svg width={radius * 2 + strokeWidth} height={radius * 2 + strokeWidth}>
      <circle
@ -110,18 +93,16 @@ const CircleProgressBar = ({
        strokeDashoffset={offset}
        strokeLinecap="round"
      />
-      {textSize ? (
-        <text
-          x="50%"
-          className={`fill-${color}`}
-          y="50%"
-          textAnchor="middle"
-          dy=".3em"
-          fontSize={textSize}
-        >
-          {`${percentage}%`}
-        </text>
-      ) : null}
+      {textSize ? <text
+        x="50%"
+        className={`fill-${color}`}
+        y="50%"
+        textAnchor="middle"
+        dy=".3em"
+        fontSize={textSize}
+      >
+        {`${percentage}%`}
+      </text> : null }
    </svg>
  );
 };
--- a/src/components/Browser.tsx
+++ b/src/components/Browser.tsx
@ -38,8 +38,6 @@ interface BrowserContextType {
  setUrl: React.Dispatch<React.SetStateAction<string>>;
  isLoadingPage: boolean;
  setIsLoadingPage: React.Dispatch<React.SetStateAction<boolean>>;
-  authStatus: LumeAuthStatus;
-  setAuthStatus: React.Dispatch<React.SetStateAction<LumeAuthStatus>>;
 }

 const BrowserStateContext = createContext<BrowserContextType | undefined>(
@ -53,18 +51,10 @@ export function BrowserStateProvider({
 }) {
  const [url, setUrl] = useState("");
  const [isLoadingPage, setIsLoadingPage] = useState<boolean>(false);
-  const [authStatus, setAuthStatus] = useState<LumeAuthStatus>("idle");

  return (
    <BrowserStateContext.Provider
-      value={{
-        url,
-        setUrl,
-        isLoadingPage,
-        setIsLoadingPage,
-        authStatus,
-        setAuthStatus,
-      }}
+      value={{ url, setUrl, isLoadingPage, setIsLoadingPage }}
    >
      {children}
    </BrowserStateContext.Provider>
@ -81,18 +71,15 @@ export function useBrowserState() {
  return context;
 }

-type LumeAuthStatus = "idle" | "done" | "syncing";
-
 async function boot({
  onInit,
  onAuth,
  onBoot,
 }: {
  onInit: (inited: boolean) => Promise<void> | void;
-  onAuth: (authed: LumeAuthStatus) => Promise<void> | void;
+  onAuth: (authed: boolean) => Promise<void> | void;
  onBoot: (booted: boolean) => Promise<void> | void;
 }) {
-  await onAuth("idle");
  let err = false;
  const reg = await navigator.serviceWorker.register("/sw.js");
  await reg.update();
@ -104,8 +91,7 @@ async function boot({
  });
  await onInit(true);
  await kernelLoaded()
-  .then(async (result) => {
-      await onAuth("syncing");
+    .then((result) => {
      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",
@ -119,7 +105,7 @@ async function boot({
  if (err) {
    return;
  }
-  await onAuth("done");
+  await onAuth(true);

  BOOT_FUNCTIONS.push(
    async () =>
@ -154,11 +140,10 @@ 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(),
@ -167,7 +152,7 @@ async function boot({
 }

 async function bootup() {
-  for await (const entry of Object.entries(BOOT_FUNCTIONS)) {
+  for (const entry of Object.entries(BOOT_FUNCTIONS)) {
    console.log(entry[1].toString());
    await entry[1]();
  }
@ -197,8 +182,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);
@ -250,8 +235,7 @@ export function Navigator() {
 }

 export function Browser() {
-  const { url, setUrl, isLoadingPage, setIsLoadingPage, setAuthStatus } =
-    useBrowserState();
+  const { url, setUrl, isLoadingPage, setIsLoadingPage } = useBrowserState();
  const status = useLumeStatus();
  const auth = useAuth();
  const iframeRef = useRef<HTMLIFrameElement>(null);
@ -259,11 +243,7 @@ export function Browser() {
  useEffect(() => {
    boot({
      onAuth(authed) {
-        console.log({authed})
-        setAuthStatus(authed);
-        if (authed === "done") {
-          auth.setIsLoggedIn(true);
-        }
+        auth.setIsLoggedIn(authed);
      },
      onBoot(booted) {
        status.setReady(booted);
@ -276,9 +256,7 @@ export function Browser() {
    );
  }, []);

-  const handleIframeLoad = (
-    event: React.SyntheticEvent<HTMLIFrameElement, Event>,
-  ) => {
+  const handleIframeLoad = (event: React.SyntheticEvent<HTMLIFrameElement, Event>) => {
    try {
      const newUrl = iframeRef?.current?.contentWindow?.location.href as string;
      const urlObj = new URL(newUrl);
@ -289,8 +267,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) {
@ -307,7 +285,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"
@ -340,14 +318,14 @@ export function Browser() {
            setUrl(_url.toString() || "about:blank");
          }}
        />
-      ) : null}
+      ) : null} 

-      <iframe
-        ref={iframeRef}
-        onLoad={handleIframeLoad}
-        src={url ? `/browse/${url}` : "about:blank"}
-        className={`${shouldRenderStartPage ? "hidden" : ""} w-full h-full`}
-      ></iframe>
+        <iframe
+          ref={iframeRef}
+          onLoad={handleIframeLoad}
+          src={url ? `/browse/${url}` : "about:blank"}
+          className={`${shouldRenderStartPage ? "hidden": ""} w-full h-full`}
+        ></iframe>
    </>
  );
 }
--- a/src/components/Lume.tsx
+++ b/src/components/Lume.tsx
@ -4,13 +4,10 @@ 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 (
@ -20,14 +17,14 @@ const Lume: React.FC = () => {
          <LumeIdentityTrigger asChild>
              <button
                className="ml-2 w-full rounded-full bg-[hsl(113,49%,55%)] text-black disabled:pointer-events-none disabled:opacity-50"
-                disabled={!inited || authStatus === 'syncing'}
+                disabled={!inited}
              >
                Login
              </button>
          </LumeIdentityTrigger>
        </LumeIdentity>
      )}
-      {isLoggedIn && <LumeDashboard disabled={!inited} />}
+      {isLoggedIn && <LumeDashboard disabled={!ready} />}
    </>
  );
 };
--- a/src/components/StartPage.tsx
+++ b/src/components/StartPage.tsx
@ -26,6 +26,8 @@ const StartPage = ({ setUrl }: Props) => {
        from the Ethereum Name Service (ENS) and Handshake protocol, providing a
        secure and decentralized browsing experience.
      </p>
+      {/* TODO: Add the lume loading indicators for the networks. */}
+      {/* <CircleProgressBar radius={20} strokeWidth={4} textSize={12} percentage={75} /> */}
      {inited && ready ? (
        <div>
          <hr className="my-3 border-neutral-700" />
@ -61,11 +63,11 @@ const StartPage = ({ setUrl }: Props) => {
      ) : null}
      {inited && !ready && isLoggedIn ? (
        <div
-          className="bg-green-800/40 rounded-md border border-green-500 text-green-500 p-4"
+          className="bg-yellow-800/40 rounded-md border border-yellow-500 text-yellow-500 p-4"
          role="alert"
        >
-          <p className="font-bold">You are logged in.</p>
-          <p>We are now starting to sync the networks.</p>
+          <p className="font-bold">Be patient</p>
+          <p>We are starting the engines.</p>
        </div>
      ) : null}
      {!isLoggedIn ? (