From e49ee09ebee57612a740e7f40702550d3bc4b6d3 Mon Sep 17 00:00:00 2001 From: Cancu Date: Wed, 19 Oct 2022 13:08:48 -0300 Subject: [PATCH 1/9] added the import wallet page pre import pem string or file --- source/views/Extension/Popup.jsx | 2 ++ .../Steps/Step1.jsx | 0 .../Steps/Step2.jsx | 0 .../hooks/useSteps.jsx | 2 +- .../Extension/Views/ImportPemFile/index.jsx | 21 ++++++++++++++++ .../{ImportWallet => ImportPemFile}/styles.js | 0 .../Extension/Views/ImportWallet/index.jsx | 24 ++++++++++++------- 7 files changed, 39 insertions(+), 10 deletions(-) rename source/views/Extension/Views/{ImportWallet => ImportPemFile}/Steps/Step1.jsx (100%) rename source/views/Extension/Views/{ImportWallet => ImportPemFile}/Steps/Step2.jsx (100%) rename source/views/Extension/Views/{ImportWallet => ImportPemFile}/hooks/useSteps.jsx (95%) create mode 100644 source/views/Extension/Views/ImportPemFile/index.jsx rename source/views/Extension/Views/{ImportWallet => ImportPemFile}/styles.js (100%) diff --git a/source/views/Extension/Popup.jsx b/source/views/Extension/Popup.jsx index b35305d9..38135635 100644 --- a/source/views/Extension/Popup.jsx +++ b/source/views/Extension/Popup.jsx @@ -25,6 +25,7 @@ import ClockError from './Views/ClockError'; import Network from './Views/Network'; import NetworkCreation from './Views/NetworkCreation'; import ImportWallet from './Views/ImportWallet'; +import ImportPemFile from './Views/ImportPemFile'; const Popup = ({ initialRoute }) => ( @@ -38,6 +39,7 @@ const Popup = ({ initialRoute }) => ( {/* */} + diff --git a/source/views/Extension/Views/ImportWallet/Steps/Step1.jsx b/source/views/Extension/Views/ImportPemFile/Steps/Step1.jsx similarity index 100% rename from source/views/Extension/Views/ImportWallet/Steps/Step1.jsx rename to source/views/Extension/Views/ImportPemFile/Steps/Step1.jsx diff --git a/source/views/Extension/Views/ImportWallet/Steps/Step2.jsx b/source/views/Extension/Views/ImportPemFile/Steps/Step2.jsx similarity index 100% rename from source/views/Extension/Views/ImportWallet/Steps/Step2.jsx rename to source/views/Extension/Views/ImportPemFile/Steps/Step2.jsx diff --git a/source/views/Extension/Views/ImportWallet/hooks/useSteps.jsx b/source/views/Extension/Views/ImportPemFile/hooks/useSteps.jsx similarity index 95% rename from source/views/Extension/Views/ImportWallet/hooks/useSteps.jsx rename to source/views/Extension/Views/ImportPemFile/hooks/useSteps.jsx index 0d204d9b..4a9e425f 100644 --- a/source/views/Extension/Views/ImportWallet/hooks/useSteps.jsx +++ b/source/views/Extension/Views/ImportPemFile/hooks/useSteps.jsx @@ -24,7 +24,7 @@ const useSteps = () => { const steps = [ { component: , - left: leftButton(() => handleClose()), + left: leftButton(() => navigator.navigate('import-wallet')), right: rightButton, center: `${t("importPem.importPEMfile")}`, }, diff --git a/source/views/Extension/Views/ImportPemFile/index.jsx b/source/views/Extension/Views/ImportPemFile/index.jsx new file mode 100644 index 00000000..18be5bc5 --- /dev/null +++ b/source/views/Extension/Views/ImportPemFile/index.jsx @@ -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 ( + +
+ {component} + + ); +}; + +export default ImportWallet; diff --git a/source/views/Extension/Views/ImportWallet/styles.js b/source/views/Extension/Views/ImportPemFile/styles.js similarity index 100% rename from source/views/Extension/Views/ImportWallet/styles.js rename to source/views/Extension/Views/ImportPemFile/styles.js diff --git a/source/views/Extension/Views/ImportWallet/index.jsx b/source/views/Extension/Views/ImportWallet/index.jsx index 18be5bc5..a2b3652c 100644 --- a/source/views/Extension/Views/ImportWallet/index.jsx +++ b/source/views/Extension/Views/ImportWallet/index.jsx @@ -1,19 +1,25 @@ import React from 'react'; -import { Layout, Header } from '@components'; -import useSteps from './hooks/useSteps'; +import { Layout, Header, MenuItemDetailed } from '@components'; +import { LinkButton } from '@components'; +import { useTranslation } from 'react-i18next'; +import BackIcon from '@assets/icons/back.svg'; +import { useRouter } from '@components/Router'; const ImportWallet = () => { - const { - component, - left, - right, - center, - } = useSteps(); + const { t } = useTranslation(); + const { navigator } = useRouter(); + + + const left = navigator.navigate('home')} startIcon={BackIcon} />; + const right = navigator.navigate('home')} />; + const center = `${t("importPem.importPEMfile")}` + return (
- {component} + navigator.navigate('import-pem-file')}/> + navigator.navigate('import-pem-file')}/> ); }; From 852f0b1efd0f350177efda5601cd4cb1db5332fc Mon Sep 17 00:00:00 2001 From: Cancu Date: Wed, 19 Oct 2022 13:33:45 -0300 Subject: [PATCH 2/9] added emojis and import private key field --- source/assets/new-key.svg | 9 ++ source/assets/paper.svg | 9 ++ source/views/Extension/Popup.jsx | 2 + .../Views/ImportPrivateKey/Steps/Step1.jsx | 52 +++++++ .../Views/ImportPrivateKey/Steps/Step2.jsx | 127 ++++++++++++++++++ .../Views/ImportPrivateKey/hooks/useSteps.jsx | 44 ++++++ .../Views/ImportPrivateKey/index.jsx | 21 +++ .../Views/ImportPrivateKey/styles.js | 114 ++++++++++++++++ .../Extension/Views/ImportWallet/index.jsx | 6 +- 9 files changed, 382 insertions(+), 2 deletions(-) create mode 100644 source/assets/new-key.svg create mode 100644 source/assets/paper.svg create mode 100644 source/views/Extension/Views/ImportPrivateKey/Steps/Step1.jsx create mode 100644 source/views/Extension/Views/ImportPrivateKey/Steps/Step2.jsx create mode 100644 source/views/Extension/Views/ImportPrivateKey/hooks/useSteps.jsx create mode 100644 source/views/Extension/Views/ImportPrivateKey/index.jsx create mode 100644 source/views/Extension/Views/ImportPrivateKey/styles.js diff --git a/source/assets/new-key.svg b/source/assets/new-key.svg new file mode 100644 index 00000000..151a52f5 --- /dev/null +++ b/source/assets/new-key.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/source/assets/paper.svg b/source/assets/paper.svg new file mode 100644 index 00000000..1dc8a96a --- /dev/null +++ b/source/assets/paper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/source/views/Extension/Popup.jsx b/source/views/Extension/Popup.jsx index 38135635..7d8af582 100644 --- a/source/views/Extension/Popup.jsx +++ b/source/views/Extension/Popup.jsx @@ -26,6 +26,7 @@ import Network from './Views/Network'; import NetworkCreation from './Views/NetworkCreation'; import ImportWallet from './Views/ImportWallet'; import ImportPemFile from './Views/ImportPemFile'; +import ImportPrivateKey from './Views/ImportPrivateKey'; const Popup = ({ initialRoute }) => ( @@ -40,6 +41,7 @@ const Popup = ({ initialRoute }) => ( + diff --git a/source/views/Extension/Views/ImportPrivateKey/Steps/Step1.jsx b/source/views/Extension/Views/ImportPrivateKey/Steps/Step1.jsx new file mode 100644 index 00000000..64c0ad3f --- /dev/null +++ b/source/views/Extension/Views/ImportPrivateKey/Steps/Step1.jsx @@ -0,0 +1,52 @@ +import React, { useState, useCallback, useEffect } from "react"; +import { useTranslation } from "react-i18next"; +import useStyles from "../styles"; +import { CloudUpload } from "@material-ui/icons"; +import GradientFile from "@assets/icons/gradient-file.svg"; +import { Typography, Grid } from "@material-ui/core"; +import { Container, Button, TextInput, FormItem, UserIcon } from "@components"; + +const Step1 = ({ handleChangeStep, setUserPemFile, userPemFile }) => { + const { t } = useTranslation(); + const classes = useStyles(); + + const [loading, setLoading] = useState(false); + const [disabled, setDisabled] = useState(false); + + const [privateKey, setPrivateKey] = useState(null); + + return ( + + + + console.log(e.target)} + type="text" + data-testid="create-account-name-input" + /> + } + /> + + +