Break NostrLogin into a separate flow from NostrSignin

src/features/ui/components/modal-root.tsx

@@ -30,6 +30,7 @@ import {
   MentionsModal,
   MissingDescriptionModal,
   MuteModal,
+  NostrLoginModal,
   NostrSigninModal,
   ReactionsModal,
   ReblogsModal,
@@ -71,6 +72,7 @@ const MODAL_COMPONENTS: Record<string, React.LazyExoticComponent<any>> = {
   'MENTIONS': MentionsModal,
   'MISSING_DESCRIPTION': MissingDescriptionModal,
   'MUTE': MuteModal,
+  'NOSTR_LOGIN': NostrLoginModal,
   'NOSTR_SIGNIN': NostrSigninModal,
   'REACTIONS': ReactionsModal,
   'REBLOGS': ReblogsModal,

src/features/ui/components/modals/nostr-login-modal/components/emoji-graphic.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Emoji from 'soapbox/components/ui/emoji/emoji';
+
+interface IEmojiGraphic {
+  emoji: string;
+}
+
+/** Large emoji with a background for display purposes (eg breaking up a page). */
+const EmojiGraphic: React.FC<IEmojiGraphic> = ({ emoji }) => {
+  return (
+    <div className='flex items-center justify-center'>
+      <div className='rounded-full bg-gray-100 p-8 dark:bg-gray-800'>
+        <Emoji className='h-24 w-24' emoji={emoji} />
+      </div>
+    </div>
+  );
+};
+
+export default EmojiGraphic;

src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { closeModal } from 'soapbox/actions/modals';
+import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
+import Stack from 'soapbox/components/ui/stack/stack';
+import Text from 'soapbox/components/ui/text/text';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const NostrExtensionIndicator: React.FC = () => {
+  const dispatch = useAppDispatch();
+
+  const onClick = () => {
+    dispatch(nostrExtensionLogIn());
+    dispatch(closeModal('NOSTR_SIGNIN'));
+  };
+
+  return (
+    <Stack space={2} className='rounded-lg bg-gray-100 p-2 dark:bg-gray-800'>
+      <Text size='xs'>
+        {window.nostr ? (
+          <FormattedMessage
+            id='nostr_extension.found'
+            defaultMessage='<link>Sign in</link> with browser extension.'
+            values={{
+              link: (node) => <button type='button' className='underline' onClick={onClick}>{node}</button>,
+            }}
+          />
+        ) : (
+          <FormattedMessage id='nostr_extension.not_found' defaultMessage='Browser extension not found.' />
+        )}
+      </Text>
+    </Stack>
+  );
+};
+
+export default NostrExtensionIndicator;

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

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+import ExtensionStep from './steps/extension-step';
+import KeyAddStep from './steps/key-add-step';
+
+type Step = 'extension' | 'key-add';
+
+interface INostrLoginModal {
+  onClose: (type?: string) => void;
+}
+
+const NostrLoginModal: React.FC<INostrLoginModal> = ({ onClose }) => {
+  const [step, setStep] = useState<Step>(window.nostr ? 'extension' : 'key-add');
+
+  const handleClose = () => onClose('NOSTR_SIGNIN');
+
+  switch (step) {
+    case 'extension':
+      return <ExtensionStep setStep={setStep} onClose={handleClose} />;
+    case 'key-add':
+      return <KeyAddStep onClose={handleClose} />;
+    default:
+      return null;
+  }
+};
+
+export default NostrLoginModal;
+
+export type { Step };

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
+import { Button, Stack, Modal } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import EmojiGraphic from '../components/emoji-graphic';
+import { Step } from '../nostr-login-modal';
+
+interface IExtensionStep {
+  setStep: (step: Step) => void;
+  onClose(): void;
+}
+
+const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
+  const dispatch = useAppDispatch();
+
+  const onClick = () => {
+    dispatch(nostrExtensionLogIn());
+    onClose();
+  };
+
+  const onClickAlt = () => setStep('key-add');
+
+  return (
+    <Modal title={<FormattedMessage id='nostr_signin.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>
+      <Stack space={6}>
+        <EmojiGraphic emoji='🔐' />
+
+        <Stack space={3}>
+          <Button theme='accent' size='lg' onClick={onClick}>
+            <FormattedMessage id='nostr_signin.siwe.action' defaultMessage='Sign in with extension' />
+          </Button>
+
+          <Button theme='transparent' onClick={onClickAlt}>
+            <FormattedMessage id='nostr_signin.siwe.alt' defaultMessage='Sign in with key' />
+          </Button>
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default ExtensionStep;

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

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 
 import ExtensionStep from './steps/extension-step';
-import KeyAddStep from './steps/key-add-step';
 import KeyStep from './steps/key-step';
 import KeygenStep from './steps/keygen-step';
 
-type Step = 'extension' | 'key' | 'keygen' | 'key-add';
+type Step = 'extension' | 'key' | 'keygen';
 
 interface INostrSigninModal {
   onClose: (type?: string) => void;
@@ -21,8 +20,6 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
       return <ExtensionStep setStep={setStep} onClose={handleClose} />;
     case 'key':
       return <KeyStep setStep={setStep} onClose={handleClose} />;
-    case 'key-add':
-      return <KeyAddStep onClose={handleClose} />;
     case 'keygen':
       return <KeygenStep onClose={handleClose} />;
     default:

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { openModal } from 'soapbox/actions/modals';
 import { Button, Stack, Modal } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import EmojiGraphic from '../components/emoji-graphic';
 import NostrExtensionIndicator from '../components/nostr-extension-indicator';
@@ -13,6 +15,13 @@ interface IKeyStep {
 }
 
 const KeyStep: React.FC<IKeyStep> = ({ setStep, onClose }) => {
+  const dispatch = useAppDispatch();
+
+  const onAltClick = () => {
+    dispatch(openModal('NOSTR_LOGIN'));
+    onClose();
+  };
+
   return (
     <Modal title={<FormattedMessage id='nostr_signin.key.title' defaultMessage='You need a key to continue' />} onClose={onClose}>
       <Stack className='my-3' space={6}>
@@ -25,7 +34,7 @@ const KeyStep: React.FC<IKeyStep> = ({ setStep, onClose }) => {
             Generate key
           </Button>
 
-          <Button theme='transparent' onClick={() => setStep('key-add')}>
+          <Button theme='transparent' onClick={onAltClick}>
             I already have a key
           </Button>
         </Stack>

src/features/ui/components/navbar.tsx

@@ -40,7 +40,7 @@ const Navbar = () => {
   const onOpenSidebar = () => dispatch(openSidebar());
 
   const handleNostrLogin = async () => {
-    dispatch(openModal('NOSTR_SIGNIN'));
+    dispatch(openModal('NOSTR_LOGIN'));
   };
 
   const handleSubmit: React.FormEventHandler = (event) => {

src/features/ui/util/async-components.ts

@@ -163,3 +163,4 @@ export const FollowedTags = lazy(() => import('soapbox/features/followed-tags'))
 export const AccountNotePanel = lazy(() => import('soapbox/features/ui/components/panels/account-note-panel'));
 export const ComposeEditor = lazy(() => import('soapbox/features/compose/editor'));
 export const NostrSigninModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-signin-modal/nostr-signin-modal'));
+export const NostrLoginModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-login-modal/nostr-login-modal'));