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

refactor: update imports

This commit is contained in:
Derrick Hammer 2023-10-09 02:46:52 -04:00
parent a04917449e
commit bb2bfe406f
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
1 changed files with 145 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +1,51 @@
import { makeSwitchable, useSwitchableComponent } from "../../SwitchableComponent"; import {
makeSwitchable,
useSwitchableComponent,
} from "../../SwitchableComponent";
import { Button } from "../../ui/button"; import { Button } from "../../ui/button";
import { Input } from "../../ui/input"; import { Input } from "../../ui/input";
import { CheckIcon, ClipboardCopyIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons"; import {
CheckIcon,
ClipboardCopyIcon,
ExclamationTriangleIcon,
} from "@radix-ui/react-icons";
import { AnimatePresence, m } from "framer-motion"; import { AnimatePresence, m } from "framer-motion";
import React from "react";
import { useLumeIndentity } from "./LumeIdentityContext"; import { useLumeIndentity } from "./LumeIdentityContext";
import { useMemo, useState } from "react";
// Extracted components // Extracted components
const SubmitButtonComponent = () => { const SubmitButtonComponent = () => {
const { setVisibleComponent } = useSwitchableComponent(); const { setVisibleComponent } = useSwitchableComponent();
return ( return (
<Button className='w-full h-12' variant={"outline"} onClick={() => setVisibleComponent(SeedPhraseInput)}> <Button
<span className="text-center text-lg font-normal leading-normal">Sign in with Account Key</span> className="w-full h-12"
variant={"outline"}
onClick={() => setVisibleComponent(SeedPhraseInput)}
>
<span className="text-center text-lg font-normal leading-normal">
Sign in with Account Key
</span>
</Button> </Button>
) );
}; };
const SeedPhraseInputComponent = () => { const SeedPhraseInputComponent = () => {
const { signIn } = useLumeIndentity(); const { signIn } = useLumeIndentity();
return ( return (
<m.form className='flex-col flex gap-y-4' onSubmit={(e) => { <m.form
className="flex-col flex gap-y-4"
onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
const target = e.target as typeof e.target & { const target = e.target as typeof e.target & {
elements: { elements: {
seedPhrase: { value: string }; seedPhrase: { value: string };
} };
}; };
const seedPhrase = target.elements.seedPhrase.value; const seedPhrase = target.elements.seedPhrase.value;
signIn(seedPhrase) signIn(seedPhrase);
}}> }}
<Input className='h-12 w-full text-lg' name="seedPhrase" /> >
<Input className="h-12 w-full text-lg" name="seedPhrase" />
<m.div <m.div
initial={{ y: 50 }} initial={{ y: 50 }}
animate={{ y: 0 }} animate={{ y: 0 }}
@ -37,8 +53,10 @@ const SeedPhraseInputComponent = () => {
transition={{ type: "just", delay: 0.1 }} transition={{ type: "just", delay: 0.1 }}
className="h-12" className="h-12"
> >
<Button className='w-full h-full' role="submit"> <Button className="w-full h-full" role="submit">
<span className="text-center text-lg font-normal leading-normal">Sign in</span> <span className="text-center text-lg font-normal leading-normal">
Sign in
</span>
</Button> </Button>
</m.div> </m.div>
</m.form> </m.form>
@ -47,36 +65,45 @@ const SeedPhraseInputComponent = () => {
const SetupAccountKeyComponent = () => { const SetupAccountKeyComponent = () => {
const { setVisibleComponent } = useSwitchableComponent(); const { setVisibleComponent } = useSwitchableComponent();
const [width, setWidth] = React.useState<number>(); const [width, setWidth] = useState<number>();
return ( return (
<m.div <m.div
initial={{ y: 50 }} initial={{ y: 50 }}
animate={{ y: 0 }} animate={{ y: 0 }}
exit={{ y: -50, height: 'auto' }} exit={{ y: -50, height: "auto" }}
transition={{ type: "just", delay: 0.1 }} transition={{ type: "just", delay: 0.1 }}
className="min-h-12 h-full max-w-full" className="min-h-12 h-full max-w-full"
style={{ maxWidth: width ?? 'auto' }} 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(SeedPhraseGeneration)}> <Button
<span className="text-center text-lg font-normal leading-normal">I get it, I'll keep it safe. Let's see the key.</span> className="w-full h-full"
onClick={() => setVisibleComponent(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>
</Button> </Button>
</m.div> </m.div>
) );
}; };
const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => { const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
const [buttonClickedState, setButtonClickedState] = React.useState<"idle" | "clicked">("idle"); const [buttonClickedState, setButtonClickedState] = useState<
const [step, setStep] = React.useState<number>(0); "idle" | "clicked"
>("idle");
const [step, setStep] = useState<number>(0);
const { signIn } = useLumeIndentity(); const { signIn } = useLumeIndentity();
const phrases = React.useMemo(() => { const phrases = useMemo(() => {
// TODO: Replace with actual BIP39 or whatever is used for phrase generation // TODO: Replace with actual BIP39 or whatever is used for phrase generation
return Array(phraseLength).fill("a phrase") return Array(phraseLength).fill("a phrase");
}, [phraseLength]); }, [phraseLength]);
const key = React.useMemo(() => { const key = useMemo(() => {
return phrases.join(" "); return phrases.join(" ");
}, [phrases]); }, [phrases]);
@ -84,26 +111,44 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
navigator.clipboard.writeText(phrases.join(" ")); navigator.clipboard.writeText(phrases.join(" "));
setButtonClickedState("clicked"); setButtonClickedState("clicked");
setTimeout(() => setButtonClickedState("idle"), 1000); setTimeout(() => setButtonClickedState("idle"), 1000);
} };
return ( return (
<div className="relative"> <div className="relative">
<AnimatePresence> <AnimatePresence>
{step === 1 ? <m.div className={`z-10 absolute top-0 bottom-0 left-0 right-0 bg-black pointer-events-none`} {step === 1 ? (
<m.div
className={`z-10 absolute top-0 bottom-0 left-0 right-0 bg-black pointer-events-none`}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 0.75, top: -200, left: -20, right: -20, bottom: 120 }} animate={{
opacity: 0.75,
top: -200,
left: -20,
right: -20,
bottom: 120,
}}
transition={{ type: "tween", duration: 0.1 }} transition={{ type: "tween", duration: 0.1 }}
></m.div> : null} ></m.div>
) : null}
</AnimatePresence> </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.5 w-full h-full flex-wrap justify-center items-center gap-2.5 inline-flex">
{phrases.map((phrase, index) => ( {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`}> <div
<span className=" text-white text-md font-normal leading-normal w-full h-fit px-2.5 bg-transparent text-center">{phrase}</span> key={`SeedPhrase_${index}`}
<span className="left-[6px] top-0 absolute text-current text-xs font-normal leading-normal">{index + 1}</span> 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">
{phrase}
</span>
<span className="left-[6px] top-0 absolute text-current text-xs font-normal leading-normal">
{index + 1}
</span>
</div> </div>
))} ))}
<AnimatePresence> <AnimatePresence>
{step === 1 ? <m.div className="text-red-400 flex flex-row gap-5 py-8" {step === 1 ? (
<m.div
className="text-red-400 flex flex-row gap-5 py-8"
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 50 }} exit={{ opacity: 0, y: 50 }}
@ -111,20 +156,39 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
> >
<ExclamationTriangleIcon className="w-14 h-14" /> <ExclamationTriangleIcon className="w-14 h-14" />
<span>Make sure to write this down for safe keeping.</span> <span>Make sure to write this down for safe keeping.</span>
</m.div> : null} </m.div>
) : null}
</AnimatePresence> </AnimatePresence>
<Button className={`w-full h-12 ${buttonClickedState === 'clicked' ? '!text-primary !border-primary' : ''}`} variant="outline" onClick={copyPhrasesToClipboard}> <Button
{buttonClickedState === 'clicked' ? <CheckIcon className="w-5 h-5 mr-2.5" /> : <ClipboardCopyIcon className="w-5 h-5 mr-2.5" />} className={`w-full h-12 ${
{buttonClickedState === 'clicked' ? 'Copied!' : 'Copy Account Key'} buttonClickedState === "clicked"
? "!text-primary !border-primary"
: ""
}`}
variant="outline"
onClick={copyPhrasesToClipboard}
>
{buttonClickedState === "clicked" ? (
<CheckIcon className="w-5 h-5 mr-2.5" />
) : (
<ClipboardCopyIcon className="w-5 h-5 mr-2.5" />
)}
{buttonClickedState === "clicked" ? "Copied!" : "Copy Account Key"}
</Button> </Button>
</div> </div>
{step === 0 ? ( {step === 0 ? (
<Button className="z-20 w-full h-12 text-white bg-neutral-700 hover:bg-neutral-800" variant="secondary" onClick={() => setStep(1)}> <Button
className="z-20 w-full h-12 text-white bg-neutral-700 hover:bg-neutral-800"
variant="secondary"
onClick={() => setStep(1)}
>
Continue Continue
</Button> </Button>
) : null} ) : null}
<AnimatePresence> <AnimatePresence>
{step === 1 ? <m.div className="z-20 w-full h-12" {step === 1 ? (
<m.div
className="z-20 w-full h-12"
initial={{ opacity: 0, y: -50 }} initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 50 }} exit={{ opacity: 0, y: 50 }}
@ -133,13 +197,26 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
<Button className="w-full h-full" onClick={() => signIn(key)}> <Button className="w-full h-full" onClick={() => signIn(key)}>
Sign In Sign In
</Button> </Button>
</m.div> : null} </m.div>
) : null}
</AnimatePresence> </AnimatePresence>
</div> </div>
) );
}; };
export const SubmitButton = makeSwitchable(SubmitButtonComponent, 'submit-button'); export const SubmitButton = makeSwitchable(
export const SeedPhraseInput = makeSwitchable(SeedPhraseInputComponent, 'seed-phrase-input'); SubmitButtonComponent,
export const SetupAccountKey = makeSwitchable(SetupAccountKeyComponent, 'setup-account-key'); "submit-button"
export const SeedPhraseGeneration = makeSwitchable(SeedPhraseGenerationComponent, 'seed-phrase-form'); );
export const SeedPhraseInput = makeSwitchable(
SeedPhraseInputComponent,
"seed-phrase-input"
);
export const SetupAccountKey = makeSwitchable(
SetupAccountKeyComponent,
"setup-account-key"
);
export const SeedPhraseGeneration = makeSwitchable(
SeedPhraseGenerationComponent,
"seed-phrase-form"
);