NostrSigninModal: represent steps as strings instead of numbers

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

@@ -8,12 +8,14 @@ import KeyStep from './steps/key-step';
 import KeygenStep from './steps/keygen-step';
 import RegisterStep from './steps/register-step';
 
+type Step = 'extension' | 'identity' | 'key' | 'keygen' | 'account' | 'register';
+
 interface INostrSigninModal {
   onClose: (type?: string) => void;
 }
 
 const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
-  const [step, setStep] = useState(window.nostr ? 0 : 1);
+  const [step, setStep] = useState<Step>(window.nostr ? 'extension' : 'identity');
 
   const [, setSigner] = useState<NostrSigner | undefined>();
   const [accountId, setAccountId] = useState<string | undefined>();
@@ -21,21 +23,23 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
   const handleClose = () => onClose('NOSTR_SIGNIN');
 
   switch (step) {
-    case 0:
+    case 'extension':
       return <ExtensionStep setStep={setStep} onClose={handleClose} />;
-    case 1:
+    case 'identity':
       return <IdentityStep setAccountId={setAccountId} setStep={setStep} onClose={handleClose} />;
-    case 2:
+    case 'key':
       return <KeyStep setStep={setStep}  onClose={handleClose} />;
-    case 3:
+    case 'keygen':
-      return <AccountStep accountId={accountId!} setStep={setStep}  onClose={handleClose} />;
-    case 4:
-      return <RegisterStep onClose={handleClose} />;
-    case 5:
       return <KeygenStep setSigner={setSigner} setStep={setStep} onClose={handleClose} />;
+    case 'account':
+      return <AccountStep accountId={accountId!} setStep={setStep}  onClose={handleClose} />;
+    case 'register':
+      return <RegisterStep onClose={handleClose} />;
     default:
       return null;
   }
 };
 
 export default NostrSigninModal;
+
+export type { Step };

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

@@ -6,9 +6,11 @@ import { useAccount } from 'soapbox/api/hooks';
 import { Avatar, Text, Stack, Emoji, Button, Tooltip, Modal } from 'soapbox/components/ui';
 import { useInstance } from 'soapbox/hooks';
 
+import { Step } from '../nostr-signin-modal';
+
 interface IAccountStep {
   accountId: string;
-  setStep(step: number): void;
+  setStep(step: Step): void;
   onClose(): void;
 }
 
@@ -29,7 +31,7 @@ const AccountStep: React.FC<IAccountStep> = ({ accountId, setStep, onClose }) =>
     <Modal
       title={<FormattedMessage id='nostr_signin.account.title' defaultMessage='Your account' />}
       onClose={onClose}
-      onBack={() => setStep(1)}
+      onBack={() => setStep('identity')}
     >
       <Stack space={6}>
         <Stack space={3} alignItems='center'>

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

@@ -6,9 +6,10 @@ import { Button, Stack, Modal } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import EmojiGraphic from '../components/emoji-graphic';
+import { Step } from '../nostr-signin-modal';
 
 interface IExtensionStep {
-  setStep: (step: number) => void;
+  setStep: (step: Step) => void;
   onClose(): void;
 }
 
@@ -16,7 +17,7 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
   const dispatch = useAppDispatch();
 
   const onClick = () => dispatch(nostrExtensionLogIn());
-  const onClickAlt = () => setStep(1);
+  const onClickAlt = () => setStep('identity');
 
   return (
     <Modal title={<FormattedMessage id='nostr_signin.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>

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

@@ -7,10 +7,11 @@ import { useAppDispatch } from 'soapbox/hooks';
 
 import EmojiGraphic from '../components/emoji-graphic';
 import NostrExtensionIndicator from '../components/nostr-extension-indicator';
+import { Step } from '../nostr-signin-modal';
 
 interface IIdentityStep {
   setAccountId(accountId: string): void;
-  setStep(step: number): void;
+  setStep(step: Step): void;
   onClose(): void;
 }
 
@@ -32,7 +33,7 @@ const IdentityStep: React.FC<IIdentityStep> = ({ setAccountId, setStep, onClose
     await dispatch(accountLookup(username))
       .then((account) => {
         setAccountId(account.id);
-        setStep(3);
+        setStep('account');
         setNotFound(false);
         setLoading(false);
       })
@@ -71,7 +72,7 @@ const IdentityStep: React.FC<IIdentityStep> = ({ setAccountId, setStep, onClose
           </FormGroup>
 
           <HStack space={2} alignItems='center' justifyContent='between'>
-            <Button theme='transparent' onClick={() => setStep(2)} disabled={loading}>Sign up</Button>
+            <Button theme='transparent' onClick={() => setStep('key')} disabled={loading}>Sign up</Button>
 
             <Button
               theme='accent'

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

@@ -5,9 +5,10 @@ import { Button, Stack, Modal } from 'soapbox/components/ui';
 
 import EmojiGraphic from '../components/emoji-graphic';
 import NostrExtensionIndicator from '../components/nostr-extension-indicator';
+import { Step } from '../nostr-signin-modal';
 
 interface IKeyStep {
-  setStep(step: number): void;
+  setStep(step: Step): void;
   onClose(): void;
 }
 
@@ -20,11 +21,11 @@ const KeyStep: React.FC<IKeyStep> = ({ setStep, onClose }) => {
         <EmojiGraphic emoji='🔑' />
 
         <Stack space={3} alignItems='center'>
-          <Button theme='accent' size='lg' onClick={() => setStep(5)}>
+          <Button theme='accent' size='lg' onClick={() => setStep('keygen')}>
             Generate key
           </Button>
 
-          <Button theme='transparent' onClick={() => setStep(1)}>
+          <Button theme='transparent' onClick={() => setStep('identity')}>
             I already have a key
           </Button>
         </Stack>

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

@@ -10,10 +10,11 @@ import { download } from 'soapbox/utils/download';
 import { slugify } from 'soapbox/utils/input';
 
 import EmojiGraphic from '../components/emoji-graphic';
+import { Step } from '../nostr-signin-modal';
 
 interface IKeygenStep {
   setSigner(signer: NostrSigner): void;
-  setStep(step: number): void;
+  setStep(step: Step): void;
   onClose(): void;
 }