LumeWeb
/
sdk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: styles on lume identity

This commit is contained in:
Juan Di Toro 2023-10-10 12:40:39 +02:00
parent b93ee7fa18
commit 7fc193ce72
12 changed files with 126 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
patches/vite-plugin-scope-tailwind+1.1.3.patch
View File

@ -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;

1
scoped-tailwind-prefix.ts Normal file
View File

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

83
src/components/SwitchableComponent.tsx
View File

@ -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 }}
>
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(),
};
};
}

15
src/components/lume/LumeDashboard/LumeDashboard.tsx
View File

@ -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>

4
src/components/lume/LumeIdentity/LumeIdentity.tsx
View File

@ -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>

21
src/components/lume/LumeIdentity/LumeIdentityContext.ts
View File

@ -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: () => {},
};
}

12
src/components/lume/LumeIdentity/LumeLogoBg.tsx
View File

@ -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" />

21
src/components/lume/LumeIdentity/components.tsx
View File

@ -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

4
src/components/lume/LumeProvider.tsx
View File

@ -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 () => {

6
src/components/utils.ts
View File

@ -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));
}

3
vite.config.ts
View File

@ -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",
}),