Advance from KeygenStep to AccountStep

src/actions/accounts.ts

@@ -154,7 +154,7 @@ const fetchAccount = (id: string) =>
     const account = selectAccount(getState(), id);
 
     if (account) {
-      return null;
+      return Promise.resolve(null);
     }
 
     dispatch(fetchAccountRequest(id));

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

@@ -30,7 +30,7 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
     case 'key':
       return <KeyStep setStep={setStep}  onClose={handleClose} />;
     case 'keygen':
-      return <KeygenStep setSigner={setSigner} setStep={setStep} onClose={handleClose} />;
+      return <KeygenStep setAccountId={setAccountId} setSigner={setSigner} setStep={setStep} onClose={handleClose} />;
     case 'account':
       return <AccountStep accountId={accountId!} setStep={setStep}  onClose={handleClose} />;
     case 'register':

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

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { useAccount } from 'soapbox/api/hooks';
 import { Avatar, Text, Stack, Emoji, Button, Tooltip, Modal } from 'soapbox/components/ui';
+import ModalLoading from 'soapbox/features/ui/components/modal-loading';
 import { useInstance } from 'soapbox/hooks';
 
 import { Step } from '../nostr-signin-modal';
@@ -24,7 +25,7 @@ const AccountStep: React.FC<IAccountStep> = ({ accountId, setStep, onClose }) =>
   );
 
   if (!account) {
-    return null;
+    return <ModalLoading />;
   }
 
   return (

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

@@ -1,12 +1,13 @@
 import { generateSecretKey, getPublicKey, nip19 } from 'nostr-tools';
 import { NostrSigner } from 'nspec';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { fetchAccount } from 'soapbox/actions/accounts';
 import CopyableInput from 'soapbox/components/copyable-input';
 import { Button, Stack, Modal, FormGroup, Text, Tooltip } from 'soapbox/components/ui';
 import { NKeys } from 'soapbox/features/nostr/keys';
-import { useInstance } from 'soapbox/hooks';
+import { useAppDispatch, useInstance } from 'soapbox/hooks';
 import { download } from 'soapbox/utils/download';
 import { slugify } from 'soapbox/utils/input';
 
@@ -14,13 +15,15 @@ import EmojiGraphic from '../components/emoji-graphic';
 import { Step } from '../nostr-signin-modal';
 
 interface IKeygenStep {
+  setAccountId(accountId: string): void;
   setSigner(signer: NostrSigner): void;
   setStep(step: Step): void;
   onClose(): void;
 }
 
-const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
+const KeygenStep: React.FC<IKeygenStep> = ({ setAccountId, setSigner, setStep, onClose }) => {
   const instance = useInstance();
+  const dispatch = useAppDispatch();
 
   const secretKey = useMemo(() => generateSecretKey(), []);
   const pubkey = useMemo(() => getPublicKey(secretKey), [secretKey]);
@@ -30,6 +33,11 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
 
   const [downloaded, setDownloaded] = useState(false);
 
+  useEffect(() => {
+    // Pre-fetch into cache.
+    dispatch(fetchAccount(pubkey)).catch(() => {});
+  }, [pubkey]);
+
   const handleDownload = () => {
     download(nsec, `${slugify(instance.title)}-${npub.slice(5, 9)}.nsec.txt`);
     setDownloaded(true);
@@ -40,6 +48,8 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
   const handleNext = () => {
     const signer = NKeys.add(secretKey);
     setSigner(signer);
+    setAccountId(pubkey); // HACK: Ditto uses pubkeys as account IDs.
+    setStep('account');
   };
 
   return (