Add boilerplate NostrSignin modal

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

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

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

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Modal, Stack } from 'soapbox/components/ui';
+
+import ExtensionStep from './steps/extension-step';
+import IdentityStep from './steps/identity-step';
+
+interface INostrSigninModal {
+  onClose: (type?: string) => void;
+}
+
+const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
+  const [step, setStep] = useState(0);
+
+  const handleClose = () => {
+    onClose('NOSTR_SIGNIN');
+  };
+
+  const renderStep = () => {
+    switch (step) {
+      case 0:
+        return <ExtensionStep setStep={setStep} />;
+      case 1:
+        return <IdentityStep setStep={setStep} />;
+    }
+  };
+
+  const renderModalTitle = () => {
+    switch (step) {
+      case 0:
+        return <FormattedMessage id='nostr_signin.siwe.title' defaultMessage='Sign in with extension' />;
+      case 1:
+        return <FormattedMessage id='nostr_signin.identity.title' defaultMessage='Who are you?' />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Modal
+      title={renderModalTitle()}
+      onClose={handleClose}
+    >
+      <Stack space={2}>
+        {renderStep()}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default NostrSigninModal;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Stack } from 'soapbox/components/ui';
+
+interface IExtensionStep {
+  setStep: (step: number) => void;
+}
+
+const ExtensionStep: React.FC<IExtensionStep> = () => {
+  return (
+    <Stack>
+      extension step
+    </Stack>
+  );
+};
+
+export default ExtensionStep;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Stack } from 'soapbox/components/ui';
+
+interface IIdentityStep {
+  setStep: (step: number) => void;
+}
+
+const IdentityStep: React.FC<IIdentityStep> = () => {
+  return (
+    <Stack>
+      identity step
+    </Stack>
+  );
+};
+
+export default IdentityStep;

src/features/ui/components/panels/sign-up-panel.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { openModal } from 'soapbox/actions/modals';
 import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useInstance, useRegistrationStatus } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useInstance, useRegistrationStatus } from 'soapbox/hooks';
 
 const SignUpPanel = () => {
   const instance = useInstance();
   const { isOpen } = useRegistrationStatus();
   const me = useAppSelector((state) => state.me);
+  const dispatch = useAppDispatch();
 
   if (me || !isOpen) return null;
 
@@ -23,7 +25,7 @@ const SignUpPanel = () => {
         </Text>
       </Stack>
 
-      <Button theme='primary' block to='/signup'>
+      <Button theme='primary' block onClick={() => dispatch(openModal('NOSTR_SIGNIN'))}>
         <FormattedMessage id='account.register' defaultMessage='Sign up' />
       </Button>
     </Stack>

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

@@ -162,3 +162,4 @@ export const EditAnnouncementModal = lazy(() => import('soapbox/features/ui/comp
 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'));