diff --git a/src/components/App.tsx b/src/components/App.tsx
index b526f50..85dc95f 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -36,21 +36,13 @@ 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.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..1ce77d6 100644
--- a/src/components/StartPage.tsx
+++ b/src/components/StartPage.tsx
@@ -26,6 +26,12 @@ const StartPage = ({ setUrl }: Props) => {
from the Ethereum Name Service (ENS) and Handshake protocol, providing a
secure and decentralized browsing experience.
+
+ For further documentation, see:{" "}
+
+ https://docs.lumeweb.com/browser-webapp
+
+
{/* TODO: Add the lume loading indicators for the networks. */}
{/* */}
{inited && ready ? (
@@ -63,11 +69,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 ? (