moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ExtensionStep: combine into one component

This commit is contained in:
Alex Gleason 2024-03-17 18:06:27 -05:00
parent 6fb7c337a3
commit 7cfbf22b27
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 6 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
View File

@ -17,7 +17,7 @@ const NostrLoginModal: React.FC<INostrLoginModal> = ({ onClose, step: firstStep
switch (step) { switch (step) {
case 'extension': case 'extension':
return <ExtensionStep setStep={setStep} onClose={handleClose} />; return <ExtensionStep onClickAlt={() => setStep('key-add')} onClose={handleClose} />;
case 'key-add': case 'key-add':
return <KeyAddStep onClose={handleClose} />; return <KeyAddStep onClose={handleClose} />;
default: default:

8
src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
View File

@ -6,14 +6,12 @@ import EmojiGraphic from 'soapbox/components/emoji-graphic';
import { Button, Stack, Modal } from 'soapbox/components/ui'; import { Button, Stack, Modal } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
import { Step } from '../nostr-login-modal';
interface IExtensionStep { interface IExtensionStep {
setStep: (step: Step) => void; onClickAlt: () => void;
onClose(): void; onClose(): void;
} }
const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => { const ExtensionStep: React.FC<IExtensionStep> = ({ onClickAlt, onClose }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const onClick = () => { const onClick = () => {
@ -21,8 +19,6 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
onClose(); onClose();
}; };
const onClickAlt = () => setStep('key-add');
return ( return (
<Modal title={<FormattedMessage id='nostr_signup.siwe.title' defaultMessage='Sign in' />} onClose={onClose}> <Modal title={<FormattedMessage id='nostr_signup.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>
<Stack space={6}> <Stack space={6}>

5
src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
View File

@ -1,6 +1,7 @@
import React, { useState } from 'react'; 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 KeyStep from './steps/key-step';
import KeygenStep from './steps/keygen-step'; import KeygenStep from './steps/keygen-step';
@ -17,7 +18,7 @@ const NostrSigninModal: React.FC<INostrSignupModal> = ({ onClose }) => {
switch (step) { switch (step) {
case 'extension': case 'extension':
return <ExtensionStep setStep={setStep} onClose={handleClose} />; return <ExtensionStep onClickAlt={() => setStep('key')} onClose={handleClose} />;
case 'key': case 'key':
return <KeyStep setStep={setStep} onClose={handleClose} />; return <KeyStep setStep={setStep} onClose={handleClose} />;
case 'keygen': case 'keygen':

45
src/features/ui/components/modals/nostr-signup-modal/steps/extension-step.tsx
View File

@ -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;