NostrSigninModal: make each step render a Modal directly

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

@@ -1,7 +1,4 @@
 import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { Modal, Stack } from 'soapbox/components/ui';
 
 import AccountStep from './steps/account-step';
 import ExtensionStep from './steps/extension-step';
@@ -18,50 +15,22 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
 
   const [accountId, setAccountId] = useState<string | undefined>();
 
-  const handleClose = () => {
+  const handleClose = () => onClose('NOSTR_SIGNIN');
-    onClose('NOSTR_SIGNIN');
-  };
 
-  const renderStep = () => {
   switch (step) {
     case 0:
-        return <ExtensionStep setStep={setStep} />;
+      return <ExtensionStep setStep={setStep} onClose={handleClose} />;
     case 1:
-        return <IdentityStep setAccountId={setAccountId} setStep={setStep} />;
+      return <IdentityStep setAccountId={setAccountId} setStep={setStep} onClose={handleClose} />;
     case 2:
-        return <KeyStep setStep={setStep} />;
+      return <KeyStep setStep={setStep}  onClose={handleClose} />;
     case 3:
-        return <AccountStep accountId={accountId!} />;
+      return <AccountStep accountId={accountId!} setStep={setStep}  onClose={handleClose} />;
     case 4:
-        return <RegisterStep />;
+      return <RegisterStep onClose={handleClose} />;
-    }
-  };
-
-  const renderModalTitle = () => {
-    switch (step) {
-      case 0:
-        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' />;
-      case 3:
-        return <FormattedMessage id='nostr_signin.account.title' defaultMessage='Create an account' />;
     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/account-step.tsx

@@ -1,15 +1,18 @@
 import { NSchema as n } from 'nspec';
 import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { useAccount } from 'soapbox/api/hooks';
-import { Avatar, Text, Stack, Emoji, Button, Tooltip } from 'soapbox/components/ui';
+import { Avatar, Text, Stack, Emoji, Button, Tooltip, HStack, Modal } from 'soapbox/components/ui';
 import { useInstance } from 'soapbox/hooks';
 
 interface IAccountStep {
   accountId: string;
+  setStep(step: number): void;
+  onClose(): void;
 }
 
-const AccountStep: React.FC<IAccountStep> = ({ accountId }) => {
+const AccountStep: React.FC<IAccountStep> = ({ accountId, setStep, onClose }) => {
   const { account } = useAccount(accountId);
   const instance = useInstance();
 
@@ -18,11 +21,14 @@ const AccountStep: React.FC<IAccountStep> = ({ accountId }) => {
     [account?.acct],
   );
 
+  const goBack = () => setStep(1);
+
   if (!account) {
     return null;
   }
 
   return (
+    <Modal title={<FormattedMessage id='nostr_signin.account.title' defaultMessage='Your account' />} onClose={onClose}>
       <Stack space={6}>
         <Stack space={3} alignItems='center'>
           <Avatar className='bg-gray-100 dark:bg-gray-800' src={account.avatar} size={160} />
@@ -38,17 +44,18 @@ const AccountStep: React.FC<IAccountStep> = ({ accountId }) => {
 
             <Tooltip text={account.nostr.npub ?? account.acct}>
               <Text size='sm' theme='muted' align='center' truncate>
-              {isBech32 ? (
+                {isBech32 ? account.acct.slice(0, 13) : account.acct}
-                account.acct.slice(0, 13)
-              ) : (
-                account.acct
-              )}
               </Text>
             </Tooltip>
           </Stack>
         </Stack>
 
-      {!account.ditto.is_registered && (
+        {account.ditto.is_registered ? (
+          <HStack space={3}>
+            <Button theme='transparent' size='lg' block onClick={goBack}>Not me</Button>
+            <Button theme='accent' size='lg' block>Continue</Button>
+          </HStack>
+        ) : (
           <Stack space={6}>
             <Stack space={3} alignItems='center' className='rounded-xl bg-gray-100 p-4 dark:bg-gray-800'>
               <Emoji className='h-16 w-16' emoji='🫂' />
@@ -58,10 +65,14 @@ const AccountStep: React.FC<IAccountStep> = ({ accountId }) => {
               </Text>
             </Stack>
 
-          <Button theme='accent' size='lg'>Join</Button>
+            <HStack space={3}>
+              <Button theme='transparent' size='lg' block onClick={goBack}>Not me</Button>
+              <Button theme='accent' size='lg' block>Join</Button>
+            </HStack>
           </Stack>
         )}
       </Stack>
+    </Modal>
   );
 };
 

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

@@ -2,23 +2,24 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
-import Button from 'soapbox/components/ui/button/button';
+import { Button, Stack, Modal } from 'soapbox/components/ui';
-import Stack from 'soapbox/components/ui/stack/stack';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import EmojiGraphic from '../components/emoji-graphic';
 
 interface IExtensionStep {
   setStep: (step: number) => void;
+  onClose(): void;
 }
 
-const ExtensionStep: React.FC<IExtensionStep> = ({ setStep }) => {
+const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
   const dispatch = useAppDispatch();
 
   const onClick = () => dispatch(nostrExtensionLogIn());
   const onClickAlt = () => setStep(1);
 
   return (
+    <Modal title={<FormattedMessage id='nostr_signin.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>
       <Stack className='my-6' space={3}>
         <EmojiGraphic emoji='🔐' />
 
@@ -30,6 +31,7 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ setStep }) => {
           <FormattedMessage id='nostr_signin.siwe.alt' defaultMessage='Sign in with key' />
         </Button>
       </Stack>
+    </Modal>
   );
 };
 

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

@@ -1,12 +1,8 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { accountLookup } from 'soapbox/actions/accounts';
-import Button from 'soapbox/components/ui/button/button';
+import { Button, Form, FormGroup, HStack, Input, Stack, Modal } from 'soapbox/components/ui';
-import Form from 'soapbox/components/ui/form/form';
-import FormGroup from 'soapbox/components/ui/form-group/form-group';
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import Input from 'soapbox/components/ui/input/input';
-import Stack from 'soapbox/components/ui/stack/stack';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import EmojiGraphic from '../components/emoji-graphic';
@@ -15,9 +11,10 @@ import NostrExtensionIndicator from '../components/nostr-extension-indicator';
 interface IIdentityStep {
   setAccountId(accountId: string): void;
   setStep(step: number): void;
+  onClose(): void;
 }
 
-const IdentityStep: React.FC<IIdentityStep> = ({ setAccountId, setStep }) => {
+const IdentityStep: React.FC<IIdentityStep> = ({ setAccountId, setStep, onClose }) => {
   const dispatch = useAppDispatch();
 
   const [loading, setLoading] = useState(false);
@@ -53,6 +50,7 @@ const IdentityStep: React.FC<IIdentityStep> = ({ setAccountId, setStep }) => {
   }
 
   return (
+    <Modal title={<FormattedMessage id='nostr_signin.identity.title' defaultMessage='Who are you?' />} onClose={onClose}>
       <Form>
         <Stack className='mt-3' space={3}>
           <NostrExtensionIndicator />
@@ -83,6 +81,7 @@ const IdentityStep: React.FC<IIdentityStep> = ({ setAccountId, setStep }) => {
           </HStack>
         </Stack>
       </Form>
+    </Modal>
   );
 };
 

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

@@ -1,17 +1,19 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import Button from 'soapbox/components/ui/button/button';
+import { Button, Stack, Modal } from 'soapbox/components/ui';
-import Stack from 'soapbox/components/ui/stack/stack';
 
 import EmojiGraphic from '../components/emoji-graphic';
 import NostrExtensionIndicator from '../components/nostr-extension-indicator';
 
 interface IKeyStep {
   setStep(step: number): void;
+  onClose(): void;
 }
 
-const KeyStep: React.FC<IKeyStep> = ({ setStep }) => {
+const KeyStep: React.FC<IKeyStep> = ({ setStep, 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} justifyContent='center'>
         <NostrExtensionIndicator />
 
@@ -27,6 +29,7 @@ const KeyStep: React.FC<IKeyStep> = ({ setStep }) => {
           </Button>
         </Stack>
       </Stack>
+    </Modal>
   );
 };
 

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

@@ -1,15 +1,19 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import Stack from 'soapbox/components/ui/stack/stack';
+import { Stack, Modal } from 'soapbox/components/ui';
 
 interface IRegisterStep {
+  onClose(): void;
 }
 
-const RegisterStep: React.FC<IRegisterStep> = () => {
+const RegisterStep: React.FC<IRegisterStep> = ({ onClose }) => {
   return (
+    <Modal title={<FormattedMessage id='nostr_signin.register.title' defaultMessage='Create account' />} onClose={onClose}>
       <Stack space={3}>
         register step
       </Stack>
+    </Modal>
   );
 };