Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/components/StartPage.tsx
This commit is contained in:
Derrick Hammer 2023-11-10 00:19:47 -05:00
commit 4acdbd4e4c
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
4 changed files with 54 additions and 37 deletions

View File

@ -36,21 +36,13 @@ const App: React.FC = () => {
</div>
</div>
<Navigator />
{true ||
ethStatus?.syncState === "syncing" ||
{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)}
/>
<span className="font-bold font-mono text-orange-400 mr-2">
{ethStatus.sync.toFixed(1)}%
</span>{" "}
Syncing Ethereum Network
<CircleProgressBar radius={5} strokeWidth={3} percentage={Math.floor(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">

View File

@ -38,6 +38,8 @@ 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>(
@ -51,10 +53,18 @@ 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 }}
value={{
url,
setUrl,
isLoadingPage,
setIsLoadingPage,
authStatus,
setAuthStatus,
}}
>
{children}
</BrowserStateContext.Provider>
@ -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> | void;
onAuth: (authed: boolean) => Promise<void> | void;
onAuth: (authed: LumeAuthStatus) => 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();
@ -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]();
}
@ -183,7 +198,7 @@ export function Navigator() {
const browse = (inputValue: string) => {
try {
if (inputValue === "") {
setUrl("about:blank")
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<HTMLIFrameElement>(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<HTMLIFrameElement, Event>) => {
const handleIframeLoad = (
event: React.SyntheticEvent<HTMLIFrameElement, Event>,
) => {
try {
const newUrl = iframeRef?.current?.contentWindow?.location.href as string;
const urlObj = new URL(newUrl);
@ -268,7 +290,7 @@ export function Browser() {
}
const readyState = event.currentTarget.contentDocument?.readyState;
console.log("[debug]", { readyState });
if(readyState === 'interactive') {
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"

View File

@ -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 = () => {
<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}
disabled={!inited || authStatus === 'syncing'}
>
Login
</button>
</LumeIdentityTrigger>
</LumeIdentity>
)}
{isLoggedIn && <LumeDashboard disabled={!ready} />}
{isLoggedIn && <LumeDashboard disabled={!inited} />}
</>
);
};

View File

@ -69,11 +69,11 @@ const StartPage = ({ setUrl }: Props) => {
) : null}
{inited && !ready && isLoggedIn ? (
<div
className="bg-yellow-800/40 rounded-md border border-yellow-500 text-yellow-500 p-4"
className="bg-green-800/40 rounded-md border border-green-500 text-green-500 p-4"
role="alert"
>
<p className="font-bold">Be patient</p>
<p>We are starting the engines.</p>
<p className="font-bold">You are logged in.</p>
<p>We are now starting to sync the networks.</p>
</div>
) : null}
{!isLoggedIn ? (