From df24beeb54c8a5ab41c8ed974a566b623138e3cc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 15 Mar 2024 16:10:03 -0500
Subject: [PATCH] Add key import step

---
 .../nostr-signin-modal/nostr-signin-modal.tsx |  5 +-
 .../steps/extension-step.tsx                  |  2 +-
 .../nostr-signin-modal/steps/key-add-step.tsx | 73 +++++++++++++++++++
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/features/ui/components/modals/nostr-signin-modal/steps/key-add-step.tsx

diff --git a/src/features/ui/components/modals/nostr-signin-modal/nostr-signin-modal.tsx b/src/features/ui/components/modals/nostr-signin-modal/nostr-signin-modal.tsx
index c6ed26196..69f0852aa 100644
--- a/src/features/ui/components/modals/nostr-signin-modal/nostr-signin-modal.tsx
+++ b/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':
diff --git a/src/features/ui/components/modals/nostr-signin-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-signin-modal/steps/extension-step.tsx
index d4c5bc26e..2e6a1a796 100644
--- a/src/features/ui/components/modals/nostr-signin-modal/steps/extension-step.tsx
+++ b/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}>
diff --git a/src/features/ui/components/modals/nostr-signin-modal/steps/key-add-step.tsx b/src/features/ui/components/modals/nostr-signin-modal/steps/key-add-step.tsx
new file mode 100644
index 000000000..d44c7accd
--- /dev/null
+++ b/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;