From 7cfbf22b272b75ea19ffdeb0c49991232aef0732 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 17 Mar 2024 18:06:27 -0500
Subject: [PATCH] ExtensionStep: combine into one component

---
 .../nostr-login-modal/nostr-login-modal.tsx   |  2 +-
 .../steps/extension-step.tsx                  |  8 +---
 .../nostr-signup-modal/nostr-signup-modal.tsx |  5 ++-
 .../steps/extension-step.tsx                  | 45 -------------------
 4 files changed, 6 insertions(+), 54 deletions(-)
 delete mode 100644 src/features/ui/components/modals/nostr-signup-modal/steps/extension-step.tsx

diff --git a/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx b/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
index b5c1c95d7..fd81a6c9a 100644
--- a/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
@@ -17,7 +17,7 @@ const NostrLoginModal: React.FC<INostrLoginModal> = ({ onClose, step: firstStep
 
   switch (step) {
     case 'extension':
-      return <ExtensionStep setStep={setStep} onClose={handleClose} />;
+      return <ExtensionStep onClickAlt={() => setStep('key-add')} onClose={handleClose} />;
     case 'key-add':
       return <KeyAddStep onClose={handleClose} />;
     default:
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
index 9f235634f..2b1af1f1e 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
@@ -6,14 +6,12 @@ import EmojiGraphic from 'soapbox/components/emoji-graphic';
 import { Button, Stack, Modal } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
-import { Step } from '../nostr-login-modal';
-
 interface IExtensionStep {
-  setStep: (step: Step) => void;
+  onClickAlt: () => void;
   onClose(): void;
 }
 
-const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
+const ExtensionStep: React.FC<IExtensionStep> = ({ onClickAlt, onClose }) => {
   const dispatch = useAppDispatch();
 
   const onClick = () => {
@@ -21,8 +19,6 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
     onClose();
   };
 
-  const onClickAlt = () => setStep('key-add');
-
   return (
     <Modal title={<FormattedMessage id='nostr_signup.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>
       <Stack space={6}>
diff --git a/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx b/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
index 18f63ba10..a5d47acce 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
-import ExtensionStep from './steps/extension-step';
+import ExtensionStep from '../nostr-login-modal/steps/extension-step';
+
 import KeyStep from './steps/key-step';
 import KeygenStep from './steps/keygen-step';
 
@@ -17,7 +18,7 @@ const NostrSigninModal: React.FC<INostrSignupModal> = ({ onClose }) => {
 
   switch (step) {
     case 'extension':
-      return <ExtensionStep setStep={setStep} onClose={handleClose} />;
+      return <ExtensionStep onClickAlt={() => setStep('key')} onClose={handleClose} />;
     case 'key':
       return <KeyStep setStep={setStep} onClose={handleClose} />;
     case 'keygen':
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/extension-step.tsx
deleted file mode 100644
index 69419792f..000000000
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/extension-step.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
-import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-
-import { Step } from '../nostr-signup-modal';
-
-interface IExtensionStep {
-  setStep: (step: Step) => void;
-  onClose(): void;
-}
-
-const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
-  const dispatch = useAppDispatch();
-
-  const onClick = () => {
-    dispatch(nostrExtensionLogIn());
-    onClose();
-  };
-
-  const onClickAlt = () => setStep('key');
-
-  return (
-    <Modal title={<FormattedMessage id='nostr_signup.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>
-      <Stack space={6}>
-        <EmojiGraphic emoji='🔐' />
-
-        <Stack space={3}>
-          <Button theme='accent' size='lg' onClick={onClick}>
-            <FormattedMessage id='nostr_signup.siwe.action' defaultMessage='Sign in with extension' />
-          </Button>
-
-          <Button theme='transparent' onClick={onClickAlt}>
-            <FormattedMessage id='nostr_signup.siwe.alt' defaultMessage='Sign in with key' />
-          </Button>
-        </Stack>
-      </Stack>
-    </Modal>
-  );
-};
-
-export default ExtensionStep;