This repository has been archived on 2023-12-17. You can view files and clone it, but cannot push or open issues or pull requests.
extension/ui/apps/dashboard/App.jsx

92 lines
2.5 KiB
React
Raw Normal View History

2023-07-27 22:20:20 +00:00
import "./App.scss";
import { useEffect, useState } from "react";
import Header from "./components/Header.jsx";
import Art from "./components/Art.jsx";
import { listenBootStatus, waitForConnected } from "../../../shared/util.ts";
2023-07-27 22:20:20 +00:00
import { createClient } from "@lumeweb/kernel-network-registry-client";
import Network from "./components/Network.jsx";
import Footer from "./components/Footer.jsx";
import classNames from "classnames";
import Progress from "./components/Progress.jsx";
2023-07-27 22:20:20 +00:00
const networkClient = createClient();
async function getNetworks() {
let types = {};
await waitForConnected(async () => {
const allTypes = await networkClient.getTypes();
for (const type of allTypes) {
types[type] = await networkClient.getNetworksByType(type);
}
});
return types;
}
export default function App() {
let [connected, setConnected] = useState(false);
let [networks, setNetworks] = useState({});
let [showConnected, setShowConnected] = useState(false);
let [artPulse, setArtPulse] = useState(false);
let [bootPercent, setBootPercent] = useState(0);
2023-07-27 22:20:20 +00:00
useEffect(() => {
getNetworks().then((networks) => {
setConnected(true);
setNetworks(networks);
});
});
useEffect(() => {
if (connected) {
const pulseTimeout = setTimeout(() => {
setArtPulse(true);
setTimeout(() => {
setArtPulse(false);
setShowConnected(true);
}, 1000);
}, 1000);
return () => clearTimeout(pulseTimeout);
}
}, [connected]);
useEffect(() => {
listenBootStatus((percent) => {
setBootPercent(percent);
});
});
2023-07-27 22:20:20 +00:00
return (
<main>
<Header connected={connected} />
<Art connected={showConnected} pulse={artPulse} />
{!showConnected && <Progress percent={bootPercent} />}
2023-07-27 22:20:20 +00:00
<div className={classNames("content", { connected: showConnected })}>
<h3>All set.</h3>
<div className="content-grid">
{showConnected &&
Object.entries(networks).map(([type, networks]) => {
if (!networks.length) {
return <></>;
}
return (
<div>
<h4>{type} Networks</h4>
<ul>
{networks.map((network) => (
<Network module={network} />
))}
</ul>
</div>
);
})}
</div>
</div>
<Footer connected={connected} />
</main>
);
}