diff --git a/src/components/App.tsx b/src/components/App.tsx index 6e7d594..0f37aba 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -2,6 +2,7 @@ import { AuthProvider, LumeStatusProvider, NetworksProvider, + useNetworks, } from "@lumeweb/sdk"; import { @@ -13,30 +14,60 @@ import Lume from "@/components/Lume.tsx"; import LogoImg from "@/assets/lume-logo.png"; const App: React.FC = () => { + const { networks } = useNetworks(); + const ethStatus = networks + .filter((n) => n.name.toLowerCase() === "ethereum") + .at(0); + const handshakeStatus = networks + .filter((n) => n.name.toLowerCase() === "handshake") + .at(0); + + console.log({ ethStatus, handshakeStatus, networks }); + + return ( +
+
+
+ +

Web3 Browser

+
+
+ +
+
+ + {ethStatus?.syncState === "syncing" || + handshakeStatus?.syncState === "syncing" ? ( +
+ {ethStatus?.syncState === "syncing" ? ( + + {ethStatus.sync.toPrecision(1)}% Syncing Ethereum Network + + ) : null} + {handshakeStatus?.syncState === "syncing" ? ( + + {handshakeStatus.sync.toPrecision(1)}% Syncing Handshake Network + + ) : null} +
+ ) : null} +
+ ); +}; + +const Root = () => { return ( - -
-
-
- -

Web3 Browser

-
-
- - - -
-
- -
- - -
+ + + + + +
); }; -export default App; +export default Root; diff --git a/src/components/Browser.tsx b/src/components/Browser.tsx index 2519863..f3ba7aa 100644 --- a/src/components/Browser.tsx +++ b/src/components/Browser.tsx @@ -199,7 +199,7 @@ export function Navigator() { (inputEl.current = el)} disabled={!ready} - className="rounded-l-full border-none focus-visible:ring-offset-0" + className={`rounded-l-full bg-neutral-800 text-white border-none focus-visible:ring-offset-0 ${!ready ? "bg-neutral-950" : ""}`} name="url" />