NostrSigninModal: scaffold steps

src/features/ui/components/modals/nostr-signin-modal/nostr-signin-modal.tsx

@@ -3,8 +3,11 @@ import { FormattedMessage } from 'react-intl';
 
 import { Modal, Stack } from 'soapbox/components/ui';
 
+import AccountStep from './steps/account-step';
 import ExtensionStep from './steps/extension-step';
 import IdentityStep from './steps/identity-step';
+import KeyStep from './steps/key-step';
+import RegisterStep from './steps/register-step';
 
 interface INostrSigninModal {
   onClose: (type?: string) => void;
@@ -13,6 +16,8 @@ interface INostrSigninModal {
 const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
   const [step, setStep] = useState(0);
 
+  const [username, setUsername] = useState('');
+
   const handleClose = () => {
     onClose('NOSTR_SIGNIN');
   };
@@ -22,7 +27,13 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
       case 0:
         return <ExtensionStep setStep={setStep} />;
       case 1:
-        return <IdentityStep setStep={setStep} />;
+        return <IdentityStep username={username} setUsername={setUsername} setStep={setStep} />;
+      case 2:
+        return <KeyStep />;
+      case 3:
+        return <AccountStep />;
+      case 4:
+        return <RegisterStep />;
     }
   };
 
@@ -32,6 +43,8 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
         return <FormattedMessage id='nostr_signin.siwe.title' defaultMessage='Sign in' />;
       case 1:
         return <FormattedMessage id='nostr_signin.identity.title' defaultMessage='Who are you?' />;
+      case 2:
+        return <FormattedMessage id='nostr_signin.key.title' defaultMessage='You need a key to continue' />;
       default:
         return null;
     }

src/features/ui/components/modals/nostr-signin-modal/steps/account-step.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Stack from 'soapbox/components/ui/stack/stack';
+
+interface IAccountStep {
+}
+
+const AccountStep: React.FC<IAccountStep> = () => {
+  return (
+    <Stack space={3}>
+      account step
+    </Stack>
+  );
+};
+
+export default AccountStep;

src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx

@@ -9,18 +9,22 @@ import Stack from 'soapbox/components/ui/stack/stack';
 import NostrExtensionIndicator from '../nostr-extension-indicator';
 
 interface IIdentityStep {
-  setStep: (step: number) => void;
+  username: string;
+  setUsername(username: string): void;
+  setStep(step: number): void;
 }
 
-const IdentityStep: React.FC<IIdentityStep> = ({ setStep }) => {
+const IdentityStep: React.FC<IIdentityStep> = ({ username, setUsername, setStep }) => {
   return (
-    <Stack space={3}>
+    <Stack className='mt-3' space={3}>
       <NostrExtensionIndicator signinAction={() => setStep(0)} />
 
       <FormGroup labelText='Username'>
         <Input
           icon={require('@tabler/icons/at.svg')}
           placeholder='Username or npub'
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
         />
       </FormGroup>
 

src/features/ui/components/modals/nostr-signin-modal/steps/key-step.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Stack from 'soapbox/components/ui/stack/stack';
+
+interface IKeyStep {
+}
+
+const KeyStep: React.FC<IKeyStep> = () => {
+  return (
+    <Stack space={3}>
+      key step
+    </Stack>
+  );
+};
+
+export default KeyStep;

src/features/ui/components/modals/nostr-signin-modal/steps/register-step.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Stack from 'soapbox/components/ui/stack/stack';
+
+interface IRegisterStep {
+}
+
+const RegisterStep: React.FC<IRegisterStep> = () => {
+  return (
+    <Stack space={3}>
+      register step
+    </Stack>
+  );
+};
+
+export default RegisterStep;