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 fd81a6c9a..21595bdb9 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 = ({ onClose, step: firstStep switch (step) { case 'extension': - return setStep('key-add')} onClose={handleClose} />; + return setStep('key-add')} onClose={handleClose} isLogin />; case 'key-add': return ; 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 2b1af1f1e..e43ce2773 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 @@ -1,18 +1,28 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { Link } from 'react-router-dom'; +import { openModal } from 'soapbox/actions/modals'; 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 { Button, Stack, Modal, Text, Divider, HStack } from 'soapbox/components/ui'; +import { useAppDispatch, useInstance, useSoapboxConfig } from 'soapbox/hooks'; interface IExtensionStep { + isLogin?: boolean; onClickAlt: () => void; onClose(): void; } -const ExtensionStep: React.FC = ({ onClickAlt, onClose }) => { +const ExtensionStep: React.FC = ({ isLogin, onClickAlt, onClose }) => { const dispatch = useAppDispatch(); + const instance = useInstance(); + const { logo } = useSoapboxConfig(); + + const handleClose = () => { + onClose(); + dispatch(openModal('NOSTR_SIGNUP')); + }; const onClick = () => { dispatch(nostrExtensionLogIn()); @@ -20,18 +30,48 @@ const ExtensionStep: React.FC = ({ onClickAlt, onClose }) => { }; return ( - } onClose={onClose}> - - + : + } + width='sm' + onClose={onClose} + > + + + + + + + {logo ? +
+ +
+ : + + } - + + {isLogin && + + + + + + + + } +