Add key import step

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

@@ -4,10 +4,11 @@ import React, { useState } from 'react';
 import AccountStep from './steps/account-step';
 import ExtensionStep from './steps/extension-step';
 import IdentityStep from './steps/identity-step';
+import KeyAddStep from './steps/key-add-step';
 import KeyStep from './steps/key-step';
 import KeygenStep from './steps/keygen-step';
 
-type Step = 'extension' | 'identity' | 'key' | 'keygen' | 'account';
+type Step = 'extension' | 'identity' | 'key' | 'keygen' | 'key-add' | 'account';
 
 interface INostrSigninModal {
   onClose: (type?: string) => void;
@@ -28,6 +29,8 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
       return <IdentityStep setAccountId={setAccountId} setStep={setStep} onClose={handleClose} />;
     case 'key':
       return <KeyStep setStep={setStep}  onClose={handleClose} />;
+    case 'key-add':
+      return <KeyAddStep setAccountId={setAccountId} setSigner={setSigner} setStep={setStep} onClose={handleClose} />;
     case 'keygen':
       return <KeygenStep setAccountId={setAccountId} setSigner={setSigner} setStep={setStep} onClose={handleClose} />;
     case 'account':

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

@@ -17,7 +17,7 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
   const dispatch = useAppDispatch();
 
   const onClick = () => dispatch(nostrExtensionLogIn());
-  const onClickAlt = () => setStep('identity');
+  const onClickAlt = () => setStep('key-add');
 
   return (
     <Modal title={<FormattedMessage id='nostr_signin.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>

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

@@ -0,0 +1,73 @@
+import { NostrSigner } from '@soapbox/nspec';
+import { getPublicKey, nip19 } from 'nostr-tools';
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button, Stack, Modal, Input, FormGroup, Form } from 'soapbox/components/ui';
+import { NKeys } from 'soapbox/features/nostr/keys';
+
+import EmojiGraphic from '../components/emoji-graphic';
+import NostrExtensionIndicator from '../components/nostr-extension-indicator';
+import { Step } from '../nostr-signin-modal';
+
+interface IKeyAddStep {
+  setAccountId(accountId: string): void;
+  setSigner(signer: NostrSigner): void;
+  setStep(step: Step): void;
+  onClose(): void;
+}
+
+const KeyAddStep: React.FC<IKeyAddStep> = ({ setAccountId, setSigner, setStep, onClose }) => {
+  const [nsec, setNsec] = useState('');
+  const [error, setError] = useState<string | undefined>();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNsec(e.target.value);
+    setError(undefined);
+  };
+
+  const handleSubmit = () => {
+    try {
+      const result = nip19.decode(nsec);
+      if (result.type === 'nsec') {
+        const seckey = result.data;
+        const pubkey = getPublicKey(seckey);
+        const signer = NKeys.add(seckey);
+        setAccountId(pubkey);
+        setSigner(signer);
+        setStep('account');
+      }
+    } catch (e) {
+      setError('Invalid nsec');
+    }
+  };
+
+  return (
+    <Modal title={<FormattedMessage id='nostr_signin.key-add.title' defaultMessage='Import Key' />} onClose={onClose}>
+      <Stack className='my-3' space={6}>
+        <NostrExtensionIndicator />
+
+        <EmojiGraphic emoji='🔑' />
+
+        <Form onSubmit={handleSubmit}>
+          <Stack space={6}>
+            <FormGroup labelText='Secret key' errors={error ? [error] : []}>
+              <Input
+                value={nsec}
+                type='password'
+                onChange={handleChange}
+                placeholder='nsec1…'
+              />
+            </FormGroup>
+
+            <Button theme='accent' size='lg' type='submit'>
+              Add Key
+            </Button>
+          </Stack>
+        </Form>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default KeyAddStep;