diff --git a/src/components/lume/LumeDashboard/LumeDashboard.tsx b/src/components/lume/LumeDashboard/LumeDashboard.tsx index b8be719..23d85a5 100644 --- a/src/components/lume/LumeDashboard/LumeDashboard.tsx +++ b/src/components/lume/LumeDashboard/LumeDashboard.tsx @@ -2,10 +2,10 @@ import * as Dialog from "@radix-ui/react-dialog"; import Logo from "../../../assets/lume-logo.png"; import { cva } from "class-variance-authority"; import { cn } from "../../utils"; -import { useState, useEffect } from "react"; import React from "react"; import camelCase from "camelcase"; import { useNetworks, type Network } from "../../NetworksProvider"; +import { TW_PREFIX } from "../../../../scoped-tailwind-prefix"; const SYNCSTATE_TO_TEXT: Record = { done: "Synced", @@ -20,13 +20,8 @@ const LumeDashboard = (props: any) => { const { children }: { children: React.PropsWithChildren } = props; const { networks } = useNetworks(); - const [uniqueNetworkTypes, setUniqueNetworkTypes] = useState([]); - - useEffect(() => { - const networkTypes = networks.map((network) => network.type); - const uniqueTypes = Array.from(new Set(networkTypes)); - setUniqueNetworkTypes(uniqueTypes); - }, [networks]); + const networkTypes = networks.map((network) => network.type); + const uniqueNetworkTypes = Array.from(new Set(networkTypes)); const DefaultTrigger = (props: any) => ( @@ -124,12 +119,12 @@ const CircularProgress = ({ className?: string; }) => { const size = 70; - const progressWidth = 2; - const circleWidth = 2; + const progressWidth = size * 0.03; // based on size + const circleWidth = size * 0.03; // based on size const radius = size / 2 - 10; const circumference = 2 * radius * Math.PI; const offset = circumference * ((100 - chain.sync) / 100); - const fontSize = 15; + const fontSize = size * 0.2; // based on size return ( diff --git a/src/components/lume/LumeIdentity/LumeIdentity.tsx b/src/components/lume/LumeIdentity/LumeIdentity.tsx index c908d9d..f13642f 100644 --- a/src/components/lume/LumeIdentity/LumeIdentity.tsx +++ b/src/components/lume/LumeIdentity/LumeIdentity.tsx @@ -136,7 +136,7 @@ export default function Wrapped({ children }: React.PropsWithChildren) { {/* @ditorodev: `left-[calc(50%-192px)] top-[calc(50vh-174px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */} - + diff --git a/stories/LumeDashboard.stories.tsx b/stories/LumeDashboard.stories.tsx index 6957aad..2f76672 100644 --- a/stories/LumeDashboard.stories.tsx +++ b/stories/LumeDashboard.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { StoryFn, Meta } from "@storybook/react"; import LumeDashboard from "../src/components/lume/LumeDashboard/LumeDashboard.js"; -import NetworksProvider from "src/components/NetworksProvider.js"; +import NetworksProvider from "../src/components/NetworksProvider.js"; export default { title: "LumeDashboard", diff --git a/stories/LumeIdentity.stories.tsx b/stories/LumeIdentity.stories.tsx index 310c558..33003b9 100644 --- a/stories/LumeIdentity.stories.tsx +++ b/stories/LumeIdentity.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { StoryFn, Meta } from "@storybook/react"; import LumeIdentity from "../src/components/lume/LumeIdentity/LumeIdentity.js"; -import AuthProvider from "src/components/AuthProvider.js"; +import AuthProvider from "../src/components/AuthProvider.js"; export default { title: "LumeIdentity",