-
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 (#3290)
* feat: Ability to display/export the private key * feat: test * fix: comment * fix: check * fix: test * fix: test * fix: check * fix: check * fix: comment * fix: comment
- Loading branch information
1 parent
7cc4585
commit 9a77b74
Showing
23 changed files
with
445 additions
and
41 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
143 changes: 143 additions & 0 deletions
143
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,143 @@ | ||
| 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( | ||
| (e?: React.FormEvent) => { | ||
| if (e) { | ||
| e.preventDefault() | ||
| } | ||
| if (!password) { | ||
| return | ||
| } | ||
| setIsLoading(true) | ||
| getPrivateKeyByAddress({ | ||
| walletID, | ||
| address, | ||
| password, | ||
| }) | ||
| .then(res => { | ||
| if (!isSuccessResponse(res)) { | ||
| setError(errorFormatter(res.message, t)) | ||
| return | ||
| } | ||
| setPrivateKey(res.result) | ||
| }) | ||
| .finally(() => { | ||
| 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.
9a77b74There 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 12760377514
9a77b74There 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 12760375971