Fill out KeyStep

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

@@ -29,7 +29,7 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
       case 1:
         return <IdentityStep username={username} setUsername={setUsername} setStep={setStep} />;
       case 2:
-        return <KeyStep />;
+        return <KeyStep setStep={setStep} />;
       case 3:
         return <AccountStep username={username} />;
       case 4:
@@ -45,6 +45,8 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
         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' />;
+      case 3:
+        return <FormattedMessage id='nostr_signin.account.title' defaultMessage='Create an account' />;
       default:
         return null;
     }

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

@@ -29,7 +29,7 @@ const IdentityStep: React.FC<IIdentityStep> = ({ username, setUsername, setStep
       </FormGroup>
 
       <HStack space={2} alignItems='center' justifyContent='between'>
-        <Button theme='transparent'>Sign up</Button>
+        <Button theme='transparent' onClick={() => setStep(2)}>Sign up</Button>
         <Button theme='accent' disabled={!username} onClick={() => setStep(3)}>Next</Button>
       </HStack>
     </Stack>

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

@@ -1,14 +1,28 @@
 import React from 'react';
 
+import Button from 'soapbox/components/ui/button/button';
 import Stack from 'soapbox/components/ui/stack/stack';
 
+import NostrExtensionIndicator from '../nostr-extension-indicator';
+
 interface IKeyStep {
+  setStep(step: number): void;
 }
 
-const KeyStep: React.FC<IKeyStep> = () => {
+const KeyStep: React.FC<IKeyStep> = ({ setStep }) => {
   return (
-    <Stack space={3}>
+    <Stack className='my-3' space={6} justifyContent='center'>
-      key step
+      <NostrExtensionIndicator />
+
+      <Stack space={3} alignItems='center'>
+        <Button theme='accent' size='lg'>
+          Generate key
+        </Button>
+
+        <Button theme='transparent' onClick={() => setStep(1)}>
+          I already have a key
+        </Button>
+      </Stack>
     </Stack>
   );
 };