refactor: update imports

src/components/lume/LumeIdentity/components.tsx

@@ -1,35 +1,51 @@
-import { makeSwitchable, useSwitchableComponent } from "../../SwitchableComponent";
+import {
+  makeSwitchable,
+  useSwitchableComponent,
+} from "../../SwitchableComponent";
 import { Button } from "../../ui/button";
 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 React from "react";
 import { useLumeIndentity } from "./LumeIdentityContext";
+import { useMemo, useState } from "react";
 
 // Extracted components
 const SubmitButtonComponent = () => {
   const { setVisibleComponent } = useSwitchableComponent();
   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>
-  )
+  );
 };
 
 const SeedPhraseInputComponent = () => {
   const { signIn } = useLumeIndentity();
   return (
-    <m.form className='flex-col flex gap-y-4' onSubmit={(e) => {
+    <m.form
-      e.preventDefault();
+      className="flex-col flex gap-y-4"
-      const target = e.target as typeof e.target & {
+      onSubmit={(e) => {
-        elements: {
+        e.preventDefault();
-          seedPhrase: { value: string };
+        const target = e.target as typeof e.target & {
-        }
+          elements: {
-      };
+            seedPhrase: { value: string };
-      const seedPhrase = target.elements.seedPhrase.value;
+          };
-      signIn(seedPhrase)
+        };
-    }}>
+        const seedPhrase = target.elements.seedPhrase.value;
-      <Input className='h-12 w-full text-lg' name="seedPhrase" />
+        signIn(seedPhrase);
+      }}
+    >
+      <Input className="h-12 w-full text-lg" name="seedPhrase" />
       <m.div
         initial={{ y: 50 }}
         animate={{ y: 0 }}
@@ -37,8 +53,10 @@ const SeedPhraseInputComponent = () => {
         transition={{ type: "just", delay: 0.1 }}
         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>
       </m.div>
     </m.form>
@@ -47,36 +65,45 @@ const SeedPhraseInputComponent = () => {
 
 const SetupAccountKeyComponent = () => {
   const { setVisibleComponent } = useSwitchableComponent();
-  const [width, setWidth] = React.useState<number>();
+  const [width, setWidth] = useState<number>();
 
   return (
     <m.div
       initial={{ y: 50 }}
       animate={{ y: 0 }}
-      exit={{ y: -50, height: 'auto' }}
+      exit={{ y: -50, height: "auto" }}
       transition={{ type: "just", delay: 0.1 }}
       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>
     </m.div>
-  )
+  );
 };
 
 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 phrases = React.useMemo(() => {
+  const phrases = useMemo(() => {
     // 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]);
 
-  const key = React.useMemo(() => {
+  const key = useMemo(() => {
     return phrases.join(" ");
   }, [phrases]);
 
@@ -84,62 +111,112 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
     navigator.clipboard.writeText(phrases.join(" "));
     setButtonClickedState("clicked");
     setTimeout(() => setButtonClickedState("idle"), 1000);
-  }
+  };
 
   return (
     <div className="relative">
       <AnimatePresence>
-        {step === 1 ? <m.div className={`z-10 absolute top-0 bottom-0 left-0 right-0 bg-black pointer-events-none`}
+        {step === 1 ? (
-          initial={{ opacity: 0 }}
+          <m.div
-          animate={{ opacity: 0.75, top: -200, left: -20, right: -20, bottom: 120 }}
+            className={`z-10 absolute top-0 bottom-0 left-0 right-0 bg-black pointer-events-none`}
-          transition={{ type: "tween", duration: 0.1 }}
+            initial={{ opacity: 0 }}
-        ></m.div> : null}
+            animate={{
+              opacity: 0.75,
+              top: -200,
+              left: -20,
+              right: -20,
+              bottom: 120,
+            }}
+            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">
         {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>
         ))}
         <AnimatePresence>
-          {step === 1 ? <m.div className="text-red-400 flex flex-row gap-5 py-8"
+          {step === 1 ? (
-            initial={{ opacity: 0, y: 50 }}
+            <m.div
-            animate={{ opacity: 1, y: 0 }}
+              className="text-red-400 flex flex-row gap-5 py-8"
-            exit={{ opacity: 0, y: 50 }}
+              initial={{ opacity: 0, y: 50 }}
-            transition={{ type: "linear", delay: 0.2, duration: 0.5 }}
+              animate={{ opacity: 1, y: 0 }}
-          >
+              exit={{ opacity: 0, y: 50 }}
-            <ExclamationTriangleIcon className="w-14 h-14" />
+              transition={{ type: "linear", delay: 0.2, duration: 0.5 }}
-            <span>Make sure to write this down for safe keeping.</span>
+            >
-          </m.div> : null}
+              <ExclamationTriangleIcon className="w-14 h-14" />
+              <span>Make sure to write this down for safe keeping.</span>
+            </m.div>
+          ) : null}
         </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>
       </div>
       {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
         </Button>
       ) : null}
       <AnimatePresence>
-        {step === 1 ? <m.div className="z-20 w-full h-12"
+        {step === 1 ? (
-          initial={{ opacity: 0, y: -50 }}
+          <m.div
-          animate={{ opacity: 1, y: 0 }}
+            className="z-20 w-full h-12"
-          exit={{ opacity: 0, y: 50 }}
+            initial={{ opacity: 0, y: -50 }}
-          transition={{ type: "linear", delay: 2, duration: 0.5 }}
+            animate={{ opacity: 1, y: 0 }}
-        >
+            exit={{ opacity: 0, y: 50 }}
-          <Button className="w-full h-full" onClick={() => signIn(key)}>
+            transition={{ type: "linear", delay: 2, duration: 0.5 }}
-            Sign In
+          >
-          </Button>
+            <Button className="w-full h-full" onClick={() => signIn(key)}>
-        </m.div> : null}
+              Sign In
+            </Button>
+          </m.div>
+        ) : null}
       </AnimatePresence>
     </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"
+);