From 2f2d79586904ad4c87805a8f2e1b4e8055627f16 Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Tue, 12 Sep 2023 00:34:17 +0200 Subject: [PATCH] feat: animations and dummy seed phrase input --- src/components/lume/LumeIdentity.tsx | 149 +++++++++++++++++++-------- src/components/ui/input.tsx | 2 +- src/styles/globals.css | 4 +- 3 files changed, 107 insertions(+), 48 deletions(-) diff --git a/src/components/lume/LumeIdentity.tsx b/src/components/lume/LumeIdentity.tsx index 0e28cff..3fd29f0 100644 --- a/src/components/lume/LumeIdentity.tsx +++ b/src/components/lume/LumeIdentity.tsx @@ -1,5 +1,5 @@ // src/components/sign-in-with-lume.tsx -import React from 'react'; +import React, { useCallback, useMemo } from 'react'; import { AnimatePresence, Variant, motion } from 'framer-motion'; import LumeLogoBg from '@/assets/lume-logo-bg.svg'; @@ -8,32 +8,109 @@ import { Input } from '@/components/ui/input'; type Props = { onSignIn: () => void; // TODO: Properly type this - onSignOut: () => void; // TODO: Properly type this + onSignUp: () => void; // TODO: Properly type this } -const LumeIdentity: React.FC = ({ onSignIn, onSignOut }) => { - return
-
+const LumeIdentity: React.FC = ({ onSignIn, onSignUp }) => { + // FIXME: There has to be a better way to organize this component, for the time being this suffices + const SubmitButton = useMemo(() => { + return { + render() { + return + }, + index: Symbol('submit-button').toString() + } + }, []); + + const SeedPhraseInput = useMemo(() => { + return { + render() { + return + + + + + + }, + index: Symbol('seed-phrase-input').toString() + } + }, []); + + const SetupAccountKey = useMemo(() => { + return { + render() { + return + + + }, + index: Symbol('setup-account-key').toString() + } + }, []); + + const SeedPhraseForm = useMemo(() => { + return { + render({ phraseLength = 12 }: { phraseLength: number }) { + return
+ {Array(phraseLength).fill(null).map((_, index) => { + return
+ {/* TODO: Add Support for the real values, this should be its own component */} + {index + 1} +
+ })} +
+ }, + index: Symbol('seed-phrase-form').toString() + } + }, []); + + const [visibleComponent, setVisibleComponent] = React.useState(SubmitButton); + + const isSubmitButtonInView = [SubmitButton.index].includes(visibleComponent.index) + const isCreatingAccount = [SetupAccountKey.index, SeedPhraseForm.index].includes(visibleComponent.index) + const shouldShowBackButton = isCreatingAccount + console.log({ isCreatingAccount, shouldShowBackButton, visibleComponent }) + const headingElement = !isCreatingAccount ? (

Sign-in with Lume

) : (

Set up your account key

) + + const coloredOrLine = isSubmitButtonInView ? 'text-primary' : 'text-border' + + return
+
-

Sign-in with Lume

- {/* Seamless access to the open web with Lume, integrated Handshake (HNS) and Ethereum (ENS) Support. */} + {headingElement}
- {/* */} - -
+ + + +
- - + +
-
@@ -55,38 +132,20 @@ const variants: Record = { exit: { y: -50, opacity: 0, position: 'absolute' } }; -const SwitchableComponent = () => { - const [isVisible, setIsVisible] = React.useState(true); +const SwitchableComponent = ({ children, index }: React.PropsWithChildren<{ index: string }>) => { return ( - {isVisible ? ( - - - - ) : ( - - - - )} + + {children} + ); }; diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index a1dabbb..45c18dd 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -11,7 +11,7 @@ const Input = React.forwardRef(