From 7e61435cc4d8a5fa21c03d2be12965097bae0296 Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Fri, 3 Nov 2023 19:06:57 +0100 Subject: [PATCH 1/3] feat: add start page + improve loading indicators --- src/components/App.tsx | 72 +++++++++++++++++--- src/components/Browser.tsx | 70 +++++++++++++------- src/components/Lume.tsx | 2 +- src/components/StartPage.tsx | 124 +++++++++++++++++++++++++++++++++++ tailwind.config.js | 1 + 5 files changed, 237 insertions(+), 32 deletions(-) create mode 100644 src/components/StartPage.tsx diff --git a/src/components/App.tsx b/src/components/App.tsx index 2786b2e..d2dc835 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -25,26 +25,40 @@ const App: React.FC = () => { return (
-
- -

Web3 Browser

-
+ +
+ +

Web3 Browser

+
+
- {ethStatus?.syncState === "syncing" || + {true || ethStatus?.syncState === "syncing" || handshakeStatus?.syncState === "syncing" ? (
{ethStatus?.syncState === "syncing" ? ( - - {ethStatus.sync.toFixed(0)}% Syncing Ethereum Network + + + {ethStatus.sync.toFixed(1)}% Syncing Ethereum Network + + ) : ethStatus?.syncState === "done" ? ( + + + {" "} Ethereum Synced ) : null} {handshakeStatus?.syncState === "syncing" ? ( - - {handshakeStatus.sync.toFixed(1)}% Syncing Handshake Network + + + {handshakeStatus.sync.toFixed(1)}% Syncing Ethereum Network + + ) : handshakeStatus?.syncState === "done" ? ( + + + {" "} Handshake Synced ) : null}
@@ -53,6 +67,46 @@ const App: React.FC = () => { ); }; +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" + + return ( + + + + {textSize ? + {`${percentage}%`} + : null } + + ); +}; + const Root = () => { return ( diff --git a/src/components/Browser.tsx b/src/components/Browser.tsx index 629e54d..a962a23 100644 --- a/src/components/Browser.tsx +++ b/src/components/Browser.tsx @@ -29,6 +29,7 @@ import { useAuth, useLumeStatus, } from "@lumeweb/sdk"; +import StartPage from "./StartPage"; let BOOT_FUNCTIONS: (() => Promise)[] = []; @@ -150,22 +151,29 @@ const NavInput = forwardRef( }, ); +function parseUrl(url: string) { + let input = url.trim(); + + // If the input doesn't contain a protocol, assume it's http + if (!input?.match(/^https?:\/\//)) { + input = `http://${input}`; + } + + return new URL(input); +} + export function Navigator() { const { url: contextUrl, setUrl } = useBrowserState(); const { ready } = useLumeStatus(); const inputEl = useRef(); const browse = (inputValue: string) => { - let input = inputValue.trim(); - - // If the input doesn't contain a protocol, assume it's http - if (!input?.match(/^https?:\/\//)) { - input = `http://${input}`; - } - try { + if(inputValue === "") { + setUrl("about:blank") + } // Try to parse it as a URL - const url = new URL(input); + const url = parseUrl(inputValue); setUrl(url.toString() || "about:blank"); } catch (e) { @@ -197,7 +205,9 @@ export function Navigator() { (inputEl.current = el)} disabled={!ready} - className={`rounded-l-full bg-neutral-800 text-white border-none focus-visible:ring-offset-0 ${!ready ? "bg-neutral-950" : ""}`} + className={`rounded-l-full bg-neutral-800 text-white border-none focus-visible:ring-offset-0 ${ + !ready ? "bg-neutral-950" : "" + }`} name="url" /> + ))} + + + ) : ( +
+

Be patient

+

We are starting the engines.

+
+ )} + + ); +}; + +export default StartPage; + +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; + + return ( + + + + + {`${percentage}%`} + + + ); +}; diff --git a/tailwind.config.js b/tailwind.config.js index b5bfccc..be11b37 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,7 @@ /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], + safelist: ["fill-green-500", "stroke-green-500", "fill-orange-400", "stroke-orange-400"], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { container: { From d082cf339e4dbbcd8ddcce5ec71cfd9596c33585 Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Fri, 3 Nov 2023 19:13:55 +0100 Subject: [PATCH 2/3] feat: attention you need to login --- src/components/Lume.tsx | 8 +++----- src/components/StartPage.tsx | 21 ++++++++++++++++----- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/components/Lume.tsx b/src/components/Lume.tsx index 1d03632..f4fc2f1 100644 --- a/src/components/Lume.tsx +++ b/src/components/Lume.tsx @@ -6,7 +6,7 @@ import { useLumeStatus, } from "@lumeweb/sdk"; -const Lume: React.FC = () => { +const Lume: React.FC = () => { const { isLoggedIn } = useAuth(); const { ready, inited } = useLumeStatus(); @@ -15,20 +15,18 @@ const Lume: React.FC = () => { {!isLoggedIn && ( - { - } )} {isLoggedIn && } ); -} +}; -export default Lume; \ No newline at end of file +export default Lume; diff --git a/src/components/StartPage.tsx b/src/components/StartPage.tsx index a032740..f96969f 100644 --- a/src/components/StartPage.tsx +++ b/src/components/StartPage.tsx @@ -1,4 +1,4 @@ -import { useLumeStatus } from "@lumeweb/sdk"; +import { useAuth, useLumeStatus } from "@lumeweb/sdk"; import React from "react"; type Props = { @@ -14,7 +14,8 @@ const AVAILABLE_PAGES = [ ]; const StartPage = ({ setUrl }: Props) => { - const { ready } = useLumeStatus(); + const { ready, inited } = useLumeStatus(); + const { isLoggedIn } = useAuth(); return (

@@ -27,7 +28,7 @@ const StartPage = ({ setUrl }: Props) => {

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

@@ -59,7 +60,8 @@ const StartPage = ({ setUrl }: Props) => { ))}

- ) : ( + ) : null} + {inited && ready ? (
{

Be patient

We are starting the engines.

- )} + ): null} + {!isLoggedIn ? ( +
+

Attention

+

Please click login to start using the browser.

+
+ ) : null}

); }; From a31d459d8899cbdcf58e8a541bca10664c410ed8 Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Fri, 3 Nov 2023 19:17:30 +0100 Subject: [PATCH 3/3] fix: minor bugs --- src/components/Browser.tsx | 2 +- src/components/StartPage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Browser.tsx b/src/components/Browser.tsx index a962a23..416c16c 100644 --- a/src/components/Browser.tsx +++ b/src/components/Browser.tsx @@ -311,7 +311,7 @@ export function Browser() { ref={iframeRef} onLoad={handleIframeLoad} src={url ? `/browse/${url}` : "about:blank"} - className={`${!shouldRenderStartPage ? "hidden": ""} w-full h-full`} + className={`${shouldRenderStartPage ? "hidden": ""} w-full h-full`} > ); diff --git a/src/components/StartPage.tsx b/src/components/StartPage.tsx index f96969f..8556712 100644 --- a/src/components/StartPage.tsx +++ b/src/components/StartPage.tsx @@ -61,7 +61,7 @@ const StartPage = ({ setUrl }: Props) => { ) : null} - {inited && ready ? ( + {inited && !ready && isLoggedIn ? (