matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

KeygenStep: display user's keys as copyable inputs

Browse Source
This commit is contained in:
Alex Gleason
2024-02-19 13:26:39 -06:00
parent f20687313f
commit 772cecf26b
2 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,8 @@ import { NostrSigner } from 'nspec';
import React, { useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Button, Stack, Modal } from 'soapbox/components/ui';
import CopyableInput from 'soapbox/components/copyable-input';
import { Button, Stack, Modal, FormGroup } from 'soapbox/components/ui';
import { NKeys } from 'soapbox/features/nostr/keys';
import { useInstance } from 'soapbox/hooks';
import { download } from 'soapbox/utils/download';
@ -30,10 +31,12 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
const [downloaded, setDownloaded] = useState(false);
const handleDownload = () => {
download(nsec, `${slugify(instance.title)}-${npub.slice(5, 9)}.nsec`);
download(nsec, `${slugify(instance.title)}-${npub.slice(5, 9)}.nsec.txt`);
setDownloaded(true);
};
const handleCopy = () => setDownloaded(true);
const handleNext = () => {
const signer = NKeys.add(secretKey);
setSigner(signer);
@ -50,8 +53,18 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
</Button>
</Stack>
<Stack space={3} alignItems='end'>
<Button theme='accent' disabled={!downloaded} size='lg' onClick={handleNext}>
<Stack space={3}>
<FormGroup labelText='Public key'>
<CopyableInput value={npub} />
</FormGroup>
<FormGroup labelText='Secret key'>
<CopyableInput value={nsec} type='password' onCopy={handleCopy} />
</FormGroup>
</Stack>
<Stack alignItems='end'>
<Button className='mt-3' theme='accent' disabled={!downloaded} size='lg' onClick={handleNext}>
Next
</Button>
</Stack>