fix: add more loading state
This commit is contained in:
parent
0ed8f0d80d
commit
8cd4324508
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue