diff --git a/source/Background/Keyring/index.js b/source/Background/Keyring/index.js
index 79ec8537..d4b2d348 100644
--- a/source/Background/Keyring/index.js
+++ b/source/Background/Keyring/index.js
@@ -109,6 +109,7 @@ export const HANDLER_TYPES = {
GET_CURRENT_NETWORK: 'get-current-network',
IMPORT_PEM_ACCOUNT: 'import-pem-account',
REMOVE_PEM_ACCOUNT: 'remove-pem-account',
+ VALIDATE_PEM: 'validate-pem',
REMOVE_CUSTOM_TOKEN: 'remove-custom-token',
};
@@ -146,6 +147,7 @@ export const getKeyringErrorMessage = (type) => ({
[HANDLER_TYPES.REMOVE_CUSTOM_TOKEN]: 'removing custom token',
[HANDLER_TYPES.IMPORT_PEM_ACCOUNT]: 'importing account from pem',
[HANDLER_TYPES.REMOVE_PEM_ACCOUNT]: 'removing pem account',
+ [HANDLER_TYPES.VALIDATE_PEM]: 'validate pem',
}[type]);
export const sendMessage = (args, callback) => {
@@ -199,6 +201,7 @@ export const getKeyringHandler = (type, keyring) => ({
[HANDLER_TYPES.IMPORT_PEM_ACCOUNT]: async (params) => keyring.importAccountFromPem(params),
[HANDLER_TYPES.CREATE_PRINCIPAL]: async (params) => keyring.createPrincipal(params),
[HANDLER_TYPES.REMOVE_PEM_ACCOUNT]: async (params) => keyring.deleteImportedAccount(params),
+ [HANDLER_TYPES.VALIDATE_PEM]: async (params) => keyring.validatePem(params),
[HANDLER_TYPES.SET_CURRENT_PRINCIPAL]:
async (walletId) => {
await keyring.setCurrentPrincipal(walletId);
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/locales/en/translation.json b/source/locales/en/translation.json
index 6ffdbca8..f911138a 100644
--- a/source/locales/en/translation.json
+++ b/source/locales/en/translation.json
@@ -396,8 +396,12 @@
"dfxUse": "dfx identity use ",
"selectAccount": "Select Account"
},
+ "importWallet": {
+ "importWallet": "Import Wallet"
+ },
"importPem": {
"importPEMfile": "Import PEM file",
+ "description": "Import wallet through a PEM file",
"editWalletPic": "Edit Wallet Pic",
"walletDetails": "Wallet Details",
"dragAndDrop": "Drag and Drop",
@@ -406,6 +410,12 @@
"fileNotSupported": "File not supported. Try a different file.",
"dropIt": "Drop it!"
},
+ "importPrivateKey": {
+ "importPrivateKey": "Import Private Key",
+ "description": "Import wallet through a Private Key",
+ "privateKey": "Private Key",
+ "invalidString": "Invalid String. Please, try again."
+ },
"nfts": {
"allNfts": "All NFTs",
"expandNFT": "View",
diff --git a/source/views/Extension/Popup.jsx b/source/views/Extension/Popup.jsx
index b35305d9..7d8af582 100644
--- a/source/views/Extension/Popup.jsx
+++ b/source/views/Extension/Popup.jsx
@@ -25,6 +25,8 @@ 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';
+import ImportPrivateKey from './Views/ImportPrivateKey';
const Popup = ({ initialRoute }) => (
@@ -38,6 +40,8 @@ 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 87%
rename from source/views/Extension/Views/ImportWallet/hooks/useSteps.jsx
rename to source/views/Extension/Views/ImportPemFile/hooks/useSteps.jsx
index 0d204d9b..37eb8c95 100644
--- a/source/views/Extension/Views/ImportWallet/hooks/useSteps.jsx
+++ b/source/views/Extension/Views/ImportPemFile/hooks/useSteps.jsx
@@ -24,9 +24,9 @@ const useSteps = () => {
const steps = [
{
component: ,
- left: leftButton(() => handleClose()),
+ left: leftButton(() => navigator.navigate('import-wallet')),
right: rightButton,
- center: `${t("importPem.importPEMfile")}`,
+ center: `${t("importWallet.importWallet")}`,
},
{
component: {
userPemFile={userPemFile}
/>,
right: rightButton,
- center: `${t("importPem.walletDetails")}`,
+ center: `${t("importWallet.importWallet")}`,
},
];
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/ImportPrivateKey/Steps/Step1.jsx b/source/views/Extension/Views/ImportPrivateKey/Steps/Step1.jsx
new file mode 100644
index 00000000..74ebd5d4
--- /dev/null
+++ b/source/views/Extension/Views/ImportPrivateKey/Steps/Step1.jsx
@@ -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 (
+
+
+
+ handlePrivateKey(e)}
+ type="text"
+ data-testid="import-private-key-fill"
+ error={invalidPem}
+ />
+ }
+ />
+ {invalidPem && {`${t("importPrivateKey.invalidString")}`}}
+
+
+
+
+
+ );
+};
+
+export default Step1;
diff --git a/source/views/Extension/Views/ImportPrivateKey/Steps/Step2.jsx b/source/views/Extension/Views/ImportPrivateKey/Steps/Step2.jsx
new file mode 100644
index 00000000..755471a1
--- /dev/null
+++ b/source/views/Extension/Views/ImportPrivateKey/Steps/Step2.jsx
@@ -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 (
+
+
+
+
+
+