Merge branch 'release/0.6.1' of github.com:Psychedelic/plug into fix/…

…disable-import-wallet-firefox

package.json

@@ -38,7 +38,7 @@
     "@metamask/post-message-stream": "^4.0.0",
     "@psychedelic/browser-rpc": "2.1.0",
     "@psychedelic/dab-js": "1.5.0-beta.1",
-    "@psychedelic/plug-controller": "0.24.0",
+    "@psychedelic/plug-controller": "0.24.4",
     "@psychedelic/plug-inpage-provider": "^2.3.1",
     "@reduxjs/toolkit": "^1.6.0",
     "advanced-css-reset": "^1.2.2",

source/Background/Keyring/index.js

@@ -110,6 +110,8 @@ export const HANDLER_TYPES = {
   IMPORT_PEM_ACCOUNT: 'import-pem-account',
   REMOVE_PEM_ACCOUNT: 'remove-pem-account',
   REMOVE_CUSTOM_TOKEN: 'remove-custom-token',
+  GET_PRINCIPAL_FROM_PEM: 'get-principal-from-pem',
+  VALIDATE_PEM: 'validate-pem',
 };
 
 export const getKeyringErrorMessage = (type) => ({
@@ -196,7 +198,7 @@ export const getKeyringHandler = (type, keyring) => ({
       return null;
     }
   },
-  [HANDLER_TYPES.IMPORT_PEM_ACCOUNT]: async (params) => keyring.importAccountFromPem(params),
+  [HANDLER_TYPES.IMPORT_PEM_ACCOUNT]: keyring.importAccountFromPem,
   [HANDLER_TYPES.CREATE_PRINCIPAL]: async (params) => keyring.createPrincipal(params),
   [HANDLER_TYPES.REMOVE_PEM_ACCOUNT]: async (params) => keyring.deleteImportedAccount(params),
   [HANDLER_TYPES.SET_CURRENT_PRINCIPAL]:
@@ -484,6 +486,8 @@ export const getKeyringHandler = (type, keyring) => ({
       return { error: e.message };
     }
   },
+  [HANDLER_TYPES.GET_PRINCIPAL_FROM_PEM]: keyring.getPrincipalFromPem,
+  [HANDLER_TYPES.VALIDATE_PEM]: keyring.validatePem,
 }[type]);
 
 export const getContacts = () => new Promise((resolve, reject) => {

source/components/ICNSDisplay/index.jsx

@@ -11,14 +11,13 @@ const ICNSDisplay = ({
 }) => {
   const classes = useStyles();
   const [loading, setLoading] = useState(true);
-
   return (
     <div className={`${className} ${classes.wrapper} ${loading ? classes.loadingWrapper : ''}`}>
       <img
         className={classes.icnsBackground}
         onClick={onClick}
         onLoad={() => setLoading(false)}
-        src={icns.url}
+        src="https://icns.id/Rectangle.jpg"
       />
       <span className={`${classes.icnsName} ${large ? classes.large : ''}`}>
         {icns.name?.length > 12 ? shortICNSName(icns?.name) : icns?.name}

source/components/Profile/components/AccountItem/index.jsx

@@ -40,11 +40,9 @@ const AccountItem = ({
         classes.accountItemContainer,
         isHidden && classes.hiddenAccount,
       )}
+      onClick={(e) => handleChangeAccount(e, account.walletId)}
     >
-      <div
-        onClick={(e) => handleChangeAccount(e, account.walletId)}
-        className={classes.leftContainer}
-      >
+      <div className={classes.leftContainer}>
         <UserIcon
           size="small"
           icon={account?.icon ?? '👽'}

source/components/Profile/index.jsx

@@ -201,10 +201,9 @@ const Profile = ({ disableProfile }) => {
     sendMessage({
       type: HANDLER_TYPES.REMOVE_PEM_ACCOUNT,
       params: selectedRemoveAccount.walletId,
-    });
+    }, () => executeAccountSwitch(accounts[0].walletId));
     setOpenRemoveModal(false);
     setOpen(false);
-    navigator.navigate('home');
   };
 
 

source/views/Extension/Views/WalletDetails/components/DetailItem/index.jsx → source/components/WalletDetailItem/index.jsx

@@ -4,18 +4,19 @@ import { Typography } from '@material-ui/core';
 import { Info } from 'react-feather';
 import { useTranslation } from 'react-i18next';
 
-import { CopyButton, FormItem } from '@components';
+import CopyButton from '../CopyButton';
+import FormItem from '../FormItem';
+import InfoModal from '../InfoModal';
 
 import useStyles from './styles';
-import InfoModal from '../InfoModal';
 
-const DetailItem = ({
-  value, name, setInfoOpen, isOpen, copyButtonTestId, infoIconButtonTestId,
+const WalletDetailItem = ({
+  value, name, setInfoOpen, isOpen, copyButtonTestId, infoIconButtonTestId, className
 }) => {
   const classes = useStyles();
   const { t } = useTranslation();
   return (
-    <>
+    <div className={className}>
       <FormItem
         label={t(`common.${name}`)}
         smallLabel
@@ -41,22 +42,24 @@ const DetailItem = ({
         understandButtonTestId={`understand-${name}-button`}
         learnMoreButtonTestId="learn-more-button"
       />
-    </>
+    </div>
   );
 };
 
-DetailItem.propTypes = {
+WalletDetailItem.propTypes = {
   value: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   setInfoOpen: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
   copyButtonTestId: PropTypes.string,
   infoIconButtonTestId: PropTypes.string,
+  className: PropTypes.string,
 };
 
-DetailItem.defaultProps = {
+WalletDetailItem.defaultProps = {
   copyButtonTestId: '',
   infoIconButtonTestId: '',
+  className: '',
 };
 
-export default DetailItem;
+export default WalletDetailItem;

source/components/index.js

@@ -69,5 +69,7 @@ export { default as Badge } from './Badge';
 export { default as Title } from './Title';
 export { default as NFTDisplayer } from './NFTDisplayer';
 export { default as ICNSDisplay } from './ICNSDisplay';
+export { default as WalletDetailItem } from './WalletDetailItem';
+export { default as InfoModal } from './InfoModal';
 
 export * from './Router';

source/locales/en/translation.json

@@ -21,6 +21,10 @@
     "copyTextAddress": "Copy address to clipboard",
     "copiedText": "Copied!"
   },
+  "importPEM": {
+    "added-account": "Account already added",
+    "invalid-key": "Invalid PEM file"
+  },
   "profile": {
     "myAccounts": "My Accounts",
     "createAccount": "Create Account",

source/views/Extension/Views/ImportWallet/Steps/Step1.jsx

@@ -1,31 +1,32 @@
-import { Container, Button } from "@components";
 import React, { useState, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useDropzone } from "react-dropzone";
-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 { Plug } from "@components";
 import CloseIcon from "@material-ui/icons/Close";
+import { Typography, Grid } from "@material-ui/core";
 
-const Step1 = ({ handleChangeStep, setUserPemFile, userPemFile }) => {
+import { Container, Button, Plug } from "@components";
+import GradientFile from "@assets/icons/gradient-file.svg";
+
+import useStyles from "../styles";
+
+const Step1 = ({
+  handleChangeStep,
+  setUserPemFile,
+  userPemFile,
+  loadingValidate,
+  isPemValid,
+  importDisabled,
+}) => {
   const { t } = useTranslation();
   const classes = useStyles();
 
-  const [loading, setLoading] = useState(false);
-  const [disabled, setDisabled] = useState(false);
-
   const handleRemoveFile = () => {
-    setDisabled(false);
     setUserPemFile(null);
   };
 
   const onDrop = useCallback((acceptedFile) => {
-    setLoading(true);
     setUserPemFile(acceptedFile[0]);
-    setDisabled(true);
-    setLoading(false);
   }, []);
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -91,8 +92,8 @@ const Step1 = ({ handleChangeStep, setUserPemFile, userPemFile }) => {
             variant="rainbow"
             value={t("common.continue")}
             onClick={() => handleChangeStep(1)}
-            loading={loading}
-            disabled={!disabled}
+            loading={loadingValidate}
+            disabled={importDisabled}
             fullWidth
             data-testid="add-button"
           />

source/views/Extension/Views/ImportWallet/Steps/Step2.jsx

@@ -1,12 +1,19 @@
-import { Container, Button, TextInput, FormItem, UserIcon } from "@components";
+import React, { useEffect, useState } from "react";
 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";
+import { HANDLER_TYPES, sendMessage, asyncSendMessage } from "@background/Keyring";
+import {
+  Container,
+  Button,
+  TextInput,
+  FormItem,
+  UserIcon,
+  WalletDetailItem,
+} from "@components";
+import { useRouter } from "@components/Router";
+
+import useStyles from "../styles";
 
 const Step2 = ({ userPemFile }) => {
   const { t } = useTranslation();
@@ -17,11 +24,26 @@ const Step2 = ({ userPemFile }) => {
   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 [importedPrincipal, setImportedPrincipal] = useState();
+  const [detailsModalOpen, setDetailsModal] = useState(false);
 
   const { navigator } = useRouter();
 
   const classes = useStyles();
 
+  useEffect(() => {
+    let fileReader = new FileReader();
+    fileReader.readAsText(userPemFile);
+    fileReader.onloadend = () => {
+      const content = fileReader.result;
+
+      asyncSendMessage({
+        type: HANDLER_TYPES.GET_PRINCIPAL_FROM_PEM,
+        params: { pem: content },
+      }).then(setImportedPrincipal);
+    };
+  }, [userPemFile]);
+
   useEffect(() => {
     if (walletName && walletName !== "") {
       setDisabled(true);
@@ -59,6 +81,10 @@ const Step2 = ({ userPemFile }) => {
     };
   };
 
+  const openDetailsModal = () => {
+    setDetailsModal(!detailsModalOpen);
+  };
+
   return (
     <Container>
       <Grid container spacing={2}>
@@ -109,6 +135,15 @@ const Step2 = ({ userPemFile }) => {
               />
             }
           />
+          <WalletDetailItem
+            name="principalId"
+            value={importedPrincipal}
+            className={classes.principalDetails}
+            setInfoOpen={setDetailsModal}
+            isOpen={detailsModalOpen}
+            copyButtonTestId="copy-principalId-button"
+            infoIconButtonTestId="info-principalId-icon-button"
+          />
           <Button
             variant="rainbow"
             value={t("common.save")}

source/views/Extension/Views/ImportWallet/hooks/useSteps.jsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { HANDLER_TYPES, sendMessage } from "@background/Keyring";
+import { toast } from 'react-toastify';
 import { LinkButton } from '@components';
 import { useTranslation } from 'react-i18next';
 import { useRouter } from '@components/Router';
@@ -12,18 +14,53 @@ const useSteps = () => {
   const { t } = useTranslation();
 
   const [userPemFile, setUserPemFile] = useState(null);
+  const [validateLoading, setValidateLoading] = useState(false);
+  const [importDisabled, setImportDisabled] = useState(true);
 
   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} />;
 
+  useEffect(() => {
+    if (userPemFile === null) {
+      setImportDisabled(true);
+      return;
+    }
 
+    setValidateLoading(true);
+    let fileReader = new FileReader();
+    fileReader.readAsText(userPemFile);
+    fileReader.onloadend = async () => {
+      const content = fileReader.result;
+
+      sendMessage({
+        type: HANDLER_TYPES.VALIDATE_PEM,
+        params: { pem: content },
+      }, (response) => {
+        const { isValid, errorType } = response;
+        if (!isValid) {
+          toast(t(`importPEM.${errorType}`), { type: 'error' });
+          setUserPemFile(null);
+        }
+        setValidateLoading(false);
+        setImportDisabled(!isValid);
+      });
+    };
+  }, [userPemFile]);
 
   const steps = [
     {
-      component: <Step1 handleChangeStep={handleChangeStep} setUserPemFile={setUserPemFile} userPemFile={userPemFile} />,
+      component: (
+        <Step1
+          handleChangeStep={handleChangeStep}
+          setUserPemFile={setUserPemFile}
+          validateLoading={validateLoading}
+          importDisabled={importDisabled}
+          userPemFile={userPemFile}
+        />
+      ),
       left: leftButton(() => handleClose()),
       right: rightButton,
       center: `${t("importPem.importPEMfile")}`,

source/views/Extension/Views/ImportWallet/styles.js

@@ -47,6 +47,9 @@ export default makeStyles((theme) => ({
   formItem: {
     marginBottom: 35,
   },
+  principalDetails: {
+    marginBottom: 30,
+  },
   inputFileLabel: {
     textDecorationLine: 'underline',
     textDecorationColor: '#3574F4',

source/views/Extension/Views/WalletDetails/components/ICNSToggle/index.jsx

@@ -6,11 +6,10 @@ import { useTranslation } from 'react-i18next';
 import extension from 'extensionizer';
 
 import ICNS_IMG from '@assets/icons/icns.svg';
-import { Switch, Button } from '@components';
+import { Switch, Button, InfoModal } from '@components';
 
 import useStyles from './styles';
 import ICNSSelector from '../ICNSSelector';
-import InfoModal from '../InfoModal';
 
 const ICNSToggle = ({
   active,