Refactoring and improving the onboarding trigger

src/components/modal-root.tsx

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 import { cancelReplyCompose } from 'soapbox/actions/compose';
 import { cancelEventCompose } from 'soapbox/actions/events';
 import { openModal, closeModal } from 'soapbox/actions/modals';
+import { startOnboarding } from 'soapbox/actions/onboarding';
 import { useAppDispatch, usePrevious } from 'soapbox/hooks';
 
 import type { ModalType } from 'soapbox/features/ui/components/modal-root';
@@ -111,6 +112,9 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
         }));
       } else if ((hasComposeContent || hasEventComposeContent) && type === 'CONFIRM') {
         dispatch(closeModal('CONFIRM'));
+      } else if (type === 'CAPTCHA') {
+        dispatch(startOnboarding());
+        onClose();
       } else {
         onClose();
       }

src/features/ui/components/modals/captcha-modal/captcha-modal.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { startOnboarding } from 'soapbox/actions/onboarding';
 import { Modal, Stack } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import Captcha from './captcha';
 
@@ -10,8 +12,14 @@ interface ICaptchaModal {
 }
 
 const CaptchaModal: React.FC<ICaptchaModal> = ({ onClose }) => {
+  const dispatch = useAppDispatch();
   return (
-    <Modal title={<FormattedMessage id='nostr_signup.captcha_title' defaultMessage='Human Verification' />} onClose={onClose} width='sm'>
+    <Modal
+      title={<FormattedMessage id='nostr_signup.captcha_title' defaultMessage='Human Verification' />} onClose={() => {
+        onClose();
+        dispatch(startOnboarding());
+      }} width='sm'
+    >
       <Stack justifyContent='center' alignItems='center' space={4}>
         <Captcha />
       </Stack>

src/features/ui/components/modals/captcha-modal/captcha.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import useCaptcha from 'soapbox/api/hooks/captcha/useCaptcha';
 import { Button, Spinner, Stack, Text } from 'soapbox/components/ui';
 
-import { PuzzleCaptcha } from './puzzle';
+import { PuzzleCaptcha } from './components/puzzle';
-import useCaptcha from './useCaptcha';
 
 const Captcha: React.FC = () => {
   const {

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

@@ -5,12 +5,14 @@ import { FormattedMessage } from 'react-intl';
 import { fetchAccount } from 'soapbox/actions/accounts';
 import { openModal } from 'soapbox/actions/modals';
 import { logInNostr } from 'soapbox/actions/nostr';
+import { closeSidebar } from 'soapbox/actions/sidebar';
 import CopyableInput from 'soapbox/components/copyable-input';
 import EmojiGraphic from 'soapbox/components/emoji-graphic';
 import { Button, Stack, Modal, FormGroup, Text, Tooltip, HStack } from 'soapbox/components/ui';
 import { useNostr } from 'soapbox/contexts/nostr-context';
 import { NKeys } from 'soapbox/features/nostr/keys';
 import { useAppDispatch, useInstance } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 import { download } from 'soapbox/utils/download';
 import { slugify } from 'soapbox/utils/input';
 
@@ -21,6 +23,7 @@ interface IKeygenStep {
 const KeygenStep: React.FC<IKeygenStep> = ({ onClose }) => {
   const instance = useInstance();
   const dispatch = useAppDispatch();
+  const isMobile = useIsMobile();
   const { relay } = useNostr();
 
   const secretKey = useMemo(() => generateSecretKey(), []);
@@ -64,6 +67,11 @@ const KeygenStep: React.FC<IKeygenStep> = ({ onClose }) => {
     await dispatch(logInNostr(pubkey));
 
     onClose();
+
+    if (isMobile) {
+      dispatch(closeSidebar());
+    }
+
     await dispatch(openModal('CAPTCHA'));
   };