diff --git a/src/components/lume/LumeDashboard/LumeDashboard.tsx b/src/components/lume/LumeDashboard/LumeDashboard.tsx index 9f08183..83209fc 100644 --- a/src/components/lume/LumeDashboard/LumeDashboard.tsx +++ b/src/components/lume/LumeDashboard/LumeDashboard.tsx @@ -1,21 +1,26 @@ -import * as Dialog from "@radix-ui/react-dialog" -import { Chain, useLume } from "../LumeProvider" -import Logo from "../../../assets/lume-logo.png" -import { cva } from "class-variance-authority" -import { cn } from "../../utils" +import * as Dialog from "@radix-ui/react-dialog"; +import { Network, useLume } from "../LumeProvider"; +import Logo from "../../../assets/lume-logo.png"; +import { cva } from "class-variance-authority"; +import { cn } from "../../utils"; +import { useState } from "react"; - -const SYNCSTATE_TO_TEXT: Record = { +const SYNCSTATE_TO_TEXT: Record = { done: "Synced", error: "Issue", - syncing: "Syncing" -} + syncing: "Syncing", +}; const LumeDashboard = () => { - const { chains } = useLume() + const { networks } = useLume(); - const contentChains = chains.filter((c) => c.type === "content") - const blockchainChains = chains.filter((c) => c.type === "blockchain") + const [uniqueNetworkTypes, setUniqueNetworkTypes] = useState([]); + + useEffect(() => { + const networkTypes = networks.map((network) => network.type); + const uniqueTypes = Array.from(new Set(networkTypes)); + setUniqueNetworkTypes(uniqueTypes); + }, [networks]); return ( @@ -26,73 +31,71 @@ const LumeDashboard = () => {
-
-

Content

-
- {contentChains.map((chain, index) => ( - - ))} + {uniqueNetworkTypes.map((type, index) => ( +
+

{type}

+
+ {networks + .filter((network) => network.type === type) + .map((network, networkIndex) => ( + + ))} +
-
- -
-

Blockchain

-
- {blockchainChains.map((chain, index) => ( - - ))} -
-
+ ))} - ) -} + ); +}; const chainIndicatorVariant = cva("chainIndicatorVariant", { variants: { syncState: { done: "text-primary", error: "text-red-500", - syncing: "text-orange-500" - } - } + syncing: "text-orange-500", + }, + }, }); -const ChainIndicator = ({ chain }: { chain: Chain }) => { +const ChainIndicator = ({ chain }: { chain: Network }) => { return (
{chain.name} {SYNCSTATE_TO_TEXT[chain.syncState]}
- ) -} + ); +}; const CircularProgress = ({ chain, - className + className, }: { - chain: Chain - className?: string + chain: Network; + className?: string; }) => { - const progressOffset = ((100 - chain.progress) / 100) * 282.74 // These math are not mathing - const textOffset = (chain.progress / 100) * (30 - 44) + 44 + const progressOffset = ((100 - chain.progress) / 100) * 282.74; // These math are not mathing + const textOffset = (chain.progress / 100) * (30 - 44) + 44; return ( {chain.progress} - ) -} + ); +}; -export default LumeDashboard +export default LumeDashboard;