chore: small refactor using CVA

src/components/lume/LumeDashboard/LumeDashboard.tsx

@@ -1,25 +1,21 @@
 import * as Dialog from "@radix-ui/react-dialog"
 import { Chain, useLume } from "../LumeProvider"
-import Logo from "../../../assets/lume-logo.png";
+import Logo from "../../../assets/lume-logo.png"
+import { cva } from "class-variance-authority"
+import { cn } from "../../utils"
 
-const SYNCSTATE_TO_TEXT: Record<Chain['syncState'], string> = {
-  done: 'Synced',
-  error: 'Issue',
-  syncing: 'Syncing'
+
+const SYNCSTATE_TO_TEXT: Record<Chain["syncState"], string> = {
+  done: "Synced",
+  error: "Issue",
+  syncing: "Syncing"
 }
 
-const SYNC_STATE_TO_TW_COLOR: Record<Chain['syncState'], string> = {
-  'done': 'text-primary',
-  'error': 'text-red-500',
-  'syncing': 'text-orange-500',
-}
-
-
 const LumeDashboard = () => {
   const { chains } = useLume()
 
-  const contentChains = chains.filter(c => c.type === 'content');
-  const blockchainChains = chains.filter(c => c.type === 'blockchain');
+  const contentChains = chains.filter((c) => c.type === "content")
+  const blockchainChains = chains.filter((c) => c.type === "blockchain")
 
   return (
     <Dialog.Root>
@@ -33,14 +29,24 @@ const LumeDashboard = () => {
           <div className="mt-4 mb-8">
             <h2 className="text-xl mb-4"> Content </h2>
             <div className="grid grid-cols-2">
-              {contentChains.map((chain, index) => <ChainIndicator key={`Content_ChainIndicator_${index}`} chain={chain} />)}
+              {contentChains.map((chain, index) => (
+                <ChainIndicator
+                  key={`Content_ChainIndicator_${index}`}
+                  chain={chain}
+                />
+              ))}
             </div>
           </div>
 
           <div className="mt-4 mb-8">
             <h2 className="text-xl mb-4"> Blockchain </h2>
             <div className="grid grid-cols-2">
-              {blockchainChains.map((chain, index) => <ChainIndicator key={`Blockchain_ChainIndicator_${index}`} chain={chain} />)}
+              {blockchainChains.map((chain, index) => (
+                <ChainIndicator
+                  key={`Blockchain_ChainIndicator_${index}`}
+                  chain={chain}
+                />
+              ))}
             </div>
           </div>
         </Dialog.Content>
@@ -49,14 +55,29 @@ const LumeDashboard = () => {
   )
 }
 
+const chainIndicatorVariant = cva("chainIndicatorVariant", {
+  variants: {
+    syncState: {
+      done: "text-primary",
+      error: "text-red-500",
+      syncing: "text-orange-500"
+    }
+  }
+});
 const ChainIndicator = ({ chain }: { chain: Chain }) => {
-  return <div key={chain.chainId} className="flex flex-row gap-x-2 items-center ">
-    <CircularProgress chain={chain} />
-    <div className="flex flex-col">
-      <span>{chain.name}</span>
-      <span className={`text-[12px] -mt-1 ${SYNC_STATE_TO_TW_COLOR[chain.syncState]}`}> {SYNCSTATE_TO_TEXT[chain.syncState]} </span>
+  return (
+    <div key={chain.chainId} className="flex flex-row gap-x-2 items-center ">
+      <CircularProgress chain={chain} />
+      <div className="flex flex-col">
+        <span>{chain.name}</span>
+        <span
+          className={cn(['text-[12px] -mt-1', chainIndicatorVariant({syncState: chain.syncState})])}
+        >
+          {SYNCSTATE_TO_TEXT[chain.syncState]}
+        </span>
+      </div>
     </div>
-  </div>
+  )
 }
 
 const CircularProgress = ({
@@ -71,7 +92,7 @@ const CircularProgress = ({
 
   return (
     <svg
-      className={`${className} ${SYNC_STATE_TO_TW_COLOR[chain.syncState]}`}
+      className={cn([className, chainIndicatorVariant({syncState: chain.syncState})])}
       width="36"
       height="36"
       viewBox="0 0 100 100"

src/components/lume/LumeIdentity/LumeIdentity.tsx

@@ -8,9 +8,7 @@ import { LumeIdentityContext, Session } from './LumeIdentityContext';
 import { LazyMotion, domAnimation } from 'framer-motion';
 import * as Dialog from '@radix-ui/react-dialog';
 
-type Props = {}
-
-const LumeIdentity: React.FC<Props> = ({}) => {
+const LumeIdentity: React.FC = () => {
   const { visibleComponent, setVisibleComponent } = useSwitchableComponent(ComponentList.SubmitButton)
 
   const isSubmitButtonInView = [ComponentList.SubmitButton.index].includes(visibleComponent.index)
@@ -81,4 +79,4 @@ export default function Wrapped() {
       </Dialog.Portal>
     </Dialog.Root>
   </LumeIdentityContext.Provider>
-};
+}

src/components/lume/LumeIdentity/components.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { useLumeIndentity } from "./LumeIdentityContext";
 
 // Extracted components
-const SubmitButtonComponent = ({ }) => {
+const SubmitButtonComponent = () => {
   const { setVisibleComponent } = useSwitchableComponent();
   return (
     <Button className='w-full h-12' variant={"outline"} onClick={() => setVisibleComponent(components.SeedPhraseInput)}>
@@ -16,7 +16,7 @@ const SubmitButtonComponent = ({ }) => {
   )
 };
 
-const SeedPhraseInputComponent = ({ }) => {
+const SeedPhraseInputComponent = () => {
   const { signIn } = useLumeIndentity();
   return (
     <m.form className='flex-col flex gap-y-4' onSubmit={(e) => {
@@ -57,7 +57,7 @@ const SetupAccountKeyComponent = () => {
       transition={{ type: "just", delay: 0.1 }}
       className="min-h-12 h-full max-w-full"
       style={{ maxWidth: width ?? 'auto' }}
-      ref={(t) => setTimeout(() => setWidth(t?.getBoundingClientRect().width!), 0)}
+      ref={(t) => setTimeout(() => setWidth(t!.getBoundingClientRect().width!), 0)}
     >
       <Button className='w-full h-full' onClick={() => setVisibleComponent(components.SeedPhraseGeneration)}>
         <span className="text-center text-lg font-normal leading-normal">I get it, I'll keep it safe. Let's see the key.</span>

tsconfig.json

@@ -22,10 +22,10 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-      "@/styles/*": ["styles/*"],
-    },
+    // "paths": {
+    //   "@/*": ["src/*"],
+    //   "@/styles/*": ["styles/*"],
+    // },
     "typeRoots": ["src/vite-env.d.ts"]
   },
   "include": [

vite.config.ts

@@ -1,17 +1,20 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-// import scopeTailwind from "vite-plugin-scope-tailwind";
+import scopeTailwind from "vite-plugin-scope-tailwind";
 import { resolve } from 'path'
 // import reactTailwindClassnamePrefixer from "./lib/vite-plugin-react-classname-prefixer";
 import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svgr(), react()],
+  plugins: [svgr(), react(), scopeTailwind({react: true})],
   resolve: {
+    // I have no clue why aliases are not working at all...
     alias: {
-      '@/styles/': resolve(__dirname, './styles'),
-      '@/': resolve(__dirname, './src'),
+      '@styles/': resolve(__dirname, './styles'),
+      '@components/': resolve(__dirname, './src/components'),
+      '@assets/': resolve(__dirname, './src/assets'),
+      '@': resolve(__dirname, './src'),
     },
   },
 })