Rework Nostr modal actions

src/actions/nostr.ts

@@ -1,22 +1,23 @@
 import { nip19 } from 'nostr-tools';
 
-import { signer } from 'soapbox/features/nostr/sign';
 import { type AppDispatch } from 'soapbox/store';
 
 import { verifyCredentials } from './auth';
+import { closeModal } from './modals';
 
-/** Log in with a Nostr pubkey. */
+/** Log in with a Nostr extension. */
-function nostrLogIn() {
+function nostrExtensionLogIn() {
   return async (dispatch: AppDispatch) => {
-    if (!signer) {
+    if (!window.nostr) {
       throw new Error('No Nostr signer available');
     }
 
-    const pubkey = await signer.getPublicKey();
+    const pubkey = await window.nostr.getPublicKey();
     const npub = nip19.npubEncode(pubkey);
 
+    dispatch(closeModal('NOSTR_SIGNIN'));
     return dispatch(verifyCredentials(npub));
   };
 }
 
-export { nostrLogIn };
+export { nostrExtensionLogIn };

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

@@ -1,14 +1,16 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+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';
 
-interface INostrExtensionIndicator {
+const NostrExtensionIndicator: React.FC = () => {
-  signinAction: () => void;
+  const dispatch = useAppDispatch();
-}
+
+  const onClick = () => dispatch(nostrExtensionLogIn());
 
-const NostrExtensionIndicator: React.FC<INostrExtensionIndicator> = ({ signinAction }) => {
   return (
     <Stack space={2} className='rounded-lg bg-gray-100 p-2 dark:bg-gray-800'>
       <Text size='xs'>
@@ -17,7 +19,7 @@ const NostrExtensionIndicator: React.FC<INostrExtensionIndicator> = ({ signinAct
             id='nostr_extension.found'
             defaultMessage='<link>Sign in</link> with browser extension.'
             values={{
-              link: (node) => <button className='underline' onClick={signinAction}>{node}</button>,
+              link: (node) => <button className='underline' onClick={onClick}>{node}</button>,
             }}
           />
         ) : (

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

@@ -1,22 +1,20 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
 import Button from 'soapbox/components/ui/button/button';
 import Stack from 'soapbox/components/ui/stack/stack';
-import { signer } from 'soapbox/features/nostr/sign';
+import { useAppDispatch } from 'soapbox/hooks';
 
 interface IExtensionStep {
   setStep: (step: number) => void;
 }
 
 const ExtensionStep: React.FC<IExtensionStep> = ({ setStep }) => {
-  const onClick = () => {
+  const dispatch = useAppDispatch();
-    signer!.getPublicKey();
-  };
 
-  const onClickAlt = () => {
+  const onClick = () => dispatch(nostrExtensionLogIn());
-    setStep(1);
+  const onClickAlt = () => setStep(1);
-  };
 
   return (
     <Stack className='my-6' space={3}>

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

@@ -17,7 +17,7 @@ interface IIdentityStep {
 const IdentityStep: React.FC<IIdentityStep> = ({ username, setUsername, setStep }) => {
   return (
     <Stack className='mt-3' space={3}>
-      <NostrExtensionIndicator signinAction={() => setStep(0)} />
+      <NostrExtensionIndicator />
 
       <FormGroup labelText='Username'>
         <Input

src/features/ui/components/navbar.tsx

@@ -5,7 +5,7 @@ import { Link, Redirect } from 'react-router-dom';
 
 import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
-import { nostrLogIn } from 'soapbox/actions/nostr';
+import { openModal } from 'soapbox/actions/modals';
 import { openSidebar } from 'soapbox/actions/sidebar';
 import SiteLogo from 'soapbox/components/site-logo';
 import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
@@ -40,9 +40,7 @@ const Navbar = () => {
   const onOpenSidebar = () => dispatch(openSidebar());
 
   const handleNostrLogin = async () => {
-    setLoading(true);
+    dispatch(openModal('NOSTR_SIGNIN'));
-    await dispatch(nostrLogIn()).catch(console.error);
-    setLoading(false);
   };
 
   const handleSubmit: React.FormEventHandler = (event) => {