-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #648 from Psychedelic/feat/import-identity-string
Feat/import identity string
- Loading branch information
Showing
16 changed files
with
449 additions
and
12 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
File renamed without changes.
File renamed without changes.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react'; | ||
| import { Layout, Header } from '@components'; | ||
| import useSteps from './hooks/useSteps'; | ||
|
|
||
| const ImportWallet = () => { | ||
| const { | ||
| component, | ||
| left, | ||
| right, | ||
| center, | ||
| } = useSteps(); | ||
|
|
||
| return ( | ||
| <Layout> | ||
| <Header left={left} center={center} right={right} /> | ||
| {component} | ||
| </Layout> | ||
| ); | ||
| }; | ||
|
|
||
| export default ImportWallet; |
File renamed without changes.
76 changes: 76 additions & 0 deletions
76
source/views/Extension/Views/ImportPrivateKey/Steps/Step1.jsx
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,76 @@ | ||
| import React, { useState, useCallback, useEffect } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import useStyles from "../styles"; | ||
| import { Typography, Grid } from "@material-ui/core"; | ||
| import { Container, Button, TextInput, FormItem, UserIcon } from "@components"; | ||
| import { HANDLER_TYPES, sendMessage } from "@background/Keyring"; | ||
|
|
||
| const Step1 = ({ handleChangeStep, setPrivateKey, privateKey }) => { | ||
| const { t } = useTranslation(); | ||
| const classes = useStyles(); | ||
|
|
||
| const [loading, setLoading] = useState(false); | ||
| const [disabled, setDisabled] = useState(true); | ||
| const [invalidPem, setInvalidPem] = useState(null); | ||
|
|
||
| const handlePrivateKey = (e) => { | ||
| setLoading(true); | ||
| setPrivateKey(e.target.value); | ||
| sendMessage( | ||
| { | ||
| type: HANDLER_TYPES.VALIDATE_PEM, | ||
| params: { | ||
| pem: e.target.value | ||
| }, | ||
| }, | ||
| (a) => { | ||
| if (a) { | ||
| setDisabled(false); | ||
| setInvalidPem(false); | ||
| setLoading(false); | ||
| } else { | ||
| setInvalidPem(true); | ||
| setLoading(false); | ||
| setDisabled(true); | ||
| } | ||
| }, | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Container> | ||
| <Grid container spacing={2}> | ||
| <Grid item xs={12}> | ||
| <FormItem | ||
| label={`${t("importPrivateKey.privateKey")}`} | ||
| smallLabel | ||
| component={ | ||
| <TextInput | ||
| fullWidth | ||
| value={privateKey} | ||
| onChange={(e) => handlePrivateKey(e)} | ||
| type="text" | ||
| data-testid="import-private-key-fill" | ||
| error={invalidPem} | ||
| /> | ||
| } | ||
| /> | ||
| {invalidPem && <Typography variant="body2" color="error">{`${t("importPrivateKey.invalidString")}`}</Typography>} | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <Button | ||
| variant="rainbow" | ||
| value={t("common.continue")} | ||
| onClick={() => handleChangeStep(1)} | ||
| loading={loading} | ||
| disabled={disabled} | ||
| fullWidth | ||
| data-testid="add-button" | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| </Container> | ||
| ); | ||
| }; | ||
|
|
||
| export default Step1; |
118 changes: 118 additions & 0 deletions
118
source/views/Extension/Views/ImportPrivateKey/Steps/Step2.jsx
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,118 @@ | ||
| import { Container, Button, TextInput, FormItem, UserIcon } from "@components"; | ||
| import Grid from "@material-ui/core/Grid"; | ||
| import useStyles from "../styles"; | ||
| import React, { useState } from "react"; | ||
| import { useRouter } from "@components/Router"; | ||
| import { HANDLER_TYPES, sendMessage } from "@background/Keyring"; | ||
| import Picker from "emoji-picker-react"; | ||
| import { useEffect } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
|
|
||
| const Step2 = ({ privateKey }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const [loading, setLoading] = useState(false); | ||
| const [disabled, setDisabled] = useState(true); | ||
| const [openEmojis, setOpenEmojis] = useState(false); | ||
| const [walletName, setWalletName] = useState(""); // add deafault wallet name, for example the next wallet not used number | ||
| const [currentEmoji, setCurrentEmoji] = useState("😎"); // add default emoji, not used in other wallets | ||
| const [openEmojiSelector, setOpenEmojiSelector] = useState(false); | ||
|
|
||
| const { navigator } = useRouter(); | ||
|
|
||
| const classes = useStyles(); | ||
|
|
||
| useEffect(() => { | ||
| if (walletName && walletName !== "") { | ||
| setDisabled(false); | ||
| } else { | ||
| setDisabled(true); | ||
| } | ||
| }, [currentEmoji, walletName]); | ||
|
|
||
| const onEmojiClick = (_event, emojiObject) => { | ||
| setCurrentEmoji(emojiObject.emoji); | ||
| setOpenEmojis(false); | ||
| setOpenEmojiSelector(false); | ||
| }; | ||
|
|
||
| const createImportedAccount = () => { | ||
| setLoading(true); | ||
| sendMessage( | ||
| { | ||
| type: HANDLER_TYPES.IMPORT_PEM_ACCOUNT, | ||
| params: { icon: currentEmoji, name: walletName, pem: privateKey }, | ||
| }, | ||
| () => {}, | ||
| ); | ||
| setLoading(false); | ||
| navigator.navigate("home"); | ||
| }; | ||
|
|
||
|
|
||
| return ( | ||
| <Container> | ||
| <Grid container spacing={2}> | ||
| <Grid item xs={12}> | ||
| <div className={classes.chooseEmojiContainer}> | ||
| <UserIcon icon={currentEmoji} size="big" /> | ||
| <Button | ||
| variant="primary" | ||
| value={t("importPem.editWalletPic")} | ||
| onClick={() => setOpenEmojiSelector(!openEmojiSelector)} | ||
| style={{ | ||
| minWidth: 115, | ||
| height: 24, | ||
| borderRadius: 6, | ||
| }} | ||
| /> | ||
| {openEmojiSelector && ( | ||
| <Picker | ||
| pickerStyle={{ | ||
| height: 190, | ||
| width: "auto", | ||
| position: "absolute", | ||
| top: 180, | ||
| left: 40, | ||
| right: 40, | ||
| zIndex: 500, | ||
| }} | ||
| onEmojiClick={onEmojiClick} | ||
| native | ||
| disableSearchBar | ||
| groupVisibility={{ | ||
| recently_used: false, | ||
| flags: false, | ||
| }} | ||
| /> | ||
| )} | ||
| </div> | ||
| <FormItem | ||
| smallLabel | ||
| label={t("common.name")} | ||
| className={classes.formItem} | ||
| component={ | ||
| <TextInput | ||
| fullWidth | ||
| onChange={(e) => setWalletName(e.target.value.trim())} | ||
| type="text" | ||
| // error={} | ||
| /> | ||
| } | ||
| /> | ||
| <Button | ||
| variant="rainbow" | ||
| value={t("common.save")} | ||
| onClick={createImportedAccount} | ||
| loading={loading} | ||
| disabled={disabled} | ||
| fullWidth | ||
| data-testid="add-button" | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| </Container> | ||
| ); | ||
| }; | ||
|
|
||
| export default Step2; |
44 changes: 44 additions & 0 deletions
44
source/views/Extension/Views/ImportPrivateKey/hooks/useSteps.jsx
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,44 @@ | ||
| import React, { useState } from 'react'; | ||
| import { LinkButton } from '@components'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { useRouter } from '@components/Router'; | ||
| import BackIcon from '@assets/icons/back.svg'; | ||
| import Step1 from '../Steps/Step1'; | ||
| import Step2 from '../Steps/Step2'; | ||
|
|
||
| const useSteps = () => { | ||
| const [step, setStep] = useState(0); | ||
| const { navigator } = useRouter(); | ||
| const { t } = useTranslation(); | ||
|
|
||
| const [privateKey, setPrivateKey] = useState(null); | ||
|
|
||
| const handleChangeStep = (index) => setStep(index); | ||
| const handleClose = () => navigator.navigate('home'); | ||
|
|
||
| const leftButton = (onClick) => <LinkButton value={t('common.back')} onClick={onClick} startIcon={BackIcon} />; | ||
| const rightButton = <LinkButton value={t('common.close')} onClick={handleClose} />; | ||
|
|
||
|
|
||
|
|
||
| const steps = [ | ||
| { | ||
| component: <Step1 handleChangeStep={handleChangeStep} setPrivateKey={setPrivateKey} privateKey={privateKey} />, | ||
| left: leftButton(() => navigator.navigate('import-wallet')), | ||
| right: rightButton, | ||
| center: `${t("importWallet.importWallet")}`, | ||
| }, | ||
| { | ||
| component: <Step2 | ||
| handleClose={handleClose} | ||
| privateKey={privateKey} | ||
| />, | ||
| right: rightButton, | ||
| center: `${t("importWallet.importWallet")}`, | ||
| }, | ||
| ]; | ||
|
|
||
| return steps[step]; | ||
| }; | ||
|
|
||
| export default useSteps; |
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,21 @@ | ||
| import React from 'react'; | ||
| import { Layout, Header } from '@components'; | ||
| import useSteps from './hooks/useSteps'; | ||
|
|
||
| const ImportPrivateKey = () => { | ||
| const { | ||
| component, | ||
| left, | ||
| right, | ||
| center, | ||
| } = useSteps(); | ||
|
|
||
| return ( | ||
| <Layout> | ||
| <Header left={left} center={center} right={right} /> | ||
| {component} | ||
| </Layout> | ||
| ); | ||
| }; | ||
|
|
||
| export default ImportPrivateKey; |
Oops, something went wrong.