bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

KeygenStep: simplify it, add a tooltip over "Next" button

Browse source
This commit is contained in:
Alex Gleason 2024-02-19 14:07:18 -06:00
parent b1dc2486de
commit 5eb388bb3b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/ui/tooltip/tooltip.tsx
View file

@ -15,13 +15,15 @@ interface ITooltip {
children: React.ReactElement<any, string | React.JSXElementConstructor<any>>; children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
/** Text to display in the tooltip. */ /** Text to display in the tooltip. */
text: string; text: string;
/** If disabled, it will render the children without wrapping them. */
disabled?: boolean;
} }
/** /**
* Tooltip * Tooltip
*/ */
const Tooltip: React.FC<ITooltip> = (props) => { const Tooltip: React.FC<ITooltip> = (props) => {
const { children, text } = props; const { children, text, disabled = false } = props;
const [isOpen, setIsOpen] = useState<boolean>(false); const [isOpen, setIsOpen] = useState<boolean>(false);
@ -55,6 +57,10 @@ const Tooltip: React.FC<ITooltip> = (props) => {
hover, hover,
]); ]);
if (disabled) {
return children;
}
return ( return (
<> <>
{React.cloneElement(children, { {React.cloneElement(children, {

24
src/features/ui/components/modals/nostr-signin-modal/steps/keygen-step.tsx
View file

@ -4,7 +4,7 @@ import React, { useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import CopyableInput from 'soapbox/components/copyable-input'; import CopyableInput from 'soapbox/components/copyable-input';
import { Button, Stack, Modal, FormGroup } from 'soapbox/components/ui'; import { Button, Stack, Modal, FormGroup, Text, Tooltip } from 'soapbox/components/ui';
import { NKeys } from 'soapbox/features/nostr/keys'; import { NKeys } from 'soapbox/features/nostr/keys';
import { useInstance } from 'soapbox/hooks'; import { useInstance } from 'soapbox/hooks';
import { download } from 'soapbox/utils/download'; import { download } from 'soapbox/utils/download';
@ -44,7 +44,7 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
return ( return (
<Modal title={<FormattedMessage id='nostr_signin.keygen.title' defaultMessage='Your new key' />} onClose={onClose}> <Modal title={<FormattedMessage id='nostr_signin.keygen.title' defaultMessage='Your new key' />} onClose={onClose}>
<Stack className='my-3' space={6}> <Stack className='my-3' space={9}>
<EmojiGraphic emoji='🔑' /> <EmojiGraphic emoji='🔑' />
<Stack alignItems='center'> <Stack alignItems='center'>
@ -53,20 +53,20 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
</Button> </Button>
</Stack> </Stack>
<Stack space={3}> <FormGroup labelText='Secret key'>
<FormGroup labelText='Public key'> <CopyableInput value={nsec} type='password' onCopy={handleCopy} />
<CopyableInput value={npub} /> </FormGroup>
</FormGroup>
<FormGroup labelText='Secret key'> <Stack className='rounded-xl bg-gray-100 p-4 dark:bg-gray-800'>
<CopyableInput value={nsec} type='password' onCopy={handleCopy} /> <Text>Back up your secret key in a secure place. If lost, your account cannot be recovered. Never share your secret key with anyone.</Text>
</FormGroup>
</Stack> </Stack>
<Stack alignItems='end'> <Stack alignItems='end'>
<Button className='mt-3' theme='accent' disabled={!downloaded} size='lg' onClick={handleNext}> <Tooltip text='Download your key to continue' disabled={downloaded}>
Next <Button theme='accent' disabled={!downloaded} size='lg' onClick={handleNext}>
</Button> Next
</Button>
</Tooltip>
</Stack> </Stack>
</Stack> </Stack>
</Modal> </Modal>