refactor: update imports
This commit is contained in:
parent
a04917449e
commit
bb2bfe406f
|
@ -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"
|
||||||
|
);
|
||||||
|
|
Loading…
Reference in New Issue