From 7fc193ce7249898b5c83886f24e2ec114312bda1 Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Tue, 10 Oct 2023 12:40:39 +0200 Subject: [PATCH] fix: styles on lume identity --- .../vite-plugin-scope-tailwind+1.1.3.patch | 36 ++++++-- scoped-tailwind-prefix.ts | 1 + src/components/SwitchableComponent.tsx | 87 ++++++++++++------- .../lume/LumeDashboard/LumeDashboard.tsx | 15 ++-- .../lume/LumeIdentity/LumeIdentity.tsx | 4 +- .../lume/LumeIdentity/LumeIdentityContext.ts | 21 ++--- .../lume/LumeIdentity/LumeLogoBg.tsx | 12 +-- .../lume/LumeIdentity/components.tsx | 21 +++-- src/components/lume/LumeProvider.tsx | 4 +- src/components/utils.ts | 6 +- src/vite-env.d.ts | 2 +- vite.config.ts | 3 +- 12 files changed, 126 insertions(+), 86 deletions(-) create mode 100644 scoped-tailwind-prefix.ts diff --git a/patches/vite-plugin-scope-tailwind+1.1.3.patch b/patches/vite-plugin-scope-tailwind+1.1.3.patch index 64d2617..e53885f 100644 --- a/patches/vite-plugin-scope-tailwind+1.1.3.patch +++ b/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; diff --git a/scoped-tailwind-prefix.ts b/scoped-tailwind-prefix.ts new file mode 100644 index 0000000..98be378 --- /dev/null +++ b/scoped-tailwind-prefix.ts @@ -0,0 +1 @@ +export const TW_PREFIX = 'lumesdk' \ No newline at end of file diff --git a/src/components/SwitchableComponent.tsx b/src/components/SwitchableComponent.tsx index 5f67104..386a434 100644 --- a/src/components/SwitchableComponent.tsx +++ b/src/components/SwitchableComponent.tsx @@ -1,23 +1,34 @@ import { Variant, AnimatePresence, m } from "framer-motion"; import React from "react"; -const SwitchableComponentContext = React.createContext(undefined); +const SwitchableComponentContext = React.createContext< + SwitchableComponentContextType | undefined +>(undefined); -export const SwitchableComponentProvider = ({ children }: React.PropsWithChildren) => { - const [visibleComponent, setVisibleComponent] = React.useState(); +export const SwitchableComponentProvider = ({ + children, +}: React.PropsWithChildren) => { + const [visibleComponent, setVisibleComponent] = + React.useState(); - return - {children} - -} + return ( + + {children} + + ); +}; 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 .'); + throw new Error( + "useSwitchableComponent hook is being used outside of its context. Please ensure that it is wrapped within a .", + ); } React.useEffect(() => { // Set the initial value if it's provided @@ -30,22 +41,25 @@ export function useSwitchableComponent(initialValue?: SwitchableComponentType) { } const variants: Record = { - 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() +export const SwitchableComponent = ({ + children, + index, +}: React.PropsWithChildren<{ index: string }>) => { + const [width, setWidth] = React.useState(); return ( setWidth(e.currentTarget.getBoundingClientRect().width!)} - > + style={{ maxWidth: width ?? "auto" }} + onTransitionEnd={(e) => + setWidth(e.currentTarget.getBoundingClientRect().width!) + }> {children} @@ -65,21 +80,33 @@ export const SwitchableComponent = ({ children, index }: React.PropsWithChildren }; type SwitchableComponentType = { - index: string, - render: (props: T | any) => ReturnType -} + index: string; + render: (props: T | any) => ReturnType; +}; type SwitchableComponentContextType = { - visibleComponent: SwitchableComponentType, - setVisibleComponent: React.Dispatch | undefined>> -} + visibleComponent: SwitchableComponentType; + setVisibleComponent: React.Dispatch< + React.SetStateAction< + SwitchableComponentType | 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(Component: React.FC, index: string) { +export function makeSwitchable( + Component: React.FC, + index: string, +) { return { - render(props: T) { return }, - index: index || Symbol(Component.name).toString() + render(props: T) { + return ; + }, + index: index || Symbol(Component.name).toString(), }; -}; +} diff --git a/src/components/lume/LumeDashboard/LumeDashboard.tsx b/src/components/lume/LumeDashboard/LumeDashboard.tsx index 43dad1f..862d30e 100644 --- a/src/components/lume/LumeDashboard/LumeDashboard.tsx +++ b/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]} @@ -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)" }}> + strokeDashoffset="0"> + strokeDasharray="282.74px"> + style={{ transform: "rotate(90deg) translate(0px, -98px)" }}> {chain.sync} diff --git a/src/components/lume/LumeIdentity/LumeIdentity.tsx b/src/components/lume/LumeIdentity/LumeIdentity.tsx index 1b49f40..1cb078f 100644 --- a/src/components/lume/LumeIdentity/LumeIdentity.tsx +++ b/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() { - + {/* @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/src/components/lume/LumeIdentity/LumeIdentityContext.ts b/src/components/lume/LumeIdentity/LumeIdentityContext.ts index 3b9bfc2..dfa3bac 100644 --- a/src/components/lume/LumeIdentity/LumeIdentityContext.ts +++ b/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: () => {}, }; } diff --git a/src/components/lume/LumeIdentity/LumeLogoBg.tsx b/src/components/lume/LumeIdentity/LumeLogoBg.tsx index 4f61444..316c173 100644 --- a/src/components/lume/LumeIdentity/LumeLogoBg.tsx +++ b/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"> { x="-2" y="-1" width="404" - height="349" - > + height="349"> { id="pattern0" patternContentUnits="objectBoundingBox" width="1" - height="1" - > + height="1"> { y1="186.741" x2="-59.0615" y2="163.457" - gradientUnits="userSpaceOnUse" - > + gradientUnits="userSpaceOnUse"> diff --git a/src/components/lume/LumeIdentity/components.tsx b/src/components/lume/LumeIdentity/components.tsx index b0b0318..606d856 100644 --- a/src/components/lume/LumeIdentity/components.tsx +++ b/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); + } + }}>