-
Notifications
You must be signed in to change notification settings - Fork 85
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Ability to display/export the private key
- Loading branch information
1 parent
0d64329
commit f7e99b8
Showing
22 changed files
with
384 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
145 changes: 145 additions & 0 deletions
145
packages/neuron-ui/src/components/ViewPrivateKey/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| import React, { useCallback, useEffect, useState } from 'react' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { useState as useGlobalState } from 'states' | ||
| import Dialog from 'widgets/Dialog' | ||
| import TextField from 'widgets/TextField' | ||
| import Alert from 'widgets/Alert' | ||
| import { errorFormatter, useCopy, isSuccessResponse } from 'utils' | ||
| import { Attention, Copy } from 'widgets/Icons/icon' | ||
| import { getPrivateKeyByAddress } from 'services/remote' | ||
| import styles from './viewPrivateKey.module.scss' | ||
|
|
||
| const ViewPrivateKey = ({ onClose, address }: { onClose?: () => void; address?: string }) => { | ||
| const [t] = useTranslation() | ||
| const [password, setPassword] = useState('') | ||
| const [error, setError] = useState('') | ||
| const [privateKey, setPrivateKey] = useState('') | ||
| const [isLoading, setIsLoading] = useState(false) | ||
| const { copied, onCopy, copyTimes } = useCopy() | ||
| const { | ||
| wallet: { id: walletID = '' }, | ||
| } = useGlobalState() | ||
|
|
||
| useEffect(() => { | ||
| setPassword('') | ||
| setError('') | ||
| }, [setError, setPassword]) | ||
|
|
||
| const onChange = useCallback( | ||
| (e: React.SyntheticEvent<HTMLInputElement>) => { | ||
| const { value } = e.target as HTMLInputElement | ||
| setPassword(value) | ||
| setError('') | ||
| }, | ||
| [setPassword, setError] | ||
| ) | ||
|
|
||
| const onSubmit = useCallback( | ||
| async (e?: React.FormEvent) => { | ||
| if (e) { | ||
| e.preventDefault() | ||
| } | ||
| if (!password) { | ||
| return | ||
| } | ||
| setIsLoading(true) | ||
| try { | ||
| const res = await getPrivateKeyByAddress({ | ||
| walletID, | ||
| address, | ||
| password, | ||
| }) | ||
|
|
||
| setIsLoading(false) | ||
|
|
||
| if (!isSuccessResponse(res)) { | ||
| setError(errorFormatter(res.message, t)) | ||
| return | ||
| } | ||
| setPrivateKey(res.result) | ||
| } catch (err) { | ||
| setIsLoading(false) | ||
| } | ||
| }, | ||
| [walletID, password, setError, t] | ||
| ) | ||
|
|
||
| if (privateKey) { | ||
| return ( | ||
| <Dialog | ||
| show | ||
| title={t('addresses.view-private-key')} | ||
| onConfirm={onClose} | ||
| onCancel={onClose} | ||
| showCancel={false} | ||
| confirmText={t('common.close')} | ||
| className={styles.dialog} | ||
| > | ||
| <div> | ||
| <div className={styles.tip}> | ||
| <Attention /> | ||
| {t('addresses.view-private-key-tip')} | ||
| </div> | ||
|
|
||
| <TextField | ||
| className={styles.passwordInput} | ||
| placeholder={t('password-request.placeholder')} | ||
| width="100%" | ||
| label={<span className={styles.label}>{t('addresses.private-key')}</span>} | ||
| value={privateKey} | ||
| field="password" | ||
| type="password" | ||
| disabled | ||
| suffix={ | ||
| <div className={styles.copy}> | ||
| <Copy onClick={() => onCopy(privateKey)} /> | ||
| </div> | ||
| } | ||
| /> | ||
|
|
||
| {copied ? ( | ||
| <Alert status="success" className={styles.notice} key={copyTimes.toString()}> | ||
| {t('common.copied')} | ||
| </Alert> | ||
| ) : null} | ||
| </div> | ||
| </Dialog> | ||
| ) | ||
| } | ||
| return ( | ||
| <Dialog | ||
| show | ||
| title={t('addresses.view-private-key')} | ||
| onCancel={onClose} | ||
| onConfirm={onSubmit} | ||
| confirmText={t('wizard.next')} | ||
| isLoading={isLoading} | ||
| disabled={!password || isLoading} | ||
| className={styles.dialog} | ||
| > | ||
| <div> | ||
| <div className={styles.tip}> | ||
| <Attention /> | ||
| {t('addresses.view-private-key-tip')} | ||
| </div> | ||
|
|
||
| <TextField | ||
| className={styles.passwordInput} | ||
| placeholder={t('password-request.placeholder')} | ||
| width="100%" | ||
| label={t('wizard.password')} | ||
| value={password} | ||
| field="password" | ||
| type="password" | ||
| onChange={onChange} | ||
| autoFocus | ||
| error={error} | ||
| /> | ||
| </div> | ||
| </Dialog> | ||
| ) | ||
| } | ||
|
|
||
| ViewPrivateKey.displayName = 'ViewPrivateKey' | ||
|
|
||
| export default ViewPrivateKey |
39 changes: 39 additions & 0 deletions
39
packages/neuron-ui/src/components/ViewPrivateKey/viewPrivateKey.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| @import '../../styles/mixin.scss'; | ||
|
|
||
| .passwordInput { | ||
| margin-top: 16px; | ||
| } | ||
|
|
||
| .dialog { | ||
| width: 700px; | ||
| } | ||
|
|
||
| .tip { | ||
| color: var(--warn-text-color); | ||
| background: var(--warn-background-color); | ||
| margin: -20px -16px 0; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 32px; | ||
| font-size: 12px; | ||
| gap: 4px; | ||
| font-weight: 500; | ||
| border-bottom: 1px solid var(--warn-border-color); | ||
| } | ||
|
|
||
| .label { | ||
| font-weight: 500; | ||
| color: var(--main-text-color); | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .copy { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-left: 6px; | ||
| } | ||
|
|
||
| .notice { | ||
| @include dialog-copy-animation; | ||
| } |
Oops, something went wrong.
f7e99b8There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Packaging for test is done in 12526642673