fix: add more loading state

This commit is contained in:
Juan Di Toro 2023-11-01 23:23:00 +01:00
parent 0ed8f0d80d
commit 8cd4324508
2 changed files with 51 additions and 20 deletions

View File

@ -2,6 +2,7 @@ import {
AuthProvider, AuthProvider,
LumeStatusProvider, LumeStatusProvider,
NetworksProvider, NetworksProvider,
useNetworks,
} from "@lumeweb/sdk"; } from "@lumeweb/sdk";
import { import {
@ -13,30 +14,60 @@ import Lume from "@/components/Lume.tsx";
import LogoImg from "@/assets/lume-logo.png"; import LogoImg from "@/assets/lume-logo.png";
const App: React.FC = () => { 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 ( return (
<BrowserStateProvider> <header className="relative border rounded-md m-4 border-neutral-800 px-3 py-4 w-[calc(100%-32px)] bg-neutral-900 flex flex-col">
<LumeStatusProvider> <div className="relative px-2 my-2 mb-4 pl-2 pb-2 w-full flex justify-between">
<AuthProvider> <div className="flex items-center gap-x-2 text-zinc-500">
<header className="relative border rounded-md m-2 border-neutral-800 px-3 py-4 w-[calc(100%-16px)] bg-neutral-900 flex flex-col">
<div className="relative px-2 pl-2 py-2 w-full flex justify-between">
<div className="flex gap-x-2 my-2 mb-4 text-zinc-500">
<img src={LogoImg.src} className="w-20 h-7" /> <img src={LogoImg.src} className="w-20 h-7" />
<h2 className="border-l border-current pl-2">Web3 Browser</h2> <h2 className="border-l border-current pl-2">Web3 Browser</h2>
</div> </div>
<div className="w-32 flex justify-end max-h-10"> <div className="w-32 flex justify-end h-10">
<NetworksProvider>
<Lume /> <Lume />
</NetworksProvider>
</div> </div>
</div> </div>
<Navigator /> <Navigator />
{ethStatus?.syncState === "syncing" ||
handshakeStatus?.syncState === "syncing" ? (
<div className="py-2 flex flex-row">
{ethStatus?.syncState === "syncing" ? (
<span className="rounded-full bg-white text-black p-1">
{ethStatus.sync.toPrecision(1)}% Syncing Ethereum Network
</span>
) : null}
{handshakeStatus?.syncState === "syncing" ? (
<span className="rounded-full bg-white text-black p-1">
{handshakeStatus.sync.toPrecision(1)}% Syncing Handshake Network
</span>
) : null}
</div>
) : null}
</header> </header>
);
};
const Root = () => {
return (
<BrowserStateProvider>
<LumeStatusProvider>
<NetworksProvider>
<AuthProvider>
<App />
<Browser /> <Browser />
</AuthProvider> </AuthProvider>
</NetworksProvider>
</LumeStatusProvider> </LumeStatusProvider>
</BrowserStateProvider> </BrowserStateProvider>
); );
}; };
export default App; export default Root;

View File

@ -199,7 +199,7 @@ export function Navigator() {
<NavInput <NavInput
ref={(el) => (inputEl.current = el)} ref={(el) => (inputEl.current = el)}
disabled={!ready} 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" name="url"
/> />
<Button <Button