fix: styles on lume identity

patches/vite-plugin-scope-tailwind+1.1.3.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs b/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs
-index 0e337b0..495546b 100644
+index 0e337b0..530cd41 100644
 --- a/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs
 +++ b/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs
 @@ -1,2 +1,109 @@
@@ -95,7 +95,7 @@ index 0e337b0..495546b 100644
 +}, k = e => r => {
 +    const t = /class/g
 +    return r.match(t) ? r.replace(/class: "/g, `class: "${e} `) : r
-+}, g = P('d'), D = ({ react: e = !1, ignore: r = [], classNameTransformers = [] } = {}) => ({
++}, g = P('d'), D = ({ react: e = !1, ignore: r = [], prefix, classNameTransformers = [] } = {}) => ({
 +    name: 'vite-plugin-scope-tailwind', config: t => {
 +        var a, s
 +        const n = ((s = (a = t.css) == null ? void 0 : a.postcss) == null ? void 0 : s.plugins) ?? [], o = O()
@@ -103,34 +103,54 @@ index 0e337b0..495546b 100644
 +            css: {
 +                postcss: {
 +                    plugins: [...n, ...R(o).map(_ => require(p.join(process.cwd(), 'node_modules', _))), S({
-+                        prefix: `${g}.`,
++                        prefix: `${prefix || g}.`,
 +                        ignore: r
 +                    })]
 +                }
 +            }
 +        }
-+    }, transform: e ? $(g, classNameTransformers) : k(g)
++    }, transform: e ? $(prefix || g, classNameTransformers) : k(prefix || g)
 +})
 +module.exports = D
  //# sourceMappingURL=index.cjs.map
 diff --git a/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs b/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs
-index 9594d38..824fafe 100644
+index 9594d38..14bbb10 100644
 --- a/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs
 +++ b/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs
-@@ -111,6 +111,7 @@ const S = ({
+@@ -111,6 +111,8 @@ const S = ({
    return r.match(t) ? r.replace(/class: "/g, `class: "${e} `) : r;
  }, g = P("d"), M = ({
    react: e = !1,
 +  classNameTransformers = [],
++  prefix,
    ignore: r = []
  } = {}) => ({
    name: "vite-plugin-scope-tailwind",
-@@ -131,7 +132,7 @@ const S = ({
+@@ -125,13 +127,13 @@ const S = ({
+             ...R(o).map(
+               (_) => require(p.join(process.cwd(), "node_modules", _))
+             ),
+-            S({ prefix: `${g}.`, ignore: r })
++            S({ prefix: `${prefix || g}.`, ignore: r })
+           ]
+         }
        }
      };
    },
 -  transform: e ? $(g) : k(g)
-+  transform: e ? $(g, classNameTransformers) : k(g)
++  transform: e ? $(prefix || g, classNameTransformers) : k(prefix || g )
  });
  export {
    M as default
+diff --git a/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts b/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts
+index 2b63f48..9396191 100644
+--- a/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts
++++ b/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts
+@@ -2,5 +2,7 @@ import { Plugin } from "vite";
+ declare const plugin: ({ react, ignore, }?: {
+     react?: boolean | undefined;
+     ignore?: RegExp | RegExp[] | undefined;
++    classNameTransformers?: string[],
++    prefix?: string
+ }) => Plugin;
+ export default plugin;

scoped-tailwind-prefix.ts

@@ -0,0 +1 @@
+export const TW_PREFIX = 'lumesdk'

src/components/SwitchableComponent.tsx

@@ -1,23 +1,34 @@
 import { Variant, AnimatePresence, m } from "framer-motion";
 import React from "react";
 
-const SwitchableComponentContext = React.createContext<SwitchableComponentContextType | undefined>(undefined);
+const SwitchableComponentContext = React.createContext<
+  SwitchableComponentContextType | undefined
+>(undefined);
 
-export const SwitchableComponentProvider = ({ children }: React.PropsWithChildren) => {
-  const [visibleComponent, setVisibleComponent] = React.useState<SwitchableComponentType>();
+export const SwitchableComponentProvider = ({
+  children,
+}: React.PropsWithChildren) => {
+  const [visibleComponent, setVisibleComponent] =
+    React.useState<SwitchableComponentType>();
 
-  return <SwitchableComponentContext.Provider
-    value={{ visibleComponent: visibleComponent ?? DEFAULT_COMPONENT, setVisibleComponent }}
-  >
-    {children}
-  </SwitchableComponentContext.Provider>
-}
+  return (
+    <SwitchableComponentContext.Provider
+      value={{
+        visibleComponent: visibleComponent ?? DEFAULT_COMPONENT,
+        setVisibleComponent,
+      }}>
+      {children}
+    </SwitchableComponentContext.Provider>
+  );
+};
 
 export function useSwitchableComponent(initialValue?: SwitchableComponentType) {
   const contextValue = React.useContext(SwitchableComponentContext);
 
   if (contextValue === undefined) {
-    throw new Error('useSwitchableComponent hook is being used outside of its context. Please ensure that it is wrapped within a <SwitchableComponentProvider>.');
+    throw new Error(
+      "useSwitchableComponent hook is being used outside of its context. Please ensure that it is wrapped within a <SwitchableComponentProvider>.",
+    );
   }
   React.useEffect(() => {
     // Set the initial value if it's provided
@@ -30,22 +41,25 @@ export function useSwitchableComponent(initialValue?: SwitchableComponentType) {
 }
 
 const variants: Record<string, Variant> = {
-  hidden: { y: 50, opacity: 0, position: 'absolute' },
+  hidden: { y: 50, opacity: 0, position: "absolute" },
   show: {
     y: 0,
     x: 0,
     opacity: 1,
-    position: 'relative',
+    position: "relative",
     transition: {
       type: "tween",
-      ease: 'easeInOut'
+      ease: "easeInOut",
     },
   },
-  exit: { y: -50, opacity: 0, position: 'absolute' }
+  exit: { y: -50, opacity: 0, position: "absolute" },
 };
 
-export const SwitchableComponent = ({ children, index }: React.PropsWithChildren<{ index: string }>) => {
-  const [width, setWidth] = React.useState<number>()
+export const SwitchableComponent = ({
+  children,
+  index,
+}: React.PropsWithChildren<{ index: string }>) => {
+  const [width, setWidth] = React.useState<number>();
   return (
     <AnimatePresence>
       <m.div
@@ -55,9 +69,10 @@ export const SwitchableComponent = ({ children, index }: React.PropsWithChildren
         exit="exit"
         variants={variants}
         className="h-full w-full"
-        style={{ maxWidth: width ?? 'auto' }}
-        onTransitionEnd={(e) => setWidth(e.currentTarget.getBoundingClientRect().width!)}
-      >
+        style={{ maxWidth: width ?? "auto" }}
+        onTransitionEnd={(e) =>
+          setWidth(e.currentTarget.getBoundingClientRect().width!)
+        }>
         {children}
       </m.div>
     </AnimatePresence>
@@ -65,21 +80,33 @@ export const SwitchableComponent = ({ children, index }: React.PropsWithChildren
 };
 
 type SwitchableComponentType<T extends {} = {}> = {
-  index: string,
-  render: (props: T | any) => ReturnType<React.FC>
-}
+  index: string;
+  render: (props: T | any) => ReturnType<React.FC>;
+};
 
 type SwitchableComponentContextType<T = unknown> = {
-  visibleComponent: SwitchableComponentType<T extends {} ? T : any>,
-  setVisibleComponent: React.Dispatch<React.SetStateAction<SwitchableComponentType<T extends {} ? T : any> | undefined>>
-}
+  visibleComponent: SwitchableComponentType<T extends {} ? T : any>;
+  setVisibleComponent: React.Dispatch<
+    React.SetStateAction<
+      SwitchableComponentType<T extends {} ? T : any> | undefined
+    >
+  >;
+};
 
-const DEFAULT_COMPONENT = { render: () => undefined, index: Symbol('DEFAULT_COMPONENT').toString() }
+const DEFAULT_COMPONENT = {
+  render: () => undefined,
+  index: Symbol("DEFAULT_COMPONENT").toString(),
+};
 
 // Factory function
-export function makeSwitchable<T extends {}>(Component: React.FC<T>, index: string) {
+export function makeSwitchable<T extends {}>(
+  Component: React.FC<T>,
+  index: string,
+) {
   return {
-    render(props: T) { return <Component {...props} /> },
-    index: index || Symbol(Component.name).toString()
+    render(props: T) {
+      return <Component {...props} />;
+    },
+    index: index || Symbol(Component.name).toString(),
   };
-};
+}

src/components/lume/LumeDashboard/LumeDashboard.tsx

@@ -71,8 +71,7 @@ const NetworkIndicator = ({ network }: { network: Network }) => {
           className={cn([
             "text-[12px] -mt-1",
             chainIndicatorVariant({ syncState: network.syncState }),
-          ])}
-        >
+          ])}>
           {SYNCSTATE_TO_TEXT[network.syncState]}
         </span>
       </div>
@@ -101,8 +100,7 @@ const CircularProgress = ({
       viewBox="0 0 100 100"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
-      style={{ transform: "rotate(-90deg)" }}
-    >
+      style={{ transform: "rotate(-90deg)" }}>
       <circle
         r="45"
         cx="50"
@@ -111,8 +109,7 @@ const CircularProgress = ({
         stroke="#e0e0e0"
         strokeWidth="4px"
         strokeDasharray="282.74px"
-        strokeDashoffset="0"
-      ></circle>
+        strokeDashoffset="0"></circle>
       <circle
         r="45"
         cx="50"
@@ -122,16 +119,14 @@ const CircularProgress = ({
         strokeLinecap="round"
         strokeDashoffset={`${progressOffset}px`}
         fill="transparent"
-        strokeDasharray="282.74px"
-      ></circle>
+        strokeDasharray="282.74px"></circle>
       <text
         x={textOffset}
         y="57.5px"
         fill="currentColor"
         fontSize="26px"
         fontWeight="normal"
-        style={{ transform: "rotate(90deg) translate(0px, -98px)" }}
-      >
+        style={{ transform: "rotate(90deg) translate(0px, -98px)" }}>
         {chain.sync}
       </text>
     </svg>

src/components/lume/LumeIdentity/LumeIdentity.tsx

@@ -9,7 +9,6 @@ import { LazyMotion, domAnimation } from "framer-motion";
 import * as Dialog from "@radix-ui/react-dialog";
 import LumeLogoBg from "./LumeLogoBg";
 import type { FC } from "react";
-import { useState } from "react";
 
 const LumeIdentity: FC = () => {
   const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
@@ -117,7 +116,8 @@ export default function Wrapped() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
-        <Dialog.Content className="fixed z-50 w-full h-full top-0 flex items-center justify-center">
+        {/* @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 */}
+        <Dialog.Content className="absolute left-[calc(50%-192px)] top-[calc(50vh-174px)] mx-auto my-auto w-96 max-w-full h-auto z-40 flex items-center justify-center">
           <SwitchableComponentProvider>
             <LumeIdentity />
           </SwitchableComponentProvider>

src/components/lume/LumeIdentity/LumeIdentityContext.ts

@@ -1,26 +1,23 @@
-import React, { useEffect, useState } from "react";
+import { useState } from "react";
 import {
   login,
-  loginComplete,
-  logoutComplete,
+  // loginComplete,
+  // logoutComplete,
 } from "@lumeweb/libkernel/kernel";
 
 export function useLumeIndentity() {
   const [loggedIn, setLoggedIn] = useState(false);
-  useEffect(() => {
-    loginComplete().then(() => {
-      setLoggedIn(true);
-    });
-    logoutComplete().then(() => {
-      setLoggedIn(false);
-    });
-  });
 
   return {
     isSignedIn: loggedIn,
     async signIn(key: Uint8Array) {
       await login(key);
+      // await loginComplete(); # this function is buggy `auth.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'promise') `
+      setLoggedIn(true);
+    },
+    async signOut() {
+      // await logoutComplete();
+      setLoggedIn(false);
     },
-    signOut: () => {},
   };
 }

src/components/lume/LumeIdentity/LumeLogoBg.tsx

@@ -7,8 +7,7 @@ const LumeLogoBg = ({ className }: { className?: string }) => {
       viewBox="0 0 524 500"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-    >
+      xmlnsXlink="http://www.w3.org/1999/xlink">
       <mask
         id="mask0_902_66"
         style={{ maskType: "alpha" }}
@@ -16,8 +15,7 @@ const LumeLogoBg = ({ className }: { className?: string }) => {
         x="-2"
         y="-1"
         width="404"
-        height="349"
-      >
+        height="349">
         <rect
           x="-1.04292"
           y="346.31"
@@ -41,8 +39,7 @@ const LumeLogoBg = ({ className }: { className?: string }) => {
           id="pattern0"
           patternContentUnits="objectBoundingBox"
           width="1"
-          height="1"
-        >
+          height="1">
           <use
             xlinkHref="#image0_902_66"
             transform="matrix(0.000399371 0 0 0.000331658 0.0222222 0.0369089)"
@@ -54,8 +51,7 @@ const LumeLogoBg = ({ className }: { className?: string }) => {
           y1="186.741"
           x2="-59.0615"
           y2="163.457"
-          gradientUnits="userSpaceOnUse"
-        >
+          gradientUnits="userSpaceOnUse">
           <stop stopColor="#1FC3F7" />
           <stop offset="0.534226" stopColor="#33A653" />
           <stop offset="0.799851" stopColor="#62C554" />

src/components/lume/LumeIdentity/components.tsx

@@ -15,6 +15,7 @@ import { useMemo, useState } from "react";
 
 import * as bip39 from "@scure/bip39";
 import { wordlist } from "@scure/bip39/wordlists/english";
+import { TW_PREFIX } from "../../../../scoped-tailwind-prefix";
 
 async function seedToKey(seed: string) {
   return bip39.mnemonicToSeed(seed);
@@ -96,9 +97,11 @@ 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) => {
+        if (t) {
+          setTimeout(() => setWidth(t.getBoundingClientRect().width!), 0);
+        }
+      }}>
       <Button
         className="w-full h-full"
         onClick={() => setVisibleComponent(SeedPhraseGeneration)}>
@@ -150,15 +153,15 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
             transition={{ type: "tween", duration: 0.1 }}></m.div>
         ) : null}
       </AnimatePresence>
-      <div className="z-20 relative mb-2.5 w-full h-full flex-wrap justify-center items-center gap-2.5 inline-flex">
+      <div className="z-20 relative mb-2 w-full h-full flex-wrap justify-center items-center gap-2 inline-flex">
         {phrases.map((phrase, index) => (
           <div
             key={`SeedPhrase_${index}`}
-            className={`justify-center items-center gap-2.5 flex w-[calc(33%-10px)] h-10 rounded border border-current relative ring-current text-neutral-700`}>
-            <span className=" text-white text-md font-normal leading-normal w-full h-fit px-2.5 bg-transparent text-center">
+            className={`${TW_PREFIX} relative justify-center items-center gap-2 flex h-10 rounded border border-current ring-current text-neutral-700 w-[calc(33%-8px)]`}>
+            <span className="${TW_PREFIX} text-white text-md font-normal leading-normal w-full h-fit px-2 bg-transparent text-center">
               {phrase}
             </span>
-            <span className="left-[6px] top-0 absolute text-current text-xs font-normal leading-normal">
+            <span className="${TW_PREFIX} left-[6px] top-0 absolute text-current text-xs font-normal leading-normal">
               {index + 1}
             </span>
           </div>
@@ -177,7 +180,7 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
           ) : null}
         </AnimatePresence>
         <Button
-          className={`w-full h-12 ${
+          className={`${TW_PREFIX} w-[calc(100%-8px)] h-12 ${
             buttonClickedState === "clicked"
               ? "!text-primary !border-primary"
               : ""
@@ -194,7 +197,7 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
       </div>
       {step === 0 ? (
         <Button
-          className="z-20 w-full h-12 text-white bg-neutral-700 hover:bg-neutral-800"
+          className="z-20 ml-1 w-[calc(100%-8px)] h-12 text-white border border-neutral-700 bg-neutral-700 hover:bg-neutral-800"
           variant="secondary"
           onClick={() => setStep(1)}>
           Continue

src/components/lume/LumeProvider.tsx

@@ -48,12 +48,12 @@ const LumeProvider = ({ children }: { children: ReactNode }) => {
     (id: string, newNetwork: NetworkStatus & { syncState: SyncState }) => {
       setLume((prevLume) => {
         const updatedNetworks = prevLume.networks.map((network) =>
-          network.id === id ? { ...network, ...newNetwork } : network
+          network.id === id ? { ...network, ...newNetwork } : network,
         );
         return { ...prevLume, networks: updatedNetworks };
       });
     },
-    []
+    [],
   );
 
   const update = async () => {

src/components/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

src/vite-env.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="vite/client" />
-/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vite-plugin-svgr/client" />

vite.config.ts

@@ -6,13 +6,14 @@ import svgr from "vite-plugin-svgr";
 import dts from "vite-plugin-dts";
 import optimizer from "vite-plugin-optimizer";
 import noBundlePlugin from "vite-plugin-no-bundle";
+import { TW_PREFIX } from "./scoped-tailwind-prefix";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     svgr(),
     react(),
-    scopeTailwind({ react: true }),
+    scopeTailwind({ react: true, prefix: TW_PREFIX, classNameTransformers: ['cn'] }),
     dts({
       tsconfigPath: "tsconfig.build.json",
     }),